/* ═══════════════════════════════════════════════════════════════════════════
   Landing del lanzamiento · Workshop Suelo Pélvico
   `metodopinsach.com/suelo-pelvico` · 4 sep 2026

   Los tokens y las clases base (`.wrap`, `.btn`, `.eyebrow`, `.sec-*`, el pie)
   son LOS MISMOS que `sites/libro/estilos.css`, a propósito: las dos páginas se
   ven una detrás de otra en la misma campaña y tienen que parecer la misma
   marca. Lo que no se copia es lo que aquí no existe —la rejilla de 31
   ejercicios, los modales legales, el reproductor—: arrastrar CSS muerto es
   cómo la landing del libro llegó con 19 reglas que no pintaban nada.

   Cuando Fiorella entregue las imágenes y el diseño definitivo (checklist 12,
   su bloque), esto es lo que se sustituye. La estructura del HTML no cambia.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --negro:#0a0905; --negro2:#0d0b07;
  --dorado:#b8995a; --dorado2:#d4b27a;
  --verde:#4e9970; --verde2:#5aa980;
  --rojo:#a4442f;
  --crema:#f5f0e8; --paper:#f0ebe0; --paper2:#e9e2d4;
  --txt:#3a352c; --txt-soft:#6b6459;
  --line-d:rgba(184,153,90,.22);
  --line-l:rgba(58,53,44,.14);
  --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--txt);font-family:'Outfit',sans-serif;font-weight:300;font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.12}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.eyebrow{font-family:'Outfit';text-transform:uppercase;letter-spacing:.34em;font-size:.7rem;font-weight:600;color:var(--dorado)}

.btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;font-family:'Outfit';font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:16px 30px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.25s}
.btn-gold{background:var(--dorado);color:var(--negro);border-color:var(--dorado)}
.btn-gold:hover{background:transparent;color:#8a6d34;transform:translateY(-2px)}
.btn-dark{background:var(--negro);color:var(--crema);border-color:var(--negro)}
.btn-dark:hover{background:#241d10;transform:translateY(-2px)}
.btn-darkline{background:transparent;color:var(--negro);border-color:rgba(58,53,44,.35)}
.btn-darkline:hover{border-color:var(--negro);background:var(--negro);color:var(--crema)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}

section{padding:96px 0}
.sec-dark{background:var(--negro);color:var(--crema)}
.sec-light{background:var(--paper);color:var(--txt)}
.sec-light2{background:var(--paper2);color:var(--txt)}
.step{font-family:'Cormorant Garamond';font-style:italic;font-size:1.15rem;letter-spacing:.02em}
.sec-dark .step{color:var(--dorado2)}
.sec-light .step,.sec-light2 .step{color:#9a7b3d}
.sec-head{text-align:center;max-width:62ch;margin:0 auto 52px}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.1rem);margin:14px 0}
.sec-head p{font-size:1.06rem}
.sec-dark .sec-head p{color:#b9b1a2}
.sec-light .sec-head p,.sec-light2 .sec-head p{color:var(--txt-soft)}

/* ---------- CABECERA Y PORTADA ---------- */
.topbar{background:var(--negro);padding:11px 0;border-bottom:1px solid var(--line-d)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar img{height:28px;width:auto}
.topbar .tb-url{font-family:'Outfit';font-size:.72rem;letter-spacing:.14em;color:var(--dorado2);text-transform:uppercase}

.hero{background:var(--paper);color:var(--txt);text-align:center;padding:56px 0 64px}
.hero .eyebrow{color:#9a7b3d}
.hero h1{font-family:'Cormorant Garamond';font-weight:600;color:var(--negro);font-size:clamp(2.4rem,5.6vw,4rem);line-height:1.06;margin:16px 0 6px}
.hero .sub{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;color:#9a7b3d;font-size:clamp(1.25rem,3vw,1.8rem);margin-bottom:20px}
.hero .lead{color:var(--txt-soft);font-size:1.06rem;max-width:56ch;margin:0 auto 26px}

/* La fecha del directo. `.sin-fecha` la pinta cuando `datos.js` la tiene en
   null — es un estado normal de la página, no un fallo, y por eso no grita. */
.cuando{display:inline-flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;align-items:center;font-family:'Outfit';font-size:.92rem;letter-spacing:.04em;color:var(--txt-soft);margin-bottom:30px}
.cuando b{font-family:'Cormorant Garamond';font-size:1.25rem;color:var(--txt);font-weight:600}
.cuando .sin-fecha{font-style:italic;color:#9a7b3d}

/* ---------- EL FORMULARIO ---------- */
.registro{max-width:520px;margin:0 auto;text-align:left;background:#fff;border:1px solid var(--line-l);border-radius:18px;padding:30px 28px;box-shadow:0 24px 70px rgba(58,53,44,.12)}
.registro h2{font-size:1.7rem;margin-bottom:6px;text-align:center}
.registro .sub-form{text-align:center;color:var(--txt-soft);font-size:.94rem;margin-bottom:22px}
.campo{margin-bottom:14px}
.campo label{display:block;font-family:'Outfit';font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-soft);margin-bottom:6px}
.campo input{width:100%;font-family:'Outfit';font-size:.98rem;font-weight:300;color:var(--txt);background:#fff;border:1px solid var(--line-l);border-radius:8px;padding:15px 16px}
.campo input:focus{outline:none;border-color:var(--dorado);box-shadow:0 0 0 3px rgba(184,153,90,.16)}
.registro .btn{width:100%;margin-top:6px}

/* El honeypot. No es `display:none`: hay bots que saltan lo que está oculto de
   la forma obvia. Sale de la vista y del recorrido de tabulación, y lo dice en
   voz alta a los lectores de pantalla (`aria-hidden` en el HTML) para que nadie
   que navegue con uno lo rellene sin querer. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nota{font-size:.82rem;color:var(--txt-soft);margin-top:12px;text-align:center}
.nota.error{color:var(--rojo)}
.legal-mini{font-size:.76rem;color:var(--txt-soft);text-align:center;margin-top:14px;line-height:1.5}
.legal-mini a{text-decoration:underline;text-underline-offset:2px}

/* ---------- QUÉ TE LLEVAS ---------- */
.bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;max-width:960px;margin:0 auto}
.bloque{background:#12100b;border:1px solid var(--line-d);border-radius:15px;padding:26px 24px}
.bloque .num{font-family:'Cormorant Garamond';font-size:2rem;color:var(--dorado2);font-weight:600;line-height:1}
.bloque h3{font-size:1.32rem;color:#fff;margin:10px 0 8px}
.bloque p{color:#b9b1a2;font-size:.95rem}

/* ---------- CLASE PREMIUM ---------- */
.premium{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line-l);border-radius:20px;padding:44px 40px;text-align:center;box-shadow:0 24px 70px rgba(58,53,44,.12)}
.ribbon{display:inline-block;font-family:'Outfit';font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.62rem;color:var(--negro);background:linear-gradient(135deg,var(--dorado),var(--dorado2));padding:6px 15px;border-radius:999px;margin-bottom:18px}
.premium h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:10px}
.premium p{color:var(--txt-soft);margin-bottom:22px}
.precio{font-family:'Cormorant Garamond';font-size:2.4rem;font-weight:600;color:var(--txt);margin-bottom:4px}
.precio-nota{font-size:.82rem;color:var(--txt-soft);margin-bottom:24px}

/* ---------- GRACIAS / REPLAY ---------- */
.centrado{max-width:64ch;margin:0 auto;text-align:center}
.centrado h1{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--negro);margin:14px 0}
.centrado p{color:var(--txt-soft);font-size:1.06rem;margin-bottom:18px}
.pasos{text-align:left;max-width:46ch;margin:28px auto 0;padding-left:22px}
.pasos li{margin-bottom:10px;color:var(--txt-soft)}
.marco-video{max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line-l);background:#12100b}
.marco-video iframe{width:100%;height:100%;border:0}

/* ---------- PIE ---------- */
footer{background:var(--negro2);color:#9a9285;padding:52px 0 60px;text-align:center;border-top:1px solid var(--line-d)}
footer .brand{font-family:'Cormorant Garamond';font-size:1.7rem;color:var(--dorado2);font-weight:600;margin-bottom:6px}
footer .url{font-family:'Outfit';letter-spacing:.1em;color:var(--dorado);font-size:.9rem;margin-bottom:18px;text-transform:uppercase}
footer .small{font-size:.78rem;opacity:.75;max-width:56ch;margin:0 auto}
footer .legal{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-d);font-size:.76rem;color:#8f8779}
footer .legal a{color:#a9a192;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
footer .legal a:hover{color:var(--dorado2)}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- PÁGINAS LEGALES ----------
   Las clases son LAS MISMAS que en `sites/libro/estilos.css`, y no por comodidad:
   `aviso-legal.html`, `privacidad.html` y `cookies.html` de este sitio los
   GENERA `backend/scripts/legales-lanzamiento.mjs` a partir de los del libro. Si
   estas reglas se renombran aquí y allí no, la copia generada se queda sin
   estilo — y lo hará en silencio, porque el HTML seguirá siendo válido. */
footer .legal{display:flex;flex-direction:column;gap:7px;align-items:center}
footer .foot-marca{color:#8f8779}
footer .foot-enlaces{margin-top:5px}

.legal-page{background:var(--paper);padding:44px 0 90px}
.legal-page .wrap{max-width:760px}
.legal-page .volver{display:inline-block;margin-bottom:26px;font-size:.82rem;letter-spacing:.06em;color:var(--txt-soft);border-bottom:1px solid var(--line-l);padding-bottom:2px}
.legal-page .volver:hover{color:var(--negro);border-color:var(--negro)}
.legal-page .eyebrow{color:#9a7b3d}
.legal-page h1{font-family:'Cormorant Garamond';font-weight:600;color:var(--negro);font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.08;margin:14px 0 6px}
.legal-page .mupd{font-family:'Cormorant Garamond';font-style:italic;color:var(--txt-soft);font-size:1.02rem;margin-bottom:20px}
.legal-page .legal-h{font-family:'Cormorant Garamond';font-size:1.42rem;font-weight:600;color:var(--negro);margin:32px 0 8px}
.legal-page .legal-p{font-size:.97rem;margin:0 0 12px}
.legal-page .legal-ul{margin:0 0 14px 20px;font-size:.97rem}
.legal-page .legal-ul li{margin-bottom:7px}
.legal-page .pend{background:rgba(184,153,90,.18);border:1px dashed var(--dorado);border-radius:4px;padding:1px 6px;color:#7a5f24;font-size:.94em}
.legal-page .legal-reminder{margin-top:34px;padding-top:18px;border-top:1px solid var(--line-l);font-size:.86rem;color:var(--txt-soft)}
/* La banda de BORRADOR. Se queda puesta hasta que llegue la revisión legal de
   Fran, pendiente desde el 28 ago: un texto de muestra sin decir que lo es es
   peor que no tener texto. */
.legal-page .mborrador{background:rgba(184,153,90,.14);border:1px dashed var(--dorado);border-radius:8px;padding:13px 16px;margin:0 0 22px;font-size:.88rem;color:#7a5f24}
.legal-page .mborrador b{color:var(--negro)}

/* El enlace de salto. La app lo perdió una vez porque vivía en `index.html` y
   nadie lo buscó ahí (apartado 31.3): aquí va escrito en cada página. */
.saltar{position:absolute;left:-9999px;top:0;background:var(--negro);color:var(--crema);padding:12px 18px;z-index:99}
.saltar:focus{left:0}

@media(max-width:860px){
  section{padding:70px 0}
  .registro{padding:26px 20px}
  .premium{padding:34px 24px}
}

/* En móvil la URL de la cabecera no cabe y se corta a media palabra. Se retira
   por debajo de 520 px: quien la lee ya está EN esa dirección, y el logotipo
   dice la marca. Medido en la landing del libro en un viewport de 375 px. */
@media(max-width:520px){
  .topbar .tb-url{display:none}
  .topbar .wrap{justify-content:center}
}

/* Quien pide menos movimiento, no lo tiene. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn:hover{transform:none}
}