/* ============================================================
   CAUCE HR — CAPA DE MEJORA VISUAL (cauce-boost.css)
   Se carga DESPUES de los estilos base. Solo agrega y refina:
   no reestructura el sitio. Todo respeta prefers-reduced-motion.
   Paleta: navy + degradado azul de marca (--grad) + acento ambar.
   ============================================================ */

/* ---------- Scrollbar a juego con la marca ---------- */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:#0a1628; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2086ce,#59b7f5);
  border-radius:8px; border:2px solid #0a1628;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#2d92dc,#7cc7f8); }
::selection{ background:#2086ce; color:#fff; }

/* ============================================================
   HERO
   ============================================================ */

/* ---------- Aurora animada ----------
   Va en un <div class="cauce-aurora"> que inyecta el JS. NO se usan
   ::before/::after del .hero porque el CSS base ya los ocupa para
   los degradados de legibilidad del video. */
.cauce-aurora{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cauce-aurora span{
  position:absolute; border-radius:50%;
  filter:blur(90px); will-change:transform, opacity;
  translate:var(--aur-x, 0) var(--aur-y, 0);
  transition:translate .35s ease-out;
}
.cauce-aurora .aur-1{
  width:55vw; height:55vw; top:-18%; left:-12%;
  background:radial-gradient(circle, rgba(32,134,206,.34), transparent 65%);
  animation:cauceAurora1 16s ease-in-out infinite alternate;
}
.cauce-aurora .aur-2{
  width:46vw; height:46vw; bottom:-22%; right:-10%;
  background:radial-gradient(circle, rgba(89,183,245,.22), transparent 65%);
  animation:cauceAurora2 20s ease-in-out infinite alternate;
}
@keyframes cauceAurora1{
  0%{ transform:translate(0,0) scale(1); opacity:.8; }
  50%{ transform:translate(6vw,4vh) scale(1.12); opacity:1; }
  100%{ transform:translate(-3vw,8vh) scale(.95); opacity:.75; }
}
@keyframes cauceAurora2{
  0%{ transform:translate(0,0) scale(1); opacity:.7; }
  50%{ transform:translate(-5vw,-5vh) scale(1.15); opacity:.95; }
  100%{ transform:translate(4vw,-8vh) scale(.92); opacity:.65; }
}

/* ---------- Hero: corrección mínima ----------
   El diseño base posiciona .hero-content con position:absolute anclado
   abajo (bottom/left/right) y eso funciona bien en desktop y móvil.
   La capa boost solo sube el z-index para que el contenido quede sobre
   la aurora. NO tocar position/top/bottom: cambiarlo a relative sacaba
   el bloque de su ancla y asi se veia "mocho". */
header.hero .hero-content{ z-index:2; }

/* Entrada escalonada del hero al cargar la página.
   El JS agrega .hero-in al <body> cuando el DOM está listo. */
header.hero .hero-content > *{
  opacity:0; transform:translateY(26px); filter:blur(6px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
}
body.hero-in header.hero .hero-content > *{ opacity:1; transform:translateY(0); filter:blur(0); }
body.hero-in header.hero .hero-content > *:nth-child(1){ transition-delay:.10s; }
body.hero-in header.hero .hero-content > *:nth-child(2){ transition-delay:.24s; }
body.hero-in header.hero .hero-content > *:nth-child(3){ transition-delay:.40s; }
body.hero-in header.hero .hero-content > *:nth-child(4){ transition-delay:.56s; }
body.hero-in header.hero .hero-content > *:nth-child(5){ transition-delay:.70s; }

/* El marco del hero dibuja sus líneas al entrar */
.hero-rect span{ transition:transform 1.1s var(--ease-in-out) .5s; }

/* Acento del titular: degradado animado celeste -> azul oscuro */
.hero-accent{
  background:linear-gradient(90deg,#a5d8ff,#59b7f5,#0f4c81,#59b7f5,#a5d8ff);
  background-size:280% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:cauceShineText 5s linear infinite;
}
@keyframes cauceShineText{
  0%{ background-position:0% center; }
  100%{ background-position:280% center; }
}

/* Línea del eyebrow que se auto-dibuja */
.hero-ey-line{
  transform-origin:left center; transform:scaleX(0);
  transition:transform .9s var(--ease-out) .15s;
}
body.hero-in .hero-ey-line{ transform:scaleX(1); }

/* Botón principal: halo pulsante suave para dirigir la mirada */
.btn-primary, a.btn-primary, button.btn-primary{
  position:relative; overflow:hidden; isolation:isolate;
}
body.hero-in .hero-btn-primary{ animation:cauceCtaGlow 3.2s ease-in-out 1.4s infinite; }
@keyframes cauceCtaGlow{
  0%, 100%{ box-shadow:0 0 0 0 rgba(45,146,220,.45); }
  50%{ box-shadow:0 0 26px 6px rgba(45,146,220,.35); }
}
/* Barrido de luz al pasar el cursor sobre cualquier botón */
.btn::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform:translateX(-120%); transition:transform .6s var(--ease-out);
  pointer-events:none;
}
.btn:hover::after{ transform:translateX(120%); }
.btn{ position:relative; overflow:hidden; transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); }

/* CTA circular del hero: la flecha "respira" */
.hero-cta-circle svg{ animation:cauceArrowNudge 2.4s ease-in-out infinite; }
@keyframes cauceArrowNudge{
  0%, 100%{ transform:translateX(0); }
  50%{ transform:translateX(4px); }
}
.hero-cta-circle{ transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.hero-cta:hover .hero-cta-circle{ transform:scale(1.12); box-shadow:0 0 20px rgba(89,183,245,.5); }

/* Indicador de scroll (lo inyecta el JS) */
.cauce-scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(232,238,247,.75); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; pointer-events:none;
}
.cauce-scroll-hint .csh-track{
  width:22px; height:36px; border:2px solid rgba(232,238,247,.5);
  border-radius:12px; display:flex; justify-content:center; padding-top:6px;
}
.cauce-scroll-hint .csh-dot{
  width:4px; height:8px; border-radius:4px; background:#59b7f5;
  animation:cauceScrollDot 1.8s ease-in-out infinite;
}
@keyframes cauceScrollDot{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(12px); opacity:0; }
  100%{ transform:translateY(0); opacity:0; }
}

/* ============================================================
   REVEALS AL HACER SCROLL — versión enriquecida
   (mismo sistema [data-reveal]/.in-view; aquí solo se cambia
   la forma del movimiento, los delays del sitio se conservan)
   ============================================================ */
[data-reveal]{
  transform:translateY(26px) scale(.975);
  filter:blur(5px);
  transition:opacity .7s var(--ease-out),
             transform .7s var(--ease-out),
             filter .7s var(--ease-out);
}
[data-reveal].in-view{
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* Subrayado degradado que se dibuja bajo cada H2 cuando entra en pantalla */
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{
  content:""; position:absolute; left:0; bottom:-10px;
  width:64px; height:4px; border-radius:4px;
  background:var(--grad, linear-gradient(135deg,#2086ce,#2d92dc,#59b7f5));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s var(--ease-out) .3s;
}
.section-head.in-view h2::after,
.in-view .section-head h2::after{ transform:scaleX(1); }

/* Etiqueta de sección con punto que pulsa */
.section-tag{ position:relative; }
.section-tag::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#2d92dc; margin-right:8px; vertical-align:middle;
  animation:cauceTagPulse 2.6s ease-in-out infinite;
}
@keyframes cauceTagPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(45,146,220,.5); }
  50%{ box-shadow:0 0 0 6px rgba(45,146,220,0); }
}

/* ============================================================
   TARJETAS — elevación, brillo y zoom de imagen
   ============================================================ */
.commit-card, .why-card, .conf-card, .compare-card,
.mv-card, .value-letter-card, .job-card, .allies-card{
  transition:transform .35s var(--ease-out),
             box-shadow .35s var(--ease-out),
             border-color .35s var(--ease-out);
  will-change:transform;
}
.commit-card:hover, .why-card:hover, .conf-card:hover, .compare-card:hover,
.mv-card:hover, .value-letter-card:hover, .job-card:hover, .allies-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 44px -12px rgba(10,22,40,.28),
             0 0 0 1px rgba(45,146,220,.25);
}
/* Barrido de luz diagonal sobre las tarjetas.
   OJO: .commit-card y .conf-card ya usan ::before para sus propios
   realces (filete superior / barra lateral), así que aquí no se tocan. */
.why-card, .compare-card, .mv-card{ position:relative; overflow:hidden; }
.why-card::before, .compare-card::before, .mv-card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform:translateX(-130%); transition:transform .7s var(--ease-out);
}
.why-card:hover::before,
.compare-card:hover::before, .mv-card:hover::before{ transform:translateX(130%); }
/* Zoom suave de las imágenes dentro de las tarjetas */
.commit-img-wrap, .src-img-wrap, .tst-img-wrap{ overflow:hidden; }
.commit-card img, .src-sec img, .tst-sec img, .credito-sec img, .garantia-sec img{
  transition:transform .6s var(--ease-out);
}
.commit-card:hover img, .src-sec .section:hover img{ transform:scale(1.05); }

/* ============================================================
   TABS DE GIROS — indicador activo animado
   ============================================================ */
.gx-tab{ position:relative; transition:transform .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out); }
.gx-tab:hover{ transform:translateY(-2px); }
.gx-tab[aria-selected="true"]{ box-shadow:0 6px 18px -6px rgba(32,134,206,.55); }

/* ============================================================
   CONTADORES Y MÉTRICAS
   ============================================================ */
.hdc-value, .hdc-card{ transition:transform .3s var(--ease-out); }
.hdc-card:hover{ transform:translateY(-4px); }
.hdc-card:hover .hdc-value{ transform:scale(1.06); }

/* ============================================================
   NAV — vidrio más fino al hacer scroll
   ============================================================ */
.nav{ transition:background .35s var(--ease-out), box-shadow .35s var(--ease-out), backdrop-filter .35s; }
.nav.nav--solid{
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 6px 24px -8px rgba(10,22,40,.18);
}
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px;
  background:var(--grad, linear-gradient(135deg,#2086ce,#59b7f5));
  border-radius:2px; transform:scaleX(0); transform-origin:left center;
  transition:transform .3s var(--ease-out);
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* ============================================================
   TILT 3D (lo activa el JS agregando .cauce-tilt)
   ============================================================ */
.cauce-tilt{ transform-style:preserve-3d; transition:transform .18s ease-out, box-shadow .35s var(--ease-out); }

/* ============================================================
   ACCESIBILIDAD — sin movimiento si el usuario lo pidió
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .cauce-aurora span,
  .hero-accent, .hero-cta-circle svg,
  .cauce-scroll-hint .csh-dot,
  .section-tag::before,
  body.hero-in .hero-btn-primary{ animation:none !important; }
  header.hero .hero-content > *{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .hero-ey-line{ transform:scaleX(1) !important; transition:none !important; }
  [data-reveal]{ transform:none; filter:none; }
  .cauce-scroll-hint{ display:none; }
}

/* Móvil: aurora más tenue para no tapar el texto, y ajustes de portada */
@media (max-width:720px){
  .cauce-aurora .aur-1{ opacity:.55; }
  .cauce-aurora .aur-2{ opacity:.5; }
  /* El video NO se descarga en móvil (decisión del diseño base para
     ahorrar datos) y varios navegadores no pintan el atributo poster
     con preload="none": el hero quedaba como un hueco oscuro. Se pone
     el poster como capa de fondo del propio hero, bajo un tinte navy
     que mantiene el texto legible. */
  header.hero{
    background:
      radial-gradient(900px 500px at 85% -10%, rgba(45,146,220,0.28), transparent 60%),
      linear-gradient(180deg, rgba(7,15,31,.55) 0%, rgba(7,15,31,.35) 45%, rgba(7,15,31,.72) 100%),
      url("hero-3escenas-poster.jpg") 72% center/cover no-repeat,
      linear-gradient(180deg, #070f1f, #0f1f3d);
  }
  /* Como el video no se descarga en móvil, el <video> vacío solo estorba
     (puede pintar una caja negra encima del poster): se oculta. */
  header.hero .hero-bg-video{ display:none; }
  /* El indicador de scroll estorba en pantallas chicas: tapa el marco */
  .cauce-scroll-hint{ display:none; }
  /* Los botones del hero no deben salirse del ancho del contenido */
  header.hero .hero-actions-row{
    flex-wrap:wrap; max-width:100%; row-gap:14px;
  }
  header.hero .hero-btn-primary{ width:100%; justify-content:center; }
  /* Aire entre el marco y el texto: el diseño base dejaba solo 2-4px
     entre las letras y las lineas del cuadro, y las frases largas del
     rotador (aleman, frances) rebasaban el marco por arriba. */
  header.hero .hero-rect{ inset:84px 14px 20px 14px; }
  header.hero .hero-content{
    left:36px; right:36px; bottom:58px;
    top:auto; height:auto; max-width:none;
  }
  header.hero .hero-h1{
    min-height:0;
    font-size:clamp(28px, 7.4vw, 38px);
  }
  header.hero .hero-sub{ font-size:15px; }
}

/* ============================================================
   RONDA 2 — FAQ, formularios, footer y botón flotante
   ============================================================ */

/* FAQ: el item abierto se realza y la respuesta entra suave */
.faq-item{ transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.faq-item:hover{ transform:translateX(4px); }
.faq-item:has(.faq-q[aria-expanded="true"]){
  box-shadow:0 12px 32px -14px rgba(32,134,206,.30);
}
.faq-q{ transition:color .25s var(--ease-out); }
.faq-q:hover{ color:#1a6ea8; }
.faq-chevron{ transition:transform .35s var(--ease-out); }
.faq-q[aria-expanded="true"] .faq-chevron{ transform:rotate(180deg); }
.faq-item:has(.faq-q[aria-expanded="true"]) .faq-a p{
  animation:cauceFaqIn .45s var(--ease-out);
}
@keyframes cauceFaqIn{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Formulario de contacto: foco con halo de marca */
.contact-form input, .contact-form textarea, .contact-form select,
.cf-grid input, .cf-grid textarea{
  transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus,
.cf-grid input:focus, .cf-grid textarea:focus{
  border-color:#2d92dc;
  box-shadow:0 0 0 4px rgba(45,146,220,.18);
  transform:translateY(-1px);
  outline:none;
}

/* Tarjetas de dato directo (correo, zona, teléfono, horario) */
.cont-dato{ transition:transform .3s var(--ease-out), background .3s var(--ease-out); border-radius:12px; padding:6px 8px; margin:-6px -8px; }
.cont-dato:hover{ transform:translateX(6px); background:rgba(45,146,220,.07); }
.cont-dato a{ transition:color .2s var(--ease-out); }
.cont-dato a:hover{ color:#1a6ea8; }

/* Iconos sociales del footer: despegue con giro */
.social-btn{ transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), color .3s var(--ease-out); }
.social-btn:hover{ transform:translateY(-4px) rotate(-5deg) scale(1.08); box-shadow:0 10px 22px -8px rgba(32,134,206,.45); }

/* Botón flotante de WhatsApp (lo inyecta el JS) */
.cauce-wa-float{
  position:fixed; left:22px; bottom:22px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,#25d366,#1aa15a);
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  box-shadow:0 10px 26px -6px rgba(26,161,90,.55);
  transform:scale(0); opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease-out, box-shadow .3s ease-out;
}
.cauce-wa-float.show{ transform:scale(1); opacity:1; }
.cauce-wa-float:hover{ transform:scale(1.1) rotate(6deg); box-shadow:0 14px 32px -6px rgba(26,161,90,.65); }
.cauce-wa-float svg{ width:30px; height:30px; }
/* Anillo que pulsa para llamar la atención sin estorbar */
.cauce-wa-float::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:cauceWaPulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes cauceWaPulse{
  0%{ transform:scale(.9); opacity:1; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ transform:scale(1.35); opacity:0; }
}
@media (max-width:720px){
  .cauce-wa-float{ left:16px; bottom:16px; width:52px; height:52px; }
}
@media (prefers-reduced-motion: reduce){
  .cauce-wa-float::after{ animation:none; }
  .cauce-wa-float{ transition:opacity .2s; }
  .faq-item:hover{ transform:none; }
  .cont-dato:hover{ transform:none; }
  .social-btn:hover{ transform:none; }
}