/* ============================================================
   Kaizen Accounters — Motion Site
   Paleta del brief: azul oscuro corporativo · verde esmeralda · blanco/slate
   ============================================================ */

:root{
  --navy-950:#060F1E;
  --navy-900:#0A1628;
  --navy-850:#0D1D33;
  --navy-800:#12263F;
  --navy-700:#1B3557;
  --navy-600:#25456B;

  --emerald-300:#6EE7B7;
  --emerald-400:#34D399;
  --emerald-500:#10B981;
  --emerald-600:#059669;

  --slate-50:#F8FAFC;
  --slate-100:#F1F5F9;
  --slate-200:#E2E8F0;
  --slate-300:#CBD5E1;
  --slate-400:#94A3B8;
  --slate-500:#64748B;

  --white:#FFFFFF;

  --font-title:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  --wrap:1200px;
  --pad:clamp(20px,5vw,40px);
  --radius:18px;

  --shadow-sm:0 2px 10px rgba(6,15,30,.10);
  --shadow-md:0 12px 34px rgba(6,15,30,.14);
  --shadow-lg:0 26px 70px rgba(6,15,30,.30);

  --header-h:74px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--navy-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,svg{max-width:100%;display:block;}
a{color:inherit;}

h1,h2,h3,h4{font-family:var(--font-title);font-weight:600;line-height:1.14;margin:0 0 .5em;letter-spacing:-.01em;}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);}
h2{font-size:clamp(1.9rem,3.6vw,3rem);}
h3{font-size:clamp(1.2rem,2vw,1.5rem);}
h4{font-size:1.05rem;}
p{margin:0 0 1em;}

em{font-style:italic;color:var(--emerald-600);}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.section-pad{padding:clamp(72px,10vw,128px) 0;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--emerald-600);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--emerald-400);outline-offset:3px;border-radius:6px;}

/* ── Tipografía de apoyo ───────────────────────────── */
.section-tag{
  display:inline-block;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--emerald-600);
  margin-bottom:14px;
}
.section-title{margin-bottom:16px;}
.section-sub{color:var(--slate-500);font-size:1.06rem;max-width:62ch;}

.on-dark .section-tag{color:var(--emerald-400);}
.on-dark .section-sub{color:var(--slate-300);}
.on-dark h2,.on-dark h3{color:var(--white);}
.on-dark em{color:var(--emerald-400);}

/* ── Botones ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;
  font-family:var(--font-body);font-size:.98rem;font-weight:700;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-primary{background:var(--emerald-500);color:#04231A;box-shadow:0 10px 30px rgba(16,185,129,.32);}
.btn-primary:hover{background:var(--emerald-400);transform:translateY(-2px);box-shadow:0 16px 38px rgba(16,185,129,.42);}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--white);border-color:rgba(255,255,255,.42);backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--emerald-600);border-color:var(--emerald-500);padding:11px 22px;font-size:.9rem;}
.btn-block{width:100%;}
.btn-outline:hover{background:var(--emerald-500);color:#04231A;}
.btn-white{background:var(--white);color:var(--navy-900);box-shadow:var(--shadow-md);}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* ── Header ────────────────────────────────────────── */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(10,22,40,.55);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.site-header.is-solid{background:rgba(10,22,40,.94);box-shadow:0 6px 26px rgba(6,15,30,.34);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--white);
  font-family:var(--font-title);font-weight:700;font-size:1.02rem;letter-spacing:.04em;}
.brand img{width:36px;height:36px;object-fit:contain;}
.brand span{white-space:nowrap;}

.nav{display:flex;align-items:center;gap:28px;}
.nav a{
  color:var(--slate-200);text-decoration:none;font-size:.93rem;font-weight:500;
  position:relative;padding:6px 0;transition:color .2s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--emerald-400);
  transition:width .25s ease;
}
.nav a:hover{color:var(--white);}
.nav a:hover::after{width:100%;}

.header-cta{padding:11px 22px;font-size:.9rem;}

.nav-toggle{
  display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  padding:10px;flex-direction:column;justify-content:space-between;
}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--white);border-radius:2px;transition:transform .3s ease,opacity .3s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(11px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-11px) rotate(-45deg);}

@media (max-width:1000px){
  .nav-toggle{display:flex;}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,22,40,.98);backdrop-filter:blur(16px);
    padding:8px var(--pad) 26px;
    border-bottom:1px solid rgba(255,255,255,.12);
    transform:translateY(-120%);transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  .nav.is-open{transform:translateY(0);}
  .nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:1rem;}
  .nav a::after{display:none;}
  .header-cta{display:none;}
}

/* ============================================================
   HERO CINEMATOGRÁFICO
   ============================================================ */

/* --static es la ÚNICA fuente de verdad de las 5 condiciones de
   versión estática. El JS lo lee con getComputedStyle, de modo que
   CSS y JS nunca pueden discrepar sobre qué mostrar. */
.hero{--static:0;}
@media (max-width:720px){                                        .hero{--static:1;} }
@media (max-width:1024px) and (orientation:portrait){            .hero{--static:1;} }
@media (hover:none) and (pointer:coarse) and (orientation:portrait){ .hero{--static:1;} }
@media (orientation:landscape) and (max-height:520px){           .hero{--static:1;} }
@media (prefers-reduced-motion:reduce){                          .hero{--static:1;} }

.hero{
  position:relative;
  height:280vh;              /* 180vh de recorrido = 2 tramos de 90vh */
  background:var(--navy-950);
}
.hero-sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  display:flex;align-items:flex-end;
}

/* El video arranca por debajo del header. En los últimos segundos la cámara
   se acerca tanto que la cabeza queda pegada al borde superior del cuadro, así
   que sin este desplazamiento el header le corta la frente. */
.hero-media{position:absolute;top:calc(var(--header-h) + 3.4vh);left:0;right:0;bottom:0;}
.hero-media img,.hero-media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;
}
.hero-video{opacity:0;transition:opacity .6s ease;}
.hero-video.is-ready{opacity:1;}

/* Scrim de legibilidad: base permanente + refuerzo local por tramo.
   Se profundiza sólo mientras hay texto activo encima. */
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(6,15,30,.94) 0%,
      rgba(6,15,30,.88) 26%,
      rgba(6,15,30,.60) 48%,
      rgba(6,15,30,.30) 68%,
      rgba(6,15,30,.42) 100%),
    linear-gradient(to bottom,
      rgba(6,15,30,.97) 0%,
      rgba(6,15,30,.92) 7%,
      rgba(6,15,30,.34) 17%,
      rgba(6,15,30,.16) 62%,
      rgba(6,15,30,.86) 100%);
}
/* La opacidad la fija el JS por tramos de 0.05 según el avance del
   scroll, porque el lado izquierdo del video se aclara a medida que
   la cámara se acerca. Transición corta y lineal para que los saltos
   entre tramos no se noten ni se encimen. */
.hero-scrim-boost{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(95deg,rgba(6,15,30,.92) 0%,rgba(6,15,30,.72) 42%,rgba(6,15,30,0) 74%);
  opacity:0;transition:opacity .2s linear;
}

/* Retícula y gráficas financieras: SVG/CSS sobre el video, nunca dentro
   del video generado, para que no aparezcan números deformes. */
.hero-graph{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;}
.hero-graph .grid-line{stroke:rgba(110,231,183,.16);stroke-width:.5;}
.hero-graph .plot-line{
  fill:none;stroke:rgba(52,211,153,.55);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(16,185,129,.55));
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);
}
.hero-graph.is-drawn .plot-line{stroke-dashoffset:0;}
.hero-graph .plot-dot{fill:var(--emerald-300);opacity:.9;}

/* Anillo de carga honesto mientras se descarga el video */
.hero-loader{
  position:absolute;right:clamp(20px,4vw,44px);bottom:clamp(84px,12vh,120px);
  display:flex;align-items:center;gap:12px;
  color:var(--slate-300);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.hero-loader.is-visible{opacity:1;}
.hero-loader svg{transform:rotate(-90deg);}
.hero-loader circle{fill:none;stroke-width:2.5;}
.hero-loader .track{stroke:rgba(255,255,255,.16);}
.hero-loader .bar{stroke:var(--emerald-400);stroke-linecap:round;transition:stroke-dashoffset .2s linear;}

/* Tramos de texto */
.hero-beats{position:relative;width:100%;padding-bottom:clamp(56px,10vh,96px);}
/* Los tramos se apilan en la misma celda. El saliente se apaga rápido y el
   entrante espera a que termine: si ambos se cruzan a media opacidad, los dos
   textos se leen encima uno del otro. */
.hero-beat{
  grid-area:1/1;
  max-width:min(660px,54vw);
  opacity:0;transform:translateY(26px);
  transition:opacity .24s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s;
  visibility:hidden;
}
.hero-beats-inner{display:grid;}
.hero-beat.is-active{
  opacity:1;transform:none;visibility:visible;
  transition:opacity .4s ease .2s,transform .55s cubic-bezier(.22,1,.36,1) .2s,visibility 0s;
}

.hero-beat .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--emerald-300);margin-bottom:18px;
}
.hero-beat .eyebrow::before{content:"";width:26px;height:2px;background:var(--emerald-400);}

.hero-beat h1,.hero-beat h2,.hero-beat p{
  color:var(--white);
  text-shadow:0 2px 18px rgba(6,15,30,.92),0 1px 4px rgba(6,15,30,.9);
}
.hero-beat h1{margin-bottom:20px;}
.hero-beat h2{font-size:clamp(1.7rem,3.2vw,2.7rem);margin-bottom:18px;}
.hero-beat p{color:var(--slate-200);font-size:clamp(1rem,1.25vw,1.15rem);max-width:52ch;}

.hero-beat .hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}

.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);margin-top:30px;}
.hero-stat strong{
  display:block;font-family:var(--font-title);font-size:clamp(2rem,3.4vw,2.9rem);
  color:var(--white);line-height:1;text-shadow:0 2px 16px rgba(6,15,30,.9);
}
.hero-stat span{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-300);}

.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.hero-pill{
  padding:9px 18px;border-radius:999px;
  background:rgba(16,185,129,.14);border:1px solid rgba(52,211,153,.42);
  color:var(--emerald-300);font-size:.86rem;font-weight:600;
  backdrop-filter:blur(6px);
}

/* Indicador de progreso del hero */
.hero-progress{
  position:absolute;left:var(--pad);bottom:clamp(28px,5vh,46px);
  display:flex;align-items:center;gap:14px;
  color:var(--slate-400);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
.hero-progress-track{width:clamp(90px,14vw,170px);height:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden;}
.hero-progress-bar{height:100%;width:0;background:var(--emerald-400);transition:width .18s linear;}

/* ── Versión estática completa (5 condiciones) ─────── */
.hero.is-static{height:auto;min-height:100vh;}
.hero.is-static .hero-sticky{position:relative;height:auto;min-height:100vh;padding-top:calc(var(--header-h) + 40px);}
.hero.is-static .hero-video,
.hero.is-static .hero-loader,
.hero.is-static .hero-progress{display:none;}
.hero.is-static .hero-media img{object-position:70% 50%;}
.hero.is-static .hero-scrim{
  background:
    linear-gradient(100deg,rgba(6,15,30,.96) 0%,rgba(6,15,30,.90) 34%,rgba(6,15,30,.62) 64%,rgba(6,15,30,.52) 100%),
    linear-gradient(to bottom,rgba(6,15,30,.72) 0%,rgba(6,15,30,.42) 40%,rgba(6,15,30,.90) 100%);
}
.hero.is-static .hero-beats-inner{display:block;}
.hero.is-static .hero-beat{
  opacity:1;transform:none;visibility:visible;
  max-width:640px;margin-bottom:34px;
}
.hero.is-static .hero-beat:last-child{margin-bottom:0;}
.hero.is-static .hero-beat h2{font-size:clamp(1.35rem,4.4vw,1.7rem);}
.hero.is-static .hero-beat p{font-size:1rem;}
.hero.is-static .hero-beats{padding-top:20px;padding-bottom:clamp(48px,9vh,80px);}

/* En vertical, un frame 16:9 recortado a pantalla completa deja el texto
   encima del CEO. Ahí el hero estático se convierte en otro diseño:
   una banda de imagen arriba y el contenido sobre azul sólido debajo. */
@media (max-width:720px){
  .hero-beat{max-width:100%;}
  .hero.is-static{background:var(--navy-950);}
  .hero.is-static .hero-sticky{display:block;position:relative;min-height:0;padding-top:0;}
  /* La banda de imagen empieza bajo el header fijo, para que no le corte la cara. */
  .hero.is-static .hero-media{
    position:relative;top:0;margin-top:var(--header-h);
    height:52vh;min-height:300px;
  }
  .hero.is-static .hero-media img{object-position:68% 46%;}
  .hero.is-static .hero-scrim{
    top:var(--header-h);
    height:52vh;min-height:300px;
    background:linear-gradient(to bottom,
      rgba(6,15,30,.62) 0%,
      rgba(6,15,30,.18) 30%,
      rgba(6,15,30,.55) 74%,
      var(--navy-950) 100%);
  }
  .hero.is-static .hero-scrim-boost{display:none;}
  .hero.is-static .hero-graph{top:var(--header-h);height:52vh;min-height:300px;opacity:.34;}
  /* El shorthand debe conservar el padding lateral de .container. */
  .hero.is-static .hero-beats{position:relative;padding:26px var(--pad) clamp(44px,8vh,72px);}
  .hero.is-static .hero-beat{margin-bottom:30px;}
  .hero.is-static .hero-beat h1{font-size:clamp(2rem,8.5vw,2.7rem);}
  .hero.is-static .hero-beat .hero-btns .btn{width:100%;}
}

/* ============================================================
   SECCIONES
   ============================================================ */

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-left{opacity:0;transform:translateX(-34px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-right{opacity:0;transform:translateX(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);}
.is-visible{opacity:1 !important;transform:none !important;}
/* En anchos donde las columnas ya se apilan, el desplazamiento previo pasa a
   ser vertical: si no, los elementos aún no revelados sobresalen del ancho de
   la pantalla y el cuerpo gana scroll horizontal. */
@media (max-width:900px){
  .reveal-left,.reveal-right{transform:translateY(30px);}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right{opacity:1;transform:none;transition:none;}
}

/* Servicios */
#servicios{background:var(--slate-50);}
.services-header{text-align:center;margin-bottom:clamp(44px,6vw,70px);}
.services-header .section-sub{margin-left:auto;margin-right:auto;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(20px,2.6vw,30px);}

.service-card{
  background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius);
  padding:clamp(28px,3vw,38px);
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--emerald-400);}
.icon-badge{
  width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:var(--emerald-400);
}
.service-card p{color:var(--slate-500);}
.check-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;}
.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;color:var(--navy-800);}
.check-list svg{flex:0 0 auto;margin-top:4px;color:var(--emerald-600);}
.service-card .btn-outline{margin-top:auto;align-self:flex-start;}

/* ── Secciones con fondo de imagen o video ─────────── */
.has-media{position:relative;overflow:hidden;background:var(--navy-950);isolation:isolate;}
.band-media{position:absolute;inset:0;z-index:-2;}
.band-media img,.band-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.band-media video{opacity:0;transition:opacity .9s ease;}
.band-media video.is-ready{opacity:1;}

/* Scrim parejo para secciones cuyo contenido ocupa todo el ancho. */
.scrim-even{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(6,15,30,.90) 0%,rgba(6,15,30,.84) 40%,rgba(6,15,30,.92) 100%),
    linear-gradient(90deg,rgba(6,15,30,.30),rgba(6,15,30,.10) 50%,rgba(6,15,30,.30));
}

/* Tarjetas sobre fondo oscuro: vidrio en vez de blanco. */
.on-dark .service-card,
.on-dark .plan,
.on-dark .step,
.on-dark .quote,
.on-dark .faq-item,
.on-dark .banner-note{
  background:rgba(11,24,43,.74);
  border-color:rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
}
.on-dark .step p,
.on-dark .quote p,
.on-dark .plan .plan-desc,
.on-dark .faq-item .faq-body{color:var(--slate-300);}
.on-dark .check-list li{color:var(--slate-200);}
.on-dark .check-list svg{color:var(--emerald-400);}
.on-dark .faq-item summary{color:var(--white);}
.on-dark .faq-item summary::after{border-color:var(--emerald-400);}
.on-dark .faq-item[open]{border-color:var(--emerald-400);}
.on-dark .plan.featured{border-color:var(--emerald-400);}
.on-dark .plan-note{color:var(--slate-300);}
.on-dark .plan-note strong{color:var(--white);}
.on-dark .btn-outline{color:var(--emerald-300);border-color:var(--emerald-400);}
.on-dark .btn-outline:hover{background:var(--emerald-400);color:#04231A;}
.on-dark .icon-badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);}
.on-dark .banner-note p{color:var(--slate-300);}

#raices{position:relative;overflow:hidden;background:var(--navy-950);isolation:isolate;}
/* Oscuro donde vive el texto, abierto a la derecha para que el paisaje
   de Boyacá se vea. El texto ocupa como mucho el 52% izquierdo. */
.band-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(6,15,30,.93) 0%,
      rgba(6,15,30,.86) 34%,
      rgba(6,15,30,.52) 60%,
      rgba(6,15,30,.24) 100%),
    linear-gradient(to bottom,rgba(6,15,30,.34),rgba(6,15,30,.40));
}
@media (max-width:900px){
  /* En pantallas angostas el texto cruza todo el ancho. */
  .band-scrim{
    background:
      linear-gradient(90deg,rgba(6,15,30,.90) 0%,rgba(6,15,30,.84) 60%,rgba(6,15,30,.66) 100%),
      linear-gradient(to bottom,rgba(6,15,30,.44),rgba(6,15,30,.50));
  }
}
.band-graph{position:absolute;inset:0;z-index:-1;opacity:.45;mix-blend-mode:screen;pointer-events:none;}
.band-graph .grid-line{stroke:rgba(110,231,183,.14);stroke-width:.5;}
.band-graph .plot-line{fill:none;stroke:rgba(52,211,153,.5);stroke-width:1.1;filter:drop-shadow(0 0 6px rgba(16,185,129,.5));}
#raices .band-inner{max-width:640px;}
#raices h2,#raices p{text-shadow:0 2px 16px rgba(6,15,30,.9);}
#raices p{color:var(--slate-200);}

/* Nosotros */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}

.stat-card{
  background:linear-gradient(150deg,var(--navy-900),var(--navy-700));
  color:var(--white);border-radius:24px;padding:clamp(32px,4vw,48px);
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);
}
.stat-card::after{
  content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.32),transparent 70%);
}
.stat-card .big-number{
  font-family:var(--font-title);font-size:clamp(4.6rem,9vw,7rem);line-height:.9;
  color:var(--emerald-400);margin-bottom:14px;
}
.stat-card h3,
.stat-card .stat-card-title{
  color:var(--white);
  font-family:var(--font-title);font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);
  line-height:1.14;margin:0 0 .5em;
}
.stat-card p{color:var(--slate-300);margin:0;}

.float-card{
  display:flex;align-items:center;gap:16px;
  background:var(--white);border:1px solid var(--slate-200);border-radius:16px;
  padding:18px 24px;box-shadow:var(--shadow-md);
  margin:-34px 0 0 auto;width:fit-content;position:relative;z-index:2;
}
.float-card .icon-badge{width:46px;height:46px;border-radius:12px;margin:0;}
.float-card strong{display:block;font-family:var(--font-title);font-size:1.6rem;line-height:1;color:var(--navy-900);}
.float-card span{font-size:.82rem;color:var(--slate-500);}

.pillars{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px;}
.pillar{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:14px;padding:22px;}
.pillar svg{color:var(--emerald-600);margin-bottom:10px;}
.pillar h4{margin-bottom:5px;}
.pillar p{margin:0;font-size:.9rem;color:var(--slate-500);}
@media (max-width:520px){.pillars{grid-template-columns:1fr;}}

/* Misión y visión */
#mision-vision{background:var(--slate-50);}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px);}
@media (max-width:820px){.mv-grid{grid-template-columns:1fr;}}
.mv-card{background:var(--white);border:1px solid var(--slate-200);border-left:4px solid var(--emerald-500);
  border-radius:var(--radius);padding:clamp(28px,3vw,40px);}
.mv-card p{color:var(--slate-500);margin:0;}

/* CEO */
#ceo{background:var(--navy-950);}
.ceo-photo{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);}
.ceo-photo img{width:100%;height:auto;}
.ceo-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,15,30,.72),transparent 46%);
}
.ceo-badge{
  position:absolute;left:22px;bottom:22px;z-index:2;
  background:rgba(10,22,40,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(52,211,153,.4);border-radius:999px;
  padding:11px 22px;color:var(--white);font-size:.9rem;font-weight:700;
}
.ceo-badge span{color:var(--emerald-400);font-weight:500;}
#ceo p{color:var(--slate-300);}
#ceo strong{color:var(--white);}
.ceo-name{display:block;color:var(--emerald-400);font-weight:600;margin-bottom:18px;font-size:.98rem;}
.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0;}
.tag{padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);color:var(--slate-200);font-size:.85rem;}
.project-card{
  background:rgba(16,185,129,.09);border:1px solid rgba(52,211,153,.32);
  border-radius:16px;padding:24px;
}
.project-card strong{display:block;color:var(--emerald-300);margin-bottom:8px;font-size:1.02rem;}
.project-card p{margin:0;font-size:.95rem;}

/* Proceso */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,2.6vw,30px);}
.step{position:relative;padding:34px 26px 30px;background:var(--white);
  border:1px solid var(--slate-200);border-radius:var(--radius);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.step-num{
  font-family:var(--font-title);font-size:3rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--emerald-500);
  margin-bottom:14px;
}
.step p{margin:0;color:var(--slate-500);font-size:.95rem;}

/* Testimonios */
#testimonios{background:var(--slate-50);}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.6vw,28px);}
.quote{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius);padding:30px;
  display:flex;flex-direction:column;}
.stars{color:#F59E0B;letter-spacing:3px;margin-bottom:14px;font-size:1.05rem;}
.quote p{font-size:1rem;color:var(--navy-800);flex:1;}
.quote-author{display:flex;align-items:center;gap:13px;margin-top:18px;}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy-800),var(--emerald-600));
  color:var(--white);font-weight:700;font-family:var(--font-title);}
.quote-author strong{display:block;font-size:.95rem;}
.quote-author span{font-size:.8rem;color:var(--slate-500);}

/* Membresías */
.banner-note{
  display:flex;gap:18px;align-items:flex-start;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:var(--white);
  border-radius:var(--radius);padding:26px 30px;margin-bottom:clamp(30px,4vw,46px);
}
.banner-note svg{flex:0 0 auto;color:var(--emerald-400);margin-top:3px;}
.banner-note strong{display:block;margin-bottom:6px;font-family:var(--font-title);font-size:1.15rem;}
.banner-note p{margin:0;color:var(--slate-300);font-size:.95rem;}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,2.6vw,30px);align-items:start;}
.plan{
  position:relative;background:var(--white);border:1px solid var(--slate-200);
  border-radius:var(--radius);padding:clamp(28px,3vw,38px);
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.plan.featured{border:2px solid var(--emerald-500);box-shadow:var(--shadow-md);}
.plan-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--emerald-500);color:#04231A;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap;
}
.plan h3{margin-bottom:8px;}
.plan .plan-desc{color:var(--slate-500);font-size:.94rem;}
.plan .check-list{margin-bottom:26px;}
.plan .btn-outline{margin-top:auto;align-self:stretch;}
.plan-note{text-align:center;margin-top:clamp(28px,4vw,44px);color:var(--slate-500);font-size:.95rem;}
.plan-note strong{color:var(--navy-900);}

/* Aliados */
#aliados{background:var(--slate-50);}
.ally-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,2.6vw,30px);}
.ally{position:relative;background:var(--white);border:1px solid var(--slate-200);
  border-radius:var(--radius);padding:clamp(28px,3vw,36px);text-align:center;}
.ally-badge{display:inline-block;background:rgba(16,185,129,.12);color:var(--emerald-600);
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;margin-bottom:20px;}
.ally-logo{height:96px;display:grid;place-items:center;margin-bottom:18px;}
.ally-logo img{max-height:96px;width:auto;object-fit:contain;}
.ally p{color:var(--slate-500);font-size:.95rem;}
.ally-promo{background:var(--slate-50);border:1px dashed var(--slate-300);border-radius:12px;
  padding:14px 18px;font-size:.9rem;color:var(--navy-800);margin-top:18px;}

/* Producto */
.product{
  display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(28px,4vw,54px);align-items:center;
  background:var(--white);border:1px solid var(--slate-200);border-radius:24px;
  padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-sm);
}
@media (max-width:820px){.product{grid-template-columns:1fr;}}
.product-img{border-radius:16px;overflow:hidden;background:var(--slate-50);border:1px solid var(--slate-200);}
.product-img img{width:100%;height:auto;}
.product-badge{display:inline-block;background:var(--navy-900);color:var(--emerald-400);
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;margin-bottom:16px;}
.price{font-family:var(--font-title);font-size:2.6rem;color:var(--navy-900);line-height:1;margin:20px 0;}
.price span{font-size:.95rem;font-family:var(--font-body);color:var(--slate-500);margin-left:8px;}
.product-note{font-size:.85rem;color:var(--slate-500);margin:14px 0 0;}

/* FAQ */
.faq-list{max-width:840px;margin:0 auto;display:grid;gap:14px;}
.faq-item{background:var(--white);border:1px solid var(--slate-200);border-radius:14px;overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 26px;
  font-family:var(--font-title);font-size:1.08rem;font-weight:600;color:var(--navy-900);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--emerald-600);border-bottom:2px solid var(--emerald-600);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-3px);}
.faq-item .faq-body{padding:0 26px 24px;color:var(--slate-500);font-size:.98rem;}
.faq-item[open]{border-color:var(--emerald-400);}

/* CTA. Reusa el frame final del video como imagen de diseño, en el mismo
   mundo visual del hero, con la acción centrada sobre el lado oscuro. */
#cta{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:var(--navy-950);
}
.cta-media{position:absolute;inset:0;z-index:-2;}
.cta-media img{width:100%;height:100%;object-fit:cover;object-position:78% 40%;}
.cta-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,15,30,.90) 0%,rgba(6,15,30,.86) 52%,rgba(6,15,30,.66) 100%),
    linear-gradient(to bottom,rgba(6,15,30,.52),rgba(6,15,30,.62));
}
#cta h2{color:var(--white);text-shadow:0 2px 18px rgba(6,15,30,.92);}
#cta p{color:var(--slate-200);max-width:56ch;margin:0 auto 32px;text-shadow:0 2px 14px rgba(6,15,30,.9);}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px);}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px;}
.contact-list li{display:flex;gap:16px;align-items:flex-start;}
.contact-list .icon-badge{width:48px;height:48px;border-radius:13px;margin:0;flex:0 0 auto;}
.contact-list strong{display:block;font-size:.95rem;color:var(--navy-900);}
.contact-list span,.contact-list a{color:var(--slate-500);font-size:.95rem;text-decoration:none;}
.contact-list a:hover{color:var(--emerald-600);text-decoration:underline;}

.contact-card{
  background:var(--slate-50);border:1px solid var(--slate-200);border-radius:24px;
  padding:clamp(28px,3.4vw,42px);
}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.86rem;font-weight:700;margin-bottom:7px;color:var(--navy-800);}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--slate-300);border-radius:11px;
  font-family:inherit;font-size:.97rem;color:var(--navy-900);background:var(--white);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--emerald-500);box-shadow:0 0 0 4px rgba(16,185,129,.16);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.form-note{font-size:.84rem;color:var(--slate-500);margin:14px 0 0;text-align:center;}

/* Footer */
.site-footer{background:var(--navy-950);color:var(--slate-300);padding:clamp(56px,7vw,84px) 0 32px;}
/* Cinco columnas desde que se sumo Legal. La marca ocupa el doble. */
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:clamp(24px,3vw,40px);}
@media (max-width:1080px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr;}}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.site-footer .brand{margin-bottom:16px;}
.site-footer p{font-size:.93rem;max-width:38ch;}
.site-footer h4{color:var(--white);font-family:var(--font-body);font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.site-footer ul a{color:var(--slate-400);text-decoration:none;font-size:.93rem;transition:color .2s ease;}
.site-footer ul a:hover{color:var(--emerald-400);}
.social{display:flex;gap:12px;margin-top:20px;}
.social a{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--slate-300);transition:background .25s ease,color .25s ease,transform .25s ease;
}
.social a:hover{background:var(--emerald-500);color:#04231A;transform:translateY(-2px);}
.footer-bottom{
  margin-top:clamp(38px,5vw,58px);padding-top:24px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.85rem;color:var(--slate-500);
}

/* WhatsApp flotante */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#053B1E;box-shadow:0 10px 30px rgba(37,211,102,.42);
  transition:transform .25s ease;
}
.wa-float:hover{transform:scale(1.08);}
@media (prefers-reduced-motion:reduce){.wa-float:hover{transform:none;}}

/* ============================================================
   PÁGINAS LEGALES
   Política de datos, términos y cookies. Misma paleta y
   tipografía del sitio; el ancho de lectura se acorta porque
   es texto largo y corrido, no secciones de marketing.
   ============================================================ */

.legal{
  background:var(--navy-950);
  padding:calc(var(--header-h) + clamp(48px,7vw,86px)) 0 clamp(60px,8vw,100px);
  min-height:80vh;
}
.legal-wrap{max-width:820px;margin:0 auto;}

.legal-cabecera{margin-bottom:clamp(34px,4vw,52px);}
.legal-cabecera h1{
  color:var(--white);font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.12;margin:0 0 14px;
}
.legal-fecha{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.82rem;color:var(--slate-400);
  padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}

.legal-cuerpo{color:var(--slate-300);font-size:1rem;line-height:1.75;}
.legal-cuerpo h2{
  color:var(--white);font-size:clamp(1.25rem,2.2vw,1.6rem);
  margin:clamp(34px,4vw,48px) 0 14px;padding-top:clamp(20px,2.5vw,28px);
  border-top:1px solid rgba(255,255,255,.10);
}
.legal-cuerpo h2:first-child{border-top:0;padding-top:0;margin-top:0;}
.legal-cuerpo h3{
  color:var(--emerald-300);font-family:var(--font-body);font-weight:700;
  font-size:1.02rem;margin:26px 0 8px;
}
.legal-cuerpo p{margin:0 0 15px;}
.legal-cuerpo strong{color:var(--white);}
.legal-cuerpo a{color:var(--emerald-400);text-decoration:underline;text-underline-offset:3px;}
.legal-cuerpo a:hover{color:var(--emerald-300);}
.legal-cuerpo ul,.legal-cuerpo ol{margin:0 0 18px;padding-left:22px;}
.legal-cuerpo li{margin-bottom:9px;}
.legal-cuerpo li::marker{color:var(--emerald-500);}

/* Ficha del responsable y cuadros de aviso */
.legal-ficha{
  background:var(--navy-900);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:clamp(20px,2.6vw,28px);margin:0 0 20px;
}
.legal-ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 20px;font-size:.95rem;}
.legal-ficha dt{color:var(--slate-400);}
.legal-ficha dd{margin:0;color:var(--white);overflow-wrap:anywhere;}
@media (max-width:520px){
  .legal-ficha dl{grid-template-columns:1fr;gap:3px;}
  .legal-ficha dd{margin-bottom:10px;}
}

.legal-aviso{
  display:flex;gap:13px;align-items:flex-start;
  background:rgba(16,185,129,.09);border:1px solid rgba(52,211,153,.32);
  border-radius:14px;padding:16px 19px;margin:0 0 20px;font-size:.94rem;
}
.legal-aviso svg{flex:0 0 auto;margin-top:3px;color:var(--emerald-400);}
.legal-aviso p:last-child{margin-bottom:0;}

.legal-volver{
  display:inline-flex;align-items:center;gap:9px;margin-top:clamp(38px,5vw,54px);
  color:var(--emerald-400);text-decoration:none;font-weight:600;font-size:.95rem;
}
.legal-volver:hover{color:var(--emerald-300);}
.legal-volver svg{transition:transform .2s ease;}
.legal-volver:hover svg{transform:translateX(-3px);}

/* Índice de las otras páginas legales */
.legal-otras{
  margin-top:clamp(40px,5vw,60px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:12px;
}
.legal-otras a{
  padding:10px 18px;border-radius:999px;font-size:.9rem;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:var(--slate-200);transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.legal-otras a:hover{border-color:var(--emerald-400);color:var(--white);background:rgba(16,185,129,.12);}

/* ── Consentimiento en el formulario ──────────────── */
.consentimiento{
  display:flex;gap:12px;align-items:flex-start;
  margin:4px 0 18px;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--slate-300);
  transition:border-color .25s ease,background .25s ease;
}
.consentimiento input[type=checkbox]{
  flex:0 0 auto;width:19px;height:19px;margin:2px 0 0;
  accent-color:var(--emerald-600);cursor:pointer;
}
.consentimiento label{font-size:.88rem;line-height:1.55;color:var(--slate-500);cursor:pointer;}
.consentimiento a{color:var(--emerald-600);text-decoration:underline;text-underline-offset:2px;}
.consentimiento a:hover{color:var(--emerald-500);}
.consentimiento.falta{
  border-color:#DC2626;background:rgba(220,38,38,.07);
  animation:consentimiento-sacudir .4s ease;
}
@keyframes consentimiento-sacudir{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}
@media (prefers-reduced-motion:reduce){.consentimiento.falta{animation:none;}}

.consentimiento-error{
  display:none;align-items:center;gap:8px;
  margin:-10px 0 16px;font-size:.86rem;font-weight:600;color:#DC2626;
}
.consentimiento-error.visible{display:flex;}
.consentimiento-error svg{flex:0 0 auto;}