/* =========================================================================
   Garnelo Driver Performance — Landing
   Réplica 1:1 del diseño de Figma · Desktop 1440px
   ========================================================================= */

:root{
  /* Paleta (nombres semánticos de Figma) */
  --deep-cove:      #040447;   /* navy — texto/títulos */
  --deep-cove-dark: #000E54;
  --dodger-blue:    #48A1F8;   /* azul acento */
  --aquamarine:     #6FE5D0;   /* turquesa acento */
  --aquamarine-dark:#3BC9B4;
  --salmon:         #FF7A7A;
  --salmon-2:       #FF7878;
  --white-lilac:    #F5F6FC;
  --white:          #FFFFFF;

  --container: 1200px;
  --gutter: 120px;
  --font: 'Poppins', 'Inter', -apple-system, system-ui, sans-serif;
}

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

/* ===================== PRELOADER ===================== */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(130% 130% at 50% 38%, #0b0b63 0%, var(--deep-cove) 52%, #02022b 100%);
  display:flex; align-items:center; justify-content:center;
  transition:transform .85s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.preloader.done{ transform:translateY(-100%); }
.preloader-inner{
  display:flex; flex-direction:column; align-items:center; gap:26px;
  animation:pl-in .7s ease both;
}
.preloader.done .preloader-inner{ animation:pl-out .4s ease both; }
.preloader-logo svg{
  width:250px; height:auto; display:block;
  filter:drop-shadow(0 0 26px rgba(111,229,208,.45));
}
.preloader-bar{
  width:220px; height:3px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,.14);
}
.preloader-bar span{
  display:block; height:100%; width:38%; border-radius:3px;
  background:linear-gradient(90deg, var(--aquamarine), var(--dodger-blue));
  box-shadow:0 0 12px rgba(111,229,208,.55);
  animation:pl-slide 1.15s cubic-bezier(.62,0,.38,1) infinite;
}
@keyframes pl-slide{ 0%{ transform:translateX(-130%); } 100%{ transform:translateX(360%); } }
@keyframes pl-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes pl-out{ to{ opacity:0; transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){
  .preloader{ transition:opacity .4s ease; }
  .preloader.done{ transform:none; opacity:0; }
  .preloader-inner, .preloader.done .preloader-inner{ animation:none; }
  .preloader-bar span{ animation:none; width:100%; }
}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  color:var(--deep-cove);
  background:var(--white);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* Contenido centrado a 1440 pero los FONDOS de sección van a sangre completa.
   overflow-x:clip contiene los .glow decorativos (right/left negativos) sin scroll horizontal. */
.wrap{ width:100%; margin:0 auto; position:relative; overflow-x:clip; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0; }

/* ===================== BOTONES ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; cursor:pointer; border:none; white-space:nowrap;
  transition:transform .15s ease, box-shadow .25s ease, background .2s ease;
}
.btn-primary{
  background:linear-gradient(100deg, var(--aquamarine) 0%, var(--aquamarine-dark) 100%);
  color:var(--deep-cove);
  border-radius:8px;
  padding:16px 36px;
  font-size:14px; letter-spacing:.7px;
  box-shadow:0 0 32px rgba(111,229,208,.30);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 40px rgba(111,229,208,.45); }
.btn-primary .arrow{ width:16px; height:16px; }
.btn-secondary{
  background:transparent; color:var(--deep-cove);
  border:1px solid var(--deep-cove); border-radius:8px;
  padding:14px 30px; font-size:13px; font-weight:600; letter-spacing:.65px;
}
.btn-secondary:hover{ background:var(--deep-cove); color:#fff; }
.btn-lg{ padding:19px 44px; font-size:15px; letter-spacing:.75px; }
.arrow{ display:inline-block; }

/* ===================== NAV ===================== */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:50;
  height:83px; display:flex; align-items:center;
}
.nav-inner{
  width:100%; max-width:1440px; margin:0 auto; position:relative;
  padding:0 60px; display:flex; align-items:center; justify-content:space-between;
}
.nav-burger{ display:none; }
.nav-logo{ width:179px; }
.nav-logo svg, .nav-logo img{ width:179px; height:auto; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-size:13px; font-weight:500; letter-spacing:.52px;
  text-transform:uppercase; color:var(--deep-cove);
}
.nav-links a:hover{ color:var(--dodger-blue); }
.nav-cta{
  background:linear-gradient(100deg, var(--aquamarine) 0%, var(--aquamarine-dark) 100%);
  color:var(--deep-cove); border-radius:6px; padding:10px 22px;
  font-size:12px; font-weight:700; letter-spacing:.48px; text-transform:uppercase;
  box-shadow:0 0 22px rgba(111,229,208,.30);
}
.nav-cta:hover{ transform:translateY(-1px); color:var(--deep-cove); }

/* ===================== HERO ===================== */
.hero{ position:relative; height:900px; overflow:hidden; background:var(--white); }
.hero-video{
  /* vídeo de fondo que cubre todo el hero (Vimeo background=1 recorta a cover) */
  position:absolute; inset:0; z-index:0; overflow:hidden; background:#081029;
}
.hero-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  /* caja SIEMPRE 16:9 y lo bastante grande para cubrir el hero (se recorta) → sin franjas negras */
  width:100vw; height:56.25vw;      /* 16:9 según el ancho */
  min-width:1600px; min-height:900px; /* 1600x900 = 16:9: cubre el hero de 900px de alto */
  border:0; pointer-events:none;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  transform:scale(1.05);
  background:
    /* fundido inferior a blanco: disuelve la foto por completo (como en Figma)
       y se mantiene en blanco sólido hasta abajo → sin ninguna línea */
    linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(255,255,255,.35) 78%, rgba(255,255,255,.80) 87%, #fff 92%, #fff 100%),
    linear-gradient(116deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.60) 33%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(111,229,208,0) 47%, rgba(111,229,208,.46) 100%);
}
.hero .container{ position:relative; z-index:2; }
.hero-content{ padding-top:152px; max-width:580px; }
.hero h1{
  font-weight:800; font-size:78px; line-height:82px; letter-spacing:-1.56px;
  margin-bottom:24px;
}
.hero h1 .grad{
  background:linear-gradient(108deg, var(--deep-cove) 38%, var(--dodger-blue) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .teal{ color:var(--aquamarine); }
.hero-sub{
  font-size:16px; font-weight:500; line-height:27px; color:var(--deep-cove);
  max-width:445px; margin-bottom:24px;
}
.hero-actions{ display:flex; gap:16px; margin-bottom:42px; }
.hero-stats{
  display:flex; align-items:center; gap:33px; padding-top:40px;
  border-top:1px solid rgba(4,4,71,.12); max-width:570px;
}
.stat .num{ font-weight:800; font-size:28px; line-height:28px; color:var(--deep-cove); }
.stat .label{
  font-size:11px; font-weight:500; letter-spacing:.66px; text-transform:uppercase;
  color:rgba(4,4,71,.55); margin-top:4px;
}
.stat-divider{ width:1px; height:40px; background:rgba(4,4,71,.18); }

/* ===================== LOGOS STRIP (marquee infinito) ===================== */
.logos{ background:var(--white); padding:46px 0; overflow:hidden; }
.logos-marquee{
  width:100%; overflow:hidden;
  /* difuminado en los bordes para que entren/salgan suaves */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logos-track{
  display:flex; align-items:center; width:max-content;
  animation:logos-scroll 34s linear infinite;
}
.logos-marquee:hover .logos-track{ animation-play-state:paused; }
.logos-track img{
  height:56px; width:auto; object-fit:contain; flex:none;
  margin-right:72px; opacity:.92; user-select:none;
}
/* -50% = exactamente un juego (los imgs están duplicados) → loop sin saltos */
@keyframes logos-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .logos-track{ animation:none; flex-wrap:wrap; justify-content:center; }
}

/* ===================== SECCIÓN base (gradiente sutil + glow) ===================== */
.section{ position:relative; padding:120px 0; }
.sec-light{ background:linear-gradient(180deg, var(--white) 0%, var(--white-lilac) 100%); }
.sec-lilac{ background:linear-gradient(180deg, var(--white-lilac) 0%, var(--white) 100%); }
.glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.section > .container{ position:relative; z-index:1; }

/* ===================== SOBRE KOKE ===================== */
.about .container{ display:grid; grid-template-columns:560px 1fr; gap:80px; align-items:start; }
.about-photo{
  width:560px; height:746px; border-radius:20px; object-fit:cover;
  border:1px solid rgba(72,161,248,.35);
}
.about-text h2{
  font-weight:800; font-size:43px; line-height:50px; color:var(--deep-cove); margin-bottom:24px;
}
.about-text h2 .blue{ color:var(--dodger-blue); }
.about-text p{
  font-weight:300; font-size:15px; line-height:27px; color:var(--deep-cove); margin-bottom:14px;
}
.about-stats{ display:flex; gap:20px; margin-top:30px; }
.about-stat{
  flex:1; background:var(--aquamarine); border-radius:14px; padding:20px 24px; text-align:center;
}
.about-stat .num{ font-weight:800; font-size:28px; color:var(--deep-cove); }
.about-stat .label{
  font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:var(--deep-cove); margin-top:4px;
}

/* ===================== PROBLEMA ===================== */
.problem h2{
  font-weight:800; font-size:50px; line-height:58px; text-align:center; color:var(--deep-cove);
  max-width:760px; margin:0 auto 56px;
}
.problem h2 .blue{ color:var(--dodger-blue); }
.problem-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pcard{
  background:var(--white); border:1px solid rgba(72,161,248,.12);
  border-radius:24px; padding:40px 33px; box-shadow:0 18px 50px rgba(4,4,71,.05);
  display:flex; flex-direction:column;
}
.pcard h3{ font-weight:800; font-size:28px; line-height:1.05; margin-bottom:14px; color:var(--deep-cove); }
.pcard p{ font-weight:300; font-size:14px; line-height:24px; color:var(--deep-cove); }
.pcard-graphic{ margin-top:auto; padding-top:24px; }
.pcard-graphic img{ width:100%; height:auto; }
.pcard-brain{ position:relative; }
.pcard-brain .blabel{
  position:absolute; font-weight:600; font-size:11px; color:#000; text-align:center;
}
.quote-block{ text-align:center; max-width:800px; margin:80px auto 0; }
.quote-block h3{ font-weight:700; font-size:30px; line-height:39px; color:var(--deep-cove); margin-bottom:16px; }
.quote-block p{ font-weight:300; font-size:15px; line-height:27px; color:var(--deep-cove); }
.quote-block .teal{ color:var(--aquamarine); font-weight:600; }

/* ===================== ACELERA ===================== */
.accel-head h2{ font-weight:800; font-size:50px; line-height:55px; color:var(--deep-cove); margin-bottom:24px; }
.accel-head .accel-lead-bold{ font-weight:600; font-size:16px; line-height:28px; color:var(--deep-cove); margin-bottom:2px; }
.accel-head .accel-lead-light{ font-weight:300; font-size:16px; line-height:28px; color:var(--deep-cove); }
.accel-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:64px; }
.acard{
  background:var(--aquamarine); border-radius:20px; overflow:hidden;
  border:1px solid rgba(72,161,248,.4);
}
.acard-photo{ position:relative; height:220px; }
.acard-photo img{ width:100%; height:100%; object-fit:cover; }
.acard-photo .num{
  position:absolute; top:20px; right:24px; font-weight:900; font-size:64px; line-height:1;
  color:var(--dodger-blue); text-shadow:0 2px 12px rgba(255,255,255,.5);
}
.acard-body{ padding:28px 37px 36px; }
.acard-body h3{ font-weight:700; font-size:24px; line-height:28px; color:var(--deep-cove); margin-bottom:14px; }
.acard-body p{ font-weight:500; font-size:14px; line-height:22px; color:var(--deep-cove); }

/* banda oscura especialistas */
.specialists{
  margin-top:42px;
  background:linear-gradient(60deg, rgba(72,161,248,.95) 0%, var(--deep-cove) 100%);
  border:1px solid rgba(72,161,248,.4);
  border-radius:24px; padding:48px 52px;
  display:grid; grid-template-columns:1fr 1px 1fr 1px 1fr; align-items:center; gap:0;
}
.spec{ text-align:center; padding:0 30px; }
.spec-icon{ height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.spec-icon svg, .spec-icon img{ height:56px; width:auto; }
.spec h3{
  font-weight:700; font-size:20px; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--aquamarine); margin-bottom:10px;
}
.spec p{ font-weight:300; font-size:12px; line-height:19px; color:#fff; }
.spec-div{ width:1px; height:80px; background:rgba(255,255,255,.18); }

/* ===================== DESCUBRE (es/no para ti + pasos) ===================== */
.discover h2{ font-weight:800; font-size:43px; text-align:center; color:var(--deep-cove); margin-bottom:64px; }
.fit-cards{ display:grid; grid-template-columns:1fr 1fr; gap:38px; max-width:1100px; margin:0 auto; }
.fit{
  border-radius:20px; padding:40px; border:1px solid;
}
.fit-no{ background:linear-gradient(65deg, rgba(255,80,80,.06) 0%, rgba(72,161,248,.04) 100%); border-color:var(--salmon-2); }
.fit-yes{ background:linear-gradient(65deg, rgba(111,229,208,.10) 0%, rgba(72,161,248,.06) 100%); border-color:var(--aquamarine); }
.fit-title{ display:flex; align-items:center; gap:12px; margin-bottom:28px;
  font-weight:700; font-size:20px; letter-spacing:1.1px; text-transform:uppercase; }
.fit-no .fit-title{ color:var(--salmon); }
.fit-yes .fit-title{ color:var(--aquamarine); }
.fit-title .badge{ width:20px; height:20px; flex:none; }
.fit ul{ display:flex; flex-direction:column; gap:18px; }
.fit li{ display:flex; align-items:flex-start; gap:14px; font-weight:400; font-size:14px; line-height:22px; color:var(--deep-cove); }
.mark{ width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; margin-top:1px; }
.mark-x{ background:rgba(255,120,120,.14); color:var(--salmon); border:1px solid rgba(255,120,120,.5); }
.mark-ok{ background:rgba(111,229,208,.18); color:var(--aquamarine-dark); border:1px solid var(--aquamarine); }

/* pasos */
.steps{ display:grid; grid-template-columns:260px 40px 260px 40px 260px; justify-content:center; align-items:start;
  gap:0; max-width:900px; margin:74px auto 0; }
.step{
  background:rgba(72,161,248,.10); border:1px solid rgba(72,161,248,.22);
  border-radius:16px; padding:32px 24px; text-align:center;
}
.step-num{
  width:40px; height:40px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(45deg, var(--aquamarine) 0%, var(--aquamarine-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:var(--deep-cove);
}
.step h3{ font-weight:700; font-size:15px; line-height:22px; color:var(--deep-cove); margin-bottom:12px; }
.step p{ font-weight:300; font-size:13px; line-height:21px; color:rgba(4,4,71,.55); }
.step-arrow{ display:flex; align-items:center; justify-content:center; padding-top:52px;
  color:var(--dodger-blue); font-size:24px; }
.steps-cta{ text-align:center; margin-top:34px; }

/* ===================== TESTIMONIOS ===================== */
.testi h2{ font-weight:800; font-size:43px; line-height:52px; text-align:center; color:var(--deep-cove); margin-bottom:57px; }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tcard{
  background:var(--white); border:1px solid rgba(72,161,248,.4); border-radius:16px; overflow:hidden;
  box-shadow:0 14px 40px rgba(4,4,71,.06);
}
.tcard-thumb{ position:relative; height:191px; }
.tcard-thumb img{ width:100%; height:100%; object-fit:cover; }
.tcard-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(111,229,208,.25); border:2px solid var(--aquamarine);
  display:flex; align-items:center; justify-content:center;
}
.tcard-play svg{ width:14px; height:16px; margin-left:2px; }
.tcard-body{ padding:20px 22px 24px; }
.tcard-body .name{ font-weight:700; font-size:13px; color:var(--deep-cove); margin-bottom:5px; }
.tcard-body .quote{ font-weight:400; font-size:12px; line-height:19px; font-style:italic; color:rgba(4,4,71,.6); }

/* resultados */
.results-head{ text-align:center; font-weight:700; font-size:34px; line-height:51px; color:var(--deep-cove);
  margin:64px auto 56px; max-width:760px; }
.results-head .teal{ color:var(--aquamarine); }
.results-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.rcard{
  position:relative; border-radius:12px; overflow:hidden; aspect-ratio:291/207;
  border:1px solid rgba(72,161,248,.4);
  background-size:cover; background-position:center;
}
.rcard::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(65,65,116,.55) 70%, var(--deep-cove) 100%);
}
.rcard-content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  justify-content:flex-end; padding:16px; }
.rcard-badge{ position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); height:34px; width:auto; z-index:2; }
.rcard-title{ font-weight:500; font-size:13px; line-height:15px; text-align:center; color:#fff; margin-bottom:8px; }
.rcard-cat{
  align-self:center; background:var(--aquamarine); color:var(--deep-cove);
  font-weight:500; font-size:9px; line-height:14px; border-radius:20px; padding:0 8px; height:14px;
  display:flex; align-items:center;
}

/* ===================== CTA FINAL ===================== */
.final{ position:relative; background:var(--white); padding:140px 0; text-align:center; overflow:hidden; }
.final .glow-teal{
  position:absolute; top:40px; left:50%; transform:translateX(-50%);
  width:520px; height:460px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(111,229,208,.16) 0%, rgba(111,229,208,0) 68%); z-index:0;
}
.final .inner{ position:relative; z-index:1; }
.final h2{ font-weight:900; font-size:65px; line-height:68px; letter-spacing:-1.3px; color:var(--deep-cove); margin-bottom:24px; }
.final h2 .teal{ color:var(--aquamarine); }
.final p{ font-weight:300; font-size:17px; line-height:29px; color:var(--deep-cove); margin-bottom:40px; }

/* ===================== FOOTER ===================== */
.footer{ background:linear-gradient(180deg,#FAFBFE 0%, #F4F5FB 100%); padding:49px 0 0; }
.footer-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:42px; }
.footer-logo{ width:179px; }
.footer-social{ display:flex; gap:16px; }
.footer-social a{
  width:36px; height:36px; border:1px solid var(--deep-cove); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--deep-cove);
}
.footer-social a:hover{ background:var(--deep-cove); color:#fff; }
.footer-social svg{ width:16px; height:16px; }
.footer-links{ display:flex; gap:28px; }
.footer-links a{ font-size:12px; color:var(--deep-cove); }
.footer-links a:hover{ color:var(--dodger-blue); }
.footer-bottom{ border-top:1px solid rgba(4,4,71,.10); padding:21px 0 28px; text-align:center; }
.footer-bottom p{ font-size:11px; color:rgba(4,4,71,.7); }

/* =========================================================================
   RESPONSIVE  (el diseño original es desktop 1440; estos breakpoints evitan
   que se rompa en tablet/móvil manteniendo la jerarquía)
   ========================================================================= */
@media (max-width:1240px){
  .container{ padding:0 28px; }
  .nav-inner{ padding:0 28px; }
}
@media (max-width:640px){
  .logos-track img{ height:42px; margin-right:48px; }
  .logos{ padding:34px 0; }
}

@media (max-width:1024px){
  .hero h1{ font-size:56px; line-height:1.04; letter-spacing:-1px; }
  .about .container{ grid-template-columns:1fr; gap:44px; }
  .about-photo{ width:100%; height:auto; aspect-ratio:560/640; max-height:620px; }
  .about-text h2{ font-size:34px; line-height:1.18; }
  .problem h2, .testi h2, .discover h2{ font-size:36px; line-height:1.15; }
  .accel-head h2{ font-size:38px; line-height:1.1; }
  .problem-cards, .accel-cards, .testi-grid{ grid-template-columns:repeat(2,1fr); }
  .results-grid{ grid-template-columns:repeat(2,1fr); }
  .specialists{ grid-template-columns:1fr; gap:34px; padding:40px; }
  .spec-div{ display:none; }
  .fit-cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; max-width:420px; gap:8px; }
  .step-arrow{ padding:6px 0; transform:rotate(90deg); }
  .results-head{ font-size:28px; line-height:1.3; }
  .final h2{ font-size:48px; line-height:1.05; }
}

/* ---- Menú móvil (burger) ---- */
@media (max-width:900px){
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:9px; margin-right:-9px;
    background:transparent; border:none; cursor:pointer; z-index:60;
  }
  .nav-burger span{
    display:block; height:2.5px; width:26px; border-radius:2px;
    background:var(--deep-cove); transition:transform .3s ease, opacity .2s ease;
  }
  .nav.nav-open .nav-burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav.nav-open .nav-burger span:nth-child(2){ opacity:0; }
  .nav.nav-open .nav-burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .nav-links{
    position:absolute; top:calc(100% - 6px); left:0; right:0; margin:0 12px;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-radius:0 0 18px 18px; padding:8px 22px 22px;
    box-shadow:0 24px 50px rgba(4,4,71,.16); border:1px solid rgba(72,161,248,.10);
    opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
    transition:opacity .26s ease, transform .26s ease, visibility .26s;
  }
  .nav.nav-open .nav-links{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav-links a:not(.nav-cta){
    display:block; color:var(--deep-cove); font-size:14px; letter-spacing:.4px;
    padding:16px 6px; border-bottom:1px solid rgba(4,4,71,.08);
  }
  .nav-links a:not(.nav-cta):hover{ color:var(--dodger-blue); }
  .nav-cta{ margin-top:16px; text-align:center; padding:15px; font-size:13px; }
}

@media (max-width:640px){
  .section{ padding:64px 0; }
  .hero{ height:auto; padding-bottom:64px; overflow:hidden; }
  .hero-video, .hero-overlay{ height:100%; }
  .hero-content{ padding-top:120px; max-width:100%; }
  .hero h1{ font-size:40px; letter-spacing:-.5px; }
  .hero-sub{ font-size:15px; }
  .hero-sub br{ display:none; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-stats{ gap:18px; }
  .problem-cards, .accel-cards, .testi-grid{ grid-template-columns:1fr; }
  .results-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .about-text h2{ font-size:28px; }
  .problem h2, .testi h2, .discover h2{ font-size:30px; }
  .accel-head h2{ font-size:32px; }
  .final h2{ font-size:38px; line-height:1.06; }
  .footer-top{ flex-direction:column; gap:24px; text-align:center; }
  .footer-links{ flex-wrap:wrap; justify-content:center; }

  /* stat cards del about: encajar las 3 en fila sin que se corte la última */
  .about-stats{ gap:10px; }
  .about-stat{ padding:16px 6px; }
  .about-stat .num{ font-size:23px; }
  .about-stat .label{ font-size:9px; letter-spacing:.4px; }

  /* result cards: mas altas + badge mas arriba + titulo menor => sin solape */
  .rcard{ aspect-ratio:4/5; }
  .rcard-badge{ top:28%; height:21px; }   /* más pequeño: tapa menos la foto */
  .steps{ margin-top:38px; }              /* menos hueco antes de los pasos */
  .rcard-content{ padding:12px; }
  .rcard-title{ font-size:11px; line-height:13px; margin-bottom:5px; }
  .rcard-cat{ font-size:8px; height:13px; padding:0 7px; }

  /* texto de cuerpo: quitar saltos forzados que dejan lineas rotas en movil */
  .pcard p br, .fit li br, .quote-block p br,
  .accel-lead-bold br, .accel-lead-light br,
  .spec p br, .step p br, .about-text p br{ display:none; }
}