/* =============================================================
   Tema B — «ámbar nocturno» para landing, metodología, guía y blog (body.landing-b).
   El simulador usa los mismos tokens de marca desde design-system.css,
   con selector claro/oscuro/alto contraste (oscuro por defecto).
   Redefine los tokens del design system, así que el resto de secciones
   (simulación rápida, objetivos, metodología, FAQ, CTA final) heredan
   el tema sin tocar su CSS. El alto contraste se respeta por accesibilidad.
   ============================================================= */

body.landing-b:not(.high-contrast-mode) {
    color-scheme: dark;

    --bg-base: #111418;
    --surface-1: #1A1F26;
    --surface-2: #20262E;
    --surface-3: #2A313B;
    --border-sutil: #2A313B;
    --border-activo: #3A424D;

    --text-primary: #EDEFF2;
    --text-secondary: #B5BCC6;
    --text-muted: #9AA3AE;
    --text-disabled: #5B6470;

    --accent: #F2A93B;
    --accent-deep: #D98E1F;
    --accent-hover: #F7C46F;
    --accent-fg: #111418;
    --accent-glow: rgba(242, 169, 59, 0.14);
    --accent-glow-strong: rgba(242, 169, 59, 0.26);
    --success-rgb: 242, 169, 59;

    /* Las sombras se calculan en :root con el acento antiguo: hay que redefinirlas aquí */
    --shadow-glow: none;
    --shadow-glow-hover: 0 0 0 3px var(--accent-glow);
    --shadow-glow-active: none;
    --shadow-card-line: rgba(255, 255, 255, 0.04);
    --shadow-card-ambient: rgba(0, 0, 0, 0.35);

    --font-display: 'IBM Plex Sans', system-ui, sans-serif;
    --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --app-header-bg: rgba(17, 20, 24, 0.88);
    --app-header-shadow: 0 1px 0 var(--border-sutil);

    background: var(--bg-base);
    color: var(--text-primary);
}

/* El tema claro/oscuro no aplica: landing, metodología, guía y blog son oscuros.
   El selector de tema solo queda en el simulador. */
body.landing-b #landingThemeToggle,
body.landing-b #blogThemeToggle {
    display: none;
}

/* Los titulares usaban DM Serif (un solo grosor, 400): con IBM Plex necesitan peso */
body.landing-b :is(h1, h2) {
    font-weight: 700;
}

body.landing-b h3 {
    font-weight: 600;
}

body.landing-b .site-header .logo-fire,
body.landing-b .site-header .logo-mark {
    color: var(--accent);
}

body.landing-b a:not([class]) {
    color: var(--accent);
}

/* ---------- Cabecera (hero) ---------- */
body.landing-b .hero.hero-b {
    background: var(--bg-base);
    padding: calc(var(--app-header-height) + var(--space-10)) var(--space-6) var(--space-12);
}

.hero-b-inner {
    max-width: var(--landing-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.hero-b-top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: flex-end;
    justify-content: space-between;
}

.hero-b-copy {
    flex: 1 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

body.landing-b .hero-b .hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

body.landing-b .hero-b .hero-subtitle {
    margin: 0;
    max-width: 620px;
    font-size: 19px;
    line-height: 1.6;
}

body.landing-b .hero-b .hero-ctas .btn-primary,
body.landing-b .hero-b .hero-ctas .btn-secondary {
    height: var(--btn-height-lg);
    gap: var(--space-2);
    border-radius: var(--radius-sm);
}

/* Ejemplo real */
.hero-example {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: var(--space-6);
    background: var(--surface-1);
    border: var(--border-width) solid var(--border-sutil);
    border-radius: var(--radius-lg);
}

.hero-example-facts {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.hero-example-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hero-example-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.hero-example-score {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.hero-example-pct {
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
}

.hero-example-success {
    font-size: 15px;
    color: var(--text-muted);
}

.hero-example-rows {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 15px;
}

.hero-example-rows > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: var(--border-width) solid var(--border-sutil);
}

.hero-example-rows dt {
    color: var(--text-muted);
}

.hero-example-rows dd {
    margin: 0;
    text-align: right;
}

.hero-example-rows .is-median dt {
    color: var(--accent);
}

.hero-example-rows .is-pessimistic dt {
    color: #7FB2E5;
}

.hero-example-chart {
    flex: 2 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hero-example-chart svg {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.hero-example-chart .grid { stroke: var(--border-sutil); stroke-width: 1; }
.hero-example-chart .axis { stroke: var(--border-activo); stroke-width: 1; }
.hero-example-chart .marker { stroke: var(--border-activo); stroke-width: 1; stroke-dasharray: 4 4; }
.hero-example-chart .band { fill: var(--accent); fill-opacity: 0.12; }
.hero-example-chart .p10 { fill: none; stroke: #7FB2E5; stroke-width: 2.5; }
.hero-example-chart .p50 { fill: none; stroke: var(--accent); stroke-width: 3; }
/* Unidades del viewBox (520 de ancho): el SVG escala ~1,4×, así que 9 ≈ 12-13 px en pantalla */
.hero-example-chart .label { fill: var(--text-muted); font-family: var(--font-mono); font-size: 9px; }

.hero-example-axis {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--text-muted);
}

/* Tres razones */
.hero-b-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.hero-b-feature {
    padding-top: var(--space-4);
    border-top: 2px solid var(--accent);
}

.hero-b-feature h2 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.hero-b-feature p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.hero-b-feature a {
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Simulación rápida (ahora sección propia) ---------- */
.quick-sim-section .quick-sim-wrap {
    max-width: 640px;
    margin: var(--space-8) auto 0;
}

body.landing-b .quick-sim-card {
    box-shadow: none;
}

/* ---------- Restos con el verde fijado a mano en landing.css ---------- */
body.landing-b:not(.high-contrast-mode) .goal-calc-result {
    background: rgba(242, 169, 59, 0.08);
}

body.landing-b .section-label {
    color: var(--accent);
}

@media (max-width: 768px) {
    body.landing-b .hero.hero-b {
        padding: calc(var(--app-header-height) + var(--space-6)) var(--space-4) var(--space-10);
    }

    .hero-b-features {
        grid-template-columns: 1fr;
    }

    .hero-example {
        padding: var(--space-4);
    }

    .hero-example-pct {
        font-size: 52px;
    }

    /* El SVG se reduce a ~0,6× en un móvil: etiquetas más grandes en unidades del viewBox */
    .hero-example-chart .label {
        font-size: 18px;
    }

    /* Edades en una fila y la nota debajo */
    .hero-example-axis span:nth-child(2) {
        order: 3;
        flex-basis: 100%;
    }
}