/* ============================================================
   NEXUS CREATORS — plan personalizado
   Mismos tokens que la landing pre-llamada (nexus-landing):
   dorado sobre carmesí, Instrument Sans + Inter + JetBrains Mono.
   ============================================================ */
:root{
  --ink:#08080B; --ink-2:#101016; --ink-3:#17171F; --ink-4:#1E1E28;
  --line:#23232D; --line-2:#2E2E3A;
  --crimson:#D81E34; --gold:#E9B949; --gold-lt:#FBE38A; --gold-dk:#A87C1E;
  --bone:#F2EFE9; --ash:#8B8896; --ash-2:#B4B1BD;
  --verde:#4FDE79;
  --display:"Instrument Sans",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --card:"Montserrat",system-ui,sans-serif;
  --pad:clamp(1rem,4vw,2rem);
  --r:16px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;position:relative;color:var(--bone);font-family:var(--body);
  font-size:clamp(1rem,.96rem + .18vw,1.07rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:var(--ink);
  background-image:
    radial-gradient(60% 30% at 50% 0px,rgba(216,30,52,.28),transparent 70%),
    radial-gradient(44% 20% at 50% 900px,rgba(216,30,52,.09),transparent 72%);
  background-repeat:no-repeat;
}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:rgba(233,185,73,.35)}

/* Rejilla del hero: absoluta y acotada (NUNCA fixed + mask: congela el scroll) */
.atmos{
  position:absolute;top:0;left:0;right:0;height:900px;z-index:0;pointer-events:none;contain:strict;
  background-image:
    repeating-linear-gradient(to right,rgba(216,30,52,.12) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to bottom,rgba(216,30,52,.12) 0 1px,transparent 1px 64px);
  -webkit-mask-image:radial-gradient(60% 50% at 50% 4%,#000 8%,transparent 76%);
          mask-image:radial-gradient(60% 50% at 50% 4%,#000 8%,transparent 76%);
}
/* El fondo que sigue al ratón (fondo.mjs): fijo detrás de todo, sin máscara (fixed + mask congela el scroll) */
#fondo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
/* en celular, del alto de la pantalla con la barra del navegador escondida: así no cambia de tamaño (ni se borra) al hacer scroll */
@media (pointer:coarse){#fondo{bottom:auto;height:100lvh}}
.wrap{position:relative;z-index:1;max-width:1080px;margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:720px;margin-inline:auto}

/* ── Cabecera ─────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--bone)}
.brand img{height:30px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.brand span{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:.98rem}
.top__tag{font-family:var(--mono);font-size:.72rem;color:var(--ash);letter-spacing:.04em}

/* ── Texto ────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.eyebrow.muted{color:var(--ash)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.08;margin:0}
.gold{
  background:linear-gradient(180deg,var(--gold-lt) 0%,var(--gold) 55%,var(--gold-dk) 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
em{font-style:normal;color:var(--gold)}
.lede{color:var(--ash-2);font-size:1.04rem;max-width:56ch}

.pill{
  display:inline-flex;align-items:center;gap:.6rem;padding:.38rem .9rem .38rem .45rem;border-radius:999px;
  background:rgba(23,23,31,.8);border:1px solid var(--line-2);font-size:.86rem;color:var(--ash-2)
}
.pill b{color:var(--bone);font-weight:600}
.topbar{position:relative;z-index:2;padding:12px var(--pad);border-bottom:1px solid var(--line)}
/* logo | pastilla | etiqueta, todo en la misma fila; la pastilla queda centrada de verdad (1fr a cada lado) */
.topbar-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;max-width:1080px;margin-inline:auto}
.topbar-in .brand{justify-self:start}
.topbar-in .top__tag{justify-self:end}
.topbar .pill{background:#141419;font-size:.9rem;padding:.32rem 1rem .32rem .35rem}
.topbar .faces img{width:30px;height:30px}
.topbar .pill{white-space:nowrap}
@media (max-width:760px){.topbar-in .top__tag,.topbar-in .brand span{display:none}}
@media (max-width:420px){.topbar-in{gap:.6rem;grid-template-columns:auto 1fr}.topbar-in .pill{justify-self:center}.topbar-in .brand img{height:26px}.topbar .faces img:nth-child(n+3){display:none}
  .topbar{padding:10px 12px}.topbar .pill{font-size:.76rem;gap:.45rem;padding:.28rem .75rem .28rem .3rem}.topbar .faces img{width:24px;height:24px;margin-left:-9px}.topbar .faces img:first-child{margin-left:0}}
/* Una sola capa y background-position con un solo valor (Chrome no interpola otra cosa con clip:text).
   Los extremos del degradado son el mismo dorado y viaja EXACTAMENTE un periodo: el bucle no se nota. */
.pill b.mar{font-weight:800;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(100deg,#E9B949 0%,#FBE38A 18%,#C8922B 36%,#FFF1B8 54%,#D9A535 72%,#F5CF6A 86%,#E9B949 100%);
  background-size:200% 100%;background-repeat:repeat-x;animation:mar 4.5s ease-in-out infinite alternate}
@keyframes mar{from{background-position:0% 50%}to{background-position:200% 50%}}
.faces{display:flex}
.faces img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);margin-left:-8px}
.faces img:first-child{margin-left:0}

/* ── Hero del quiz ────────────────────────────────────────── */
.hero{text-align:center;padding:clamp(1.1rem,3.2vw,2rem) 0 1rem}
.hero h1{font-size:clamp(2rem,1.2rem + 3.6vw,3.6rem);margin:0 auto .8rem;max-width:17ch}
.hero .lede{margin:0 auto}

/* Las tres tarjetas del plan, en abanico — animadas.
   Escenario fijo de 600x370 que se ESCALA entero en pantallas chicas (como Denís):
   así el abanico nunca se rompe, solo se encoge.
   · izq: el score (anillo dorado que gira como el mar + número que cuenta)
   · centro: el plan como documento (texto real del plan de ejemplo, rota con los demás)
   · der: lo primero que haría yo
   · .slot flota (translate) · .card entra repartiéndose (transform) y va girada (rotate) */
.fan{position:relative;height:calc(370px * var(--s));margin:2.2rem auto 3.6rem;--s:1}
.fan-stage{position:absolute;left:50%;top:0;width:600px;height:370px;transform:translateX(-50%) scale(var(--s));transform-origin:top center}
@media (max-width:640px){.fan{--s:.82;margin-bottom:3rem}}
@media (max-width:520px){.fan{--s:.66}}
@media (max-width:420px){.fan{--s:.56;margin-top:1.6rem;margin-bottom:2.4rem}}
@media (max-width:350px){.fan{--s:.47}}
/* SIN perspectiva ni inclinación 3D fija: rasterizaba las tarjetas y el texto salía borroso (medido el 24-oct:
   a 125 % de escala, 2.1 veces menos nítido). Cada .slot se voltea al ratón SOLO cuando está cerca (hero.mjs). */
.fan .tilt{position:absolute;inset:0}
.fan .glow{position:absolute;left:50%;top:46%;width:520px;height:340px;margin:-170px 0 0 -260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(233,185,73,.22),rgba(216,30,52,.10) 55%,transparent);
  animation:glow 5s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.7;scale:.94}50%{opacity:1;scale:1.04}}

.fan .slot{position:absolute;top:44px;width:228px;animation:float 6.4s ease-in-out infinite;transition:transform .7s cubic-bezier(.22,.7,.25,1)}
.fan .slot.l{left:4px;animation-duration:7.2s;animation-delay:-2.4s}
.fan .slot.r{right:4px;top:52px;animation-duration:6.8s;animation-delay:-4.6s}
.fan .slot.c{left:50%;top:0;width:258px;margin-left:-129px;z-index:2;animation-duration:6s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}

.fan .card{
  position:relative;padding:1rem 1rem 1.05rem;border-radius:16px;text-align:left;overflow:hidden;
  background:linear-gradient(180deg,#1C1C25,#121219);border:1px solid var(--line-2);
  box-shadow:0 34px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  font-family:var(--card);font-size:.74rem;font-weight:500;color:var(--ash-2);animation:deal 1s cubic-bezier(.2,.85,.25,1) both
}
.fan .l .card{rotate:-8deg;--from:translateX(120px);animation-delay:.12s}
.fan .r .card{rotate:8deg;--from:translateX(-120px);animation-delay:.2s}
.fan .c .card{--from:translateY(22px) scale(.96);border-color:rgba(233,185,73,.4)}
@keyframes deal{from{opacity:0;transform:var(--from)}}
/* destello dorado que cruza la tarjeta central cada pocos segundos */
.fan .c .card::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:45%;rotate:18deg;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(251,227,138,.12),transparent);animation:shine 5.5s ease-in-out 1.2s infinite}
@keyframes shine{0%{translate:0 0}35%,100%{translate:520px 0}}

.fan .card h4{font-family:var(--card);font-weight:700;font-size:.98rem;color:var(--bone);margin:.25rem 0 .7rem;letter-spacing:-.02em;line-height:1.2}
.fan .k{font-family:var(--card);font-weight:600;font-size:.62rem;color:var(--ash);letter-spacing:.02em}
.fan .row{padding:.36rem 0;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fan .row.on{color:var(--gold);font-weight:600}
.fan .note{padding:.55rem .6rem;border-radius:9px;background:rgba(233,185,73,.08);border:1px solid rgba(233,185,73,.22);color:var(--bone);margin:.1rem 0 .55rem;line-height:1.4;white-space:normal;font-size:.72rem}

/* Izquierda: el score */
.fan .l .card{text-align:center}
.score{position:relative;width:118px;height:118px;margin:.8rem auto .6rem}
.score svg{width:100%;height:100%;rotate:-90deg;overflow:visible}
.score circle{fill:none;stroke-width:7}
.score .trk{stroke:rgba(255,255,255,.07)}
.score .arc{stroke:url(#mar);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.1s cubic-bezier(.65,0,.35,1);
  filter:drop-shadow(0 0 6px rgba(233,185,73,.55))}
.score-n{position:absolute;inset:0;display:grid;place-content:center;line-height:1}
.score-n b{font-family:var(--card);font-weight:800;font-size:2.3rem;letter-spacing:-.04em;color:var(--bone)}
.score-n small{margin-top:.25rem;font-size:.6rem;font-weight:600;color:var(--ash);letter-spacing:.06em;text-transform:uppercase}
.fan .l h4{margin:.2rem 0 .55rem}

/* Centro: el documento */
.fan .doc{padding:0;background:#0B0B0E}
.doc-top{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;border-bottom:1px solid var(--line);background:#141419}
.doc-logo{flex:none;width:auto;height:26px}
.doc-name{display:flex;flex-direction:column;color:var(--bone);font-weight:600;font-size:.8rem;line-height:1.25}
.doc-name small{font-size:.56rem;font-weight:500;color:var(--ash);letter-spacing:.01em}
.doc-page{height:272px;padding:.85rem .95rem 0;overflow:hidden;transition:opacity .26s ease,translate .26s ease;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.doc-page.out{opacity:0;translate:0 4px}
.doc-page h5{font-family:var(--card);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:var(--bone);margin:0}
.doc-et{margin:.2rem 0 .45rem;font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.doc-p{margin:0;font-size:.64rem;line-height:1.45;color:var(--ash-2);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.doc-3{-webkit-line-clamp:3;line-clamp:3}
.doc-2{-webkit-line-clamp:2;line-clamp:2}
.doc-page h6{font-family:var(--card);font-weight:700;font-size:.7rem;color:var(--bone);margin:.6rem 0 .2rem}
.doc-page ul{list-style:none;margin:0;padding:0;display:grid;gap:.18rem}
.doc-page li{position:relative;padding-left:.75rem;font-size:.64rem;font-weight:600;color:#D7D4DD}
.doc-page li::before{content:"";position:absolute;left:0;top:.42em;width:5px;height:5px;border-radius:1px;background:var(--ash)}
.doc-page li.on{color:var(--gold)}
.doc-page li.on::before{background:var(--gold)}
.fan .swap{transition:opacity .26s ease,translate .26s ease}
.fan .swap.out{opacity:0;translate:0 4px}
@media (prefers-reduced-motion:reduce){.fan .slot,.fan .glow,.fan .c .card::after,.pill b.mar,.teaser-lock{animation:none}}

/* ── El quiz ──────────────────────────────────────────────── */
.quiz{
  position:relative;z-index:3;max-width:540px;margin:0 auto;padding:clamp(1.2rem,3vw,1.75rem);border-radius:20px;
  background:linear-gradient(180deg,rgba(23,23,31,.92),rgba(16,16,22,.96));
  border:1px solid var(--line-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.9)
}
.bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-lt));transition:width .35s ease}
.step-meta{display:flex;justify-content:space-between;align-items:center;margin:.75rem 0 .3rem;min-height:1.6rem}
.step-count{font-family:var(--mono);font-size:.74rem;color:var(--ash)}
.back{background:none;border:0;color:var(--ash);font-size:.84rem;cursor:pointer;padding:.2rem 0}
.back:hover{color:var(--bone)}
.quiz h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.65rem);text-align:center;margin:.2rem 0 1rem}
.quiz .hint{text-align:center;color:var(--ash-2);font-size:.92rem;margin:-.4rem 0 1rem}
.opts{display:grid;gap:.55rem}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;
  padding:.85rem 1rem;border-radius:12px;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line-2);font-weight:500;font-size:.98rem;
  transition:border-color .2s,background .2s,transform .35s cubic-bezier(.3,1.4,.5,1)
}
.opt:active{transform:scale(.985)}
.opt svg{flex:none;color:var(--gold);opacity:.7;transition:transform .15s}
.opt:hover{border-color:rgba(233,185,73,.55);background:var(--ink-3);transform:scale(1.012)}
.opt:hover svg{transform:translateX(3px);opacity:1}
.opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(233,185,73,.1)}
/* las de varias respuestas: una casilla en vez de la flecha, y "Continuar" debajo */
.opt .check{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);color:transparent;transition:background .15s,border-color .15s,color .15s}
.opt[aria-pressed="true"] .check{background:var(--gold);border-color:var(--gold);color:#1a1205}
.opt .check svg{color:inherit;opacity:1}
.opt.multi:hover svg{transform:none}
.quiz .seguir{margin-top:1rem}
.quiz .seguir:disabled{opacity:.45;cursor:not-allowed}
.fade{animation:rise .5s cubic-bezier(.2,.9,.3,1.15) both}
/* cambio de pregunta (quiz.mjs → pasar): sale hacia un lado y entra la siguiente desde el otro, sin rebote */
.fade.de-der{animation:entra-der .34s cubic-bezier(.22,.8,.3,1) both}
.fade.de-izq{animation:entra-izq .34s cubic-bezier(.22,.8,.3,1) both}
.fade.sale-izq{animation:sale-izq .17s ease-in forwards;pointer-events:none}
.fade.sale-der{animation:sale-der .17s ease-in forwards;pointer-events:none}
@keyframes entra-der{from{opacity:0;transform:translateX(22px)}}
@keyframes entra-izq{from{opacity:0;transform:translateX(-22px)}}
@keyframes sale-izq{to{opacity:0;transform:translateX(-22px)}}
@keyframes sale-der{to{opacity:0;transform:translateX(22px)}}
.quiz{overflow:hidden}
/* mientras cambia de pregunta (quiz.mjs → pasar): sin la sombra grande, que es lo más caro de repintar en celular */
.quiz.cambiando{box-shadow:none}
@media (prefers-reduced-motion:reduce){.fade.de-der,.fade.de-izq,.fade.sale-izq,.fade.sale-der{animation:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

.form{display:grid;gap:.8rem}
.group{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--ink-2)}
.field{display:flex;align-items:center;gap:.6rem;padding:.2rem .9rem;border-top:1px solid var(--line)}
.field:first-child{border-top:0}
.field label{flex:none;width:6.2rem;font-size:.86rem;color:var(--ash-2)}
.field input,.field select{
  flex:1;min-width:0;background:none;border:0;color:var(--bone);font:inherit;font-size:16px;padding:.8rem 0;outline:none
}
.field select{flex:none;width:auto;color:var(--gold);font-family:var(--mono);font-size:.9rem;cursor:pointer}
.field select option{background:var(--ink-2);color:var(--bone)}
/* la bandera del país, al lado del prefijo del WhatsApp */
.field .bandera{flex:none;width:24px;height:18px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12);margin-right:-.25rem}
.note{font-size:.85rem;color:var(--ash-2);margin:0}
.note b{color:var(--bone)}
.err{color:#FF7A85;font-size:.88rem;margin:0;min-height:1.2em}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  padding:1rem 1.2rem;border:0;border-radius:12px;cursor:pointer;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:#1a1205;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,#d9a535);
  box-shadow:0 10px 30px -10px rgba(233,185,73,.55),inset 0 1px 0 rgba(255,255,255,.5)
}
.btn:hover{filter:brightness(1.05)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.ghost{background:none;color:var(--bone);border:1px solid var(--line-2);box-shadow:none}
.trust{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1rem 0 0;padding:0;list-style:none;font-size:.82rem;color:var(--ash)}
.trust li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--verde);margin-right:.45rem;vertical-align:middle}
.legal{font-size:.66rem;line-height:1.5;color:var(--ash);text-align:center;max-width:480px;margin:2.6rem auto 0}
/* El vídeo de después, pixeleado (teaser-pixel.mp4 ya viene pixeleado de ffmpeg: nadie lo puede "despixelear") */
.teaser{max-width:640px;margin:4rem auto 0;text-align:center}
.teaser-vid{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--ink-3);
  box-shadow:0 0 0 1px var(--line-2),0 24px 50px -24px rgba(0,0,0,.9)}
.teaser-vid video{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;filter:saturate(1.1)}
.teaser-vid::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(8,8,11,.15),rgba(8,8,11,.55))}
.teaser-lock{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  color:#1a1205;background:linear-gradient(180deg,var(--gold-lt),var(--gold));box-shadow:0 0 0 6px rgba(233,185,73,.18),0 10px 30px -6px rgba(233,185,73,.6);
  animation:latido 2.4s ease-in-out infinite}
@keyframes latido{0%,100%{scale:1}50%{scale:1.08}}
/* dos renglones, uno por frase: la letra baja en pantallas chicas para que no se parta */
.teaser p{margin:1rem 0 0;font-size:clamp(.62rem,calc((100vw - 40px) / 28),.95rem);line-height:1.5;color:var(--ash-2)}
.teaser p span,.teaser p b{display:block;white-space:nowrap}
.teaser p b{color:var(--bone)}

.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:2rem 0 3rem;text-align:center;color:var(--ash);font-size:.8rem;line-height:1.9}
.foot a{color:var(--ash)}
.foot img{height:44px;width:auto;margin:0 auto .8rem;opacity:.9}

/* ── El plan ──────────────────────────────────────────────── */
.plan-hero{padding:clamp(2rem,6vw,4rem) 0 1.5rem}
.plan-hero .big{
  font-family:var(--display);font-weight:700;letter-spacing:-.06em;line-height:.85;
  font-size:clamp(5rem,3rem + 10vw,9.5rem);margin:0
}
.plan-hero h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,4rem);margin:.2rem 0 1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chip{font-size:.82rem;color:var(--ash-2);border:1px solid var(--line-2);background:var(--ink-2);border-radius:999px;padding:.32rem .8rem}
.chip b{color:var(--bone);font-weight:600}
.toc{list-style:none;margin:1.8rem 0 0;padding:.4rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--ink-2)}
.toc a{display:flex;gap:1rem;align-items:center;padding:.7rem .8rem;border-radius:10px;color:var(--bone);text-decoration:none;font-weight:500}
.toc a:hover{background:var(--ink-3)}
.toc span{font-family:var(--mono);font-size:.75rem;color:var(--ash)}

.block{padding:clamp(2.2rem,6vw,3.6rem) 0;border-top:1px solid var(--line)}
.block h2{font-size:clamp(1.6rem,1.1rem + 2.2vw,2.6rem);margin-bottom:.9rem}
.costs{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.6rem}
.costs li{position:relative;padding:.85rem 1rem .85rem 2.6rem;border-radius:12px;background:rgba(216,30,52,.07);border:1px solid rgba(216,30,52,.22)}
.costs li::before{content:"";position:absolute;left:1rem;top:1.35rem;width:.7rem;height:2px;background:var(--crimson)}
.callout{margin-top:1.4rem;padding:1.2rem;border-radius:var(--r);background:rgba(233,185,73,.07);border:1px solid rgba(233,185,73,.28)}
.callout p{margin:.3rem 0 0;font-size:1.06rem}

.stages{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.45rem}
.stages li{display:grid;grid-template-columns:2.2rem 1fr auto;align-items:center;gap:.8rem;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--ink-2);color:var(--ash-2)}
.stages li .n{font-family:var(--mono);font-size:.85rem;color:var(--ash)}
.stages li .r{font-family:var(--mono);font-size:.74rem;color:var(--ash);text-align:right}
.stages li b{font-weight:600}
.stages li.done{opacity:.55}
.stages li.here{border-color:var(--gold);background:rgba(233,185,73,.08);color:var(--bone)}
.stages li.next{border-style:dashed;border-color:var(--line-2)}
.badge{display:inline-block;margin-left:.5rem;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;padding:.15rem .45rem;border-radius:4px;vertical-align:middle}
.badge.here{background:var(--gold);color:#1a1205}
.badge.next{border:1px solid var(--line-2);color:var(--ash-2)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.panel{padding:1.1rem;border-radius:var(--r);border:1px solid var(--line-2);background:var(--ink-2)}
.panel p{margin:.35rem 0 0;color:var(--ash-2)}

.pieces{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.3rem}
@media (max-width:520px){.pieces{grid-template-columns:1fr}}
.pieces a{display:block;padding:1rem;border-radius:14px;border:1px solid var(--line-2);background:var(--ink-2);color:var(--bone);text-decoration:none}
.pieces a.focus{border-color:var(--gold);background:rgba(233,185,73,.07)}
.pieces .n{font-family:var(--mono);font-size:.72rem;color:var(--ash)}
.pieces h3{font-size:1.08rem;margin:.3rem 0 .25rem;letter-spacing:-.02em}
.pieces p{margin:0;color:var(--ash-2);font-size:.88rem}

.piece{margin-top:1.4rem;padding:clamp(1.1rem,3vw,1.8rem);border-radius:20px;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.piece.focus{border-color:rgba(233,185,73,.55);box-shadow:0 0 0 1px rgba(233,185,73,.15),0 30px 60px -30px rgba(233,185,73,.25)}
.piece header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.piece .num{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1;letter-spacing:-.05em;color:var(--ash)}
.piece.focus .num{color:var(--gold)}
.piece h3{font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem)}
.piece .intro{color:var(--ash-2);margin:.3rem 0 0}
.piece h4{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:1.2rem 0 .4rem}
.piece p{margin:0}
.piece ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.piece ul li{position:relative;padding-left:1.6rem}
.piece ul li::before{content:"";position:absolute;left:.1rem;top:.45em;width:.8rem;height:.8rem;border-radius:50%;border:2px solid var(--verde)}
.piece .trap{margin-top:1.2rem;padding:1rem;border-radius:12px;background:rgba(216,30,52,.07);border:1px solid rgba(216,30,52,.22)}
.piece .trap h4{color:#FF7A85;margin-top:0}

.offer{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1.4rem}
@media (max-width:520px){.offer{grid-template-columns:1fr}}
.offer div{padding:1.1rem;border-radius:14px;border:1px solid var(--line-2);background:var(--ink-2)}
.offer .n{font-family:var(--mono);font-size:.74rem;color:var(--gold)}
.offer h3{font-size:1.12rem;margin:.35rem 0 .3rem;letter-spacing:-.02em}
.offer p{margin:0;color:var(--ash-2);font-size:.92rem}
.cta-box{margin-top:2rem;padding:clamp(1.3rem,4vw,2.2rem);border-radius:22px;text-align:center;
  background:radial-gradient(80% 120% at 50% 0%,rgba(216,30,52,.22),transparent 70%),var(--ink-2);border:1px solid var(--line-2)}
.cta-box h2{margin-bottom:.6rem}
.cta-box .btn{max-width:420px;margin-top:1.2rem}
.sign{margin-top:2.4rem;color:var(--ash-2);font-family:var(--display);font-weight:600}

/* ── Vídeo + agenda (/siguiente) ──────────────────────────── */
.alert{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:14px;background:rgba(79,222,121,.07);border:1px solid rgba(79,222,121,.28);margin:1.4rem 0}
.alert .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--verde);margin-top:.45rem;box-shadow:0 0 0 4px rgba(79,222,121,.15)}
.alert p{margin:0}
.player{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);background:#000;aspect-ratio:16/9;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.player.vertical{aspect-ratio:9/16;max-width:420px;margin-inline:auto}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player .play{
  position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.25),rgba(0,0,0,.65))
}
.player .play span{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,#d9a535);color:#1a1205;box-shadow:0 10px 40px rgba(233,185,73,.45)}
.player .play[hidden]{display:none}
.watch{display:flex;align-items:center;gap:.8rem;margin-top:.8rem;font-family:var(--mono);font-size:.78rem;color:var(--ash)}
.watch .bar{flex:1}
.lock{
  margin-top:2rem;padding:clamp(1.4rem,4vw,2.4rem);border-radius:22px;text-align:center;
  border:1px dashed var(--line-2);background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px),var(--ink-2)
}
.lock svg{color:var(--gold);margin:0 auto .8rem}
.lock h2{font-size:clamp(1.3rem,1rem + 1.2vw,1.8rem);margin-bottom:.5rem}
.lock p{color:var(--ash-2);margin:0 auto;max-width:46ch}
.agenda{margin-top:2rem}
.agenda[hidden]{display:none}
.agenda .frame{margin-top:1.2rem;border-radius:18px;overflow:hidden;background:var(--ink-2);min-height:700px}
.agenda .frame iframe{display:block}
.reveal{animation:reveal .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes reveal{from{opacity:0;transform:translateY(14px)}}
.steps{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.7rem;counter-reset:s}
.steps li{display:grid;grid-template-columns:2.2rem 1fr;gap:.8rem;align-items:start;padding:1rem;border-radius:14px;border:1px solid var(--line-2);background:var(--ink-2)}
.steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(233,185,73,.12);border:1px solid rgba(233,185,73,.4);color:var(--gold);font-family:var(--mono);font-weight:700}
.steps b{display:block;font-family:var(--display);letter-spacing:-.01em}
.steps p{margin:.15rem 0 0;color:var(--ash-2);font-size:.92rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Plan instantáneo (24-oct): el "llevas X atorado", lo que ya hace bien y los ganchos de su nicho */
.atorado{margin:1.4rem 0 0;padding:.9rem 1.1rem;border-left:3px solid var(--gold);background:rgba(233,185,73,.06);border-radius:0 12px 12px 0;color:var(--bone);line-height:1.55}
.bien{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.6rem}
.bien li{position:relative;padding:.8rem 1rem .8rem 2.4rem;border:1px solid var(--line-2);border-radius:12px;background:var(--ink-2);color:var(--ash-2);line-height:1.55}
.bien li::before{content:"";position:absolute;left:1rem;top:1.15rem;width:.7rem;height:.38rem;border-left:2px solid #4ADE80;border-bottom:2px solid #4ADE80;transform:rotate(-45deg)}
.bien li b{color:var(--bone)}
.ganchos{margin:.4rem 0 .6rem;padding:0;list-style:none;display:grid;gap:.5rem;counter-reset:g}
.ganchos li{counter-increment:g;position:relative;padding:.75rem 1rem .75rem 2.6rem;border-radius:12px;background:rgba(233,185,73,.07);border:1px solid rgba(233,185,73,.28);color:var(--bone);line-height:1.5;font-weight:500}
.ganchos li::before{content:counter(g);position:absolute;left:1rem;top:.78rem;font-family:var(--mono);font-size:.8rem;color:var(--gold)}

/* ═══ El plan, más atractivo (24-oct, Jose: "que lo importante flote y brille como en la principal, y nada de
   tipografía tipo código"). Todo va bajo .plan-page. Solo translate (NADA de 3D: emborrona el texto) y
   background-position con UN valor (las capas múltiples y las var animadas no se repintan en Chrome). ═══ */
.plan-page .eyebrow{font-family:var(--card);font-weight:700;font-size:.72rem;letter-spacing:.14em}
.plan-page .top__tag{font-family:var(--card);font-weight:600;letter-spacing:.08em}
.plan-page .toc span,.plan-page .stages li .n{font-family:var(--card);font-weight:800;color:var(--gold)}
.plan-page .stages li .r{font-family:var(--card);font-weight:600;font-size:.82rem}
.plan-page .piece h4{font-family:var(--card);font-weight:700;font-size:.7rem;letter-spacing:.12em}
.plan-page .watch{font-family:var(--card);font-weight:600}
.plan-page .steps li::before,.plan-page .ganchos li::before{font-family:var(--card);font-weight:800}
.plan-page .chip{font-family:var(--card);font-weight:600;background:rgba(23,23,31,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* el número de la etapa: oro que se mueve como mar, y flota */
.plan-page .plan-hero .big{display:inline-block;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 18px 40px rgba(233,185,73,.28))}
.plan-page .plan-hero .big .mar{background:linear-gradient(100deg,#E9B949 0%,#FBE38A 18%,#C8922B 36%,#FFF1B8 54%,#D9A535 72%,#F5CF6A 86%,#E9B949 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:mar 4.5s ease-in-out infinite alternate}

/* "ESTÁS AQUÍ": la fila flota, su borde brilla en oro y le cruza un destello */
.plan-page .stages li.here{position:relative;overflow:hidden;border-color:transparent;background:rgba(233,185,73,.09);
  box-shadow:0 18px 40px -18px rgba(233,185,73,.45),0 0 0 1px rgba(233,185,73,.2);animation:float 5s ease-in-out infinite;z-index:1}
.plan-page .stages li.here::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(100deg,#A87C1E,#FBE38A,#E9B949,#FFF1B8,#A87C1E);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:borde-oro 3.2s linear infinite}
.plan-page .stages li.here::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:22%;rotate:18deg;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,241,184,.22),transparent);animation:destello 4.2s ease-in-out infinite}
.plan-page .stages li.here b{color:var(--bone)}
.plan-page .stages li.here .r{color:var(--gold-lt)}
.plan-page .badge{font-family:var(--card);font-weight:800;font-size:.6rem;letter-spacing:.08em;padding:.22rem .55rem;border-radius:999px}
.plan-page .badge.here{background:linear-gradient(100deg,#E9B949,#FBE38A,#E9B949);background-size:200% 100%;
  box-shadow:0 0 18px rgba(233,185,73,.55);animation:mar 2.6s ease-in-out infinite alternate}
.plan-page .stages li.next{border-color:rgba(233,185,73,.3)}
@keyframes borde-oro{from{background-position:0% 0}to{background-position:150% 0}}
@keyframes destello{0%,55%{translate:0 0;opacity:0}60%{opacity:1}100%{translate:640% 0;opacity:0}}

/* lo importante flota: lo primero que tienes que conseguir, el hallazgo prioritario y los ganchos */
.plan-page .callout{box-shadow:0 24px 50px -26px rgba(233,185,73,.5);animation:float 6.4s ease-in-out infinite}
.plan-page .piece.focus{animation:float 7s ease-in-out infinite}
.plan-page .ganchos li{animation:flota-poco 5.5s ease-in-out infinite;box-shadow:0 12px 26px -18px rgba(233,185,73,.55)}
.plan-page .ganchos li:nth-child(2){animation-delay:-1.8s}
.plan-page .ganchos li:nth-child(3){animation-delay:-3.6s}
.plan-page .bien li{box-shadow:0 12px 26px -20px rgba(74,222,128,.4)}
@keyframes flota-poco{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* cada sección entra suave al llegar a ella */
.plan-page .block.entra{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.plan-page .block.entra.visto{opacity:1;translate:0 0}

@media (prefers-reduced-motion:reduce){
  .plan-page .plan-hero .big,.plan-page .plan-hero .big .mar,.plan-page .stages li.here,.plan-page .stages li.here::before,
  .plan-page .stages li.here::after,.plan-page .badge.here,.plan-page .callout,.plan-page .piece.focus,.plan-page .ganchos li{animation:none}
}
.plan-page .badge{white-space:nowrap}
@media (max-width:520px){
  .plan-page .stages li{grid-template-columns:1.6rem 1fr;row-gap:.25rem}
  .plan-page .stages li .r{grid-column:2;text-align:left;font-size:.78rem}
}
/* el botón que aparece al terminar el vídeo (o a ~25 s del final) */
.plan-page .cta-llamada{margin-top:1.6rem;text-align:center}
.plan-page .cta-llamada p{margin:0 0 .7rem;color:var(--ash-2)}
.plan-page .cta-llamada .btn{max-width:420px;animation:float 5s ease-in-out infinite;box-shadow:0 18px 44px -14px rgba(233,185,73,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.plan-page .cta-llamada.aparece{animation:cta-entra .7s cubic-bezier(.2,.85,.25,1) both}
@keyframes cta-entra{from{opacity:0;translate:0 18px;scale:.96}}
@media (prefers-reduced-motion:reduce){.plan-page .cta-llamada .btn,.plan-page .cta-llamada.aparece{animation:none}}

/* ── El botón "Agendar mi llamada" (24-oct, Jose): NO flota; contorno de oro que resplandece y, al pasar el
   ratón, el relieve de oro de la portada DENTRO del botón (canvas.relieve, video.mjs). ── */
.plan-page .cta-llamada .btn{animation:none}
.plan-page .btn-relieve{position:relative;isolation:isolate;overflow:hidden;background:#0C0C11;color:var(--bone);
  box-shadow:0 0 0 1px rgba(233,185,73,.55),0 0 22px rgba(233,185,73,.4),0 0 56px rgba(233,185,73,.16);
  animation:resplandor 2.8s ease-in-out infinite;transition:box-shadow .3s}
.plan-page .btn-relieve::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,#A87C1E,#FBE38A,#E9B949,#FFF1B8,#A87C1E);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:borde-oro 3.2s linear infinite}
.plan-page .btn-relieve .relieve{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.plan-page .btn-relieve > span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.6rem;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.plan-page .btn-relieve:hover{box-shadow:0 0 0 1px rgba(251,227,138,.9),0 0 30px rgba(233,185,73,.7),0 0 80px rgba(233,185,73,.3)}
@keyframes resplandor{0%,100%{filter:drop-shadow(0 0 0 rgba(233,185,73,0))}50%{filter:drop-shadow(0 0 10px rgba(233,185,73,.45))}}

/* ── El play: el de la landing (círculo perla, halo de oro, triángulo en oro) ── */
.plan-page .player .play span{width:clamp(56px,8vw,78px);height:clamp(56px,8vw,78px);
  background:radial-gradient(circle at 50% 34%,#FFFFFF 0%,#F7F4EC 62%,#E4DECE 100%);
  box-shadow:0 0 0 1px rgba(233,185,73,.45),0 0 24px rgba(233,185,73,.62),0 0 58px rgba(233,185,73,.3),0 8px 30px rgba(0,0,0,.55);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.plan-page .player .play span svg{width:46%;height:46%;display:block}
.plan-page .player .play:hover span{transform:scale(1.09);
  box-shadow:0 0 0 1px rgba(233,185,73,.8),0 0 34px rgba(233,185,73,.9),0 0 78px rgba(233,185,73,.45),0 8px 30px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.plan-page .btn-relieve,.plan-page .btn-relieve::before{animation:none}}
/* 24-oct: el "02" salía cortado a la derecha — con letter-spacing negativo la última cifra se sale de la caja
   del span y background-clip:text no la pinta. Se le da aire a la caja (padding) sin mover el número (margin). */
.plan-page .plan-hero .big .mar{display:inline-block;padding:0 .12em 0 .02em;margin:0 -.12em 0 -.02em}
/* "ESTÁS AQUÍ" flota POCO: con 14 px tocaba las filas de arriba y abajo (están a 7 px) */
.plan-page .stages li.here{animation:flota-etapa 5s ease-in-out infinite}
@keyframes flota-etapa{0%,100%{translate:0 0}50%{translate:0 -3px}}
/* 24-oct: las 3 piezas de su etapa ("Para pasar a…"), como las del plan de Denís pero en tarjetas */
.plan-page .niveles{display:grid;gap:.9rem;margin-top:1.4rem}
.plan-page .nivel{padding:1.3rem 1.3rem 1.1rem;border-radius:var(--r);border:1px solid var(--line-2);background:var(--ink-2)}
.plan-page .nivel.focus{border-color:rgba(233,185,73,.55);box-shadow:0 0 0 1px rgba(233,185,73,.15),0 30px 60px -30px rgba(233,185,73,.25)}
.plan-page .nivel h3{font-size:clamp(1.2rem,1rem + .9vw,1.55rem);margin:.1rem 0 .2rem}
.plan-page .nivel h4{font-family:var(--card);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:1rem 0 .35rem}
.plan-page .nivel p{margin:0;color:var(--ash-2);line-height:1.6}
.plan-page .nivel .eyebrow{margin:0 0 .4rem}
.plan-page .nivel .trap{margin-top:1rem;padding:.8rem 1rem;border-radius:12px;background:rgba(216,30,52,.07);border:1px solid rgba(216,30,52,.22)}
.plan-page .nivel .trap h4{color:#F87171;margin-top:0}

/* ═══ AUDITORIA-ESTILO.md (24-oct): lo que se aplicó ═══ */
/* P1 (abanico más chico para subir el quiz) se probó y Jose lo regresó: las tarjetas se veían chicas */
/* P2 · en cada hallazgo, lo que destaca es "Qué hacer" */
.plan-page .piece h4{color:var(--ash)}
.plan-page .piece > p{color:var(--ash-2);font-size:.96rem;line-height:1.6}
.plan-page .piece .hacer{margin-top:1.1rem;padding:.9rem 1.1rem;border-left:3px solid var(--gold);background:rgba(233,185,73,.07);border-radius:0 12px 12px 0}
.plan-page .piece .hacer h4{color:var(--gold);margin-top:0}
.plan-page .piece .hacer > p{color:var(--bone);font-size:1.06rem;font-weight:500;line-height:1.55;margin:0}
@media (min-width:720px){.plan-page .piece{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem}
  .plan-page .piece > header,.plan-page .piece .hacer{grid-column:1 / -1}
  .plan-page .piece > h4:nth-of-type(1){grid-column:1;grid-row:2}.plan-page .piece > p:nth-of-type(1){grid-column:1;grid-row:3}
  .plan-page .piece > h4:nth-of-type(2){grid-column:2;grid-row:2}.plan-page .piece > p:nth-of-type(2){grid-column:2;grid-row:3}}
/* P3 · "Tus próximos 7 días" con el peso de lo accionable */
.plan-page .steps li{padding:1.1rem 1.2rem;gap:1rem}
.plan-page .steps p{margin:.3rem 0 0;font-size:1.04rem;line-height:1.55;color:var(--bone);font-weight:500}
.plan-page .steps li:first-child{border-color:rgba(233,185,73,.45);background:rgba(233,185,73,.06)}
/* P4 · foco visible con teclado */
.player .play:focus-visible{outline:none}
.player .play:focus-visible span{outline:2px solid var(--gold-lt);outline-offset:5px}
.field:focus-within{background:rgba(233,185,73,.06);box-shadow:inset 3px 0 0 var(--gold)}
.field select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
/* P5 · los titulares grandes ya no pegan las palabras */
h1,h2,h3{word-spacing:.08em}
/* P6 · lo que flota se lee: el hallazgo prioritario quieto, los ganchos flotan juntos */
.plan-page .piece.focus{animation:none}
.plan-page .ganchos li{animation:none}
.plan-page .ganchos{animation:flota-poco 5.5s ease-in-out infinite}
/* P7 · nada se anima fuera de pantalla; el resplandor del botón lo hace el compositor (opacidad, no filter) */
.plan-page .fuera,.plan-page .fuera *,.plan-page .fuera *::before,.plan-page .fuera *::after{animation-play-state:paused!important}
/* (el resplandor del botón se queda: con overflow:hidden un pseudo-elemento recortaría el halo; .fuera lo pausa) */
/* P8 · etapas ya pasadas legibles, insignias más grandes */
.plan-page .stages li.done{opacity:1}
.plan-page .stages li.done b,.plan-page .stages li.done .r,.plan-page .stages li.done .n{color:var(--ash)}
.plan-page .badge{font-size:.68rem;padding:.24rem .6rem}
/* P9 · zonas de toque de 44 px o más, sin mover nada */
.back{padding:.75rem .5rem;margin:-.75rem -.5rem}
.foot a,.legal a{display:inline-block;padding:.7rem .4rem;margin:-.7rem -.4rem}
@media (max-width:760px){.topbar-in .brand{padding:9px;margin:-9px}}
.legal{font-size:.72rem}
/* P11 · "02 de 05" en el número de la etapa */
.plan-page .plan-hero .big .de{font-family:var(--card);font-weight:700;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-left:1.4rem;vertical-align:.4em}
.plan-page .toc a{padding:.5rem .8rem}
/* P12 · el cierre centrado, como el de Denís; viñeta de los costos alineada */
.plan-page main > .block:last-child{text-align:center}
.plan-page main > .block:last-child .lede{margin-inline:auto}
.plan-page .sign{text-align:center}
.costs li::before{top:1.6rem}
/* P13 · el hover de los botones dorados de la portada */
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(233,185,73,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.btn:active{transform:translateY(0)}
.plan-page .btn-relieve:hover{transform:none}
@media (prefers-reduced-motion:reduce){.plan-page .ganchos{animation:none}}
/* La barra de lectura de arriba del plan (como Denís): fija, 3 px, el mismo oro del título */
.leido{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:rgba(255,255,255,.06)}
.leido i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold) 60%,var(--gold-lt));box-shadow:0 0 10px rgba(233,185,73,.55)}
/* ── Auditoría 29-oct: lo nuevo del plan, para que se lea hecho a mano ── */
/* arriba: "esto es lo que me contaste" (sus 10 respuestas con sus palabras) */
.plan-page .lede.espejo{color:var(--bone);line-height:1.62}
/* el puente cuando el diagnóstico no es de lo que marcó */
.plan-page .puente{margin:0 0 .6rem;padding:.7rem 1rem;border-left:3px solid var(--gold);background:rgba(233,185,73,.06);border-radius:0 12px 12px 0;color:var(--bone);line-height:1.55;font-weight:500}
/* "Tú hoy:" en cada pieza, el ejemplo de su nicho y la pieza que ya salió arriba */
.plan-page .tuhoy{margin:.2rem 0 .9rem;padding:.6rem .9rem;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--bone);line-height:1.5}
.plan-page .tuhoy b{color:var(--gold);font-weight:700}
.plan-page .ejemplo{margin:-.2rem 0 .9rem;color:var(--ash-2);font-style:italic;line-height:1.5}
.plan-page .ya-arriba{color:var(--ash-2);margin:0}
.plan-page .competencia{margin:.4rem 0 0;color:var(--bone);line-height:1.6}
/* el tipo de cada gancho, encima del texto */
.ganchos li .tipo{display:block;margin:0 0 .25rem;font-family:var(--card);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-style:normal}
/* navegador (29-oct): un nombre largo no rompe la cabecera ni ensancha la página; mientras carga, no se ve vacía */
.plan-page .eyebrow,.plan-page .top__tag,.plan-page h1,.plan-page h2{overflow-wrap:anywhere}
@media (max-width:520px){.plan-page .top__tag{display:none}}
.plan-page #plan{min-height:100svh}