/* ═══════════════════════════════════════════════
   HISTORIA — cabecera, hero y epígrafe
   ═══════════════════════════════════════════════ */

.historia-page {
    width: 100%;
}

/* Cabecera de página — espacio reservado (antes: fila breadcrumb + gap) */
.historia-layout-grid {
    padding-top: var(--page-header-offset);
    row-gap: 0;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .historia-layout-grid .historia-titulo-pagina {
        grid-row: 1;
        grid-column: 1 / -1;
        margin-bottom: 1.5rem;
    }

    .historia-hero-text-wrap .historia-hero-headline {
        grid-column: 1 / -1;
    }

    .historia-epigrafe-wrap .historia-hero-epigrafe {
        grid-column: 7 / -1;
    }
}

@media (min-width: 1280px) {
    .historia-layout-grid .historia-titulo-pagina {
        grid-row: 1;
        grid-column: 2 / -1;
        margin-bottom: 1.5rem;
    }
}

.historia-titulo-pagina {
    font-family: var(--serif);
    font-size: 60px;
    font-weight: 400;
    line-height: 1;
    font-variant-caps: small-caps;
    font-feature-settings: "smcp" 1;
    letter-spacing: 0.0005em;
    text-transform: none;
    color: var(--color-historia);
    margin: 0;
}

/* Hero — ancho completo del viewport */
.historia-hero {
    margin: 0;
    padding: 0;
    width: 100%;
    border: none;
}

.historia-hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-historia);
}

.historia-hero[data-historia-hero] {
    --hero-fade-duration: 0.45s;
}

.historia-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 1;
    transition: opacity var(--hero-fade-duration) ease;
}

.historia-hero-img.is-faded {
    opacity: 0;
}

.historia-hero__audio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.historia-hero-toggle {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.historia-hero-toggle:focus {
    outline: none;
}

.historia-hero-toggle:focus-visible .historia-hero-toggle__face {
    opacity: 1;
    box-shadow: 0 0 0 3px var(--white), 0 0 0 6px rgba(0, 0, 0, 0.45);
}

.historia-hero-toggle__face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.15s ease;
}

.historia-hero-toggle:active .historia-hero-toggle__face {
    transform: scale(0.94);
}

.historia-hero-toggle__icon {
    display: block;
}

.historia-hero-toggle__icon--play {
    width: 0;
    height: 0;
    margin-left: 5px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--white);
}

.historia-hero-toggle__icon--pause {
    display: none;
    width: 18px;
    height: 22px;
    background: linear-gradient(to right,
        var(--white) 0, var(--white) 5px,
        transparent 5px, transparent 13px,
        var(--white) 13px, var(--white) 18px);
}

.historia-hero.is-playing .historia-hero-toggle__icon--play {
    display: none;
}

.historia-hero.is-playing .historia-hero-toggle__icon--pause {
    display: block;
}

.historia-hero.is-paused .historia-hero-toggle__icon--play {
    display: block;
}

.historia-hero.is-paused .historia-hero-toggle__icon--pause {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .historia-hero-media:hover .historia-hero-toggle__face {
        opacity: 1;
    }

    .historia-hero.needs-user-gesture .historia-hero-toggle__face {
        opacity: 0.85;
    }
}

@media (hover: none), (pointer: coarse) {
    .historia-hero-toggle__face {
        opacity: 0.8;
    }
}

.historia-hero-text-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.historia-hero-text-wrap .grid-container {
    width: 100%;
}

.historia-hero-headline {
    font-family: var(--serif);
    font-size: 60px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
    text-align: left;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    opacity: 1;
    transition: opacity var(--hero-fade-duration) ease;
}

.historia-hero-headline.is-faded {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .historia-hero[data-historia-hero] {
        --hero-fade-duration: 0.1ms;
    }
}

.historia-epigrafe-wrap {
    padding-top: 0.75rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 1280px) {
    .historia-hero-epigrafe {
        grid-column: 7 / -1;
    }
}

.historia-hero-epigrafe {
    font-family: var(--serif-it);
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--texto);
    text-align: left;
    margin: 0;
}

@media (max-width: 1023px) {
    .historia-titulo-pagina {
        font-size: clamp(2.5rem, 10vw, 60px);
    }

    .historia-hero-headline {
        font-size: clamp(2rem, 8vw, 60px);
    }
}

@media (max-width: 767px) {
    .historia-titulo-pagina {
        margin-bottom: 1.25rem;
    }
}

/* ── Secciones inferiores (pendientes de rediseño) ── */

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 60px 5%;
}

.column-text {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Sección intro — grilla 12 cols @ 1280
   Título: col 2 · Lead itálica: col 3 × 4 · Col derecha: col 7 × 4 · Ancho: col 3 × 8 */
.intro-relato {
    width: 100%;
    padding-block: 3rem;
}

.intro-relato-grid {
    row-gap: 24px;
    color: var(--grey-60);
}

.intro-relato-titulo {
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: start;
    padding-block: 24px;
    background: var(--fondo);
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.intro-relato-lead {
    font-family: var(--serif-it);
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    margin: 0;
}

.intro-relato-col,
.intro-relato-ancho {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 1280px) {
    .intro-relato-grid .intro-relato-titulo {
        grid-column: 2 / -1;
    }

    .intro-relato-grid .intro-relato-lead {
        grid-column: 3 / 7;
    }

    .intro-relato-grid .intro-relato-col {
        grid-column: 7 / 11;
    }

    .intro-relato-grid .intro-relato-ancho {
        grid-column: 3 / 11;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .intro-relato-grid .intro-relato-titulo {
        grid-column: 1 / -1;
    }

    .intro-relato-grid .intro-relato-lead {
        grid-column: 2 / 7;
    }

    .intro-relato-grid .intro-relato-col {
        grid-column: 7 / 12;
    }

    .intro-relato-grid .intro-relato-ancho {
        grid-column: 2 / 12;
    }
}

@media (max-width: 1023px) {
    .intro-relato-grid > * {
        grid-column: 1 / -1;
    }

    .intro-relato-titulo {
        font-size: clamp(1.75rem, 5vw, 40px);
    }

    .intro-relato-lead {
        font-size: clamp(1.25rem, 4vw, 28px);
    }
}

/* Textos aniversarios — grilla 2×2, 8 cols desde col 3 @ 1280 */
.textos-aniversarios {
    width: 100%;
    padding-block: 3rem;
}

.textos-aniversarios-grid {
    row-gap: 24px;
}

.textos-aniversarios-titulo {
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: start;
    padding-block: 24px;
    background: var(--fondo);
    margin: 0;
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--grey-60);
}

.textos-aniversarios-boxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-left: 1px solid var(--grey-40);
    border-top: 1px solid var(--grey-40);
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .textos-aniversarios-titulo {
        grid-column: 1 / -1;
    }

    .textos-aniversarios-boxes {
        grid-column: 2 / 12;
    }
}

@media (min-width: 1280px) {
    .textos-aniversarios-titulo {
        grid-column: 2 / -1;
    }

    .textos-aniversarios-boxes {
        grid-column: 3 / 11;
    }
}

@media (max-width: 1023px) {
    .textos-aniversarios-grid > * {
        grid-column: 1 / -1;
    }

    .textos-aniversarios-titulo {
        font-size: clamp(1.75rem, 5vw, 40px);
    }
}

@media (max-width: 767px) {
    .textos-aniversarios-boxes {
        grid-template-columns: 1fr;
    }
}

/* Registro audiovisual — fondo grey-60, título col 2, cuerpo col 3×8 */
.registro-audiovisual {
    width: 100%;
    padding-block: 3rem;
    background: var(--grey-60);
    color: var(--grey-0);
}

.registro-audiovisual-grid {
    row-gap: 24px;
}

.registro-audiovisual-titulo {
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: start;
    padding-block: 24px;
    background: var(--grey-60);
    margin: 0;
    font-family: var(--serif);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--grey-0);
}

.registro-audiovisual-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.registro-audiovisual-bajada {
    margin: 0 0 40px;
    font-family: var(--serif-it);
    font-size: 28px;
    font-style: italic;
    font-weight: 300;
    line-height: 36px;
    color: var(--grey-0);
}

.registro-audiovisual-audios {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-bottom: 40px;
}

.registro-audiovisual-audios .audio-bar {
    width: 100%;
}

.registro-audiovisual .video-block {
    width: 100%;
}

.registro-audiovisual .video-block__embed,
.registro-audiovisual .video-block__placeholder {
    aspect-ratio: 760 / 440;
}

.registro-audiovisual .video-block__placeholder {
    background: var(--grey-40);
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .registro-audiovisual-titulo {
        grid-column: 1 / -1;
    }

    .registro-audiovisual-body {
        grid-column: 2 / 12;
    }
}

@media (min-width: 1280px) {
    .registro-audiovisual-titulo {
        grid-column: 2 / -1;
    }

    .registro-audiovisual-body {
        grid-column: 3 / 11;
    }
}

@media (max-width: 1023px) {
    .registro-audiovisual-grid > * {
        grid-column: 1 / -1;
    }

    .registro-audiovisual-titulo {
        font-size: clamp(1.75rem, 5vw, 40px);
    }

    .registro-audiovisual-bajada {
        font-size: clamp(1.25rem, 4vw, 28px);
        line-height: 1.35;
    }
}

/* Línea de tiempo — estado vacío alineado con buscador (@1024+) */
@media (min-width: 1024px) {
    .historia-page .archivo-lista-scroll > .archivo-vacio {
        padding: 40px 0 0 calc(var(--archivo-page-col) + var(--grid-gutter));
        box-sizing: border-box;
    }
}

/* --- Fichas Técnicas --- */
.ficha-tecnica {
    border-left: 2px solid #ddd;
    padding-left: 15px;
    margin: 20px 0;
    background: #ff0;
}