/* =========================================================================
 * style.css — Fundación Informativos.Net
 * Monumento vivo a Gema Castellano (1961–2023).
 * Sistema visual editorial e institucional. App propia → CSP estricta:
 * cero inline salvo :root. Fuentes auto-alojadas (font-src 'self').
 * Referentes: Gates Foundation (gravedad/escala) + Kauffman (fundadora
 * como protagonista absoluta). v2: adopta y eleva la referencia aprobada
 * (hero a sangre 50/50, stats bar, propósito en home, calculadora slider,
 * bloque 300, noticias en tarjetas con barra naranja).
 * ========================================================================= */

/* ----------------------------------------------------------------------- *
 * 1. Fuentes auto-alojadas (woff2 variables; NO Google Fonts CDN)
 * ----------------------------------------------------------------------- */
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/playfair-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/playfair-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/playfair-latinext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/fonts/inter-latinext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/jetbrains-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/jetbrains-latinext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------------- *
 * 2. Tokens de diseño
 * ----------------------------------------------------------------------- */
:root {
    --color-fondo:        #FAFAF7; /* marfil */
    --color-fondo-alt:    #F2F1EA; /* marfil sombreado */
    --color-primario:     #1C3557; /* azul tinta */
    --color-primario-osc: #14263F; /* tinta profunda */
    --color-acento:       #E8600A; /* naranja fuego */
    --color-acento-osc:   #C44E04;
    --color-acento-claro: #F6A26A; /* naranja sobre tinta */
    --color-texto:        #1A1A1A;
    --color-gris:         #6B7280;
    --color-gris-claro:   #9CA3AF;
    --color-linea:        #D9D7CC; /* hairline sobre marfil */
    --color-linea-suave:  #E2E0D6;
    --color-blanco:       #FFFFFF;

    --sobre-tinta:        rgba(255, 255, 255, 0.92);
    --sobre-tinta-tenue:  rgba(255, 255, 255, 0.58);
    --sobre-tinta-debil:  rgba(255, 255, 255, 0.38);
    --tinta-linea:        rgba(255, 255, 255, 0.14);

    --fuente-titulares: "Playfair Display", Georgia, "Times New Roman", serif;
    --fuente-cuerpo:    "Inter", system-ui, -apple-system, sans-serif;
    --fuente-datos:     "JetBrains Mono", ui-monospace, "SF Mono", monospace;

    --t-display: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
    --t-hero:    clamp(1.9rem, 1.25rem + 2.4vw, 2.85rem);
    --t-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
    --t-h2:      clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem);
    --t-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    --t-lead:    clamp(1.1rem, 1.02rem + 0.45vw, 1.4rem);
    --t-cuerpo:  1.0625rem;
    --t-peque:   0.875rem;
    --t-micro:   0.75rem;

    --e-1: 0.5rem;
    --e-2: 1rem;
    --e-3: 1.5rem;
    --e-4: 2.5rem;
    --e-5: 4rem;
    --e-6: 6rem;
    --e-7: 8.5rem;

    --ancho-max:    1180px;
    --ancho-texto:  680px;
    --radio:        4px;
    --radio-lg:     10px;

    --sombra-sm: 0 1px 2px rgba(20, 38, 63, 0.06);
    --sombra-md: 0 10px 30px -12px rgba(20, 38, 63, 0.22);
    --sombra-lg: 0 30px 60px -24px rgba(20, 38, 63, 0.30);

    --trans: 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    --alto-cabecera: 64px;
}

/* ----------------------------------------------------------------------- *
 * 3. Reset y base
 * ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--fuente-cuerpo);
    font-size: var(--t-cuerpo);
    line-height: 1.7;
    color: var(--color-texto);
    background: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

a { color: var(--color-primario); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-acento); }

h1, h2, h3, h4 {
    font-family: var(--fuente-titulares);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--color-primario);
    text-wrap: balance;
}

:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection { background: var(--color-acento); color: #fff; }

/* ----------------------------------------------------------------------- *
 * 4. Layout helpers
 * ----------------------------------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: 1.5rem;
}
.contenedor--estrecho { max-width: 820px; }

.seccion { padding-block: var(--e-6); }
.seccion--alt { background: var(--color-fondo-alt); }
.seccion--tinta { background: var(--color-primario); color: var(--sobre-tinta); }
.seccion--compacta { padding-block: var(--e-5); }
.seccion--filo-sup { border-top: 1px solid var(--color-linea); }
.seccion--filo-inf { border-bottom: 1px solid var(--color-linea); }

.medida { max-width: var(--ancho-texto); }

/* Eyebrow con filete naranja (patrón de la referencia) */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--fuente-cuerpo);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 1.25rem;
}
.eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 30px;
    height: 1px;
    background: var(--color-acento);
}
.eyebrow--centro { justify-content: center; }
.seccion--tinta .eyebrow { color: var(--color-acento-claro); }
.seccion--tinta .eyebrow::before { background: var(--color-acento-claro); }

/* Encabezado de sección reutilizable */
.encabezado { max-width: 760px; margin-bottom: var(--e-4); }
.encabezado--centro { margin-inline: auto; text-align: center; }
.titulo-seccion { font-size: var(--t-h2); margin-bottom: 1rem; }
.seccion--tinta .titulo-seccion { color: #fff; }
.bajada { font-size: var(--t-lead); color: var(--color-gris); }
.seccion--tinta .bajada { color: var(--sobre-tinta-tenue); }

/* Kicker simple (compat. con páginas internas) */
.kicker {
    display: inline-block;
    font-family: var(--fuente-cuerpo);
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 1rem;
}
.seccion--tinta .kicker { color: var(--color-acento-claro); }

.filete { width: 56px; height: 3px; background: var(--color-acento); border: 0; margin: 0 0 1.5rem; }
.encabezado--centro .filete { margin-inline: auto; }

/* ----------------------------------------------------------------------- *
 * 5. Botones
 * ----------------------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.9rem 1.7rem;
    border-radius: var(--radio);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--trans), background var(--trans), color var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton--acento { background: var(--color-acento); color: #fff; border-color: var(--color-acento); box-shadow: var(--sombra-md); }
.boton--acento:hover { background: var(--color-acento-osc); border-color: var(--color-acento-osc); color: #fff; }

.boton--primario { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }
.boton--primario:hover { background: var(--color-primario-osc); border-color: var(--color-primario-osc); color: #fff; }

.boton--linea { background: transparent; color: var(--color-primario); border-color: var(--color-primario); }
.boton--linea:hover { border-color: var(--color-primario-osc); background: var(--color-primario); color: #fff; }

.boton--claro { background: #fff; color: var(--color-primario); border-color: #fff; }
.boton--claro:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }

.boton--fantasma-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.boton--fantasma-claro:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }

.boton--grande { padding: 1.05rem 2.1rem; font-size: 1.02rem; }
.boton--pleno { width: 100%; }

/* ----------------------------------------------------------------------- *
 * 6. Cabecera / navegación
 * ----------------------------------------------------------------------- */
.cabecera {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: rgba(250, 250, 247, 0.86);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.cabecera--solida {
    background: rgba(250, 250, 247, 0.97);
    border-bottom-color: var(--color-linea);
    box-shadow: var(--sombra-sm);
}
.cabecera__interior {
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding: 0 1.5rem;
    height: var(--alto-cabecera);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.cabecera__marca {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.1;
}
.cabecera__marca-nombre {
    font-family: var(--fuente-titulares);
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--color-primario);
    letter-spacing: -0.005em;
}
.cabecera__marca-sub {
    font-family: var(--fuente-cuerpo);
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-gris);
}

.nav__lista {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0;
    margin: 0;
}
.nav__enlace {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gris);
    text-decoration: none;
    padding: 0.5rem 0.42rem;
    border-radius: var(--radio);
    transition: color var(--trans), background var(--trans);
    white-space: nowrap;
}
.nav__enlace:hover { color: var(--color-primario); }
.nav__enlace--activo { color: var(--color-primario); font-weight: 700; }
.nav__enlace--activo::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--color-acento);
    margin-top: 2px;
    border-radius: 2px;
}
.nav__item--externo { margin-left: 0.2rem; }
.nav__enlace--externo { color: var(--color-gris-claro); font-size: 0.7rem; }
/* Agrupar el bloque de enlaces externos al extremo derecho (separados por pipe). */
.nav__item:not(.nav__item--externo) + .nav__item--externo { margin-left: auto; }
.nav__enlace--externo::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 13px;
    background: var(--color-linea);
    margin-right: 0.55rem;
    vertical-align: -2px;
}

.cabecera__accion { display: flex; align-items: center; gap: 0.75rem; }
.cabecera__cta {
    font-size: 0.82rem;
    padding: 0.55rem 1.1rem;
}

.nav__toggle {
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--color-linea);
    border-radius: var(--radio);
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
    content: "";
    display: block;
    width: 20px; height: 2px;
    background: var(--color-primario);
    transition: transform var(--trans), opacity var(--trans), background var(--trans);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; left: 0; }
.nav__toggle span::after  { position: absolute; top: 6px;  left: 0; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ----------------------------------------------------------------------- *
 * 7. Contenido principal
 * ----------------------------------------------------------------------- */
.contenido { padding-top: var(--alto-cabecera); }
.contenido--hero { padding-top: 0; }

/* ----------------------------------------------------------------------- *
 * 8. HERO tipográfico (el VALOR es protagonista, no el retrato)
 *    Cita Playfair como pieza absoluta; firma discreta de la fundadora.
 *    El contenido es VISIBLE SIN JS (no usa .reveal).
 * ----------------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(82vh, 760px);
    overflow: hidden;
    background: var(--color-fondo);
}
/* Comilla volada decorativa, muy tenue, como fondo editorial */
.hero::before {
    content: "“";
    position: absolute;
    top: clamp(-2rem, -1rem - 4vw, 1rem);
    left: clamp(-0.5rem, 1vw, 2rem);
    font-family: var(--fuente-titulares);
    font-size: clamp(12rem, 8rem + 22vw, 30rem);
    line-height: 1;
    color: var(--color-acento);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}
.hero__cuerpo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 4rem);
    text-align: center;
}
.hero__cita {
    margin: 0;
    border: 0;
    padding: 0;
    font-family: var(--fuente-titulares);
    font-weight: 500;
    font-size: clamp(2rem, 1.2rem + 3.4vw, 4.2rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--color-primario);
    text-wrap: balance;
}
.hero__cita .destacar { color: var(--color-acento); }
.hero__firma {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
}
.hero__firma-foto {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(20%);
    flex: none;
}
.hero__firma-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.hero__firma-nombre {
    font-family: var(--fuente-cuerpo);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-primario);
}
.hero__firma-rol {
    font-family: var(--fuente-cuerpo);
    font-size: var(--t-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gris);
}
.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* Intro de la fundación — voz activa, presente. Nombra a Gema una vez. */
.intro-fundacion__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.intro-fundacion__texto {
    margin-top: 1rem;
    font-size: var(--t-lead);
    line-height: 1.6;
    color: var(--color-texto);
    text-wrap: pretty;
}

/* Retrato de Gema en "Nuestra historia" — bloque editorial con pie narrativo. */
.retrato-historia { margin: 0; }
.retrato-historia__pie {
    margin-top: 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-gris);
}
.retrato-historia__pie strong {
    display: block;
    font-family: var(--fuente-titulares);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 0.2rem;
}

/* ----------------------------------------------------------------------- *
 * 9. STATS BAR (fondo tinta, 3 columnas con divisores)
 * ----------------------------------------------------------------------- */
.barra-stats {
    background: var(--color-primario);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.barra-stats__item {
    padding: clamp(2rem, 4vw, 2.75rem) 1.5rem;
    text-align: center;
    border-right: 1px solid var(--tinta-linea);
}
.barra-stats__item:last-child { border-right: 0; }
.barra-stats__num {
    font-family: var(--fuente-titulares);
    font-weight: 500;
    font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3rem);
    line-height: 1;
    color: #fff;
}
.barra-stats__num span { color: var(--color-acento-claro); }
.barra-stats__etq {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sobre-tinta-tenue);
}

/* ----------------------------------------------------------------------- *
 * 10. PROPÓSITO en home (dos frases largas con filete naranja)
 * ----------------------------------------------------------------------- */
.proposito-home__inner { max-width: 860px; }
.cita-proposito {
    margin: 0;
    border-left: 3px solid var(--color-acento);
    padding-left: clamp(1.25rem, 3vw, 2rem);
    font-family: var(--fuente-titulares);
    font-weight: 400;
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem);
    line-height: 1.6;
    color: var(--color-primario);
}
.cita-proposito + .cita-proposito { margin-top: 2.75rem; }
.cita-proposito__autor {
    display: block;
    margin-top: 0.85rem;
    margin-left: clamp(1.25rem, 3vw, 2rem);
    font-family: var(--fuente-cuerpo);
    font-size: 0.82rem;
    font-style: normal;
    color: var(--color-gris);
}

/* ----------------------------------------------------------------------- *
 * 11. CALCULADORA FISCAL (fondo tinta; slider + select)
 * ----------------------------------------------------------------------- */
.calc { color: var(--sobre-tinta); }
.calc__rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    max-width: 1000px;
    margin-inline: auto;
}
.calc__intro .titulo-seccion { color: #fff; }
.calc__explica { margin-top: 1.5rem; padding: 0; }
.calc__explica li {
    list-style: none;
    padding-left: 1.6rem;
    position: relative;
    margin-bottom: 0.85rem;
    color: var(--sobre-tinta);
    font-size: 0.96rem;
}
.calc__explica li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 8px; height: 8px;
    background: var(--color-acento);
    border-radius: 50%;
}
.calc__explica strong { color: #fff; }
.calc__formula {
    margin-top: 1.75rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--tinta-linea);
    border-radius: var(--radio);
    font-family: var(--fuente-datos);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--sobre-tinta-tenue);
}
.calc__formula strong { color: var(--color-acento-claro); font-weight: 700; }

/* Panel interactivo */
.calc__panel {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radio-lg);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}
.calc__campo { margin-bottom: 1.6rem; }
.calc__campo-etq {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sobre-tinta-debil);
    margin-bottom: 0.7rem;
}

/* Slider */
.calc__slider-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.calc__slider-val { font-family: var(--fuente-datos); font-weight: 700; font-size: 1.15rem; color: #fff; }
.calc__slider-pista { position: relative; height: 24px; display: flex; align-items: center; }
.calc__slider-fondo {
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.14);
    pointer-events: none;
}
.calc__slider-fill {
    position: absolute;
    left: 0;
    height: 4px;
    width: 50%;
    border-radius: 2px;
    background: var(--color-acento);
    pointer-events: none;
}
.calc__slider {
    position: relative;
    width: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--color-acento);
    cursor: pointer;
    z-index: 1;
}
.calc__slider::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.calc__slider::-moz-range-track { height: 4px; background: transparent; }
.calc__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--color-acento);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    cursor: pointer;
}
.calc__slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-acento);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    cursor: pointer;
}
.calc__slider:focus-visible { outline: none; }
.calc__slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(232,96,10,0.4); }
.calc__slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(232,96,10,0.4); }

.calc__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.calc__chip {
    font-family: var(--fuente-cuerpo);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sobre-tinta);
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--tinta-linea);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    cursor: pointer;
    transition: background var(--trans);
}
.calc__chip:hover { background: rgba(255,255,255,0.16); }

/* Select de tipo */
.calc__select {
    width: 100%;
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: #fff;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radio);
    padding: 0.7rem 0.85rem;
    cursor: pointer;
}
.calc__select option { color: #1A1A1A; }

/* Resultado */
.calc__resultado {
    border-top: 1px solid var(--tinta-linea);
    margin-top: 0.5rem;
    padding-top: 1.5rem;
}
.calc__fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.calc__fila-etq { font-size: 0.9rem; color: var(--sobre-tinta-tenue); }
.calc__fila--destacada { align-items: baseline; }
.calc__fila--destacada .calc__fila-etq { color: rgba(255,255,255,0.7); }
.calc__desgrava { font-family: var(--fuente-datos); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--color-acento-claro); }
.calc__coste { font-family: var(--fuente-datos); font-weight: 700; font-size: 1.3rem; color: #fff; }
.calc__mes { font-family: var(--fuente-datos); font-size: 0.95rem; color: var(--sobre-tinta-tenue); }
.calc__nota-legal { margin-top: 1.1rem; font-size: 0.72rem; color: var(--sobre-tinta-debil); line-height: 1.55; }
.calc__cta { margin-top: 1.3rem; }

/* ----------------------------------------------------------------------- *
 * 12. BLOQUE 300 (momento emocional central)
 * ----------------------------------------------------------------------- */
.bloque300 { text-align: center; }
.bloque300__inner { max-width: 720px; margin-inline: auto; }
.bloque300__cifra {
    font-family: var(--fuente-titulares);
    font-weight: 400;
    font-size: clamp(4.5rem, 2.5rem + 9vw, 7.5rem);
    line-height: 1;
    color: var(--color-primario);
    letter-spacing: -0.02em;
}
.bloque300__cifra span { color: var(--color-acento); }
.bloque300__cita {
    font-family: var(--fuente-titulares);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.5rem);
    line-height: 1.55;
    color: var(--color-primario);
    margin: 1.5rem auto 0.85rem;
    max-width: 620px;
}
.bloque300__autor { font-size: 0.82rem; color: var(--color-gris); margin-bottom: 2rem; }
.bloque300__sub { font-size: 0.98rem; color: var(--color-gris); line-height: 1.75; max-width: 540px; margin: 0 auto 2rem; }
.bloque300__sub strong { color: var(--color-primario); font-weight: 600; }

/* ----------------------------------------------------------------------- *
 * 13. NOTICIAS en tarjetas (barra superior naranja)
 * ----------------------------------------------------------------------- */
.noticias-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2.25rem;
}
.noticias-cabecera .titulo-seccion { margin-bottom: 0; }
.noticias-ver { font-size: 0.9rem; font-weight: 600; color: var(--color-acento); text-decoration: none; white-space: nowrap; }
.noticias-ver:hover { text-decoration: underline; }

.tarjetas-noticia {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tarjeta-noticia {
    background: #fff;
    border: 1px solid var(--color-linea);
    border-radius: var(--radio-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.tarjeta-noticia:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: transparent; }
.tarjeta-noticia__barra { height: 4px; background: var(--color-acento); }
.tarjeta-noticia__cuerpo { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; height: 100%; }
.tarjeta-noticia__cat {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-acento);
    margin-bottom: 0.7rem;
}
.tarjeta-noticia__titulo {
    font-family: var(--fuente-titulares);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}
.tarjeta-noticia__titulo a { color: var(--color-primario); text-decoration: none; }
.tarjeta-noticia__titulo a:hover { color: var(--color-acento); }
.tarjeta-noticia__meta {
    margin-top: auto;
    font-family: var(--fuente-datos);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--color-gris);
}

/* ----------------------------------------------------------------------- *
 * 14. Tipografía de cuerpo y prosa (páginas internas)
 * ----------------------------------------------------------------------- */
.prosa { max-width: var(--ancho-texto); }
.prosa p { margin-bottom: 1.4rem; color: var(--color-texto); }
.prosa p:last-child { margin-bottom: 0; }
.prosa h2 { font-size: var(--t-h2); margin: 2.5rem 0 1rem; }
.prosa h3 { font-size: var(--t-h3); margin: 2rem 0 0.75rem; }
.prosa ul, .prosa ol { margin: 0 0 1.4rem 1.25rem; }
.prosa li { margin-bottom: 0.5rem; }
.prosa a { color: var(--color-acento); }

.titulo-pagina { font-size: var(--t-h1); margin-bottom: 1rem; }

/* Manifiesto / ideario (Propósito) */
.manifiesto { border-left: 3px solid var(--color-acento); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.manifiesto__cita {
    font-family: var(--fuente-titulares);
    font-weight: 500;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
    line-height: 1.3;
    color: var(--color-primario);
    margin-bottom: 1.5rem;
}
.manifiesto--claro .manifiesto__cita { color: #fff; }
.manifiesto--claro .manifiesto__autor { color: var(--color-acento-claro); }
.manifiesto__autor {
    display: block;
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    font-weight: 600;
    font-style: normal;
    color: var(--color-acento);
    margin-top: 1rem;
}
.cita-fuerte {
    font-family: var(--fuente-titulares);
    font-weight: 500;
    font-size: var(--t-h3);
    line-height: 1.35;
    color: var(--color-primario);
}

/* ----------------------------------------------------------------------- *
 * 15. Bloques de dos columnas (historia, libro)
 * ----------------------------------------------------------------------- */
.duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.duo--inverso .duo__media { order: 2; }
.duo__media-marco {
    border-radius: var(--radio-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--color-fondo-alt);
    box-shadow: var(--sombra-md);
}
.duo__media-marco img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------------- *
 * 16. Tarjetas / rejillas genéricas
 * ----------------------------------------------------------------------- */
.rejilla {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.tarjeta {
    background: #fff;
    border: 1px solid var(--color-linea);
    border-radius: var(--radio-lg);
    padding: 1.9rem;
    transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: transparent; }
.tarjeta__icono { width: 46px; height: 46px; color: var(--color-acento); margin-bottom: 1.1rem; }
.tarjeta__icono svg { width: 100%; height: 100%; }
.tarjeta__titulo { font-size: var(--t-h3); margin-bottom: 0.6rem; }
.tarjeta__texto { color: var(--color-gris); font-size: 0.98rem; }
.tarjeta__enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.1rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-acento);
    text-decoration: none;
}
.tarjeta__enlace:hover { gap: 0.6rem; }

/* Stats (páginas internas) */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { text-align: center; }
.stat__num {
    display: block;
    font-family: var(--fuente-datos);
    font-weight: 700;
    font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
    line-height: 1;
    color: var(--color-primario);
}
.seccion--tinta .stat__num { color: #fff; }
.stat__etq { display: block; margin-top: 0.6rem; font-size: 0.9rem; color: var(--color-gris); letter-spacing: 0.02em; }
.seccion--tinta .stat__etq { color: var(--sobre-tinta-tenue); }

/* Placeholder de contenido pendiente */
.placeholder {
    border: 1px dashed var(--color-gris-claro);
    border-radius: var(--radio-lg);
    background: var(--color-fondo-alt);
    padding: 1.5rem 1.75rem;
    color: var(--color-gris);
    font-size: 0.95rem;
}
.placeholder__etq {
    display: inline-block;
    font-family: var(--fuente-datos);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-acento);
    background: rgba(232, 96, 10, 0.10);
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    margin-bottom: 0.6rem;
}

/* ----------------------------------------------------------------------- *
 * 17. FAQs (acordeón nativo <details>)
 * ----------------------------------------------------------------------- */
.faq { border-bottom: 1px solid var(--color-linea); }
.faq > summary {
    list-style: none;
    cursor: pointer;
    padding: 1.4rem 2.5rem 1.4rem 0;
    position: relative;
    font-family: var(--fuente-titulares);
    font-weight: 600;
    font-size: var(--t-h3);
    color: var(--color-primario);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
    content: "+";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-family: var(--fuente-cuerpo);
    font-weight: 400;
    font-size: 1.8rem;
    color: var(--color-acento);
    transition: transform var(--trans);
    line-height: 1;
}
.faq[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__respuesta { padding: 0 0 1.5rem; color: var(--color-gris); max-width: var(--ancho-texto); }

/* ----------------------------------------------------------------------- *
 * 18. Noticias (listado/detalle páginas internas)
 * ----------------------------------------------------------------------- */
.lista-noticias { list-style: none; padding: 0; margin: 0; }
.noticia { border-bottom: 1px solid var(--color-linea); padding: 2rem 0; }
.noticia:first-child { padding-top: 0; }
.noticia__fecha {
    font-family: var(--fuente-datos);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--color-acento);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.noticia__titulo { font-size: var(--t-h3); margin-bottom: 0.5rem; }
.noticia__titulo a { color: var(--color-primario); text-decoration: none; }
.noticia__titulo a:hover { color: var(--color-acento); }
.noticia__resumen { color: var(--color-gris); max-width: var(--ancho-texto); }
.noticia-detalle { max-width: var(--ancho-texto); }
.noticia-detalle .noticia__cuerpo { margin-top: 1.5rem; }
.noticia-detalle .noticia__cuerpo p { margin-bottom: 1.3rem; }
.volver {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    color: var(--color-acento);
}

/* ----------------------------------------------------------------------- *
 * 19. Formulario de contacto
 * ----------------------------------------------------------------------- */
.contacto__rejilla {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.contacto__dato { margin-bottom: 1.5rem; }
.contacto__dato-etq { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gris); margin-bottom: 0.25rem; }
.contacto__dato a { color: var(--color-primario); font-weight: 600; text-decoration: none; }
.contacto__dato a:hover { color: var(--color-acento); }

.formulario {
    background: #fff;
    border: 1px solid var(--color-linea);
    border-radius: var(--radio-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--sombra-sm);
}
.campo { margin-bottom: 1.25rem; }
.campo__etiqueta { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-texto); }
.campo__control {
    width: 100%;
    font-family: var(--fuente-cuerpo);
    font-size: 1rem;
    color: var(--color-texto);
    background: var(--color-fondo);
    border: 1.5px solid var(--color-linea);
    border-radius: var(--radio);
    padding: 0.8rem 0.95rem;
    transition: border-color var(--trans), box-shadow var(--trans);
}
.campo__control:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(28, 53, 87, 0.12);
}
textarea.campo__control { resize: vertical; min-height: 140px; }

.aviso {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radio);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}
.aviso--ok    { background: #E7F6EC; color: #0a7a2f; border: 1px solid #b6e2c4; }
.aviso--error { background: #FBE9EC; color: #b00020; border: 1px solid #f3c2cc; }

/* ----------------------------------------------------------------------- *
 * 20. CTA banda final
 * ----------------------------------------------------------------------- */
.cta-banda { text-align: center; }
.cta-banda h2 { font-size: var(--t-h1); color: #fff; margin-bottom: 1rem; }
.cta-banda p { color: var(--sobre-tinta); max-width: 560px; margin: 0 auto 2rem; font-size: var(--t-lead); }
.cta-banda__acciones { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------------- *
 * 21. Pie
 * ----------------------------------------------------------------------- */
.pie {
    background: var(--color-primario);
    color: var(--sobre-tinta-tenue);
    padding-block: var(--e-5) var(--e-3);
}
.pie__interior { max-width: var(--ancho-max); margin-inline: auto; padding-inline: 1.5rem; }
.pie__rejilla {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--tinta-linea);
}
.pie__marca { font-family: var(--fuente-titulares); font-weight: 700; font-size: 1.2rem; color: #fff; margin-bottom: 0.3rem; }
.pie__memoria { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--color-acento-claro); margin-bottom: 0.9rem; }
.pie__lema { font-size: 0.9rem; max-width: 340px; }
.pie__col h3 { font-family: var(--fuente-cuerpo); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1rem; }
.pie__lista { list-style: none; padding: 0; margin: 0; }
.pie__lista li { margin-bottom: 0.55rem; }
.pie__enlace { color: var(--sobre-tinta-tenue); text-decoration: none; font-size: 0.9rem; }
.pie__enlace:hover { color: #fff; }
.pie__abajo {
    padding-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--sobre-tinta-debil);
    line-height: 1.7;
}
.pie__abajo p { margin: 0; }

/* ----------------------------------------------------------------------- *
 * 22. Reveal animations (nunca aplicar al hero)
 * ----------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal--d1.visible { transition-delay: 0.1s; }
.reveal--d2.visible { transition-delay: 0.2s; }
.reveal--d3.visible { transition-delay: 0.3s; }
/* Sin JS: mostrar todo (fallback de seguridad) */
html:not([data-js="ready"]) .reveal { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------- *
 * 23. Responsive
 * ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .calc__rejilla { gap: 2.5rem; }
    .contacto__rejilla { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    :root { --e-6: 4.5rem; --e-5: 3rem; }

    /* Nav móvil */
    .nav {
        position: fixed;
        inset: var(--alto-cabecera) 0 auto 0;
        background: var(--color-fondo);
        border-bottom: 1px solid var(--color-linea);
        box-shadow: var(--sombra-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--trans);
    }
    .nav[data-abierto="true"] { max-height: 85vh; overflow-y: auto; }
    .nav__lista { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.5rem 1.25rem; }
    .nav__enlace { padding: 0.85rem 0; border-bottom: 1px solid var(--color-linea); }
    .nav__enlace--activo::after { display: none; }
    .nav__item--externo { margin-left: 0; }
    .nav__enlace--externo::before { display: none; }
    .nav__toggle { display: inline-flex; }
    .cabecera__cta { display: none; }

    /* Hero tipográfico: menos alto en pantallas medias */
    .hero { min-height: 0; }

    .barra-stats { grid-template-columns: 1fr; }
    .barra-stats__item { border-right: 0; border-bottom: 1px solid var(--tinta-linea); }
    .barra-stats__item:last-child { border-bottom: 0; }

    .calc__rejilla { grid-template-columns: 1fr; align-items: start; }
    .duo { grid-template-columns: 1fr; }
    .duo--inverso .duo__media { order: 0; }
    .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .contenedor { padding-inline: 1.25rem; }
    .hero__acciones .boton,
    .cta-banda__acciones .boton { width: 100%; }
    .noticias-cabecera { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .pie__rejilla { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ----------------------------------------------------------------------- *
 * 24. Saltar al contenido (accesibilidad)
 * ----------------------------------------------------------------------- */
.saltar-contenido { position: absolute; left: -9999px; top: 0; z-index: 2000; }
.saltar-contenido:focus {
    left: 0.75rem;
    top: 0.75rem;
    background: var(--color-primario);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: var(--radio);
}

/* ----------------------------------------------------------------------- *
 * 25. Movimiento reducido
 * ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
 * 23. Migración de contenido — línea de tiempo (Historia),
 *     ficha y voces (Libro). Tokens existentes, cero inline.
 * ============================================================ */

/* --- Línea de tiempo (Nuestra historia) --- */
.linea-tiempo {
    list-style: none;
    margin: var(--e-4) 0 0;
    padding: 0;
    position: relative;
}
.linea-tiempo::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 7.5rem;
    width: 1px;
    background: var(--color-linea);
}
.hito {
    position: relative;
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    column-gap: var(--e-4);
    padding-bottom: var(--e-4);
}
.hito:last-child { padding-bottom: 0; }
.hito__anio {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-family: var(--fuente-datos);
    font-size: var(--t-peque);
    font-weight: 500;
    color: var(--color-acento-osc);
    letter-spacing: 0.02em;
    text-align: right;
    padding-top: 0.2rem;
}
.hito::before {
    content: "";
    position: absolute;
    left: 7.5rem;
    top: 0.55rem;
    width: 9px;
    height: 9px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--color-acento);
    box-shadow: 0 0 0 4px var(--color-fondo-alt);
}
.hito__titulo {
    grid-column: 2;
    font-family: var(--fuente-titulares);
    font-size: var(--t-h3);
    font-weight: 600;
    color: var(--color-primario);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}
.hito__texto {
    grid-column: 2;
    margin: 0;
    color: var(--color-texto);
    max-width: var(--ancho-texto);
}
.hito__texto a { color: var(--color-acento); }
.hito--cierre .hito__titulo { color: var(--color-acento-osc); }

/* --- Libro: ficha de datos + formatos + voces --- */
.ficha-libro {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin: var(--e-3) 0;
    padding: var(--e-2) 0;
    border-top: 1px solid var(--color-linea);
    border-bottom: 1px solid var(--color-linea);
}
.ficha-libro li { display: flex; flex-direction: column; }
.ficha-libro__dato {
    font-family: var(--fuente-datos);
    font-size: 1.25rem;
    color: var(--color-primario);
}
.ficha-libro__etq {
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-gris);
}
.libro__formatos { font-size: var(--t-peque); color: var(--color-gris); }

.voces {
    list-style: none;
    margin: var(--e-4) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--e-3);
}
.voz {
    background: var(--color-blanco);
    border: 1px solid var(--color-linea);
    border-top: 3px solid var(--color-acento);
    border-radius: var(--radio);
    padding: var(--e-3);
}
.voz__pregunta {
    font-family: var(--fuente-titulares);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--color-primario);
    margin: 0 0 var(--e-2);
}
.voz__nombre {
    font-weight: 600;
    color: var(--color-texto);
    margin: 0 0 0.35rem;
}
.voz__bio { font-size: var(--t-peque); color: var(--color-gris); margin: 0; }

@media (max-width: 520px) {
    .linea-tiempo::before { left: 0; }
    .hito {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
        padding-left: var(--e-3);
    }
    .hito__anio { grid-column: auto; grid-row: auto; text-align: left; }
    .hito__titulo, .hito__texto { grid-column: auto; }
    .hito::before { left: 0; top: 0.45rem; }
}



/* ============================================================
 * 24. Retoques home: enlace "¿Cómo se calcula?", desglose,
 *     modal de condiciones y animación de entrada del hero.
 * ============================================================ */

/* --- Enlace "¿Cómo se calcula?" (sobre tinta) --- */
.calc__mas { margin: 0.9rem 0 0.2rem; }
.calc__ayuda {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: var(--t-peque);
    color: var(--color-acento-claro);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.calc__ayuda:hover { color: #fff; }
.calc__ayuda:focus-visible { outline: 2px solid var(--color-acento-claro); outline-offset: 3px; }

/* --- Desglose paso a paso (sobre tinta) --- */
.calc__desglose { margin-top: 0.75rem; }
.calc__desglose-toggle {
    cursor: pointer;
    color: var(--sobre-tinta-tenue);
    font-size: var(--t-peque);
    letter-spacing: 0.02em;
    list-style: none;
}
.calc__desglose-toggle::-webkit-details-marker { display: none; }
.calc__desglose-toggle::before { content: "▸ "; color: var(--color-acento-claro); }
.calc__desglose[open] .calc__desglose-toggle::before { content: "▾ "; }
.calc__desglose-toggle:focus-visible { outline: 2px solid var(--color-acento-claro); outline-offset: 2px; }
.calc__pasos {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.9rem 1.1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--tinta-linea);
    border-radius: var(--radio);
    font-family: var(--fuente-datos);
    font-size: var(--t-peque);
}
.calc__paso { color: var(--sobre-tinta); padding: 0.18rem 0; }
.calc__paso--total {
    border-top: 1px solid var(--tinta-linea);
    margin-top: 0.4rem;
    padding-top: 0.5rem;
    color: var(--color-acento-claro);
}

/* --- Modal de condiciones (<dialog> nativo, tarjeta clara) --- */
.modal {
    border: 0;
    padding: 0;
    width: min(560px, calc(100% - 2rem));
    max-height: calc(100vh - 4rem);
    background: var(--color-blanco);
    color: var(--color-texto);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
    overflow: auto;
}
.modal::backdrop { background: rgba(20,38,63,0.55); }
.modal__caja { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); }
.modal__cerrar {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-gris);
    cursor: pointer;
    border-radius: 50%;
}
.modal__cerrar:hover { background: var(--color-fondo-alt); color: var(--color-texto); }
.modal__cerrar:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.modal__titulo { font-family: var(--fuente-titulares); font-size: var(--t-h3); color: var(--color-primario); margin: 0 2rem 1rem 0; }
.modal__sub {
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-acento-osc);
    margin: 1.4rem 0 0.5rem;
}
.modal__lista { margin: 0; padding-left: 1.1rem; }
.modal__lista li { margin-bottom: 0.4rem; color: var(--color-texto); font-size: var(--t-peque); line-height: 1.5; }

/* --- 8. Animación de entrada del hero (CSS puro, sin JS) --- */
/* Solo cuando el usuario no pide reducir movimiento: el estado base ya es
 * visible (el hero NUNCA depende de JS), así que reduced-motion = sin animación. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes heroEntrada {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }
    .hero__cita     { animation: heroEntrada 0.9s cubic-bezier(0.22,0.61,0.36,1) both; }
    .hero__firma    { animation: heroEntrada 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.18s both; }
    .hero__acciones { animation: heroEntrada 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.34s both; }
}



/* ============================================================
 * 25. Imágenes de noticias (cards 16:9, listado, detalle) +
 *     embed DonorBox (style inline del snippet movido a clase).
 * ============================================================ */

/* --- Card home: imagen 16:9 recortada --- */
.tarjeta-noticia__media {
    display: block;
    height: 200px;
    overflow: hidden;
    background: var(--color-fondo-alt);
}
.tarjeta-noticia__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--trans);
}
.tarjeta-noticia:hover .tarjeta-noticia__media img { transform: scale(1.04); }

/* --- Listado /noticias: miniatura + texto --- */
.noticia-fila { display: grid; grid-template-columns: 200px 1fr; gap: var(--e-3); align-items: start; }
.noticia-fila__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radio);
    background: var(--color-fondo-alt);
}
.noticia-fila__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) {
    .noticia-fila { grid-template-columns: 1fr; }
    .noticia-fila__media { max-width: 100%; }
}

/* --- Detalle de noticia: imagen de cabecera --- */
.noticia-detalle__media {
    margin: var(--e-3) 0 var(--e-4);
    border-radius: var(--radio-lg);
    overflow: hidden;
    background: var(--color-fondo-alt);
}
.noticia-detalle__media img { width: 100%; height: auto; display: block; }

/* --- Embed DonorBox (el style= inline del snippet de prod va aquí). El iframe lo crea app.js al pulsar «Donar». --- */
.donorbox-wrap { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.donorbox-aviso, .donorbox-reserva { margin: 0; max-width: 34rem; font-size: 0.95rem; }
.donorbox-reserva a { color: var(--color-primario); }
.donorbox-wrap .boton[hidden] { display: none; }   /* sin JS el botón no haría nada: queda el enlace */
.donorbox-embed {
    width: 100%;
    max-width: 500px;
    min-width: 310px;
    height: 90vh;            /* el alto vive aquí, no en el iframe: el formulario completo es más alto que 900 px */
    min-height: 680px;
    max-height: 1200px;
    border: 0;
    background: var(--color-blanco);
    border-radius: var(--radio);
    scroll-margin-top: calc(var(--alto-cabecera) + 0.5rem);   /* scrollIntoView no lo tapa la cabecera fija */
}
@media (max-width: 600px) {
    .donorbox-embed { height: 92vh; min-height: 640px; }
}







/* Formulario de contacto: campo trampa (fuera de la vista, también para lectores de pantalla) y casilla. */
.campo--trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.campo--casilla { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; }
.campo--casilla input { margin-top: 0.2rem; }
.campo--casilla a { color: var(--color-primario); }