/*
 * El muro del museo (5 nov 2026, docs/museo.md): la pared por la que se anda, sus cuadros con su foco y su cartela,
 * las puertas de las salas y el atril. Lo pinta museo-muro.js. Lo cargan el museo del socio y la Junta (la vista
 * previa). Es una escena: siempre de noche y con luz cálida, sea cual sea el tema de la aplicación.
 *
 *  1. Letra y escenario
 *  2. El camino y la pared
 *  3. Un cuadro
 *  4. En la pared: los años, el rótulo y el atril
 *  5. Las puertas
 *  6. Móvil y movimiento reducido
 */

/* #region 1. Letra y escenario */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/assets/fuentes/cormorant-garamond.woff2") format("woff2");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fuentes/cormorant-garamond-cursiva.woff2") format("woff2");
}

.museo,
.museo-g-previa__escena,
.museo-ajustes__muestra {
    --letra-museo: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --oro: #d8b46a;
    --oro-claro: #f0d9a3;
    --marfil: #f2ebdd;
    --cristal: rgb(14 11 8 / 0.58);
    --filete: rgb(214 186 122 / 0.34);
    --oro-letras: linear-gradient(180deg, #fbeecb, #c79c4a 70%, #94702e);
    --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color: var(--marfil);
    font-family: var(--letra-museo);
}
/* #endregion */

/* #region 2. El camino y la pared */
/* Lo que hay dentro se mide con el sitio que le dan, no con la pantalla. */
.museo-escena,
.museo-g-previa__escena {
    container-type: size;
}

.museo-camino {
    position: absolute;
    inset: 0;
    overflow: auto hidden;
    outline: none;
    overscroll-behavior: contain;
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.museo-camino::-webkit-scrollbar {
    display: none;
}

.museo-camino--arrastrando {
    cursor: grabbing;
}

.museo-mundo {
    --alto-pared: 76%;
    position: relative;
    height: 100%;
    min-width: 100%;
}

.museo-pared {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--alto-pared);
    background-color: var(--pared);
    background-image:
        linear-gradient(180deg, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.2) 16%, transparent 34%, transparent 74%, rgb(0 0 0 / 0.32)),
        var(--ruido);
}

/* Paneles de madera: boiserie, con su filete. */
.museo-pared--madera {
    background-image:
        linear-gradient(180deg, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.2) 16%, transparent 34%, transparent 74%, rgb(0 0 0 / 0.32)),
        linear-gradient(0deg, transparent 13%, rgb(216 180 106 / 0.3) 13% 13.25%, rgb(0 0 0 / 0.35) 13.25% 13.7%, transparent 13.7%),
        repeating-linear-gradient(90deg, transparent 0 438px, rgb(0 0 0 / 0.22) 438px 440px, rgb(255 255 255 / 0.03) 440px 442px),
        var(--ruido);
}

/* Sillares de piedra. */
.museo-pared--piedra {
    background-image:
        linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.24) 16%, transparent 34%, transparent 74%, rgb(0 0 0 / 0.36)),
        repeating-linear-gradient(0deg, transparent 0 88px, rgb(0 0 0 / 0.28) 88px 90px),
        repeating-linear-gradient(90deg, transparent 0 238px, rgb(0 0 0 / 0.2) 238px 240px),
        var(--ruido);
}

.museo-mundo--vestibulo {
    --pared: #2a221c;
}

.museo-riel {
    position: absolute;
    top: var(--y-riel);
    right: 0;
    left: 0;
    height: 2px;
    background: rgb(216 180 106 / 0.55);
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.5);
}

.museo-zocalo {
    position: absolute;
    top: var(--alto-pared);
    right: 0;
    left: 0;
    height: 14px;
    background: linear-gradient(180deg, #120c09, #060403);
    box-shadow: 0 1px 0 rgb(216 180 106 / 0.25);
}

.museo-suelo {
    position: absolute;
    top: calc(var(--alto-pared) + 14px);
    right: 0;
    bottom: 0;
    left: 0;
    background:
        linear-gradient(180deg, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.26) 40%, rgb(0 0 0 / 0.56)),
        linear-gradient(180deg, transparent 0 7%, rgb(0 0 0 / 0.2) 7% 7.5%, transparent 7.5% 18%, rgb(0 0 0 / 0.2) 18% 18.7%, transparent 18.7% 32%, rgb(0 0 0 / 0.2) 32% 33%, transparent 33% 50%, rgb(0 0 0 / 0.2) 50% 51.2%, transparent 51.2% 72%, rgb(0 0 0 / 0.2) 72% 73.6%, transparent 73.6%),
        var(--ruido),
        #4f2f1c;
}

/* El vestíbulo, mármol oscuro. */
.museo-mundo--vestibulo .museo-suelo {
    background:
        linear-gradient(180deg, rgb(0 0 0 / 0.55), transparent 50%, rgb(0 0 0 / 0.65)),
        var(--ruido),
        #0f0d0c;
}

.museo-vineta {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(120% 90% at 50% 46%, transparent 52%, rgb(0 0 0 / 0.62));
    pointer-events: none;
}

/* Un banco en primer plano: va más rápido que la pared y da la profundidad. */
.museo-primer-plano {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    height: 0;
    pointer-events: none;
    will-change: transform;
}

.museo-banco {
    position: absolute;
    bottom: 52px;
    width: 620px;
    height: 112px;
    opacity: 0.9;
    filter: blur(3px);
}

.museo-banco::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 24px;
    border-radius: 3px;
    background: linear-gradient(180deg, #2a1a12, #090504);
    box-shadow: 0 -2px 18px rgb(0 0 0 / 0.6);
}

.museo-banco::after {
    content: "";
    position: absolute;
    top: 24px;
    right: 44px;
    bottom: 0;
    left: 44px;
    background: linear-gradient(90deg, #070403 0 26px, transparent 26px calc(100% - 26px), #070403 calc(100% - 26px));
}
/* #endregion */

/* #region 3. Un cuadro */
.museo-cuadro {
    --luz: 0.3;
    position: absolute;
    z-index: 1;
}

.museo-cuadro__boton {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.museo-cuadro__boton:disabled {
    cursor: inherit;
}

.museo-cuadro__boton:focus-visible {
    outline: 2px solid var(--oro-claro);
    outline-offset: 18px;
}

.museo-cuadro__marco {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--paspartu);
    background: #f4efe4;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}

/* La moldura: dorada en lo de la historia, madera oscura en lo de hoy. */
.museo-cuadro--oro {
    --moldura: 12px;
}

.museo-cuadro--madera {
    --moldura: 9px;
}

.museo-cuadro__marco::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--moldura));
    z-index: -1;
}

.museo-cuadro--oro .museo-cuadro__marco::before {
    background: linear-gradient(135deg, #e9cf8c, #a67f3d 38%, #dcbc76 58%, #8e6a2c);
    box-shadow: 0 0 0 1px #4f3c1a, inset 0 0 0 1px rgb(255 240 200 / 0.4), 20px 30px 44px rgb(0 0 0 / 0.62);
}

.museo-cuadro--madera .museo-cuadro__marco::before {
    background: linear-gradient(135deg, #2f231c, #141009 45%, #271c15);
    box-shadow: 0 0 0 1px #000000, inset 0 0 0 1px rgb(255 240 200 / 0.1), 16px 26px 38px rgb(0 0 0 / 0.62);
}

/* Lo que no tiene delante, apagado: el foco se enciende al llegar. Solo cambia la opacidad, que no cuesta al andar. */
.museo-cuadro__marco::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--moldura));
    background: #050302;
    opacity: calc((1 - var(--luz)) * 0.62);
    pointer-events: none;
}

.museo-cuadro__marco img {
    display: block;
    width: 100%;
    height: 100%;
    background: #e8e0d0;
    box-shadow: inset 0 0 8px #000000;
}

/* Una foto que no llega: se queda el paspartú, sin el icono roto del navegador. */
.museo-cuadro--rota img {
    visibility: hidden;
}

.museo-cuadro__foco {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 18px;
    height: var(--a-riel);
    transform: translateX(-50%);
    pointer-events: none;
}

.museo-cuadro__foco::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 28px;
    border-radius: 3px 3px 6px 6px;
    background: linear-gradient(90deg, #0a0807, #2f2822 45%, #0a0807);
}

/* Su luz en la pared: desde el foco hasta debajo del cuadro. */
.museo-cuadro__halo {
    position: absolute;
    top: calc(-1 * var(--a-riel));
    bottom: -90px;
    left: -45%;
    z-index: -2;
    width: 190%;
    background: radial-gradient(ellipse 50% 100% at 50% 0, rgb(255 233 190 / 0.34), rgb(255 226 170 / 0.1) 55%, transparent 78%);
    opacity: var(--luz);
    pointer-events: none;
}

/* Su reflejo en el suelo pulido. */
.museo-cuadro__reflejo {
    position: absolute;
    top: var(--al-suelo);
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    opacity: calc(var(--luz) * 0.34);
    filter: blur(9px) brightness(0.62);
    pointer-events: none;
    transform: scaleY(-1);
    -webkit-mask-image: linear-gradient(0deg, transparent 8%, #000000 90%), linear-gradient(90deg, transparent, #000000 14%, #000000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(0deg, transparent 8%, #000000 90%), linear-gradient(90deg, transparent, #000000 14%, #000000 86%, transparent);
    mask-composite: intersect;
}

.museo-cuadro__reflejo img {
    display: block;
    width: 100%;
    height: 200%;
    object-fit: cover;
    object-position: bottom;
}

/* La cartela, en la pared a la derecha del cuadro, como en los museos. */
.museo-cuadro__cartela {
    position: absolute;
    bottom: 0;
    left: calc(100% + 36px);
    width: var(--ancho-cartela);
    padding: 14px 16px;
    background: #f1eadc;
    box-shadow: 2px 6px 14px rgb(0 0 0 / 0.5);
    color: #231a10;
    opacity: calc(0.3 + var(--luz) * 0.7);
    pointer-events: none;
}

.museo-cuadro__cartela b {
    display: block;
    margin-bottom: 3px;
    color: #7a6a52;
    font-family: var(--fuente-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.museo-cuadro__cartela strong {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.12;
}

.museo-cuadro__cartela span {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: #55493a;
    font-size: 15px;
    font-style: italic;
    line-height: 1.22;
    white-space: pre-line;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
/* #endregion */

/* #region 4. En la pared: los años, el rótulo y el atril */
.museo-anyo {
    position: absolute;
    z-index: 0;
    color: rgb(255 236 200 / 0.2);
    font-size: var(--tam-anyo);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    pointer-events: none;
}

/* El nombre del museo, en el vestíbulo. */
.museo-titular {
    position: absolute;
    display: grid;
    align-content: center;
    gap: 1rem;
}

.museo-titular h2,
.museo-rotulo h2 {
    margin: 0;
    background: var(--oro-letras);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--letra-museo);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 0.96;
}

.museo-titular h2 {
    font-size: clamp(3rem, 6.6cqi, 8.5rem);
}

.museo-titular p {
    max-width: 30rem;
    margin: 0;
    color: rgb(242 235 221 / 0.82);
    font-size: clamp(1.2rem, 1.5cqi, 1.6rem);
    font-style: italic;
    line-height: 1.25;
}

/* Lo que se cuenta al entrar en una sala, pintado en la pared. */
.museo-rotulo {
    position: absolute;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 1.3rem;
}

.museo-rotulo small {
    color: var(--oro);
    font-family: var(--fuente-ui);
    font-size: clamp(0.72rem, 0.9cqi, 0.9rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.museo-rotulo h2 {
    font-size: clamp(3.2rem, 7.4cqi, 9rem);
}

.museo-rotulo p {
    max-width: 36rem;
    margin: 0;
    color: rgb(242 235 221 / 0.88);
    font-size: clamp(1.2rem, 1.5cqi, 1.65rem);
    line-height: 1.3;
    white-space: pre-line;
}

.museo-rotulo__sigue {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--oro-claro);
    font-family: var(--fuente-ui);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.museo-rotulo__sigue::after {
    content: "";
    width: 96px;
    height: 1px;
    background: var(--oro);
}

/* El libro de honor, abierto en su atril. */
.museo-atril {
    position: absolute;
    z-index: 1;
    width: 200px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--letra-museo);
    cursor: pointer;
    transition: transform 240ms ease;
}

.museo-atril:hover {
    transform: translateY(-4px);
}

.museo-atril:focus-visible {
    outline: 2px solid var(--oro-claro);
    outline-offset: 6px;
}

.museo-atril__libro {
    display: block;
    width: 156px;
    height: 34px;
    margin: 0 auto;
    background: linear-gradient(90deg, #f7f1e3, #d9cfb6 49%, #a99f87 50%, #f7f1e3 52%, #e5dcc6);
    filter: drop-shadow(0 -8px 22px rgb(255 226 170 / 0.32));
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.museo-atril__pie {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 3px;
    min-height: 132px;
    padding: 16px 34px 0;
    background: linear-gradient(90deg, #120b08, #38241a 50%, #120b08);
    clip-path: polygon(6% 0, 94% 0, 80% 100%, 20% 100%);
    text-align: center;
}

.museo-atril__pie small {
    color: var(--oro-claro);
    font-family: var(--fuente-ui);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.museo-atril__pie strong {
    color: var(--marfil);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.05;
}

/* Al final de la última pared. */
.museo-fin {
    position: absolute;
    z-index: 1;
    white-space: nowrap;
}
/* #endregion */

/* #region 5. Las puertas */
.museo-puerta {
    --luz: 0.55;
    position: absolute;
    z-index: 1;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--letra-museo);
    cursor: pointer;
}

.museo-puerta:hover,
.museo-puerta:focus-visible {
    --luz: 1;
    outline: none;
}

.museo-puerta__rotulo {
    position: absolute;
    right: -40px;
    bottom: calc(100% + 22px);
    left: -40px;
    display: grid;
    gap: 4px;
    text-align: center;
}

.museo-puerta__rotulo small {
    color: var(--oro);
    font-family: var(--fuente-ui);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.museo-puerta__rotulo strong {
    color: var(--marfil);
    font-size: clamp(1.5rem, 2cqi, 2.15rem);
    font-weight: 500;
    line-height: 1.05;
}

.museo-puerta__rotulo span {
    color: rgb(242 235 221 / 0.66);
    font-family: var(--fuente-ui);
    font-size: 11px;
}

/* El hueco, y la sala que se ve dentro. */
.museo-puerta__hueco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--pared);
    box-shadow:
        inset 0 0 90px rgb(0 0 0 / 0.5),
        0 0 0 12px #c9b48f,
        0 0 0 13px #594a30,
        0 0 calc(30px + var(--luz) * 110px) rgb(255 226 170 / calc(var(--luz) * 0.3));
    transition: box-shadow 300ms ease;
}

.museo-puerta__lateral {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;
    background: rgb(0 0 0 / 0.42);
}

.museo-puerta__lateral--izquierdo {
    left: 0;
    clip-path: polygon(0 0, 100% 9%, 100% 80%, 0 100%);
}

.museo-puerta__lateral--derecho {
    right: 0;
    clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 80%);
}

.museo-puerta__techo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 9%;
    background: #0b0807;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
}

.museo-puerta__suelo {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20%;
    background: linear-gradient(180deg, #2a180e, #6c432a);
    clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
}

.museo-puerta__cuadro {
    position: absolute;
    top: 26%;
    left: 50%;
    width: 54%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: 7px solid #efe8d9;
    background: #e8e0d0;
    box-shadow: 0 10px 22px rgb(0 0 0 / 0.55);
    outline: 3px solid #a98342;
    transform: translateX(-50%);
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.museo-puerta--hoy .museo-puerta__cuadro {
    outline-color: #171110;
}

.museo-puerta__cuadro img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.museo-puerta:hover .museo-puerta__cuadro,
.museo-puerta:focus-visible .museo-puerta__cuadro {
    transform: translateX(-50%) scale(1.08);
}

/* Una sala solo con su libro: el libro abierto, al fondo. */
.museo-puerta__libro {
    position: absolute;
    top: 46%;
    left: 50%;
    width: 44%;
    height: 7%;
    background: linear-gradient(90deg, #f7f1e3, #d9cfb6 49%, #a99f87 50%, #f7f1e3 52%, #e5dcc6);
    filter: drop-shadow(0 -6px 14px rgb(255 226 170 / 0.45));
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
    transform: translateX(-50%);
}

.museo-puerta__libro::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 22%;
    width: 56%;
    height: 400%;
    background: #1a100b;
}

.museo-puerta__foco {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 80%;
    height: 56%;
    background: radial-gradient(closest-side, rgb(255 233 190 / 0.34), transparent);
    transform: translateX(-50%);
}

/* La luz de la sala cae al suelo de fuera. */
.museo-puerta__luz {
    position: absolute;
    top: calc(100% + 16px);
    left: -6%;
    width: 112%;
    height: 19cqh;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pared) 60%, rgb(255 226 170 / 0.5)), transparent 92%);
    filter: blur(16px);
    opacity: calc(0.12 + var(--luz) * 0.32);
    pointer-events: none;
    transition: opacity 300ms ease;
}
/* #endregion */

/* #region 6. Móvil y movimiento reducido */
.museo-cuadro--movil .museo-cuadro__cartela {
    top: calc(100% + 22px);
    bottom: auto;
    left: 0;
    width: 100%;
    padding: 10px 14px;
}

.museo-cuadro--movil .museo-cuadro__cartela span {
    -webkit-line-clamp: 2;
}

/* En una pantalla de dedo, cada cosa se queda centrada al soltar. */
@media (pointer: coarse) {
    .museo-camino {
        scroll-snap-type: x proximity;
        cursor: auto;
    }

    .museo-cuadro,
    .museo-puerta {
        scroll-snap-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .museo-puerta__hueco,
    .museo-puerta__cuadro,
    .museo-puerta__luz,
    .museo-atril {
        transition: none;
    }
}
/* #endregion */