/* Al descubierto: tienda. Hoja propia para no tocar styles.css.
   Se genera junto con las páginas desde scripts/tienda-al-descubierto.mjs.
   El acento de cada guía llega en --tn-acento (inline en <body>); solo decora,
   el texto siempre va en las variables del tema para que se lea en todos. */

.tn-page { --tn-acento: var(--blue-accent); --tn-tinta: color-mix(in srgb, var(--tn-acento) 45%, var(--navy)); }
.tn-page .static-art-main { padding: 1.6rem 1rem 5.5rem; overflow-x: clip; }
.tn-wrap { max-width: 1080px; margin: 0 auto; min-width: 0; }
.tn-narrow { max-width: 720px; margin: 0 auto; }
.tn-page .static-breadcrumb { margin-bottom: 1.4rem; }

/* Tipos */
.tn-kicker { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); background: var(--badge-bg); border: 1px solid var(--badge-border); border-radius: 99px; padding: 6px 13px; margin: 0 0 1rem; }
.tn-h1 { font-size: clamp(1.75rem, 5.2vw, 3rem); line-height: 1.12; font-weight: 800; color: var(--navy); margin: 0 0 1rem; letter-spacing: -.01em; }
.tn-lead { font-size: clamp(1rem, 2.1vw, 1.14rem); line-height: 1.62; color: var(--text-body); margin: 0 0 1.4rem; max-width: 640px; }
.tn-sec { margin: 4.2rem 0 0; }
.tn-sec-tit { font-size: clamp(1.3rem, 3.2vw, 1.65rem); font-weight: 800; color: var(--navy); margin: 0 0 .5rem; line-height: 1.25; }
.tn-sec-sub { color: var(--text-body); margin: 0 0 1.5rem; font-size: .96rem; line-height: 1.6; max-width: 680px; }

/* Botones */
.tn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px;
  border-radius: 99px; border: none; font: inherit; font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer;
  background: var(--pill-bg); color: #fff; box-shadow: var(--pill-shadow); transition: transform .18s ease, opacity .18s ease; }
.tn-btn:hover { transform: translateY(-1px); }
.tn-btn:active { transform: translateY(0); }
.tn-btn--ghost { background: transparent; color: var(--blue); border: 1.5px solid var(--badge-border); box-shadow: none; }
.tn-btn--claro { background: #fff; color: #0B132B; box-shadow: none; }
.tn-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tn-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.tn-link:hover { text-decoration: underline; }

/* Tarjetas genéricas */
.tn-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--card-shadow); }
.tn-chip { font-size: .74rem; font-weight: 600; color: var(--blue); background: var(--badge-bg); border: 1px solid var(--badge-border);
  border-radius: 99px; padding: 4px 11px; white-space: nowrap; }
.tn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.5rem; }

/* Portada: el objeto es lo que distingue una guía en miniatura, así que va entera y grande */
.tn-portada { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; background: #0B132B;
  box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--tn-acento) 55%, transparent), 0 6px 18px rgba(11,19,43,.25); }

/* ── Colección ───────────────────────────────────────────── */
.tn-col-hero { text-align: center; padding: 1.5rem 0 .5rem; }
.tn-col-hero .tn-lead { margin-left: auto; margin-right: auto; }
.tn-razones { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 2rem 0 0; text-align: left; }
.tn-razon { padding: 18px 20px; }
.tn-razon b { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 4px; }
.tn-razon span { color: var(--text-body); font-size: .92rem; line-height: 1.55; }
.tn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.tn-gcard { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; transition: transform .22s ease; }
.tn-gcard:hover { transform: translateY(-3px); }
.tn-gcard-img { padding: 18px 18px 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tn-acento) 14%, transparent), transparent 70%); }
.tn-gcard-img .tn-portada { border-radius: 8px; }
.tn-gcard-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tn-gcard-body h3 { margin: 0; font-size: 1.05rem; color: var(--navy); line-height: 1.3; }
.tn-gcard-body p { margin: 0; font-size: .88rem; color: var(--text-body); line-height: 1.5; flex: 1; }
.tn-gcard-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; font-size: .85rem; }
.tn-gcard-pie .tn-precio { font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.tn-estado { font-size: .72rem; font-weight: 700; color: var(--tn-tinta); background: color-mix(in srgb, var(--tn-acento) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tn-acento) 35%, transparent); border-radius: 99px; padding: 4px 10px; }
.tn-gcard--proxima .tn-portada { opacity: .78; }

/* ── Ficha ───────────────────────────────────────────────── */
.tn-hero { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center; }
.tn-hero-portada { max-width: 260px; width: 62%; margin: 0 auto; }
.tn-hero-texto { min-width: 0; }
.tn-hero-tema { font-size: .82rem; font-weight: 700; color: var(--tn-tinta); letter-spacing: .02em; margin: 0 0 .6rem; }
.tn-hero-nota { font-size: .82rem; color: var(--text-body); margin: .9rem 0 0; }

/* Verificación como argumento de compra */
.tn-verif { padding: 26px 22px; border-top: 3px solid var(--tn-acento); }
.tn-verif-cifra { font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 800; color: var(--navy); line-height: 1.35; margin: 0 0 1rem; }
.tn-verif ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tn-verif li { position: relative; padding-left: 26px; color: var(--text-body); font-size: .94rem; line-height: 1.55; }
.tn-verif li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--tn-tinta);
  border-bottom: 2.5px solid var(--tn-tinta); transform: rotate(-45deg); }

/* Capítulo gratis */
.tn-capitulo { padding: 4px; }
.tn-capitulo-in { padding: 22px 14px 20px; }
.tn-cap-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.tn-cap-gratis { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tn-tinta);
  background: color-mix(in srgb, var(--tn-acento) 13%, transparent); border-radius: 99px; padding: 5px 11px; }
.tn-cap-eyebrow { font-size: .8rem; color: var(--text-body); font-weight: 600; margin: 0 0 6px; }
.tn-cap-tit { font-size: clamp(1.35rem, 4vw, 1.85rem); font-weight: 800; color: var(--navy); margin: 0 0 4px; line-height: 1.25; }
.tn-cap-subtit { font-size: .92rem; color: var(--text-body); margin: 0 0 22px; font-style: italic; }
.tn-cap-body { font-size: 1.04rem; line-height: 1.75; color: var(--navy); }
.tn-cap-body p { margin: 0 0 1.1rem; }
.tn-cap-body strong { font-weight: 700; }
.tn-reencuadre { border-left: 3px solid var(--tn-acento); margin: 0 0 1.6rem; padding: 4px 0 4px 16px; font-size: 1.1rem; font-style: italic; color: var(--navy); line-height: 1.6; }
.tn-label { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--blue); margin: 1.9rem 0 .6rem; }
.tn-truco, .tn-caso, .tn-mito { border-radius: 14px; padding: 16px 18px; margin: 0 0 1rem; font-size: .98rem; line-height: 1.65; }
.tn-truco { background: color-mix(in srgb, var(--tn-acento) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tn-acento) 25%, transparent); }
.tn-truco-tit { display: block; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.tn-caso { background: color-mix(in srgb, var(--blue) 6%, transparent); }
.tn-caso-tit, .tn-mito-tit { display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; color: var(--navy); }
.tn-mito { background: color-mix(in srgb, #E5484D 9%, transparent); border: 1px solid color-mix(in srgb, #E5484D 22%, transparent); }
.tn-mito-tit { color: color-mix(in srgb, #E5484D 75%, var(--navy)); }
.tn-mito p:last-child, .tn-truco p:last-child, .tn-caso p:last-child { margin-bottom: 0; }
.tn-checks { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.tn-checks li { position: relative; padding: 6px 0 6px 28px; }
.tn-checks li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--tn-tinta); }
.tn-nota-cap { font-size: .9rem; color: var(--text-body); font-style: italic; }
.tn-fuente { font-size: .84rem; color: var(--text-body); margin: 1.4rem 0 0; padding-top: 12px; border-top: 1px solid var(--card-border); line-height: 1.55; }
.tn-cap-fin { margin: 1.4rem 0 0; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--blue) 6%, transparent); font-size: .95rem; color: var(--navy); line-height: 1.55; }
.tn-cap-fin .tn-btns { margin-top: 12px; }

/* Visuales del capítulo */
.tn-visual { margin: 1.6rem 0; }
.tn-visual figcaption { font-size: .82rem; color: var(--text-body); margin-top: 8px; line-height: 1.5; }
.tn-visual-tit { font-size: .86rem; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.tn-tabla-wrap { overflow-x: auto; }
.tn-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tn-tabla th { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--navy); text-align: left; padding: 10px 12px; font-weight: 700; }
.tn-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--card-border); color: var(--navy); vertical-align: top; }
.tn-barras { display: grid; gap: 12px; }
.tn-barra-et { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--navy); margin-bottom: 5px; }
.tn-barra-et b { white-space: nowrap; }
.tn-barra-pista { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--navy) 9%, transparent); overflow: hidden; }
.tn-barra-relleno { height: 100%; width: 100%; border-radius: 99px; background: var(--tn-acento); transform-origin: left center; }
.tn-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 8px; }
.tn-pasos li { counter-increment: paso; position: relative; padding: 10px 14px 10px 46px; border-radius: 12px; background: color-mix(in srgb, var(--blue) 6%, transparent); font-size: .92rem; color: var(--navy); }
.tn-pasos li::before { content: counter(paso); position: absolute; left: 12px; top: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 800; background: var(--tn-acento); color: #0B132B; }
.tn-pasos li.tn-marca { box-shadow: inset 0 0 0 1.5px var(--tn-acento); }

/* Índice por situación e índice por bloques */
.tn-acc { padding: 0; margin: 0 0 10px; overflow: hidden; }
.tn-acc summary { list-style: none; cursor: pointer; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 700; color: var(--navy); font-size: .97rem; line-height: 1.4; }
.tn-acc summary::-webkit-details-marker { display: none; }
.tn-acc summary::after { content: "+"; color: var(--blue); font-weight: 800; font-size: 1.15rem; flex-shrink: 0; }
.tn-acc[open] summary::after { content: "\2212"; }
.tn-acc summary small { font-weight: 600; color: var(--text-body); font-size: .78rem; white-space: nowrap; margin-left: auto; }
.tn-acc-body { padding: 0 18px 14px; }
.tn-fila { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--card-border); font-size: .9rem; color: var(--text-body); line-height: 1.5; }
.tn-fila b { color: var(--navy); font-weight: 700; flex-shrink: 0; min-width: 2.2em; }
.tn-fila span { flex: 1; min-width: 0; }
.tn-fila--gratis { background: color-mix(in srgb, var(--tn-acento) 10%, transparent); border-radius: 8px; padding-left: 8px; padding-right: 8px; border-top-color: transparent; }
.tn-tag { font-size: .68rem; font-weight: 700; border-radius: 99px; padding: 3px 9px; white-space: nowrap; align-self: flex-start; }
.tn-tag--solido { color: #1E7A44; background: color-mix(in srgb, #22C55E 14%, transparent); }
.tn-tag--parcial { color: #9A6B12; background: color-mix(in srgb, #F59E0B 16%, transparent); }
.dark-base .tn-tag--solido { color: #6EE7A0; }
.dark-base .tn-tag--parcial { color: #FCD34D; }

/* Lo que te llevas, mitos, solapamiento */
.tn-llevas { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tn-llevas li { list-style: none; padding: 14px 16px 14px 44px; position: relative; font-size: .92rem; line-height: 1.55; color: var(--navy); }
.tn-llevas li::before { content: ""; position: absolute; left: 18px; top: 1.2em; width: 11px; height: 6px; border-left: 2.5px solid var(--tn-tinta); border-bottom: 2.5px solid var(--tn-tinta); transform: rotate(-45deg); }
.tn-llevas { margin: 0; padding: 0; }
.tn-mitos { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; gap: 8px; }
.tn-mitos li { font-size: .9rem; line-height: 1.5; color: var(--navy); padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, #E5484D 7%, transparent); }
.tn-solapa { display: grid; gap: 12px; }
.tn-solapa-item { padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
.tn-solapa-item img { width: 46px; flex-shrink: 0; border-radius: 4px; aspect-ratio: 2 / 3; object-fit: cover; }
.tn-solapa-item h3 { margin: 0 0 4px; font-size: .96rem; color: var(--navy); }
.tn-solapa-item p { margin: 0; font-size: .9rem; color: var(--text-body); line-height: 1.55; }

/* Oferta */
.tn-oferta { border-radius: 22px; padding: 30px 22px; color: #fff; background: linear-gradient(140deg, #0B132B 0%, #14214a 100%); position: relative; overflow: hidden; }
.tn-oferta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tn-acento); }
.tn-oferta h2 { margin: 0 0 6px; font-size: 1.45rem; font-weight: 800; color: #fff; }
.tn-oferta-sub { color: rgba(255,255,255,.7); margin: 0 0 18px; font-size: .94rem; line-height: 1.55; }
.tn-oferta ul { list-style: none; margin: 0 0 22px; padding: 0; }
.tn-oferta li { padding: 9px 0 9px 26px; position: relative; font-size: .93rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.92); line-height: 1.5; }
.tn-oferta li:first-child { border-top: none; }
.tn-oferta li::before { content: ""; position: absolute; left: 3px; top: 1.05em; width: 11px; height: 6px; border-left: 2.5px solid var(--tn-acento); border-bottom: 2.5px solid var(--tn-acento); transform: rotate(-45deg); }
.tn-oferta-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.tn-oferta-precio { font-size: 2.1rem; font-weight: 800; }
.tn-oferta-precio s { font-size: 1rem; color: rgba(255,255,255,.5); font-weight: 600; margin-right: 8px; }
.tn-oferta-nota { color: rgba(255,255,255,.62); font-size: .84rem; margin: 16px 0 0; line-height: 1.55; }
.tn-oferta .tn-espera label, .tn-oferta .tn-espera .tn-espera-legal { color: rgba(255,255,255,.75); }
.tn-oferta .tn-espera-ok { color: #fff; }

/* Lista de espera */
.tn-espera { display: grid; gap: 10px; width: 100%; max-width: 460px; }
.tn-espera-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.tn-espera input[type=email] { flex: 1 1 200px; min-width: 0; min-height: 46px; padding: 10px 16px; border-radius: 99px; font: inherit; font-size: .95rem;
  border: 1.5px solid var(--badge-border); background: var(--card-bg); color: var(--navy); }
.tn-oferta .tn-espera input[type=email] { background: rgba(255,255,255,.96); color: #0B132B; border-color: transparent; }
.tn-espera input[type=email]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tn-espera label { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; line-height: 1.5; color: var(--text-body); cursor: pointer; }
.tn-espera input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--blue); }
.tn-espera-legal { font-size: .74rem; line-height: 1.5; color: var(--text-body); margin: 0; }
.tn-espera-legal a { color: inherit; }
.tn-espera-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tn-espera-ok, .tn-espera-error { font-size: .9rem; font-weight: 600; margin: 0; }
.tn-espera-ok { color: var(--navy); }
.tn-espera-error { color: #E5484D; }

/* Packs */
.tn-pack { padding: 24px 20px; display: grid; gap: 18px; }
.tn-pack-portadas { display: flex; gap: 8px; }
.tn-pack-portadas img { width: 64px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; }
.tn-pack h2 { margin: 0 0 6px; font-size: 1.3rem; color: var(--navy); }
.tn-pack p { margin: 0; color: var(--text-body); font-size: .94rem; line-height: 1.6; }
.tn-pack-precio { font-size: 1.6rem; font-weight: 800; color: var(--navy); }
.tn-pack-precio s { font-size: .95rem; color: var(--text-body); font-weight: 600; margin-right: 6px; }
.tn-aviso { padding: 20px; color: var(--text-body); font-size: .95rem; line-height: 1.6; }

/* Novedades */
.tn-version { padding: 20px; margin: 0 0 14px; display: flex; gap: 16px; align-items: flex-start; }
.tn-version img { width: 56px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.tn-version h2 { margin: 0 0 8px; font-size: 1.1rem; color: var(--navy); }
.tn-version ol { list-style: none; margin: 0; padding: 0; }
.tn-version li { padding: 8px 0; border-top: 1px solid var(--card-border); font-size: .9rem; color: var(--text-body); line-height: 1.55; }
.tn-version li:first-child { border-top: none; padding-top: 0; }
.tn-version li b { color: var(--navy); }

/* FAQ */
.tn-faq .tn-acc p { margin: 0 18px 16px; color: var(--text-body); font-size: .94rem; line-height: 1.65; }
.tn-faq .tn-acc p + p { margin-top: -6px; }

.tn-volver { display: inline-block; margin: 3rem 0 0; }

@media (min-width: 681px) {
  .tn-page .static-art-main { padding: 2.4rem 1.5rem 5rem; }
  .tn-razones { grid-template-columns: repeat(3, 1fr); }
  .tn-hero { grid-template-columns: 300px 1fr; gap: 3rem; }
  .tn-hero-portada { width: 100%; max-width: none; }
  .tn-capitulo-in { padding: 44px 52px 40px; }
  .tn-verif { padding: 32px 34px; }
  .tn-llevas { grid-template-columns: 1fr 1fr; }
  .tn-oferta { padding: 42px 46px; }
  .tn-pack { grid-template-columns: auto 1fr; align-items: center; padding: 28px; }
  .tn-solapa { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-btn, .tn-gcard { transition: none; }
}

/* Páginas legales (privacidad) */
.tn-legal { padding: 1rem 0 2rem; }
.tn-legal h2 { font-size: 1.2rem; font-weight: 800; color: var(--navy); margin: 2.2rem 0 .6rem; }
.tn-legal h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 1.4rem 0 .4rem; }
.tn-legal p, .tn-legal li { color: var(--text-body); font-size: .97rem; line-height: 1.7; }
.tn-legal p { margin: 0 0 .9rem; }
.tn-legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.tn-legal li { margin-bottom: .5rem; }
.tn-legal b { color: var(--navy); }
.tn-legal a { color: var(--blue); }