/* Los DISEÑOS de rheo.com.ar/tickets y rheo.com.ar/fotos (Max, 27/10/2026: "muchas opciones, tipo 10 por lo menos, bien
   profesionales, con algún efecto 3D, todos muy distintos, para que Ivo los pueda ir cambiando").
   Cada diseño es <html data-tema="…">; aparte se eligen el fondo (data-fondo) y un efecto (data-efecto, lo hace links.js).
   Se eligen en el panel de la web (sección Links) y se prueban sin guardar con ?tema=…&fondo=…&efecto=… en la dirección.
   Regla de siempre: lo que se mueve es transform u opacity, y con "reducir movimiento" o ahorro de datos queda quieto.
   La lista de diseños con su nombre está en DISENOS (links.js): si se suma uno acá, se suma allá (y en el panel). */

/* ── Fondos (cualquier diseño) ────────────────────────────────────────────────────────────────────────────── */
html[data-fondo="negro"] body { background: var(--bg); }
.capa-fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.capa-fondo i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
html[data-fondo="aurora"] .capa-fondo i:nth-child(1) { width: 70vmax; height: 70vmax; left: -20vmax; top: -25vmax; background: #ff2e6e; animation: au1 18s ease-in-out infinite alternate; }
html[data-fondo="aurora"] .capa-fondo i:nth-child(2) { width: 60vmax; height: 60vmax; right: -25vmax; top: 10vh; background: #5b4bff; animation: au2 22s ease-in-out infinite alternate; }
html[data-fondo="aurora"] .capa-fondo i:nth-child(3) { width: 55vmax; height: 55vmax; left: 5vw; bottom: -30vmax; background: #00c2ff; animation: au1 26s ease-in-out infinite alternate-reverse; }
@keyframes au1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes au2 { to { transform: translate(-16vw, 20vh) scale(.9); } }
html[data-fondo="flyer"] .capa-fondo { background: var(--fondo-flyer, none) center / cover no-repeat; filter: blur(34px) saturate(1.3); transform: scale(1.2); opacity: .5; }
html[data-fondo="flyer"] .capa-fondo::after { content: ""; position: absolute; inset: 0; background: rgba(5, 5, 6, .55); }
html[data-fondo="pride"] .capa-fondo { background: linear-gradient(160deg, #e40303 0%, #ff8c00 18%, #ffed00 34%, #008026 52%, #004dff 70%, #750787 88%); opacity: .28; }
html[data-fondo="grilla"] .capa-fondo { background: linear-gradient(#0b0414, #24062e 55%, #ff2e8a33 70%, #0b0414 71%); }
html[data-fondo="grilla"] .capa-fondo::after { content: ""; position: absolute; left: -50%; right: -50%; bottom: -10vh; height: 55vh; transform: perspective(300px) rotateX(62deg); transform-origin: 50% 100%;
  background: linear-gradient(#ff2e8a 2px, transparent 2px) 0 0 / 100% 46px, linear-gradient(90deg, #ff2e8a 2px, transparent 2px) 0 0 / 46px 100%; opacity: .55; animation: grilla 3s linear infinite; }
@keyframes grilla { to { background-position: 0 46px, 0 0; } }
html[data-fondo="estrellas"] .capa-fondo { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 80% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 70%, #fff, transparent), radial-gradient(1px 1px at 30% 85%, #fff, transparent), radial-gradient(1px 1px at 90% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 45%, #fff, transparent) 0 0 / 260px 260px, #050310; }

main.wrap { position: relative; z-index: 1; }

/* ── 1. Entrada (de fábrica): el troquel y el neón. No necesita nada: es links.css + la página. ───────────── */

/* ── 2. Cromo Y2K: metal pulido, bisel y reflejos; los flyers giran como una moneda. ───────────────────────── */
html[data-tema="cromo"] { --bg: #0c0d10; --card: #1a1c21; --card-2: #23262d; --neon: #d8dde6; }
html[data-tema="cromo"] body { background: radial-gradient(90% 50% at 50% 0%, #2b3140, transparent 70%) no-repeat, #0c0d10; }
html[data-tema="cromo"] .tit h2, html[data-tema="cromo"] .cab h2 { background: linear-gradient(180deg, #fff 0%, #b8c0cc 45%, #5d6470 50%, #e9edf3 75%, #8a919c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="cromo"] .ev::before, html[data-tema="cromo"] .fila, html[data-tema="cromo"] .ficha, html[data-tema="cromo"] .redes a, html[data-tema="cromo"] .link-fotos {
  background: linear-gradient(160deg, #2c3038, #15171b 55%, #262a31) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 10px 24px rgba(0, 0, 0, .5); }
html[data-tema="cromo"] .fl { animation: moneda 7s ease-in-out infinite; box-shadow: 0 0 0 2px #c9cfd8, 0 12px 26px rgba(0, 0, 0, .7); }
@keyframes moneda { 0%, 100% { transform: rotateY(-25deg) rotateX(6deg); } 50% { transform: rotateY(25deg) rotateX(-4deg); } }
html[data-tema="cromo"] .talon i, html[data-tema="cromo"] .ficha .ic, html[data-tema="cromo"] .volver, html[data-tema="cromo"] .link-fotos .ic { background: linear-gradient(180deg, #fff, #9aa2ae 50%, #e6eaf0); color: #111; }
html[data-tema="cromo"] .talon { color: #e6eaf0; }

/* ── 3. Vidrio: tarjetas de cristal esmerilado sobre luces que se mueven (fondo aurora de fábrica). ─────────── */
html[data-tema="vidrio"] { --card: rgba(255, 255, 255, .08); --card-2: rgba(255, 255, 255, .14); --neon: #fff; }
html[data-tema="vidrio"][data-fondo="tema"] .capa-fondo i:nth-child(1) { width: 70vmax; height: 70vmax; left: -20vmax; top: -25vmax; background: #ff2e6e; animation: au1 18s ease-in-out infinite alternate; }
html[data-tema="vidrio"][data-fondo="tema"] .capa-fondo i:nth-child(2) { width: 60vmax; height: 60vmax; right: -25vmax; top: 10vh; background: #5b4bff; animation: au2 22s ease-in-out infinite alternate; }
html[data-tema="vidrio"][data-fondo="tema"] .capa-fondo i:nth-child(3) { width: 55vmax; height: 55vmax; left: 5vw; bottom: -30vmax; background: #00c2ff; animation: au1 26s ease-in-out infinite alternate-reverse; }
html[data-tema="vidrio"] body { background: #07060c; }
html[data-tema="vidrio"] .ev::before, html[data-tema="vidrio"] .fila, html[data-tema="vidrio"] .ficha, html[data-tema="vidrio"] .redes a, html[data-tema="vidrio"] .link-fotos, html[data-tema="vidrio"] .filtros button {
  background: rgba(255, 255, 255, .09) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .14); -webkit-mask: none !important; mask: none !important; }
html[data-tema="vidrio"] .talon { border-left-color: rgba(255, 255, 255, .25); color: #fff; }
html[data-tema="vidrio"] .talon i, html[data-tema="vidrio"] .ficha .ic, html[data-tema="vidrio"] .link-fotos .ic { background: #fff; color: #0b0a12; }
html[data-tema="vidrio"] .volver { background: #fff; }

/* ── 4. Brutal: papel, tinta negra, bordes gruesos y sombras duras que se hunden al tocar. ─────────────────── */
html[data-tema="brutal"] { --bg: #f4efe6; --ink: #0b0b0b; --muted: #3a3632; --card: #fff; --card-2: #fff; --neon: #ff3b30; color-scheme: light; }
html[data-tema="brutal"] body { background: #f4efe6; color: #0b0b0b; }
html[data-tema="brutal"] .marca { background: #0b0b0b; border: 3px solid #0b0b0b; border-radius: 20px; margin-top: 8px; box-shadow: 6px 6px 0 #ff3b30; }
html[data-tema="brutal"] .marca .handle { color: #f5f2ee; padding-bottom: 14px; }
html[data-tema="brutal"] .ev::before, html[data-tema="brutal"] .fila, html[data-tema="brutal"] .ficha, html[data-tema="brutal"] .redes a, html[data-tema="brutal"] .link-fotos, html[data-tema="brutal"] .filtros button {
  background: #fff !important; border: 3px solid #0b0b0b; box-shadow: 5px 5px 0 #0b0b0b; -webkit-mask: none !important; mask: none !important; color: #0b0b0b; }
html[data-tema="brutal"] .ev::before { box-shadow: 5px 5px 0 var(--event, #0b0b0b) !important; }
html[data-tema="brutal"] .ev:active, html[data-tema="brutal"] .ficha:active, html[data-tema="brutal"] .fila:active, html[data-tema="brutal"] .link-fotos:active { transform: translate(4px, 4px); }
html[data-tema="brutal"] .talon { border-left: 3px solid #0b0b0b; color: #0b0b0b; }
html[data-tema="brutal"] .talon i { border: 3px solid #0b0b0b; }
html[data-tema="brutal"] .ev .cuando, html[data-tema="brutal"] .ficha small, html[data-tema="brutal"] .link-fotos small { color: #3a3632; }
html[data-tema="brutal"] .fl { border: 3px solid #0b0b0b; border-radius: 6px; box-shadow: none; animation: brutal-salta 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
@keyframes brutal-salta { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
html[data-tema="brutal"] .ficha .ic, html[data-tema="brutal"] .link-fotos .ic { border: 3px solid #0b0b0b; }
html[data-tema="brutal"] .redes svg { fill: #0b0b0b; }
html[data-tema="brutal"] .tit h2, html[data-tema="brutal"] .cab h2 { color: #0b0b0b; }
html[data-tema="brutal"] .tit a, html[data-tema="brutal"] .pie, html[data-tema="brutal"] .cab span, html[data-tema="brutal"] .anio { color: #3a3632; }
html[data-tema="brutal"] .filtros button[aria-pressed="true"] { background: #0b0b0b !important; color: #fff; }
html[data-tema="brutal"] .volver { border: 3px solid #0b0b0b; box-shadow: 5px 5px 0 #0b0b0b; }

/* ── 5. Galería: los flyers grandes, de a dos, que se inclinan en 3D. ─────────────────────────────────────── */
html[data-tema="galeria"] .lista, html[data-tema="polaroid"] .lista, html[data-tema="minimal"] .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html[data-tema="minimal"] .lista { grid-template-columns: minmax(0, 1fr); gap: 26px; }
html[data-tema="galeria"] .ev, html[data-tema="polaroid"] .ev, html[data-tema="minimal"] .ev { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 0; }
html[data-tema="galeria"] .ev::before, html[data-tema="polaroid"] .ev::before, html[data-tema="minimal"] .ev::before { -webkit-mask: none; mask: none; }
html[data-tema="galeria"] .fl3d, html[data-tema="polaroid"] .fl3d, html[data-tema="minimal"] .fl3d { width: 100%; height: auto; padding: 8px 8px 0; perspective: 700px; }
html[data-tema="galeria"] .fl, html[data-tema="polaroid"] .fl, html[data-tema="minimal"] .fl { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
html[data-tema="galeria"] .fl { animation: galeria 8s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.3s); }
@keyframes galeria { from { transform: rotateY(-9deg) rotateX(7deg) scale(.97); } to { transform: rotateY(9deg) rotateX(-3deg) scale(1); } }
html[data-tema="galeria"] .tx, html[data-tema="polaroid"] .tx, html[data-tema="minimal"] .tx { padding: 12px 12px 4px; }
html[data-tema="galeria"] .ev .nom, html[data-tema="polaroid"] .ev .nom { font-size: 14px; }
html[data-tema="galeria"] .talon, html[data-tema="polaroid"] .talon, html[data-tema="minimal"] .talon { grid-auto-flow: column; gap: 10px; padding: 10px 12px 12px; border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .14); justify-content: start; }
html[data-tema="galeria"] .talon i, html[data-tema="polaroid"] .talon i, html[data-tema="minimal"] .talon i { width: 34px; height: 34px; }

/* ── 6. Carrusel 3D: los flyers en fila, el del centro de frente y los costados girados (coverflow). ──────── */
html[data-tema="carrusel"] .lista { grid-auto-flow: column; grid-auto-columns: min(70vw, 280px); gap: 0; margin: 0 -16px; padding: 10px calc(50% - min(35vw, 140px)) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; perspective: 900px; }
html[data-tema="carrusel"] .lista::-webkit-scrollbar { display: none; }
html[data-tema="carrusel"] .ev { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; scroll-snap-align: center; min-height: 0; margin: 0 6px; transform-style: preserve-3d; }
html[data-tema="carrusel"] .ev::before { -webkit-mask: none; mask: none; }
html[data-tema="carrusel"] .fl3d { width: 100%; height: auto; padding: 10px 10px 0; perspective: none; }
html[data-tema="carrusel"] .fl { width: 100%; height: auto; aspect-ratio: 1; animation: none; transform: none; }
html[data-tema="carrusel"] .tx { padding: 12px 14px 4px; }
html[data-tema="carrusel"] .talon { grid-auto-flow: column; gap: 10px; padding: 10px 14px 14px; border-left: 0; justify-content: start; }
@supports (animation-timeline: view()) {
  html[data-tema="carrusel"] .ev { animation: flujo linear both !important; animation-timeline: view(inline) !important; opacity: 1; }
  @keyframes flujo { 0% { transform: rotateY(48deg) scale(.82); opacity: .5; } 50% { transform: none; opacity: 1; } 100% { transform: rotateY(-48deg) scale(.82); opacity: .5; } }
}

/* ── 7. Synthwave: el atardecer retro con la grilla que avanza y letras de neón rosa. ─────────────────────── */
html[data-tema="synth"] { --bg: #0b0414; --card: rgba(30, 8, 46, .82); --card-2: rgba(48, 12, 70, .9); --neon: #ff2e8a; }
html[data-tema="synth"][data-fondo="tema"] .capa-fondo { background: linear-gradient(#0b0414, #24062e 55%, #ff2e8a33 70%, #0b0414 71%); }
html[data-tema="synth"][data-fondo="tema"] .capa-fondo::after { content: ""; position: absolute; left: -50%; right: -50%; bottom: -10vh; height: 55vh; transform: perspective(300px) rotateX(62deg); transform-origin: 50% 100%;
  background: linear-gradient(#ff2e8a 2px, transparent 2px) 0 0 / 100% 46px, linear-gradient(90deg, #ff2e8a 2px, transparent 2px) 0 0 / 46px 100%; opacity: .5; animation: grilla 3s linear infinite; }
html[data-tema="synth"] body { background: #0b0414; }
html[data-tema="synth"] .tit h2, html[data-tema="synth"] .cab h2 { color: #ffd6ec; text-shadow: 0 0 6px #ff2e8a, 0 0 22px #ff2e8a, 0 0 40px #7a1cff; }
html[data-tema="synth"] .ev::before, html[data-tema="synth"] .fila, html[data-tema="synth"] .ficha, html[data-tema="synth"] .redes a, html[data-tema="synth"] .link-fotos { box-shadow: inset 0 0 0 1.5px #ff2e8a, 0 0 18px rgba(255, 46, 138, .35); }
html[data-tema="synth"] .talon { color: #ffd6ec; border-left-color: rgba(255, 46, 138, .5); }
html[data-tema="synth"] .talon i, html[data-tema="synth"] .ficha .ic, html[data-tema="synth"] .link-fotos .ic, html[data-tema="synth"] .volver { background: linear-gradient(180deg, #ffe600, #ff2e8a); color: #1a0526; }

/* ── 8. Holográfico: un brillo iridiscente que recorre cada tarjeta. ─────────────────────────────────────── */
html[data-tema="holo"] .ev::before, html[data-tema="holo"] .fila, html[data-tema="holo"] .ficha, html[data-tema="holo"] .redes a, html[data-tema="holo"] .link-fotos {
  background: linear-gradient(115deg, #1b1424, #121019) !important; }
html[data-tema="holo"] .ev::after, html[data-tema="holo"] .ficha::after, html[data-tema="holo"] .link-fotos::after, html[data-tema="holo"] .fila::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: .45;
  background: linear-gradient(115deg, transparent 20%, #ff6bd6 32%, #7af4ff 44%, #b6ff7a 56%, #ffe86b 66%, transparent 78%) 0 0 / 300% 100%; animation: holo 5.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.8s); }
html[data-tema="holo"] .ficha, html[data-tema="holo"] .fila, html[data-tema="holo"] .link-fotos { position: relative; isolation: isolate; overflow: hidden; }
html[data-tema="holo"] .ev::after { z-index: -1; }
@keyframes holo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
html[data-tema="holo"] .fl { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 0 26px rgba(122, 244, 255, .45); }
html[data-tema="holo"] .tit h2, html[data-tema="holo"] .cab h2 { background: linear-gradient(90deg, #ff6bd6, #7af4ff, #b6ff7a, #ffe86b, #ff6bd6) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo 6s linear infinite; }

/* ── 9. Orgullo: cada tarjeta con su franja arcoíris y un rebote. ────────────────────────────────────────── */
html[data-tema="pride"][data-fondo="tema"] .capa-fondo { background: linear-gradient(160deg, #e40303 0%, #ff8c00 18%, #ffed00 34%, #008026 52%, #004dff 70%, #750787 88%); opacity: .22; }
html[data-tema="pride"] .ev::before, html[data-tema="pride"] .fila, html[data-tema="pride"] .ficha, html[data-tema="pride"] .redes a, html[data-tema="pride"] .link-fotos {
  background: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787) top / 100% 5px no-repeat, #121014 !important; }
html[data-tema="pride"] .fl { animation: rebote 2.6s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--i, 0) * -.45s); }
@keyframes rebote { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-8px) rotate(-3deg); } 90% { transform: translateY(0) rotate(2deg); } }
html[data-tema="pride"] .tit h2, html[data-tema="pride"] .cab h2 { background: linear-gradient(90deg, #ff4d4d, #ff9f1a, #ffe600, #2bd96b, #4d8bff, #b04dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="pride"] .talon i, html[data-tema="pride"] .ficha .ic, html[data-tema="pride"] .link-fotos .ic, html[data-tema="pride"] .volver { background: conic-gradient(#e40303, #ff8c00, #ffed00, #008026, #004dff, #750787, #e40303); color: #fff; }

/* ── 10. Revista: claro, editorial, grandes títulos y flyers con su sombra. ─────────────────────────────── */
html[data-tema="revista"] { --bg: #fbf8f3; --ink: #141210; --muted: #5d5650; --card: #fff; --card-2: #f3eee6; --neon: #141210; color-scheme: light; }
html[data-tema="revista"] body { background: #fbf8f3; color: #141210; }
html[data-tema="revista"] .marca { background: #141210; border-radius: 0 0 26px 26px; margin: calc(-10px - env(safe-area-inset-top)) -16px 0; padding-top: calc(env(safe-area-inset-top) + 34px); }
html[data-tema="revista"] .marca .handle { color: #d9d2c8; padding-bottom: 16px; }
html[data-tema="revista"] .tit h2, html[data-tema="revista"] .cab h2 { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; text-transform: none; letter-spacing: -.02em; color: #141210; }
html[data-tema="revista"] .ev::before, html[data-tema="revista"] .fila, html[data-tema="revista"] .ficha, html[data-tema="revista"] .redes a, html[data-tema="revista"] .link-fotos, html[data-tema="revista"] .filtros button { background: #fff !important; color: #141210; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 10px 28px rgba(40, 30, 20, .08); }
html[data-tema="revista"] .talon { color: #141210; border-left-color: rgba(0, 0, 0, .14); }
html[data-tema="revista"] .talon i, html[data-tema="revista"] .ficha .ic, html[data-tema="revista"] .link-fotos .ic { background: #141210; color: #fff; }
html[data-tema="revista"] .ev .cuando, html[data-tema="revista"] .ficha small, html[data-tema="revista"] .link-fotos small, html[data-tema="revista"] .tit a, html[data-tema="revista"] .pie, html[data-tema="revista"] .cab span, html[data-tema="revista"] .anio, html[data-tema="revista"] .bajada { color: #5d5650; }
html[data-tema="revista"] .redes svg { fill: #141210; }
html[data-tema="revista"] .fl { box-shadow: 0 14px 26px rgba(40, 30, 20, .25); }
html[data-tema="revista"] .filtros button[aria-pressed="true"] { background: #141210 !important; color: #fff; }
html[data-tema="revista"] .volver { background: #141210; color: #fff; }

/* ── 11. Polaroid: los flyers como fotos instantáneas con cinta, torcidas. ───────────────────────────────── */
html[data-tema="polaroid"] body { background: radial-gradient(circle at 20% 10%, #2a2420, #14110f 60%) fixed; }
html[data-tema="polaroid"] .ev::before { background: #f5f1ea !important; border-radius: 4px; box-shadow: 0 12px 26px rgba(0, 0, 0, .55); }
html[data-tema="polaroid"] .ev { color: #1a1714; transform: rotate(var(--giro, -2deg)); }
html[data-tema="polaroid"] .ev:nth-child(2n) { --giro: 2.4deg; }
html[data-tema="polaroid"] .ev:nth-child(3n) { --giro: -1deg; }
html[data-tema="polaroid"] .ev.sube { animation-name: sube-giro; }
@keyframes sube-giro { from { opacity: 0; transform: translateY(18px) rotate(var(--giro, -2deg)); } to { opacity: 1; transform: rotate(var(--giro, -2deg)); } }
html[data-tema="polaroid"] .ev .fl3d::before { content: ""; position: absolute; top: -6px; left: 50%; width: 64px; height: 20px; margin-left: -32px; background: rgba(255, 240, 200, .6); transform: rotate(-3deg); z-index: 2; }
html[data-tema="polaroid"] .fl3d { position: relative; padding: 10px 10px 0; }
html[data-tema="polaroid"] .fl { border-radius: 2px; box-shadow: none; animation: none; transform: none; }
html[data-tema="polaroid"] .ev .nom { font-family: 'Comic Sans MS', 'Marker Felt', 'Bradley Hand', cursive; font-size: 15px; font-weight: 700; color: #1a1714; }
html[data-tema="polaroid"] .ev .cuando { color: #6a625a; }
html[data-tema="polaroid"] .talon { border-top-color: rgba(0, 0, 0, .12); }

/* ── 12. Terminal: verde sobre negro, líneas de barrido y letra de máquina. ─────────────────────────────── */
html[data-tema="terminal"] { --bg: #020802; --ink: #b6ffb0; --muted: #5fc85a; --card: #041204; --card-2: #062006; --neon: #39ff14; }
html[data-tema="terminal"] body { background: #020802; color: #b6ffb0; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
html[data-tema="terminal"] .capa-fondo { background: repeating-linear-gradient(0deg, rgba(57, 255, 20, .05) 0 1px, transparent 1px 3px); }
html[data-tema="terminal"] .tit h2, html[data-tema="terminal"] .cab h2 { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #39ff14; text-shadow: 0 0 10px rgba(57, 255, 20, .6); }
html[data-tema="terminal"] .tit h2::before, html[data-tema="terminal"] .cab h2::before { content: "> "; }
html[data-tema="terminal"] .ev::before, html[data-tema="terminal"] .fila, html[data-tema="terminal"] .ficha, html[data-tema="terminal"] .redes a, html[data-tema="terminal"] .link-fotos { background: #041204 !important; box-shadow: inset 0 0 0 1px #1d7a14; border-radius: 4px !important; }
html[data-tema="terminal"] .ev::before { -webkit-mask: none; mask: none; }
html[data-tema="terminal"] .ev .nom, html[data-tema="terminal"] .ficha b, html[data-tema="terminal"] .fila b { color: #b6ffb0; }
html[data-tema="terminal"] .fl { filter: grayscale(1) sepia(1) hue-rotate(60deg) saturate(3); border-radius: 2px; animation: falla 4s steps(1) infinite; }
@keyframes falla { 0%, 92%, 100% { transform: none; } 93% { transform: translateX(-3px) skewX(6deg); } 95% { transform: translateX(3px); } }
html[data-tema="terminal"] .talon { color: #39ff14; border-left-color: #1d7a14; }
html[data-tema="terminal"] .talon i, html[data-tema="terminal"] .ficha .ic, html[data-tema="terminal"] .link-fotos .ic, html[data-tema="terminal"] .volver { background: #39ff14; color: #020802; border-radius: 4px; }
html[data-tema="terminal"] .redes svg { fill: #39ff14; }

/* ── 13. Marquesina: cartelera de cine, con lamparitas que se prenden alrededor. ─────────────────────────── */
html[data-tema="marquesina"] { --card: #1a0b0b; --neon: #ffcc33; }
html[data-tema="marquesina"] body { background: radial-gradient(100% 50% at 50% 0%, #3a0d0d, transparent 70%) no-repeat, #0d0505; }
html[data-tema="marquesina"] .tit h2, html[data-tema="marquesina"] .cab h2 { color: #ffcc33; text-shadow: 0 0 12px rgba(255, 204, 51, .5); }
/* Las lamparitas van solo en el marco (10 px): adentro, el panel liso, así la letra se lee. */
html[data-tema="marquesina"] .ev::before, html[data-tema="marquesina"] .ficha, html[data-tema="marquesina"] .link-fotos, html[data-tema="marquesina"] .fila {
  padding: 10px; background: linear-gradient(#1a0b0b, #1a0b0b) content-box, radial-gradient(circle, #ffe08a 0 2px, transparent 2.6px) 0 0 / 12px 12px, #2a1010 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 204, 51, .35); -webkit-mask: none !important; mask: none !important; }
html[data-tema="marquesina"] .ficha, html[data-tema="marquesina"] .link-fotos, html[data-tema="marquesina"] .fila { padding: 22px; }
html[data-tema="marquesina"] .link-fotos { padding: 20px 26px 20px 22px; }
html[data-tema="marquesina"] .ev::after { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, #fff6cf 0 2px, transparent 2.6px) 6px 6px / 12px 12px; padding: 10px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: lamparas 1.2s steps(2) infinite; }
@keyframes lamparas { 50% { opacity: 0; } }
html[data-tema="marquesina"] .fl3d { padding-left: 18px; }
html[data-tema="marquesina"] .talon { margin-right: 10px; }
html[data-tema="marquesina"] .talon { position: relative; }
html[data-tema="marquesina"] .tx { background: #1a0b0b; margin: 10px 0; border-radius: 8px; }
html[data-tema="marquesina"] .talon { color: #ffcc33; border-left-color: rgba(255, 204, 51, .35); }
html[data-tema="marquesina"] .talon i, html[data-tema="marquesina"] .ficha .ic, html[data-tema="marquesina"] .link-fotos .ic, html[data-tema="marquesina"] .volver { background: #ffcc33; color: #1a0505; }

/* ── 14. Mínimo: solo los flyers grandes, uno debajo del otro, sin adornos. ─────────────────────────────── */
html[data-tema="minimal"] .ev::before { background: none !important; }
html[data-tema="minimal"] .ev::after { display: none; }
html[data-tema="minimal"] .fl3d { padding: 0; }
html[data-tema="minimal"] .fl { border-radius: 4px; animation: none; transform: none; box-shadow: none; }
html[data-tema="minimal"] .talon { border-top: 0; padding: 4px 12px 0; }
html[data-tema="minimal"] .ficha, html[data-tema="minimal"] .redes a, html[data-tema="minimal"] .link-fotos { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }

/* ── /fotos: formas propias (las de arriba también la visten) ─────────────────────────────────────────────── */
/* Botones (de fábrica, como el Linktree): el nombre de cada álbum centrado, con su foto de tapa apagada de fondo (Max, 29/10:
   "mejorar mucho más el diseño"). El diseño vive en fotos/index.html (.fila.boton-foto). */
/* Mosaico: las tapas en grilla de dos, con el nombre encima. */
html[data-forma-fotos="mosaico"] .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-forma-fotos="mosaico"] .fila { display: block; position: relative; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; }
html[data-forma-fotos="mosaico"] .fila .tapa { width: 100%; height: 100%; border-radius: 0; }
html[data-forma-fotos="mosaico"] .fila b { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 10px 10px; font-size: 13px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); color: #fff; }
html[data-forma-fotos="mosaico"] .fila > svg { display: none; }
/* Carrete: cada año es una tira de película que se corre de costado. */
html[data-forma-fotos="carrete"] .lista { grid-auto-flow: column; grid-auto-columns: 168px; gap: 0; overflow-x: auto; margin: 0 -16px; padding: 16px; scrollbar-width: none; scroll-snap-type: x mandatory;
  background: radial-gradient(circle, transparent 0 4px, #000 4.5px) 0 4px / 18px 18px repeat-x, radial-gradient(circle, transparent 0 4px, #000 4.5px) 0 calc(100% - 4px) / 18px 18px repeat-x, #000; }
html[data-forma-fotos="carrete"] .lista::-webkit-scrollbar { display: none; }
html[data-forma-fotos="carrete"] .fila { display: grid; grid-template-columns: 1fr; grid-template-rows: 150px auto; margin: 10px 4px; padding: 0 0 10px; background: #111 !important; border-radius: 4px !important; scroll-snap-align: start; box-shadow: none !important; }
html[data-forma-fotos="carrete"] .fila .tapa { width: 100%; height: 150px; border-radius: 2px; }
html[data-forma-fotos="carrete"] .fila b { padding: 8px 8px 0; font-size: 12.5px; color: #f5f2ee; }
html[data-forma-fotos="carrete"] .fila b::before, html[data-forma-fotos="carrete"] .fila > svg { display: none; }
/* Lista con tapa: la foto chiquita al costado (la primera versión). */

@media (prefers-reduced-motion: reduce) {
  .capa-fondo, .capa-fondo i, .capa-fondo::after, html[data-tema] .fl, html[data-tema] .ev::after, html[data-tema] .ficha::after, html[data-tema] .fila::after, html[data-tema] .link-fotos::after, html[data-tema] .tit h2 { animation: none !important; }
  html[data-tema="carrusel"] .ev { animation: none !important; }
}
.calmo .capa-fondo, .calmo .capa-fondo i, .calmo .capa-fondo::after, html.calmo[data-tema] .fl, html.calmo[data-tema] .ev::after { animation: none !important; }

/* ── Efectos (links.js los arma: unas pocas piezas, solo transform y opacity) ─────────────────────────────── */
.efecto { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.efecto i { position: absolute; display: block; font-style: normal; will-change: transform, opacity; }
html[data-efecto="brillos"] .efecto i { width: 10px; height: 10px; color: #fff; animation: titila var(--d, 3s) ease-in-out var(--r, 0s) infinite; }
html[data-efecto="brillos"] .efecto i::before { content: "✦"; position: absolute; inset: -4px; font-size: 14px; line-height: 1; text-shadow: 0 0 8px #fff, 0 0 16px #ff7ab8; }
@keyframes titila { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: .95; transform: scale(1) rotate(90deg); } }
html[data-efecto="burbujas"] .efecto i { bottom: -40px; width: var(--t, 18px); height: var(--t, 18px); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5), inset 4px -4px 8px rgba(255, 255, 255, .25); animation: sube-burbuja var(--d, 9s) linear var(--r, 0s) infinite; }
@keyframes sube-burbuja { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: .8; } to { transform: translate(var(--x, 20px), -115vh); opacity: 0; } }
html[data-efecto="emojis"] .efecto i { bottom: -40px; font-size: var(--t, 22px); animation: sube-burbuja var(--d, 10s) linear var(--r, 0s) infinite; }
.confeti { position: fixed; z-index: 40; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .efecto { display: none; } }
.calmo .efecto { display: none; }