/* landing_premium/style.css — Landing Premium de Radar de Liquidez.
   Implementa exactamente docs/LANDING_MASTER_PLAN.md (documento maestro,
   congelado) sobre la identidad visual de docs/DMDF_PRODUCTO.md sección 0.
   No introduce ningún color, fuente ni estilo de icono fuera de esa
   sección — mismos tokens exactos que las 5 pantallas del Dashboard
   Premium, PDF Premium y Telegram Premium. */

:root {
    --fondo-base: #0B0E14;
    --fondo-tarjeta: #161C27;
    --borde-sutil: #232A38;
    --marca-oro: #C9A227;
    --texto-principal: #E6E9EF;
    --texto-secundario: #8A93A6;
    --positivo: #3FB98C;
    --negativo: #EA5A5F;
    --neutral: #E0A93E;

    --max-width: 1180px;
    --radio-tarjeta: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: var(--fondo-base);
    color: var(--texto-principal);
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.contenedor {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 860px) {
    .contenedor { padding: 0 24px; }
}
@media (max-width: 500px) {
    .contenedor { padding: 0 20px; }
}

section { padding: 88px 0; }
@media (max-width: 1023px) { section { padding: 64px 0; } }
@media (max-width: 500px) { section { padding: 48px 0; } }

.tsp-eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-secundario);
    margin-bottom: 0.5rem;
}
.tsp-eyebrow .tsp-accent { color: var(--marca-oro); }

h1, h2, h3 { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-weight: 700; margin: 0; }

h2.tsp-titulo-bloque {
    font-size: 2rem;
    line-height: 1.25;
    margin-bottom: 1rem;
    max-width: 720px;
}
@media (max-width: 767px) { h2.tsp-titulo-bloque { font-size: 1.5rem; } }

p.tsp-lead {
    font-size: 1.1rem;
    color: var(--texto-secundario);
    max-width: 640px;
    line-height: 1.65;
}

.tsp-card {
    background-color: var(--fondo-tarjeta);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-tarjeta);
    padding: 1.5rem;
}

/* ── Navegación ─────────────────────────────────────────────────────── */
.tsp-nav {
    position: sticky; top: 0; z-index: 50;
    background-color: rgba(11, 14, 20, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--borde-sutil);
}
.tsp-nav .contenedor { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.tsp-nav .tsp-brand { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; }
.tsp-nav .tsp-brand .tsp-accent { color: var(--marca-oro); }
.tsp-nav .tsp-brand-sub { font-size: 0.78rem; color: var(--texto-secundario); font-weight: 500; margin-left: 0.4rem; }
.tsp-nav-cta { display: flex; align-items: center; gap: 0.75rem; }
@media (max-width: 640px) { .tsp-nav .tsp-brand-sub { display: none; } }

/* ── Botones ────────────────────────────────────────────────────────── */
.tsp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-family: inherit; font-size: 0.95rem; font-weight: 700;
    padding: 0.85rem 1.6rem; border-radius: 999px; cursor: pointer;
    text-decoration: none; border: 1px solid transparent; white-space: nowrap;
    transition: transform 0.12s ease, background-color 0.12s ease;
}
.tsp-btn:active { transform: scale(0.97); }
.tsp-btn-primario {
    background-color: transparent; color: var(--fondo-base);
    background-color: var(--marca-oro); border-color: var(--marca-oro);
}
.tsp-btn-primario:hover { background-color: #ddb635; }
.tsp-btn-secundario {
    background-color: transparent; color: var(--texto-principal); border-color: var(--borde-sutil);
}
.tsp-btn-secundario:hover { border-color: var(--marca-oro); }
.tsp-btn-texto {
    background: none; border: none; color: var(--texto-principal); font-weight: 600;
    padding: 0.4rem 0; text-decoration: none;
}
.tsp-btn-texto:hover { color: var(--marca-oro); }
.tsp-btn-block { width: 100%; }
.tsp-btn-sm { padding: 0.6rem 1.1rem; font-size: 0.85rem; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.tsp-hero { padding: 72px 0 56px 0; }
.tsp-hero .contenedor { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.tsp-hero h1 { font-size: 2.6rem; line-height: 1.2; margin: 0.75rem 0 1rem 0; max-width: 780px; }
.tsp-hero .tsp-sub { font-size: 1.15rem; color: var(--texto-secundario); max-width: 560px; margin-bottom: 1.75rem; }
.tsp-hero-ctas { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.tsp-hero-nota { font-size: 0.82rem; color: var(--texto-secundario); }
.tsp-hero-visual { border-radius: var(--radio-tarjeta); overflow: hidden; border: 1px solid var(--borde-sutil); }
.tsp-hero-visual img { width: 100%; }
.tsp-hero-caption {
    margin-top: 0.6rem; color: var(--texto-secundario); font-size: 0.8rem; letter-spacing: 0.02em;
}
@media (max-width: 767px) { .tsp-hero h1 { font-size: 1.9rem; } .tsp-hero { padding: 40px 0 40px 0; } }

/* ── Propuesta de valor / texto centrado ───────────────────────────── */
.tsp-bloque-texto .contenedor { max-width: 760px; }
.tsp-bloque-texto p { font-size: 1.05rem; color: var(--texto-principal); line-height: 1.75; margin: 0 0 1.1rem 0; }
.tsp-bloque-texto p:last-child { margin-bottom: 0; }

/* ── Listas de entregables ─────────────────────────────────────────── */
.tsp-lista-entregables { list-style: none; margin: 2rem 0 0 0; padding: 0; display: grid; gap: 1rem; }
.tsp-lista-entregables li {
    display: flex; gap: 0.9rem; padding: 1.1rem 1.3rem;
    background-color: var(--fondo-tarjeta); border: 1px solid var(--borde-sutil); border-radius: var(--radio-tarjeta);
}
.tsp-lista-entregables .tsp-check { color: var(--positivo); font-weight: 700; flex-shrink: 0; }
.tsp-lista-entregables b { display: block; margin-bottom: 0.15rem; }
.tsp-lista-entregables span.tsp-desc { color: var(--texto-secundario); font-size: 0.92rem; }

/* ── Pasos (Cómo funciona) ─────────────────────────────────────────── */
.tsp-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.tsp-paso { padding: 1.5rem; }
.tsp-paso .tsp-paso-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--marca-oro);
    color: var(--marca-oro); font-weight: 700; margin-bottom: 1rem;
}
.tsp-paso h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.tsp-paso p { color: var(--texto-secundario); font-size: 0.95rem; margin: 0; }
@media (max-width: 900px) { .tsp-pasos { grid-template-columns: 1fr; } }

/* ── Ejemplo real / visor PDF ───────────────────────────────────────── */
.tsp-visor-pdf {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 1rem 0 1.5rem 0; margin-top: 2rem; -webkit-overflow-scrolling: touch;
}
.tsp-visor-pdf::-webkit-scrollbar { height: 8px; }
.tsp-visor-pdf::-webkit-scrollbar-thumb { background: var(--borde-sutil); border-radius: 4px; }
.tsp-visor-pagina {
    scroll-snap-align: center; flex-shrink: 0; width: 340px;
    border: 1px solid var(--borde-sutil); border-radius: var(--radio-tarjeta); overflow: hidden;
    background: var(--fondo-tarjeta);
}
.tsp-visor-pagina img { width: 100%; }
.tsp-visor-pagina .tsp-pie { padding: 0.6rem 0.9rem; font-size: 0.78rem; color: var(--texto-secundario); border-top: 1px solid var(--borde-sutil); }
.tsp-visor-nav { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.5rem; }
.tsp-visor-nav button {
    width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--borde-sutil); cursor: pointer; padding: 0;
}
.tsp-visor-nav button.activo { background: var(--marca-oro); }

/* ── Rejilla de capturas del Dashboard ──────────────────────────────── */
.tsp-rejilla-capturas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.tsp-captura { border: 1px solid var(--borde-sutil); border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--fondo-tarjeta); }
.tsp-captura .tsp-marco { max-height: 260px; overflow: hidden; }
.tsp-captura .tsp-marco img { width: 100%; object-fit: cover; object-position: top; }
.tsp-captura .tsp-pie { padding: 0.9rem 1.1rem; font-size: 0.9rem; color: var(--texto-secundario); }
@media (max-width: 767px) { .tsp-rejilla-capturas { grid-template-columns: 1fr; } }

/* ── Mosaico PDF (bloque 7) ─────────────────────────────────────────── */
.tsp-mosaico-pdf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; }
.tsp-mosaico-pdf .tsp-captura .tsp-marco { max-height: 340px; }
@media (max-width: 900px) { .tsp-mosaico-pdf { grid-template-columns: 1fr; } }

/* ── Telegram ────────────────────────────────────────────────────────── */
.tsp-telegram-marco { max-width: 460px; margin: 2rem auto 0 auto; border: 1px solid var(--borde-sutil); border-radius: var(--radio-tarjeta); overflow: hidden; }
.tsp-telegram-marco img { width: 100%; }

/* ── Tablas comparativas (bloques 9, 10, 13) ────────────────────────── */
.tsp-tabla-wrap { overflow-x: auto; margin-top: 2rem; }
table.tsp-tabla { width: 100%; border-collapse: collapse; min-width: 560px; }
table.tsp-tabla th, table.tsp-tabla td {
    padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--borde-sutil); font-size: 0.92rem;
}
table.tsp-tabla th { color: var(--texto-secundario); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; font-weight: 600; }
table.tsp-tabla td.tsp-num, table.tsp-tabla th.tsp-num { text-align: center; }
table.tsp-tabla tr:last-child td { border-bottom: none; }
table.tsp-tabla .tsp-si { color: var(--positivo); font-weight: 700; }
table.tsp-tabla .tsp-no { color: var(--texto-secundario); }
.tsp-reencuadre { margin-top: 1.5rem; font-size: 0.95rem; color: var(--texto-secundario); }

/* Vista de tarjetas apiladas para tablas en móvil */
.tsp-tabla-cards { display: none; }
@media (max-width: 767px) {
    .tsp-tabla-wrap { display: none; }
    .tsp-tabla-cards { display: grid; gap: 1rem; margin-top: 2rem; }
    .tsp-tabla-cards .tsp-card h4 { margin: 0 0 0.75rem 0; font-size: 1rem; }
    .tsp-tabla-cards .tsp-fila { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--borde-sutil); font-size: 0.88rem; }
    .tsp-tabla-cards .tsp-fila:last-child { border-bottom: none; }
    .tsp-tabla-cards .tsp-fila span:first-child { color: var(--texto-secundario); }
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.tsp-faq { margin-top: 2rem; display: grid; gap: 0.75rem; max-width: 760px; }
.tsp-faq details {
    background: var(--fondo-tarjeta); border: 1px solid var(--borde-sutil); border-radius: var(--radio-tarjeta);
    padding: 1.1rem 1.3rem;
}
.tsp-faq summary {
    cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.tsp-faq summary::-webkit-details-marker { display: none; }
.tsp-faq summary::after { content: "+"; color: var(--marca-oro); font-size: 1.3rem; font-weight: 400; }
.tsp-faq details[open] summary::after { content: "−"; }
.tsp-faq p { margin: 0.9rem 0 0 0; color: var(--texto-secundario); font-size: 0.95rem; line-height: 1.6; }

/* ── Garantía ────────────────────────────────────────────────────────── */
.tsp-garantia { max-width: 640px; margin: 2rem auto 0 auto; text-align: center; padding: 2.2rem; }
.tsp-garantia .tsp-sello {
    width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1.5px solid var(--marca-oro); color: var(--marca-oro);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; font-size: 1.4rem;
}

/* ── Precio ──────────────────────────────────────────────────────────── */
.tsp-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2.5rem auto 0 auto; max-width: 1040px; }
.tsp-plan { display: flex; flex-direction: column; padding: 1.6rem 1.4rem; }
.tsp-plan .tsp-plan-nombre { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-secundario); margin-bottom: 0.6rem; }
.tsp-plan .tsp-plan-precio { font-size: 1.9rem; font-weight: 700; margin-bottom: 0.2rem; }
.tsp-plan .tsp-plan-precio span { font-size: 0.9rem; font-weight: 500; color: var(--texto-secundario); }
.tsp-plan .tsp-plan-target { font-size: 0.82rem; color: var(--texto-secundario); margin-bottom: 1.2rem; min-height: 2.4em; }
.tsp-plan ul { list-style: none; padding: 0; margin: 0 0 1.5rem 0; flex: 1; display: grid; gap: 0.6rem; }
.tsp-plan li { font-size: 0.85rem; display: flex; gap: 0.5rem; align-items: baseline; color: var(--texto-secundario); text-align: left; }
.tsp-plan li.tsp-incluido { color: var(--texto-principal); }
.tsp-plan li .tsp-marca { color: var(--positivo); flex-shrink: 0; }
.tsp-plan li .tsp-marca.tsp-cruz { color: var(--texto-secundario); }
.tsp-plan-destacado {
    border-color: var(--marca-oro); position: relative;
    background: linear-gradient(180deg, rgba(201,162,39,0.08), var(--fondo-tarjeta) 40%);
}
.tsp-plan-destacado .tsp-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--marca-oro); color: var(--fondo-base); font-size: 0.72rem; font-weight: 700;
    padding: 0.25rem 0.8rem; border-radius: 999px; letter-spacing: 0.03em;
}
@media (max-width: 860px) {
    .tsp-planes { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 640px) {
    .tsp-planes {
        display: flex; grid-template-columns: unset; overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: 0.5rem; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
    }
    .tsp-plan { min-width: 78vw; scroll-snap-align: start; }
}

/* ── CTA de cierre ───────────────────────────────────────────────────── */
.tsp-cta-cierre { text-align: center; }
.tsp-cta-cierre .contenedor { max-width: 560px; }
.tsp-cta-cierre h2 { font-size: 1.9rem; margin-bottom: 0.5rem; }
.tsp-cta-cierre p.tsp-lead { margin: 0 auto 2rem auto; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.tsp-footer { border-top: 1px solid var(--borde-sutil); padding: 48px 0 32px 0; }
.tsp-footer .tsp-brand { font-weight: 700; margin-bottom: 1rem; }
.tsp-footer .tsp-brand .tsp-accent { color: var(--marca-oro); }
.tsp-footer p.tsp-legal { font-size: 0.82rem; color: var(--texto-secundario); max-width: 760px; line-height: 1.6; margin-bottom: 1.5rem; }
.tsp-footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.85rem; margin-bottom: 1.5rem; }
.tsp-footer-links a { color: var(--texto-secundario); text-decoration: none; }
.tsp-footer-links a:hover { color: var(--texto-principal); }
.tsp-footer .tsp-copy { font-size: 0.78rem; color: var(--texto-secundario); }

/* ── CTA móvil fija ──────────────────────────────────────────────────── */
.tsp-cta-fija {
    display: none;
}
@media (max-width: 767px) {
    .tsp-cta-fija {
        display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
        background: rgba(11,14,20,0.96); border-top: 1px solid var(--borde-sutil);
        padding: 0.7rem 20px calc(0.7rem + env(safe-area-inset-bottom)) 20px;
        backdrop-filter: blur(6px);
    }
    body { padding-bottom: 64px; }
}

/* ── Utilidades ──────────────────────────────────────────────────────── */
.tsp-centrado { text-align: center; }
.tsp-centrado .tsp-titulo-bloque, .tsp-centrado p.tsp-lead { margin-left: auto; margin-right: auto; }

/* Preinscripción (2026-10-23): en móvil el botón es más largo; se oculta el enlace Precios de la barra */
@media (max-width: 480px) {
    .tsp-nav .tsp-btn-texto { display: none; }
}