: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}
  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)}
  .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}
  .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}
  .gift-photo img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;object-position:center}
  .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)}

  /* ---------- 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)}

  /* ---------- 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}
    .gift-photo{min-height:280px}
    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}
  /* filtro por capítulos */
  .filtros{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
  .fpill{font-family:'Outfit';font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--crema);background:transparent;border:1px solid var(--line-d);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.2s;white-space:nowrap}
  .fpill:hover{border-color:var(--dorado);color:var(--dorado2)}
  .fpill.active{background:var(--dorado);color:var(--negro);border-color:var(--dorado);font-weight:600}
  .fpill .n{opacity:.6;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; }

  /* Captura de correo del webinar. El botón «Reservar mi plaza» no llevaba a
     ninguna parte porque el directo aún no tiene fecha (Albert, 4 sep). En vez
     de un botón muerto, se recoge el correo y se avisa. */
  .aviso-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
  .aviso-form input[type=email]{
    flex:1 1 220px; 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=email]:focus{
    outline:none; border-color:var(--dorado); box-shadow:0 0 0 3px rgba(184,153,90,.16);
  }
  .aviso-nota{ font-size:.82rem; color:var(--txt-soft); margin-top:12px; }
  .aviso-ok{
    margin-top:14px; font-family:'Cormorant Garamond'; font-style:italic;
    font-size:1.12rem; color:var(--verde);
  }

  /* Banda de BORRADOR de los textos legales. La misma que lleva la app en
     Perfil, y por el mismo motivo: mientras no haya revisión profesional, decirlo. */
  .modal .mborrador{
    background:rgba(184,153,90,.14);
    border:1px dashed var(--dorado);
    border-radius:8px;
    padding:13px 16px; margin:0 0 18px;
    font-size:.86rem; color:#7a5f24;
  }
  .modal .mborrador b{ color:var(--negro); }

  /* 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{ 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);
  }
  .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); }

  /* 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; }
  }