:root{
    --negro:#0a0905; --negro2:#0d0b07;
    --dorado:#b8995a; --dorado2:#d4b27a;
    --verde:#4e9970; --verde2:#5aa980;
    --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}
  /* LA LETRA BASE DE LA PÁGINA · petición de Albert (reunión del 7 sep 2026:
     «me faltará como agrandar la letra y ya»).
     ⚠ VA EN `html`, NO EN `body`, y no es un detalle: toda esta hoja mide en
     `rem`, que es relativo a la RAÍZ. Subir `body{font-size}` habría agrandado
     sólo los pocos elementos sin tamaño propio y habría parecido que el cambio
     no hacía nada.
     Y va en PORCENTAJE, no en px, para no pisar el tamaño de letra que la
     persona haya configurado en su navegador: 106.25 % de 16 px = 17 px con el
     ajuste por defecto, y proporcional si lo ha subido. */
  html{scroll-behavior:smooth;font-size:106.25%}
  body{background:var(--paper);color:var(--txt);font-family:'Outfit',sans-serif;font-weight:300;font-size:1rem;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)}
  .badge{display:inline-block;font-family:'Outfit';text-transform:uppercase;letter-spacing:.16em;font-size:.58rem;font-weight:500;padding:5px 13px;border-radius:999px;vertical-align:middle;margin-left:12px}
  .badge-d{color:var(--dorado2);border:1px solid var(--line-d)}
  .badge-l{color:#8a6d34;border:1px solid rgba(184,153,90,.5);background:rgba(184,153,90,.08)}

  /* buttons (ref style) */
  .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}
  /* `[hidden]` TIENE QUE GANAR A `display`, y no es teoria: el boton de la
     clase de regalo nace `hidden` con el `href` vacio, y `display:inline-flex`
     de la linea de arriba lo ensenaba igual. Lo pillo un spec el 8 sep 2026,
     no una revision a ojo. Misma trampa documentada en
     `sites/suelo-pelvico/estilos.css` para `.cd-strip`. */
  .btn[hidden]{display:none}
  .btn-gold{background:var(--dorado);color:var(--negro);border-color:var(--dorado)}
  .btn-gold:hover{background:transparent;color:var(--dorado2);transform:translateY(-2px)}
  .btn-goldline{background:transparent;color:var(--dorado2);border-color:var(--line-d)}
  .btn-goldline:hover{border-color:var(--dorado);color:var(--dorado)}
  .btn-green{background:var(--verde);color:#04150c;border-color:var(--verde)}
  .btn-green:hover{background:var(--verde2);transform:translateY(-2px)}
  .btn-dark{background:var(--negro);color:var(--crema);border-color:var(--negro)}
  .btn-dark:hover{background:#241d10;transform:translateY(-2px)}

  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 14px}
  .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)}

  /* reveal */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- HERO ---------- */
  .topbar{position:static;background:var(--negro);padding:11px 0;border-bottom:1px solid var(--line-d)}
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between}
  .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-actions{display:flex;gap:14px;flex-wrap:wrap}
  .herov3{background:var(--paper);color:var(--txt);text-align:center;padding:44px 0 60px}
  .herov3 .eyebrow{color:#9a7b3d}
  .herov3 h1{font-family:'Cormorant Garamond';font-weight:600;color:var(--negro);font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.04;margin:16px 0 4px;letter-spacing:.5px}
  .herov3 .sub{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;color:#9a7b3d;font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:22px}
  .herov3 .lead{color:var(--txt-soft);font-size:1.05rem;max-width:58ch;margin:0 auto 26px}
  .herov3 .vwrap{max-width:560px;margin:0 auto 24px}
  .herov3 .hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .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)}

  /* ---------- VIDEO FRAME ---------- */

  /* ---------- EXERCISES GRID (dark) ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:22px}
  .xcard{background:#12100b;border:1px solid var(--line-d);border-radius:15px;overflow:hidden;transition:.25s;cursor:pointer}
  .xcard:hover{transform:translateY(-5px);border-color:var(--dorado)}
  .xcard .thumb{aspect-ratio:16/10;background:radial-gradient(280px 150px at 50% 30%,rgba(78,153,112,.14),transparent 70%),linear-gradient(160deg,#17130b,#0c0a06);display:flex;align-items:center;justify-content:center}
  .mini-play{width:50px;height:50px;border-radius:50%;background:rgba(184,153,90,.16);border:1px solid var(--dorado);display:flex;align-items:center;justify-content:center}
  .xcard .body{padding:16px 18px 20px}
  .xcard .body .ch{font-family:'Outfit';font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dorado)}
  .xcard .body h3{font-size:1.42rem;color:#fff;margin-top:6px}
  .note-inline{text-align:center;font-style:italic;font-family:'Cormorant Garamond';font-size:1.08rem;margin-top:34px}
  .sec-dark .note-inline{color:#9a9285}

  /* ---------- GIFT CLASS (light) ---------- */
  .gift-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;max-width:1000px;margin:0 auto;border:1px solid var(--line-l);border-radius:20px;overflow:hidden;box-shadow:0 24px 70px rgba(58,53,44,.12);background:#fff}
  .gift-photo{position:relative;min-height:420px;background:#ebeae7}
  /* LA FOTO VA A SANGRE, SIN MARGEN. Fran, 8 sep (tarde): «que la foto de Piti
     ocupe todo el margen izquierdo, que no tenga margen». Antes eran
     `inset:16px` + `object-fit:contain`, o sea DOS márgenes a la vez: el hueco
     de 16 px y el apaisado que deja `contain` al encajar una foto vertical
     (800×1000) en una caja más ancha que alta. El resultado era la foto flotando
     sobre un rectángulo crema.
     Con `inset:0` y `cover` llena la celda; el `border-radius` y el
     `overflow:hidden` de `.gift-grid` le recortan la esquina.
     EL `object-position` NO ES `center`, y ahí está el detalle: `cover` recorta
     por arriba y por abajo, y centrado se come la cabeza. `50% 18%` deja el
     recorte casi entero abajo —suelo y pies— y la cabeza con su aire. */
  .gift-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
  .gift-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,5,.05),transparent 35%)}
  .gift-body{padding:46px 44px;display:flex;flex-direction:column;justify-content:center}
  .ribbon{display:inline-block;align-self:flex-start;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}
  .gift-body h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:6px}
  .gift-body .who{font-family:'Cormorant Garamond';font-style:italic;color:#9a7b3d;font-size:1.2rem;margin-bottom:16px}
  .gift-body p{color:var(--txt-soft);margin-bottom:22px}
  .gift-meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:26px}
  .gift-meta b{display:block;font-family:'Cormorant Garamond';font-size:1.4rem;color:var(--txt);font-weight:600}
  .gift-meta span{font-size:.78rem;color:var(--txt-soft)}
  /* El item de una sola línea («Gratis, por tener el libro»). El `nowrap` es lo
     que impide que el navegador vuelva a partir la frase en dos al quedarse sin
     ancho — que es exactamente el aspecto del que se venía. En móvil se relaja
     en el `@media` de abajo: ahí no cabe, y una frase cortada por la mitad del
     ancho de la pantalla es peor que una frase en dos líneas. */
  .gift-meta .linea b{white-space:nowrap}
  /* Y CENTRADO EN SU RENGLÓN. Los `margin` automáticos y no un
     `justify-content:center` en `.gift-meta`: ese centraría también la fila de
     arriba —«15 nov · 19:00 / 60 min / Con Piti»—, que se queda alineada a la
     izquierda como el resto del texto de la tarjeta. En un flex con `wrap`, el
     margen automático absorbe el hueco libre de SU línea, así que sólo mueve
     este item. */
  .gift-meta .linea{margin-left:auto;margin-right:auto}

  /* ---------- TRIAL / FINAL (dark photo bg) ---------- */
  .final{position:relative;color:#fff;text-align:center;padding:120px 0}
  .final .bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:grayscale(.15)}
  .final .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,5,.82),rgba(10,9,5,.88))}
  .final .wrap{position:relative;z-index:2}
  .final h2{font-size:clamp(2rem,4.6vw,3.1rem);margin:14px 0 14px}
  .final p.lead{color:#d8d2c6;max-width:54ch;margin:0 auto 30px;font-size:1.06rem}
  .price-row{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin:26px 0 32px}
  .price-row b{display:block;font-family:'Cormorant Garamond';font-size:1.9rem;color:var(--dorado2);font-weight:600}
  .price-row span{font-size:.82rem;color:#c8c0b0;letter-spacing:.05em}
  .trust{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:24px;color:#c8c0b0;font-size:.85rem}
  .trust span{display:inline-flex;align-items:center;gap:8px}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--verde2)}

  /* ---------- LA CUENTA ATRÁS DE LA APERTURA ----------
     Las MISMAS clases y las MISMAS medidas que `sites/suelo-pelvico/estilos.css`
     (`.cd-strip`, `.u`), que salieron del prototipo `Captación_MetodoPinsach`.
     Fran pidió el 8 sep montarlo una vez y reutilizarlo; los dos sitios son
     proyectos de Pages distintos con su propia raíz, así que la reutilización
     aquí es copia literal — el mismo criterio que ya rige los tokens.

     Lo único que cambia son los colores del texto, porque esta tira vive sobre
     la sección oscura `.final` y allí sobre crema: el número usa el mismo
     `--dorado2` y las etiquetas el gris de `.price-row span`, para que no
     aparezca un tono nuevo en la página. */
  /* EL TÍTULO, DEL TAMAÑO DE «7 días / Guiado / Desde casa» Y EN BLANCO.
     Fran, 8 sep: «que la frase Tu acceso gratuito estará disponible en… sea del
     tamaño del texto que dice desde casa, guiado y que sea color blanco».

     LA PRIMERA VEZ SE LEYÓ MAL y se puso a `.82rem`, que es el tamaño de
     `.price-row span` —«gratis · sin tarjeta», «a tu ritmo»—, la letra pequeña
     de debajo. Fran lo devolvió: «sigue pequeño». Lo que nombra son las palabras
     GRANDES, `.price-row b`, y por eso ahora son `1.9rem`.

     El `#fff` sustituye al `#d8d2c6` que compartía con las etiquetas.

     Si alguien cambia el tamaño de `.price-row b`, este número deja de casar y
     hay que traerlo a mano: son dos reglas, no una variable. El spec lo compara
     en vez de fijar un número, así que se pondría rojo. */
  .cd-titulo{font-family:'Outfit';font-size:1.9rem;font-weight:400;color:#fff;letter-spacing:.02em;margin:6px 0 14px}
  .cd-titulo[hidden]{display:none}
  .cd-strip{display:flex;align-items:stretch;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);max-width:520px;margin:0 auto 32px}
  .cd-strip[hidden]{display:none}
  .cd-strip .u{flex:1;padding:16px 6px 14px;text-align:center;position:relative}
  .cd-strip .u + .u::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line-d)}
  .cd-strip .u b{display:block;font-family:'Cormorant Garamond';font-size:clamp(30px,3.4vw,40px);font-weight:700;color:var(--dorado2);line-height:1}
  .cd-strip .u span{display:block;font-size:9.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:#c8c0b0;margin-top:8px}
  /* Congelada a ceros: se apaga el dorado para que no parezca que corre. */
  .cd-strip.fin .u b{color:#9a9285}

  /* ---------- FOOTER ---------- */
  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;letter-spacing:.02em}
  footer .legal a{color:#a9a192;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
  footer .legal a:hover{color:var(--dorado2)}

  @media(max-width:860px){
    .gift-grid{grid-template-columns:1fr}
    /* 380 y no 280 desde el 8 sep (tarde). Con la foto a sangre (`cover`) la
       altura de la caja decide cuánto se recorta: a 280 px sobre una columna de
       ~343 px la foto se recortaba un 35 % y Piti salía cortado por las
       rodillas. A 380 el recorte baja al 11 % y se queda de cuerpo entero. */
    .gift-photo{min-height:380px}
    .gift-meta .linea b{white-space:normal}
    section{padding:70px 0}
  }

  /* modal legal */
  .modal-ov{position:fixed;inset:0;background:rgba(10,9,5,.74);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:5vh 20px;overflow-y:auto}
  .modal-ov.open{display:flex}
  .modal{background:var(--paper);color:var(--txt);max-width:760px;width:100%;border-radius:16px;border:1px solid rgba(184,153,90,.4);box-shadow:0 30px 80px rgba(0,0,0,.5);padding:42px 42px 36px;position:relative}
  .modal .x{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-l);background:#fff;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--txt);transition:.2s}
  .modal .x:hover{border-color:var(--dorado);color:var(--dorado)}
  .modal .eyebrow{color:#9a7b3d;margin-bottom:8px}
  .modal h3.mt{font-family:'Cormorant Garamond';font-size:clamp(1.6rem,4vw,2.1rem);font-weight:600;color:var(--negro);margin-bottom:4px}
  .modal .mupd{font-family:'Cormorant Garamond';font-style:italic;color:var(--txt-soft);font-size:1rem;margin-bottom:18px}
  .modal h4{font-family:'Cormorant Garamond';font-size:1.3rem;font-weight:600;color:var(--negro);margin:24px 0 8px}
  .modal p{font-size:.95rem;margin:0 0 12px}
  .modal ul{margin:0 0 14px 20px;font-size:.95rem} .modal li{margin-bottom:6px}
  .modal .todo{background:rgba(184,153,90,.18);border:1px dashed var(--dorado);border-radius:5px;padding:1px 6px;color:#7a5f24;font-size:.9em}
  .modal .mdis{background:#e9e2d4;border:1px solid var(--line-l);border-left:3px solid var(--dorado);border-radius:8px;padding:14px 18px;margin:16px 0;font-size:.86rem;color:var(--txt-soft)}
  .modal .mdis b{color:var(--txt)}
  body.noscroll{overflow:hidden}

  /* El aviso corto de la apertura de la prueba. Sobre `.modal-ov`/`.modal`,
     que estaban sin usar desde que las legales se fueron al canónico: sólo
     hacen falta dos cosas más — centrarlo, porque el contenido es corto y
     arriba quedaba flotando, y estrecharlo para que se lea de una pasada. */
  .aviso-ov{align-items:center}
  .modal.mini{max-width:520px;padding:38px 34px 30px;text-align:center}
  .modal.mini p{font-size:1rem}
  .modal.mini p:last-child{margin-bottom:0}
  /* filtro por capítulos */
  /* LAS PÍLDORAS DE CAPÍTULO, MÁS NOTORIAS. Fran, 8 sep (noche): «que se hagan
     un poco más notorios los botones para navegar entre capítulos».

     Y ahora importan más que antes: desde esta misma tanda la página abre
     filtrada por el capítulo 1, así que estos botones dejaron de ser un filtro
     opcional para ser LA navegación de la sección. Si no se ven, parece que sólo
     hay un vídeo.

     Qué cambia, y por qué cada cosa:
       · fondo propio en vez de transparente — sobre el negro de la sección, un
         borde de `--line-d` (dorado al 22 %) se pierde;
       · el borde sube a `--dorado` al 45 %, que es el mismo tono de marca pero
         visible;
       · algo más de aire y de letra (`.86rem`, 11/20) para que se puedan pulsar
         cómodos con el pulgar;
       · el hover levanta la píldora, como hacen las tarjetas de vídeo justo
         debajo — el mismo idioma de «esto se pulsa»;
       · y la activa lleva sombra, que es lo que la separa de las otras diez de
         un vistazo.
     El `(n)` sube de `.6` a `.75` de opacidad: a `.6` sobre negro casi no se
     leía, y es el dato que dice si vale la pena entrar en ese capítulo. */
  .filtros{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
  .fpill{font-family:'Outfit';font-size:.86rem;font-weight:500;letter-spacing:.02em;color:var(--crema);background:rgba(184,153,90,.10);border:1px solid rgba(184,153,90,.45);border-radius:999px;padding:11px 20px;cursor:pointer;transition:.2s;white-space:nowrap}
  .fpill:hover{border-color:var(--dorado);background:rgba(184,153,90,.2);color:var(--dorado2);transform:translateY(-2px)}
  .fpill.active{background:var(--dorado);color:var(--negro);border-color:var(--dorado);font-weight:600;box-shadow:0 6px 18px rgba(184,153,90,.32)}
  .fpill.active:hover{background:var(--dorado2);color:var(--negro)}
  .fpill .n{opacity:.75;font-size:.9em}
  .xcount{text-align:center;color:#9a9285;font-size:.82rem;margin-bottom:26px;font-family:'Outfit';letter-spacing:.02em}
  .xcard{position:relative}
  .xcard.playable{cursor:pointer}
  .xcard:not(.playable){opacity:.88}
  .xcard .tags{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
  .ttag{font-family:'Outfit';font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line-d);color:var(--dorado2)}
  .ttag.test{color:#8fb7ff;border-color:rgba(143,183,255,.4)}
  .ttag.ejercicio{color:var(--verde2);border-color:rgba(90,169,128,.45)}
  .ttag.secuencia{color:var(--dorado2);border-color:rgba(184,153,90,.45)}
  .ttag.demostracion{color:#c9bfa9;border-color:var(--line-d)}
  .xcard .meta{font-family:'Outfit';font-size:.72rem;color:#9a9285;margin-top:8px}
  .xcard .soon{position:absolute;top:10px;right:10px;z-index:2;font-family:'Outfit';font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(10,9,5,.72);border:1px solid var(--line-d);color:var(--dorado2);border-radius:999px;padding:3px 9px}
  .thumb{position:relative}
  .xcard .thumb.hasthumb{background-size:cover;background-position:center}
  .xcard .thumb.hasthumb::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,5,.12),rgba(10,9,5,.5))}
  .xcard .thumb .mini-play{position:relative;z-index:2}
  .xcard .thumb.hasthumb .mini-play{background:rgba(10,9,5,.45)}
  /* modal de vídeo */
  .vmodal-ov{position:fixed;inset:0;background:rgba(10,9,5,.86);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:120;padding:20px}
  .vmodal-ov.open{display:flex}
  .vmodal{width:min(960px,100%)}
  .vmodal .vhead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px}
  .vmodal .vhead h4{font-family:'Cormorant Garamond';font-size:1.35rem;font-weight:600;color:#fff}
  .vmodal .vx{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid rgba(184,153,90,.4);background:transparent;color:var(--crema);font-size:1.3rem;line-height:1;cursor:pointer;transition:.2s}
  .vmodal .vx:hover{border-color:var(--dorado);color:var(--dorado2)}
  .vframe{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line-d);background:#000}
  .vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

  /* ══════════════════════════════════════════════════════════════════════
     AÑADIDO AL PASAR EL HTML DE FRAN AL REPOSITORIO · 4 sep 2026
     Diseño intacto. Esto es lo que faltaba, no lo que se ha cambiado.
     ══════════════════════════════════════════════════════════════════════ */

  /* Duración sobre la miniatura. Se puede porque las 31 duraciones vienen ya
     escritas en `recursos.js`; antes ni se sabían. Con el libro delante, saber
     si el ejercicio dura uno o nueve minutos decide si lo haces ahora. */
  .xcard .dur{
    position:absolute; right:9px; bottom:9px; z-index:2;
    font-family:'Outfit'; font-size:.68rem; font-weight:500;
    letter-spacing:.04em; font-variant-numeric:tabular-nums;
    color:var(--crema); background:rgba(10,9,5,.72);
    border:1px solid var(--line-d); border-radius:4px;
    padding:2px 7px;
  }

  /* Las tarjetas son botones de verdad (`role="button"` + `tabindex`), así que
     necesitan foco visible: sin esto, quien navega con teclado no ve dónde
     está. El original ni siquiera era enfocable. */
  .xcard:focus-visible,
  .fpill:focus-visible,
  .btn:focus-visible,
  .vmodal .vx:focus-visible,
  .modal .x:focus-visible,
  footer .legal a:focus-visible{
    outline:2px solid var(--dorado);
    outline-offset:3px;
  }
  .sec-dark .xcard:focus-visible{ outline-color:var(--dorado2); }

  /* Reserva de espacio para el logo de la cabecera: al salir del base64 pasa a
     descargarse aparte y sin esto la página da un salto al llegar. */
  .topbar img{ height:28px; width:auto; aspect-ratio:auto; }

  /* LA CAPTURA DE NOMBRE Y CORREO DE LA CLASE.
     Estuvo fuera unas horas el 8 sep, mientras el botón fue el de WebinarJam;
     vuelve esa misma noche con un campo más. El porqué está en el HTML.

     CENTRADA, que es lo que se pidió para el remate de la tarjeta: el formulario
     va debajo de «Gratis, por tener el libro», que también se centra. El
     `justify-content` centra la fila; el `align-self` le quita al formulario el
     estirón a todo el ancho que le daría `.gift-body` —un flex en columna con
     `align-items:stretch` por defecto—, y sin él la caja del correo se comería
     la tarjeta entera. */
  .aviso-form{
    display:flex; gap:10px; flex-wrap:wrap; align-items:stretch;
    justify-content:center; align-self:center; max-width:100%;
  }
  /* Hermana de `.btn[hidden]{display:none}`, y por el mismo motivo: `display:flex`
     le gana al `[hidden]` de la hoja del navegador, así que sin esta regla el
     atributo se pone y el formulario se sigue viendo. Salió rojo en el spec al
     escribirlo. `recursos.js` pone además el `display:none` en línea, que es de
     lo que de verdad depende mientras la hoja pueda venir cacheada. */
  .aviso-form[hidden]{ display:none; }
  .aviso-form input[type=text],
  .aviso-form input[type=email]{
    flex:1 1 200px; min-width:0;
    font-family:'Outfit'; font-size:.95rem; font-weight:300; color:var(--txt);
    background:#fff; border:1px solid var(--line-l); border-radius:8px;
    padding:15px 16px;
  }
  .aviso-form input[type=text]:focus,
  .aviso-form input[type=email]:focus{
    outline:none; border-color:var(--dorado); box-shadow:0 0 0 3px rgba(184,153,90,.16);
  }
  /* EL CAMPO TRAMPA. Fuera de la vista y fuera del flujo, pero NO con
     `display:none` ni `visibility:hidden`: hay robots que saltan justamente lo
     que está así escondido, y entonces el campo deja de delatar a nadie. Se
     saca de la pantalla, que es lo que hace la landing del lanzamiento. */
  .aviso-form .trampa{
    position:absolute; left:-9999px; width:1px; height:1px;
    opacity:0; pointer-events:none;
  }
  .aviso-nota{ font-size:.82rem; color:var(--txt-soft); margin-top:12px; text-align:center; }
  /* EL ACUSE, EN SU PROPIO RECUADRO. Nace `hidden` y lo destapa `recursos.js`
     cuando el registro YA está guardado — nunca antes.

     Fran, 8 sep (noche): «que este mensaje quede en un recuadro más llamativo».
     Antes era una línea de texto en verde, y el problema no era el color: es que
     ocupaba el hueco que dejaba el formulario sin marcar que había pasado algo.
     Quien acaba de pulsar necesita ver que su plaza ESTÁ, y un párrafo suelto en
     mitad de una tarjeta blanca no lo dice.

     EL VERDE ES EL DE LA PÁGINA (`--verde`, el del botón de la prueba), en
     versión muy diluida para el fondo y a plena fuerza en el círculo. No se
     inventa un color nuevo para un estado de éxito: la tarjeta ya es blanca
     sobre crema y un tono ajeno cantaría más que el mensaje.

     LA MARCA DE VERIFICACIÓN VA EN UN `::before` Y NO EN EL MARCADO, y no es
     por ahorrar una etiqueta: `recursos.js` escribe el acuse con `textContent`
     —a propósito, porque ahí dentro va el nombre que ha tecleado la persona y un
     `innerHTML` lo convertiría en una inyección— y `textContent` se lleva por
     delante cualquier hijo. Un pseudoelemento sobrevive; un `<span>` no.

     Y EL SÍMBOLO NO SE ANUNCIA. Un pseudoelemento no admite `aria-hidden`
     —no es un nodo del documento—, así que se usa la sintaxis de texto
     alternativo del propio `content`: `"✓" / ""` deja el dibujo y vacía lo que
     lee un lector de pantalla, que ya está leyendo el mensaje entero y no gana
     nada con un «marca de verificación» delante. Donde el navegador no la
     entienda, se degrada a anunciar el símbolo: molesto, no roto. */
  .aviso-ok{
    margin-top:8px;
    padding:26px 26px 24px;
    border:1px solid rgba(78,153,112,.32);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(78,153,112,.11),rgba(78,153,112,.04));
    box-shadow:0 14px 34px rgba(78,153,112,.13);
    text-align:center;
    font-family:'Cormorant Garamond';
    font-size:1.2rem; line-height:1.5; color:var(--txt);
  }
  .aviso-ok::before{
    content:"✓" / ""; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin:0 auto 14px;
    border-radius:50%; background:var(--verde); color:#fff;
    font-family:'Outfit'; font-size:1.25rem; font-weight:600; line-height:1;
  }
  /* ⚠ EL COLOR VA APARTE, Y NO ES UN CAPRICHO DE ORGANIZACIÓN. `.gift-body p`
     —la regla de los párrafos de la tarjeta, unas líneas más arriba— tiene
     especificidad (0,1,1) y `.aviso-ok` (0,1,0). O sea que el `color` de la
     regla de arriba NO SE APLICA: el acuse salía en `--txt-soft`, el mismo gris
     que el texto que lo rodea, que es justo lo contrario de «más llamativo».
     Medido en el navegador —`rgb(107,100,89)` donde tenía que haber
     `rgb(58,53,44)`— porque leyendo la hoja no se ve: la declaración está ahí,
     escrita y bien, y simplemente pierde.
     `.gift-body p.aviso-ok` es (0,2,1) y gana sin depender del orden del
     fichero, que es la otra forma de romper el empate y la que se cae sola
     cuando alguien mueve un bloque. */
  .gift-body p.aviso-ok{ color:var(--txt); }
  /* Hermana de `.aviso-form[hidden]` y de `.btn[hidden]`, por si algún día
     alguien le pone un `display` a esta regla: el `[hidden]` de la hoja del
     navegador es lo primero que pierde esa pelea, y el acuse aparecería antes de
     que hubiera nada que acusar. */
  .aviso-ok[hidden]{ display:none; }
  /* El foco lo pone `recursos.js` para que quien navega con teclado no se quede
     colgado cuando el formulario desaparece del árbol. Sin anillo: el recuadro
     entero ya es la señal, y el mensaje se anuncia solo. */
  .aviso-ok:focus{ outline:none; }

  /* Aquí vivía la banda de BORRADOR de los textos legales (`.mborrador`), en
     dos copias. Se va el 8 sep 2026 y no es limpieza cosmética: las tres
     legales ya no viven en este sitio —están en `metodopinsach.com/legal/` y
     desde aquí sólo se enlazan—, así que no queda ni un HTML con esa clase.
     Un estilo huérfano que dibuja un recuadro de «borrador» es justo el que
     alguien reutiliza sin saber que el aviso ya no aplica. */

  /* Quien llegue con el JavaScript caído tiene que poder leer los legales
     igualmente: son páginas de verdad, no sólo ventanas. */
  .solo-sin-js{ display:none; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .xcard:hover, .btn:hover, .fpill:hover{ transform:none; }
  }

  /* Fondo de la sección de la prueba. Salió del `style="background-image:url(
     data:image/jpeg;base64,...)"` en línea: 97 KB de base64 dentro del HTML que
     el navegador no podía cachear por separado. */
  .final .bg{ background-image:url('/img/fondo-prueba.jpg'); }

  /* Etiqueta sólo para lectores de pantalla. */
  .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;
  }

  /* Pie · tres líneas. La firma es la canónica del proyecto y el copyright NO
     repite el descriptor: lo diría dos veces seguidas. Es la misma regla que
     defienden los tests de marca de la app (`e2e/helpers/marca.ts`). */
  footer .legal{ display:flex; flex-direction:column; gap:7px; align-items:center; }
  footer .foot-marca{ color:#8f8779; }
  footer .foot-enlaces{ margin-top:5px; }

  /* ── Páginas legales ──────────────────────────────────────────────────── */
  .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);
  }

  /* En móvil la URL de la cabecera no cabe y se cortaba a media palabra
     («LIBRO.METODOPINSACH.CO»). Se retira por debajo de 520 px: quien está
     leyendo esa línea ya está EN esa dirección, y el logotipo dice la marca.
     Visto en un viewport de 375 px, no deducido. */
  @media (max-width:520px){
    .topbar .tb-url{ display:none; }
    .topbar .wrap{ justify-content:center; }
  }