/* ============================================================
   ETNOS & PRAXIS — Derecho que llega al territorio
   Sitio 3D scroll cinematográfico
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
:root{
  --navy:#11263D;         /* dominante */
  --navy-deep:#122440;    /* navy hondo */
  --navy-night:#0C1A30;   /* navy noche */
  --gold:#B48A4F;         /* oro acento */
  --gold-light:#CFA968;   /* oro claro */
  --green:#3D6B4F;        /* verde territorio */
  --paper:#F5F1E8;        /* papel */
  --paper-deep:#ECE6D8;   /* papel hondo */
  --white-warm:#FCFBF7;   /* blanco cálido */
  --steel:#5B7396;        /* acero (motivo topográfico) */
  --ink:#12202f;
  --whatsapp:#25D366;
  --serif:'Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
/* scrollbar visible */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Motivo topográfico reutilizable ---------- */
.topo-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 38px, rgba(91,115,150,.10) 38px 39px),
    repeating-radial-gradient(circle at 78% 68%, transparent 0 46px, rgba(184,146,76,.08) 46px 47px);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-weight:600;font-size:.95rem;
  letter-spacing:.01em;padding:.95rem 1.6rem;border-radius:2px;
  cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s;
  border:1.5px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 6px 22px rgba(184,146,76,.35)}
.btn-gold:hover{background:var(--gold-light);box-shadow:0 10px 30px rgba(184,146,76,.45)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.10)}
.btn-navy{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-navy:hover{background:var(--navy);color:#fff}
.btn-ghost-dark{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost-dark:hover{background:#fff;color:var(--navy)}

/* ---------- Header fijo ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 34px;transition:background .4s ease,padding .4s ease,box-shadow .4s;
  background:transparent;
}
.site-header.scrolled{
  background:rgba(12,26,48,.92);backdrop-filter:blur(10px);
  padding:10px 34px;box-shadow:0 2px 20px rgba(0,0,0,.25);
}
.logo-slot{
  display:flex;align-items:center;gap:12px;color:#fff;
}
.logo-mark{
  border:1.5px dashed var(--gold-light);border-radius:3px;
  padding:8px 14px;font-family:var(--serif);font-size:.72rem;
  letter-spacing:.18em;color:var(--gold-light);text-transform:uppercase;
  white-space:nowrap;
}
.logo-word{font-family:'Montserrat',var(--serif);font-weight:600;font-size:1.05rem;color:#fff;line-height:1.05}
.logo-word small{display:block;font-family:var(--sans);font-weight:400;font-size:.6rem;letter-spacing:.22em;color:var(--gold-light);text-transform:uppercase}
.site-nav{display:flex;gap:26px;align-items:center}
.site-nav a{color:rgba(255,255,255,.82);font-size:.86rem;font-weight:500;letter-spacing:.02em;transition:color .2s}
.site-nav a:hover{color:var(--gold-light)}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer}

/* ============================================================
   SECCIÓN 1 — HERO cinematográfico
   ============================================================ */
.cinematic{position:relative}
#hero{min-height:100vh}
.cinematic .sticky{
  position:relative;min-height:100vh;width:100%;overflow:hidden;
  display:grid;place-items:center;background:var(--navy-night);
}
/* Video scrubbable: reemplaza la secuencia de 200 JPG (25,2 MB -> 4,0 MB) */
/* Sin background propio: el elemento de video es transparente hasta que
   pinta cuadros. Asi la foto de respaldo (z-index 0) se ve mientras carga,
   y sigue viendose si el navegador no puede reproducir el video. */
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.scrim{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(12,26,48,.55) 0%,rgba(12,26,48,.10) 30%,rgba(12,26,48,.30) 70%,rgba(12,26,48,.85) 100%),
    radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(12,26,48,.55) 100%);
}
.hero-overlay{
  position:relative;z-index:5;text-align:center;color:#fff;
  padding:0 24px;max-width:1000px;
}
.hero-overlay h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.6rem,7vw,6rem);line-height:1.02;letter-spacing:-.01em;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.hero-overlay h1 em{font-style:italic;color:var(--gold-light)}
.hero-overlay .sub{
  margin:1.8rem auto 0;max-width:680px;font-size:clamp(1rem,1.5vw,1.18rem);
  color:rgba(255,255,255,.9);line-height:1.65;text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
@keyframes pulse-hint{0%,100%{opacity:.8;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(8px)}}
.scroll-hint{animation:pulse-hint 2s ease-in-out infinite;
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  color:var(--gold-light);font-size:.75rem;letter-spacing:.32em;text-transform:uppercase;
  animation:pulse 2s ease-in-out infinite;z-index:10;
  transition:opacity 1.2s ease;pointer-events:none
}
@keyframes pulse{0%,100%{opacity:.6;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(8px)}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* Section shells */
.section{position:relative;padding:clamp(4.5rem,9vw,8rem) clamp(1.4rem,6vw,6rem);overflow:hidden}
.section-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.76rem;color:var(--gold)}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.1;letter-spacing:-.01em}
.lead{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.7;max-width:720px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* Reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ============================================================
   SECCIÓN 2 — Contadores
   ============================================================ */
.counters{background:var(--navy);color:#fff}
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;margin-top:1rem}
.counter{text-align:center;padding:1rem}
.stat-num{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,5vw,4.2rem);color:var(--gold-light);line-height:1}
.counter p{margin-top:.8rem;color:rgba(255,255,255,.82);font-size:.98rem;line-height:1.5}
.counter .divider{width:38px;height:2px;background:var(--gold);margin:.9rem auto 0;opacity:.7}

/* ============================================================
   SECCIÓN 3 — Motores
   ============================================================ */
.motors{background:var(--paper)}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:3rem}
.motor-card{
  background:var(--white-warm);border:1px solid rgba(27,54,93,.12);border-radius:6px;
  padding:2.2rem 1.9rem;transition:transform .35s ease,box-shadow .35s ease,border-color .35s;
  display:flex;flex-direction:column;
}
.motor-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(18,36,64,.16);border-color:rgba(184,146,76,.5)}
.motor-tag{font-family:var(--sans);font-weight:600;letter-spacing:.04em;color:var(--gold);font-size:.82rem;text-transform:uppercase;margin-bottom:.4rem}
.motor-card h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--navy);margin-bottom:.9rem;line-height:1.2}
.motor-card p{color:#3a4a5c;font-size:.96rem;line-height:1.65;flex:1}
.motor-link{margin-top:1.4rem;color:var(--navy);font-weight:600;font-size:.92rem;letter-spacing:.01em;transition:gap .2s,color .2s;display:inline-flex;gap:.35rem}
.motor-link:hover{color:var(--gold);gap:.7rem}

/* ============================================================
   SECCIÓN 4 — Casos (scrub 2)
   ============================================================ */
#casos{min-height:100vh}
.casos-overlay{position:relative;z-index:5;color:#fff;width:100%;max-width:1200px;padding:0 clamp(1.4rem,6vw,6rem);margin:0 auto}
.casos-overlay > h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;text-align:center;text-shadow:0 3px 30px rgba(0,0,0,.6);max-width:820px;margin:0 auto}
.caso-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.caso-card{
  background:rgba(12,26,48,.66);backdrop-filter:blur(8px);
  border:1px solid rgba(210,178,120,.28);border-radius:6px;padding:1.7rem 1.5rem;
}
.badge{display:inline-block;background:rgba(184,146,76,.18);color:var(--gold-light);border:1px solid rgba(210,178,120,.5);
  font-size:.72rem;font-weight:600;letter-spacing:.06em;padding:.3rem .7rem;border-radius:100px;text-transform:uppercase}
.estado{display:flex;align-items:center;gap:.5rem;margin:1rem 0 .3rem;font-size:.82rem;color:rgba(255,255,255,.85)}
.estado .dot{width:9px;height:9px;border-radius:50%;background:#57c98a;box-shadow:0 0 10px rgba(87,201,138,.9)}
.caso-card h3{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:#fff;margin:.3rem 0 .7rem}
.caso-card p{color:rgba(255,255,255,.8);font-size:.92rem;line-height:1.6}

/* ============================================================
   SECCIÓN 5 — Multimedia
   ============================================================ */
.multimedia{background:var(--navy-deep);color:#fff}
.mm-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;margin-top:2.6rem;align-items:stretch}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--navy-night));
  border:1px solid rgba(210,178,120,.35);display:grid;place-items:center;text-align:center;
}
.play-btn{width:74px;height:74px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 8px 30px rgba(184,146,76,.5);margin-bottom:1rem}
.play-btn::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}
.video-frame span{position:absolute;bottom:16px;left:0;right:0;font-size:.78rem;letter-spacing:.08em;color:rgba(255,255,255,.75);padding:0 1rem}
.photo-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.photo-slot{
  aspect-ratio:1/1;border:2px dashed var(--gold-light);border-radius:6px;
  display:grid;place-items:center;text-align:center;color:var(--gold-light);
  font-size:.78rem;letter-spacing:.14em;font-weight:600;background:rgba(210,178,120,.05);
}

/* ============================================================
   SECCIÓN 6 — Blog
   ============================================================ */
.blog{background:var(--paper)}
.post-card{background:var(--white-warm);border:1px solid rgba(27,54,93,.1);border-radius:6px;overflow:hidden;transition:transform .35s,box-shadow .35s}
.post-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(18,36,64,.14)}
.post-img{aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),var(--steel));position:relative;display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:.76rem;letter-spacing:.14em}
.post-img .topo-bg{opacity:.6}
.post-body{padding:1.5rem}
.post-cat{color:var(--gold);font-weight:600;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.post-body h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--navy);margin:.6rem 0;line-height:1.25}
.post-body p{color:#4a5768;font-size:.92rem;line-height:1.6}
.post-author{margin-top:1rem;font-size:.82rem;color:#8a94a1;border-top:1px solid rgba(27,54,93,.08);padding-top:.8rem}

/* ============================================================
   SECCIÓN 7 — Equipo
   ============================================================ */
.equipo{background:var(--white-warm)}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;margin-top:2.8rem}
.team-card{text-align:center}
.team-photo{
  aspect-ratio:3/4;border-radius:6px;margin-bottom:1rem;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy),var(--steel));
  border:2px solid var(--navy);display:grid;place-items:center;
}
.team-photo.placeholder{border:2px dashed var(--gold-light);background:rgba(91,115,150,.12)}
.team-photo span{color:var(--gold-light);font-size:.68rem;letter-spacing:.12em;font-weight:600;padding:0 .5rem}
.team-card h4{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--navy);line-height:1.2}
.team-card p{font-size:.82rem;color:#6a7686;margin-top:.25rem}
.team-lead .team-photo{border-color:var(--gold)}

/* ============================================================
   SECCIÓN 8 — LinkedIn
   ============================================================ */
.linkedin{background:var(--paper-deep)}
.li-frame{
  max-width:760px;margin:2.6rem auto 0;background:var(--white-warm);
  border:2px dashed var(--steel);border-radius:10px;padding:3.4rem 2rem;text-align:center;
}
.li-icon{width:64px;height:64px;border-radius:12px;background:#0A66C2;display:grid;place-items:center;margin:0 auto 1.3rem;color:#fff;font-family:var(--serif);font-weight:700;font-size:1.8rem}
.li-frame h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--navy);margin-bottom:.7rem}
.li-frame p{color:#5a6676;max-width:460px;margin:0 auto}

/* ============================================================
   SECCIÓN 9 — Transparencia
   ============================================================ */
.transparencia{background:#fff;border-top:1px solid rgba(27,54,93,.1);border-bottom:1px solid rgba(27,54,93,.1)}
.transparencia .section-inner{max-width:820px;text-align:center}
.transparencia p{color:#3a4a5c}

/* ============================================================
   SECCIÓN 10 — Dos casas (Fundación)
   ============================================================ */
.dos-casas{background:var(--green);color:#fff}
.dos-casas .eyebrow{color:rgba(255,255,255,.75)}
.dos-casas .section-inner{max-width:820px}
.dos-casas p{color:rgba(255,255,255,.92)}
.dos-casas .btn-ghost-dark{margin-top:1.8rem}

/* ============================================================
   SECCIÓN 11 — CTA final
   ============================================================ */
.cta-final{background:var(--navy);color:#fff;text-align:center}
.cta-final .section-inner{max-width:760px}
.cta-final p{color:rgba(255,255,255,.85)}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ============================================================
   SECCIÓN 12 — Footer
   ============================================================ */
.site-footer{background:var(--navy-night);color:rgba(255,255,255,.72);padding:4.5rem clamp(1.4rem,6vw,6rem) 2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem;max-width:1200px;margin:0 auto}
.footer-col h5{font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--gold-light);margin-bottom:1.1rem}
.footer-col a,.footer-col p{display:block;color:rgba(255,255,255,.7);font-size:.9rem;margin-bottom:.6rem;transition:color .2s}
.footer-col a:hover{color:var(--gold-light)}
.footer-brand .logo-mark{margin-bottom:1rem}
.footer-tag{font-family:var(--serif);font-style:italic;color:var(--gold-light);margin:.6rem 0 1.2rem}
.social-row{display:flex;gap:12px}
.social-row a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;font-size:.82rem;font-weight:600;transition:background .25s,border-color .25s;margin:0}
.social-row a:hover{background:var(--gold);border-color:var(--gold)}
.footer-bottom{max-width:1200px;margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55)}
.footer-bottom .tag{font-family:var(--serif);font-style:italic;color:var(--gold-light)}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:80;
  width:60px;height:60px;border-radius:50%;background:var(--whatsapp);
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.5);
  transition:transform .25s;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;fill:#fff}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .counter-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid-3,.caso-grid{grid-template-columns:1fr}
  .mm-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .site-nav{display:none}
  .site-nav.open{display:flex;position:absolute;top:100%;right:0;left:0;flex-direction:column;background:rgba(12,26,48,.97);padding:1.4rem 34px;gap:16px}
  .nav-toggle{display:block}
}
@media(max-width:560px){
  .team-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .section{padding:4rem 1.4rem}
}

/* ---------- prefers-reduced-motion: frames estáticos ---------- */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   EL VIDEO CORRE PARA TODOS
   Es un sitio publico: el fondo no se apaga por el ancho de la
   ventana ni por un ajuste de Windows que el visitante ni sabe
   que tiene. Quien pide reducir movimiento lo recibe en pausa,
   con un boton para reanudarlo, en vez de no recibirlo.
   La foto de respaldo vive siempre debajo, por si el video no
   puede reproducirse.
   ============================================================ */

/* ------------------------------------------------------------
   MOVIMIENTO GARANTIZADO, SIN DEPENDER DEL VIDEO
   La foto de respaldo tiene su propia deriva lenta, hecha con
   CSS puro. Funciona en el 100% de los navegadores: no necesita
   codecs, ni permiso de reproduccion automatica, ni peticiones
   parciales al servidor, ni que el CDN se porte bien.

   Cuesta 0 bytes extra. Si el video carga, se pinta encima y
   se ve el; si no carga -por lo que sea- el visitante igual ve
   una imagen viva y no una postal quieta.
   ------------------------------------------------------------ */
@keyframes deriva-fondo{
  0%   {transform:scale(1.06) translate3d(0,0,0)}
  50%  {transform:scale(1.14) translate3d(-1.4%,-1.2%,0)}
  100% {transform:scale(1.06) translate3d(0,0,0)}
}
.hero-poster{
  transform:scale(1.06);
  animation:deriva-fondo 42s ease-in-out infinite;
  will-change:transform;
}
/* Si el visitante pausa el video, tambien se detiene la deriva:
   un solo boton gobierna todo el movimiento del fondo. */
.cinematic.fondo-en-pausa .hero-poster{animation-play-state:paused}

/* Control de pausa (exigido por WCAG 2.2.2 para lo que se mueve solo) */
.video-toggle{
  position:absolute;left:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:8;
  width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;
  display:grid;place-items:center;
  background:rgba(12,26,48,.55);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.video-toggle svg{width:17px;height:17px;fill:rgba(255,255,255,.92)}
.video-toggle:hover{background:rgba(12,26,48,.85);border-color:var(--gold-light);transform:scale(1.06)}
.video-toggle:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.video-toggle.en-pausa{background:var(--gold);border-color:var(--gold-light)}
.video-toggle.en-pausa svg{fill:#0C1A30}
@media(max-width:820px){
  .video-toggle{width:36px;height:36px}
  .video-toggle svg{width:15px;height:15px}
}


/* ===== Logo oficial ===== */
.logo-img{height:46px;width:auto;display:block}
.logo-img-footer{height:52px;width:auto;display:block;margin-bottom:1rem}
@media(max-width:820px){.logo-img{height:38px}}

/* ===== Patrón entrelazado de marca (manual 6.x) ===== */
.brand-pattern{position:relative}
.brand-pattern::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("assets/iso-pattern.png");
  background-size:110px;background-repeat:repeat;
  opacity:.05;transform:rotate(0deg);
}
.brand-pattern > *{position:relative;z-index:1}


/* ============================================================
   MOVIL — altura real del visor y layout propio de CASOS
   ============================================================ */
@media(max-width:820px){
  /* svh = altura VISIBLE del movil, sin contar la barra del navegador */
  #hero{min-height:100svh}
  .cinematic .sticky{min-height:100svh}
  .hero-overlay{padding:0 20px}
  .hero-overlay h1{font-size:clamp(2.1rem,8.5vw,3.2rem);line-height:1.06}
  .hero-overlay .sub{font-size:1rem;margin-top:1.2rem;line-height:1.55}
  .hero-cta{margin-top:1.8rem;gap:12px;width:100%;flex-direction:column}
  .hero-cta .btn{width:100%;text-align:center}

  /* CASOS en movil: el rio como banda superior, tarjetas debajo sobre navy */
  #casos.cinematic .sticky{
    display:block;min-height:auto;height:auto;
    padding:0 0 clamp(56px,12vw,80px);
    background:linear-gradient(160deg,#16304F 0%,var(--navy-night) 100%);
  }
  #casos .hero-poster{
    position:relative;inset:auto;display:block;
    width:100%;height:40vh;min-height:240px;object-fit:cover;
  }
  #casos .bg-video{display:none}
  #casos .video-toggle{display:none}
  #casos .scrim{display:none}
  #casos .casos-overlay{padding-top:clamp(32px,8vw,48px)}
}