:root{
  --navy:#1E2C51;
  --navy-ink:#12182E;
  --crimson:#EA2151;
  --crimson-dark:#C81743;
  --crimson-tint:#FDEBEF;
  --navy-tint:#EDF0F8;
  --paper:#F6F7FB;
  --line:#E3E6F0;
  --white:#FFFFFF;
  --muted:#5B6478;
  /* Distancia desde el borde real del viewport hasta el borde de
     contenido de .wrap (max-width:1180px + padding:32px). Para
     secciones full-bleed que solo necesitan alinearse con el contenido
     normal del sitio (títulos de sección, etc). */
  --wrap-edge: max(32px, calc((100vw - 1180px) / 2 + 32px));
  /* Ojo: esto NO es lo mismo que el logo del header — .site-header .wrap
     usa max-width:1340px (más ancho, para que quepan todos los
     elementos del nav), así que su borde de contenido cae más cerca del
     borde real de la pantalla que el de .wrap normal. Mismo cálculo que
     ya usaba .hero-half-inner más abajo en este archivo. Fuente única de
     verdad para cualquier sección full-bleed que deba alinearse
     exactamente con el logo (ej. los CTA con imagen partida en diagonal). */
  --header-edge: max(32px, calc((100vw - 1340px) / 2 + 32px));
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif; color:var(--navy-ink); background:var(--white); line-height:1.5; overflow-x:hidden; overflow-y:visible;}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* ============================================
   HEADER — dos estados: transparente (sobre hero
   del home) y sólido (resto del sitio / al hacer scroll)
   ============================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
  transition:background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-transparent{
  background:transparent; border-bottom-color:transparent;
}
.site-header.is-transparent.scrolled{
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(18,24,46,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; gap:16px;}
.site-header .wrap{max-width:1340px;} /* el header necesita más ancho que el resto del sitio para que quepan todos los elementos */

.logo{display:flex; align-items:center;}
.logo-img{height:52px; width:auto; object-fit:contain; transition:opacity .3s ease;}
.logo-img-white{display:none;}
.site-header.is-transparent:not(.scrolled) .logo-img-color{display:none;}
.site-header.is-transparent:not(.scrolled) .logo-img-white{display:block;}

.nav-links{display:flex; align-items:center; gap:20px; font-size:14px; font-weight:500; white-space:nowrap;}
.nav-links a{position:relative; padding:6px 0; color:var(--navy-ink); transition:color .3s ease;}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--crimson); transform:scaleX(0); transform-origin:right;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1); transform-origin:left;}
.store-link::after{display:none;}
.site-header.is-transparent:not(.scrolled) .nav-links > a,
.site-header.is-transparent:not(.scrolled) .nav-item > .mega-trigger{
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.45);
}
.nav-links a:hover, .nav-links a.active{color:var(--crimson);}
.site-header.is-transparent:not(.scrolled) .nav-links > a:hover,
.site-header.is-transparent:not(.scrolled) .nav-links > a.active,
.site-header.is-transparent:not(.scrolled) .nav-item > .mega-trigger:hover,
.site-header.is-transparent:not(.scrolled) .nav-item > .mega-trigger.active{color:#fff;}

/* ============================================
   MEGA-MENÚ — se despliega al pasar el cursor sobre "Servicios"
   ============================================ */
.nav-item{position:relative; display:flex; align-items:center; align-self:stretch;}
.mega-trigger{display:inline-flex; align-items:center; gap:6px;}
.mega-trigger svg{opacity:.8; transition:transform .25s ease;}
.nav-item:hover .mega-trigger svg:last-child{transform:rotate(180deg);}

.mega-menu{
  position:fixed; top:80px; left:0; transform:scaleY(0.85) translateY(-6px);
  transform-origin:top;
  width:680px; max-width:min(680px, 85vw);
  background:var(--navy);
  border:none; border-top:2px solid rgba(234,33,81,.5); border-radius:0 0 16px 16px;
  box-shadow:0 28px 50px -20px rgba(18,24,46,.4);
  padding:26px 10px 0; display:flex; flex-direction:column; gap:8px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s, transform .3s cubic-bezier(.2,.8,.3,1.15);
  z-index:200;
}
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.mega-menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:scaleY(1) translateY(0);
}
.mega-menu-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.mega-col{padding:0 18px; border-left:1px solid rgba(255,255,255,.14);}
.mega-col:first-child{border-left:none;}
.mega-col h5{
  font-family:'Montserrat'; font-size:12px; font-weight:700; color:#fff;
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:14px;
}
.mega-col a{display:block; padding:7px 0; font-size:13.5px; color:#B9C2E0; border-bottom:none;}
.mega-col a::after{display:none;}
.mega-col a:hover{color:var(--crimson);}
/* Página actual dentro del mega-menú: como el underline (::after) está
   apagado en esta lista, la marca de "activo" es color + peso + un
   punto antes del texto, en vez del subrayado que usa el resto del nav. */
.mega-col a.active{color:var(--crimson); font-weight:700;}
.mega-col a.active::before{content:"• "; }

/* Franja inferior del mega-menú: invitación a contactar por WhatsApp
   cuando el usuario no encuentra el servicio que busca en las columnas
   de arriba. Separada por una línea, texto a la izquierda y botón a
   la derecha (misma franja se apila en mobile, ver media query). */
.mega-menu-footer{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:18px; padding:22px 26px 28px;
  border-top:1px solid rgba(255,255,255,.14);
}
.mega-menu-footer-text h6{
  font-family:'Montserrat'; font-weight:700; font-size:14.5px; color:#fff;
  margin-bottom:6px;
}
.mega-menu-footer-text p{font-size:12.5px; color:#B9C2E0; margin:0;}

/* .btn-whatsapp vive dentro de .nav-links, así que sin estas reglas
   heredaría el subrayado y el color guinda del hover genérico de los
   links del menú (.nav-links a:hover, .nav-links a::after) — se anulan
   acá explícitamente para que el botón se quede siempre verde/blanco. */
.btn-whatsapp{
  flex-shrink:0;
  gap:10px; padding-left:22px !important; padding-right:22px !important;
  background:#25D366; color:#fff !important;
}
.btn-whatsapp::after{display:none;}
.btn-whatsapp:hover{
  background:#1DA851; color:#fff !important;
  transform:translateY(-2px);
}
.btn-whatsapp i{font-size:15px;}

/* ============================================
   ACCIONES DEL NAV
   ============================================ */
.nav-actions{
  display:flex; align-items:center; gap:18px;
  margin-left:24px;
}

.lang-switch{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--muted);}
.lang-switch span{color:var(--line);}
/* Antes emoji de bandera — en Windows se mostraban como texto plano
   "PE"/"US" (sin fuente de color instalada), así que ahora es un SVG
   propio (ver nav.php: $flagPe/$flagUs), con tamaño explícito acá. */
.lang-btn{background:none; border:none; padding:2px; cursor:pointer; display:flex; align-items:center; color:var(--muted); font-weight:600; line-height:1; font-family:'Poppins'; border-bottom:2px solid transparent;}
.lang-btn svg{width:19px; height:13px; border-radius:2px; display:block;}
.lang-btn.is-active{border-bottom-color:var(--crimson);}
.lang-btn:hover{opacity:.8;}
.site-header.is-transparent:not(.scrolled) .lang-switch{color:#C7CEE3; text-shadow:0 1px 4px rgba(0,0,0,.45);}
.site-header.is-transparent:not(.scrolled) .lang-btn{color:#C7CEE3; text-shadow:0 1px 4px rgba(0,0,0,.45);}
.site-header.is-transparent:not(.scrolled) .lang-btn.is-active{color:#fff;}

/* Copia del selector de idioma para mobile (ver nota en nav.php): vive
   fuera de #navLinks, así que hereda los mismos colores de arriba
   (oscuro sobre header blanco / claro sobre el hero transparente del
   home) en vez del gris claro pensado para el panel oscuro deslizante.
   Oculta en desktop — la de siempre sigue viviendo en .nav-actions. */
.lang-switch-mobile{display:none;}

.store-link{
  white-space:nowrap; position:relative;
  border:1.5px solid var(--navy); background:transparent;
  padding-left:26px !important; padding-right:26px !important;
}
.site-header.is-transparent:not(.scrolled) .store-link{border-color:rgba(255,255,255,.45); color:#fff;}
.store-link:hover{transform:translateY(-2px);}
.nav-links a.store-link:hover{color:#fff;}

.store-border{position:absolute; inset:-1.5px; width:auto; height:auto; pointer-events:none; overflow:visible;}
.store-border rect{
  fill:none; stroke:var(--crimson); stroke-width:2.5; stroke-linecap:round;
}

.burger{display:none; background:none; border:none; color:var(--navy); cursor:pointer; transition:color .3s ease;}
.site-header.is-transparent:not(.scrolled) .burger{color:#fff;}

/* Botón "X" para cerrar el panel deslizante — solo existe/se ve en
   mobile (ver @media más abajo), fuera de eso queda oculto. */
.nav-close{display:none;}

body{padding-top:80px;}
body.home{padding-top:0;}

/* Desenfoca el resto de la página mientras el panel del menú móvil
   está abierto (ver main.js: body.nav-open se agrega/quita junto con
   navLinks.classList("open")) — todo, menos el propio header (donde
   vive el panel), para que quede claro que ese es el elemento activo. */
body > *:not(.site-header){transition:filter .3s ease;}
body.nav-open > *:not(.site-header){filter:blur(6px);}

/* ============================================
   BOTONES
   ============================================ */
.btn{
  padding:14px 26px; border-radius:10px; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer;
  font-family:'Poppins', sans-serif; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--crimson); color:#fff;}
.btn-primary:hover{background:var(--crimson-dark); transform:translateY(-2px);}
.btn-outline{border:1.5px solid var(--navy); color:var(--navy); background:none;}
.btn-outline:hover{background:var(--navy); color:#fff; transform:translateY(-2px);}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.06);}
.btn-outline-light:hover{background:rgba(255,255,255,.16); border-color:#fff;}
.btn-white{background:#fff; color:var(--crimson);}
.btn-white:hover{box-shadow:0 10px 26px rgba(0,0,0,.18); transform:translateY(-2px);}
.btn-sm{padding:10px 18px; font-size:13.5px; border-radius:8px;}
.nav-cta{white-space:nowrap; box-shadow:none;}

.accent{color:var(--crimson);}
.link{color:var(--crimson); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px;}

.eyebrow{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--crimson); display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--crimson); box-shadow:0 0 0 4px var(--crimson-tint);}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.badge{font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:20px; background:var(--crimson-tint); color:var(--crimson); display:inline-flex; align-items:center; gap:6px;}

.hero{padding:70px 0 80px; background:radial-gradient(circle at 85% 0%, var(--crimson-tint) 0%, transparent 45%), radial-gradient(circle at 0% 100%, var(--navy-tint) 0%, transparent 40%);}

/* ============================================
   PARALLAX HERO — Nosotros/Servicios
   ============================================ */
.parallax-hero{
  position:relative; overflow:visible; z-index:5; box-sizing:border-box;
  /* 100vh a secas es la causa más documentada de bugs de layout en
     móvil: al esconderse/mostrarse la barra de direcciones del
     navegador (Android sobre todo), 100vh se recalcula en ese instante
     y provoca un reflow que puede descolocar otros elementos fixed de
     la página (el header). 100dvh (dynamic viewport height) sí se
     ajusta de forma nativa sin ese reflow — se declara DESPUÉS como
     mejora progresiva: los navegadores que no soportan dvh ignoran esa
     línea y se quedan con el 100vh de arriba. Mismo patrón ya usado en
     .hero-medida-split (software-a-medida.php) más arriba en este
     archivo. */
  height:100vh;
  height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:80px 0;
}
.parallax-media{position:absolute; inset:0; z-index:0;}
.parallax-img{
  width:100%; height:100%; object-fit:cover;
}
.parallax-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,24,46,.88) 0%, rgba(18,24,46,.80) 45%, rgba(18,24,46,.93) 100%);
}
.parallax-visual{
  position:absolute; z-index:0;
  top:0; left:0; right:0;
  /* Mismo problema que .parallax-hero (100vh): bottom:-30vh también se
     recalcula cada vez que la barra de Chrome se anima en móvil,
     provocando un reflow de este elemento (que además tiene
     will-change:transform) justo en el mismo instante que el header —
     dvh como mejora progresiva evita ese recálculo. */
  bottom:-30vh;
  bottom:-30dvh;
  transform-origin:center center;
  will-change:transform, opacity;
}
.parallax-content{position:relative; z-index:2; max-width:760px; margin:0 auto;}
.parallax-content h1{font-size:46px; line-height:1.15; color:#fff; margin:0 auto;}
.parallax-content .sub{font-size:17px; color:#C7CEE3; max-width:560px; margin:18px auto 0;}
.parallax-content .cta-row{margin-top:28px;}
.parallax-content .badge-row{margin-top:20px; margin-bottom:0;}
@media (max-width:760px){
  .parallax-content h1{font-size:32px;}
  .parallax-content .sub{font-size:15.5px;}
  .parallax-content .badge-row{margin-top:14px;}
  .parallax-content .cta-row{margin-top:20px;}
}

.glass-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  border-radius:14px;
}

@media (max-width:860px){
  .parallax-hero{height:100vh; height:100dvh; padding:60px 0;}
  /* En este ancho el efecto de zoom-por-scroll está apagado (ver
     main.js) — sin esa animación, el excedente de -30dvh que quedaba
     oculto por el mask dinámico se ve como un bloque oscuro sólido
     invadiendo la siguiente sección. Se recorta exacto al tamaño del
     hero acá, ya que no hace falta ese margen extra sin la animación. */
  .parallax-visual{bottom:0;}
}
@media (prefers-reduced-motion: reduce){
  .parallax-img{transform:none !important; opacity:1 !important;}
}

/* ============================================================
   HERO (software-a-medida.php) — una sola pantalla limpia: texto a
   la izquierda + mockup de editor de código a la derecha. Antes eran
   dos mitades apiladas con fotos borrosas de stock; la mitad inferior
   ("¿Por qué invertir en un sistema propio?") repetía el mismo
   mensaje que la sección de Beneficios de más abajo, así que se quitó
   por completo en vez de dejar el hero cargado con dos pantallas.
   ============================================================ */
.hero-medida-split{
  background:var(--navy-ink);
  display:flex; flex-direction:column;
  min-height:calc(100vh - 80px);
  min-height:calc(100dvh - 80px);
}
.hero-half{
  position:relative; overflow:hidden;
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center;
}

/* Foto de fondo de la mitad superior, misma técnica que el hero de
   páginas web (pagina-web.css: .hero-video-section): la imagen se
   funde con una máscara + un degradado propio (acá tonos navy-ink en
   vez de paper), en vez del scroll-zoom completo que usa el hero de
   Nosotros — por eso se anula el -30vh y el fade de opacidad del
   .parallax-visual genérico con data-no-opacity-fade. */
.hero-half-top .parallax-visual{top:0; left:0; right:0; bottom:0;}
.hero-half-top .parallax-img{
  object-position:70% center;
  filter:saturate(.7) brightness(.75);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 38%, #000 68%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 38%, #000 68%);
}
.hero-half-top::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    var(--navy-ink) 0%,
    var(--navy-ink) 30%,
    rgba(18,24,46,.7) 50%,
    rgba(18,24,46,.2) 74%,
    transparent 92%
  );
}

@media (max-width:1000px){
  .hero-half-top .parallax-img{opacity:.25;}
  .hero-half-top::before{
    background:linear-gradient(180deg,
      var(--navy-ink) 0%,
      var(--navy-ink) 45%,
      rgba(18,24,46,.75) 75%,
      rgba(18,24,46,.45) 100%
    );
  }
}

.hero-half-inner{
  position:relative; z-index:2;
  width:100%;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  /* Alinea el contenido exactamente con el logo del header: mismo
     cálculo que .site-header .wrap (max-width:1340px + padding:32px). */
  padding:0 max(32px, calc((100vw - 1340px) / 2 + 32px));
}
.hero-half-content{max-width:560px;}
.hero-half h1{color:#fff; font-size:46px; line-height:1.18; max-width:540px; margin:0;}
.hero-half h1 .accent{color:var(--crimson);}
.hero-half .sub{color:#C7CEE3; font-size:17px; line-height:1.6; max-width:480px; margin:12px 0 0;}
.hero-half .eyebrow{margin-bottom:6px;}
.hero-half .cta-row{margin-top:20px;}

.hero-half-glow{
  position:absolute; z-index:0; top:10%; right:8%;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(234,33,81,.25), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
}

/* ---------- mockup de editor de código ---------- */
.hero-code-visual{position:relative; z-index:1;}
.hero-code-card{
  border-radius:16px; overflow:hidden;
  background:#12182E; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 50px 90px -28px rgba(0,0,0,.55);
  animation:heroCodeFloat 7s ease-in-out infinite;
}
@keyframes heroCodeFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}
.hero-code-topbar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-code-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.hero-code-filename{margin-left:8px; font-family:'IBM Plex Mono'; font-size:11.5px; color:#8791AE;}
.hero-code-body{padding:22px 24px 26px; font-family:'IBM Plex Mono'; font-size:13.5px; line-height:2;}
.hero-code-line{white-space:pre; color:#DCE1F2;}
.hero-code-indent-1{padding-left:24px;}
.hero-code-indent-2{padding-left:48px;}
.tok-kw{color:#FF6B93;}
.tok-fn{color:#4C8DFF;}
.tok-var{color:#3DDC97;}
.tok-num{color:#F5A524;}

.hero-code-badge{
  position:relative; z-index:2; margin:-16px 0 0 24px; width:fit-content;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:14px;
  background:#fff; color:var(--navy);
  font-size:12.5px; font-weight:700;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.4);
}
.hero-code-badge svg{color:#1EA672;}

@media (prefers-reduced-motion: reduce){ .hero-code-card{animation:none;} }

.reveal-left{transform:translateX(60px);}
.reveal-left.in-view{transform:translateX(0);}
.reveal-right{transform:translateX(-60px);}
.reveal-right.in-view{transform:translateX(0);}

@media (max-width:1000px){
  .hero-half-inner{grid-template-columns:1fr; text-align:center;}
  .hero-half-content{max-width:none; margin:0 auto; text-align:center;}
  .hero-half h1, .hero-half .sub{max-width:560px; margin-left:auto; margin-right:auto;}
  .hero-half .cta-row{justify-content:center;}
  /* .eyebrow es un flex row (ícono + texto): text-align:center del
     contenedor no alinea el contenido de un elemento flex, hace falta
     justify-content acá — por eso quedaba pegado a la izquierda pese
     al resto del bloque ya centrado. */
  .hero-half .eyebrow{justify-content:center;}
  /* Ni el mockup de código ni la pastilla "Sistema en producción" se
     muestran en mobile — el hero queda solo con el texto. */
  .hero-code-visual{display:none;}
}

@media (max-width:640px){
  /* Antes quedaba a min-height:0 (solo el alto del contenido, mucho
     más corto que la pantalla). Ahora ocupa toda la altura visible
     restando el alto real del header en mobile (67px, ver body{} más
     arriba), en vez de los 80px pensados para escritorio. */
  .hero-medida-split{min-height:calc(100vh - 67px); min-height:calc(100dvh - 67px);}
  .hero-half{padding:56px 0;}
  .hero-half h1{font-size:32px;}
  .hero-half .sub{font-size:15.5px;}
  .hero-code-body{font-size:12px;}
}

/* ============================================================
   BENEFICIOS (software-a-medida.php) — fondo blanco, 4 tarjetas
   iguales, flotan alternado (1,3 arriba / 2,4 abajo) en su propio
   wrapper separado del hover, para que ningún transform compita.
   ============================================================ */
.benefits-section{padding:90px 0; background:#fff;}
.benefits-section .section-head h2{color:var(--navy);}
.benefits-section .section-head p{color:var(--muted);}

.benefits-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  align-items:stretch;
}

.benefit-reveal, .benefit-card-float{height:100%;}

.benefit-card-float{
  --float-y: -14px;
  animation-duration:6s; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  animation-name:benefitFloat;
}
.benefit-float-up{ --float-y: -14px; }
.benefit-float-down{ --float-y: 14px; }
@keyframes benefitFloat{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(var(--float-y));}
}

.benefit-card{
  position:relative;
  height:100%; display:flex; flex-direction:column;
  background:#fff; border:1.5px solid var(--line); border-radius:18px;
  padding:34px 26px 30px; text-align:center;
  box-shadow:0 14px 34px -24px rgba(30,44,81,.25);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.benefit-card:hover{
  transform:translateY(-5px);
  border-color:var(--crimson);
  box-shadow:0 0 0 1px var(--crimson), 0 0 24px rgba(234,33,81,.35), 0 22px 44px -20px rgba(30,44,81,.28);
}

.benefit-card-img{
  width:100%; max-width:185px; height:auto;
  margin:0 auto 20px; display:block;
}

.benefit-card h3{font-size:16.5px; color:var(--navy); margin-bottom:8px;}

.benefit-card .benefit-desc{
  color:var(--navy); font-weight:600; font-size:14.5px; line-height:1.5;
}

.benefit-card ul{
  margin-top:16px; padding-left:18px; text-align:left;
  color:var(--muted); font-size:12.5px; line-height:1.85;
}
.benefit-card ul li{margin-bottom:2px;}

@media (prefers-reduced-motion: reduce){
  .benefit-card-float{animation:none;}
}

@media (max-width:1080px){
  .benefits-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .benefits-grid{grid-template-columns:1fr;}
}

/* ============================================================
   CASOS DE USO (software-a-medida.php) — carrusel único, tarjeta
   navy con texto a la izquierda y la imagen a la derecha
   fundiéndose en degradado (sin texto sobre la foto), transición
   automática + pestañas clicables debajo.
   ============================================================ */
.casos-carousel{
  position:relative; overflow:hidden;
  background:var(--navy); border-radius:24px;
  min-height:440px;
}
.casos-slide{
  position:absolute; inset:0; z-index:0;
  display:grid; grid-template-columns:1.15fr 1fr; align-items:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity 1.1s ease-in-out, transform 1.1s ease-in-out, visibility 0s linear 1.1s;
}
.casos-slide.is-active{
  opacity:1; visibility:visible; transform:translateY(0); z-index:1;
  transition:opacity 1.1s ease-in-out, transform 1.1s ease-in-out, visibility 0s linear;
}

.casos-slide-text{padding:48px 54px; position:relative; z-index:2;}
.casos-slide-text .badge{margin-bottom:16px;}
.casos-slide-text h3{color:#fff; font-size:32px; font-weight:800; margin-bottom:16px; line-height:1.15;}
.casos-slide-text p{color:#fff; font-size:17px; font-weight:500; line-height:1.6; max-width:420px;}
.casos-slide-list{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px; max-width:420px;
}
.casos-slide-list li{
  color:#C7CEE3; font-size:14.5px; line-height:1.5;
  padding-left:20px; position:relative;
}
.casos-slide-list li::before{
  content:""; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:50%;
  background:var(--crimson);
}

.casos-slide-media{position:relative; height:100%; min-height:440px; overflow:hidden;}
.casos-slide-media img{width:100%; height:100%; object-fit:cover; display:block;}
.casos-slide-media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, var(--navy) 0%, rgba(30,44,81,.55) 32%, transparent 68%);
}

.casos-tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; margin-top:30px;}
.casos-tab{
  padding:6px 2px; border:none; background:none;
  color:var(--muted); font-weight:700; font-size:15.5px;
  font-family:'Poppins'; cursor:pointer; position:relative;
  transition:color .25s ease;
}
.casos-tab::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--crimson); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.casos-tab:hover{color:var(--navy);}
.casos-tab.is-active{color:var(--crimson);}
.casos-tab.is-active::after{transform:scaleX(1);}

@media (max-width:860px){
  .casos-slide{position:relative; display:block; opacity:1; visibility:visible;}
  .casos-slide:not(.is-active){display:none;}
  .casos-carousel{min-height:0;}
  .casos-slide-text{padding:36px 28px;}
  .casos-slide-media{min-height:200px;}
  .casos-slide-media::before{background:linear-gradient(180deg, transparent 40%, var(--navy) 100%);}
}

/* ============================================================
   CTA FINAL (software-a-medida.php) — full-bleed, degradado navy
   → guinda, íconos de confianza. Clases propias (.cta-fullwidth)
   para NO tocar .final-cta, que otras páginas usan en su versión
   original (tarjeta redondeada contenida).
   ============================================================ */
.cta-fullwidth{
  position:relative; overflow:hidden;
  width:100%;
  background:linear-gradient(115deg, var(--navy) 0%, var(--navy) 62%, var(--crimson-dark) 100%);
  padding:64px 24px;
}
.cta-fullwidth::after{
  content:""; position:absolute; right:-60px; bottom:-90px;
  width:280px; height:280px;
  border:2px solid rgba(255,255,255,.1); border-radius:40px;
  transform:rotate(18deg);
  pointer-events:none;
}
.cta-fullwidth-inner{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:36px; flex-wrap:wrap;
}
.cta-fullwidth-text h2{color:#fff; font-size:29px; max-width:580px; line-height:1.25;}
.cta-fullwidth-text p{color:#F5D2DE; font-size:15.5px; margin-top:10px;}

.cta-fullwidth-points{display:flex; flex-wrap:wrap; gap:22px; margin-top:18px;}
.cta-fullwidth-points span{
  display:inline-flex; align-items:center; gap:7px;
  color:#fff; font-size:13.5px; font-weight:600;
}
.cta-fullwidth-points svg{color:#fff; flex-shrink:0;}

@media (max-width:760px){
  .cta-fullwidth-inner{flex-direction:column; align-items:flex-start;}
  .cta-fullwidth-text h2{font-size:24px;}
}

/* ============================================================
   "¿CÓMO TRABAJAMOS?" (software-a-medida.php) — recorrido diagonal
   tipo escalera, 4 tarjetas conectadas por líneas SVG ortogonales
   (H+V) dibujadas dinámicamente por JS según la posición real de
   cada tarjeta. Números como badges crimson que sobresalen de la
   esquina superior-izquierda. Fondo con imagen sutil.
   ============================================================ */
.process-section{
  padding:90px 0; background:var(--navy-ink);
  position:relative; overflow:hidden;
}
.process-section-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.16; pointer-events:none; user-select:none;
}
.process-section .wrap{position:relative; z-index:1;}
.process-section .section-head h2{color:#fff;}
.process-section .section-head p{color:#C7CEE3;}

.process-timeline{position:relative; margin-top:60px;}

.process-lines{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.process-line{
  fill:none; stroke:#E81F53; stroke-width:2; stroke-linecap:round;
  opacity:.85;
}

.process-steps{
  display:flex; align-items:flex-start; gap:26px;
  position:relative; z-index:1;
}
.process-step{
  flex:1 1 0; min-width:0;
  background:var(--navy); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:40px 24px 30px;
  position:relative; overflow:visible;

  opacity:0; transform:translateY(40px) scale(.96);
  transition:opacity .45s cubic-bezier(.2,.8,.2,1),
             transform .45s cubic-bezier(.2,.8,.2,1),
             box-shadow .3s ease;
}
.process-step.is-in-view{
  opacity:1; transform:translateY(0) scale(1);
}
.process-step:nth-child(1){margin-top:0;}
.process-step:nth-child(2){margin-top:64px;}
.process-step:nth-child(3){margin-top:128px;}
.process-step:nth-child(4){margin-top:192px;}

.process-step:hover{
  transform:translateY(-8px) scale(1);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.5);
}
.process-step:hover .process-num{transform:scale(1.08);}

.process-num{
  position:absolute; top:-18px; left:24px; z-index:2;
  width:52px; height:52px; border-radius:14px;
  background:var(--crimson); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat'; font-weight:800; font-size:19px;
  box-shadow:0 12px 26px -6px rgba(234,33,81,.6);
  transition:transform .3s ease;
}

.process-step h3{color:#fff; font-size:19px; margin-bottom:10px;}
.process-step p{color:#B9C2E0; font-size:14px; line-height:1.65;}

@media (prefers-reduced-motion: reduce){
  .process-step{transition:none; opacity:1; transform:none;}
  .process-line{transition:none !important; stroke-dashoffset:0 !important;}
}

@media (max-width:900px){
  .process-lines{display:none;}
  .process-steps{flex-direction:column; gap:34px;}
  .process-step:nth-child(1),
  .process-step:nth-child(2),
  .process-step:nth-child(3),
  .process-step:nth-child(4){margin-top:0;}
}

.hero h1{font-size:42px; line-height:1.15; color:var(--navy); max-width:600px;}
.hero h1 .accent{color:var(--crimson);}
.hero p.sub{font-size:16.5px; color:var(--muted); max-width:520px; margin:20px 0 30px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

.section{padding:88px 0;}
.section-head{max-width:620px; margin:0 auto 48px; text-align:center;}
.section-head.left{text-align:left; margin:0 0 48px;}
.section-head h2{font-size:32px; color:var(--navy); line-height:1.2;}
.section-head p{color:var(--muted); margin-top:12px; font-size:16px;}

.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.service-card{border:1px solid var(--line); border-radius:16px; padding:26px 22px; background:#fff; transition:.18s ease; display:flex; flex-direction:column; gap:14px;}
.service-card.featured{border-color:var(--crimson); background:linear-gradient(180deg,#fff, var(--crimson-tint) 220%);}
.service-card:hover{border-color:var(--crimson); box-shadow:0 16px 32px -18px rgba(234,33,81,.35); transform:translateY(-3px);}
.icon-box{width:42px; height:42px; border-radius:10px; background:var(--crimson-tint); color:var(--crimson); display:flex; align-items:center; justify-content:center;}
.service-card h3{font-size:16.5px; color:var(--navy);}
.service-card p{font-size:14px; color:var(--muted); flex:1;}
.service-card .link{font-size:13.5px; font-weight:600; color:var(--crimson); display:flex; align-items:center; gap:6px;}

.stats-band{background:var(--navy); color:#fff; padding:64px 0; position:relative; overflow:hidden;}
.scatter-icon{position:absolute; z-index:0; color:#fff; opacity:.06; pointer-events:none;}
@media (max-width:760px){ .scatter-icon{display:none;} }
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; position:relative; z-index:1;}
.stat-icon{
  width:44px; height:44px; margin:0 auto 12px; border-radius:12px;
  background:rgba(242,41,91,.14); color:#F2295B;
  display:flex; align-items:center; justify-content:center;
}
.stats-grid .val{font-family:'Poppins'; font-size:36px; font-weight:700; color:var(--crimson);}
.stats-grid .lbl{font-size:13px; color:#B9C2E0; margin-top:8px;}

.card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px;}

/* ============================================
   CARRUSEL DE IMÁGENES CON FORMA ORGÁNICA
   ============================================ */
.image-cycle-wrap{position:relative; padding:24px;}
.image-cycle-wrap::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--crimson-tint), var(--navy-tint));
  border-radius:63% 37% 54% 46% / 45% 41% 59% 55%;
  transform:rotate(-4deg) scale(1.04);
  z-index:0;
}
.image-cycle-blob{
  position:relative; z-index:1;
  aspect-ratio:4/3.4; width:100%;
  border-radius:63% 37% 54% 46% / 45% 41% 59% 55%;
  overflow:hidden;
  box-shadow:0 24px 50px -20px rgba(30,44,81,.35);
  border:3px solid #fff;
}
.cycle-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.cycle-img.is-active{opacity:1;}

@media (max-width:760px){
  .image-cycle-blob{aspect-ratio:4/3.2;}
}

/* ============================================
   SECCIÓN "CONFIANZA Y RESPALDO" (index.php)
   Antes usaba grid-template-columns inline en el HTML — un
   style="..." inline no puede sobrescribirse desde un @media de
   esta hoja, así que en mobile las columnas se quedaban forzadas
   una al lado de la otra en vez de apilarse (texto y blob de imagen
   apretados a la mitad del ancho, cards de "Acreditados/Garantía"
   comprimidas encima de eso). Con clases dedicadas sí se puede.
   ============================================ */
.confianza-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.confianza-icons-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:30px;}

@media (max-width:900px){
  .confianza-grid{grid-template-columns:1fr; gap:40px;}
}
@media (max-width:600px){
  .confianza-icons-grid{grid-template-columns:1fr;}
}

.testimonial{background:var(--paper); border-radius:20px; padding:44px; display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;}

/* ============================================
   TIMELINE
   ============================================ */
.timeline{position:relative; max-width:820px; margin:0 auto; padding:10px 0;}
.timeline-track{
  position:absolute; left:50%; top:6px; bottom:6px; width:2px;
  background:var(--line); transform:translateX(-50%);
}
.timeline-row{position:relative; display:flex; margin-bottom:34px;}
.timeline-row:last-child{margin-bottom:0;}
.timeline-row.left{justify-content:flex-start;}
.timeline-row.right{justify-content:flex-end;}

.timeline-dot{
  position:absolute; left:50%; top:22px; width:16px; height:16px;
  border-radius:50%; background:var(--crimson); border:4px solid #fff;
  box-shadow:0 0 0 2px var(--crimson); transform:translateX(-50%); z-index:2;
}

.timeline-card{
  width:45%; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 26px; box-shadow:0 4px 20px rgba(30,44,81,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.timeline-card:hover{transform:translateY(-3px); box-shadow:0 14px 28px -14px rgba(30,44,81,.2);}
.timeline-year{
  font-family:'Poppins'; font-weight:800; font-size:13px; color:var(--crimson);
  letter-spacing:.05em; margin-bottom:6px;
}
.timeline-card h3{font-size:16.5px; color:var(--navy); margin-bottom:8px;}
.timeline-card p{font-size:13.5px; color:var(--muted); line-height:1.55;}

.timeline-icon{
  width:38px; height:38px; border-radius:10px;
  background:var(--crimson-tint); color:var(--crimson);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
  transform:scale(0.5); opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
}
.timeline-row.in-view .timeline-icon{transform:scale(1); opacity:1;}
.timeline-card:hover .timeline-icon{transform:scale(1.12) rotate(-6deg);}

.stat-card-dark{
  background:var(--navy); border-radius:16px; padding:30px 32px;
  min-width:260px; max-width:320px; flex:1;
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat-card-dark:hover{transform:translateY(-4px); box-shadow:0 16px 34px -16px rgba(30,44,81,.5);}
.stat-card-dark .val{font-family:'Poppins'; font-size:42px; font-weight:800; color:var(--crimson); line-height:1;}
.stat-card-dark h4{color:#fff; font-size:19px; font-weight:700; margin:12px 0 8px;}
.stat-card-dark p{color:#B9C2E0; font-size:13.5px; line-height:1.55; margin-bottom:18px;}
.stat-underline{display:block; width:36px; height:2px; background:rgba(255,255,255,.25);}

.stars-row{display:flex; gap:3px; color:#F5A623;}

.testimonial-carousel{overflow:hidden; max-width:1000px; margin:0 auto; padding:22px 0;}
.testimonial-track{display:flex; gap:20px; transition:transform .5s cubic-bezier(.4,0,.2,1);}
.testimonial-slide{
  flex:0 0 calc((100% - 40px) / 3); box-sizing:border-box;
  background:#fff; border:1.5px solid var(--line); border-radius:18px;
  padding:28px 24px; text-align:center;
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.testimonial-avatar{
  width:56px; height:56px; border-radius:50%; margin:0 auto 12px;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Poppins'; font-weight:700; font-size:16px;
  transition:transform .35s ease, box-shadow .35s ease;
}
.testimonial-name{font-weight:700; color:var(--navy); font-size:15px; margin-bottom:6px;}
.testimonial-quote{font-style:italic; color:var(--muted); font-size:13.5px; margin-top:12px; line-height:1.6;}

.testimonial-slide.is-active{
  border-color:var(--crimson); transform:scale(1.04);
  animation:testimonialGlow 2.2s ease-in-out infinite;
}
.testimonial-slide.is-active .testimonial-avatar{
  background:var(--crimson);
  box-shadow:0 0 0 5px var(--crimson-tint);
}
@keyframes testimonialGlow{
  0%, 100%{box-shadow:0 20px 40px -18px rgba(234,33,81,.35), 0 0 0px rgba(234,33,81,0);}
  50%{box-shadow:0 20px 40px -18px rgba(234,33,81,.35), 0 0 22px rgba(234,33,81,.55);}
}
@media (prefers-reduced-motion: reduce){
  .testimonial-slide, .testimonial-slide.is-active{animation:none;}
}

.carousel-nav{display:flex; justify-content:center; gap:12px; margin-top:26px;}
.carousel-btn{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.carousel-btn:hover{background:var(--crimson); border-color:var(--crimson); color:#fff; transform:translateY(-2px);}
.carousel-btn:active{transform:translateY(0) scale(.95);}

@media (max-width:860px){
  .testimonial-slide{flex:0 0 100%;}
  .testimonial-slide.is-active{transform:scale(1); animation:testimonialGlow 2.2s ease-in-out infinite;}
}

@media (max-width:760px){
  .timeline-track{left:10px;}
  .timeline-row.left, .timeline-row.right{justify-content:flex-start;}
  .timeline-dot{left:10px;}
  .timeline-card{width:100%; margin-left:34px;}
}

.quote-mark{font-family:'Poppins'; font-size:56px; color:var(--crimson); line-height:1;}
.testimonial blockquote{font-size:19px; color:var(--navy); font-family:'Poppins'; font-weight:500;}
.testimonial .cite{margin-top:14px; font-size:14px; color:var(--muted);}

.final-cta{
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy) 45%, var(--crimson) 145%);
  border-radius:22px; padding:56px 46px; color:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:26px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.final-cta::after{
  content:""; position:absolute; right:-40px; bottom:-60px; width:220px; height:220px;
  border:2px solid rgba(255,255,255,.08); border-radius:30px; transform:rotate(20deg);
  pointer-events:none;
}
.online-indicator{
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:#B9C2E0;
}
.online-indicator .pulse-dot{background:#3DD68C;}
.final-cta h2{font-size:27px; max-width:420px;}
.final-cta p{color:#B9C2E0; margin-top:8px;}

.contact-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:start;}
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--navy);}
.form-group input, .form-group select, .form-group textarea{width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:9px; font-family:'Poppins'; font-size:14.5px;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none; border-color:var(--crimson);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.info-item{display:flex; gap:14px; margin-bottom:20px;}
.info-item .icon-box{flex-shrink:0;}
.alert{padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:14.5px;}
.alert-success{background:#E7F8EF; color:#137A43; border:1px solid #B7EACB;}
.alert-error{background:var(--crimson-tint); color:var(--crimson-dark); border:1px solid #F6C4D1;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================
   HERO DE CONTACTO
   ============================================ */
.contact-hero-full{
  position:relative; overflow:hidden;
  min-height:58vh;
  display:flex; align-items:center; justify-content:center;
  background-color:var(--navy);
  padding:120px 0 100px;
}
.contact-hero-full .hero-bg-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.contact-hero-full::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,24,46,.78) 0%, rgba(18,24,46,.85) 55%, rgba(18,24,46,.94) 100%);
}
.contact-hero-full .wrap{position:relative; z-index:2; text-align:center;}
.contact-hero-full h1{color:#fff; max-width:640px; margin:0 auto; font-size:46px;}
.contact-hero-full .sub{color:#C7CEE3; max-width:520px; margin:18px auto 0; font-size:17px;}
.contact-hero-full .badge-row{justify-content:center; margin-top:22px;}

.contact-hero-icons{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:30px;
}
.contact-hero-icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--crimson); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  box-shadow:0 10px 24px -8px rgba(234,33,81,.55);
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.contact-hero-icon:hover{background:var(--navy); transform:translateY(-3px);}

.contact-hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; z-index:3;
  height:90px; overflow:hidden; line-height:0;
}
.wave-layer{position:absolute; inset:0; background-repeat:repeat-x; background-position:0 bottom;}
.wave-back{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 Q225,10 450,50 T900,50 L900,100 L0,100 Z' fill='%23FFFFFF' fill-opacity='0.4'/%3E%3C/svg%3E");
  background-size:900px 100%;
  animation:waveScrollBack 16s linear infinite;
}
.wave-front{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 Q180,25 360,50 T720,50 L720,100 L0,100 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-size:720px 100%;
  animation:waveScrollFront 10s linear infinite;
}
@keyframes waveScrollBack{from{background-position-x:0;} to{background-position-x:-900px;}}
@keyframes waveScrollFront{from{background-position-x:0;} to{background-position-x:-720px;}}
@media (prefers-reduced-motion: reduce){ .wave-layer{animation:none;} }

.contact-info-row{
  max-width:1040px; margin:0 auto;
  padding:34px 0 6px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:28px;
}
.contact-info-item{display:flex; align-items:center; gap:14px; flex:1; min-width:220px; justify-content:center;}
.contact-info-item-label{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);}
.contact-info-item-value{font-size:15.5px; font-weight:700; color:var(--navy); margin-top:2px;}
.contact-info-divider{width:1px; height:38px; background:var(--line);}

@media (max-width:900px){
  .contact-info-row{flex-direction:column; padding:30px 20px 0;}
  .contact-info-item{justify-content:flex-start; width:100%;}
  .contact-info-divider{width:100%; height:1px;}
}

.contact-form-dark{
  position:relative; overflow:hidden;
  max-width:1040px; margin:0 auto;
  background:var(--navy); border-radius:26px;
  padding:56px;
  display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start;
}
.contact-form-dark::before,
.contact-form-dark::after{
  content:""; position:absolute; z-index:0; border-radius:50%; filter:blur(70px); pointer-events:none;
}
.contact-form-dark::before{width:360px; height:360px; top:-140px; right:-100px; background:radial-gradient(circle, rgba(234,33,81,.22), transparent 70%);}
.contact-form-dark::after{width:300px; height:300px; bottom:-120px; left:-80px; background:radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);}
.contact-form-dark-left, .contact-form-dark-right{position:relative; z-index:1;}

.contact-form-dark-illustration{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  bottom:-70px; right:-90px;
  width:560px; height:auto;
  opacity:.16;
}
@media (max-width:1180px){
  .contact-form-dark-illustration{width:440px; bottom:-50px; right:-70px;}
}
@media (max-width:900px){
  .contact-form-dark-illustration{width:300px; bottom:-30px; right:-40px; opacity:.14;}
}

.contact-form-icon{
  width:54px; height:54px; border-radius:15px;
  background:var(--crimson); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:26px;
  box-shadow:0 12px 26px -8px rgba(234,33,81,.55);
}
.contact-form-dark-left h2{color:#fff; font-size:29px; line-height:1.3; margin-bottom:2px;}
.contact-form-dark-left h2 .accent{color:var(--crimson);}
.contact-form-dark-tag{
  font-family:'Montserrat'; font-weight:800; font-size:25px; color:#fff; margin-bottom:8px;
}

.contact-form-dark-info{display:flex; align-items:center; gap:14px; margin:28px 0 22px;}
.contact-form-dark-info .icon-box{background:rgba(255,255,255,.12); color:#fff;}
.contact-form-dark-info-label{font-size:12.5px; color:#B9C2E0;}
.contact-form-dark-info-value{font-size:14.5px; font-weight:700; color:#fff; margin-top:2px;}

.contact-form-dark-disclaimer{font-size:12.5px; color:#8892b0; line-height:1.65; max-width:400px;}

.contact-form-dark-right .form-group{margin-bottom:16px;}
.contact-form-dark-right .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.contact-form-dark-right input,
.contact-form-dark-right textarea{
  width:100%; border:none; border-radius:12px;
  background:rgba(255,255,255,.95); color:var(--navy-ink);
  font-family:'Poppins'; font-size:14.5px;
  padding:15px 18px;
  transition:box-shadow .2s ease, background-color .2s ease;
}
.contact-form-dark-right input::placeholder,
.contact-form-dark-right textarea::placeholder{color:var(--muted);}
.contact-form-dark-right input:focus,
.contact-form-dark-right textarea:focus{
  outline:none; background:#fff; box-shadow:0 0 0 3px rgba(234,33,81,.4);
}
.contact-form-dark-right textarea{min-height:150px; resize:vertical;}
.contact-form-dark-right input[list]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:16px;
  padding-right:44px;
}
.contact-form-dark-right .alert-success{background:rgba(61,214,140,.15); color:#a8ffce; border:1px solid rgba(61,214,140,.35);}
.contact-form-dark-right .alert-error{background:rgba(234,33,81,.16); color:#ffc2d3; border:1px solid rgba(234,33,81,.4);}
.contact-form-dark-right button[type="submit"]{margin-top:6px;}

@media (max-width:900px){
  .contact-form-dark{grid-template-columns:1fr; padding:38px 26px; gap:32px;}
  .contact-form-dark-left h2{font-size:25px;}
  .contact-form-dark-tag{font-size:21px;}
  .contact-form-dark-right .form-row{grid-template-columns:1fr;}
}

.contact-map-block{max-width:1040px; margin:0 auto;}

.contact-map-section{
  position:relative; overflow:hidden;
  padding:60px 0 90px;
}
.contact-map-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.14; pointer-events:none; user-select:none;
}
.contact-map-section .wrap{position:relative; z-index:1;}

@media (max-width:860px){
  .contact-hero-full{min-height:52vh; padding:100px 0 70px;}
  .contact-hero-full h1{font-size:32px;}
  .contact-hero-full .sub{font-size:15.5px;}
  .contact-hero-wave{height:58px;}
  .contact-hero-icon{width:46px; height:46px; font-size:17px;}
}

.site-footer{background:var(--navy-ink); color:#B9C2E0; padding:60px 0 28px; font-size:14px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-grid h4{color:#fff; font-size:14px; margin-bottom:14px; font-family:'Poppins';}
.footer-logo{display:inline-block; margin-bottom:16px;}
.footer-logo img{height:42px; width:auto; object-fit:contain;}
.footer-grid a{display:block; color:#B9C2E0; margin-bottom:9px;}
.footer-grid a:hover{color:var(--crimson);}
.footer-grid p{margin-bottom:6px;}
.social-row{display:flex; gap:8px;}
.social-row a{width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:14px; margin:0; transition:background-color .2s ease;}
/* color:#fff explícito: sin esto, .footer-grid a:hover (color:crimson)
   también aplica acá y competía con el fondo crimson que pone esta
   regla — mismo color en el ícono y el fondo, el ícono desaparecía. */
.social-row a:hover{background:var(--crimson); color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:22px; font-size:12.5px;}

/* ============================================
   SERVICIOS — relleno navy que "viaja" entre tarjetas
   ============================================ */
.services-uniform-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}

.service-uniform-card{
  position:relative;
  overflow:hidden;
  border:1.5px solid var(--line); border-radius:20px;
  height:100%;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.service-uniform-card:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 26px 48px -20px rgba(30,44,81,.32);
  border-color:rgba(234,33,81,.4);
}

.card-fill{
  /* inset:-1px (no 0) para tapar el hairline que a veces se cuela en
     el borde durante translate3d — el overflow:hidden del padre lo
     sigue recortando a la forma redondeada de la tarjeta. */
  position:absolute; inset:-1px; z-index:0;
  background:var(--navy);
  border-radius:inherit;
  transform:translate3d(0,100%,0);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.card-content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; height:100%; padding:28px;
}
.card-content .icon-box{transition:background-color .3s ease, color .3s ease;}
.card-content h3{font-size:16.5px; color:var(--navy); margin:14px 0 8px; transition:color .3s ease;}
.card-content p{font-size:13.5px; color:var(--muted); flex:1; margin-bottom:16px; transition:color .3s ease;}
.cta-pill{
  display:inline-flex; align-items:center; gap:6px; width:fit-content;
  padding:9px 15px; border-radius:8px; border:1.5px solid var(--crimson);
  color:var(--crimson); background:transparent; font-weight:600; font-size:13px;
  transition:background-color .3s ease, color .3s ease;
}

.service-uniform-card.is-featured{border-color:rgba(255,255,255,.25);}
.service-uniform-card.is-featured .card-content .icon-box{background:rgba(255,255,255,.14); color:var(--crimson);}
.service-uniform-card.is-featured .card-content h3{color:#fff;}
.service-uniform-card.is-featured .card-content p{color:#C7CEE3;}
.service-uniform-card.is-featured .cta-pill{background:var(--crimson); border-color:var(--crimson); color:#fff;}

@media (max-width:1080px){
  .services-uniform-grid{grid-template-columns:repeat(2,1fr);}
}

.section-illustration{position:relative; overflow:hidden;}
.section-illustration > .wrap{position:relative; z-index:1;}
.section-illustration-img{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  bottom:-60px; right:-90px;
  width:620px; height:auto;
  opacity:.07;
}

@media (max-width:1080px){
  .section-illustration-img{width:440px; bottom:-40px; right:-70px;}
}
@media (max-width:860px){
  .section-illustration-img{width:300px; bottom:-20px; right:-50px;}
}

.timeline-section{position:relative; overflow:hidden; padding-top:0;}
.timeline-section > .wrap{position:relative; z-index:1;}
@media (max-width:860px){
  /* En desktop el hero se desvanece de forma gradual hacia esta
     sección, así que no hace falta separación extra arriba. En móvil
     el efecto de scroll está apagado (ver main.js) y el hero termina
     en un corte más duro — sin este padding, el título "Nuestra
     historia" queda pegado justo ahí. */
  .timeline-section{padding-top:56px;}
}
.scatter-icon-light{position:absolute; z-index:0; color:var(--navy); opacity:.22; pointer-events:none;}
@media (max-width:760px){ .scatter-icon-light{display:none;} }
.timeline-bg{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  width:750px; height:auto; opacity:.07;
}
.timeline-bg-top{top:-40px; right:-60px;}
.timeline-bg-bottom{bottom:-40px; left:-60px;}

@media (max-width:1080px){
  .timeline-bg{width:300px;}
}
@media (max-width:860px){
  .timeline-bg{width:200px;}
  .timeline-bg-top{top:-20px; right:-40px;}
  .timeline-bg-bottom{bottom:-20px; left:-40px;}
}

.section-shape{position:relative; overflow:hidden;}
.section-shape > *{position:relative; z-index:1;}
.section-shape::before,
.section-shape::after{
  content:""; position:absolute; z-index:0;
  border-radius:50%; background:var(--navy);
  pointer-events:none;
}
.section-shape::before{width:420px; height:420px; opacity:.035; top:-140px; right:-120px;}
.section-shape::after{width:280px; height:280px; opacity:.03; bottom:-100px; left:-80px;}

@media (max-width:860px){
  .section-shape::before{width:220px; height:220px; top:-70px; right:-70px;}
  .section-shape::after{width:160px; height:160px; bottom:-60px; left:-50px;}
}

.logos-carousel-section{padding:44px 0; border-bottom:1px solid var(--line); background:#fff;}
.logos-carousel{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track{
  display:flex; align-items:center; gap:56px; width:max-content;
  animation:scrollLogos 70s linear infinite;
  will-change:transform;
}
.logos-carousel:hover .logos-track{animation-play-state:paused;}
.logo-slide{flex:0 0 auto; height:68px; display:flex; align-items:center;}
.logo-slide img{
  height:100%; width:auto; max-width:210px; object-fit:contain;
  filter:grayscale(100%); opacity:.5;
  transition:filter .25s ease, opacity .25s ease;
}
.logo-slide img:hover{filter:grayscale(0%); opacity:1;}
@keyframes scrollLogos{ from{transform:translateX(0);} to{transform:translateX(-33.333%);} }
@media (prefers-reduced-motion: reduce){ .logos-track{animation:none;} }
@media (max-width:860px){
  .logo-slide{height:48px;}
  .logo-slide img{max-width:150px;}
}

.hero-full{
  position:relative; padding:0; overflow:hidden;
  background-color:var(--navy);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.hero-video{
  position:absolute; top:50%; left:50%; width:100%; height:100%;
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover; z-index:0;
}
.hero-full::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,24,46,.65) 0%, rgba(18,24,46,.8) 60%, rgba(18,24,46,.93) 100%);
}

/* Spinner mientras el video de fondo carga (ver main.js: se oculta
   apenas el video puede reproducirse). Fondo sólido navy detrás para
   que no se vea ningún frame roto/en blanco antes de eso. */
.hero-video-loader{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-ink);
  opacity:1; transition:opacity .5s ease;
}
.hero-video-loader.is-hidden{opacity:0; pointer-events:none;}
.hero-video-spinner{
  width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--crimson);
  animation:heroVideoSpin .8s linear infinite;
}
@keyframes heroVideoSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  .hero-video-spinner{animation-duration:1.6s;}
}
.hero-full .wrap{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center;}
.hero-full h1{color:#fff;}
.hero-full h1 .accent{color:var(--crimson);}
.hero-full p.sub{color:#C7CEE3;}
.badge-pill{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:600;}
.badge-pill-crimson{background:rgba(234,33,81,.14); color:#ff8fa9;}
.badge-pill-light{background:rgba(255,255,255,.1); color:#fff;}
.badge-pill-highlight{
  background:linear-gradient(90deg, rgba(234,33,81,.22), rgba(234,33,81,.1));
  border:1.5px solid rgba(234,33,81,.5);
  color:#fff; font-weight:700; font-size:13.5px; padding:9px 18px;
  box-shadow:0 0 0 4px rgba(234,33,81,.08);
}
.badge-pill-highlight svg{color:var(--crimson); flex-shrink:0;}
.pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--crimson); display:inline-block; animation:pulseDot 2s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.6);}}

.hero-full .badge-row{justify-content:center;}
.hero-full h1{font-size:60px; max-width:900px; margin-left:auto; margin-right:auto;}
.hero-full .sub{max-width:640px; margin-left:auto; margin-right:auto; text-align:center; font-size:18px;}
.hero-full .cta-row{justify-content:center;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .pulse-dot{animation:none;}
}

@media (max-width:860px){
  .nav-links{position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px; background:var(--navy); flex-direction:column; padding:90px 30px 30px; gap:22px; transform:translateX(100%); transition:transform .25s ease; z-index:40; overflow-y:auto;}
  .nav-links.open{transform:translateX(0);}
  .nav-links a{color:#fff !important; font-size:17px;}
  .burger{display:block; z-index:60;}
  .nav-cta{display:none;}

  /* Botón "X" fijo en la esquina superior derecha del panel. Aunque es
     hijo de #navLinks, position:fixed lo ubica relativo al viewport
     (un ancestro con position:fixed por sí solo no crea containing
     block para descendientes fixed) — y como el panel tiene right:0,
     ambos bordes derechos coinciden, así que "right:22px" cae justo
     en la esquina del panel. Queda fijo (no absolute) para seguir
     visible aunque el usuario scrollee el contenido largo del menú. */
  .nav-close{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:22px; right:22px;
    width:36px; height:36px;
    background:none; border:none; padding:0; margin:0; outline:none;
    color:#fff; cursor:pointer; z-index:60;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .nav-links.open .nav-close{opacity:1; pointer-events:auto;}
  /* El botón ☰ vive en el mismo rincón que la "X": mientras el panel
     está abierto se oculta, así no quedan los dos íconos superpuestos. */
  .nav-links.open ~ .burger{display:none;}

  /* En desktop .mega-menu es position:fixed, así que no cuenta como
     hijo flex real de .nav-item (solo el trigger ocupa espacio). En
     mobile pasa a position:static y SÍ vuelve a ser un hijo flex más:
     sin este cambio a columna, quedaba al lado del trigger en fila
     (heredado de la regla base .nav-item{display:flex}) empujando
     todo el mega-menú fuera de la pantalla. */
  .nav-item{width:100%; flex-direction:column; align-items:center;}
  /* El trigger ya es width:100% (para no quedar en fila junto al
     mega-menú, ver nota de arriba); justify-content:center centra el
     grupo ícono + "Servicios" + flecha dentro de esa caja completa,
     en vez de quedar pegado al borde izquierdo. */
  .mega-trigger{font-size:17px; width:100%; justify-content:center;}
  .mega-menu{
    position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
    width:100%; max-width:none; background:transparent; border:none; box-shadow:none;
    gap:0; padding:14px 0 0; margin-top:6px;
    border-top:1px solid rgba(255,255,255,.15);
  }
  /* .nav-links define white-space:nowrap para los links de un solo
     renglón, pero esa propiedad se hereda a todo lo de adentro del
     mega-menú (encabezados de columna, texto del footer) — sin este
     reset se cortaban en vez de hacer salto de línea. */
  .mega-menu, .mega-menu *{white-space:normal;}
  .mega-menu-cols{grid-template-columns:1fr; gap:0;}
  /* Antes quedaba con un borde-izquierdo tipo "árbol" y todo pegado a
     la izquierda; ahora centrado, a juego con el resto del menú
     (Inicio, Nosotros, etc.). */
  .mega-col{border-left:none; padding:0 0 18px; width:100%; text-align:center;}
  .mega-col h5{color:#B9C2E0;}
  .mega-col a{color:#C7CEE3; font-size:14.5px; padding:6px 0;}
  .mega-col a:hover{color:var(--crimson);}
  /* La franja de "¿No encuentras lo que buscas?" + botón de WhatsApp
     no se muestra en el menú móvil — el panel ya es angosto y esa
     invitación queda cubierta por el CTA de WhatsApp del header. */
  .mega-menu-footer{display:none;}

  .nav-actions{
    width:100%; margin:10px 0 0; padding:20px 0 0; border-left:none;
    border-top:1px solid rgba(255,255,255,.15);
    flex-direction:column; align-items:flex-start; gap:16px;
  }
  /* El selector de idioma "de siempre" (dentro de .nav-actions) queda
     oculto en mobile — la copia de arriba (.lang-switch-mobile, fuera
     del panel) es la que se usa ahora, para no duplicarlo. Por eso
     estos overrides de color claro quedan acotados a .nav-actions y
     no afectan a esa copia. */
  .nav-actions .lang-switch{display:none;}
  .nav-actions .lang-switch, .nav-actions .lang-switch .lang-btn{color:#C7CEE3 !important;}
  .nav-actions .lang-switch .lang-btn.is-active{color:#fff !important;}
  .store-link{color:#fff; width:100%; justify-content:center;}

  /* .nav-cta queda display:none y .nav-links pasa a position:fixed
     (sale del flujo), así que en mobile solo quedan 3 hijos flex reales
     en .nav: logo, este selector y el burger. Con justify-content:
     space-between de la barra, sin el margin-left:auto acá el selector
     quedaba flotando solo en el medio del header en vez de pegado
     al ícono — este margin absorbe todo el espacio libre restante y
     empuja ambos (selector + burger) juntos al borde derecho. */
  .lang-switch-mobile{display:flex; margin-left:auto; margin-right:14px;}

  /* El header pasa a medir ~67px acá (logo de 38px en vez de 52px),
     pero el padding-top de body sigue fijo en 80px (pensado para el
     header de escritorio) — ese sobrante de ~13px se veía como una
     franja en blanco entre la barra y el hero en TODAS las vistas. */
  body{padding-top:67px;}
  body.home{padding-top:0;}
  .hero h1{font-size:32px;}
  .hero-full{min-height:100vh;}
  .hero-full h1{font-size:34px;}
  .hero-full .sub{font-size:15.5px;}
  .logo-img{height:38px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .services-uniform-grid{grid-template-columns:1fr;}
  .bento-grid{grid-template-columns:1fr;}
  .bento-primary, .bento-secondary{grid-column:span 1;}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:28px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .testimonial{grid-template-columns:1fr; padding:30px;}
  .final-cta{flex-direction:column; align-items:flex-start;}
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* Último escalón para celulares angostos: algunas grillas de 4
   columnas solo bajaban a 2 en .860px y se quedaban ahí. */
@media (max-width:480px){
  .services-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr; gap:20px;}
  /* .footer-grid tenía el mismo problema: bajaba a 2 columnas en
     860px y se quedaba ahí, dejando la columna de "Enlaces rápidos"
     y "Contacto" apretadas una junto a otra en celulares angostos. */
  .footer-grid{grid-template-columns:1fr; text-align:left;}
}

/* ============================================================
   TARJETA DE ASESORÍA
   ============================================================ */
.advisory-card{
  position:relative; overflow:hidden;
  background:var(--navy); border-radius:26px;
  padding:56px;
  animation:advisoryFloat 6s ease-in-out infinite;
}
@keyframes advisoryFloat{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}
@media (prefers-reduced-motion: reduce){
  .advisory-card{animation:none;}
}
.advisory-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.4; pointer-events:none; user-select:none;
}
.advisory-overlay{
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(18,24,46,.80) 0%, rgba(30,44,81,.75) 55%, rgba(30,44,81,.4) 100%);
}
.advisory-content{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
}
.advisory-left h2{
  color:#fff; font-size:38px; line-height:1.15; margin-bottom:18px;
}
.advisory-left p{
  color:#C7CEE3; font-size:15.5px; line-height:1.65; max-width:460px; margin-bottom:28px;
}
.advisory-left .cta-row{gap:14px;}

.advisory-metrics-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:18px; padding:26px 26px 22px;
}
.advisory-metrics-head{display:flex; align-items:center; gap:14px; margin-bottom:24px;}
.advisory-metrics-icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:13px;
  background:var(--crimson); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.advisory-metrics-title{color:#fff; font-weight:700; font-size:15px;}
.advisory-metrics-sub{color:#B9C2E0; font-size:12.5px; margin-top:2px;}

.advisory-bar-row{margin-bottom:18px;}
.advisory-bar-row:last-child{margin-bottom:0;}
.advisory-bar-label{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:#C7CEE3; margin-bottom:8px;
}
.advisory-bar-label span:last-child{color:#fff; font-weight:700;}
.advisory-bar-track{
  width:100%; height:7px; border-radius:99px;
  background:rgba(255,255,255,.14); overflow:hidden;
}
.advisory-bar-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--crimson), #ff6b8f); 
  width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1);  
}

@media (max-width:900px){
  .advisory-card{padding:40px 28px;}
  .advisory-content{grid-template-columns:1fr; gap:32px;}
  .advisory-left h2{font-size:30px;}
  .advisory-left .cta-row{flex-wrap:wrap;}
}

/* ============================================================
   WIDGET DE CHAT FLOTANTE (footer.php, en todas las páginas) — botón
   con avatar ILUSTRADO de persona (SVG propio, no ícono de robot ni
   foto) + burbuja de saludo. Al tocarlo abre un panel de chat con un
   campo de texto; al enviar, arma la URL de WhatsApp con lo escrito y
   redirige — el botón en sí YA NO es un link directo a WhatsApp.
   ============================================================ */
.chat-widget-wrap{
  position:fixed; right:24px; bottom:24px; z-index:55;
}
.chat-widget{
  display:flex; align-items:center; gap:12px;
  background:none; border:none; padding:0; margin:0;
  font-family:'Poppins'; cursor:pointer;
}
.chat-widget-avatar{
  position:relative; flex-shrink:0;
  width:58px; height:58px; border-radius:50%;
  /* Respaldo por si la imagen no carga — el PNG ya trae su propio
     círculo navy + camisa crimson de fondo, así que normalmente no se
     ve, pero evita un hueco vacío si falla. */
  background:linear-gradient(135deg, var(--crimson), var(--crimson-dark));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  box-shadow:0 14px 30px -10px rgba(234,33,81,.55);
  animation:chatWidgetPulse 2.6s ease-in-out infinite;
  transition:transform .25s ease;
}
.chat-widget-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.chat-widget:hover .chat-widget-avatar{transform:scale(1.06);}
.chat-widget-dot{
  position:absolute; bottom:1px; right:1px;
  width:14px; height:14px; border-radius:50%;
  background:#25D366; border:2.5px solid #fff;
}
@keyframes chatWidgetPulse{
  0%, 100%{box-shadow:0 14px 30px -10px rgba(234,33,81,.55);}
  50%{box-shadow:0 14px 30px -6px rgba(234,33,81,.8), 0 0 0 8px rgba(234,33,81,.12);}
}
.chat-widget-bubble{
  background:#fff; color:var(--navy); font-size:13.5px; font-weight:600;
  padding:12px 18px; border-radius:16px; max-width:190px; line-height:1.35;
  box-shadow:0 14px 34px -14px rgba(18,24,46,.35);
  position:relative; text-align:left;
}
.chat-widget-bubble::after{
  content:""; position:absolute; top:50%; right:-6px; transform:translateY(-50%);
  width:12px; height:12px; background:#fff;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
/* El botón queda "presionado" (marcado como abierto) mientras el
   panel está visible — la burbuja de saludo no hace falta ahí, el
   panel ya cumple ese rol. */
.chat-widget-wrap.is-open .chat-widget-bubble{display:none;}

/* ---------- Panel de chat ---------- */
.chat-widget-panel{
  position:absolute; right:0; bottom:calc(100% + 16px);
  width:320px; max-width:calc(100vw - 48px);
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(18,24,46,.45);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s;
}
.chat-widget-wrap.is-open .chat-widget-panel{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}
.chat-widget-panel-header{
  display:flex; align-items:center; gap:12px;
  padding:18px 16px;
  background:linear-gradient(120deg, var(--navy) 0%, var(--crimson-dark) 160%);
}
.chat-widget-avatar-sm{
  position:relative; flex-shrink:0;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.chat-widget-panel-header-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.chat-widget-panel-header-text strong{color:#fff; font-size:14px;}
.chat-widget-panel-header-text span{color:#E3E6F0; font-size:11.5px;}
.chat-widget-close{
  margin-left:auto; flex-shrink:0;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer;
  transition:background-color .2s ease;
}
.chat-widget-close:hover{background:rgba(255,255,255,.22);}
.chat-widget-panel-body{padding:18px 16px; background:var(--paper);}
.chat-widget-msg{
  background:#fff; color:var(--navy-ink); font-size:13.5px; line-height:1.55;
  padding:12px 14px; border-radius:4px 14px 14px 14px;
  box-shadow:0 8px 20px -12px rgba(18,24,46,.25);
}
.chat-widget-panel-input{
  display:flex; align-items:center; gap:8px;
  padding:12px; border-top:1px solid var(--line); background:#fff;
}
.chat-widget-panel-input input{
  flex:1 1 auto; min-width:0; border:none; outline:none;
  font-family:'Poppins'; font-size:13.5px; color:var(--navy-ink);
  padding:8px 4px;
}
.chat-widget-panel-input input::placeholder{color:var(--muted);}
.chat-widget-panel-input button{
  flex-shrink:0; width:36px; height:36px; border-radius:50%; border:none;
  background:var(--crimson); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .2s ease;
}
.chat-widget-panel-input button:hover{background:var(--crimson-dark);}

@media (prefers-reduced-motion: reduce){
  .chat-widget-avatar{animation:none;}
}
@media (max-width:640px){
  .chat-widget-wrap{right:16px; bottom:16px;}
  /* En mobile solo el avatar — la burbuja de texto ocupaba demasiado
     espacio horizontal en una pantalla angosta. */
  .chat-widget-bubble{display:none;}
  .chat-widget-avatar{width:52px; height:52px;}
  .chat-widget-panel{width:calc(100vw - 32px);}
}