/* =========================================================
   Atmarjonilla — portada pública
   Papel, tinta y telón. Sin librerías, sin fuentes externas:
   todo el peso de la página son las fotografías.
   ========================================================= */

/* --- Tipografía propia ----------------------------------------------
   Dos variables alojadas aquí mismo: ninguna petición a terceros y el
   mismo carácter en Windows, Android o macOS. Antes se dependía de una
   pila del sistema y la web se veía distinta en cada equipo.
   Sólo el subconjunto latino: cubre el español entero. */

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-latin.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-latin.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Papel y tinta */
    --paper: #f3f0e9;
    --paper-warm: #ebe6dc;
    --paper-deep: #e2dcd0;
    --ink: #16151c;
    --ink-soft: #4a4750;
    --ink-faint: #85818c;

    /* Telón */
    --curtain: #a8362a;
    --curtain-dark: #7f271e;
    --brass: #b8892f;

    /* Escenario a oscuras */
    --stage: #12111a;
    --stage-soft: #1c1a24;

    --rule: rgba(22, 21, 28, 0.14);
    --rule-strong: rgba(22, 21, 28, 0.3);

    /* Tipografía: Fraunces para lo que se lee de lejos, Manrope para lo
       que se lee de cerca. Detrás, la pila del sistema por si la fuente
       tarda o falla. */
    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
        "Book Antiqua", Georgia, "Times New Roman", serif;
    --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --shell: 74rem;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);

    --step: clamp(4rem, 9vw, 8.5rem);
}

/* --- Reset acotado -------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
iframe {
    max-width: 100%;
    display: block;
}

img {
    height: auto;
}

a {
    color: inherit;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--curtain);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1.25rem;
    z-index: 999;
}

.skip-link:focus {
    left: 0;
}

/* --- Estructura ----------------------------------------------------- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.eyebrow {
    font-family: var(--font-text);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--curtain);
    margin: 0;
}

/* --- Cabecera ------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.site-header.is-stuck {
    border-bottom-color: var(--rule);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 4.5rem;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

.wordmark__mark {
    width: 0.85rem;
    height: 1.35rem;
    background: var(--curtain);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
    flex: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2rem);
    font-size: 0.9rem;
}

.site-nav a {
    text-decoration: none;
    color: var(--ink-soft);
    padding-block: 0.35rem;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--curtain);
}

.site-nav__member {
    color: var(--ink) !important;
    font-weight: 600;
}

@media (max-width: 46rem) {
    .site-nav a:not(.site-nav__member) {
        display: none;
    }
}

/* --- Hero ----------------------------------------------------------- */

.hero {
    position: relative;
    min-height: min(92vh, 54rem);
    display: grid;
    align-items: end;
    background: var(--stage);
    color: var(--paper);
    overflow: hidden;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.85) contrast(1.05);
}

/* Velo para que el texto sea legible sobre cualquier foto */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(9, 8, 14, 0.92) 0%, rgba(9, 8, 14, 0.55) 42%, rgba(9, 8, 14, 0.25) 100%);
}

.hero--empty {
    background:
        repeating-linear-gradient(
            105deg,
            #17151f 0 3rem,
            #1b1824 3rem 6rem
        );
}

.hero__inner {
    padding-block: clamp(5rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem);
    max-width: 46rem;
}

.hero__kicker {
    color: color-mix(in srgb, var(--paper) 72%, transparent);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.hero__kicker::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: var(--brass);
    flex: none;
}

.hero__title {
    font-size: clamp(3.4rem, 11vw, 7.5rem);
    letter-spacing: -0.035em;
    line-height: 0.92;
    margin-bottom: 1.5rem;
}

.hero__subtitle {
    font-size: clamp(1.05rem, 2.1vw, 1.3rem);
    color: color-mix(in srgb, var(--paper) 84%, transparent);
    max-width: 34rem;
    line-height: 1.55;
}

.hero__actions {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.hero__scroll {
    position: absolute;
    right: var(--gutter);
    bottom: 2.5rem;
    writing-mode: vertical-rl;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 55%, transparent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero__scroll::after {
    content: "";
    width: 1px;
    height: 3.5rem;
    background: currentColor;
}

@media (max-width: 46rem) {
    .hero__scroll {
        display: none;
    }
}

/* --- Botones -------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-text);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    background: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.button--primary {
    background: var(--curtain);
    color: #fff;
}

.button--primary:hover {
    background: var(--curtain-dark);
}

.button--ghost {
    border-color: currentColor;
    color: inherit;
}

.button--ghost:hover {
    background: currentColor;
    color: var(--stage);
}

.button--ink {
    background: var(--ink);
    color: var(--paper);
}

.button--ink:hover {
    background: #2a2833;
}

.button--block {
    width: 100%;
}

.button:active {
    transform: translateY(1px);
}

/* --- Secciones ------------------------------------------------------ */

.section {
    padding-block: var(--step);
    position: relative;
}

.section--tint {
    background: var(--paper-warm);
}

.section--dark {
    background: var(--stage);
    color: var(--paper);
}

.section--dark .section__number,
.section--dark .section__label {
    color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.section__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
}

.section--dark .section__head {
    border-bottom-color: rgba(243, 240, 233, 0.16);
}

.section__number {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
    padding-top: 0.6rem;
}

.section__title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    max-width: 20ch;
}

.section__intro {
    margin-top: 1.25rem;
    max-width: 46ch;
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.section--dark .section__intro {
    color: color-mix(in srgb, var(--paper) 74%, transparent);
}

/* --- Sobre nosotros ------------------------------------------------- */

.about {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

@media (max-width: 60rem) {
    .about {
        grid-template-columns: 1fr;
    }
}

.about__body p {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.72;
    color: var(--ink-soft);
    max-width: 58ch;
}

.about__body p + p {
    margin-top: 1.5rem;
}

/* Capitular: el primer párrafo abre como en una revista. El hueco lateral
   va justo: con más aire la letra se lee como palabra suelta («A tmarjonilla»). */
.about__body p:first-child::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.9em;
    line-height: 0.78;
    padding: 0.06em 0.05em 0 0;
    color: var(--curtain);
}

.stats {
    display: grid;
    gap: 0;
    border-top: 2px solid var(--ink);
}

.stat {
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 1.25rem;
}

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat__label {
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.35;
}

/* --- Galería -------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(0.5rem, 1.4vw, 1rem);
}

.gallery__item {
    position: relative;
    margin: 0;
    border: none;
    padding: 0;
    background: var(--paper-deep);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    display: block;
    width: 100%;
}

/* Un par de piezas grandes rompen la retícula y dan ritmo */
.gallery__item:nth-child(6n + 1),
.gallery__item:nth-child(6n + 4) {
    grid-column: span 2;
    aspect-ratio: 8 / 5;
}

@media (max-width: 46rem) {
    .gallery__item:nth-child(n) {
        grid-column: span 1;
        aspect-ratio: 4 / 3;
    }
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.5s ease;
    filter: saturate(0.92);
}

.gallery__item:hover img {
    transform: scale(1.045);
    filter: saturate(1.05);
}

.gallery__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 1rem 0.9rem;
    background: linear-gradient(to top, rgba(9, 8, 14, 0.85), transparent);
    color: #fff;
    font-size: 0.82rem;
    text-align: left;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption {
    opacity: 1;
    transform: none;
}

/* --- Lightbox ------------------------------------------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(9, 8, 14, 0.96);
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox__figure {
    margin: 0;
    max-width: min(100%, 78rem);
    max-height: 100%;
    display: grid;
    gap: 1rem;
}

.lightbox__figure img {
    max-height: 82vh;
    width: auto;
    margin-inline: auto;
    object-fit: contain;
}

.lightbox__caption {
    color: color-mix(in srgb, var(--paper) 80%, transparent);
    font-size: 0.9rem;
    text-align: center;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    background: none;
    border: 1px solid rgba(243, 240, 233, 0.28);
    color: var(--paper);
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background: rgba(243, 240, 233, 0.12);
    border-color: var(--paper);
}

.lightbox__close {
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
}

.lightbox__nav--prev {
    left: clamp(0.5rem, 3vw, 2rem);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox__nav--next {
    right: clamp(0.5rem, 3vw, 2rem);
    top: 50%;
    transform: translateY(-50%);
}

/* --- Vídeo ---------------------------------------------------------- */

.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Facade: hasta que no se pulsa Play no se carga nada de YouTube */
.video-facade {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    width: 100%;
    background: #000;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.video-facade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity 0.4s ease, transform 0.6s ease;
}

.video-facade:hover img {
    opacity: 0.85;
    transform: scale(1.02);
}

.video-facade__play {
    position: relative;
    width: clamp(4rem, 8vw, 5.5rem);
    height: clamp(4rem, 8vw, 5.5rem);
    border-radius: 50%;
    background: var(--curtain);
    display: grid;
    place-items: center;
    transition: transform 0.25s ease, background 0.25s ease;
}

.video-facade:hover .video-facade__play {
    transform: scale(1.08);
    background: var(--curtain-dark);
}

.video-facade__play::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.75rem 0 0.75rem 1.25rem;
    border-color: transparent transparent transparent #fff;
    margin-left: 0.3rem;
}

.video-facade__label {
    position: absolute;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.video-missing {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border: 1px dashed var(--rule-strong);
    color: var(--ink-faint);
    text-align: center;
    padding: 2rem;
    font-size: 0.95rem;
}

.section--dark .video-missing {
    border-color: rgba(243, 240, 233, 0.25);
    color: color-mix(in srgb, var(--paper) 60%, transparent);
}

/* --- Producciones en portada ---------------------------------------- */

.shows {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule);
}

.section--dark .shows {
    border-top-color: rgba(243, 240, 233, 0.16);
}

.show {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    padding-block: clamp(1.25rem, 3vw, 2rem);
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
}

.section--dark .show {
    border-bottom-color: rgba(243, 240, 233, 0.16);
}

.show__year {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.section--dark .show__year {
    color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.show__title {
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
}

.show__venue {
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin-top: 0.35rem;
}

.section--dark .show__venue {
    color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.show__poster {
    width: 4.5rem;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--paper-deep);
}

@media (max-width: 46rem) {
    .show {
        grid-template-columns: 3.5rem 1fr;
    }

    .show__poster {
        display: none;
    }
}

/* --- Contacto ------------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

@media (max-width: 60rem) {
    .contact {
        grid-template-columns: 1fr;
    }
}

.contact__lead {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-family: var(--font-display);
    line-height: 1.4;
    max-width: 26ch;
}

.contact__list {
    display: grid;
    border-top: 2px solid currentColor;
}

.contact__row {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1rem;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}

.section--dark .contact__row {
    border-bottom-color: rgba(243, 240, 233, 0.16);
}

.contact__key {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.section--dark .contact__key {
    color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.contact__value a {
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 1px;
}

.contact__value a:hover {
    border-bottom-color: currentColor;
}

/* --- Redes sociales -------------------------------------------------- */

.social {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 0.35rem 1.4rem;
}

.social--footer {
    display: grid;
    gap: 0.6rem;
    justify-items: start;
}

.social__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.75rem;
    text-decoration: none;
    font-size: 0.92rem;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.social__icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

/* En contacto se anula el subrayado permanente de .contact__value a. */
.contact__value .social__link {
    border-bottom-color: transparent;
    padding-bottom: 0;
}

.contact__value .social__link:hover,
.social--inline .social__link:hover {
    border-bottom-color: currentColor;
}

.site-footer .social__link {
    color: inherit;
}

.site-footer .social__link:hover {
    color: var(--paper);
    border-bottom-color: currentColor;
}

/* Variante sólo icono: área de pulsación cómoda en táctil. */
.social--icons .social__link {
    width: 2.75rem;
    height: 2.75rem;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
}

.social--icons .social__icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* --- Pie ------------------------------------------------------------ */

.site-footer {
    background: var(--stage);
    color: color-mix(in srgb, var(--paper) 78%, transparent);
    padding-block: clamp(3rem, 7vw, 5rem) 2.5rem;
}

.site-footer__inner {
    display: grid;
    gap: 3rem;
}

.site-footer__name {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--paper);
    letter-spacing: -0.02em;
}

.site-footer__tagline {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    max-width: 32ch;
}

.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(243, 240, 233, 0.16);
}

.site-footer__title {
    font-family: var(--font-text);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 55%, transparent);
    margin-bottom: 1rem;
    font-weight: 600;
}

.site-footer__list {
    display: grid;
    gap: 0.35rem;
    font-size: 0.92rem;
}

/* Área de pulsación de 24 px como mínimo (WCAG 2.2, 2.5.8): en una línea
   de texto suelta el enlace medía 21 px de alto. */
.site-footer__list a {
    display: inline-block;
    padding-block: 0.3rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.site-footer__list a:hover {
    color: var(--paper);
    border-bottom-color: currentColor;
}

.site-footer__legal {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--paper) 45%, transparent);
    padding-top: 2rem;
    border-top: 1px solid rgba(243, 240, 233, 0.16);
}

/* =========================================================
   Páginas sueltas: acceso y errores
   ========================================================= */

.page--bare {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--paper);
}

.bare-header {
    padding: 1.75rem var(--gutter);
}

.bare-main {
    display: grid;
    align-items: center;
    padding: clamp(1.5rem, 5vw, 3rem) var(--gutter);
}

.bare-footer {
    padding: 1.75rem var(--gutter);
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.bare-footer p {
    margin: 0;
}

/* --- Acceso --------------------------------------------------------- */

.access {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: clamp(2rem, 7vw, 6rem);
    align-items: center;
}

@media (max-width: 56rem) {
    .access {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.access__title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    margin-block: 1rem 1.25rem;
}

.access__text {
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 40ch;
}

.access__note {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--ink-faint);
    max-width: 42ch;
}

.access__panel {
    background: #fff;
    border: 1px solid var(--rule);
    padding: clamp(1.75rem, 4vw, 2.5rem);
}

.access__back {
    margin-top: 1.5rem;
    font-size: 0.88rem;
}

.access__back a {
    color: var(--ink-faint);
    text-decoration: none;
}

.access__back a:hover {
    color: var(--ink);
}

/* --- Formularios ---------------------------------------------------- */

.form {
    display: grid;
    gap: 1.25rem;
}

.field {
    display: grid;
    gap: 0.45rem;
}

.field label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
    font: inherit;
    font-size: 1rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--rule-strong);
    background: var(--paper);
    color: var(--ink);
    border-radius: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: #fff;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
    border-color: var(--curtain);
    background: color-mix(in srgb, var(--curtain) 5%, #fff);
}

.field__error {
    font-size: 0.85rem;
    color: var(--curtain-dark);
}

.field__with-action {
    position: relative;
    display: flex;
}

.field__toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-faint);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.field__toggle:hover {
    color: var(--ink);
}

/* --- Avisos --------------------------------------------------------- */

.flash-region {
    padding-top: 1.25rem;
}

.flash-stack {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--ink-faint);
    background: var(--paper-warm);
    font-size: 0.92rem;
}

.flash p {
    margin: 0;
    flex: 1;
}

.flash--success {
    border-left-color: #2f7d5c;
    background: color-mix(in srgb, #2f7d5c 8%, var(--paper));
}

.flash--error {
    border-left-color: var(--curtain);
    background: color-mix(in srgb, var(--curtain) 8%, var(--paper));
}

.flash--warning {
    border-left-color: var(--brass);
    background: color-mix(in srgb, var(--brass) 10%, var(--paper));
}

.flash__close {
    background: none;
    border: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 0 0.15rem;
}

.flash__close:hover {
    color: var(--ink);
}

/* --- Página de error ------------------------------------------------ */

.error-page {
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.error-page__code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    color: var(--curtain);
    margin-bottom: 1.5rem;
}

.error-page__title {
    font-size: clamp(2.4rem, 7vw, 4rem);
    margin-bottom: 1rem;
}

.error-page__text {
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.error-page__actions {
    margin-top: 2.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-page__debug {
    margin-top: 3rem;
    text-align: left;
    font-size: 0.85rem;
    border: 1px solid var(--rule);
    padding: 1rem;
    background: var(--paper-warm);
}

.error-page__debug summary {
    cursor: pointer;
    font-weight: 600;
}

.error-page__debug pre {
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* --- Páginas de texto legal ----------------------------------------- */

.prose {
    max-width: 46rem;
    margin-inline: auto;
}

.prose h1 {
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    margin-bottom: 2rem;
}

.prose h2 {
    font-size: 1.4rem;
    margin-top: 2.75rem;
    margin-bottom: 0.75rem;
}

.prose p,
.prose li {
    color: var(--ink-soft);
    line-height: 1.75;
}

.prose p + p {
    margin-top: 1rem;
}

.prose ul {
    list-style: disc;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --- Utilidades de aparición ---------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

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


/* =========================================================
   FUNCIÓN EN CINCO ACTOS · landing pública
   La portada es un programa de mano: cada sección es un acto
   que ocupa una pantalla, y entre acto y acto cambia la luz.
   Todo lo que sigue vive bajo .page--home y no toca el resto
   del sitio, que sigue siendo claro.
   ========================================================= */

.page--home {
    /* --- El escenario a oscuras. Tres tonos, nunca negro plano. --- */
    --stage: #09080d;
    --stage-soft: #100e16;
    --stage-raised: #171320;
    --plum: #241026;

    /* --- Lo que se lee --- */
    --paper: #f7f3ec;
    --ink: #f7f3ec;
    --ink-soft: #c6bdcd;
    --ink-faint: #9a92a1;

    /* --- Las luces. Dos versiones de cada foco: la saturada pinta luz
           (halos, filos, superficies) y la clara escribe texto, donde
           hace falta contraste de verdad. --- */
    --magenta: #e92b86;
    --magenta-lit: #ff77b3;
    --cyan: #20cfe3;
    --cyan-lit: #5fe0f0;
    --amber: #f2b84b;
    --amber-lit: #f7cd7a;

    --rule: rgba(247, 243, 236, 0.11);
    --rule-strong: rgba(247, 243, 236, 0.24);

    /* Cañón de seguimiento del acto; cada sección lo redefine. */
    --luz: transparent;
    --luz-texto: var(--paper);

    --shell: 90rem;
    --gutter: clamp(1.25rem, 4vw, 4rem);

    /* La cabecera es fija: su altura la necesitan el anclaje de las
       secciones, la banda de avisos y el alto útil de cada acto. */
    --header-h: 5.25rem;
    --act-top: calc(var(--header-h) + clamp(1.25rem, 3.5vh, 2.75rem));
    --act-bottom: clamp(1.75rem, 5vh, 3.5rem);

    background: var(--stage);
    color: var(--paper);
    font-family: var(--font-text);
    font-optical-sizing: auto;
    overflow-x: clip;
}

.page--home main {
    overflow: clip;
}

/* Fraunces trae dos rasgos propios: SOFT redondea los remates y WONK
   activa las formas raras de la itálica y algunos ojos. Con WONK a 1 el
   titular deja de parecer una serif cualquiera. */
.page--home h1,
.page--home h2,
.page--home h3 {
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 1;
}

.page--home :focus-visible {
    outline: 2px solid var(--cyan-lit);
    outline-offset: 3px;
}

.page--home .skip-link {
    position: fixed;
    background: var(--paper);
    color: var(--stage);
}

/* Paso entre actos: el scroll se deja guiar, pero no se secuestra.
   «proximity» acompaña al gesto en lugar de imponerlo, y sólo entra si
   la ventana tiene alto para un acto entero. */
@media (min-height: 44rem) and (prefers-reduced-motion: no-preference) {
    html:has(.page--home) {
        scroll-snap-type: y proximity;
        scroll-padding-top: 5.25rem;
    }
}

/* --- Cabecera ------------------------------------------------------- */

.page--home .site-header {
    position: fixed;
    inset: 0 0 auto;
    /* El velo cubre toda la altura de la cabecera: los enlaces caen sobre
       la mitad inferior y ahí la fotografía del hero aún no está atenuada. */
    background: linear-gradient(to bottom, rgba(9, 8, 13, 0.85) 42%, rgba(9, 8, 13, 0.38) 84%, transparent);
    color: var(--paper);
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    transition: background 320ms ease, border-color 320ms ease;
}

.page--home .site-header.is-stuck,
.page--home .site-header.is-open {
    background: rgba(9, 8, 13, 0.92);
    border-bottom-color: var(--rule);
    backdrop-filter: saturate(1.2) blur(18px);
}

.page--home .site-header__inner {
    min-height: var(--header-h);
}

/* Por encima del panel del menú móvil, que se despliega dentro de la
   propia cabecera y si no lo taparía. */
.page--home .wordmark {
    position: relative;
    z-index: 2;
    min-width: 3rem;
    min-height: 3rem;
}

.wordmark__logo {
    display: block;
    width: 3.9rem;
    height: 3.75rem;
    object-fit: contain;
}

.page--home .site-nav {
    gap: clamp(0.9rem, 2vw, 2rem);
    font-family: var(--font-text);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.page--home .site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0;
    color: rgba(247, 243, 236, 0.82);
    border-bottom: 0;
    transition: color 200ms ease;
}

/* El subrayado se enciende de izquierda a derecha, como una luz de paso. */
.page--home .site-nav a:not(.site-nav__member)::after {
    content: "";
    position: absolute;
    inset: auto 0 0.5rem 0;
    height: 1px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

.page--home .site-nav a:hover,
.page--home .site-nav a:focus-visible,
.page--home .site-nav a[aria-current="true"] {
    color: var(--paper);
}

.page--home .site-nav a:hover::after,
.page--home .site-nav a:focus-visible::after,
.page--home .site-nav a[aria-current="true"]::after {
    transform: scaleX(1);
}

.page--home .site-nav__member {
    color: var(--paper) !important;
    border: 1px solid var(--rule-strong);
    padding-inline: 1.1rem;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.page--home .site-nav__member:hover,
.page--home .site-nav__member:focus-visible {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--stage) !important;
}

.nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.75rem;
    border: 1px solid var(--rule-strong);
    background: rgba(9, 8, 13, 0.4);
    color: var(--paper);
    cursor: pointer;
}

.nav-toggle > span:not(.visually-hidden) {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform 250ms ease;
}

.nav-toggle > span:last-child {
    margin-top: 0.45rem;
}

/* --- Programa de mano ------------------------------------------------
   Regleta fija con los actos de la función: dice dónde estás y deja
   saltar. Se esconde en pantallas estrechas o bajas, donde estorbaría más
   de lo que orienta. Sin JavaScript sigue siendo un índice de anclas
   utilizable; sólo pierde la marca del acto en escena. */

.playbill {
    position: fixed;
    top: 50%;
    right: clamp(0.6rem, 1.4vw, 1.5rem);
    z-index: 40;
    transform: translateY(-50%);
}

.playbill__list {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.playbill__link {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.25rem;
    padding-inline: 0.5rem;
    color: var(--ink-faint);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 240ms ease;
}

.playbill__name {
    justify-self: end;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 320ms cubic-bezier(0.22, 0.68, 0.24, 1), opacity 240ms ease;
}

/* La barra crece cuando el acto está en escena: la posición se lee de un
   vistazo, sin necesidad de números grandes. */
.playbill__bar {
    display: block;
    width: 1.15rem;
    height: 1px;
    background: currentColor;
    transition: width 320ms cubic-bezier(0.22, 0.68, 0.24, 1), background 240ms ease;
}

.playbill__link:hover,
.playbill__link:focus-visible {
    color: var(--paper);
}

.playbill__link:hover .playbill__name,
.playbill__link:focus-visible .playbill__name {
    max-width: 12rem;
    opacity: 1;
}

.playbill__link[aria-current="true"] {
    color: var(--paper);
}

.playbill__link[aria-current="true"] .playbill__bar {
    width: 2.25rem;
    background: var(--amber);
}

@media (max-width: 68rem), (max-height: 40rem) {
    .playbill {
        display: none;
    }
}

/* --- Botones ---------------------------------------------------------
   Nada de píldoras luminosas: aquí un botón es una entrada de teatro.
   Esquina viva, crema sólido el principal, filo fino el secundario. El
   color de las luces no se gasta en superficies. */

.page--home .button {
    min-height: 3rem;
    padding: 0.85rem 1.75rem;
    border-radius: 0;
    font-family: var(--font-text);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background-color 240ms ease, color 240ms ease,
        border-color 240ms ease, transform 240ms ease;
}

.page--home .button--primary {
    background: var(--paper);
    color: var(--stage);
    box-shadow: none;
}

.page--home .button--primary:hover,
.page--home .button--primary:focus-visible {
    background: var(--amber-lit);
    color: var(--stage);
    transform: translateY(-2px);
}

.page--home .button--ghost {
    border-color: var(--rule-strong);
    color: var(--paper);
}

.page--home .button--ghost:hover,
.page--home .button--ghost:focus-visible {
    background: transparent;
    color: var(--paper);
    border-color: var(--paper);
    transform: translateY(-2px);
}

/* --- Obertura · el hero ---------------------------------------------- */

.page--home .hero {
    min-height: 100svh;
    align-items: center;
    background: var(--stage);
    scroll-snap-align: start;
}

.page--home .hero__media {
    /* Sobra foto por arriba y por abajo: es el margen que consume el
       desplazamiento lento del fondo. */
    inset: -6% 0;
}

.page--home .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% center;
    filter: none;
}

.page--home .hero::after {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(9, 8, 13, 0.97) 0%, rgba(9, 8, 13, 0.9) 24%, rgba(9, 8, 13, 0.42) 54%, rgba(9, 8, 13, 0.06) 78%),
        linear-gradient(0deg, rgba(9, 8, 13, 0.95) 0%, rgba(9, 8, 13, 0.08) 34%, rgba(9, 8, 13, 0.26) 100%);
}

.page--home .hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--shell);
    padding-block: calc(var(--header-h) + 2rem) clamp(4rem, 9vh, 7rem);
}

.page--home .hero__inner > * {
    max-width: min(42rem, 56vw);
}

.page--home .hero__kicker {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
    color: var(--amber-lit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.page--home .hero__kicker::before {
    width: 2.25rem;
    background: currentColor;
}

.page--home .hero__title {
    font-size: clamp(3.5rem, 8.4vw, 7.4rem);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -0.04em;
    text-shadow: 0 0.08em 0.3em rgba(0, 0, 0, 0.42);
}

.page--home .hero__subtitle {
    max-width: 34rem;
    margin-top: 1.75rem;
    color: rgba(247, 243, 236, 0.88);
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    line-height: 1.6;
}

.page--home .hero__actions {
    margin-top: 2.25rem;
}

.page--home .hero__scroll {
    z-index: 1;
    right: max(var(--gutter), 4.5rem);
    bottom: 2.25rem;
    /* El rótulo vertical mide 17 px de ancho: el acolchado le da el área
       de pulsación mínima sin cambiar lo que se ve. El texto está girado,
       así que el ancho visual lo gobierna el eje de bloque. */
    padding-block: 0.5rem;
    color: rgba(247, 243, 236, 0.62);
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    transition: color 220ms ease;
}

.page--home .hero__scroll:hover,
.page--home .hero__scroll:focus-visible {
    color: var(--paper);
}

.page--home .hero__scroll::after {
    height: 3rem;
    background: linear-gradient(var(--amber), rgba(247, 243, 236, 0.12));
}

/* --- El acto: una pantalla, ni más ni menos --------------------------
   Cada sección se organiza en dos franjas —el rótulo del acto y la
   escena— y se centra en el alto disponible. min-height y no height: si
   la asociación escribe un texto largo desde el panel, el acto crece en
   vez de recortarlo. */

/* El reparto del alto es lo que sostiene todo el sistema:
   `minmax(min-content, 1fr)` estira la escena hasta llenar la pantalla
   cuando sobra sitio —y así el mosaico de fotos sabe cuánto alto tiene—
   pero la deja crecer si el texto del panel es más largo de lo previsto.
   Con `1fr` a secas la escena no tendría altura de referencia; con
   `height` fijo, un texto largo quedaría cortado. */
.page--home .section {
    display: grid;
    grid-template-rows: minmax(min-content, 1fr);
    min-height: 100svh;
    padding-block: var(--act-top) var(--act-bottom);
    background: var(--stage-soft);
    color: var(--paper);
    scroll-margin-top: var(--header-h);
    scroll-snap-align: start;
    isolation: isolate;
}

.page--home .section > .shell {
    display: grid;
    grid-template-rows: auto minmax(min-content, 1fr);
    gap: clamp(1.25rem, 3vh, 2.5rem);
    min-height: 0;
}

/* Cañón de seguimiento: la luz del acto sube cuando el acto entra en
   escena y no se apaga. Un solo degradado, sin sombras ni neones. */
.page--home .section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(115% 62% at 50% -12%, var(--luz), transparent 62%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1400ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

.page--home .section.is-lit::after {
    opacity: 1;
}

/* Filo de luz entre actos: la única línea que separa una escena de la
   siguiente. Sustituye al degradado gris que había antes. */
.page--home .section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--luz-texto) 30%, var(--luz-texto) 70%, transparent);
    opacity: 0.28;
    pointer-events: none;
    z-index: -1;
}

/* Luz propia de cada acto */
.page--home .section--intro {
    --luz: rgba(233, 43, 134, 0.13);
    --luz-texto: var(--magenta-lit);
    background: var(--stage-soft);
}

.page--home .section--gallery {
    --luz: rgba(32, 207, 227, 0.11);
    --luz-texto: var(--cyan-lit);
    background: var(--stage);
}

.page--home .section--shows {
    --luz: rgba(242, 184, 75, 0.12);
    --luz-texto: var(--amber-lit);
    background: var(--stage-raised);
}

.page--home .section--video {
    --luz: rgba(32, 207, 227, 0.1);
    --luz-texto: var(--cyan-lit);
    background: var(--stage);
}

.page--home .section--contact {
    --luz: rgba(233, 43, 134, 0.16);
    --luz-texto: var(--magenta-lit);
    background: linear-gradient(160deg, var(--plum), var(--stage) 68%);
}

/* --- Rótulo del acto -------------------------------------------------
   Compacto por norma: antes una cabecera de sección se comía la pantalla
   entera y la primera fotografía asomaba cortada por abajo. */

.page--home .section__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2.25rem);
    align-items: start;
    margin: 0;
    padding-bottom: clamp(0.9rem, 2vh, 1.4rem);
    border-bottom: 1px solid var(--rule);
}

.page--home .section__number {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.4rem;
    color: var(--ink-faint);
    font-family: var(--font-text);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
}

.page--home .section__number::after {
    content: "";
    width: clamp(1.25rem, 3vw, 2.75rem);
    height: 1px;
    background: var(--rule-strong);
}

.page--home .section__label {
    margin-bottom: 0.55rem;
    color: var(--luz-texto);
    font-family: var(--font-text);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.page--home .section__title {
    max-width: 18ch;
    font-size: clamp(2.2rem, 4.4vw, 3.9rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.page--home .section__intro {
    max-width: 54ch;
    margin-top: 0.85rem;
    color: var(--ink-soft);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.6;
}

/* En pantallas anchas el rótulo se lee en una sola línea horizontal: el
   título a la izquierda, la entradilla a la derecha. Se gana la altura
   que necesita la escena. */
@media (min-width: 64rem) {
    .page--home .section__head > div {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        column-gap: clamp(2rem, 5vw, 5rem);
        align-items: end;
    }

    .page--home .section__label {
        grid-column: 1 / -1;
    }

    .page--home .section__intro {
        margin-top: 0;
        padding-bottom: 0.35rem;
    }
}

/* --- Acto I · quiénes somos ------------------------------------------
   Composición de revista: la entradilla abre grande, el resto del texto
   baja a dos columnas y la cita sostiene el lado derecho. */

.page--home .about {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    align-content: center;
    height: 100%;
    min-height: 0;
}

.page--home .about__body {
    display: grid;
    align-content: center;
}

.page--home .about__body p {
    color: var(--ink-soft);
    font-size: clamp(1.02rem, 1.35vw, 1.18rem);
    line-height: 1.7;
    max-width: 62ch;
}

/* La entradilla: más cuerpo, color de papel y capitular. */
.page--home .about__lead {
    max-width: 46ch;
    margin-bottom: 1.5rem;
    color: var(--paper);
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.4;
}

/* Sólo la entradilla lleva capitular. La regla general del sitio la pone
   en el primer párrafo de `.about__body`, y ahora el primer párrafo de la
   caja de columnas también lo era: salían dos letras grandes por acto. */
.page--home .about__cols p::first-letter {
    float: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    color: inherit;
}

.page--home .about__lead::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.4em;
    line-height: 0.76;
    padding: 0.05em 0.06em 0 0;
    color: var(--magenta-lit);
    font-variation-settings: "SOFT" 0, "WONK" 1;
}

.page--home .about__cols p + p {
    margin-top: 1.1rem;
}

@media (min-width: 64rem) {
    .page--home .about__cols {
        columns: 2;
        column-gap: clamp(1.75rem, 3vw, 3rem);
        orphans: 2;
        widows: 2;
    }

    .page--home .about__cols p {
        max-width: none;
    }
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    /* Dentro de una rejilla, un enlace se estira de lado a lado y su
       subrayado con él: la línea acababa cruzando media pantalla. */
    align-self: start;
    justify-self: start;
    min-height: 2.75rem;
    margin-top: 1.5rem;
    padding-bottom: 0.2rem;
    color: var(--paper);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule-strong);
    transition: border-color 220ms ease;
}

.text-link:hover,
.text-link:focus-visible {
    border-bottom-color: var(--amber);
}

.text-link span {
    color: var(--amber);
    transition: transform 220ms ease;
}

.text-link:hover span {
    transform: translateX(0.3rem);
}

/* Cifras: sólo se pintan si la asociación las ha verificado en el panel. */
.page--home .stats {
    border-top: 1px solid var(--rule-strong);
}

.page--home .stat {
    padding-block: clamp(0.9rem, 2vh, 1.35rem);
    border-bottom-color: var(--rule);
}

.page--home .stat__value {
    color: var(--amber-lit);
    font-size: clamp(2.1rem, 3.4vw, 3rem);
    font-weight: 500;
}

.page--home .stat__label {
    color: var(--ink-soft);
    font-size: 0.86rem;
}

/* La cita: una acotación del programa de mano, no una tarjeta. Dos filos
   de luz —magenta arriba, cian abajo— y nada de caja flotante. */
.about__aside {
    position: relative;
    padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem);
    border-block: 1px solid var(--rule);
    background: linear-gradient(150deg, rgba(247, 243, 236, 0.045), rgba(233, 43, 134, 0.03));
}

.about__aside::before,
.about__aside::after {
    content: "";
    position: absolute;
    width: 3.5rem;
    height: 1px;
}

.about__aside::before {
    top: -1px;
    left: clamp(1.25rem, 3vw, 2.25rem);
    background: var(--magenta);
}

.about__aside::after {
    right: clamp(1.25rem, 3vw, 2.25rem);
    bottom: -1px;
    background: var(--cyan);
}

.about__aside p {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 0, "WONK" 1;
}

.about__cue {
    display: block;
    height: 1.9rem;
    color: var(--magenta-lit);
    font-family: var(--font-display);
    font-size: 3.2rem;
    line-height: 0.82;
}

.about__aside-label {
    display: block;
    margin-top: 1.35rem;
    color: var(--ink-faint);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* --- Acto II · la galería --------------------------------------------
   Mosaico de seis piezas que llena exactamente el alto libre del acto:
   cuatro columnas por tres filas, dos escenas grandes y cuatro detalles.
   Doce celdas justas, sin filas sueltas ni fotos cortadas por el borde
   inferior de la ventana. */

/* Única escena que se comprime al alto disponible en lugar de crecer:
   recortar un poco de fotografía con object-fit no pierde información y a
   cambio el mosaico entero se ve de una sola mirada.
   Aquí el acto sí lleva altura fija, no sólo mínima: con `min-height` el
   navegador reparte las filas según la altura natural de las fotos —no
   según la ventana— y el mosaico volvía a desbordar la pantalla. En
   ventanas bajas el modo acto se desactiva más abajo y esto deja de
   aplicarse. */
.page--home .section--gallery {
    height: 100svh;
    grid-template-rows: minmax(0, 1fr);
}

.page--home .section--gallery > .shell {
    grid-template-rows: auto minmax(0, 1fr);
}

.page--home .gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 0.9vw, 0.85rem);
    height: 100%;
    min-height: 0;
}

.page--home .gallery__item {
    position: relative;
    aspect-ratio: auto;
    min-height: 0;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: var(--stage-raised);
    overflow: hidden;
    transition: border-color 260ms ease;
}

.page--home .gallery__item:nth-child(6n + 1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.page--home .gallery__item:nth-child(6n + 4) {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
}

/* --- El mosaico según cuántas fotografías haya ------------------------
   La galería la llena la asociación desde el panel y puede tener una sola
   foto o media docena. La retícula de seis es la de arriba; estas son las
   demás. En todos los casos las celdas llenan el alto del acto y no queda
   ni un hueco suelto. */

.page--home .gallery[data-gallery-count="1"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.page--home .gallery[data-gallery-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
}

.page--home .gallery[data-gallery-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.page--home .gallery[data-gallery-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.page--home .gallery[data-gallery-count="5"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* Con una, dos o cuatro, todas las piezas miden igual: el reparto ya lo
   hace la retícula. */
.page--home .gallery[data-gallery-count="1"] .gallery__item,
.page--home .gallery[data-gallery-count="2"] .gallery__item,
.page--home .gallery[data-gallery-count="4"] .gallery__item {
    grid-column: auto;
    grid-row: auto;
}

/* Con tres, la primera manda y las otras dos se apilan a su derecha. */
.page--home .gallery[data-gallery-count="3"] .gallery__item:first-child {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.page--home .gallery[data-gallery-count="3"] .gallery__item:nth-child(n + 2) {
    grid-column: 3;
    grid-row: auto;
}

/* Con cinco, la primera ocupa dos huecos de la fila de arriba. */
.page--home .gallery[data-gallery-count="5"] .gallery__item:first-child {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.page--home .gallery[data-gallery-count="5"] .gallery__item:nth-child(n + 2) {
    grid-column: auto;
    grid-row: auto;
}

.page--home .gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.94) contrast(1.02);
    transition: transform 620ms cubic-bezier(0.22, 0.68, 0.24, 1), filter 300ms ease;
}

.page--home .gallery__item:hover,
.page--home .gallery__item:focus-visible {
    border-color: rgba(95, 224, 240, 0.4);
}

.page--home .gallery__item:hover img,
.page--home .gallery__item:focus-visible img {
    transform: scale(1.03);
    filter: saturate(1.05);
}

.page--home .gallery__caption {
    padding: 3.5rem 0.9rem 0.85rem;
    background: linear-gradient(to top, rgba(9, 8, 13, 0.94), rgba(9, 8, 13, 0.5) 45%, transparent);
    color: var(--paper);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 1;
    transform: none;
}

.gallery__index {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    color: rgba(247, 243, 236, 0.75);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
}

.page--home .lightbox {
    background: rgba(9, 8, 13, 0.97);
}

.page--home .lightbox__close,
.page--home .lightbox__nav {
    min-width: 3rem;
    min-height: 3rem;
}

/* --- Acto III · el repertorio ----------------------------------------
   Los carteles se recorren de lado: en fila caben todos sin convertir la
   sección en una pared. El alto del cartel sale del alto de la ventana,
   así la tira nunca desborda el acto. El comportamiento vive en
   assets/js/rail.js, compartido con la zona de socios. */

.rail {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 0;
}

.rail__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--stage) 82%, transparent);
    color: var(--paper);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.rail__arrow:hover,
.rail__arrow:focus-visible {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--stage);
}

.rail__arrow--prev {
    left: clamp(-1rem, -1.5vw, -0.5rem);
}

.rail__arrow--next {
    right: clamp(-1rem, -1.5vw, -0.5rem);
}

.rail.is-static .rail__arrow {
    display: none;
}

@media (max-width: 46rem) {
    .rail__arrow {
        display: none;
    }
}

.page--home .shows {
    --poster-h: clamp(13rem, 47vh, 26rem);
    display: flex;
    gap: clamp(0.9rem, 1.8vw, 1.5rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-block: 0.25rem;
    border-top: 0;
    /* Sin scroll-snap: es lo que hacía que la tira se clavara de golpe al
       pulsar una flecha, sin dejar ver cuántos carteles habían pasado. El
       desplazamiento lo lleva rail.js, fotograma a fotograma. */
    scroll-snap-type: none;
}

.page--home .shows::-webkit-scrollbar {
    display: none;
}

.page--home .shows > .show {
    /* El ancho lo dicta el alto del cartel: proporción 2:3 intacta. */
    flex: 0 0 calc(var(--poster-h) * 2 / 3);
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
}

/* La tira que desfila sola se puede agarrar con el ratón. El cursor lo
   dice antes de que nadie lo intente. */
.rail.is-auto .rail__track {
    cursor: grab;
}

.rail.is-grabbing .rail__track {
    cursor: grabbing;
}

/* Mientras se arrastra, ni se selecciona texto ni el navegador se lleva
   el gesto para su propio desplazamiento. */
.rail.is-grabbing .rail__track,
.rail.is-grabbing .rail__track * {
    user-select: none;
}

.rail.is-auto .rail__track {
    touch-action: pan-x pinch-zoom;
}

/* Un cartel arrastrado no debe salir volando con el puntero: ni la imagen
   ni el enlace que la envuelve, que también es arrastrable de serie. */
.rail__track img,
.rail__track a {
    -webkit-user-drag: none;
}

.show__visual {
    position: relative;
    display: block;
    height: var(--poster-h);
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: 0.2rem;
    background: var(--stage);
    text-decoration: none;
    transition: transform 280ms ease, border-color 280ms ease;
}

/* Al pasar por encima cae una luz sobre el cartel y aparece la entrada
   al archivo. Sin halos de neón ni sombras de dos centímetros. */
.show__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9, 8, 13, 0.88), transparent 42%);
    opacity: 0;
    transition: opacity 260ms ease;
}

.show__visual:hover,
.show__visual:focus-visible {
    transform: translateY(-0.35rem);
    border-color: var(--rule-strong);
}

.show__visual:hover::after,
.show__visual:focus-visible::after,
.show__visual:hover .show__open,
.show__visual:focus-visible .show__open {
    opacity: 1;
}

.page--home .show__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--stage);
    transition: transform 520ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

.show__visual:hover .show__poster {
    transform: scale(1.02);
}

.show__placeholder {
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(145deg, transparent 48%, rgba(32, 207, 227, 0.07) 48.2% 49%, transparent 49.2%),
        radial-gradient(circle at 76% 18%, rgba(233, 43, 134, 0.2), transparent 36%),
        var(--stage);
}

.show__placeholder > span {
    align-self: center;
    margin-block: auto;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.9rem);
    line-height: 1.05;
    text-align: center;
}

.show__placeholder small {
    color: var(--ink-faint);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.show__open {
    position: absolute;
    z-index: 1;
    left: 0.9rem;
    bottom: 0.9rem;
    color: var(--paper);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 220ms ease;
}

/* Dos líneas de sitio reservadas: un título largo no puede descolgar la
   fila entera de carteles. */
.show__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 3.1rem;
    padding-top: 0.75rem;
}

.page--home .show__title {
    font-family: var(--font-text);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

.page--home .show__year {
    flex: none;
    color: var(--amber-lit);
    font-family: var(--font-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.shows-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 3.5rem) 0;
    border-block: 1px solid var(--rule);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.shows-empty::before {
    content: "Archivo en preparación";
    flex: none;
    color: var(--amber-lit);
    font-family: var(--font-text);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* --- Acto IV · el vídeo ---------------------------------------------- */

/* Este acto no tiene rótulo arriba y escena debajo: el rótulo se pone al
   lado del reproductor. Por eso el shell aquí es una sola franja, y no las
   dos del resto; si no, la pareja se quedaba pegada al techo con media
   pantalla vacía por debajo. */
.page--home .section--video > .shell {
    grid-template-rows: minmax(min-content, 1fr);
}

.video-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    align-content: center;
    height: 100%;
    min-height: 0;
}

.video-layout > * {
    min-width: 0;
}

.page--home .video-layout .section__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    padding: 0;
    border: 0;
}

.page--home .video-layout .section__head > div {
    display: block;
}

.page--home .video-layout .section__title {
    max-width: 12ch;
    font-size: clamp(2.2rem, 3.6vw, 3.6rem);
}

.page--home .video-layout .section__intro {
    margin-top: 1rem;
}

.page--home .video-frame,
.page--home .video-missing {
    max-height: min(62vh, 34rem);
    border: 1px solid var(--rule-strong);
    border-radius: 0.25rem;
}

.page--home .video-facade img {
    opacity: 0.6;
}

.page--home .video-facade__play {
    background: var(--paper);
    box-shadow: none;
    transition: transform 240ms ease, background 240ms ease;
}

.page--home .video-facade__play::before {
    border-color: transparent transparent transparent var(--stage);
}

.page--home .video-facade:hover .video-facade__play {
    background: var(--amber-lit);
    transform: scale(1.06);
}

.page--home .video-facade__label {
    letter-spacing: 0.18em;
    font-weight: 700;
}

.page--home .video-missing {
    color: var(--ink-soft);
    background:
        radial-gradient(circle at center, rgba(233, 43, 134, 0.1), transparent 32%),
        repeating-linear-gradient(105deg, #100e16 0 3rem, #141019 3rem 6rem);
}

/* --- Acto V · el siguiente acto -------------------------------------- */

.page--home .contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.8fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    /* Las dos columnas arrancan a la misma altura: centrada cada una por
       su cuenta, la más corta quedaba flotando a media pantalla. */
    align-items: start;
    align-content: center;
    height: 100%;
    min-height: 0;
}

/* El texto lo escribe la asociación desde el panel y suele ser una frase
   entera, no un lema: a tamaño de titular se comía media pantalla y
   competía con el rótulo del acto. */
.page--home .contact__lead {
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.2vw, 2.1rem);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -0.02em;
    font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Cuatro puertas de entrada, sin jerarquía entre ellas. */
.ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vh, 1.15rem) clamp(1.25rem, 2.5vw, 2rem);
    margin: clamp(1.25rem, 3vh, 2rem) 0 0;
    padding: 0;
    list-style: none;
    max-width: 44rem;
}

.way {
    display: grid;
    gap: 0.2rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--amber);
}

.way__title {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

.way__text {
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.45;
}

.contact__note {
    max-width: 40ch;
    margin-top: clamp(1rem, 2.5vh, 1.5rem);
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.page--home .contact__list {
    border-top: 1px solid var(--rule-strong);
}

.page--home .contact__row {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    padding-block: clamp(0.7rem, 1.6vh, 1.1rem);
    border-bottom-color: var(--rule);
}

.page--home .contact__key {
    color: var(--ink-faint);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.page--home .contact__value,
.page--home .contact__value a {
    color: var(--paper);
}

.page--home .contact__value a {
    border-bottom-color: var(--rule-strong);
    transition: color 200ms ease, border-color 200ms ease;
}

.page--home .contact__value a:hover,
.page--home .contact__value a:focus-visible {
    color: var(--amber-lit);
    border-bottom-color: currentColor;
}

/* --- Avisos sobre fondo oscuro ---------------------------------------
   La cabecera de la portada es fija, así que la banda de avisos tiene que
   apartarse ella misma o queda debajo. Y los colores del tema claro
   dejarían texto crema sobre fondo crema. */

.page--home .flash-region {
    padding-top: calc(var(--header-h) + 1.25rem);
    background: var(--stage);
}

.page--home .flash {
    background: var(--stage-raised);
    border-left-color: var(--ink-faint);
    color: var(--paper);
}

.page--home .flash--success {
    background: color-mix(in srgb, #35c48b 12%, var(--stage-raised));
    border-left-color: #35c48b;
}

.page--home .flash--error {
    background: color-mix(in srgb, var(--magenta) 14%, var(--stage-raised));
    border-left-color: var(--magenta-lit);
}

.page--home .flash--warning {
    background: color-mix(in srgb, var(--amber) 12%, var(--stage-raised));
    border-left-color: var(--amber);
}

.page--home .flash__close {
    color: var(--ink-soft);
}

.page--home .flash__close:hover {
    color: var(--paper);
}

/* --- Telón: el pie --------------------------------------------------- */

.page--home .site-footer {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
    background: #07060a;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
}

.page--home .site-footer__inner {
    gap: clamp(1.75rem, 4vw, 2.5rem);
}

.page--home .site-footer__brand {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 1.15rem;
}

.site-footer__logo {
    grid-row: 1 / 3;
    width: 4.5rem;
    height: auto;
}

.page--home .site-footer__name {
    align-self: end;
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.page--home .site-footer__tagline {
    align-self: start;
    color: var(--ink-faint);
}

.page--home .site-footer__cols,
.page--home .site-footer__legal {
    border-color: var(--rule);
}

.page--home .site-footer__cols {
    padding-top: clamp(1.75rem, 4vw, 2.5rem);
}

.page--home .site-footer__title,
.page--home .site-footer__legal {
    color: var(--ink-faint);
}

.page--home .site-footer__legal {
    padding-top: 1.5rem;
}

.page--home .site-footer__list a,
.page--home .site-footer .social__link {
    transition: color 200ms ease, border-color 200ms ease;
}

.page--home .site-footer__list a:hover,
.page--home .site-footer .social__link:hover {
    color: var(--paper);
}

/* =========================================================
   MOVIMIENTO
   Cuatro gestos y ninguno más: la escena aparece, la luz sube,
   la fotografía se descubre y el fondo del hero va más lento
   que la página. Todo con transform y opacity.
   ========================================================= */

/* Aparición escalonada. El retardo lo calcula el índice que pone
   assets/js/app.js, no una lista de nth-child escrita a mano. */
.page--home [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
        opacity 720ms cubic-bezier(0.22, 0.68, 0.24, 1),
        transform 720ms cubic-bezier(0.22, 0.68, 0.24, 1);
    transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

.page--home [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Las fotografías no entran deslizándose: se descubren de arriba abajo,
   como cuando sube la luz sobre una escena ya montada.
   El recorte va en la imagen y nunca en el elemento que vigila el
   observador: con `clip-path: inset(… 100%)` encima, su área visible es
   cero, no llega a intersectar nunca y la foto se quedaba invisible para
   siempre. */
.page--home [data-reveal="luz"] {
    transform: none;
    transition: opacity 620ms ease;
    transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

.page--home [data-reveal="luz"] img {
    clip-path: inset(0 0 100% 0);
    transition:
        clip-path 900ms cubic-bezier(0.22, 0.68, 0.24, 1),
        transform 620ms cubic-bezier(0.22, 0.68, 0.24, 1),
        filter 300ms ease;
    transition-delay: calc(var(--reveal-i, 0) * 80ms), 0ms, 0ms;
}

.page--home [data-reveal="luz"].is-visible img {
    clip-path: inset(0 0 0 0);
}

/* Sin JavaScript nadie añade .is-visible: hay que deshacer también el
   desplazamiento y el recorte, no sólo la opacidad. */
.no-js .page--home [data-reveal],
.no-js .page--home [data-reveal="luz"] {
    opacity: 1;
    transform: none;
}

.no-js .page--home [data-reveal="luz"] img {
    clip-path: none;
}

/* Parallax del hero sin una línea de JavaScript: la animación se ata al
   scroll. Donde no haya soporte, la foto se queda quieta y no pasa nada. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .page--home .hero__media img {
            animation: hero-parallax linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
            will-change: transform;
        }

        @keyframes hero-parallax {
            from {
                transform: translate3d(0, -4%, 0);
            }

            to {
                transform: translate3d(0, 4%, 0);
            }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .page--home [data-reveal],
    .page--home [data-reveal="luz"] {
        opacity: 1;
        transform: none;
        transition-delay: 0ms !important;
    }

    .page--home [data-reveal="luz"] img {
        clip-path: none;
        transition-delay: 0ms !important;
    }

    .page--home .section::after {
        opacity: 1;
    }

    .playbill__name,
    .playbill__bar {
        transition: none;
    }
}

/* =========================================================
   PANTALLAS
   El diseño móvil no es el de escritorio encogido: cambia la
   composición, no sólo el tamaño.
   ========================================================= */

@media (max-width: 64rem) {
    .page--home {
        --shell: 60rem;
    }

    .page--home .site-nav {
        gap: 0.85rem;
        font-size: 0.7rem;
    }

    .page--home .hero__inner > * {
        max-width: 64vw;
    }

    /* La cita del acto I baja debajo del texto ya en tableta; el contacto
       aguanta a dos columnas hasta el móvil, porque apilar la lista de
       datos debajo de las cuatro puertas de entrada se lleva por delante
       una pantalla entera en las tabletas apaisadas. */
    .page--home .about {
        grid-template-columns: 1fr;
        align-content: center;
        gap: clamp(1.25rem, 3vh, 2.25rem);
    }

    .page--home .contact {
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .page--home .about__body p:first-child {
        max-width: none;
    }

    .video-layout {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vh, 2.5rem);
    }

    .page--home .video-layout .section__title {
        max-width: 20ch;
    }
}

@media (max-width: 48rem) {
    .page--home {
        --header-h: 4.5rem;
        --act-top: calc(var(--header-h) + 1rem);
        --act-bottom: 1.5rem;
    }

    .page--home .section > .shell {
        gap: 1rem;
    }

    .wordmark__logo {
        width: 3.25rem;
        height: 3.15rem;
    }

    .js .nav-toggle {
        display: block;
        position: relative;
        z-index: 2;
    }

    .js .page--home .site-nav {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 1;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        padding: 6rem var(--gutter) 3rem;
        background:
            radial-gradient(circle at 78% 18%, rgba(233, 43, 134, 0.16), transparent 22rem),
            var(--stage);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-1rem);
        transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
    }

    .js .page--home .site-header.is-open .site-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .page--home .site-nav a,
    .page--home .site-nav a:not(.site-nav__member) {
        display: flex;
        min-height: 3.5rem;
        color: var(--paper);
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 7.5vw, 2.3rem);
        font-weight: 500;
        letter-spacing: -0.02em;
        text-transform: none;
        border-bottom: 1px solid var(--rule);
    }

    .page--home .site-nav a:not(.site-nav__member)::after {
        display: none;
    }

    .page--home .site-nav__member {
        justify-content: center;
        min-height: 3rem !important;
        margin-top: 1.25rem;
        font-family: var(--font-text) !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        border: 1px solid var(--rule-strong) !important;
    }

    .js .page--home .site-header.is-open .nav-toggle > span:nth-of-type(2) {
        transform: translateY(0.25rem) rotate(45deg);
    }

    .js .page--home .site-header.is-open .nav-toggle > span:nth-of-type(3) {
        transform: translateY(-0.2rem) rotate(-45deg);
    }

    /* El hero en vertical: la foto respira arriba y el texto se apoya en
       el suelo de la pantalla. */
    .page--home .hero {
        align-items: end;
    }

    .page--home .hero__media img {
        object-position: 64% center;
    }

    .page--home .hero::after {
        background:
            linear-gradient(to top, rgba(9, 8, 13, 0.99) 0%, rgba(9, 8, 13, 0.84) 44%, rgba(9, 8, 13, 0.12) 80%),
            linear-gradient(90deg, rgba(9, 8, 13, 0.5), transparent 78%);
    }

    .page--home .hero__inner {
        padding-block: calc(var(--header-h) + 1.5rem) clamp(2.5rem, 7vh, 4rem);
    }

    .page--home .hero__inner > * {
        max-width: 100%;
    }

    .page--home .hero__title {
        max-width: 9ch;
        font-size: clamp(3.2rem, 15vw, 4.8rem);
    }

    .page--home .hero__subtitle {
        max-width: 30rem;
        margin-top: 1.25rem;
        font-size: 1rem;
    }

    .page--home .hero__actions {
        align-items: stretch;
    }

    .page--home .hero__actions .button {
        flex: 1 1 11rem;
    }

    .page--home .contact {
        grid-template-columns: 1fr;
        align-content: center;
        gap: clamp(1.25rem, 3vh, 2.25rem);
    }

    .page--home .section__head {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .page--home .section__number {
        padding-top: 0;
    }

    .page--home .section__title {
        max-width: 14ch;
        font-size: clamp(2rem, 8.8vw, 3rem);
    }

    .page--home .section__intro {
        font-size: 0.95rem;
    }

    .page--home .about__body p {
        font-size: 0.98rem;
        line-height: 1.66;
    }

    .page--home .about__body p:first-child {
        font-size: 1.15rem;
        line-height: 1.4;
        margin-bottom: 1.1rem;
    }

    /* En vertical el mosaico se convierte en una parrilla regular de dos
       por tres: las seis fotografías siguen en pantalla y se perciben de
       una mirada. La jerarquía entre escenas grandes y detalles es un
       recurso del formato apaisado; aquí sacrificarla es más barato que
       dejar fuera dos fotos. */
    .page--home .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .page--home .gallery__item:nth-child(6n + 1),
    .page--home .gallery__item:nth-child(6n + 4) {
        grid-column: auto;
        grid-row: auto;
    }

    /* Las mismas cuentas, en vertical: una columna cuando hay una o dos
       fotografías, dos en cuanto hay tres o más. */
    .page--home .gallery[data-gallery-count="1"],
    .page--home .gallery[data-gallery-count="2"] {
        grid-template-columns: 1fr;
    }

    .page--home .gallery[data-gallery-count="1"] {
        grid-template-rows: 1fr;
    }

    .page--home .gallery[data-gallery-count="2"] {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .page--home .gallery[data-gallery-count="3"],
    .page--home .gallery[data-gallery-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .page--home .gallery[data-gallery-count="5"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .page--home .gallery[data-gallery-count="3"] .gallery__item:first-child,
    .page--home .gallery[data-gallery-count="5"] .gallery__item:first-child {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .page--home .gallery[data-gallery-count="3"] .gallery__item:nth-child(n + 2),
    .page--home .gallery[data-gallery-count="5"] .gallery__item:nth-child(n + 2) {
        grid-column: auto;
        grid-row: auto;
    }

    .page--home .gallery__caption {
        padding: 2.5rem 0.7rem 0.6rem;
        font-size: 0.72rem;
    }

    .page--home .shows {
        --poster-h: clamp(12rem, 34vh, 18rem);
    }

    /* En vertical las cuatro puertas se leen como una lista corrida: el
       rótulo y su explicación comparten renglón, separados por un punto,
       con el filo de luz haciendo de guía. No se recorta ni una: las
       cuatro siguen ahí, ocupando la mitad de alto. */
    .ways {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        margin-top: 0.9rem;
    }

    .way {
        display: block;
        padding-left: 0.75rem;
        font-size: 0.84rem;
        line-height: 1.4;
    }

    .way__title {
        font-size: inherit;
    }

    .way__title::after {
        content: " · ";
        color: var(--ink-faint);
    }

    .way__text {
        display: inline;
        font-size: inherit;
    }

    /* La coletilla dice, con otras palabras, lo mismo que la entradilla que
       tiene tres dedos más arriba («tú eliges por dónde entrar»). En
       horizontal cierra bien la columna; en vertical sólo repite y se lleva
       por delante el sitio que necesitan los datos de contacto. */
    .contact__note {
        display: none;
    }

    .page--home .contact__lead {
        font-size: clamp(1.25rem, 4.9vw, 1.7rem);
        line-height: 1.2;
    }

    /* La etiqueta se estrecha pero sigue al lado del dato: apilarla ya en
       el móvil corriente duplicaba el alto de la lista entera. */
    .page--home .contact__row {
        grid-template-columns: 4.25rem minmax(0, 1fr);
        gap: 0.75rem;
        padding-block: 0.5rem;
    }

    .page--home .contact__value {
        font-size: 0.94rem;
    }

    /* Los iconos de las redes marcaban la fila más alta de la lista. */
    .page--home .contact__value .social {
        gap: 0.25rem 1rem;
    }

    .page--home .contact__value .social__link {
        font-size: 0.86rem;
    }

    .page--home .contact__key {
        font-size: 0.6rem;
        letter-spacing: 0.14em;
    }

    /* En vertical manda el texto. La acotación es un recurso de la
       composición a dos columnas —sostiene el lado derecho— y su frase
       sale del mismo relato que se está leyendo justo encima: apilada
       debajo repite el mensaje y roba la pantalla que necesita el texto
       para caber entero. */
    .about__aside {
        display: none;
    }

    .text-link {
        margin-top: 1.1rem;
    }

    .page--home .about__lead {
        margin-bottom: 1.1rem;
    }
}

@media (max-width: 48rem) {
    .no-js .page--home .site-header {
        position: absolute;
        background: rgba(9, 8, 13, 0.88);
    }

    .no-js .page--home .site-header__inner {
        align-items: flex-start;
        padding-block: 0.75rem;
    }

    .no-js .page--home .site-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.15rem 0.75rem;
        font-size: 0.66rem;
    }

    .no-js .page--home .site-nav a,
    .no-js .page--home .site-nav a:not(.site-nav__member) {
        display: inline-flex;
        min-height: 2.25rem;
        font-family: var(--font-text);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-bottom: 1px solid transparent;
    }

    .no-js .page--home .site-nav__member {
        min-height: 2.25rem !important;
        margin-top: 0;
        padding-inline: 0.6rem;
        font-size: 0.66rem !important;
    }
}

/* Móvil pequeño (360 × 800 y parecidos): quedan cuarenta píxeles de más en
   el último acto. Se recuperan apretando interlineados y filas, sin bajar
   ningún cuerpo de letra por debajo de lo legible. */
@media (max-width: 48rem) and (max-height: 51rem) {
    .page--home .section__title {
        font-size: clamp(1.9rem, 8.2vw, 2.7rem);
    }

    .page--home .about__cols p {
        line-height: 1.58;
    }

    .way {
        line-height: 1.35;
    }

    .ways {
        gap: 0.4rem;
    }

    .page--home .contact__lead {
        line-height: 1.15;
    }

    .page--home .contact__row {
        padding-block: 0.4rem;
    }
}

@media (max-width: 24rem) {
    .page--home .hero__actions {
        display: grid;
    }

    .page--home .contact__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .shows-empty {
        display: grid;
        gap: 0.75rem;
    }

    .page--home .site-footer__brand {
        grid-template-columns: 3.5rem 1fr;
    }

    .site-footer__logo {
        width: 3.5rem;
    }

    .page--home .site-footer__name {
        font-size: 1.6rem;
    }
}

/* Ventanas bajas (portátiles pequeños, móvil apaisado): el acto deja de
   imponer una pantalla completa y se comporta como una sección normal,
   con aire suficiente. Forzar 100svh aquí sólo conseguiría cortar. */
@media (max-height: 40rem) {
    .page--home .section,
    .page--home .hero {
        min-height: 0;
        scroll-snap-align: none;
    }

    .page--home .section {
        padding-block: calc(var(--header-h) + 2rem) 3rem;
    }

    .page--home .hero {
        min-height: 34rem;
    }

    .page--home .gallery {
        grid-auto-rows: minmax(7rem, 1fr);
    }
}

@media (min-width: 90rem) {
    .page--home .hero__media img {
        object-position: center center;
    }
}