/* Landing del Ciclo Verano — Pontificia Universidad Católica del Perú.

   TODO cuelga de .lp-galeria. El marco del sitio inyecta en ESTE documento
   Bootstrap, akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: a igualdad
   de especificidad ganan sus reglas. Por eso el prefijo propio, el bloque de
   neutralización y los !important de la costura con la cabecera.

   CONCEPTO: una exposición de verano en una galería de arte. Con el tema claro
   las salas son un cubo blanco; con el oscuro, la misma galería de noche, con los
   muros apagados y la luz cálida de los focos. Las fotos son las obras: el retrato
   del vestíbulo, siete obras colgadas en un muro de salón y dos postales.

   OCHO FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): azul noche y celeste de la franja superior, la
       identidad común de las landings de la PUCP.
     · LOS MUROS (--lp-pared-*, --lp-concreto-*, --lp-tinta-*, --lp-oro-*): las
       salas que cambian con el tema.
     · LAS SALAS FIJAS (--lp-salon-*, --lp-honor-*, --lp-noche-*): el muro rojo del
       salón, el salón de honor y la noche de la inauguración. Son oscuras en los
       dos temas, como en la galería de verdad.
     · LOS PAPELES (--lp-cartela-*, --lp-paspartu, --lp-boleto-*, --lp-postal-*,
       --lp-invitacion-*, --lp-estampilla-*): cartelas, paspartús, entradas,
       postales e invitación. Claros en los dos temas, con su propia tinta oscura.
     · LOS MATERIALES (--lp-marco-*, --lp-bronce-*, --lp-tornillo-*, --lp-senal-*,
       --lp-riel-*, --lp-aparato-*, --lp-punto-*): marcos, bronce, señalética,
       rieles de luz, la audioguía y el punto rojo de las galerías.
     · LOS LIENZOS (--lp-lienzo-*): los tres colores de la fórmula.
     · EL PLANO (--lp-plano-*): el dibujo de las salas, que sigue al tema.
     · LA ACCIÓN (--lp-accion-*): azul noche con filete dorado sobre los muros
       claros y oro sobre los oscuros; --lp-accion-papel-* sobre los papeles y
       --lp-accion-clara-* sobre las salas fijas.

   Cada superficie fija además unas variables locales (--lp-sup-tinta,
   --lp-sup-suave, --lp-sup-linea, --lp-sup-oro y --lp-foco) para que las piezas
   comunes se lean bien encima de cualquiera.

   El movimiento solo existe con prefers-reduced-motion: no-preference y ninguna
   animación se repite sin fin. */
.lp-galeria {
    /* ── La universidad ────────────────────────────────────────────────── */
    --lp-uni: #0B2A5B;
    --lp-uni-alto: #14407F;
    --lp-uni-celeste: #8FCDF3;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-suave: #CFE3F6;
    /* ── Los muros: cubo blanco de día, galería de noche ──────────────── */
    --lp-pared: #F4F2EE;
    --lp-pared-baja: #ECE8E1;
    --lp-pared-linea: #D3CDC2;
    --lp-concreto: #E3E0DA;
    --lp-concreto-junta: rgba(70, 64, 54, .1);
    --lp-concreto-poro: rgba(70, 64, 54, .14);
    --lp-tinta: #18181A;
    --lp-tinta-suave: #4E4B46;
    --lp-oro: #7A5C22;
    --lp-oro-claro: #C9A45E;
    --lp-halo: rgba(255, 249, 232, .95);
    --lp-haz: rgba(255, 236, 196, .55);
    --lp-panel: rgba(255, 255, 255, .72);
    --lp-sombra: rgba(28, 22, 14, .22);
    --lp-sombra-marco: rgba(20, 16, 10, .38);
    --lp-sombra-papel: rgba(60, 42, 14, .26);
    --lp-sombra-flotante: rgba(0, 0, 0, .4);
    /* ── Las salas fijas, oscuras en los dos temas ─────────────────────── */
    --lp-salon: #5B1D24;
    --lp-salon-alto: #74272F;
    --lp-salon-bajo: #46151B;
    --lp-salon-zocalo: #2E0E12;
    --lp-salon-tinta: #FBF1E6;
    --lp-salon-suave: #ECD5C4;
    --lp-salon-oro: #E5C584;
    --lp-salon-linea: rgba(251, 241, 230, .45);
    --lp-salon-hueco: rgba(0, 0, 0, .16);
    --lp-salon-hueco-alto: rgba(0, 0, 0, .3);
    --lp-honor: #17161B;
    --lp-honor-alto: #26242C;
    --lp-honor-tinta: #F4EFE7;
    --lp-honor-suave: #CCC4B7;
    --lp-honor-oro: #E2C27D;
    --lp-honor-linea: rgba(244, 239, 231, .2);
    --lp-honor-luz: rgba(255, 222, 160, .14);
    --lp-noche: #0B1A33;
    --lp-noche-alta: #142A4F;
    --lp-noche-tinta: #F5F1E8;
    --lp-noche-suave: #CBD3E1;
    --lp-noche-oro: #E2C27D;
    --lp-noche-linea: rgba(245, 241, 232, .2);
    --lp-noche-luz: rgba(226, 194, 125, .16);
    /* ── Papeles: claros en los dos temas ──────────────────────────────── */
    --lp-cartela: #FDFCFA;
    --lp-cartela-tinta: #1B1A18;
    --lp-cartela-suave: #57534C;
    --lp-cartela-linea: #E2DDD3;
    --lp-cartela-oro: #7A5C22;
    --lp-paspartu: #FBFAF6;
    --lp-boleto: #F6EEDC;
    --lp-boleto-tinta: #2B2418;
    --lp-boleto-suave: #5A4F3D;
    --lp-boleto-oro: #77591B;
    --lp-boleto-linea: #CDBE9E;
    --lp-boleto-trama: rgba(140, 106, 44, .06);
    --lp-postal: #FBF7EE;
    --lp-postal-borde: #FFFFFF;
    --lp-postal-tinta: #1F2A44;
    --lp-postal-suave: #4A5470;
    --lp-postal-linea: #D9CFBD;
    --lp-postal-acento: #8E3A1E;
    --lp-postal-sello: rgba(31, 42, 68, .62);
    --lp-postal-fibra: rgba(120, 100, 60, .05);
    --lp-invitacion: #FBF6EA;
    --lp-invitacion-tinta: #231C10;
    --lp-invitacion-suave: #5B4F3A;
    --lp-invitacion-oro: #7A5C22;
    --lp-invitacion-filete: #C9A45E;
    --lp-estampilla: #FFFDF8;
    --lp-estampilla-cielo: #F7E3B5;
    --lp-estampilla-sol: #E28A2B;
    --lp-estampilla-mar: #2C6A99;
    /* ── Materiales ────────────────────────────────────────────────────── */
    --lp-marco-oro: linear-gradient(135deg, #F0D99A 0%, #B98E3F 26%, #F3DEA4 50%, #9C7330 74%, #E2C27D 100%);
    --lp-marco-negro: linear-gradient(135deg, #34343A 0%, #111113 45%, #2A2A2F 70%, #0C0C0E 100%);
    --lp-marco-madera: linear-gradient(135deg, #B88A5A 0%, #7A5332 40%, #A97B4C 65%, #6B4629 100%);
    --lp-marco-liso: #151517;
    --lp-bronce: linear-gradient(160deg, #EBD39C 0%, #CDA769 42%, #E2C58A 60%, #BF975B 100%);
    --lp-bronce-tinta: #2A1C0B;
    --lp-bronce-suave: #3A2814;
    --lp-bronce-brillo: rgba(255, 248, 228, .6);
    --lp-bronce-filete: rgba(255, 244, 214, .7);
    --lp-bronce-surco: rgba(120, 84, 36, .22);
    --lp-tornillo: #8E6A33;
    --lp-tornillo-borde: #F2DFAF;
    --lp-senal: #111113;
    --lp-senal-tinta: #FFFFFF;
    --lp-senal-suave: #D4D4D8;
    --lp-senal-filete: #C9A45E;
    --lp-senal-borde: transparent;
    --lp-riel: #2A2A2E;
    --lp-riel-alto: #5A5A61;
    --lp-aparato: linear-gradient(160deg, #36363C 0%, #141416 62%, #1E1E22 100%);
    --lp-aparato-borde: transparent;
    --lp-aparato-pantalla: #0A0A0B;
    --lp-aparato-pantalla-tinta: #E2C27D;
    --lp-aparato-tecla: linear-gradient(180deg, #3F3F46, #1D1D21);
    --lp-aparato-tecla-tinta: #ECE9E2;
    --lp-punto: #C8102E;
    --lp-punto-brillo: #F25C72;
    /* ── Los lienzos de la fórmula ─────────────────────────────────────── */
    --lp-lienzo-lectura: #22417C;
    --lp-lienzo-lectura-tinta: #F3F6FF;
    --lp-lienzo-matematica: #C99133;
    --lp-lienzo-matematica-tinta: #1F1606;
    --lp-lienzo-colegio: #9E412C;
    --lp-lienzo-colegio-tinta: #FFF3EE;
    /* ── El plano ──────────────────────────────────────────────────────── */
    --lp-plano-fondo: #FFFFFF;
    --lp-plano-sala: #FBFAF7;
    --lp-plano-sala-luz: #EFDDB2;
    --lp-plano-sala-activa: #E6CC92;
    --lp-plano-muro: #18181A;
    --lp-plano-obra: #7A5C22;
    --lp-plano-banco: #CDC7BB;
    --lp-plano-numero: #18181A;
    --lp-plano-recorrido: #9A7432;
    --lp-plano-tu: #13294B;
    --lp-plano-tu-borde: #FFFFFF;
    /* ── La acción ─────────────────────────────────────────────────────── */
    --lp-accion: #13294B;
    --lp-accion-alta: #0A1A33;
    --lp-accion-tinta: #FFFFFF;
    --lp-accion-borde: #C9A45E;
    --lp-accion-papel: #13294B;
    --lp-accion-papel-alta: #0A1A33;
    --lp-accion-papel-tinta: #FFFFFF;
    --lp-accion-papel-borde: #C9A45E;
    --lp-accion-clara: #E2C27D;
    --lp-accion-clara-alta: #EDD39A;
    --lp-accion-clara-tinta: #17120A;
    --lp-accion-clara-borde: #F6E7C1;
    /* ── Sombras y brillos de los objetos: iguales en los dos temas porque
          son de marcos, papeles, lienzos y bronce, que tampoco cambian ───── */
    --lp-filo: rgba(0, 0, 0, .2);
    --lp-filo-tenue: rgba(0, 0, 0, .1);
    --lp-filo-papel: rgba(0, 0, 0, .06);
    --lp-filo-fuerte: rgba(0, 0, 0, .3);
    --lp-brillo-filo: rgba(255, 255, 255, .16);
    --lp-brillo-filo-alto: rgba(255, 255, 255, .22);
    --lp-sombra-corta: rgba(0, 0, 0, .3);
    --lp-sombra-objeto: rgba(0, 0, 0, .45);
    --lp-sombra-honda: rgba(0, 0, 0, .55);
    --lp-sombra-cartela: rgba(0, 0, 0, .65);
    --lp-sombra-colgada: rgba(0, 0, 0, .72);
    --lp-sombra-colgada-alta: rgba(0, 0, 0, .8);
    --lp-sombra-placa: rgba(0, 0, 0, .88);
    --lp-lienzo-luz: rgba(255, 255, 255, .14);
    --lp-lienzo-pie: rgba(0, 0, 0, .2);
    --lp-lienzo-borde: rgba(0, 0, 0, .24);
    /* ── Medidas y letras ──────────────────────────────────────────────── */
    --lp-ancho: 76rem;
    --lp-didona: Didot, "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Libre Bodoni", "Playfair Display", Georgia, "Times New Roman", serif;
    --lp-rotulo-letra: Futura, "Futura PT", "Century Gothic", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --lp-texto: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --lp-mano: "Segoe Print", "Bradley Hand", Noteworthy, "Chalkboard SE", "Comic Neue", cursive;
    /* ── Superficie por defecto: el muro ───────────────────────────────── */
    --lp-sup-tinta: var(--lp-tinta);
    --lp-sup-suave: var(--lp-tinta-suave);
    --lp-sup-linea: var(--lp-pared-linea);
    --lp-sup-oro: var(--lp-oro);
    --lp-foco: var(--lp-accion);
    --lp-dibujo-trazo: var(--lp-tinta);
    --lp-dibujo-relleno: var(--lp-tinta);
    --lp-dibujo-grosor: 1.6px;
    margin: 0;
    background: var(--lp-pared);
    color: var(--lp-tinta);
    font-family: var(--lp-texto);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: la galería de noche. El atributo lo pone Akcadmia en un
   ancestro, también cuando el tema se hereda del navegador; aquí solo se
   reasignan variables, nunca reglas. Las salas fijas, los papeles y los
   materiales no cambian. */
[data-tema="oscuro"] .lp-galeria {
    --lp-uni: #061B3E;
    --lp-uni-alto: #0D2B5E;
    --lp-uni-celeste: #A3D6F7;
    --lp-uni-suave: #D6E7F8;
    --lp-pared: #141416;
    --lp-pared-baja: #1B1B1F;
    --lp-pared-linea: #36342F;
    --lp-concreto: #1F1F22;
    --lp-concreto-junta: rgba(255, 255, 255, .05);
    --lp-concreto-poro: rgba(255, 255, 255, .07);
    --lp-tinta: #F2EFE9;
    --lp-tinta-suave: #BFB9AE;
    --lp-oro: #D9B871;
    --lp-oro-claro: #B8964F;
    --lp-halo: rgba(255, 214, 150, .13);
    --lp-haz: rgba(255, 214, 150, .16);
    --lp-panel: rgba(36, 35, 40, .8);
    --lp-sombra: rgba(0, 0, 0, .55);
    --lp-sombra-marco: rgba(0, 0, 0, .75);
    --lp-sombra-papel: rgba(0, 0, 0, .6);
    --lp-sombra-flotante: rgba(0, 0, 0, .65);
    --lp-senal-borde: #3D3D42;
    --lp-riel: #3E3E44;
    --lp-riel-alto: #74747C;
    --lp-aparato-borde: #3D3D42;
    --lp-plano-fondo: #1C1C20;
    --lp-plano-sala: #24242A;
    --lp-plano-sala-luz: #4F4226;
    --lp-plano-sala-activa: #6E5A2F;
    --lp-plano-muro: #EDE8DF;
    --lp-plano-obra: #D9B871;
    --lp-plano-banco: #4A4740;
    --lp-plano-numero: #F2EFE9;
    --lp-plano-recorrido: #D9B871;
    --lp-plano-tu: #D9B871;
    --lp-plano-tu-borde: #141416;
    --lp-accion: #D9B871;
    --lp-accion-alta: #E9CF94;
    --lp-accion-tinta: #17120A;
    --lp-accion-borde: #F1DEB2;
    color-scheme: dark;
}

/* ═══ Costura con la cabecera del sitio ════════════════════════════════════
   El marco inserta su cabecera como hermano justo encima de la landing y deja un
   hueco entre las dos. El hueco se pinta del color de la franja institucional
   para que no se note. El color va escrito porque aquí se pinta un ancestro de
   .lp-galeria, que no ve sus variables. */
body:has(> .lp-galeria) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #0B2A5B;
}

[data-tema="oscuro"] body:has(> .lp-galeria) {
    background-color: #061B3E;
}

body > :has(+ .lp-galeria) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

    body > :has(+ .lp-galeria) > :last-child {
        margin-bottom: 0 !important;
    }

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   :where aporta especificidad cero: derrota las reglas de elemento del sitio y
   queda por debajo de cualquier clase de esta hoja. */
.lp-galeria :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, b, cite, label, summary, button, details, figure, figcaption, article, section) {
    color: inherit;
    font-family: inherit;
}

.lp-galeria :where(h1, h2, h3, h4, p, dl, dd, figure) {
    margin: 0;
}

.lp-galeria :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-galeria :where(button) {
    font: inherit;
}

.lp-galeria :where(dt) {
    font-weight: inherit;
}

.lp-galeria :where(cite) {
    font-style: italic;
}

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

/* Lo que el guion oculta con hidden se oculta siempre, aunque una regla de esta
   hoja le haya dado otro display. */
.lp-galeria [hidden] {
    display: none !important;
}

/* Sin guion no se escriben las fechas ni los datos del ciclo: lo que depende de
   ellos no se enseña, para no dejar etiquetas con el hueco vacío. */
.lp-galeria:not(.lp-galeria--animada) :is([data-depende-fechas], [data-requiere-guion]) {
    display: none !important;
}

/* Las anclas no quedan tapadas por una cabecera fija del sitio. */
.lp-galeria [id] {
    scroll-margin-top: 5rem;
}

/* Las fotos reservan su proporción con width y height del marcado, así la página
   no salta al cargarlas. Dentro de :where para que la clase de cada foto pueda
   cambiarle el alto sin pelear por especificidad. */
.lp-galeria :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* El foco se ve sobre cualquier superficie: cada una fija su color en --lp-foco. */
.lp-galeria :where(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--lp-foco);
    outline-offset: 3px;
}

/* ═══ Iconos ═══════════════════════════════════════════════════════════════
   La hoja de símbolos no ocupa sitio pero sigue en el documento: con display:
   none algunos navegadores dejarían de pintar los <use>. Los colores llegan por
   variables, que sí atraviesan el <use>: cada superficie las ajusta. Los
   selectores de descendiente no lo atraviesan, por eso no se usan aquí. */
.lp-galeria__simbolos {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.lp-galeria__t-macizo {
    fill: var(--lp-dibujo-relleno);
}

.lp-galeria__t-linea,
.lp-galeria__t-emblema-trazo {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.lp-galeria__t-linea {
    stroke: var(--lp-dibujo-trazo);
    stroke-width: var(--lp-dibujo-grosor);
}

.lp-galeria__t-emblema-libro {
    fill: var(--lp-uni-alto);
}

.lp-galeria__t-emblema-trazo {
    stroke: var(--lp-uni-celeste);
    stroke-width: 1.8px;
}

/* La estampilla es papel: sus colores no cambian con el tema. */
.lp-galeria__t-cielo {
    fill: var(--lp-estampilla-cielo);
}

.lp-galeria__t-sol {
    fill: var(--lp-estampilla-sol);
}

.lp-galeria__t-rayo,
.lp-galeria__t-ola {
    fill: none;
    stroke-linecap: round;
}

.lp-galeria__t-rayo {
    stroke: var(--lp-estampilla-sol);
    stroke-width: 2.4;
}

.lp-galeria__t-ola {
    stroke: var(--lp-estampilla-mar);
    stroke-width: 2.6;
}

/* ═══ Superficies ══════════════════════════════════════════════════════════ */
.lp-galeria__pared {
    background: var(--lp-pared);
    color: var(--lp-tinta);
}

.lp-galeria__pared--baja {
    background: var(--lp-pared-baja);
}

/* El muro rojo de salón: un brillo alto, como de lámpara de techo, y el zócalo
   oscuro al pie. */
.lp-galeria__salon {
    background:
        radial-gradient(ellipse 70% 55% at 50% 0, var(--lp-salon-alto), transparent 72%),
        linear-gradient(180deg, var(--lp-salon) 0, var(--lp-salon-bajo) calc(100% - 2.75rem), var(--lp-salon-zocalo) calc(100% - 2.75rem));
    color: var(--lp-salon-tinta);
    --lp-sup-tinta: var(--lp-salon-tinta);
    --lp-sup-suave: var(--lp-salon-suave);
    --lp-sup-linea: var(--lp-salon-linea);
    --lp-sup-oro: var(--lp-salon-oro);
    --lp-foco: var(--lp-salon-oro);
    --lp-accion: var(--lp-accion-clara);
    --lp-accion-alta: var(--lp-accion-clara-alta);
    --lp-accion-tinta: var(--lp-accion-clara-tinta);
    --lp-accion-borde: var(--lp-accion-clara-borde);
}

.lp-galeria__honor {
    background:
        radial-gradient(ellipse 45% 60% at 25% 0, var(--lp-honor-luz), transparent 70%),
        radial-gradient(ellipse 45% 60% at 75% 0, var(--lp-honor-luz), transparent 70%),
        linear-gradient(180deg, var(--lp-honor-alto), var(--lp-honor) 40%);
    color: var(--lp-honor-tinta);
    --lp-sup-tinta: var(--lp-honor-tinta);
    --lp-sup-suave: var(--lp-honor-suave);
    --lp-sup-linea: var(--lp-honor-linea);
    --lp-sup-oro: var(--lp-honor-oro);
    --lp-foco: var(--lp-honor-oro);
    --lp-accion: var(--lp-accion-clara);
    --lp-accion-alta: var(--lp-accion-clara-alta);
    --lp-accion-tinta: var(--lp-accion-clara-tinta);
    --lp-accion-borde: var(--lp-accion-clara-borde);
}

/* Concreto encofrado con tablas: juntas horizontales y un poro muy fino, hecho
   con dos tramas de puntos de paso distinto para que no se vea la cuadrícula. */
.lp-galeria__concreto {
    background-color: var(--lp-concreto);
    background-image:
        repeating-linear-gradient(180deg, transparent 0 5.9rem, var(--lp-concreto-junta) 5.9rem 6rem),
        radial-gradient(circle at 30% 40%, var(--lp-concreto-poro) 0 1px, transparent 1.6px),
        radial-gradient(circle at 70% 65%, var(--lp-concreto-poro) 0 1px, transparent 1.6px);
    background-size: auto, 1.1rem 1.3rem, 1.7rem 1.5rem;
    color: var(--lp-tinta);
}

.lp-galeria__noche {
    background:
        radial-gradient(ellipse 40% 55% at 28% 0, var(--lp-noche-luz), transparent 70%),
        radial-gradient(ellipse 40% 55% at 72% 0, var(--lp-noche-luz), transparent 70%),
        linear-gradient(180deg, var(--lp-noche-alta), var(--lp-noche) 55%);
    color: var(--lp-noche-tinta);
    --lp-sup-tinta: var(--lp-noche-tinta);
    --lp-sup-suave: var(--lp-noche-suave);
    --lp-sup-linea: var(--lp-noche-linea);
    --lp-sup-oro: var(--lp-noche-oro);
    --lp-foco: var(--lp-noche-oro);
}

.lp-galeria > section {
    position: relative;
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.25rem);
}

/* ═══ Textos comunes ═══════════════════════════════════════════════════════ */
.lp-galeria__ancho {
    width: min(100% - 2rem, var(--lp-ancho));
    margin-inline: auto;
    container-type: inline-size;
}

.lp-galeria__cabecera {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.lp-galeria__cabecera--centro {
    text-align: center;
}

    .lp-galeria__cabecera--centro .lp-galeria__bajada {
        margin-inline: auto;
    }

/* El rótulo de sala: versalitas espaciadas con un filete, como el vinilo que
   rotula cada sala de un museo. */
.lp-galeria__rotulo {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    color: var(--lp-sup-oro);
    font-family: var(--lp-rotulo-letra);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .22em;
    line-height: 1.4;
    text-transform: uppercase;
}

    .lp-galeria__rotulo::before {
        content: "";
        flex: none;
        width: 2.25rem;
        height: 1px;
        background: currentColor;
    }

.lp-galeria__cabecera--centro .lp-galeria__rotulo,
.lp-galeria__invitacion .lp-galeria__rotulo {
    justify-content: center;
}

    .lp-galeria__cabecera--centro .lp-galeria__rotulo::after,
    .lp-galeria__invitacion .lp-galeria__rotulo::after {
        content: "";
        flex: none;
        width: 2.25rem;
        height: 1px;
        background: currentColor;
    }

.lp-galeria__h1 {
    font-family: var(--lp-didona);
    font-size: min(clamp(3rem, 2rem + 4.4vw, 5.5rem), 14cqi);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: .98;
}

.lp-galeria__h1-linea {
    display: block;
}

.lp-galeria__h1-linea--fina {
    margin: .4em 0 .12em;
    color: var(--lp-sup-suave);
    font-size: .46em;
    font-style: italic;
    letter-spacing: .01em;
}

.lp-galeria__h1-linea--marca {
    color: var(--lp-sup-oro);
    font-size: 1.62em;
    letter-spacing: .05em;
    line-height: .9;
}

.lp-galeria__h2 {
    font-family: var(--lp-didona);
    font-size: min(clamp(2rem, 1.4rem + 2.4vw, 3.3rem), 10cqi);
    font-weight: 400;
    letter-spacing: -.005em;
    line-height: 1.08;
    text-wrap: balance;
}

.lp-galeria__bajada {
    max-width: 44rem;
    margin-top: 1rem;
    color: var(--lp-sup-suave);
    font-size: 1.05rem;
    text-wrap: pretty;
}

.lp-galeria__bajada--fechas {
    color: var(--lp-sup-tinta);
    font-weight: 600;
}

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Esquinas rectas y doble filete: el de fuera es el borde y el de dentro, una
   sombra interior del color del botón y otra del filete. */
.lp-galeria__boton {
    --lp-boton-fondo: var(--lp-accion);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 3.1rem;
    padding: .8rem 1.6rem;
    border: 1px solid var(--lp-accion-borde);
    border-radius: 0;
    background: var(--lp-boton-fondo);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-rotulo-letra);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 3px var(--lp-boton-fondo), inset 0 0 0 4px var(--lp-accion-borde), 0 .9rem 1.4rem -1rem var(--lp-sombra-marco);
    transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}

    .lp-galeria__boton:hover {
        --lp-boton-fondo: var(--lp-accion-alta);
        color: var(--lp-accion-tinta);
    }

.lp-galeria__boton--linea {
    --lp-boton-fondo: transparent;
    border-color: currentColor;
    color: var(--lp-sup-tinta);
    box-shadow: none;
}

    .lp-galeria__boton--linea:hover {
        --lp-boton-fondo: var(--lp-panel);
        color: var(--lp-sup-tinta);
    }

.lp-galeria__boton--claro {
    --lp-boton-fondo: var(--lp-accion-clara);
    border-color: var(--lp-accion-clara-borde);
    color: var(--lp-accion-clara-tinta);
    box-shadow: inset 0 0 0 3px var(--lp-boton-fondo), inset 0 0 0 4px var(--lp-accion-clara-tinta), 0 .9rem 1.4rem -1rem var(--lp-sombra-colgada);
}

    .lp-galeria__boton--claro:hover {
        --lp-boton-fondo: var(--lp-accion-clara-alta);
        color: var(--lp-accion-clara-tinta);
    }

.lp-galeria__boton--grande {
    min-height: 3.6rem;
    padding: 1rem 2.2rem;
    font-size: .98rem;
}

.lp-galeria__boton-icono {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    --lp-dibujo-trazo: currentColor;
    --lp-dibujo-grosor: 1.8px;
    transition: translate .25s ease;
}

    .lp-galeria__boton:hover .lp-galeria__boton-icono {
        translate: .2rem 0;
    }

.lp-galeria__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.9rem;
}

.lp-galeria__accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    text-align: center;
}

.lp-galeria__accion--izquierda {
    align-items: flex-start;
    text-align: left;
}

.lp-galeria__accion-nota {
    max-width: 30rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

@media (max-width: 575.98px) {
    .lp-galeria__acciones .lp-galeria__boton,
    .lp-galeria__accion .lp-galeria__boton {
        width: 100%;
    }
}

/* ═══ Franja de la universidad ═════════════════════════════════════════════ */
.lp-galeria__franja {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-alto));
    color: var(--lp-uni-tinta);
    border-bottom: 3px solid var(--lp-uni-celeste);
    --lp-foco: var(--lp-uni-celeste);
}

.lp-galeria__franja-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    padding-block: .7rem;
}

.lp-galeria__franja-emblema {
    flex: none;
    width: 2rem;
    height: 2.2rem;
}

.lp-galeria__franja-nombre {
    font-family: var(--lp-didona);
    font-size: 1.08rem;
    line-height: 1.25;
}

.lp-galeria__franja-lugar {
    color: var(--lp-uni-suave);
    font-size: .85rem;
}

.lp-galeria__franja-sello {
    margin-left: auto;
    padding: .2rem .75rem;
    border: 1px solid var(--lp-uni-celeste);
    color: var(--lp-uni-celeste);
    font-family: var(--lp-rotulo-letra);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .lp-galeria__franja-fila {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .75rem;
    }

    .lp-galeria__franja-emblema {
        grid-row: span 3;
    }

    .lp-galeria__franja-sello {
        justify-self: start;
        margin: .3rem 0 0;
    }
}

/* ═══ Vestíbulo ════════════════════════════════════════════════════════════
   El halo detrás del retrato es la luz de los focos sobre el muro. */
.lp-galeria > .lp-galeria__vestibulo {
    overflow: hidden;
    padding-block: clamp(2.75rem, 1.75rem + 4vw, 5.5rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
    background:
        radial-gradient(ellipse 55% 75% at 75% 32%, var(--lp-halo), transparent 72%),
        var(--lp-pared);
}

.lp-galeria__vestibulo-rejilla {
    display: grid;
    gap: clamp(2.5rem, 2rem + 3vw, 4rem);
    align-items: center;
}

.lp-galeria__entrada {
    max-width: 34rem;
    margin-top: 1.5rem;
    color: var(--lp-sup-suave);
    font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem);
    text-wrap: pretty;
}

/* La ficha técnica del cartel: dos columnas con filetes finos. */
.lp-galeria__ficha-tecnica {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    max-width: 34rem;
    margin-top: 2.1rem;
    border-top: 1px solid var(--lp-sup-linea);
}

.lp-galeria__ficha-dato {
    padding: .65rem 0 .7rem;
    border-bottom: 1px solid var(--lp-sup-linea);
}

    .lp-galeria__ficha-dato dt {
        color: var(--lp-sup-oro);
        font-family: var(--lp-rotulo-letra);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    .lp-galeria__ficha-dato dd {
        font-size: .95rem;
        line-height: 1.45;
    }

@media (max-width: 379.98px) {
    .lp-galeria__ficha-tecnica {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* El retrato: riel con dos focos, sus haces de luz sobre el muro (detrás del
   marco), el marco negro con paspartú y la cartela. */
.lp-galeria__retrato {
    position: relative;
    width: 100%;
    max-width: 38rem;
    margin: 0 auto;
    padding-top: 3.4rem;
}

.lp-galeria__luces {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lp-galeria__riel {
    position: absolute;
    top: 0;
    right: 8%;
    left: 8%;
    height: .32rem;
    border-radius: .16rem;
    background: var(--lp-riel);
}

.lp-galeria__foco {
    position: absolute;
    top: .2rem;
    width: 1.15rem;
    height: 1.9rem;
    border-radius: .25rem .25rem .6rem .6rem;
    background: linear-gradient(90deg, var(--lp-riel), var(--lp-riel-alto) 45%, var(--lp-riel));
    transform-origin: 50% 0;
}

.lp-galeria__foco--1 {
    left: 27%;
    transform: rotate(18deg);
}

.lp-galeria__foco--2 {
    right: 27%;
    transform: rotate(-18deg);
}

.lp-galeria__haz {
    position: absolute;
    inset: 1.9rem 0 18% 0;
    background: linear-gradient(180deg, var(--lp-haz), transparent 85%);
}

.lp-galeria__haz--1 {
    clip-path: polygon(27% 0, 31% 0, 96% 100%, 4% 100%);
}

.lp-galeria__haz--2 {
    clip-path: polygon(69% 0, 73% 0, 96% 100%, 4% 100%);
}

.lp-galeria__retrato-marco {
    position: relative;
    z-index: 1;
    display: block;
    padding: clamp(.85rem, .4rem + 2vw, 1.75rem);
    border: clamp(.5rem, .35rem + .6vw, .85rem) solid var(--lp-marco-liso);
    background: var(--lp-paspartu);
    box-shadow: inset 0 0 0 1px var(--lp-filo-tenue), 0 1.8rem 2.6rem -1.6rem var(--lp-sombra-marco), 0 .3rem .6rem var(--lp-sombra);
}

.lp-galeria__retrato-foto {
    width: 100%;
    box-shadow: 0 0 0 1px var(--lp-filo);
}

.lp-galeria__cartela-muro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    width: fit-content;
    max-width: 19rem;
    margin: 1.4rem 0 0 auto;
    padding: .7rem .95rem .8rem;
    background: var(--lp-cartela);
    color: var(--lp-cartela-tinta);
    font-size: .8rem;
    line-height: 1.4;
    box-shadow: 0 .5rem 1rem -.6rem var(--lp-sombra-marco), 0 0 0 1px var(--lp-filo-papel);
}

.lp-galeria__cartela-muro-titulo {
    font-family: var(--lp-didona);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.25;
}

.lp-galeria__cartela-muro-linea {
    color: var(--lp-cartela-suave);
}

@media (min-width: 992px) {
    .lp-galeria__vestibulo-rejilla {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    }
}

/* ═══ Apariciones ══════════════════════════════════════════════════════════
   El guion pone --visible al entrar en pantalla. El estado de partida solo existe
   con movimiento permitido y guion en marcha: sin ellos todo se ve desde el
   principio. --lp-orden escalona los hermanos. */
.lp-galeria [data-revelar]:nth-child(2) {
    --lp-orden: 1;
}

.lp-galeria [data-revelar]:nth-child(3) {
    --lp-orden: 2;
}

.lp-galeria [data-revelar]:nth-child(4) {
    --lp-orden: 3;
}

.lp-galeria [data-revelar]:nth-child(5) {
    --lp-orden: 4;
}

.lp-galeria [data-revelar]:nth-child(6) {
    --lp-orden: 5;
}

.lp-galeria [data-revelar]:nth-child(7) {
    --lp-orden: 6;
}

.lp-galeria [data-revelar]:nth-child(8) {
    --lp-orden: 7;
}

.lp-galeria [data-revelar]:nth-child(n + 9) {
    --lp-orden: 8;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-galeria--animada [data-revelar] {
        opacity: 0;
        translate: 0 1.5rem;
        transition: opacity .8s ease-out, translate .8s cubic-bezier(.2, .7, .3, 1);
        transition-delay: calc(var(--lp-orden, 0) * 90ms);
    }

        .lp-galeria--animada [data-revelar].lp-galeria--visible {
            opacity: 1;
            translate: 0 0;
        }

    /* Los focos se encienden con un parpadeo y el retrato sale de la penumbra. */
    .lp-galeria--animada .lp-galeria__haz {
        animation: lp-galeria-encender 1.8s ease-out .25s both;
    }

    .lp-galeria--animada .lp-galeria__retrato-foto {
        animation: lp-galeria-penumbra 2s ease-out .2s both;
    }
}

@keyframes lp-galeria-encender {
    0% {
        opacity: 0;
    }

    16% {
        opacity: .9;
    }

    24% {
        opacity: .15;
    }

    38%,
    100% {
        opacity: 1;
    }
}

@keyframes lp-galeria-penumbra {
    from {
        filter: brightness(.45) saturate(.55);
    }

    to {
        filter: none;
    }
}

/* ═══ Galería principal ════════════════════════════════════════════════════
   El muro es un contenedor: la rejilla se reparte según su propio ancho, en dos,
   cuatro o seis columnas. Las filas miden una fracción del ancho de columna y
   crecen si una cartela necesita más sitio. */
.lp-galeria__muro {
    position: relative;
    padding-top: 2.25rem;
    container-type: inline-size;
}

    /* La moldura dorada de la que cuelga el salón. */
    .lp-galeria__muro::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: .45rem;
        background: var(--lp-marco-oro);
        box-shadow: 0 .35rem .6rem -.2rem var(--lp-sombra-objeto);
    }

.lp-galeria__colgada {
    --lp-hueco: clamp(.85rem, .5rem + 1.6cqi, 1.6rem);
    --lp-columnas: 2;
    --lp-proporcion: .92;
    display: grid;
    grid-template-columns: repeat(var(--lp-columnas), minmax(0, 1fr));
    grid-template-areas:
        "a a"
        "a a"
        "b b"
        "c d"
        "e f"
        "e h"
        "g g";
    grid-auto-rows: minmax(calc((100cqi - (var(--lp-columnas) - 1) * var(--lp-hueco)) / var(--lp-columnas) * var(--lp-proporcion)), auto);
    gap: var(--lp-hueco);
    --lp-marco-grosor: clamp(.4rem, .25rem + .55cqi, .75rem);
    --lp-paspartu-ancho: clamp(.4rem, .2rem + .9cqi, 1.2rem);
}

@container (min-width: 34rem) {
    .lp-galeria__colgada {
        --lp-columnas: 4;
        --lp-proporcion: .95;
        grid-template-areas:
            "a a b b"
            "a a c d"
            "e f g g"
            "e h g g";
    }
}

@container (min-width: 54rem) {
    .lp-galeria__colgada {
        --lp-columnas: 6;
        --lp-proporcion: .8;
        grid-template-areas:
            "a a a b b b"
            "a a a b b b"
            "a a a c c d"
            "e e f c c d"
            "e e f g g g"
            "e e h g g g";
    }
}

.lp-galeria__hueco {
    display: flex;
    min-width: 0;
}

.lp-galeria__hueco--a {
    grid-area: a;
}

.lp-galeria__hueco--b {
    grid-area: b;
}

.lp-galeria__hueco--c {
    grid-area: c;
}

.lp-galeria__hueco--d {
    grid-area: d;
}

.lp-galeria__hueco--e {
    grid-area: e;
}

.lp-galeria__hueco--f {
    grid-area: f;
}

.lp-galeria__hueco--g {
    grid-area: g;
}

.lp-galeria__hueco--h {
    grid-area: h;
}

/* Cada obra es un botón: el marco arriba (order) y la cartela debajo. En el
   marcado la cartela va primero para que el nombre de la unidad abra lo que lee
   un lector de pantalla. */
.lp-galeria__obra {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .lp-galeria__obra:focus-visible {
        outline-offset: .45rem;
    }

.lp-galeria__marco {
    position: relative;
    order: -1;
    flex: 1 1 auto;
    display: block;
    min-height: 6.5rem;
    background: var(--lp-marco-fondo);
    box-shadow: inset 0 0 0 1px var(--lp-brillo-filo), 0 1.2rem 1.4rem -1rem var(--lp-sombra-colgada), 0 .2rem .45rem var(--lp-sombra-corta);
    transition: transform .35s ease, box-shadow .35s ease;
}

    /* El paspartú, con el bisel de su corte. */
    .lp-galeria__marco::before {
        content: "";
        position: absolute;
        inset: var(--lp-marco-grosor);
        background: var(--lp-paspartu);
        box-shadow: inset 0 0 0 1px var(--lp-filo), inset .15rem .2rem .35rem var(--lp-filo);
    }

.lp-galeria__obra-foto {
    position: absolute;
    top: calc(var(--lp-marco-grosor) + var(--lp-paspartu-ancho));
    left: calc(var(--lp-marco-grosor) + var(--lp-paspartu-ancho));
    width: calc(100% - 2 * (var(--lp-marco-grosor) + var(--lp-paspartu-ancho)));
    max-width: none;
    height: calc(100% - 2 * (var(--lp-marco-grosor) + var(--lp-paspartu-ancho)));
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--lp-filo-fuerte);
}

.lp-galeria__obra--oro {
    --lp-marco-fondo: var(--lp-marco-oro);
}

.lp-galeria__obra--negro {
    --lp-marco-fondo: var(--lp-marco-negro);
}

.lp-galeria__obra--madera {
    --lp-marco-fondo: var(--lp-marco-madera);
}

@media (hover: hover) {
    .lp-galeria__obra:hover .lp-galeria__marco {
        transform: translateY(-.3rem);
        box-shadow: inset 0 0 0 1px var(--lp-brillo-filo-alto), 0 1.8rem 2rem -1.1rem var(--lp-sombra-colgada-alta), 0 .3rem .6rem var(--lp-sombra-corta);
    }

    .lp-galeria__obra:hover .lp-galeria__obra-unidad {
        text-decoration: underline;
        text-underline-offset: .2em;
    }
}

.lp-galeria__obra-cartela {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    max-width: 100%;
    padding: .45rem .7rem .5rem;
    background: var(--lp-cartela);
    color: var(--lp-cartela-tinta);
    font-size: .8rem;
    line-height: 1.3;
    box-shadow: 0 .35rem .7rem -.35rem var(--lp-sombra-cartela);
}

.lp-galeria__obra-unidad {
    font-family: var(--lp-rotulo-letra);
    font-weight: 700;
    letter-spacing: .03em;
}

.lp-galeria__obra-detalle {
    color: var(--lp-cartela-suave);
}

    .lp-galeria__obra-detalle cite,
    .lp-galeria__cartela-antetitulo cite {
        font-family: var(--lp-didona);
        font-size: 1.08em;
    }

/* El lugar libre: un hueco punteado en el muro con el punto rojo. */
.lp-galeria__libre {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 7.5rem;
    padding: .9rem .75rem;
    border: 1.5px dashed var(--lp-salon-linea);
    background: var(--lp-salon-hueco);
    color: var(--lp-salon-tinta);
    text-align: center;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease;
}

    .lp-galeria__libre:hover {
        border-color: var(--lp-salon-oro);
        background: var(--lp-salon-hueco-alto);
        color: var(--lp-salon-tinta);
    }

.lp-galeria__libre-punto {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--lp-punto-brillo), var(--lp-punto) 62%);
    box-shadow: 0 .15rem .3rem var(--lp-sombra-objeto);
}

.lp-galeria__libre-texto {
    color: var(--lp-salon-suave);
    font-family: var(--lp-rotulo-letra);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.lp-galeria__libre-accion {
    font-family: var(--lp-didona);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.15;
}

.lp-galeria__nota-punto {
    position: relative;
    max-width: 42rem;
    margin-top: 1.75rem;
    padding-left: 1.6rem;
    color: var(--lp-salon-suave);
    font-size: .92rem;
    font-style: italic;
}

    .lp-galeria__nota-punto::before {
        content: "";
        position: absolute;
        top: .4em;
        left: 0;
        width: .8rem;
        height: .8rem;
        border-radius: 50%;
        background: var(--lp-punto);
        box-shadow: 0 0 0 1px var(--lp-salon-tinta);
    }

@media (prefers-reduced-motion: no-preference) {
    .lp-galeria--animada .lp-galeria__hueco--h.lp-galeria--visible .lp-galeria__libre-punto {
        animation: lp-galeria-latido-punto 1.1s ease-in-out 1.2s 3;
    }
}

@keyframes lp-galeria-latido-punto {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

/* ═══ Cartelas ampliadas ═══════════════════════════════════════════════════
   Papel claro en los dos temas. Con popover son ventanas centradas sobre un velo
   oscuro, con su propio desplazamiento; sin popover se ven en fila bajo el muro
   y sus botones de cerrar sobran. El display nunca se toca en la propia cartela:
   el navegador la oculta con display: none mientras está cerrada. */
.lp-galeria__cartelas {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.lp-galeria__cartela {
    padding: 0;
    border: 0;
    background: var(--lp-cartela);
    color: var(--lp-cartela-tinta);
    text-align: left;
    box-shadow: 0 1.8rem 3.5rem var(--lp-sombra-objeto);
    --lp-sup-tinta: var(--lp-cartela-tinta);
    --lp-sup-suave: var(--lp-cartela-suave);
    --lp-sup-linea: var(--lp-cartela-linea);
    --lp-sup-oro: var(--lp-cartela-oro);
    --lp-foco: var(--lp-accion-papel);
    --lp-accion: var(--lp-accion-papel);
    --lp-accion-alta: var(--lp-accion-papel-alta);
    --lp-accion-tinta: var(--lp-accion-papel-tinta);
    --lp-accion-borde: var(--lp-accion-papel-borde);
}

    .lp-galeria__cartela:focus {
        outline: none;
    }

@supports selector(:popover-open) {
    .lp-galeria__cartelas {
        margin-top: 0;
    }

    .lp-galeria__cartela {
        width: min(60rem, 100% - 2rem);
        max-height: calc(100% - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow: auto;
        overscroll-behavior: contain;
    }

        /* El velo no hereda las variables en todos los navegadores: su color va
           escrito, con su versión para el tema oscuro. */
        .lp-galeria__cartela::backdrop {
            background: rgba(14, 11, 8, .74);
        }

    [data-tema="oscuro"] .lp-galeria__cartela::backdrop {
        background: rgba(0, 0, 0, .82);
    }
}

@supports selector(:popover-open) {
    /* Con una cartela abierta el botón flotante sobra: queda bajo el velo. */
    .lp-galeria:has(:popover-open) .lp-galeria__flotante {
        opacity: 0;
        visibility: hidden;
    }
}

@supports not selector(:popover-open) {
    .lp-galeria__cartela {
        position: static;
        width: auto;
        margin: 0;
    }

    .lp-galeria__cartela-cerrar {
        display: none;
    }
}

.lp-galeria__cartela-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "barra"
        "foto"
        "texto";
}

.lp-galeria__cartela-barra {
    position: sticky;
    top: 0;
    z-index: 1;
    grid-area: barra;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem .65rem 1.5rem;
    border-bottom: 1px solid var(--lp-cartela-linea);
    background: var(--lp-cartela);
}

.lp-galeria__cartela-numero {
    color: var(--lp-cartela-oro);
    font-family: var(--lp-rotulo-letra);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-galeria__cartela-cerrar {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.6rem;
    padding: .4rem .9rem;
    border: 1px solid var(--lp-cartela-tinta);
    border-radius: 0;
    background: transparent;
    color: var(--lp-cartela-tinta);
    font-family: var(--lp-rotulo-letra);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

    .lp-galeria__cartela-cerrar:hover {
        background: var(--lp-cartela-tinta);
        color: var(--lp-cartela);
    }

.lp-galeria__cartela-cerrar-icono {
    width: 1rem;
    height: 1rem;
    --lp-dibujo-trazo: currentColor;
    --lp-dibujo-grosor: 2px;
}

.lp-galeria__cartela-foto {
    grid-area: foto;
    display: block;
    margin: 1.25rem 1.25rem 0;
    padding: clamp(.5rem, 1.5vw, .9rem);
    border: clamp(.4rem, 1vw, .65rem) solid var(--lp-marco-liso);
    background: var(--lp-paspartu);
    box-shadow: 0 1rem 1.4rem -1rem var(--lp-sombra-honda);
}

    .lp-galeria__cartela-foto img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

.lp-galeria__cartela-texto {
    grid-area: texto;
    padding: 1.4rem 1.5rem 1.75rem;
}

.lp-galeria__cartela-antetitulo {
    color: var(--lp-cartela-oro);
    font-family: var(--lp-rotulo-letra);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
}

    .lp-galeria__cartela-antetitulo cite {
        letter-spacing: 0;
    }

.lp-galeria__cartela-titulo {
    margin-top: .35rem;
    font-family: var(--lp-didona);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
}

.lp-galeria__cartela-resumen {
    margin-top: .7rem;
    color: var(--lp-cartela-suave);
}

.lp-galeria__cartela-datos {
    display: grid;
    gap: .6rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lp-cartela-linea);
}

    .lp-galeria__cartela-datos dt,
    .lp-galeria__cartela-facultades dt {
        color: var(--lp-cartela-oro);
        font-family: var(--lp-rotulo-letra);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .lp-galeria__cartela-datos dd {
        font-size: .95rem;
        line-height: 1.45;
    }

.lp-galeria__cartela-subtitulo {
    margin-top: 1.3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lp-cartela-linea);
    font-family: var(--lp-didona);
    font-size: 1.2rem;
    font-weight: 400;
    font-style: italic;
}

.lp-galeria__cartela-carreras {
    display: grid;
    gap: .3rem 1.25rem;
    margin-top: .7rem;
    font-size: .93rem;
    line-height: 1.4;
}

    .lp-galeria__cartela-carreras li {
        position: relative;
        padding-left: .95rem;
    }

        .lp-galeria__cartela-carreras li::before {
            content: "";
            position: absolute;
            top: .62em;
            left: 0;
            width: .45rem;
            height: 1px;
            background: var(--lp-cartela-oro);
        }

.lp-galeria__cartela-facultades {
    display: grid;
    gap: .7rem;
    margin-top: .7rem;
}

    .lp-galeria__cartela-facultades dd {
        font-size: .93rem;
        line-height: 1.45;
    }

.lp-galeria__cartela-accion {
    margin-top: 1.5rem;
}

@media (min-width: 576px) {
    .lp-galeria__cartela-carreras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .lp-galeria__cartela-cuerpo {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-areas:
            "barra barra"
            "foto texto";
        align-items: start;
    }

    .lp-galeria__cartela-foto {
        position: sticky;
        top: 4.75rem;
        margin: 1.75rem 0 1.75rem 1.75rem;
    }

        .lp-galeria__cartela-foto img {
            aspect-ratio: 4 / 5;
        }

    .lp-galeria__cartela-texto {
        padding: 1.75rem 2rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .lp-galeria__cartela-accion .lp-galeria__boton {
        width: 100%;
    }
}

/* La cartela sube y aparece al abrirse; @starting-style da el punto de partida
   desde display: none y allow-discrete deja que display y overlay esperen al
   final de la salida. */
@media (prefers-reduced-motion: no-preference) {
    @supports selector(:popover-open) {
        .lp-galeria__cartela {
            opacity: 0;
            translate: 0 1.25rem;
            transition-property: opacity, translate, overlay, display;
            transition-duration: .35s;
            transition-timing-function: cubic-bezier(.2, .7, .3, 1);
            transition-behavior: allow-discrete;
        }

            .lp-galeria__cartela:popover-open {
                opacity: 1;
                translate: 0 0;
            }

        @starting-style {
            .lp-galeria__cartela:popover-open {
                opacity: 0;
                translate: 0 1.25rem;
            }
        }
    }
}

/* ═══ Gabinete de la fórmula ═══════════════════════════════════════════════
   Cada tríptico es un contenedor: la cifra de cada lienzo se mide con su ancho y
   el nombre desaparece cuando ya no cabe (el pie lo dice entero). El ancho de
   cada lienzo es su peso (--lp-peso como flex-grow). */
.lp-galeria__tripticos {
    display: grid;
    gap: 2.25rem;
}

.lp-galeria__triptico {
    margin: 0;
    container-type: inline-size;
}

.lp-galeria__lienzos {
    display: flex;
    gap: clamp(.4rem, 2.2cqi, 1.1rem);
    height: clamp(9rem, 44cqi, 15rem);
    padding: clamp(.6rem, 3.5cqi, 1.5rem) clamp(.5rem, 3cqi, 1.25rem);
    background: radial-gradient(ellipse 58% 62% at 50% 46%, var(--lp-halo), transparent 70%);
}

.lp-galeria__lienzo {
    position: relative;
    flex: var(--lp-peso) 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .2rem;
    min-width: 0;
    padding: 0;
    background-color: var(--lp-lienzo-color);
    background-image:
        radial-gradient(ellipse 75% 60% at 50% 40%, var(--lp-lienzo-luz), transparent 72%),
        linear-gradient(180deg, transparent 55%, var(--lp-lienzo-pie));
    color: var(--lp-lienzo-tinta);
    box-shadow: inset 0 0 0 1px var(--lp-filo), inset 0 0 1.6rem var(--lp-lienzo-borde), .3rem 1rem 1.3rem -.8rem var(--lp-sombra-marco);
}

    /* Sin relleno en el lienzo: con flex-basis 0 el relleno contaría como ancho
       fijo y los lienzos dejarían de medir exactamente su peso. El aire va en
       los márgenes de su contenido. */
    .lp-galeria__lienzo > * {
        margin-inline: clamp(.35rem, 2.6cqi, 1rem);
    }

        .lp-galeria__lienzo > :last-child {
            margin-bottom: clamp(.35rem, 2.6cqi, 1rem);
        }

.lp-galeria__lienzo--lectura {
    --lp-lienzo-color: var(--lp-lienzo-lectura);
    --lp-lienzo-tinta: var(--lp-lienzo-lectura-tinta);
}

.lp-galeria__lienzo--matematica {
    --lp-lienzo-color: var(--lp-lienzo-matematica);
    --lp-lienzo-tinta: var(--lp-lienzo-matematica-tinta);
}

.lp-galeria__lienzo--colegio {
    --lp-lienzo-color: var(--lp-lienzo-colegio);
    --lp-lienzo-tinta: var(--lp-lienzo-colegio-tinta);
}

.lp-galeria__triptico--ciencias .lp-galeria__lienzo--lectura {
    --lp-peso: 32;
}

.lp-galeria__triptico--ciencias .lp-galeria__lienzo--matematica {
    --lp-peso: 48;
}

.lp-galeria__triptico--demas .lp-galeria__lienzo--lectura,
.lp-galeria__triptico--demas .lp-galeria__lienzo--matematica {
    --lp-peso: 40;
}

.lp-galeria__lienzo--colegio {
    --lp-peso: 20;
}

.lp-galeria__lienzo-cifra {
    font-family: var(--lp-didona);
    font-size: clamp(.85rem, 5.2cqi, 2.4rem);
    line-height: 1;
    white-space: nowrap;
}

.lp-galeria__lienzo-nombre {
    overflow: hidden;
    font-family: var(--lp-rotulo-letra);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

@container (max-width: 27rem) {
    .lp-galeria__lienzo-nombre {
        display: none;
    }
}

.lp-galeria__triptico-pie {
    max-width: 34rem;
    margin-top: 1rem;
    padding: .75rem .95rem .85rem;
    background: var(--lp-cartela);
    color: var(--lp-cartela-tinta);
    font-size: .92rem;
    line-height: 1.5;
    box-shadow: 0 .45rem .9rem -.55rem var(--lp-sombra-marco), 0 0 0 1px var(--lp-filo-papel);
}

.lp-galeria__triptico-numero {
    display: block;
    margin-bottom: .2rem;
    color: var(--lp-cartela-oro);
    font-family: var(--lp-rotulo-letra);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-galeria__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.75rem;
    margin-top: 2rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

.lp-galeria__leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.lp-galeria__muestra {
    flex: none;
    width: 1rem;
    height: 1rem;
    box-shadow: inset 0 0 0 1px var(--lp-filo);
}

.lp-galeria__muestra--lectura {
    background: var(--lp-lienzo-lectura);
}

.lp-galeria__muestra--matematica {
    background: var(--lp-lienzo-matematica);
}

.lp-galeria__muestra--colegio {
    background: var(--lp-lienzo-colegio);
}

.lp-galeria__gabinete-nota {
    max-width: 44rem;
    margin-top: 1rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

    .lp-galeria__gabinete-nota a {
        color: var(--lp-sup-tinta);
        text-decoration: underline;
        text-underline-offset: .18em;
    }

@media (min-width: 992px) {
    .lp-galeria__tripticos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }
}

/* Los tres lienzos parten iguales y se reparten la pared al entrar en pantalla. */
@media (prefers-reduced-motion: no-preference) {
    .lp-galeria--animada .lp-galeria__lienzo {
        transition: flex-grow 1.5s cubic-bezier(.2, .7, .2, 1) .2s;
    }

    .lp-galeria--animada .lp-galeria__triptico:not(.lp-galeria--visible) .lp-galeria__lienzo {
        flex-grow: 1;
    }
}

/* ═══ Plano de la exposición ═══════════════════════════════════════════════ */
.lp-galeria__plano {
    display: grid;
    gap: 2rem;
}

.lp-galeria__plano-figura {
    margin: 0;
    padding: clamp(.75rem, 2.5cqi, 1.75rem);
    border: 1px solid var(--lp-pared-linea);
    background: var(--lp-plano-fondo);
    box-shadow: 0 1rem 2rem -1.4rem var(--lp-sombra-marco);
}

.lp-galeria__plano-dibujo {
    display: block;
    width: 100%;
    height: auto;
}

.lp-galeria__plano-sala {
    fill: var(--lp-plano-sala);
    transition: fill .3s ease;
}

.lp-galeria__plano-obras {
    fill: var(--lp-plano-obra);
}

.lp-galeria__plano-bancos {
    fill: var(--lp-plano-banco);
}

.lp-galeria__plano-numero {
    fill: var(--lp-plano-numero);
    font-family: var(--lp-didona);
    font-size: 44px;
    text-anchor: middle;
}

/* El recorrido no lleva vector-effect: pathLength="1" mide el trazo en unidades
   del dibujo y así stroke-dashoffset puede dibujarlo de punta a punta. */
.lp-galeria__plano-recorrido {
    fill: none;
    stroke: var(--lp-plano-recorrido);
    stroke-width: 3.5;
    stroke-linecap: round;
}

.lp-galeria__plano-muros {
    fill: none;
    stroke: var(--lp-plano-muro);
    stroke-width: 7;
    stroke-linecap: square;
}

.lp-galeria__plano-salida {
    fill: var(--lp-plano-recorrido);
}

.lp-galeria__plano-tu {
    fill: var(--lp-plano-tu);
    stroke: var(--lp-plano-tu-borde);
    stroke-width: 3;
}

.lp-galeria__plano-pie {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .8rem;
    color: var(--lp-sup-suave);
    font-family: var(--lp-rotulo-letra);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
}

    .lp-galeria__plano-pie span:last-child {
        text-align: right;
    }

.lp-galeria__salas {
    display: grid;
    gap: 1rem;
}

.lp-galeria__sala {
    padding: 1.1rem 1.15rem 1.25rem;
    border-top: 3px solid var(--lp-oro-claro);
    background: var(--lp-panel);
    box-shadow: 0 .8rem 1.4rem -1.2rem var(--lp-sombra-marco);
    transition: border-color .25s ease;
}

    .lp-galeria__sala:hover {
        border-top-color: var(--lp-oro);
    }

.lp-galeria__sala-numero {
    color: var(--lp-sup-oro);
    font-family: var(--lp-rotulo-letra);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-galeria__sala-titulo {
    margin-top: .3rem;
    font-family: var(--lp-didona);
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.15;
}

.lp-galeria__sala-cuando {
    display: flex;
    flex-direction: column;
    margin-top: .55rem;
    font-size: .88rem;
    line-height: 1.45;
}

.lp-galeria__sala-semanas {
    font-weight: 700;
}

.lp-galeria__sala-fechas {
    color: var(--lp-sup-suave);
}

.lp-galeria__sala-texto {
    margin-top: .55rem;
    color: var(--lp-sup-suave);
    font-size: .93rem;
}

/* Al pasar por una cartela se ilumina su sala en el plano. */
.lp-galeria__plano:has(.lp-galeria__sala--1:hover) .lp-galeria__plano-sala--1,
.lp-galeria__plano:has(.lp-galeria__sala--2:hover) .lp-galeria__plano-sala--2,
.lp-galeria__plano:has(.lp-galeria__sala--3:hover) .lp-galeria__plano-sala--3,
.lp-galeria__plano:has(.lp-galeria__sala--4:hover) .lp-galeria__plano-sala--4 {
    fill: var(--lp-plano-sala-activa);
}

@media (min-width: 576px) {
    .lp-galeria__salas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .lp-galeria__salas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lp-galeria__plano-figura {
        width: min(100%, 58rem);
        margin-inline: auto;
    }
}

/* El recorrido se dibuja de la entrada a la salida, cada sala se enciende a su
   paso y el punto de la entrada late tres veces. Sin animation-fill-mode: al
   terminar, el relleno vuelve a ser el de la regla y el realce del puntero
   sigue funcionando. */
@media (prefers-reduced-motion: no-preference) {
    .lp-galeria--animada .lp-galeria__plano-recorrido {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 2.8s cubic-bezier(.45, 0, .25, 1) .3s;
    }

    .lp-galeria--animada .lp-galeria__plano.lp-galeria--visible .lp-galeria__plano-recorrido {
        stroke-dashoffset: 0;
    }

    .lp-galeria--animada .lp-galeria__plano.lp-galeria--visible .lp-galeria__plano-sala {
        animation: lp-galeria-sala-luz 1.3s ease-out .3s;
    }

    .lp-galeria--animada .lp-galeria__plano.lp-galeria--visible .lp-galeria__plano-sala--2 {
        animation-delay: 1s;
    }

    .lp-galeria--animada .lp-galeria__plano.lp-galeria--visible .lp-galeria__plano-sala--3 {
        animation-delay: 1.7s;
    }

    .lp-galeria--animada .lp-galeria__plano.lp-galeria--visible .lp-galeria__plano-sala--4 {
        animation-delay: 2.4s;
    }

    .lp-galeria--animada .lp-galeria__plano-tu {
        transform-box: fill-box;
        transform-origin: center;
    }

    .lp-galeria--animada .lp-galeria__plano.lp-galeria--visible .lp-galeria__plano-tu {
        animation: lp-galeria-latido 1s ease-in-out 3;
    }
}

@keyframes lp-galeria-sala-luz {
    0%,
    100% {
        fill: var(--lp-plano-sala);
    }

    35% {
        fill: var(--lp-plano-sala-luz);
    }
}

@keyframes lp-galeria-latido {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }
}

/* ═══ Salón de honor ═══════════════════════════════════════════════════════
   Placas de bronce con filete grabado, cuatro tornillos y un destello que las
   cruza una vez. */
.lp-galeria__placas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.75rem, .5rem + 1.2cqi, 1.5rem);
}

.lp-galeria__placa {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 9.5rem;
    padding: 1.5rem .95rem 1.45rem;
    border-radius: .2rem;
    background: var(--lp-bronce);
    color: var(--lp-bronce-tinta);
    text-align: center;
    box-shadow:
        inset 0 0 0 1px var(--lp-bronce-filete),
        inset 0 0 0 .4rem var(--lp-bronce-surco),
        inset 0 0 0 calc(.4rem + 1px) var(--lp-bronce-filete),
        0 1.2rem 1.6rem -1rem var(--lp-sombra-placa);
}

    .lp-galeria__placa::before {
        content: "";
        position: absolute;
        inset: .7rem;
        background:
            radial-gradient(circle, var(--lp-tornillo) 0 .12rem, var(--lp-tornillo-borde) .13rem .2rem, transparent .21rem) left top / .45rem .45rem no-repeat,
            radial-gradient(circle, var(--lp-tornillo) 0 .12rem, var(--lp-tornillo-borde) .13rem .2rem, transparent .21rem) right top / .45rem .45rem no-repeat,
            radial-gradient(circle, var(--lp-tornillo) 0 .12rem, var(--lp-tornillo-borde) .13rem .2rem, transparent .21rem) left bottom / .45rem .45rem no-repeat,
            radial-gradient(circle, var(--lp-tornillo) 0 .12rem, var(--lp-tornillo-borde) .13rem .2rem, transparent .21rem) right bottom / .45rem .45rem no-repeat;
        pointer-events: none;
    }

    .lp-galeria__placa::after {
        content: "";
        position: absolute;
        top: -20%;
        bottom: -20%;
        left: -60%;
        width: 40%;
        background: linear-gradient(100deg, transparent, var(--lp-bronce-brillo), transparent);
        opacity: 0;
        transform: skewX(-18deg);
        pointer-events: none;
    }

.lp-galeria__placa-cifra {
    font-family: var(--lp-didona);
    font-size: min(clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem), 10cqi);
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    text-shadow: 0 1px 0 var(--lp-bronce-brillo);
}

.lp-galeria__placa-texto {
    max-width: 15rem;
    color: var(--lp-bronce-suave);
    font-size: .86rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .lp-galeria__placas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lp-galeria--animada .lp-galeria__placa.lp-galeria--visible::after {
        animation: lp-galeria-destello 1.4s ease-out calc(.4s + var(--lp-orden, 0) * 120ms);
    }
}

@keyframes lp-galeria-destello {
    0% {
        left: -60%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}

/* ═══ Taquilla ═════════════════════════════════════════════════════════════
   La sombra va en el <li> con drop-shadow porque la máscara del papel, que
   muerde las dos muescas del troquel, también recortaría una sombra propia. */
.lp-galeria__boletos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
    gap: 1.25rem;
}

.lp-galeria__boleto {
    display: flex;
    filter: drop-shadow(0 .65rem .7rem var(--lp-sombra-papel));
}

.lp-galeria__boleto-papel {
    --lp-talon: 3.7rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-radius: .35rem;
    background-color: var(--lp-boleto);
    background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 .9rem, var(--lp-boleto-trama) .9rem 1rem);
    color: var(--lp-boleto-tinta);
    -webkit-mask:
        radial-gradient(circle .65rem at 0 calc(100% - var(--lp-talon)), transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle .65rem at 100% calc(100% - var(--lp-talon)), transparent 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle .65rem at 0 calc(100% - var(--lp-talon)), transparent 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle .65rem at 100% calc(100% - var(--lp-talon)), transparent 98%, #000) right / 51% 100% no-repeat;
    transition: translate .3s ease;
}

@media (hover: hover) {
    .lp-galeria__boleto:hover .lp-galeria__boleto-papel {
        translate: 0 -.3rem;
    }
}

.lp-galeria__boleto-cuerpo {
    flex: 1 1 auto;
    padding: 1.25rem 1.25rem 1.1rem;
}

.lp-galeria__boleto-serie {
    color: var(--lp-boleto-oro);
    font-family: var(--lp-rotulo-letra);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.lp-galeria__boleto-titulo {
    margin-top: .45rem;
    font-family: var(--lp-didona);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.12;
}

.lp-galeria__boleto-datos {
    display: grid;
    gap: .5rem;
    margin-top: .85rem;
}

    .lp-galeria__boleto-datos dt {
        color: var(--lp-boleto-oro);
        font-family: var(--lp-rotulo-letra);
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .lp-galeria__boleto-datos dd {
        font-size: .88rem;
        line-height: 1.4;
    }

.lp-galeria__boleto-talon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    height: var(--lp-talon);
    padding: 0 1.25rem;
    border-top: 2px dashed var(--lp-boleto-linea);
}

.lp-galeria__boleto-admite {
    color: var(--lp-boleto-suave);
    font-family: var(--lp-rotulo-letra);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-galeria__boleto-numero {
    color: var(--lp-boleto-oro);
    font-family: var(--lp-didona);
    font-size: 1.9rem;
    line-height: 1;
}

.lp-galeria__taquilla-nota {
    max-width: 46rem;
    margin-top: 1.75rem;
    color: var(--lp-sup-suave);
    font-size: .92rem;
}

/* ═══ Servicios al visitante ═══════════════════════════════════════════════
   Señales negras con el pictograma en un recuadro blanco y un filete dorado bajo
   el título. */
.lp-galeria__senales {
    display: grid;
    gap: 1rem;
}

.lp-galeria__senal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icono titulo"
        "icono texto";
    align-content: start;
    align-items: start;
    gap: .4rem 1.1rem;
    padding: 1.25rem 1.3rem 1.35rem;
    background: var(--lp-senal);
    color: var(--lp-senal-tinta);
    box-shadow: 0 0 0 1px var(--lp-senal-borde), 0 1rem 1.4rem -1rem var(--lp-sombra-colgada);
    --lp-dibujo-relleno: var(--lp-senal-tinta);
    --lp-foco: var(--lp-senal-filete);
}

.lp-galeria__senal-icono {
    grid-area: icono;
    width: 3.3rem;
    height: 3.3rem;
    padding: .35rem;
    border: 2px solid var(--lp-senal-tinta);
    border-radius: .3rem;
}

.lp-galeria__senal-titulo {
    grid-area: titulo;
    padding-bottom: .45rem;
    border-bottom: 2px solid var(--lp-senal-filete);
    font-family: var(--lp-rotulo-letra);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.lp-galeria__senal-texto {
    grid-area: texto;
    color: var(--lp-senal-suave);
    font-size: .92rem;
    line-height: 1.5;
}

@media (min-width: 576px) {
    .lp-galeria__senales {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .lp-galeria__senales {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* ═══ Visita en familia ════════════════════════════════════════════════════
   Las postales se giran con transform para no pisar el translate de la
   aparición, que se suma aparte. */
/* El relleno lateral deja sitio a las esquinas que asoman al girar. */
.lp-galeria__postales {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: .4rem;
    grid-template-areas:
        "p1"
        "p2"
        "dorso";
    gap: 1.75rem;
}

.lp-galeria__postal {
    margin: 0;
    padding: clamp(.45rem, 1.2vw, .7rem);
    background: var(--lp-postal-borde);
    box-shadow: 0 1.2rem 1.6rem -1.1rem var(--lp-sombra-papel), 0 0 0 1px var(--lp-filo-papel);
    transform: rotate(-1.2deg);
}

.lp-galeria__postal--1 {
    grid-area: p1;
}

.lp-galeria__postal--2 {
    grid-area: p2;
    transform: rotate(1.2deg);
}

.lp-galeria__dorso {
    grid-area: dorso;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: clamp(1.25rem, 1rem + 2vw, 2.1rem);
    background-color: var(--lp-postal);
    background-image: repeating-linear-gradient(115deg, transparent 0 .5rem, var(--lp-postal-fibra) .5rem .55rem);
    color: var(--lp-postal-tinta);
    box-shadow: 0 1.4rem 2rem -1.3rem var(--lp-sombra-papel), 0 0 0 1px var(--lp-filo-papel);
    transform: rotate(.6deg);
    --lp-foco: var(--lp-postal-tinta);
}

.lp-galeria__dorso-sobre {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    order: -1;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lp-postal-linea);
}

.lp-galeria__dorso-saludo {
    font-family: var(--lp-mano);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.3;
}

.lp-galeria__dorso-pasos {
    display: grid;
    gap: .55rem;
    margin-top: .8rem;
    font-family: var(--lp-mano);
    font-size: 1rem;
    line-height: 1.55;
    counter-reset: lp-galeria-paso;
}

    .lp-galeria__dorso-pasos li {
        position: relative;
        padding-left: 1.6rem;
        counter-increment: lp-galeria-paso;
    }

        .lp-galeria__dorso-pasos li::before {
            content: counter(lp-galeria-paso) ".";
            position: absolute;
            left: 0;
            color: var(--lp-postal-acento);
            font-weight: 700;
        }

.lp-galeria__dorso-firma {
    margin-top: 1.1rem;
    font-family: var(--lp-mano);
    font-size: 1.15rem;
    text-align: right;
}

/* La estampilla: dos capas de máscara se suman, una con los agujeros del
   dentado y otra que rellena el centro. */
.lp-galeria__estampilla {
    align-self: flex-end;
    width: 4.6rem;
    margin-right: .2rem;
    padding: .35rem;
    background: var(--lp-estampilla);
    transform: rotate(3deg);
    -webkit-mask:
        radial-gradient(circle .18rem, transparent 96%, #000) -.22rem -.22rem / .44rem .44rem round,
        linear-gradient(#000, #000) center / calc(100% - .44rem) calc(100% - .44rem) no-repeat;
    mask:
        radial-gradient(circle .18rem, transparent 96%, #000) -.22rem -.22rem / .44rem .44rem round,
        linear-gradient(#000, #000) center / calc(100% - .44rem) calc(100% - .44rem) no-repeat;
}

.lp-galeria__estampilla-dibujo {
    display: block;
    width: 100%;
    aspect-ratio: 60 / 72;
}

/* El matasellos: un círculo con el proceso de admisión y sus ondas, montado
   sobre el borde izquierdo de la estampilla. */
.lp-galeria__matasellos {
    position: absolute;
    top: .9rem;
    right: 3.4rem;
    display: grid;
    place-items: center;
    width: 4.9rem;
    height: 4.9rem;
    padding: .55rem;
    border: 2px solid var(--lp-postal-sello);
    border-radius: 50%;
    color: var(--lp-postal-sello);
    font-family: var(--lp-rotulo-letra);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-14deg);
}

    .lp-galeria__matasellos::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: 3.2rem;
        height: 1.4rem;
        margin-top: -.7rem;
        background: repeating-linear-gradient(180deg, var(--lp-postal-sello) 0 2px, transparent 2px .45rem);
        -webkit-mask: radial-gradient(ellipse 60% 120% at 100% 50%, #000 60%, transparent 62%);
        mask: radial-gradient(ellipse 60% 120% at 100% 50%, #000 60%, transparent 62%);
    }

.lp-galeria__dorso-direccion {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.lp-galeria__dorso-renglon {
    padding-bottom: .2rem;
    border-bottom: 1px dotted var(--lp-postal-suave);
    color: var(--lp-postal-suave);
    font-family: var(--lp-mano);
    font-size: 1rem;
}

@media (min-width: 576px) {
    .lp-galeria__dorso {
        grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
        gap: 1.5rem;
    }

    .lp-galeria__dorso-sobre {
        order: 0;
        padding: 0 0 0 1.5rem;
        border-bottom: 0;
        border-left: 1px solid var(--lp-postal-linea);
    }

    .lp-galeria__dorso-direccion {
        margin-top: auto;
    }
}

@media (min-width: 768px) {
    .lp-galeria__postales {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        grid-template-areas:
            "p1 dorso"
            "p2 dorso";
        align-items: center;
        gap: 1.5rem 2.75rem;
    }

    .lp-galeria__postal--1 {
        transform: rotate(-3deg);
    }

    .lp-galeria__postal--2 {
        margin-top: -1.75rem;
        transform: translateX(1.25rem) rotate(2.5deg);
    }

    .lp-galeria__dorso {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-galeria__dorso-sobre {
        order: -1;
        padding: 0 0 1rem;
        border-bottom: 1px solid var(--lp-postal-linea);
        border-left: 0;
    }

    .lp-galeria__dorso-direccion {
        margin-top: 0;
    }
}

@media (min-width: 1200px) {
    .lp-galeria__dorso {
        grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    }

    .lp-galeria__dorso-sobre {
        order: 0;
        padding: 0 0 0 1.5rem;
        border-bottom: 0;
        border-left: 1px solid var(--lp-postal-linea);
    }

    .lp-galeria__dorso-direccion {
        margin-top: auto;
    }
}

/* ═══ Audioguía ════════════════════════════════════════════════════════════
   El aparato es decorado y solo se enseña con espacio de sobra. Cada pista es un
   details: el número y el botón de reproducir son decorado; al abrirse, el botón
   cambia por un ecualizador que se mueve un rato y se queda quieto. */
.lp-galeria__audioguia-rejilla {
    display: grid;
    gap: .5rem;
}

.lp-galeria__aparato {
    display: none;
}

.lp-galeria__pistas {
    display: grid;
}

.lp-galeria__pista {
    border-bottom: 1px solid var(--lp-sup-linea);
}

    .lp-galeria__pista:first-child {
        border-top: 1px solid var(--lp-sup-linea);
    }

.lp-galeria__pista-pregunta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: 1rem .2rem;
    list-style: none;
    cursor: pointer;
}

    .lp-galeria__pista-pregunta::-webkit-details-marker {
        display: none;
    }

.lp-galeria__pista-numero {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1.5px solid var(--lp-sup-tinta);
    border-radius: 50%;
    font-family: var(--lp-rotulo-letra);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.lp-galeria__pista-texto {
    font-family: var(--lp-didona);
    font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem);
    line-height: 1.3;
}

.lp-galeria__pista-boton {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--lp-sup-tinta);
    color: var(--lp-pared-baja);
    transition: background-color .25s ease;
}

.lp-galeria__pista-play {
    width: 1rem;
    height: 1rem;
    --lp-dibujo-relleno: currentColor;
}

.lp-galeria__ecualizador {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 1rem;
}

    .lp-galeria__ecualizador > span {
        width: 3px;
        height: 100%;
        background: currentColor;
        transform-origin: 50% 100%;
    }

        .lp-galeria__ecualizador > span:nth-child(1) {
            transform: scaleY(.5);
        }

        .lp-galeria__ecualizador > span:nth-child(2) {
            transform: scaleY(.9);
        }

        .lp-galeria__ecualizador > span:nth-child(3) {
            transform: scaleY(.65);
        }

        .lp-galeria__ecualizador > span:nth-child(4) {
            transform: scaleY(.8);
        }

.lp-galeria__pista[open] .lp-galeria__pista-numero,
.lp-galeria__pista[open] .lp-galeria__pista-boton {
    border-color: var(--lp-sup-oro);
    background: var(--lp-sup-oro);
    color: var(--lp-pared-baja);
}

.lp-galeria__pista[open] .lp-galeria__pista-play {
    display: none;
}

.lp-galeria__pista[open] .lp-galeria__ecualizador {
    display: flex;
}

.lp-galeria__pista-respuesta {
    padding: 0 .2rem 1.3rem;
    color: var(--lp-sup-suave);
    font-size: .98rem;
}

@media (min-width: 576px) {
    .lp-galeria__pista-respuesta {
        padding-left: calc(2.6rem + .9rem + .2rem);
        padding-right: calc(2.4rem + .9rem);
    }
}

@media (min-width: 992px) {
    .lp-galeria__audioguia-rejilla {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 3.5rem;
        align-items: start;
    }

    .lp-galeria__audioguia-lado {
        position: sticky;
        top: 5.5rem;
    }

    .lp-galeria__aparato {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 10.5rem;
        margin: .5rem 0 0 1.5rem;
        padding: 1.25rem 1rem 1.6rem;
        border-radius: 1.4rem 1.4rem 1.9rem 1.9rem;
        background: var(--lp-aparato);
        box-shadow: inset 0 1px 0 var(--lp-brillo-filo), 0 0 0 1px var(--lp-aparato-borde), 0 1.6rem 2.2rem -1.3rem var(--lp-sombra-marco);
        transform: rotate(-5deg);
    }

    .lp-galeria__aparato-pantalla {
        padding: .55rem .5rem;
        border-radius: .4rem;
        background: var(--lp-aparato-pantalla);
        color: var(--lp-aparato-pantalla-tinta);
        font-family: var(--lp-rotulo-letra);
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-align: center;
        text-transform: uppercase;
        box-shadow: inset 0 2px 6px var(--lp-sombra-colgada-alta);
    }

    .lp-galeria__aparato-teclas {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }

    .lp-galeria__aparato-tecla {
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--lp-aparato-tecla);
        color: var(--lp-aparato-tecla-tinta);
        font-family: var(--lp-rotulo-letra);
        font-size: .8rem;
        font-weight: 600;
        box-shadow: inset 0 1px 0 var(--lp-brillo-filo), 0 2px 0 var(--lp-sombra-colgada);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .lp-galeria__pista[open] .lp-galeria__ecualizador > span {
        animation: lp-galeria-ecualizador .45s ease-in-out 8 alternate;
    }

        .lp-galeria__pista[open] .lp-galeria__ecualizador > span:nth-child(2) {
            animation-delay: .12s;
        }

        .lp-galeria__pista[open] .lp-galeria__ecualizador > span:nth-child(3) {
            animation-delay: .24s;
        }

        .lp-galeria__pista[open] .lp-galeria__ecualizador > span:nth-child(4) {
            animation-delay: .06s;
        }
}

@keyframes lp-galeria-ecualizador {
    from {
        transform: scaleY(.2);
    }

    to {
        transform: scaleY(1);
    }
}

/* ═══ Inauguración ═════════════════════════════════════════════════════════
   La invitación es papel claro con doble filete dorado y esquinas grabadas. */
.lp-galeria > .lp-galeria__inauguracion {
    padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
    text-align: center;
}

.lp-galeria__invitacion {
    position: relative;
    max-width: 42rem;
    margin-inline: auto;
    padding: clamp(2.25rem, 1.75rem + 3vw, 3.75rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
    border: 1px solid var(--lp-invitacion-filete);
    background: var(--lp-invitacion);
    color: var(--lp-invitacion-tinta);
    outline: 1px solid var(--lp-invitacion-filete);
    outline-offset: -.7rem;
    box-shadow: 0 2.4rem 3rem -1.8rem var(--lp-sombra-placa);
    --lp-sup-tinta: var(--lp-invitacion-tinta);
    --lp-sup-suave: var(--lp-invitacion-suave);
    --lp-sup-linea: var(--lp-invitacion-filete);
    --lp-sup-oro: var(--lp-invitacion-oro);
    --lp-foco: var(--lp-accion-papel);
    --lp-accion: var(--lp-accion-papel);
    --lp-accion-alta: var(--lp-accion-papel-alta);
    --lp-accion-tinta: var(--lp-accion-papel-tinta);
    --lp-accion-borde: var(--lp-accion-papel-borde);
}

    .lp-galeria__invitacion::before,
    .lp-galeria__invitacion::after {
        content: "";
        position: absolute;
        width: 1.6rem;
        height: 1.6rem;
        border: 2px solid var(--lp-invitacion-filete);
        pointer-events: none;
    }

    .lp-galeria__invitacion::before {
        top: 1.2rem;
        left: 1.2rem;
        border-right: 0;
        border-bottom: 0;
    }

    .lp-galeria__invitacion::after {
        right: 1.2rem;
        bottom: 1.2rem;
        border-top: 0;
        border-left: 0;
    }

    .lp-galeria__invitacion .lp-galeria__h2 {
        font-size: min(clamp(1.9rem, 1.3rem + 2.6vw, 3rem), 9cqi);
    }

.lp-galeria__invitacion-texto {
    max-width: 30rem;
    margin: 1rem auto 0;
    color: var(--lp-invitacion-suave);
    font-size: 1.05rem;
}

.lp-galeria__invitacion-datos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    margin: 1.7rem 0 2rem;
}

    .lp-galeria__invitacion-datos dt {
        color: var(--lp-invitacion-oro);
        font-family: var(--lp-rotulo-letra);
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    .lp-galeria__invitacion-datos dd {
        font-family: var(--lp-didona);
        font-size: 1.08rem;
        font-style: italic;
    }

.lp-galeria__independiente {
    max-width: 36rem;
    margin: 2.25rem auto 0;
    color: var(--lp-noche-suave);
    font-size: .85rem;
}

@media (min-width: 576px) {
    .lp-galeria__invitacion-datos {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: .6rem 0;
    }

        .lp-galeria__invitacion-datos > div {
            padding: 0 1.25rem;
            border-left: 1px solid var(--lp-invitacion-filete);
        }

            .lp-galeria__invitacion-datos > div:first-child {
                border-left: 0;
            }
}

@media (max-width: 575.98px) {
    .lp-galeria__invitacion .lp-galeria__boton {
        width: 100%;
    }
}

/* ═══ Botón flotante ═══════════════════════════════════════════════════════
   Escondido se aparta hacia abajo y deja de recibir foco: visibility cambia
   al final de la transición para que la salida se vea.

   Va en la esquina inferior IZQUIERDA: la derecha es la de la mascota del sitio,
   que se dibuja por encima y lo taparía. */
.lp-galeria__flotante {
    position: fixed;
    z-index: 1030;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.1rem;
    padding: .75rem 1.35rem;
    border: 1px solid var(--lp-accion-borde);
    background: var(--lp-accion);
    color: var(--lp-accion-tinta);
    font-family: var(--lp-rotulo-letra);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 3px var(--lp-accion), inset 0 0 0 4px var(--lp-accion-borde), 0 .9rem 1.8rem -.7rem var(--lp-sombra-flotante);
    --lp-foco: var(--lp-accion);
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear 0s, background-color .25s ease;
}

    .lp-galeria__flotante:hover {
        background: var(--lp-accion-alta);
        color: var(--lp-accion-tinta);
        box-shadow: inset 0 0 0 3px var(--lp-accion-alta), inset 0 0 0 4px var(--lp-accion-borde), 0 .9rem 1.8rem -.7rem var(--lp-sombra-flotante);
    }

.lp-galeria__flotante-punto {
    flex: none;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--lp-punto);
    box-shadow: 0 0 0 2px var(--lp-accion-tinta);
}

.lp-galeria__flotante--oculto {
    opacity: 0;
    translate: 0 150%;
    visibility: hidden;
    pointer-events: none;
    transition: translate .35s ease, opacity .35s ease, visibility 0s linear .35s;
}

/* En el teléfono el botón ocupa el ancho entre márgenes. Por la derecha se
   detiene donde empieza la esquina de la mascota del sitio, con la reserva que
   publica el marco; sin mascota la variable no existe y el margen vuelve a ser
   el de la izquierda. Al quedar más estrecho, el relleno y el espaciado de las
   letras se acortan para que el rótulo quepa en una línea, y si aun así se
   parte, va centrado. */
@media (max-width: 575.98px) {
    .lp-galeria__flotante {
        right: var(--edu-landing-reserva-mascota, 1rem);
        left: 1rem;
        padding-inline: 1rem;
        letter-spacing: .06em;
        text-align: center;
    }
}

/* Por debajo de 360px ni así cabe junto al punto: el punto, que es adorno, cede
   su sitio y la letra baja un punto, para que el botón no doble su alto. */
@media (max-width: 359.98px) {
    .lp-galeria__flotante {
        padding-inline: .75rem;
        font-size: .8rem;
    }

    .lp-galeria__flotante-punto {
        display: none;
    }
}

/* ═══ Movimiento reducido ══════════════════════════════════════════════════
   Por si alguna regla futura escapa de los bloques no-preference: sin movimiento
   nada se anima ni transiciona. */
@media (prefers-reduced-motion: reduce) {
    .lp-galeria *,
    .lp-galeria *::before,
    .lp-galeria *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Colores forzados ═════════════════════════════════════════════════════
   Con los colores del sistema los fondos desaparecen: marcos, lienzos, placas,
   entradas y señales se dibujan con contornos y el plano con colores del
   sistema. */
@media (forced-colors: active) {
    .lp-galeria {
        --lp-dibujo-trazo: CanvasText;
        --lp-dibujo-relleno: CanvasText;
    }

    .lp-galeria__boton,
    .lp-galeria__flotante,
    .lp-galeria__marco,
    .lp-galeria__libre,
    .lp-galeria__lienzo,
    .lp-galeria__placa,
    .lp-galeria__boleto-papel,
    .lp-galeria__senal,
    .lp-galeria__pista-numero,
    .lp-galeria__cartela,
    .lp-galeria__invitacion {
        border: 2px solid CanvasText;
    }

    .lp-galeria__plano-sala {
        fill: Canvas;
    }

    .lp-galeria__plano-muros {
        stroke: CanvasText;
    }

    .lp-galeria__plano-recorrido,
    .lp-galeria__plano-salida,
    .lp-galeria__plano-tu {
        stroke: Highlight;
        fill: none;
    }

    .lp-galeria__plano-salida,
    .lp-galeria__plano-tu {
        fill: Highlight;
    }

    .lp-galeria__plano-numero,
    .lp-galeria__plano-obras,
    .lp-galeria__plano-bancos {
        fill: CanvasText;
    }

    .lp-galeria__pista[open] .lp-galeria__pista-numero {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}