/* Landing del Ciclo Verano — Universidad Nacional Federico Villarreal.

   TODO cuelga de .lp-cartel. 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. De ahí el prefijo propio, el bloque de
   neutralización y los !important de la costura con la cabecera.

   CONCEPTO: carteles chicha pegados en un muro de Lima. El muro es claro en el
   tema claro y oscuro en el oscuro; los afiches son negros con tintas
   fluorescentes en los dos, como en la calle. Los volantes (aviso a la familia,
   preguntas, formulario) son papel: claros de día y oscuros de noche.

   CUATRO FAMILIAS DE COLOR, Y NO SE MEZCLAN:
     · LA UNIVERSIDAD (--lp-uni-*): negro y naranja de la franja superior,
       idéntica en las landings de la Villarreal.
     · LAS TINTAS (--lp-neon-*): los colores fluorescentes del afiche. Solo van
       sobre el negro del afiche o como fondo con texto oscuro encima (boletos,
       chapas, estrellas): sobre papel claro no se leerían.
     · EL MURO Y EL PAPEL (--lp-muro-*, --lp-volante-*): cambian con el tema.
     · LOS OBJETOS (--lp-madera, --lp-cromo, --lp-polaroid...): la rocola y las
       fotos pegadas; se ven igual de día y de noche, con un leve apagado.

   Las letras de tinta son un degradado recortado al texto. Con colores forzados
   del sistema ese recorte desaparecería con el texto dentro: hay un bloque al
   final que lo devuelve a texto normal.

   Todo el movimiento respeta la preferencia de menos movimiento del sistema, y
   ninguna animación se repite sin fin. */
.lp-cartel {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #141414;
    --lp-uni-alto: #262626;
    --lp-uni-naranja: #F26B1D;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-plata: #D6D6D6;
    --lp-uni-tipo: "Trebuchet MS", "Segoe UI", sans-serif;
    /* ── Tintas fluorescentes ──────────────────────────────────────────── */
    --lp-neon-rosa: #FF2E93;
    --lp-neon-rosa-claro: #FF9CCB;
    --lp-neon-amarillo: #FFE600;
    --lp-neon-naranja: #FF7A00;
    --lp-neon-mandarina: #FFB23D;
    --lp-neon-verde: #3DFF6E;
    --lp-neon-lima: #D6FF3D;
    --lp-neon-celeste: #00E5FF;
    --lp-neon-hielo: #B9F6FF;
    --lp-neon-violeta: #B26BFF;
    --lp-neon-lila: #E3C8FF;
    --lp-neon-tinta: #140A12;
    --lp-brillo-rosa: rgba(255, 46, 147, .55);
    --lp-brillo-amarillo: rgba(255, 230, 0, .5);
    --lp-brillo-celeste: rgba(0, 229, 255, .5);
    /* Halo de fondo del cierre: más tenue que el brillo de los tubos para que el
       texto claro que pasa por encima conserve su contraste. */
    --lp-halo-celeste: rgba(0, 229, 255, .28);
    /* ── El afiche: negro en los dos temas ─────────────────────────────── */
    --lp-afiche: #0E0B12;
    --lp-afiche-alto: #1B1622;
    --lp-afiche-texto: #F7F5FF;
    --lp-afiche-suave: rgba(247, 245, 255, .78);
    --lp-afiche-linea: rgba(247, 245, 255, .18);
    --lp-afiche-linea-fuerte: rgba(247, 245, 255, .42);
    --lp-afiche-grano: rgba(247, 245, 255, .035);
    --lp-afiche-luz: rgba(255, 46, 147, .16);
    --lp-afiche-sombra: rgba(40, 20, 10, .3);
    --lp-afiche-orla: rgba(255, 46, 147, 0);
    /* ── El muro y el papel ────────────────────────────────────────────── */
    --lp-muro: #ECE5D8;
    --lp-muro-veta: rgba(60, 40, 20, .035);
    --lp-muro-mancha: rgba(120, 90, 60, .08);
    --lp-muro-tinta: #231C28;
    --lp-muro-suave: #5A5160;
    --lp-resto-rosa: rgba(255, 46, 147, .12);
    --lp-resto-celeste: rgba(0, 170, 200, .1);
    --lp-volante: #FFFDF6;
    --lp-volante-alto: #FFFFFF;
    --lp-volante-tinta: #1B1620;
    --lp-volante-suave: #57505E;
    --lp-volante-acento: #C2185B;
    --lp-volante-borde: rgba(27, 22, 32, .18);
    --lp-volante-sombra: rgba(40, 20, 10, .2);
    --lp-cinta: rgba(236, 224, 196, .86);
    --lp-cinta-sombra: rgba(60, 40, 20, .18);
    /* ── Objetos ───────────────────────────────────────────────────────── */
    --lp-polaroid: #FBF9F4;
    --lp-polaroid-tinta: #2A2330;
    --lp-madera: #6A3517;
    --lp-madera-oscura: #2E150A;
    --lp-cromo: #D5DAE1;
    --lp-cromo-sombra: #7C838D;
    --lp-vidrio: #0B1016;
    --lp-vinilo: #111114;
    --lp-vinilo-surco: #26262B;
    --lp-noche: #0A0710;
    --lp-noche-ladrillo: rgba(255, 255, 255, .025);
    --lp-letrero-apagado: #3A1A2C;
    --lp-whatsapp: #25D366;
    --lp-whatsapp-tinta: #062B15;
    /* ── Acción ────────────────────────────────────────────────────────── */
    --lp-chapa-arriba: #FFE600;
    --lp-chapa-abajo: #FFA200;
    --lp-chapa-tinta: #140A00;
    --lp-chapa-sombra: #FF2E93;
    --lp-chapa-brillo: rgba(255, 162, 0, .35);
    --lp-foco: #00E5FF;
    --lp-foco-papel: #0057B8;
    /* ── Medidas y tipografías ─────────────────────────────────────────── */
    --lp-ancho: 76rem;
    --lp-letrero: Impact, Haettenschweiler, "Franklin Gothic Heavy", "Arial Black", "Arial Narrow Bold", sans-serif;
    --lp-rotulo: "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    --lp-mano: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Neue", cursive;
    --lp-led: Consolas, "Cascadia Mono", "Courier New", monospace;
    margin: 0;
    background: var(--lp-muro);
    color: var(--lp-muro-tinta);
    font-family: var(--lp-rotulo);
    font-size: 1rem;
    line-height: 1.6;
    color-scheme: light;
}

/* Tema oscuro del sitio: el muro de noche. El atributo lo pone Akcadmia en un
   ancestro; aquí solo se reasignan las variables, nunca las reglas. Los afiches
   ganan un filo rosa para no perderse contra un muro casi tan oscuro como ellos. */
[data-tema="oscuro"] .lp-cartel {
    --lp-uni: #0C0C0C;
    --lp-uni-alto: #1E1E1E;
    --lp-uni-naranja: #FF7A2E;
    --lp-uni-plata: #E3E3E3;
    --lp-afiche-sombra: rgba(0, 0, 0, .6);
    --lp-afiche-orla: rgba(255, 46, 147, .38);
    --lp-muro: #15121A;
    --lp-muro-veta: rgba(255, 255, 255, .022);
    --lp-muro-mancha: rgba(255, 255, 255, .03);
    --lp-muro-tinta: #F1ECF5;
    --lp-muro-suave: #BDB5C7;
    --lp-resto-rosa: rgba(255, 46, 147, .07);
    --lp-resto-celeste: rgba(0, 229, 255, .05);
    --lp-volante: #25212B;
    --lp-volante-alto: #2E2935;
    --lp-volante-tinta: #F1ECF5;
    --lp-volante-suave: #BEB6C8;
    --lp-volante-acento: #FF6FB5;
    --lp-volante-borde: rgba(241, 236, 245, .18);
    --lp-volante-sombra: rgba(0, 0, 0, .5);
    --lp-cinta: rgba(190, 178, 150, .5);
    --lp-cinta-sombra: rgba(0, 0, 0, .3);
    --lp-polaroid: #E6E1D8;
    --lp-foco-papel: #7CC4FF;
    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 distinga. El color va escrito porque aquí se pinta un ancestro
   de .lp-cartel, que no ve sus variables. */
body:has(> .lp-cartel) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #141414;
}

[data-tema="oscuro"] body:has(> .lp-cartel) {
    background-color: #0C0C0C;
}

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

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

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   :where aporta cero especificidad: solo derrota las reglas de elemento del sitio
   y queda por debajo de las clases de esta hoja. */
.lp-cartel :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, a, span, strong, small, em, label, legend, summary, button, output, aside, article, figure, figcaption, input, select, option, optgroup, details, fieldset, abbr) {
    color: inherit;
    font-family: inherit;
}

.lp-cartel,
.lp-cartel *,
.lp-cartel *::before,
.lp-cartel *::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-cartel [hidden] {
    display: none !important;
}

/* Sin guion no se escribe ninguna fecha: lo que depende de ellas no se enseña
   para no dejar etiquetas con el hueco vacío. */
.lp-cartel:not(.lp-cartel--animada) [data-depende-fechas] {
    display: none !important;
}

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

.lp-cartel__ancho {
    width: min(100% - 2.5rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-cartel__ancho--estrecho {
    width: min(100% - 2.5rem, 52rem);
}

.lp-cartel svg {
    fill: currentColor;
}

.lp-cartel__icono {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
}

/* Un dato que va después de un texto lleva su punto medio solo si el guion lo
   ha rellenado: sin guion no queda un separador colgando. */
.lp-cartel__separado:not(:empty)::before {
    content: " · ";
}

/* Texto que solo leen los lectores de pantalla. */
.lp-cartel__oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   La clase que oculta la pone el guion: sin él todo se ve desde el principio.
   Los afiches y las fotos no suben: se pegan, llegando torcidos y algo más
   grandes hasta quedarse en su giro (--lp-giro). */
.lp-cartel--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

    .lp-cartel--animada [data-revelar].lp-cartel--visible {
        opacity: 1;
        transform: none;
    }

.lp-cartel--animada .lp-cartel__afiche[data-revelar],
.lp-cartel--animada .lp-cartel__rotulo[data-revelar],
.lp-cartel--animada .lp-cartel__polaroid[data-revelar],
.lp-cartel--animada .lp-cartel__volante[data-revelar] {
    transform: rotate(calc(var(--lp-giro) - 5deg)) scale(1.06);
    transition: opacity .45s ease, transform .75s cubic-bezier(.2, .9, .25, 1.25);
}

    .lp-cartel--animada .lp-cartel__afiche[data-revelar].lp-cartel--visible,
    .lp-cartel--animada .lp-cartel__rotulo[data-revelar].lp-cartel--visible,
    .lp-cartel--animada .lp-cartel__polaroid[data-revelar].lp-cartel--visible,
    .lp-cartel--animada .lp-cartel__volante[data-revelar].lp-cartel--visible {
        transform: rotate(var(--lp-giro));
    }

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-cartel__institucional {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-alto));
    color: var(--lp-uni-tinta);
    box-shadow: inset 0 -3px 0 var(--lp-uni-naranja);
}

.lp-cartel__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0 .8rem;
}

.lp-cartel__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .5rem;
    background: var(--lp-uni-naranja);
    color: var(--lp-uni);
}

    .lp-cartel__emblema svg {
        width: 1.5rem;
        height: 1.5rem;
    }

.lp-cartel__uni {
    margin: 0 auto 0 0;
    line-height: 1.3;
}

.lp-cartel__uni-nombre {
    display: block;
    font-family: var(--lp-uni-tipo);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.lp-cartel__uni-lema {
    display: block;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-uni-plata);
}

.lp-cartel__uni-sello {
    padding: .3rem 1rem;
    border: 1px solid var(--lp-uni-naranja);
    border-radius: .4rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-uni-naranja);
}

    /* Sin guion el sello no recibe su texto: se esconde para no dejar un marco vacío. */
    .lp-cartel__uni-sello:empty {
        display: none;
    }

/* ═══ El muro ══════════════════════════════════════════════════════════════
   Revoque con vetas, manchas de humedad y restos de afiches arrancados en dos
   esquinas. overflow-x: clip recorta lo que sobresale sin crear un contenedor de
   desplazamiento. */
.lp-cartel__muro {
    position: relative;
    padding: clamp(2.75rem, 6vw, 4.75rem) 0;
    overflow-x: clip;
    background-color: var(--lp-muro);
    background-image: radial-gradient(ellipse 40% 30% at 12% 18%, var(--lp-muro-mancha), transparent 70%), radial-gradient(ellipse 35% 25% at 88% 78%, var(--lp-muro-mancha), transparent 70%), repeating-linear-gradient(0deg, var(--lp-muro-veta) 0 1px, transparent 1px 7px);
}

    .lp-cartel__muro::before,
    .lp-cartel__muro::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }

    .lp-cartel__muro::before {
        top: 1.2rem;
        left: -2rem;
        width: 11rem;
        height: 8rem;
        background: var(--lp-resto-rosa);
        clip-path: polygon(0 0, 100% 6%, 92% 24%, 100% 41%, 88% 58%, 96% 77%, 84% 100%, 0 94%);
        transform: rotate(-4deg);
    }

    .lp-cartel__muro::after {
        right: -1.5rem;
        bottom: 1rem;
        width: 9rem;
        height: 10rem;
        background: var(--lp-resto-celeste);
        clip-path: polygon(14% 0, 100% 3%, 100% 100%, 9% 96%, 17% 80%, 4% 63%, 15% 44%, 2% 26%);
        transform: rotate(5deg);
    }

.lp-cartel__muro--portada {
    padding-top: clamp(1.75rem, 4vw, 3rem);
}

/* ═══ Afiches, rótulos, volantes y polaroids ═══════════════════════════════
   El afiche lleva el marco chicha por dentro (negro, rosa, negro, amarillo) y
   dos tiras de cinta en las esquinas de arriba. El giro solo se aplica desde
   tableta: en el teléfono un afiche torcido se saldría del ancho. */
.lp-cartel__afiche,
.lp-cartel__rotulo {
    --lp-giro: 0deg;
    position: relative;
    background-color: var(--lp-afiche);
    background-image: radial-gradient(circle at 18% 0%, var(--lp-afiche-luz), transparent 45%), radial-gradient(var(--lp-afiche-grano) 1px, transparent 1.3px);
    background-size: auto, 4px 4px;
    color: var(--lp-afiche-texto);
    box-shadow: inset 0 0 0 6px var(--lp-afiche), inset 0 0 0 9px var(--lp-neon-rosa), inset 0 0 0 12px var(--lp-afiche), inset 0 0 0 15px var(--lp-neon-amarillo), 0 1.2rem 2.4rem var(--lp-afiche-sombra), 0 0 0 1px var(--lp-afiche-orla);
    transform: rotate(var(--lp-giro));
}

.lp-cartel__afiche {
    padding: clamp(1.75rem, 4.5vw, 3.25rem);
}

.lp-cartel__rotulo {
    max-width: 50rem;
    margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
    padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem);
    text-align: center;
}

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

    .lp-cartel__afiche::before,
    .lp-cartel__afiche::after,
    .lp-cartel__rotulo::before,
    .lp-cartel__rotulo::after,
    .lp-cartel__volante::before,
    .lp-cartel__polaroid::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: -.85rem;
        width: 6.5rem;
        height: 1.75rem;
        background: var(--lp-cinta);
        box-shadow: 0 1px 2px var(--lp-cinta-sombra);
        clip-path: polygon(3% 8%, 97% 0, 100% 30%, 96% 55%, 100% 82%, 97% 100%, 2% 94%, 0 70%, 4% 45%, 0 20%);
        pointer-events: none;
    }

    .lp-cartel__afiche::before,
    .lp-cartel__rotulo::before,
    .lp-cartel__volante::before {
        left: 1.5rem;
        transform: rotate(-7deg);
    }

    .lp-cartel__afiche::after,
    .lp-cartel__rotulo::after {
        right: 1.5rem;
        transform: rotate(6deg);
    }

.lp-cartel__volante {
    --lp-giro: 0deg;
    --lp-foco: var(--lp-foco-papel);
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--lp-volante-borde);
    background: var(--lp-volante);
    color: var(--lp-volante-tinta);
    box-shadow: 0 .9rem 1.8rem var(--lp-volante-sombra);
    transform: rotate(var(--lp-giro));
}

.lp-cartel__polaroid {
    --lp-giro: 0deg;
    position: relative;
    justify-self: center;
    width: min(100%, 22rem);
    margin: 0;
    padding: .75rem .75rem 0;
    background: var(--lp-polaroid);
    color: var(--lp-polaroid-tinta);
    box-shadow: 0 1rem 2rem var(--lp-afiche-sombra);
    transform: rotate(var(--lp-giro));
}

    .lp-cartel__polaroid::before {
        left: 50%;
        margin-left: -3.25rem;
        transform: rotate(-3deg);
    }

    .lp-cartel__polaroid img {
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        background: var(--lp-afiche-alto);
    }

    .lp-cartel__polaroid figcaption {
        padding: .7rem .25rem 1rem;
        font-family: var(--lp-mano);
        font-size: 1.05rem;
        line-height: 1.3;
        text-align: center;
    }

.lp-cartel__polaroid--familia img {
    aspect-ratio: 4 / 3;
}

/* ═══ Letras de tinta ══════════════════════════════════════════════════════
   El degradado de dos franjas típico del cartel chicha, recortado al texto. La
   sombra va con drop-shadow y no con text-shadow: con el texto transparente, una
   text-shadow se pintaría encima del degradado. */
.lp-cartel__tinta {
    display: inline-block;
    padding: 0 .04em;
    background-image: var(--lp-tinta-relleno);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(.055em .055em 0 var(--lp-tinta-sombra));
}

.lp-cartel__tinta--sol {
    --lp-tinta-relleno: linear-gradient(180deg, var(--lp-neon-amarillo) 0 52%, var(--lp-neon-naranja) 52% 100%);
    --lp-tinta-sombra: var(--lp-neon-rosa);
}

.lp-cartel__tinta--fresa {
    --lp-tinta-relleno: linear-gradient(180deg, var(--lp-neon-rosa-claro) 0 50%, var(--lp-neon-rosa) 50% 100%);
    --lp-tinta-sombra: var(--lp-neon-amarillo);
}

.lp-cartel__tinta--lima {
    --lp-tinta-relleno: linear-gradient(180deg, var(--lp-neon-lima) 0 50%, var(--lp-neon-verde) 50% 100%);
    --lp-tinta-sombra: var(--lp-neon-violeta);
}

.lp-cartel__tinta--hielo {
    --lp-tinta-relleno: linear-gradient(180deg, var(--lp-neon-hielo) 0 50%, var(--lp-neon-celeste) 50% 100%);
    --lp-tinta-sombra: var(--lp-neon-rosa);
}

.lp-cartel__tinta--uva {
    --lp-tinta-relleno: linear-gradient(180deg, var(--lp-neon-lila) 0 50%, var(--lp-neon-violeta) 50% 100%);
    --lp-tinta-sombra: var(--lp-neon-verde);
}

.lp-cartel__tinta--mandarina {
    --lp-tinta-relleno: linear-gradient(180deg, var(--lp-neon-amarillo) 0 50%, var(--lp-neon-mandarina) 50% 100%);
    --lp-tinta-sombra: var(--lp-neon-celeste);
}

/* ═══ Tipografía ═══════════════════════════════════════════════════════════
   Impact no tiene negrita: font-synthesis evita que el navegador la engorde a
   la fuerza, y el 700 sirve a las letras de respaldo que sí la tienen. */
/* Dentro de una cabecera el tope de 13cqi garantiza que Villarreal, la palabra
   más larga de los títulos, entre entera aunque el móvil use letra de reserva. */
.lp-cartel__h2 {
    margin: 0 0 .8rem;
    font-family: var(--lp-letrero);
    font-size: min(max(2.3rem, 6vw), 4.2rem, 13cqi);
    font-synthesis: none;
    font-weight: 700;
    line-height: .98;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.lp-cartel__h3 {
    margin: 0 0 .45rem;
    font-family: var(--lp-letrero);
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.lp-cartel__antetitulo {
    display: inline-block;
    margin: 0 0 .9rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: var(--lp-neon-celeste);
    color: var(--lp-neon-tinta);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-cartel__cabecera {
    max-width: 46rem;
    margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
    container-type: inline-size;
}

.lp-cartel__cabecera--centro {
    margin-inline: auto;
    text-align: center;
}

.lp-cartel__entrada {
    margin: 0;
    font-size: clamp(1.02rem, 1.8vw, 1.18rem);
    line-height: 1.55;
    color: var(--lp-afiche-suave);
}

.lp-cartel__parrafo {
    margin: 0 0 1rem;
}

.lp-cartel__afiche .lp-cartel__parrafo {
    color: var(--lp-afiche-suave);
}

.lp-cartel__parrafo--fuerte {
    font-family: var(--lp-letrero);
    font-size: 1.35rem;
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.lp-cartel__afiche .lp-cartel__parrafo--fuerte {
    color: var(--lp-neon-amarillo);
}

.lp-cartel__nota {
    margin: 1.25rem 0;
    font-size: .88rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--lp-muro-suave);
}

.lp-cartel__afiche .lp-cartel__nota {
    color: var(--lp-afiche-suave);
}

.lp-cartel__nota--centro {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.lp-cartel__remate {
    max-width: 44rem;
    margin: 0 auto 1.5rem;
    font-size: 1.05rem;
    line-height: 1.55;
    text-align: center;
    color: var(--lp-afiche-texto);
}

/* ═══ Botones ══════════════════════════════════════════════════════════════
   La chapa: pastilla de degradado amarillo con canto rosa, que se hunde al
   pulsarla. El enlace de neón es la opción secundaria, solo sobre afiches. Los
   :hover repiten color y subrayado porque el sitio puede tener reglas a:hover
   más específicas que una clase sola. */
.lp-cartel__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 1.75rem;
}

.lp-cartel__acciones--centro {
    justify-content: center;
}

.lp-cartel__chapa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.1rem;
    padding: .75rem 1.6rem;
    border: 3px solid var(--lp-chapa-tinta);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--lp-chapa-arriba), var(--lp-chapa-abajo));
    color: var(--lp-chapa-tinta);
    font-family: var(--lp-letrero);
    font-size: 1.15rem;
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .03em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 5px 0 var(--lp-chapa-sombra), 0 .6rem 1.2rem var(--lp-chapa-brillo);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .lp-cartel__chapa:hover {
        color: var(--lp-chapa-tinta);
        text-decoration: none;
        transform: translateY(-2px) rotate(-1deg);
        box-shadow: 0 7px 0 var(--lp-chapa-sombra), 0 .8rem 1.4rem var(--lp-chapa-brillo);
    }

    .lp-cartel__chapa:active {
        transform: translateY(3px);
        box-shadow: 0 2px 0 var(--lp-chapa-sombra);
    }

    .lp-cartel__chapa:focus-visible {
        outline: 3px solid var(--lp-foco);
        outline-offset: 5px;
    }

.lp-cartel__chapa--grande {
    min-height: 3.6rem;
    padding: 1rem 2.4rem;
    font-size: 1.4rem;
}

.lp-cartel__enlace-neon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: .6rem 1.3rem;
    border: 2px solid var(--lp-neon-celeste);
    border-radius: 999px;
    background: transparent;
    color: var(--lp-afiche-texto);
    font-family: var(--lp-rotulo);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 0 .9rem var(--lp-brillo-celeste), inset 0 0 .6rem var(--lp-brillo-celeste);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .lp-cartel__enlace-neon:hover {
        background: var(--lp-neon-celeste);
        color: var(--lp-neon-tinta);
        text-decoration: none;
    }

    .lp-cartel__enlace-neon:focus-visible {
        outline: 3px solid var(--lp-neon-amarillo);
        outline-offset: 3px;
    }

.lp-cartel__enlace-neon--boton {
    min-height: 2.5rem;
    padding: .4rem 1rem;
    font-size: .76rem;
}

/* ═══ EL CARTEL PRINCIPAL ══════════════════════════════════════════════════ */
.lp-cartel__franja-neon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1.4rem;
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    padding: .55rem .5rem;
    border-block: 3px solid var(--lp-neon-rosa);
    font-family: var(--lp-letrero);
    font-size: clamp(.95rem, 2.2vw, 1.25rem);
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
    color: var(--lp-neon-amarillo);
    text-shadow: 0 0 .5em var(--lp-brillo-amarillo);
}

    .lp-cartel__franja-neon > span:empty {
        display: none;
    }

    .lp-cartel__franja-neon > span + span::before {
        content: "★ ";
        content: "★ " / "";
        color: var(--lp-neon-rosa);
    }

/* Parpadeo de tubo de neón al llegar: unas pocas veces y se queda encendido. */
.lp-cartel--animada .lp-cartel__parpadeo {
    animation: lp-cartel-parpadeo 2.4s steps(1) .4s 2;
}

@keyframes lp-cartel-parpadeo {
    0%, 18%, 22%, 58%, 62%, 100% {
        opacity: 1;
    }

    20%, 60% {
        opacity: .25;
    }
}

.lp-cartel__portada-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

.lp-cartel__portada-texto {
    min-width: 0;
    container-type: inline-size;
}

.lp-cartel__presenta {
    margin: 0 0 .35rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--lp-neon-celeste);
}

/* El titular se mide contra su columna y no contra la pantalla, así cabe aunque
   falte Impact y se use una letra más ancha. */
.lp-cartel__titular {
    margin: 0 0 1rem;
    font-family: var(--lp-letrero);
    font-synthesis: none;
    font-weight: 700;
    line-height: .9;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.lp-cartel__titular-linea {
    display: block;
    width: fit-content;
    font-size: min(18cqi, 8rem);
}

    .lp-cartel__titular-linea:last-child {
        font-size: min(13cqi, 7rem);
    }

.lp-cartel__titular-linea--chica {
    margin: .1em 0 .05em;
    font-family: var(--lp-rotulo);
    font-size: min(7cqi, 2rem);
    font-style: italic;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--lp-afiche-texto);
}

.lp-cartel--animada .lp-cartel__titular-linea {
    animation: lp-cartel-saltar .6s cubic-bezier(.3, 1.6, .5, 1) both;
}

    .lp-cartel--animada .lp-cartel__titular-linea:nth-child(2) {
        animation-delay: .12s;
    }

    .lp-cartel--animada .lp-cartel__titular-linea:nth-child(3) {
        animation-delay: .24s;
    }

@keyframes lp-cartel-saltar {
    from {
        opacity: 0;
        transform: translateY(.4em) scale(.9) rotate(-3deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lp-cartel__lema {
    margin: 0 0 1rem;
    font-size: clamp(1.08rem, 2vw, 1.3rem);
    line-height: 1.45;
    color: var(--lp-afiche-texto);
}

    .lp-cartel__lema strong {
        color: var(--lp-neon-amarillo);
    }

.lp-cartel__elenco {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--lp-letrero);
    font-size: 1rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lp-neon-hielo);
}

    .lp-cartel__elenco li + li::before {
        content: "✶ ";
        content: "✶ " / "";
        color: var(--lp-neon-rosa);
    }

/* La foto estelar: recortada en estrella de catorce puntas, con otra estrella
   rosa detrás que asoma. El recorte va en la imagen y la estrella de fondo en el
   pseudo de la figura, que no se recorta. */
.lp-cartel__portada-estelar {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
}

.lp-cartel__estrella {
    position: relative;
    width: min(86%, 20rem);
    margin: 0;
}

    .lp-cartel__estrella::before {
        content: "";
        position: absolute;
        inset: -6%;
        background: linear-gradient(135deg, var(--lp-neon-rosa), var(--lp-neon-violeta));
        clip-path: polygon(50.0% 0.0%, 58.6% 6.8%, 69.1% 3.8%, 74.4% 13.4%, 85.4% 14.6%, 86.6% 25.6%, 96.2% 30.9%, 93.2% 41.4%, 100.0% 50.0%, 93.2% 58.6%, 96.2% 69.1%, 86.6% 74.4%, 85.4% 85.4%, 74.4% 86.6%, 69.1% 96.2%, 58.6% 93.2%, 50.0% 100.0%, 41.4% 93.2%, 30.9% 96.2%, 25.6% 86.6%, 14.6% 85.4%, 13.4% 74.4%, 3.8% 69.1%, 6.8% 58.6%, 0.0% 50.0%, 6.8% 41.4%, 3.8% 30.9%, 13.4% 25.6%, 14.6% 14.6%, 25.6% 13.4%, 30.9% 3.8%, 41.4% 6.8%);
        transform: rotate(8deg);
    }

    .lp-cartel__estrella img {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        background: var(--lp-afiche-alto);
        clip-path: polygon(50.0% 0.0%, 59.1% 10.0%, 71.7% 5.0%, 75.6% 17.9%, 89.1% 18.8%, 86.9% 32.2%, 98.7% 38.9%, 91.0% 50.0%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 75.6% 82.1%, 71.7% 95.0%, 59.1% 90.0%, 50.0% 100.0%, 40.9% 90.0%, 28.3% 95.0%, 24.4% 82.1%, 10.9% 81.2%, 13.1% 67.8%, 1.3% 61.1%, 9.0% 50.0%, 1.3% 38.9%, 13.1% 32.2%, 10.9% 18.8%, 24.4% 17.9%, 28.3% 5.0%, 40.9% 10.0%);
    }

.lp-cartel__estrella-rotulo {
    position: absolute;
    left: 50%;
    bottom: 2%;
    padding: .25rem 1rem;
    background: var(--lp-neon-amarillo);
    color: var(--lp-neon-tinta);
    font-family: var(--lp-letrero);
    font-size: 1.2rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 4px 4px 0 var(--lp-neon-rosa);
    transform: translateX(-50%) rotate(-4deg);
}

/* El bloque de la función: cada fecha en tres cajas de color, como en los
   carteles de concierto. */
.lp-cartel__funcion {
    display: grid;
    gap: .75rem;
    width: 100%;
    max-width: 22rem;
    margin: 0;
}

.lp-cartel__funcion-fila {
    display: grid;
    gap: .3rem;
}

    .lp-cartel__funcion-fila dt {
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--lp-afiche-suave);
    }

    .lp-cartel__funcion-fila dd {
        margin: 0;
    }

.lp-cartel__funcion-fila--semanas dd {
    font-family: var(--lp-letrero);
    font-size: 1.6rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--lp-neon-verde);
}

.lp-cartel__fecha {
    display: flex;
    align-items: stretch;
    gap: .35rem;
    margin: 0;
    font-family: var(--lp-letrero);
    font-synthesis: none;
    font-weight: 700;
    text-transform: uppercase;
}

    .lp-cartel__fecha > [data-fecha-parte]:not([data-fecha-parte="completa"]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .15rem .55rem;
        border-radius: .3rem;
        color: var(--lp-neon-tinta);
        line-height: 1.1;
    }

.lp-cartel__fecha-dia-semana {
    background: var(--lp-neon-rosa);
    font-size: 1.1rem;
}

.lp-cartel__fecha-numero {
    min-width: 3.2rem;
    background: var(--lp-neon-amarillo);
    font-size: 1.9rem;
}

.lp-cartel__fecha-mes {
    background: var(--lp-neon-celeste);
    font-size: 1.1rem;
}

.lp-cartel__fecha--fin .lp-cartel__fecha-dia-semana {
    background: var(--lp-neon-violeta);
}

.lp-cartel__fecha--fin .lp-cartel__fecha-numero {
    background: var(--lp-neon-mandarina);
}

.lp-cartel__fecha--fin .lp-cartel__fecha-mes {
    background: var(--lp-neon-verde);
}

.lp-cartel__lugar {
    width: 100%;
    max-width: 22rem;
    margin: 0;
    font-size: .95rem;
    color: var(--lp-afiche-suave);
}

    .lp-cartel__lugar strong {
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--lp-neon-hielo);
    }

.lp-cartel__pie-afiche {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2rem 1.2rem;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: .55rem .75rem;
    background: var(--lp-neon-amarillo);
    color: var(--lp-neon-tinta);
    font-family: var(--lp-letrero);
    font-size: clamp(.9rem, 1.8vw, 1.1rem);
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

    .lp-cartel__pie-afiche > span:empty {
        display: none;
    }

    .lp-cartel__pie-afiche > span + span::before {
        content: "★ ";
        content: "★ " / "";
        color: var(--lp-neon-rosa);
    }

/* La pegatina de estrella que gira dos vueltas lentas y se queda quieta. Va en
   la esquina de la foto estelar, que siempre tiene aire alrededor: en la
   esquina del afiche tapaba la franja de neón en cuanto esta ocupaba el ancho. */
.lp-cartel__pegatina {
    position: absolute;
    z-index: 3;
    top: -1rem;
    right: -1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 6.5rem;
    margin: 0;
    background: var(--lp-neon-verde);
    color: var(--lp-neon-tinta);
    clip-path: polygon(50.0% 0.0%, 58.6% 6.8%, 69.1% 3.8%, 74.4% 13.4%, 85.4% 14.6%, 86.6% 25.6%, 96.2% 30.9%, 93.2% 41.4%, 100.0% 50.0%, 93.2% 58.6%, 96.2% 69.1%, 86.6% 74.4%, 85.4% 85.4%, 74.4% 86.6%, 69.1% 96.2%, 58.6% 93.2%, 50.0% 100.0%, 41.4% 93.2%, 30.9% 96.2%, 25.6% 86.6%, 14.6% 85.4%, 13.4% 74.4%, 3.8% 69.1%, 6.8% 58.6%, 0.0% 50.0%, 6.8% 41.4%, 3.8% 30.9%, 13.4% 25.6%, 14.6% 14.6%, 25.6% 13.4%, 30.9% 3.8%, 41.4% 6.8%);
    font-family: var(--lp-letrero);
    font-size: .9rem;
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(12deg);
}

.lp-cartel--animada .lp-cartel__pegatina {
    animation: lp-cartel-pegatina 14s linear 1s 2;
}

@keyframes lp-cartel-pegatina {
    from {
        transform: rotate(12deg);
    }

    to {
        transform: rotate(372deg);
    }
}

@media (min-width: 62rem) {
    .lp-cartel__afiche--portada {
        --lp-giro: -.5deg;
    }

    .lp-cartel__portada-rejilla {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
    }

    .lp-cartel__pegatina {
        top: -1.25rem;
        right: -2.5rem;
        width: 7.5rem;
        height: 7.5rem;
        font-size: 1.05rem;
    }
}

/* ═══ LAS FECHAS DEL VERANO ════════════════════════════════════════════════
   Cada fecha es una tarjeta con canto de color y, a la izquierda, la hoja de
   calendario con el día en que empieza. Sin fechas la hoja desaparece y la
   tarjeta pasa a una columna. */
.lp-cartel__gira {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-cartel__parada {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem 1.1rem;
    align-items: start;
    padding: 1.1rem;
    border: 2px solid var(--lp-parada-color);
    border-radius: .5rem;
    background: var(--lp-afiche-alto);
    box-shadow: 5px 5px 0 var(--lp-parada-color);
}

    .lp-cartel__parada:has(> [data-tramo-fecha][hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }

.lp-cartel__parada--fresa {
    --lp-parada-color: var(--lp-neon-rosa);
}

.lp-cartel__parada--sol {
    --lp-parada-color: var(--lp-neon-amarillo);
}

.lp-cartel__parada--lima {
    --lp-parada-color: var(--lp-neon-verde);
}

.lp-cartel__parada--hielo {
    --lp-parada-color: var(--lp-neon-celeste);
}

.lp-cartel__fecha--gira {
    flex-direction: column;
    gap: 0;
    width: 4.4rem;
    overflow: hidden;
    border-radius: .4rem;
    text-align: center;
}

    .lp-cartel__fecha--gira > [data-fecha-parte]:not([data-fecha-parte="completa"]) {
        border-radius: 0;
    }

    .lp-cartel__fecha--gira .lp-cartel__fecha-dia-semana {
        background: var(--lp-parada-color);
        font-size: .95rem;
    }

    .lp-cartel__fecha--gira .lp-cartel__fecha-numero {
        min-width: 0;
        background: var(--lp-afiche-texto);
        font-size: 1.9rem;
    }

    .lp-cartel__fecha--gira .lp-cartel__fecha-mes {
        background: var(--lp-parada-color);
        font-size: .95rem;
    }

.lp-cartel__parada-orden {
    margin: 0 0 .15rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lp-parada-color);
}

.lp-cartel__parada .lp-cartel__parrafo {
    margin-bottom: .6rem;
}

.lp-cartel__parada-datos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    margin: 0;
}

    .lp-cartel__parada-datos > span {
        padding: .15rem .6rem;
        border: 1px solid var(--lp-afiche-linea-fuerte);
        border-radius: 999px;
        font-size: .8rem;
        font-weight: 700;
        color: var(--lp-afiche-texto);
    }

.lp-cartel--animada .lp-cartel__afiche .lp-cartel__parada {
    opacity: 0;
}

.lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__parada {
    animation: lp-cartel-entrar .55s cubic-bezier(.2, .8, .3, 1.2) .25s both;
}

    .lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__parada:nth-child(2) {
        animation-delay: .38s;
    }

    .lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__parada:nth-child(3) {
        animation-delay: .51s;
    }

    .lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__parada:nth-child(4) {
        animation-delay: .64s;
    }

@keyframes lp-cartel-entrar {
    from {
        opacity: 0;
        transform: translateX(-1.5rem) rotate(-2deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 48rem) {
    .lp-cartel__afiche--izquierda {
        --lp-giro: -.7deg;
    }

    .lp-cartel__afiche--derecha {
        --lp-giro: .6deg;
    }

    .lp-cartel__rotulo {
        --lp-giro: -.8deg;
    }
}

@media (min-width: 62rem) {
    .lp-cartel__gira {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem;
    }
}

/* ═══ LA ROCOLA ════════════════════════════════════════════════════════════
   El mueble está dibujado: arco con tres tubos de neón, vitrina con el disco,
   ecualizador y parlante. Mientras suena (unos segundos tras cada elección) el
   disco gira y las barras saltan un número fijo de veces. */
.lp-cartel__rocola {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.lp-cartel__mueble {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: .9rem;
    justify-self: center;
    width: min(100%, 20rem);
    padding: 4.5rem 1.4rem 1.4rem;
    border: 6px solid var(--lp-cromo);
    border-radius: 48% 48% 1.25rem 1.25rem / 28% 28% 1.25rem 1.25rem;
    background: linear-gradient(90deg, var(--lp-madera-oscura), var(--lp-madera) 30%, var(--lp-madera) 70%, var(--lp-madera-oscura));
    box-shadow: inset 0 0 0 3px var(--lp-cromo-sombra), 0 1.2rem 2.4rem var(--lp-afiche-sombra);
}

.lp-cartel__mueble-arco {
    position: absolute;
    inset: .9rem .9rem auto;
    height: 9rem;
}

.lp-cartel__tubo {
    position: absolute;
    inset: 0;
    border: 5px solid var(--lp-tubo-color);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 60% 60% 0 0;
    box-shadow: 0 0 .7rem var(--lp-tubo-color), inset 0 0 .5rem var(--lp-tubo-color);
}

.lp-cartel__tubo--fresa {
    --lp-tubo-color: var(--lp-neon-rosa);
}

.lp-cartel__tubo--sol {
    --lp-tubo-color: var(--lp-neon-amarillo);
    inset: .9rem .9rem 0;
}

.lp-cartel__tubo--hielo {
    --lp-tubo-color: var(--lp-neon-celeste);
    inset: 1.8rem 1.8rem 0;
}

.lp-cartel__vitrina {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border: 4px solid var(--lp-cromo);
    border-radius: .8rem;
    background: radial-gradient(circle at 30% 20%, var(--lp-brillo-celeste), transparent 55%), var(--lp-vidrio);
}

.lp-cartel__disco {
    display: grid;
    place-items: center;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, var(--lp-vinilo) 0 2px, var(--lp-vinilo-surco) 2px 4px);
    box-shadow: 0 0 0 2px var(--lp-vinilo-surco);
}

.lp-cartel__disco-etiqueta {
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-vinilo) 0 12%, transparent 13%), conic-gradient(var(--lp-neon-rosa) 0 25%, var(--lp-neon-amarillo) 0 50%, var(--lp-neon-rosa) 0 75%, var(--lp-neon-amarillo) 0);
}

.lp-cartel__brazo {
    position: absolute;
    top: 12%;
    right: 12%;
    width: 36%;
    height: 5px;
    border-radius: 3px;
    background: var(--lp-cromo);
    transform: rotate(125deg);
    transform-origin: 100% 50%;
}

.lp-cartel__ecualizador {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 3.2rem;
    padding: .4rem;
    border-radius: .5rem;
    background: var(--lp-vidrio);
}

    .lp-cartel__ecualizador span {
        flex: 1 1 0;
        height: 30%;
        border-radius: 2px 2px 0 0;
        background: linear-gradient(0deg, var(--lp-neon-verde), var(--lp-neon-amarillo) 60%, var(--lp-neon-rosa));
        transform-origin: bottom;
    }

        .lp-cartel__ecualizador span:nth-child(3n + 1) {
            height: 55%;
        }

        .lp-cartel__ecualizador span:nth-child(4n + 2) {
            height: 75%;
        }

.lp-cartel__parlante {
    min-height: 4.5rem;
    border: 4px solid var(--lp-cromo);
    border-radius: .8rem;
    background: repeating-linear-gradient(90deg, var(--lp-vidrio) 0 4px, var(--lp-madera-oscura) 4px 7px);
}

.lp-cartel__rocola--sonando .lp-cartel__disco {
    animation: lp-cartel-girar 1.6s linear 4;
}

.lp-cartel__rocola--sonando .lp-cartel__ecualizador span {
    animation: lp-cartel-barras .42s ease-in-out 14 alternate;
}

    .lp-cartel__rocola--sonando .lp-cartel__ecualizador span:nth-child(2n) {
        animation-duration: .31s;
        animation-iteration-count: 20;
    }

    .lp-cartel__rocola--sonando .lp-cartel__ecualizador span:nth-child(3n) {
        animation-duration: .55s;
        animation-iteration-count: 12;
    }

@keyframes lp-cartel-girar {
    to {
        transform: rotate(360deg);
    }
}

@keyframes lp-cartel-barras {
    from {
        transform: scaleY(.35);
    }

    to {
        transform: scaleY(1.3);
    }
}

.lp-cartel__rocola-mandos {
    min-width: 0;
}

.lp-cartel__sonando {
    margin: 0 0 1rem;
    padding: .55rem .9rem;
    border-radius: .4rem;
    background: var(--lp-vidrio);
    color: var(--lp-neon-verde);
    font-family: var(--lp-led);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 0 0 .4em var(--lp-neon-verde);
}

/* Las tiras de selección de la rocola: negras con canto de neón en los dos
   temas, como el aparato. La elegida se enciende en amarillo. */
.lp-cartel__selectores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.lp-cartel__selector {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .4rem .6rem;
    border: 2px solid var(--lp-afiche-linea-fuerte);
    border-radius: .45rem;
    background: var(--lp-afiche);
    color: var(--lp-afiche-texto);
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

    .lp-cartel__selector:hover {
        border-color: var(--lp-neon-celeste);
        transform: translateY(-2px);
    }

    .lp-cartel__selector:focus-visible {
        outline: 3px solid var(--lp-foco);
        outline-offset: 2px;
    }

    .lp-cartel__selector[aria-pressed="true"] {
        border-color: var(--lp-neon-amarillo);
        background: var(--lp-neon-amarillo);
        color: var(--lp-neon-tinta);
    }

.lp-cartel__selector-codigo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.3rem;
    height: 2rem;
    border-radius: .3rem;
    background: var(--lp-neon-rosa);
    color: var(--lp-neon-tinta);
    font-family: var(--lp-letrero);
    font-size: 1rem;
    font-synthesis: none;
    font-weight: 700;
}

.lp-cartel__selector[aria-pressed="true"] .lp-cartel__selector-codigo {
    background: var(--lp-neon-tinta);
    color: var(--lp-neon-amarillo);
}

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

.lp-cartel__ficha {
    padding: 1.4rem 1.5rem;
    border-radius: .6rem;
    background: var(--lp-afiche);
    color: var(--lp-afiche-texto);
    box-shadow: inset 0 0 0 3px var(--lp-neon-rosa), 0 .8rem 1.6rem var(--lp-afiche-sombra), 0 0 0 1px var(--lp-afiche-orla);
}

    .lp-cartel__ficha .lp-cartel__parrafo {
        color: var(--lp-afiche-suave);
    }

.lp-cartel__ficha--entra {
    animation: lp-cartel-ficha .45s cubic-bezier(.2, .8, .3, 1.15) both;
}

@keyframes lp-cartel-ficha {
    from {
        opacity: 0;
        transform: translateY(.75rem) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lp-cartel__ficha-codigo {
    margin: 0 0 .35rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-neon-celeste);
}

.lp-cartel__ficha-cancion {
    margin: 0 0 .7rem;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 700;
    color: var(--lp-neon-rosa-claro);
}

.lp-cartel__ficha-consejo {
    margin: 0;
    padding: .7rem .9rem;
    border-left: 4px solid var(--lp-neon-verde);
    border-radius: 0 .35rem .35rem 0;
    background: var(--lp-afiche-alto);
    font-size: .95rem;
    line-height: 1.5;
}

    .lp-cartel__ficha-consejo strong {
        color: var(--lp-neon-verde);
    }

@media (min-width: 62rem) {
    .lp-cartel__rocola {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: 3rem;
    }

    .lp-cartel__mueble {
        position: sticky;
        top: 6rem;
    }
}

/* ═══ ARMA TU SEMANA ═══════════════════════════════════════════════════════
   La rejilla cambia de orientación: en el teléfono los días son filas y los
   turnos columnas (casillas anchas, fáciles de tocar); desde tableta, los días
   son columnas. Cada casilla se coloca con su día (--d1 a --d7) y su turno
   (--t1 a --t3). */
.lp-cartel__semana {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.lp-cartel__planilla-rejilla {
    display: grid;
    grid-template-columns: 3.4rem repeat(3, minmax(0, 1fr));
    grid-template-rows: auto repeat(7, minmax(2.75rem, auto));
    gap: .4rem;
    margin-bottom: 1.5rem;
}

    /* Cada pieza se coloca con dos números: su día (0 en los encabezados de
       turno) y su turno (0 en los encabezados de día). La esquina es 0 y 0. En
       el teléfono el día es la fila; desde tableta, la columna. */
    .lp-cartel__planilla-rejilla > * {
        --lp-dia: 0;
        --lp-turno: 0;
        grid-row: calc(var(--lp-dia) + 1);
        grid-column: calc(var(--lp-turno) + 1);
    }

.lp-cartel--d1 {
    --lp-dia: 1;
}

.lp-cartel--d2 {
    --lp-dia: 2;
}

.lp-cartel--d3 {
    --lp-dia: 3;
}

.lp-cartel--d4 {
    --lp-dia: 4;
}

.lp-cartel--d5 {
    --lp-dia: 5;
}

.lp-cartel--d6 {
    --lp-dia: 6;
}

.lp-cartel--d7 {
    --lp-dia: 7;
}

.lp-cartel--t1 {
    --lp-turno: 1;
    --lp-turno-color: var(--lp-neon-amarillo);
}

.lp-cartel--t2 {
    --lp-turno: 2;
    --lp-turno-color: var(--lp-neon-rosa);
}

.lp-cartel--t3 {
    --lp-turno: 3;
    --lp-turno-color: var(--lp-neon-violeta);
}

.lp-cartel__planilla-turno,
.lp-cartel__planilla-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lp-letrero);
    font-size: 1rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lp-cartel__planilla-turno {
    padding-bottom: .2rem;
    color: var(--lp-turno-color);
}

.lp-cartel__planilla-dia {
    justify-content: flex-start;
    color: var(--lp-afiche-texto);
}

.lp-cartel__turno {
    position: relative;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0;
    border: 2px solid var(--lp-afiche-linea-fuerte);
    border-radius: .4rem;
    background: var(--lp-afiche-alto);
    color: var(--lp-neon-tinta);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .lp-cartel__turno:hover {
        border-color: var(--lp-turno-color);
    }

    .lp-cartel__turno:focus-visible {
        outline: 3px solid var(--lp-foco);
        outline-offset: 2px;
    }

    .lp-cartel__turno[aria-pressed="true"] {
        border-color: var(--lp-turno-color);
        background: var(--lp-turno-color);
        box-shadow: 0 0 .8rem var(--lp-turno-color);
        transform: scale(1.04);
    }

        /* La marca de la casilla elegida: una estrella de cinco puntas. */
        .lp-cartel__turno[aria-pressed="true"]::after {
            content: "";
            position: absolute;
            inset: 22%;
            background: var(--lp-neon-tinta);
            clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }

.lp-cartel__semana-resultado {
    display: grid;
    gap: .5rem;
    justify-items: start;
    padding: 1.1rem 1.25rem;
    border: 2px dashed var(--lp-afiche-linea-fuerte);
    border-radius: .6rem;
}

.lp-cartel__semana-cifra {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    margin: 0;
    font-family: var(--lp-letrero);
    font-size: 1.2rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--lp-afiche-texto);
}

.lp-cartel__semana-numero {
    font-size: 3.2rem;
    line-height: .9;
    color: var(--lp-neon-amarillo);
    text-shadow: 0 0 .35em var(--lp-brillo-amarillo);
}

.lp-cartel__semana-ritmo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lp-neon-hielo);
}

.lp-cartel__semana-total {
    margin: 0;
    font-size: .95rem;
    color: var(--lp-afiche-suave);
}

.lp-cartel__polaroid--semana {
    --lp-giro: 2.5deg;
}

@media (min-width: 48rem) {
    .lp-cartel__planilla-rejilla {
        grid-template-columns: 4.6rem repeat(7, minmax(0, 1fr));
        grid-template-rows: auto repeat(3, minmax(3.1rem, auto));
    }

        .lp-cartel__planilla-rejilla > * {
            grid-row: calc(var(--lp-turno) + 1);
            grid-column: calc(var(--lp-dia) + 1);
        }

    .lp-cartel__planilla-dia {
        justify-content: center;
    }

    .lp-cartel__planilla-turno {
        justify-content: flex-start;
        padding-bottom: 0;
    }
}

@media (min-width: 62rem) {
    .lp-cartel__semana {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        gap: 3rem;
    }
}

/* ═══ FESTIVAL VILLARREAL ══════════════════════════════════════════════════
   El cartel de un festival: bandas centradas en filas que se reparten solas,
   cada una en el color de su género, con sus temas debajo. Al elegir un género
   las demás se apagan sin desaparecer. */
/* Villarreal es la palabra más larga del título: medida con el ancho de la
   cabecera, cabe entera incluso con la letra de reserva en un móvil angosto. */
.lp-cartel__h2--festival {
    font-size: min(13cqi, 6rem);
}

.lp-cartel__generos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 2rem;
}

.lp-cartel__genero {
    --lp-genero-color: var(--lp-afiche-texto);
    min-height: 2.5rem;
    padding: .35rem .95rem;
    border: 2px solid var(--lp-genero-color);
    border-radius: 999px;
    background: transparent;
    color: var(--lp-afiche-texto);
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .lp-cartel__genero:hover {
        box-shadow: 0 0 .7rem var(--lp-genero-color);
    }

    .lp-cartel__genero:focus-visible {
        outline: 3px solid var(--lp-foco);
        outline-offset: 2px;
    }

    .lp-cartel__genero[aria-pressed="true"] {
        background: var(--lp-genero-color);
        color: var(--lp-neon-tinta);
    }

.lp-cartel__genero--fresa,
.lp-cartel__banda--fresa {
    --lp-genero-color: var(--lp-neon-rosa);
}

.lp-cartel__genero--hielo,
.lp-cartel__banda--hielo {
    --lp-genero-color: var(--lp-neon-celeste);
}

.lp-cartel__genero--sol,
.lp-cartel__banda--sol {
    --lp-genero-color: var(--lp-neon-amarillo);
}

.lp-cartel__genero--uva,
.lp-cartel__banda--uva {
    --lp-genero-color: var(--lp-neon-violeta);
}

.lp-cartel__genero--mandarina,
.lp-cartel__banda--mandarina {
    --lp-genero-color: var(--lp-neon-mandarina);
}

.lp-cartel__genero--lima,
.lp-cartel__banda--lima {
    --lp-genero-color: var(--lp-neon-verde);
}

.lp-cartel__cartelera {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem 2.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.lp-cartel__banda {
    flex: 1 1 15rem;
    max-width: 22rem;
    transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}

.lp-cartel__banda--apagada {
    opacity: .25;
    filter: grayscale(1);
}

.lp-cartel__banda--encendida {
    transform: scale(1.04);
}

.lp-cartel__banda-genero {
    margin: 0 0 .2rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lp-genero-color);
}

    .lp-cartel__banda-genero::before {
        content: "✶ ";
        content: "✶ " / "";
    }

.lp-cartel__banda-nombre {
    margin: 0 0 .4rem;
    font-family: var(--lp-letrero);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--lp-genero-color);
    text-shadow: 0 0 .45em var(--lp-afiche), 0 0 .6em var(--lp-genero-color);
}

.lp-cartel__banda-temas {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--lp-afiche-suave);
}

    .lp-cartel__banda-temas li {
        display: inline;
    }

        .lp-cartel__banda-temas li:not(:last-child)::after {
            content: " · ";
            content: " · " / "";
            color: var(--lp-genero-color);
        }

.lp-cartel__afiche--festival {
    padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

/* ═══ HAZTE TU CARTEL ══════════════════════════════════════════════════════
   El formulario es un volante de papel; la muestra es un afiche que se mide con
   unidades de contenedor, así el nombre crece o se achica con el cartel y no
   con la pantalla. La paleta elegida solo cambia variables. */
.lp-cartel__imprenta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.lp-cartel__imprenta-mandos {
    display: grid;
    gap: 1.1rem;
}

.lp-cartel__campo-grupo {
    display: grid;
    gap: .35rem;
}

.lp-cartel__etiqueta {
    margin: 0;
    padding: 0;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-volante-suave);
}

.lp-cartel__campo {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: .6rem .8rem;
    border: 2px solid var(--lp-volante-tinta);
    border-radius: .45rem;
    background: var(--lp-volante-alto);
    color: var(--lp-volante-tinta);
    font: inherit;
    font-size: 1rem;
}

    .lp-cartel__campo:focus {
        outline: 3px solid var(--lp-foco-papel);
        outline-offset: 1px;
    }

.lp-cartel__paletas {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    border: 0;
}

    .lp-cartel__paletas legend {
        margin-bottom: .35rem;
    }

.lp-cartel__paleta {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.75rem;
    padding: .35rem .6rem;
    border: 2px solid var(--lp-volante-borde);
    border-radius: .45rem;
    font-weight: 700;
    cursor: pointer;
}

    .lp-cartel__paleta:has(input:checked) {
        border-color: var(--lp-volante-tinta);
    }

    .lp-cartel__paleta:has(input:focus-visible) {
        outline: 3px solid var(--lp-foco-papel);
        outline-offset: 2px;
    }

    .lp-cartel__paleta input {
        width: 1.15rem;
        height: 1.15rem;
        margin: 0;
        accent-color: var(--lp-volante-acento);
    }

.lp-cartel__paleta-muestra {
    width: 2.6rem;
    height: 1.4rem;
    border-radius: .3rem;
    background: linear-gradient(90deg, var(--lp-muestra-a) 0 50%, var(--lp-muestra-b) 50% 100%);
    box-shadow: inset 0 0 0 2px var(--lp-afiche);
}

.lp-cartel__paleta--fresa {
    --lp-muestra-a: var(--lp-neon-rosa);
    --lp-muestra-b: var(--lp-neon-amarillo);
}

.lp-cartel__paleta--lima {
    --lp-muestra-a: var(--lp-neon-verde);
    --lp-muestra-b: var(--lp-neon-mandarina);
}

.lp-cartel__paleta--uva {
    --lp-muestra-a: var(--lp-neon-violeta);
    --lp-muestra-b: var(--lp-neon-celeste);
}

.lp-cartel__compartir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    background: var(--lp-whatsapp);
    color: var(--lp-whatsapp-tinta);
    font-weight: 800;
    text-decoration: none;
}

    .lp-cartel__compartir:hover {
        color: var(--lp-whatsapp-tinta);
        text-decoration: underline;
    }

    .lp-cartel__compartir:focus-visible {
        outline: 3px solid var(--lp-foco-papel);
        outline-offset: 3px;
    }

.lp-cartel__letra-chica {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--lp-volante-suave);
}

.lp-cartel__imprenta-muestra {
    justify-self: center;
    width: min(100%, 26rem);
}

.lp-cartel__mi-cartel {
    --lp-mc-a: var(--lp-neon-rosa);
    --lp-mc-a-claro: var(--lp-neon-rosa-claro);
    --lp-mc-b: var(--lp-neon-amarillo);
    --lp-mc-b-fuerte: var(--lp-neon-naranja);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    aspect-ratio: 4 / 5;
    padding: 9% 8%;
    container-type: inline-size;
    background: radial-gradient(circle at 50% 30%, var(--lp-afiche-alto), var(--lp-afiche) 65%);
    color: var(--lp-afiche-texto);
    text-align: center;
    box-shadow: inset 0 0 0 7px var(--lp-afiche), inset 0 0 0 11px var(--lp-mc-a), inset 0 0 0 15px var(--lp-afiche), inset 0 0 0 19px var(--lp-mc-b), 0 1.2rem 2.4rem var(--lp-afiche-sombra), 0 0 0 1px var(--lp-afiche-orla);
    transform: rotate(-1.5deg);
    transition: box-shadow .3s ease;
}

    .lp-cartel__mi-cartel[data-paleta="lima"] {
        --lp-mc-a: var(--lp-neon-verde);
        --lp-mc-a-claro: var(--lp-neon-lima);
        --lp-mc-b: var(--lp-neon-mandarina);
        --lp-mc-b-fuerte: var(--lp-neon-naranja);
    }

    .lp-cartel__mi-cartel[data-paleta="uva"] {
        --lp-mc-a: var(--lp-neon-violeta);
        --lp-mc-a-claro: var(--lp-neon-lila);
        --lp-mc-b: var(--lp-neon-celeste);
        --lp-mc-b-fuerte: var(--lp-neon-hielo);
    }

    .lp-cartel__mi-cartel p {
        margin: 0;
        max-width: 100%;
    }

.lp-cartel__mi-cartel-banda {
    padding: .1em .7em;
    background: var(--lp-mc-a);
    color: var(--lp-neon-tinta);
    font-family: var(--lp-letrero);
    font-size: 7cqi;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    transform: rotate(-3deg);
}

.lp-cartel__mi-cartel-presenta {
    font-size: 3.6cqi;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lp-afiche-suave);
}

.lp-cartel__mi-cartel-nombre {
    background-image: linear-gradient(180deg, var(--lp-mc-b) 0 52%, var(--lp-mc-b-fuerte) 52% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--lp-letrero);
    font-size: 13cqi;
    font-synthesis: none;
    font-weight: 700;
    line-height: .95;
    letter-spacing: .01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    filter: drop-shadow(.05em .05em 0 var(--lp-mc-a));
}

    .lp-cartel__mi-cartel-nombre[data-largo="corto"] {
        font-size: 17cqi;
    }

    .lp-cartel__mi-cartel-nombre[data-largo="largo"] {
        font-size: 9.5cqi;
    }

.lp-cartel__mi-cartel-texto {
    font-size: 4.4cqi;
    font-style: italic;
    font-weight: 700;
    color: var(--lp-afiche-texto);
}

.lp-cartel__mi-cartel-carrera {
    font-family: var(--lp-letrero);
    font-size: 7.5cqi;
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--lp-mc-a-claro);
    text-shadow: 0 0 .5em var(--lp-mc-a);
}

.lp-cartel__mi-cartel-uni {
    font-size: 3.4cqi;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-afiche-suave);
}

.lp-cartel__mi-cartel-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2em .8em;
    margin-top: .4rem;
    padding: .25em .8em;
    border: 2px solid var(--lp-mc-b);
    border-radius: 999px;
    font-size: 3.4cqi;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-mc-b);
}

.lp-cartel__mi-cartel--sacude {
    animation: lp-cartel-sacude .4s ease;
}

@keyframes lp-cartel-sacude {
    30% {
        transform: rotate(-3.5deg) scale(1.02);
    }

    65% {
        transform: rotate(.5deg);
    }
}

@media (min-width: 48rem) {
    .lp-cartel__volante.lp-cartel__imprenta-mandos {
        --lp-giro: .8deg;
    }
}

@media (min-width: 62rem) {
    .lp-cartel__imprenta {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 3.5rem;
    }
}

/* ═══ TÚ ARMAS TU ORQUESTA ═════════════════════════════════════════════════ */
.lp-cartel__orquesta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.lp-cartel__musico {
    position: relative;
    padding: 1.3rem .9rem 1.1rem;
    border: 2px solid var(--lp-musico-color);
    border-radius: 1rem;
    background: var(--lp-afiche-alto);
    text-align: center;
}

.lp-cartel__musico--sol {
    --lp-musico-color: var(--lp-neon-amarillo);
}

.lp-cartel__musico--fresa {
    --lp-musico-color: var(--lp-neon-rosa);
}

.lp-cartel__musico--hielo {
    --lp-musico-color: var(--lp-neon-celeste);
}

.lp-cartel__musico--lima {
    --lp-musico-color: var(--lp-neon-verde);
}

.lp-cartel__musico .lp-cartel__h3 {
    font-size: 1.2rem;
    color: var(--lp-musico-color);
}

.lp-cartel__musico .lp-cartel__parrafo {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
}

.lp-cartel__instrumento {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto .7rem;
    color: var(--lp-musico-color);
    filter: drop-shadow(0 0 .35rem var(--lp-musico-color));
}

.lp-cartel__musico:hover .lp-cartel__instrumento {
    animation: lp-cartel-temblor .45s ease-in-out 2;
}

@keyframes lp-cartel-temblor {
    25% {
        transform: rotate(-8deg) scale(1.06);
    }

    75% {
        transform: rotate(8deg) scale(1.06);
    }
}

/* Al pegar el afiche, de cada instrumento sale una nota que sube y se apaga. */
.lp-cartel--animada .lp-cartel__musico::after {
    content: "♪";
    content: "♪" / "";
    position: absolute;
    top: .6rem;
    right: 1rem;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--lp-musico-color);
    opacity: 0;
}

.lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__musico::after {
    animation: lp-cartel-nota 1.6s ease-out .5s both;
}

.lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__musico:nth-child(2)::after {
    animation-delay: .75s;
}

.lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__musico:nth-child(3)::after {
    animation-delay: 1s;
}

.lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__musico:nth-child(4)::after {
    animation-delay: 1.25s;
}

@keyframes lp-cartel-nota {
    from {
        opacity: 0;
        transform: translate(0, .5rem);
    }

    30% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate(.6rem, -1.8rem) rotate(15deg);
    }
}

@media (min-width: 62rem) {
    .lp-cartel__orquesta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* ═══ BOLETERÍA ════════════════════════════════════════════════════════════
   Boletos de colores con talón troquelado. Las muescas son una máscara en el
   papel; la sombra va en el elemento de fuera, porque una máscara se comería
   la sombra de su propio elemento. */
.lp-cartel__boletos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-cartel__boleto {
    --lp-giro: 0deg;
    filter: drop-shadow(0 .6rem .9rem var(--lp-afiche-sombra));
    transform: rotate(var(--lp-giro));
}

.lp-cartel__boleto-papel {
    --lp-talon: 4.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lp-talon);
    min-height: 100%;
    border-radius: .7rem;
    background: var(--lp-boleto-color);
    color: var(--lp-neon-tinta);
    -webkit-mask: radial-gradient(circle at calc(100% - var(--lp-talon)) 0, transparent .75rem, #000 .78rem) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--lp-talon)) 100%, transparent .75rem, #000 .78rem) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle at calc(100% - var(--lp-talon)) 0, transparent .75rem, #000 .78rem) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--lp-talon)) 100%, transparent .75rem, #000 .78rem) bottom / 100% 51% no-repeat;
}

.lp-cartel__boleto--sol {
    --lp-boleto-color: var(--lp-neon-amarillo);
}

.lp-cartel__boleto--fresa {
    --lp-boleto-color: var(--lp-neon-rosa);
}

.lp-cartel__boleto--hielo {
    --lp-boleto-color: var(--lp-neon-celeste);
}

.lp-cartel__boleto--lima {
    --lp-boleto-color: var(--lp-neon-verde);
}

.lp-cartel__boleto-cuerpo {
    padding: 1.3rem 1.2rem 1.3rem 1.4rem;
}

.lp-cartel__boleto-tipo {
    display: inline-block;
    margin: 0 0 .45rem;
    padding: .1rem .55rem;
    border: 2px solid currentColor;
    border-radius: .3rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-cartel__boleto-titulo {
    margin: 0 0 .4rem;
    font-family: var(--lp-letrero);
    font-size: 1.55rem;
    font-synthesis: none;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.lp-cartel__boleto-texto {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
}

.lp-cartel__boleto-accion {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-top: .9rem;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    background: var(--lp-neon-tinta);
    color: var(--lp-neon-amarillo);
    font-family: var(--lp-letrero);
    font-size: 1.05rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}

    .lp-cartel__boleto-accion:hover {
        color: var(--lp-neon-amarillo);
        text-decoration: underline;
    }

    .lp-cartel__boleto-accion:focus-visible {
        outline: 3px solid var(--lp-neon-tinta);
        outline-offset: 3px;
    }

.lp-cartel__boleto-talon {
    display: flex;
    gap: .9rem;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 1rem .2rem;
    white-space: nowrap;
    border-left: 3px dashed var(--lp-neon-tinta);
    font-family: var(--lp-letrero);
    font-size: .95rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform-origin: 0 100%;
    transition: transform .3s ease;
}

.lp-cartel__boleto:hover .lp-cartel__boleto-talon {
    transform: rotate(4deg) translateX(3px);
}

@media (min-width: 48rem) {
    .lp-cartel__boletos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem;
    }

    .lp-cartel__boleto:nth-child(odd) {
        --lp-giro: -1.2deg;
    }

    .lp-cartel__boleto:nth-child(even) {
        --lp-giro: 1deg;
    }
}

/* ═══ LA VILLARREAL EN CIFRAS ══════════════════════════════════════════════
   Estrellas de dieciséis puntas con la cifra dentro. Cada una se mide con
   unidades de contenedor, así el número llena la estrella en cualquier ancho. */
.lp-cartel__cifras-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.lp-cartel__estrellas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin: 0 0 1.75rem;
}

.lp-cartel__estrella-cifra {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    aspect-ratio: 1;
    padding: 16%;
    container-type: inline-size;
    background: var(--lp-estrella-color);
    color: var(--lp-neon-tinta);
    text-align: center;
    clip-path: polygon(50.0% 0.0%, 58.6% 6.8%, 69.1% 3.8%, 74.4% 13.4%, 85.4% 14.6%, 86.6% 25.6%, 96.2% 30.9%, 93.2% 41.4%, 100.0% 50.0%, 93.2% 58.6%, 96.2% 69.1%, 86.6% 74.4%, 85.4% 85.4%, 74.4% 86.6%, 69.1% 96.2%, 58.6% 93.2%, 50.0% 100.0%, 41.4% 93.2%, 30.9% 96.2%, 25.6% 86.6%, 14.6% 85.4%, 13.4% 74.4%, 3.8% 69.1%, 6.8% 58.6%, 0.0% 50.0%, 6.8% 41.4%, 3.8% 30.9%, 13.4% 25.6%, 14.6% 14.6%, 25.6% 13.4%, 30.9% 3.8%, 41.4% 6.8%);
    transform: rotate(-6deg);
}

    .lp-cartel__estrella-cifra:nth-child(even) {
        transform: rotate(5deg);
    }

    .lp-cartel__estrella-cifra dt {
        font-size: 8.5cqi;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .lp-cartel__estrella-cifra dd {
        margin: 0;
        font-family: var(--lp-letrero);
        font-size: 22cqi;
        font-synthesis: none;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        line-height: 1;
    }

.lp-cartel__estrella-cifra--sol {
    --lp-estrella-color: var(--lp-neon-amarillo);
}

.lp-cartel__estrella-cifra--fresa {
    --lp-estrella-color: var(--lp-neon-rosa);
}

.lp-cartel__estrella-cifra--hielo {
    --lp-estrella-color: var(--lp-neon-celeste);
}

.lp-cartel__estrella-cifra--lima {
    --lp-estrella-color: var(--lp-neon-verde);
}

.lp-cartel--animada .lp-cartel__afiche .lp-cartel__estrella-cifra {
    opacity: 0;
}

.lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__estrella-cifra {
    animation: lp-cartel-estallar .55s cubic-bezier(.3, 1.6, .5, 1) .3s both;
}

    .lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__estrella-cifra:nth-child(2) {
        animation-delay: .45s;
    }

    .lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__estrella-cifra:nth-child(3) {
        animation-delay: .6s;
    }

    .lp-cartel--animada .lp-cartel__afiche.lp-cartel--visible .lp-cartel__estrella-cifra:nth-child(4) {
        animation-delay: .75s;
    }

@keyframes lp-cartel-estallar {
    from {
        opacity: 0;
        transform: scale(.2) rotate(-60deg);
    }

    to {
        opacity: 1;
    }
}

.lp-cartel__polaroid--cifras {
    --lp-giro: -2.5deg;
}

@media (min-width: 48rem) {
    .lp-cartel__estrellas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .lp-cartel__cifras-rejilla {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        gap: 3rem;
    }
}

/* ═══ SE COMUNICA A LA FAMILIA ═════════════════════════════════════════════
   Letrero pintado a mano: doble marco de tinta y un sello de "aviso". */
.lp-cartel__familia {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}

.lp-cartel__polaroid--familia {
    --lp-giro: -2deg;
    width: min(100%, 26rem);
}

.lp-cartel__aviso {
    border: 3px solid var(--lp-volante-tinta);
    outline: 2px solid var(--lp-volante-tinta);
    outline-offset: -11px;
}

.lp-cartel__aviso-sello {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    margin: 0;
    padding: .1rem .6rem;
    border: 3px solid var(--lp-volante-acento);
    border-radius: .3rem;
    color: var(--lp-volante-acento);
    font-family: var(--lp-letrero);
    font-size: 1.1rem;
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: rotate(9deg);
}

.lp-cartel__aviso-titulo {
    margin: .5rem 5rem .8rem 0;
    font-family: var(--lp-letrero);
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-synthesis: none;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lp-volante-acento);
}

.lp-cartel__aviso-lista {
    display: grid;
    gap: .55rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

    .lp-cartel__aviso-lista li {
        position: relative;
        padding-left: 1.6rem;
        line-height: 1.5;
    }

        .lp-cartel__aviso-lista li::before {
            content: "";
            position: absolute;
            left: .1rem;
            top: .45em;
            width: .75rem;
            height: .75rem;
            background: var(--lp-volante-acento);
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }

.lp-cartel__aviso-firma {
    margin: 0 0 1.25rem;
    font-family: var(--lp-mano);
    font-size: 1.05rem;
    text-align: right;
    color: var(--lp-volante-suave);
}

@media (min-width: 48rem) {
    .lp-cartel__aviso {
        --lp-giro: .7deg;
    }
}

@media (min-width: 62rem) {
    .lp-cartel__familia {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 3.5rem;
    }
}

/* ═══ PREGUNTAS DEL PÚBLICO ════════════════════════════════════════════════
   Volantes de papel. El marcador del summary se reemplaza por una flecha hecha
   con dos bordes que gira media vuelta al abrir. */
.lp-cartel__preguntas {
    display: grid;
    gap: 1rem;
}

.lp-cartel__pregunta {
    --lp-giro: 0deg;
    border: 1px solid var(--lp-volante-borde);
    border-left: 6px solid var(--lp-neon-rosa);
    border-radius: .35rem;
    background: var(--lp-volante);
    color: var(--lp-volante-tinta);
    box-shadow: 0 .5rem 1rem var(--lp-volante-sombra);
    transform: rotate(var(--lp-giro));
}

    .lp-cartel__pregunta:nth-child(3n + 2) {
        border-left-color: var(--lp-neon-celeste);
    }

    .lp-cartel__pregunta:nth-child(3n) {
        border-left-color: var(--lp-neon-verde);
    }

.lp-cartel--animada .lp-cartel__pregunta[data-revelar] {
    transform: translateY(1.5rem) rotate(var(--lp-giro));
}

    .lp-cartel--animada .lp-cartel__pregunta[data-revelar].lp-cartel--visible {
        transform: rotate(var(--lp-giro));
    }

.lp-cartel__pregunta-titulo {
    position: relative;
    display: block;
    padding: 1rem 3.4rem 1rem 1.2rem;
    font-size: 1.04rem;
    font-weight: 800;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

    .lp-cartel__pregunta-titulo::-webkit-details-marker {
        display: none;
    }

    .lp-cartel__pregunta-titulo::marker {
        content: "";
    }

    .lp-cartel__pregunta-titulo::after {
        content: "";
        position: absolute;
        right: 1.35rem;
        top: 50%;
        width: .65rem;
        height: .65rem;
        margin-top: -.45rem;
        border-right: 3px solid var(--lp-volante-acento);
        border-bottom: 3px solid var(--lp-volante-acento);
        transform: rotate(45deg);
        transition: transform .25s ease, margin-top .25s ease;
    }

    .lp-cartel__pregunta-titulo:focus-visible {
        outline: 3px solid var(--lp-foco-papel);
        outline-offset: -3px;
    }

.lp-cartel__pregunta[open] > .lp-cartel__pregunta-titulo::after {
    margin-top: -.12rem;
    transform: rotate(-135deg);
}

.lp-cartel__pregunta-respuesta {
    margin: 0;
    padding: 0 1.4rem 1.2rem 1.2rem;
    line-height: 1.6;
    color: var(--lp-volante-suave);
}

@media (min-width: 48rem) {
    .lp-cartel__pregunta:nth-child(odd) {
        --lp-giro: -.35deg;
    }

    .lp-cartel__pregunta:nth-child(even) {
        --lp-giro: .3deg;
    }
}

/* ═══ ¡NO FALTES! ══════════════════════════════════════════════════════════
   Calle de noche con ladrillo y dos halos de neón. El letrero arranca apagado y
   sus letras se encienden de una en una cuando la sección aparece; sin guion o
   con movimiento reducido ya está encendido. */
.lp-cartel__cierre {
    position: relative;
    overflow: clip;
    padding: clamp(4rem, 9vw, 7rem) 0;
    background-color: var(--lp-noche);
    background-image: radial-gradient(ellipse 45% 55% at 20% 30%, var(--lp-afiche-luz), transparent 70%), radial-gradient(ellipse 40% 50% at 85% 70%, var(--lp-halo-celeste), transparent 75%), repeating-linear-gradient(0deg, var(--lp-noche-ladrillo) 0 2px, transparent 2px 2.4rem), repeating-linear-gradient(90deg, var(--lp-noche-ladrillo) 0 2px, transparent 2px 5rem);
    color: var(--lp-afiche-texto);
    text-align: center;
}

.lp-cartel__cierre-contenido {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    container-type: inline-size;
}

/* La palabra no se parte nunca: el tamaño sale del ancho del contenedor y
   deja sitio a la letra de reserva, bastante más ancha que Impact. */
.lp-cartel__letrero {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0 0 1.25rem;
    font-family: var(--lp-letrero);
    font-size: min(12cqi, 8.5rem);
    font-synthesis: none;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lp-neon-rosa);
    text-shadow: 0 0 .08em var(--lp-afiche-texto), 0 0 .25em var(--lp-neon-rosa), 0 0 .6em var(--lp-brillo-rosa);
}

.lp-cartel--animada .lp-cartel__letrero span {
    color: var(--lp-letrero-apagado);
    text-shadow: none;
}

.lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span {
    animation: lp-cartel-encender .5s steps(1) both;
}

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(2) {
        animation-delay: .08s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(3) {
        animation-delay: .16s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(4) {
        animation-delay: .24s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(5) {
        animation-delay: .32s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(6) {
        animation-delay: .4s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(7) {
        animation-delay: .48s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(8) {
        animation-delay: .56s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(9) {
        animation-delay: .64s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(10) {
        animation-delay: .72s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(11) {
        animation-delay: .8s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__letrero span:nth-child(12) {
        animation-delay: .88s;
    }

@keyframes lp-cartel-encender {
    0% {
        color: var(--lp-letrero-apagado);
        text-shadow: none;
    }

    30% {
        color: var(--lp-neon-rosa);
        text-shadow: 0 0 .25em var(--lp-neon-rosa);
    }

    45% {
        color: var(--lp-letrero-apagado);
        text-shadow: none;
    }

    60%,
    100% {
        color: var(--lp-neon-rosa);
        text-shadow: 0 0 .08em var(--lp-afiche-texto), 0 0 .25em var(--lp-neon-rosa), 0 0 .6em var(--lp-brillo-rosa);
    }
}

.lp-cartel__h2--cierre {
    font-size: clamp(2rem, 5vw, 3.4rem);
    color: var(--lp-afiche-texto);
    text-wrap: balance;
}

.lp-cartel__cierre .lp-cartel__entrada {
    max-width: 36rem;
    margin-inline: auto;
}

.lp-cartel__cierre-nota {
    margin: 1.75rem auto 0;
    max-width: 36rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--lp-afiche-suave);
}

/* Serpentinas: dieciséis tiras que caen una sola vez al aparecer el cierre.
   Quietas no se ven: solo existen mientras caen. */
.lp-cartel__serpentinas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

    .lp-cartel__serpentinas span {
        position: absolute;
        top: -3rem;
        left: min(calc(var(--lp-lugar) * 1%), calc(100% - 1.75rem));
        width: .5rem;
        height: 1.7rem;
        border-radius: .3rem;
        background: var(--lp-papelito);
        opacity: 0;
    }

        .lp-cartel__serpentinas span:nth-child(5n + 1) {
            --lp-papelito: var(--lp-neon-rosa);
        }

        .lp-cartel__serpentinas span:nth-child(5n + 2) {
            --lp-papelito: var(--lp-neon-amarillo);
        }

        .lp-cartel__serpentinas span:nth-child(5n + 3) {
            --lp-papelito: var(--lp-neon-celeste);
        }

        .lp-cartel__serpentinas span:nth-child(5n + 4) {
            --lp-papelito: var(--lp-neon-verde);
        }

        .lp-cartel__serpentinas span:nth-child(5n) {
            --lp-papelito: var(--lp-neon-violeta);
        }

        .lp-cartel__serpentinas span:nth-child(1) {
            --lp-lugar: 4;
        }

        .lp-cartel__serpentinas span:nth-child(2) {
            --lp-lugar: 11;
        }

        .lp-cartel__serpentinas span:nth-child(3) {
            --lp-lugar: 18;
        }

        .lp-cartel__serpentinas span:nth-child(4) {
            --lp-lugar: 25;
        }

        .lp-cartel__serpentinas span:nth-child(5) {
            --lp-lugar: 31;
        }

        .lp-cartel__serpentinas span:nth-child(6) {
            --lp-lugar: 38;
        }

        .lp-cartel__serpentinas span:nth-child(7) {
            --lp-lugar: 44;
        }

        .lp-cartel__serpentinas span:nth-child(8) {
            --lp-lugar: 50;
        }

        .lp-cartel__serpentinas span:nth-child(9) {
            --lp-lugar: 56;
        }

        .lp-cartel__serpentinas span:nth-child(10) {
            --lp-lugar: 62;
        }

        .lp-cartel__serpentinas span:nth-child(11) {
            --lp-lugar: 68;
        }

        .lp-cartel__serpentinas span:nth-child(12) {
            --lp-lugar: 74;
        }

        .lp-cartel__serpentinas span:nth-child(13) {
            --lp-lugar: 80;
        }

        .lp-cartel__serpentinas span:nth-child(14) {
            --lp-lugar: 86;
        }

        .lp-cartel__serpentinas span:nth-child(15) {
            --lp-lugar: 92;
        }

        .lp-cartel__serpentinas span:nth-child(16) {
            --lp-lugar: 97;
        }

.lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__serpentinas span {
    animation: lp-cartel-caer 3.2s cubic-bezier(.3, .2, .6, 1) both;
}

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__serpentinas span:nth-child(3n) {
        animation-duration: 2.6s;
        animation-delay: .25s;
    }

    .lp-cartel--animada .lp-cartel__cierre.lp-cartel--visible .lp-cartel__serpentinas span:nth-child(3n + 1) {
        animation-duration: 3.6s;
        animation-delay: .5s;
    }

@keyframes lp-cartel-caer {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0);
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(42rem) rotate(540deg);
    }
}

/* ═══ BOLETO FLOTANTE ══════════════════════════════════════════════════════
   Fijo, no pegajoso: así no reserva hueco en el flujo. Se esconde bajando fuera
   de la pantalla y con visibility, para que tampoco reciba el foco. Las muescas
   de los lados son una máscara, como en los boletos de la boletería.

   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-cartel__boleto-flotante {
    position: fixed;
    z-index: 1020;
    left: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.2rem;
    white-space: nowrap;
    border-radius: .5rem;
    background: linear-gradient(180deg, var(--lp-chapa-arriba), var(--lp-chapa-abajo));
    color: var(--lp-chapa-tinta);
    font-family: var(--lp-letrero);
    font-synthesis: none;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-mask: radial-gradient(circle at 0 50%, transparent .55rem, #000 .58rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .55rem, #000 .58rem) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, transparent .55rem, #000 .58rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .55rem, #000 .58rem) right / 51% 100% no-repeat;
    visibility: hidden;
    transform: translateY(calc(100% + 2rem)) rotate(-3deg);
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), visibility 0s linear .35s;
}

    .lp-cartel__boleto-flotante:hover {
        color: var(--lp-chapa-tinta);
        text-decoration: none;
    }

    .lp-cartel__boleto-flotante:focus-visible {
        outline: 3px solid var(--lp-foco-papel);
        outline-offset: 4px;
    }

.lp-cartel__boleto-flotante--visible {
    visibility: visible;
    transform: rotate(-3deg);
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), visibility 0s;
}

.lp-cartel__boleto-flotante-texto {
    padding-right: .6rem;
    border-right: 2px dashed var(--lp-chapa-tinta);
    font-family: var(--lp-rotulo);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.lp-cartel__boleto-flotante-accion {
    font-size: 1.1rem;
}

/* ═══ Ajustes de teléfono ══════════════════════════════════════════════════ */
@media (max-width: 35.99rem) {
    .lp-cartel__acciones .lp-cartel__chapa {
        width: 100%;
    }

    .lp-cartel__afiche,
    .lp-cartel__rotulo {
        padding-inline: 1.4rem;
    }

    .lp-cartel__pegatina {
        top: -1rem;
        right: -1rem;
        width: 5.5rem;
        height: 5.5rem;
        font-size: .78rem;
    }

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

    .lp-cartel__boleto-papel {
        --lp-talon: 3.6rem;
    }

    .lp-cartel__boleto-titulo {
        font-size: 1.35rem;
    }

    /* La hoja de calendario se tumba en una tira sobre el texto: al lado le
       quitaba al título el ancho que necesita una palabra como Calentamiento. */
    .lp-cartel__parada {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-cartel__fecha--gira {
        flex-direction: row;
        justify-self: start;
        width: auto;
    }

        .lp-cartel__fecha--gira .lp-cartel__fecha-numero {
            font-size: 1.35rem;
        }

    .lp-cartel__planilla {
        container-type: inline-size;
    }

    .lp-cartel__planilla-turno {
        font-size: min(1rem, 5cqi);
        letter-spacing: 0;
    }

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

    /* El sello de aviso se queda en su esquina y el título pasa por debajo. */
    .lp-cartel__aviso-titulo {
        margin: 2.6rem 0 .8rem;
    }

    .lp-cartel__boleto-accion {
        font-size: .95rem;
        letter-spacing: 0;
        line-height: 1.15;
    }
}

/* En los teléfonos el boleto flotante se queda solo con la acción: entero no
   cabe entre el borde y la esquina de la mascota del sitio, y ocuparía casi todo
   el ancho de la pantalla. */
@media (max-width: 27.99rem) {
    .lp-cartel__boleto-flotante-texto {
        display: none;
    }
}

/* ═══ Colores forzados del sistema ═════════════════════════════════════════
   El degradado recortado al texto desaparecería con la letra dentro: aquí las
   letras de tinta vuelven a ser texto del sistema. */
@media (forced-colors: active) {
    .lp-cartel__tinta,
    .lp-cartel__mi-cartel-nombre {
        background: none;
        color: CanvasText;
        filter: none;
    }

    .lp-cartel__letrero span {
        color: CanvasText;
    }
}

/* ═══ Menos movimiento ═════════════════════════════════════════════════════
   Sin animaciones ni transiciones, y todo lo que esperaba su aparición ya está
   en su sitio: afiches pegados, letrero encendido, estrellas y fechas visibles.
   Las serpentinas no caen. */
@media (prefers-reduced-motion: reduce) {
    .lp-cartel *,
    .lp-cartel *::before,
    .lp-cartel *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .lp-cartel--animada [data-revelar] {
        opacity: 1;
        transform: none;
    }

    .lp-cartel--animada .lp-cartel__afiche[data-revelar],
    .lp-cartel--animada .lp-cartel__rotulo[data-revelar],
    .lp-cartel--animada .lp-cartel__polaroid[data-revelar],
    .lp-cartel--animada .lp-cartel__volante[data-revelar],
    .lp-cartel--animada .lp-cartel__pregunta[data-revelar] {
        opacity: 1;
        transform: rotate(var(--lp-giro));
    }

    .lp-cartel--animada .lp-cartel__afiche .lp-cartel__parada,
    .lp-cartel--animada .lp-cartel__afiche .lp-cartel__estrella-cifra {
        opacity: 1;
    }

    .lp-cartel--animada .lp-cartel__letrero span {
        color: var(--lp-neon-rosa);
        text-shadow: 0 0 .08em var(--lp-afiche-texto), 0 0 .25em var(--lp-neon-rosa), 0 0 .6em var(--lp-brillo-rosa);
    }

    .lp-cartel__chapa:hover,
    .lp-cartel__selector:hover,
    .lp-cartel__turno[aria-pressed="true"] {
        transform: none;
    }
}