/* =============================================================================
   BLUE PRESTIGE — Landing de reclutamiento comercial
   Sistema visual: azul marino profundo + azul eléctrico + blanco.
   Mobile first. Sin frameworks.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Marca */
  --navy-950:#040A18;
  --navy-900:#071026;
  --navy-800:#0A1733;
  --navy-700:#102246;
  --blue-600:#1B5BFF;
  --blue-500:#3A76FF;
  --blue-400:#6598FF;
  --blue-100:#E4EDFF;
  --blue-050:#F2F6FF;

  /* Neutros */
  --ink:#0A1020;
  --ink-2:#26303F;
  --muted:#5C6880;
  --muted-2:#8794A8;
  --line:#E3E8F1;
  --line-2:#EFF2F8;
  --gray-50:#F6F8FC;
  --white:#FFFFFF;

  /* Sobre fondo oscuro */
  --on-dark:#FFFFFF;
  --on-dark-2:#B9C6DE;
  --on-dark-3:#8395B4;
  --dark-line:rgba(255,255,255,.10);
  --dark-card:rgba(255,255,255,.045);

  /* Tipografía */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Radios y sombras */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,16,32,.04), 0 4px 14px rgba(10,16,32,.05);
  --sh-2:0 2px 6px rgba(10,16,32,.05), 0 16px 40px rgba(10,16,32,.08);
  --sh-3:0 30px 70px rgba(7,16,38,.16);
  --sh-blue:0 12px 30px rgba(27,91,255,.28);

  /* Layout */
  --pad:20px;
  --maxw:1180px;
  --maxw-narrow:820px;
  --header-h:64px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
[hidden]{display:none !important}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:3px; border-radius:6px}
.section--dark :focus-visible,.section--cta :focus-visible{outline-color:var(--blue-400)}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue-600); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- 3. LAYOUT ---------------------------------------------------- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.container--narrow{max-width:var(--maxw-narrow)}

.section{position:relative; padding:72px 0; overflow:hidden}
.section--light{background:var(--white)}
.section--tint{background:linear-gradient(180deg,var(--gray-50),#fff 88%)}
.section--dark{background:var(--navy-900); color:var(--on-dark)}
.section--cta{background:linear-gradient(160deg,var(--navy-800),var(--navy-950)); color:var(--on-dark); text-align:center}

.section__head{max-width:720px; margin-bottom:40px}
.section__head--center{margin-inline:auto; text-align:center}
.section__head--wide{max-width:900px}

/* ---------- 4. TIPOGRAFÍA ------------------------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-400); margin-bottom:18px;
}
.eyebrow--dark{color:var(--blue-600)}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--blue-500);
  box-shadow:0 0 0 4px rgba(58,118,255,.22);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(58,118,255,.22)}50%{box-shadow:0 0 0 8px rgba(58,118,255,.05)}}

.h2{
  font-size:clamp(1.85rem,6.4vw,3.15rem);
  line-height:1.06; letter-spacing:-.028em; font-weight:800; text-transform:uppercase;
  margin-bottom:18px;
}
.h2--xl{font-size:clamp(2.05rem,6.8vw,3.6rem)}
.h2 em{font-style:normal; color:var(--blue-600)}
.section--dark .h2 em,.section--cta .h2 em{
  color:transparent; background:linear-gradient(96deg,var(--blue-400),#9CBBFF);
  -webkit-background-clip:text; background-clip:text;
}

.lead{font-size:clamp(1rem,3.4vw,1.12rem); color:var(--muted); line-height:1.62; max-width:62ch}
.section--dark .lead,.section--cta .lead{color:var(--on-dark-2)}
.body{font-size:1rem; color:var(--muted); margin-top:14px; max-width:62ch}
.section--dark .body{color:var(--on-dark-2)}
strong{font-weight:700; color:var(--ink)}
.section--dark strong{color:#fff}

/* ---------- 5. BOTONES --------------------------------------------------- */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--bh); padding:0 26px;
  border-radius:var(--r-pill);
  font-weight:700; font-size:.95rem; letter-spacing:.005em;
  text-align:center; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  will-change:transform;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn--sm{--bh:42px; padding:0 20px; font-size:.86rem}
.btn--lg{--bh:58px; padding:0 32px; font-size:1rem}
.btn--xl{--bh:64px; padding:0 40px; font-size:1.06rem}
.btn--block{width:100%}

.btn--primary{
  background:linear-gradient(180deg,var(--blue-500),var(--blue-600));
  color:#fff; box-shadow:var(--sh-blue);
}
.btn--primary:hover{box-shadow:0 16px 40px rgba(27,91,255,.4); transform:translateY(-2px)}

.btn--ghost{
  color:#fff; border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.1)}

.btn--wa{background:#22B455; color:#fff; box-shadow:0 12px 30px rgba(34,180,85,.3)}
.btn--wa:hover{transform:translateY(-2px); box-shadow:0 16px 38px rgba(34,180,85,.42)}
.btn--wa svg{width:20px; height:20px}

.btn[disabled],.btn.is-loading{opacity:.6; pointer-events:none}

/* ---------- 6. HEADER ---------------------------------------------------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck{
  background:rgba(4,10,24,.90);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 8px 30px rgba(0,0,0,.28);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--header-h)}

.brand{display:flex; align-items:center; gap:11px; color:#fff}
.brand__mark{width:36px; height:36px; flex:none; display:block}
.brand__mark img,.brand__mark svg{width:100%; height:100%; object-fit:contain}
.brand__text{display:flex; flex-direction:column; line-height:1.15}
.brand__name{font-weight:800; letter-spacing:.09em; font-size:.86rem}
.brand__sub{font-size:.55rem; line-height:1.3; letter-spacing:.05em; color:var(--on-dark-3); text-transform:uppercase; font-weight:600; white-space:nowrap}

.header__nav{display:flex; align-items:center; gap:22px}
.header__link{display:none; font-size:.88rem; font-weight:600; color:var(--on-dark-2)}
.header__link:hover{color:#fff}

/* ---------- 7. HERO ------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg,#0B1A3D 0%, var(--navy-900) 46%, var(--navy-950) 100%);
  color:var(--on-dark);
  padding:calc(var(--header-h) + 34px) 0 72px;
}
.hero__glow{
  position:absolute; inset:auto; top:-28%; right:-18%;
  width:min(780px,105vw); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(45,110,255,.42), rgba(45,110,255,0) 62%);
  filter:blur(12px); pointer-events:none;
}
.hero__grid-lines{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
}
.hero__inner{position:relative; z-index:2; display:grid; gap:40px}

.hero__headline{
  font-size:clamp(2.35rem,10.4vw,4.6rem);
  line-height:1.0; letter-spacing:-.035em; font-weight:900; text-transform:uppercase;
  margin-bottom:20px; text-wrap:balance;
}
.hero__headline em{
  font-style:normal;
  color:transparent; background:linear-gradient(96deg,var(--blue-400) 10%,#A9C4FF 90%);
  -webkit-background-clip:text; background-clip:text;
}
.hero__sub{font-size:clamp(1rem,3.9vw,1.2rem); color:var(--on-dark-2); max-width:56ch; line-height:1.6}

.hero__pills{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:22px; font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--on-dark-2);
}
.hero__pills i{display:none}
.hero__pills span{
  padding:7px 13px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
}

.hero__actions{display:flex; flex-direction:column; gap:12px; margin-top:30px}
.hero__micro{margin-top:14px; font-size:.82rem; color:var(--on-dark-3)}

.hero__checks{display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:26px; font-size:.88rem; color:var(--on-dark-2)}
.hero__checks li{display:flex; align-items:center; gap:9px}
.check{
  width:19px; height:19px; border-radius:50%; flex:none;
  background:rgba(58,118,255,.18); border:1px solid rgba(101,152,255,.45);
  position:relative;
}
.check::after{
  content:""; position:absolute; left:5.5px; top:4.5px; width:5px; height:8px;
  border:solid var(--blue-400); border-width:0 2px 2px 0; transform:rotate(42deg);
}

.hero__visual{position:relative}
.hero__badge{
  position:absolute; left:14px; bottom:-16px; z-index:3;
  background:rgba(255,255,255,.97); color:var(--ink);
  border-radius:var(--r-md); padding:12px 16px; box-shadow:var(--sh-3);
  display:flex; flex-direction:column; line-height:1.25;
}
.hero__badge-k{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:700}
.hero__badge-v{font-size:.95rem; font-weight:800; letter-spacing:-.01em}

.hero__scroll{display:none}

/* ---------- 8. MEDIA / PLACEHOLDERS ------------------------------------- */
.media{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(58,118,255,.30), transparent 60%),
    linear-gradient(150deg,#132A5C,#0A1733 60%,#060E20);
  box-shadow:var(--sh-3);
  isolation:isolate;
}
.media::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(255,255,255,.10); pointer-events:none;
}
.media img{width:100%; height:100%; object-fit:cover; display:block}
/* Cada proporción coincide EXACTAMENTE con el archivo real: la imagen nunca se recorta. */
.media--hero{aspect-ratio:1600/900}      /* hero.jpg        1600 × 900  */
.media--empresa{aspect-ratio:1100/856}   /* empresa.jpg     1100 × 856  */
.media--exp{aspect-ratio:1200/800}       /* experiencia.jpg 1200 × 800  */
.media--proceso{aspect-ratio:1200/607}   /* proceso.jpg     1200 × 607  */
.media--camino{aspect-ratio:1500/844}    /* camino.jpg      1500 × 844  */
.media__note{display:none}

/* Banda ilustrada de la sección "potencial".
   Oculta en móvil: la ilustración es panorámica y a 390 px la figura queda
   demasiado pequeña para aportar algo; en su lugar se ahorra scroll. */
.bandshot{display:none; max-width:920px; margin:36px auto 0}
@media (min-width:700px){ .bandshot{display:block} }
.media--camino{
  background:#F4F7FD;
  box-shadow:var(--sh-2);
  border-radius:var(--r-lg);
}
.media--camino::after{border-color:rgba(10,16,32,.06)}

/* Imagen dentro de la sección oscura del proceso */
.proceso__shot{max-width:880px; margin:0 auto 40px}

.media.is-placeholder{
  display:flex; align-items:center; justify-content:center;
  background-image:
    radial-gradient(120% 90% at 20% 0%, rgba(58,118,255,.30), transparent 60%),
    linear-gradient(150deg,#132A5C,#0A1733 60%,#060E20),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
}
.media.is-placeholder .media__note{
  display:block; position:static; text-align:center; padding:16px 22px;
  font-size:.76rem; letter-spacing:.05em; color:rgba(255,255,255,.62);
  border:1px dashed rgba(255,255,255,.24); border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); max-width:80%;
}
.media.is-placeholder .media__note b{display:block; margin-top:4px; color:#fff; font-weight:700; letter-spacing:.02em}
.section--light .media.is-placeholder .media__note{color:rgba(255,255,255,.7)}

/* ---------- 9. CARDS ----------------------------------------------------- */
.cards{display:grid; gap:16px}
.card{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 22px 24px;
  box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-400));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#D3DEF3}
.card:hover::before{transform:scaleX(1)}
.card__num{
  position:absolute; top:20px; right:22px;
  font-size:1.5rem; font-weight:800; color:var(--blue-050); letter-spacing:-.03em;
}
.card__icon{
  display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:var(--blue-050); color:var(--blue-600); margin-bottom:18px;
}
.card__icon svg{width:24px; height:24px}
.card__title{font-size:1.1rem; font-weight:800; letter-spacing:-.01em; margin-bottom:8px; text-transform:uppercase}
.card__text{font-size:.94rem; color:var(--muted); line-height:1.55}

/* ---------- 10. GOALS (identificación) ---------------------------------- */
.goals{display:grid; gap:12px; margin-top:8px}
.goal{
  position:relative; display:flex; align-items:center; gap:14px;
  width:100%; text-align:left;
  padding:18px 52px 18px 18px;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), background-color .22s var(--ease);
}
.goal:hover{border-color:var(--blue-400); transform:translateY(-2px); box-shadow:var(--sh-2)}
.goal__ico{display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; background:var(--blue-050); color:var(--blue-600); transition:background-color .22s,color .22s}
.goal__ico svg{width:22px; height:22px}
.goal__t{font-weight:600; font-size:1rem; letter-spacing:-.005em; line-height:1.35}
.goal__check{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line);
  transition:all .22s var(--ease);
}
.goal.is-active{border-color:var(--blue-600); background:linear-gradient(180deg,#fff,var(--blue-050)); box-shadow:0 10px 30px rgba(27,91,255,.14)}
.goal.is-active .goal__ico{background:var(--blue-600); color:#fff}
.goal.is-active .goal__check{background:var(--blue-600); border-color:var(--blue-600)}
.goal.is-active .goal__check::after{
  content:""; position:absolute; left:8.5px; top:5px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.goals__hint{margin-top:18px; text-align:center; font-size:.88rem; color:var(--muted-2); min-height:1.4em}
.goals__hint.is-on{color:var(--blue-600); font-weight:600}

/* ---------- 11. SPLIT ---------------------------------------------------- */
.split{display:grid; gap:36px; align-items:center}
.split__label{margin-top:22px; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)}
.taglist{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.taglist li{
  font-size:.84rem; font-weight:600; color:var(--ink-2);
  background:var(--gray-50); border:1px solid var(--line);
  padding:7px 14px; border-radius:var(--r-pill);
}

.endorse{
  display:flex; align-items:center; gap:18px; margin-top:28px;
  padding:24px 20px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--sh-1);
}
.endorse__side{display:flex; flex-direction:column; align-items:center; gap:12px; flex:1; min-width:0}
.endorse__logo{height:74px; width:auto; max-width:100%; object-fit:contain}
.endorse__role{
  font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--muted-2); text-align:center;
}
.endorse__x{width:1px; align-self:stretch; background:var(--line); flex:none}

/* ---------- 12. TIMELINE ------------------------------------------------- */
.timeline{position:relative; display:grid; gap:14px; padding-left:34px}
.timeline__rail{
  position:absolute; left:11px; top:10px; bottom:10px; width:2px;
  background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden;
}
.timeline__progress{
  position:absolute; inset:0 0 auto 0; height:0%;
  background:linear-gradient(180deg,var(--blue-400),var(--blue-600));
  transition:height .5s var(--ease-out);
}
.step{
  position:relative; padding:20px 20px 20px 22px;
  background:var(--dark-card); border:1px solid var(--dark-line); border-radius:var(--r-md);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.step__dot{
  position:absolute; left:-34px; top:26px;
  width:14px; height:14px; border-radius:50%;
  background:var(--navy-900); border:2px solid rgba(255,255,255,.24);
  transition:all .35s var(--ease);
}
.step.is-on{border-color:rgba(101,152,255,.35); background:rgba(27,91,255,.08)}
.step.is-on .step__dot{background:var(--blue-500); border-color:var(--blue-400); box-shadow:0 0 0 5px rgba(58,118,255,.18)}
.step__k{font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-400)}
.step__t{font-size:1.22rem; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; margin:6px 0 7px}
.step__d{font-size:.94rem; color:var(--on-dark-2); line-height:1.55}

.glow{position:absolute; pointer-events:none; border-radius:50%}
.glow--top{top:-220px; left:50%; transform:translateX(-50%); width:min(900px,120vw); height:420px;
  background:radial-gradient(ellipse at center, rgba(45,110,255,.30), transparent 68%)}
.glow--center{top:8%; left:50%; transform:translateX(-50%); width:min(880px,130vw); height:520px;
  background:radial-gradient(ellipse at center, rgba(45,110,255,.26), transparent 66%)}
.glow--wide{bottom:-40%; left:50%; transform:translateX(-50%); width:min(1000px,140vw); height:560px;
  background:radial-gradient(ellipse at center, rgba(45,110,255,.34), transparent 66%)}

/* ---------- 13. FIT LIST ------------------------------------------------- */
.fitlist{display:grid; gap:10px; max-width:900px; margin-inline:auto}
.fit{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-1);
  font-size:1rem; font-weight:600; letter-spacing:-.005em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.fit:hover{transform:translateX(4px); border-color:#CFDCF5; box-shadow:var(--sh-2)}
.fit__ico{position:relative; width:26px; height:26px; border-radius:50%; flex:none}
.fit__ico--yes{background:linear-gradient(180deg,var(--blue-500),var(--blue-600)); box-shadow:0 4px 12px rgba(27,91,255,.3)}
.fit__ico--yes::after{
  content:""; position:absolute; left:9.5px; top:6px; width:6px; height:11px;
  border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(42deg);
}

.notfit{
  max-width:900px; margin:34px auto 0; padding:26px 24px;
  border:1px solid var(--line); border-left:3px solid var(--muted-2);
  border-radius:var(--r-md); background:#fff;
}
.notfit__t{font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.notfit__list{display:grid; gap:9px}
.notfit__list li{position:relative; padding-left:24px; color:var(--muted); font-size:.95rem}
.notfit__list li::before{
  content:""; position:absolute; left:2px; top:.62em; width:11px; height:1.5px;
  background:var(--muted-2); border-radius:2px;
}

/* ---------- 14. LADDER (crecimiento) ------------------------------------ */
.ladder{display:grid; gap:10px}
.ladder__i{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:var(--r-md);
  border:1px solid var(--line); background:#fff; box-shadow:var(--sh-1);
  position:relative;
}
.ladder__i:not(:last-child)::after{
  content:""; position:absolute; left:32px; bottom:-11px; z-index:1;
  width:9px; height:9px; border-right:2px solid var(--blue-400); border-bottom:2px solid var(--blue-400);
  transform:rotate(45deg);
}
.ladder__n{
  display:grid; place-items:center; flex:none;
  width:32px; height:32px; border-radius:10px;
  background:var(--blue-050); color:var(--blue-600); font-weight:800; font-size:.86rem;
}
.ladder__t{font-weight:700; letter-spacing:-.01em; text-transform:uppercase; font-size:.95rem}
.ladder__i--top{background:linear-gradient(120deg,var(--navy-800),var(--navy-900)); border-color:var(--navy-800); color:#fff}
.ladder__i--top .ladder__n{background:rgba(255,255,255,.14); color:#fff}
.ladder__note{margin-top:14px; font-size:.76rem; color:var(--muted-2)}

/* ---------- 15. QUIZ ----------------------------------------------------- */
.section--apply{padding-bottom:84px}
.quiz{
  position:relative; z-index:2;
  background:rgba(255,255,255,.045);
  border:1px solid var(--dark-line);
  border-radius:var(--r-xl);
  padding:20px 18px 24px;
  backdrop-filter:blur(10px);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
}
.quiz__top{margin-bottom:18px}
.quiz__bar{height:4px; border-radius:4px; background:rgba(255,255,255,.13); overflow:hidden}
.quiz__bar i{display:block; height:100%; width:12.5%; border-radius:4px;
  background:linear-gradient(90deg,var(--blue-500),var(--blue-400));
  transition:width .45s var(--ease-out)}
.quiz__meta{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; min-height:26px}
.quiz__back{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.83rem; font-weight:600; color:var(--on-dark-3);
  padding:4px 8px 4px 4px; border-radius:var(--r-pill); transition:color .2s
}
.quiz__back:hover{color:#fff}
.quiz__back svg{width:16px; height:16px}
.quiz__count{margin-left:auto; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--on-dark-3)}

.quiz__stage{position:relative}
.slide{display:none}
.slide.is-active{display:block; animation:slideIn .42s var(--ease-out) both}
@keyframes slideIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .slide.is-active{animation:none} }

.slide__q{
  font-size:clamp(1.3rem,5.2vw,1.85rem); font-weight:800; letter-spacing:-.025em;
  line-height:1.2; margin-bottom:6px; text-wrap:balance;
}
.slide__hint{font-size:.88rem; color:var(--on-dark-3); margin-bottom:20px}

.opts{display:grid; gap:10px}
.opt{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:16px 16px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.12);
  color:#fff; font-weight:600; font-size:1rem; line-height:1.35;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.opt:hover{border-color:rgba(101,152,255,.65); background:rgba(27,91,255,.14); transform:translateX(3px)}
.opt__key{
  display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:8px;
  background:rgba(255,255,255,.1); font-size:.76rem; font-weight:800; color:var(--on-dark-2);
  transition:all .2s var(--ease);
}
.opt.is-sel{border-color:var(--blue-400); background:rgba(27,91,255,.24)}
.opt.is-sel .opt__key{background:var(--blue-500); color:#fff}

/* Escala 1-5 */
.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.scale__b{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:16px 4px; border-radius:14px; color:#fff;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.12);
  font-weight:800; font-size:1.15rem;
  transition:all .2s var(--ease);
}
.scale__b span{font-size:.58rem; font-weight:600; letter-spacing:.05em; color:var(--on-dark-3); text-transform:uppercase}
.scale__b:hover{border-color:rgba(101,152,255,.65); background:rgba(27,91,255,.14)}
.scale__b.is-sel{border-color:var(--blue-400); background:rgba(27,91,255,.26)}
.scale__legend{display:flex; justify-content:space-between; margin-top:10px; font-size:.75rem; color:var(--on-dark-3)}

/* Campos */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.field label{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-2)}
.field .req{color:var(--blue-400)}
.input,.textarea{
  width:100%; padding:15px 16px; border-radius:13px;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.14);
  color:#fff; font-size:1rem; transition:border-color .2s, background-color .2s;
  -webkit-appearance:none; appearance:none;
}
.input::placeholder,.textarea::placeholder{color:rgba(255,255,255,.4)}
.input:focus,.textarea:focus{border-color:var(--blue-400); background:rgba(255,255,255,.09); outline:none}
.textarea{min-height:130px; resize:vertical; line-height:1.55}
.field.has-error .input,.field.has-error .textarea{border-color:#FF7A7A; background:rgba(255,90,90,.09)}
.err{font-size:.8rem; color:#FFB0B0; display:none}
.field.has-error .err{display:block}

.grid2{display:grid; gap:0}
.checkline{display:flex; gap:12px; align-items:flex-start; margin:6px 0 18px}
.checkline input{
  flex:none; width:22px; height:22px; margin-top:1px; accent-color:var(--blue-600);
  border-radius:6px;
}
.checkline label{font-size:.9rem; color:var(--on-dark-2); line-height:1.5; font-weight:500}
.checkline.has-error label{color:#FFB0B0}

.slide__actions{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.slide__legal{margin-top:14px; font-size:.76rem; color:var(--on-dark-3); line-height:1.55}
.slide__legal a{text-decoration:underline; color:var(--on-dark-2)}
.formerror{
  display:none; margin-top:12px; padding:12px 14px; border-radius:12px;
  background:rgba(255,90,90,.12); border:1px solid rgba(255,120,120,.4);
  color:#FFC9C9; font-size:.88rem;
}
.formerror.is-on{display:block}

/* Confirmación */
.thanks{text-align:center; padding:16px 4px 8px; animation:slideIn .5s var(--ease-out) both}
.thanks__seal{
  display:grid; place-items:center; width:72px; height:72px; margin:0 auto 22px;
  border-radius:50%; color:#fff;
  background:linear-gradient(180deg,var(--blue-500),var(--blue-600));
  box-shadow:0 0 0 10px rgba(58,118,255,.14), var(--sh-blue);
  animation:pop .55s var(--ease-out) both;
}
@keyframes pop{0%{transform:scale(.6); opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1); opacity:1}}
.thanks__seal svg{width:34px; height:34px}
.thanks__t{font-size:clamp(1.5rem,6vw,2.1rem); font-weight:900; letter-spacing:-.02em; text-transform:uppercase; margin-bottom:12px}
.thanks__d{color:var(--on-dark-2); max-width:52ch; margin:0 auto 28px; line-height:1.6}
.thanks__micro{margin-top:14px; font-size:.8rem; color:var(--on-dark-3)}

.track{
  text-align:left; max-width:420px; margin:0 auto 28px; padding:20px;
  border:1px solid var(--dark-line); border-radius:var(--r-md); background:rgba(255,255,255,.04);
}
.track__t{font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-400); margin-bottom:14px}
.track__list{display:grid; gap:12px}
.track__i{display:flex; align-items:center; gap:12px; font-size:.94rem; color:var(--on-dark-3)}
.track__i span{
  width:18px; height:18px; border-radius:50%; flex:none;
  border:1.5px solid rgba(255,255,255,.26); position:relative;
}
.track__i.is-done{color:#fff; font-weight:600}
.track__i.is-done span{background:var(--blue-600); border-color:var(--blue-600)}
.track__i.is-done span::after{
  content:""; position:absolute; left:5.5px; top:2.6px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}

.apply__legal{
  position:relative; z-index:2;
  margin-top:22px; text-align:center; font-size:.76rem; color:var(--on-dark-3);
  max-width:60ch; margin-inline:auto; line-height:1.6;
}

/* ---------- 16. FAQ ------------------------------------------------------ */
.faq{display:grid; gap:10px}
.faq__i{
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
  overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq__i[open]{border-color:#CFDCF5; box-shadow:var(--sh-2)}
.faq__i summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; cursor:pointer; list-style:none;
  font-weight:700; font-size:1rem; letter-spacing:-.01em;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary i{
  position:relative; width:20px; height:20px; flex:none;
}
.faq__i summary i::before,.faq__i summary i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--blue-600); border-radius:2px;
  transform:translate(-50%,-50%); transition:transform .3s var(--ease);
}
.faq__i summary i::before{width:13px; height:2px}
.faq__i summary i::after{width:2px; height:13px}
.faq__i[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{padding:0 20px 20px; color:var(--muted); font-size:.96rem; line-height:1.62}

/* ---------- 17. CTA FINAL / FOOTER -------------------------------------- */
.finalcta{position:relative; z-index:2}
.finalcta .lead{margin:0 auto 28px}
.finalcta .hero__micro{color:var(--on-dark-3)}

.footer{background:var(--navy-950); color:var(--on-dark-3); padding:40px 0 34px}
.footer__inner{display:flex; flex-direction:column; gap:20px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer__brand{display:flex; align-items:center; gap:12px; color:#fff}
.footer__mark{width:38px; height:38px; object-fit:contain; flex:none}
.footer__brandtext{display:flex; flex-direction:column; gap:3px}
.footer__links{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.88rem}
.footer__links a{color:var(--on-dark-3); transition:color .2s}
.footer__links a:hover{color:#fff}
.footer__legal{margin-top:22px; font-size:.74rem; line-height:1.65; color:#71809B; max-width:80ch}
.footer__todo{display:block; margin-top:6px; color:#5A6980; font-style:italic}
.footer__copy{margin-top:14px; font-size:.74rem; color:#5A6980}

/* ---------- 18. STICKY CTA MÓVIL ---------------------------------------- */
.mobilecta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(4,10,24,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(110%); transition:transform .35s var(--ease-out);
}
.mobilecta.is-on{transform:none}
body.has-mobilecta{padding-bottom:74px}

/* ---------- 19. REVEAL --------------------------------------------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .btn,.card,.goal,.fit{transition:none}
}

/* ---------- 20. BREAKPOINTS --------------------------------------------- */
@media (max-width:559px){
  .eyebrow__b{display:none}
  .btn--sm{padding:0 16px; font-size:.8rem}
  .brand__mark{width:28px; height:28px}
  .brand__sub{white-space:normal; max-width:150px}
  .header__inner{gap:10px; padding-block:8px}
}

@media (min-width:560px){
  :root{--pad:28px}
  .hero__actions{flex-direction:row; flex-wrap:wrap}
  .hero__actions .btn{flex:1 1 240px}
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .goals{grid-template-columns:repeat(2,1fr)}
  .fitlist{grid-template-columns:repeat(2,1fr)}
  .quiz{padding:26px 24px 30px}
  .slide__actions{flex-direction:row; justify-content:flex-end}
  .slide__actions .btn{min-width:200px}
  .grid2{grid-template-columns:1fr 1fr; gap:0 16px}
  .footer__inner{flex-direction:row; align-items:center; justify-content:space-between}
}

@media (min-width:900px){
  :root{--pad:32px; --header-h:72px}
  .section{padding:100px 0}
  .section--apply{padding-bottom:110px}
  .header__link{display:inline-block}

  .hero{padding:calc(var(--header-h) + 48px) 0 96px}
  .hero__inner{grid-template-columns:1.04fr .96fr; gap:56px; align-items:center}
  .hero__checks{gap:12px 26px}
  .hero__badge{left:-28px; bottom:-20px}
  .hero__scroll{
    display:block; position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
    width:24px; height:38px; border:1.5px solid rgba(255,255,255,.22); border-radius:14px;
  }
  .hero__scroll span{
    position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px;
    background:var(--blue-400); transform:translateX(-50%);
    animation:scrolly 1.9s var(--ease) infinite;
  }
  @keyframes scrolly{0%{opacity:0; transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0; transform:translate(-50%,14px)}}

  .cards--4{grid-template-columns:repeat(4,1fr); gap:20px}
  .goals{gap:14px}
  .split{grid-template-columns:1.05fr .95fr; gap:64px}
  .split--reverse .split__copy{order:2}
  .split--reverse .split__visual{order:1}
  .split--tight{grid-template-columns:1.1fr .9fr; gap:56px}

  .timeline{grid-template-columns:repeat(5,1fr); padding-left:0; padding-top:52px; gap:18px}
  .timeline__rail{left:0; right:0; top:22px; bottom:auto; width:auto; height:2px}
  .timeline__progress{inset:0 auto 0 0; height:100%; width:0%; transition:width .6s var(--ease-out)}
  .step{padding:22px 20px}
  .step__dot{left:calc(50% - 7px); top:-37px}

  .fitlist{grid-template-columns:repeat(2,1fr); gap:12px}
  .quiz{padding:34px 38px 38px}
  .thanks{padding:24px 0 12px}
  .mobilecta{display:none}
  body.has-mobilecta{padding-bottom:0}
  .media__note{font-size:.8rem}
}

@media (min-width:1100px){
  .section__head{margin-bottom:52px}
  .fitlist{grid-template-columns:repeat(3,1fr)}
  .fitlist .fit:nth-child(7){grid-column:2}
}

/* Impresión mínima */
@media print{
  .header,.mobilecta,.hero__glow,.glow{display:none !important}
  body{color:#000; background:#fff}
}