/* LA TIENDA (11/11/2026): /store/, /free-sample/, /bonus/, los repasos del
   libro, la losa de la portada, el bloque «Extra practice (in the book)» de
   las lecciones (.lx), las ofertas tras las lecciones 5 y 20 (.lp-oferta) y la
   página de descarga del Worker (.descarga). Va detrás de style.css (y de
   paginas.css en las páginas de texto). Usa solo las variables de style.css. */

/* ── portada del libro ── */
.t-cover{margin:0;max-width:320px;width:100%}
.t-cover img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.18),0 18px 40px rgba(20,12,4,.28)}
.t-cover-old img{filter:grayscale(1) sepia(.3) contrast(1.03)}
.t-cover-mark{aspect-ratio:2/3;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--paris);color:#F3ECDD;border-radius:3px;padding:28px;text-align:center;box-shadow:0 18px 40px rgba(20,12,4,.28)}
.t-cover-mark svg{width:42%;color:#F3ECDD}
.t-cover-mark span{font-family:var(--display);font-size:20px;line-height:1.2}
.t-cover-mark b{display:block;font-size:30px;font-style:italic}
.t-cover-mark i{display:block;font:500 13px/1 var(--mono);letter-spacing:.2em;margin-top:12px;color:var(--oro)}
.t-cover-s{max-width:160px}

/* ── portada del sitio: la losa ── */
.h-tienda .h-t-cover{justify-self:center;max-width:300px;transform:rotate(2deg)}
.h-t-list{margin:0 0 28px;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink2)}
.h-t-list li::before{content:"·";color:var(--oro);font-weight:700;margin-right:10px}
.slab .btn-s{border-color:var(--h-on-black);color:var(--h-on-black)}
.slab .btn-s:hover{background:var(--h-on-black);color:var(--h-black)}

/* repasos del libro en la lista de lecciones (home.js) */
.chapter-card.book .card-book{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--velours);border:1px solid currentColor;border-radius:999px;padding:5px 10px;margin-top:6px}
.chapter-card.book .card-book::before{content:"";width:9px;height:10px;background:currentColor;border-radius:2px 2px 1px 1px;box-shadow:0 -4px 0 -2px currentColor}

/* ── /store/ ── */
main.pg.t-store{max-width:60em}
.t-hero{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(24px,5vw,56px);align-items:center;margin-bottom:12px}
@media (max-width:700px){.t-hero{grid-template-columns:1fr}.t-hero .t-cover{max-width:220px}}
.t-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,54px);line-height:1.04;letter-spacing:-.02em;margin:12px 0 14px}
.t-hero h1 em{color:var(--velours)}
.t-hero .lead{font-family:var(--lc-serif);font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink2)}
.t-precio{font-family:var(--display);font-size:40px;font-weight:700;margin:18px 0 14px;color:var(--ink)}
.t-precio small{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.t-soon{opacity:.6;cursor:not-allowed}
.t-soon:hover{transform:none!important;box-shadow:none!important;background:var(--lc-btn)!important}
.t-nota,.t-garantia{font-size:14.5px;color:var(--muted)!important;margin:12px 0 0!important}
.t-tabla{overflow-x:auto}
.t-tabla td:not(:first-child){white-space:nowrap}
.t-si{color:var(--oro);font-weight:700;margin-right:4px}
.t-no{color:var(--muted)}
.t-faq details{border-bottom:1px solid var(--line);padding:14px 0}
.t-faq details:first-child{border-top:1px solid var(--ink)}
.t-faq summary{cursor:pointer;font-weight:600;color:var(--ink)}
.t-faq details p{margin:10px 0 0}

/* ── avisos, llamadas y navegación de las páginas de la tienda ── */
.t-aviso{display:flex;gap:12px;align-items:flex-start;background:var(--sunk);padding:14px 16px;border-left:3px solid var(--oro);margin:18px 0}
.t-aviso .lx-lock{flex:none;margin-top:3px}
.t-cta{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;margin:44px 0 0;padding:24px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.t-cta h2{margin:0 0 8px!important;padding:0!important;border:0!important}
@media (max-width:560px){.t-cta{grid-template-columns:1fr}.t-cta .t-cover-s{max-width:120px}}
.t-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;font-size:15px}
.t-pg .pg-cita{margin:14px 0}

/* ── «Extra practice (in the book)» en la lección ── */
.lx{display:grid;gap:18px}
.lx-intro{font-size:17px;color:var(--ink2);margin:0}
.lx-ex{border-top:2px solid var(--ink);padding-top:14px}
.lx-n{font-family:var(--display);font-size:20px;font-weight:700;margin:0 0 4px}
.lx-ins{color:var(--ink2);margin:0 0 10px}
.lx-ins span{display:block;font-style:italic;color:var(--muted);font-size:15px}
.lx-items{margin:0;padding-left:1.6em;display:grid;gap:8px;font-family:var(--lc-serif);font-size:18px;line-height:1.5}
.lx-items small{font-family:var(--lc-sans);font-size:13.5px;color:var(--muted)}
.lx-abc{list-style:lower-alpha}
.lx-blank{display:inline-block;min-width:4.5em;border-bottom:1.5px solid var(--ink);margin:0 4px;transform:translateY(-3px)}
.lx-opts{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:16px;color:var(--ink2)}
.lx-bank{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.lx-bank span{border:1px solid var(--line);padding:2px 10px;border-radius:999px;font-size:15px;background:var(--surface)}
.lx-cols{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 8px;font-size:14px}
.lx-match{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.lx-match{grid-template-columns:1fr}}
.lx-meta{font-size:14px;color:var(--muted)}
.lx-locked{position:relative}
.lx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lx-list li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.lx-list li>div{flex:1;display:grid;gap:4px;min-width:0}
.lx-list b{font-size:15.5px;color:var(--ink)}
.lx-list span{font-size:14.5px;color:var(--muted)}
.lx-lock{width:18px;height:18px;flex:none;color:var(--oro);margin-top:2px}
.lx-ghost{display:grid;gap:7px;margin-top:6px;filter:blur(2.5px);opacity:.75;user-select:none}
.lx-ghost i{display:block;height:9px;border-radius:4px;background:var(--lc-line2)}
.lx-plus{margin:0;padding:16px 18px;background:var(--sunk);list-style:none;display:grid;gap:6px;font-size:15px;color:var(--ink2)}
.lx-plus li::before{content:"✓";color:var(--oro);font-weight:700;margin-right:10px}
.lx-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* ── las ofertas tras las lecciones 5 y 20 ── */
.lp-oferta{position:relative;width:100%;box-sizing:border-box;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 36px 14px 0;font-size:15px;color:var(--ink2)}
.lp-oferta p{margin:0}
.lp-oferta-a{color:var(--ink);font-weight:600;text-underline-offset:3px;white-space:nowrap}
.lp-oferta-x{position:absolute;top:8px;right:0;width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
.lp-oferta-x:hover{background:var(--sunk);color:var(--ink)}
.lp-oferta.fuerte{background:var(--h-black);color:var(--h-on-black);border:0;padding:28px 52px 28px 28px;--ink:var(--h-on-black);--ink2:rgba(243,236,221,.85);--muted:rgba(243,236,221,.65)}
.lp-oferta.fuerte h3{font-family:var(--display);font-size:clamp(24px,3vw,32px);line-height:1.1;margin:6px 0 10px}
.lp-oferta.fuerte p{color:var(--ink2);margin-bottom:12px}
.lp-oferta.fuerte .cta{margin:18px 0 0}
.lp-oferta.fuerte .btn-s{border-color:var(--h-on-black);color:var(--h-on-black)}
.lp-oferta.fuerte .lp-oferta-x{top:14px;right:14px}
.lp-oferta-k{font:500 12px/1 var(--mono)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)!important}

/* ── página de descarga (worker/index.js, CSP sin estilos en línea) ── */
.descarga .dl-top{max-width:46em;margin:0 auto;padding:22px 24px 0;font-family:var(--display);font-size:22px;font-weight:700}
.descarga .dl-top a{color:var(--ink);text-decoration:none}
.descarga .dl-top i{color:var(--velours)}
.descarga .dl-file{font-size:18px}
.descarga .dl-nota{background:var(--sunk);padding:14px 16px;border-left:3px solid var(--oro);margin:22px 0}
.descarga .dl-pasos{padding-left:1.4em;display:grid;gap:8px}
