/* ============================================================
   TRIPLE – Global Styles
   Stack: HTML + Tailwind CDN + this file
============================================================ */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: 'Aileron', sans-serif;
  background: #fff;
  color: #211d34;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p { margin: 0; }
a { text-decoration: none; }

/* === SCROLLBAR HIDE === */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   MARQUEE ANIMATIONS
============================================================ */
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.animate-marquee-left  { animation: marquee-left  30s linear infinite; }
.animate-marquee-right { animation: marquee-right 30s linear infinite; }

/* ============================================================
   NAVBAR DROPDOWN ITEMS
============================================================ */
/* Productos dropdown item */
.nav-prod-item { transition: background 0.15s; }
.nav-prod-item:hover { background: #f5f5f7; border-radius: 10px; }

.nav-prod-icon {
  background: rgba(222,21,121,0.05);
  transition: background 0.15s;
}
.nav-prod-item:hover .nav-prod-icon { background: #DE1579; }

.nav-prod-icon img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(40%) saturate(800%) hue-rotate(285deg) brightness(75%);
  transition: filter 0.15s;
}
.nav-prod-item:hover .nav-prod-icon img { filter: brightness(0) invert(1); }

.nav-prod-arrow { opacity: 0; transition: opacity 0.15s; }
.nav-prod-item:hover .nav-prod-arrow { opacity: 1; }

.nav-prod-title { transition: color 0.15s; }
.nav-prod-item:hover .nav-prod-title { color: #b02d6e; }

.nav-prod-desc { transition: color 0.15s; }
.nav-prod-item:hover .nav-prod-desc { color: #211d34; }

/* Compañía dropdown item */
.nav-cia-item { transition: background 0.15s; border-radius: 10px; }
.nav-cia-item:hover { background: #f0e6ee; }

.nav-cia-icon {
  background: #211d34;
  transition: background 0.15s;
}
.nav-cia-item:hover .nav-cia-icon { background: #DE1579; }

.nav-cia-arrow { opacity: 0; transition: opacity 0.15s; }
.nav-cia-item:hover .nav-cia-arrow { opacity: 1; }

.nav-cia-desc { transition: color 0.15s; }
.nav-cia-item:hover .nav-cia-desc { color: #211d34; }

/* ============================================================
   MODULE CAROUSEL CARDS
============================================================ */
.module-card {
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.module-card.active {
  opacity: 1;
  transform: translateY(-8px);
  box-shadow: 0px -4px 15px 0px rgba(222,21,121,0.2), 0px 8px 20px 0px rgba(0,0,0,0.2);
}
.module-card.inactive { opacity: 0.5; }
.module-card.inactive:hover { opacity: 0.75; }

.module-explore { display: none; align-items: center; gap: 5px; transition: transform 0.2s ease; }
.module-card.active .module-explore { display: flex; }
.module-explore span { transition: color 0.2s ease; }
.module-explore:hover { transform: scale(1.04); }
.module-explore:hover span { color: #b02d6e; }

/* ============================================================
   VS SECTION – Glassmorphism bubble
============================================================ */
.vs-bubble {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ============================================================
   LAST SECTION (CTA white card hover)
============================================================ */
.cta-card {
  border-radius: 200px;
  margin-left: 100px;
  margin-right: 100px;
  transition: border-radius 0.7s ease, margin-left 0.7s ease, margin-right 0.7s ease;
}
.cta-card:hover {
  border-radius: 100px;
  margin-left: 0;
  margin-right: 0;
}

/* ============================================================
   AI CARDS
============================================================ */
.ai-card-img   { transition: opacity 0.3s; }
.ai-card-title { transition: opacity 0.3s; }
.ai-card-desc  { transition: opacity 0.3s; }

/* ============================================================
   WHY TRIPLE CARDS — microinteractions
============================================================ */
.why-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.why-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0 50px rgba(176, 45, 110, 0.22), 0 8px 30px rgba(176, 45, 110, 0.12);
  z-index: 2;
}
/* Sibling cards shrink subtly on the X axis */
.why-cards-group:has(.why-card:hover) .why-card:not(:hover) {
  transform: scaleX(0.97);
}

/* ============================================================
   HERO GLOW — reusable magenta pulse
============================================================ */
@keyframes hero-glow-pulse {
  0%, 100% { box-shadow: 0px 0px 45px 0px rgba(222, 21, 121, 0.35); }
  50%       { box-shadow: 0px 0px 70px 10px rgba(176,  45, 110, 0.50); }
}
.hero-glow {
  animation: hero-glow-pulse 4s ease-in-out infinite;
}

/* ============================================================
   PAGE FADE-IN — activated via .page-loaded on body
============================================================ */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1 }
}

body.page-loaded {
  animation: page-fade-in 0.6s ease forwards;
}

/* ============================================================
   FEATURE IMAGE CONTAINERS — hover glow & scale
============================================================ */
#feature-1-img,
#feature-2-img,
#feature-3-img,
#feature-4-img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#feature-1-img:hover,
#feature-2-img:hover,
#feature-3-img:hover,
#feature-4-img:hover {
  transform: scale(1.025);
  box-shadow: 0 0 0 0 rgba(176,45,110,0), 0 8px 40px rgba(176,45,110,0.25), 0 0 60px rgba(176,45,110,0.18);
}