/* Poderes Urbanos · Festival de arte urbano en Villavicencio */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fl { display: inline-block; width: 20px; height: auto; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); border-radius: 2px; }
.r-on [data-r] { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.r-on [data-r].r-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .r-on [data-r] { opacity: 1; transform: none; }
}

:root {
  --tinta: #15101A;
  --noche: #16121A;
  --muro: #4C4843;
  --papel: #EFE8D8;
  --blanco: #FBF8F1;
  --amarillo: #FFD23F;
  --morado: #6B2FA3;
  --morado-osc: #4A1F78;
  --morado-2: #9B5DE5;
  --rosa: #FF3E8A;
  --cian: #2DE2E6;
  --naranja: #FF8A3D;
  --gris: #6E6672;
  --f-pieza: 'Knewave', 'Arial Black', sans-serif;
  --f-bomba: 'Chango', 'Arial Black', sans-serif;
  --f-tag: 'Sedgwick Ave Display', cursive;
  --f-titulo: 'Unbounded', 'Arial Black', sans-serif;
  --f-texto: 'Barlow', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --g: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, 0, 1);
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --puntos: radial-gradient(circle, rgba(21, 16, 26, .16) 1.1px, transparent 1.5px) 0 0 / 22px 22px;
  --pared:
    var(--ruido),
    radial-gradient(60% 50% at 20% 85%, rgba(0, 0, 0, .25), transparent 70%),
    radial-gradient(40% 35% at 85% 20%, rgba(255, 255, 255, .06), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 calc(12.5% - 2px), rgba(0, 0, 0, .18) calc(12.5% - 2px) 12.5%),
    repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 2px), rgba(0, 0, 0, .1) calc(16.66% - 2px) 16.66%),
    linear-gradient(180deg, #57534c, #3e3a36);
}
html { scroll-behavior: smooth; touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); color: var(--blanco); font: 500 1.08rem/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* En celular lo que asoma por los lados (afiches vecinos, cintas inclinadas) se recorta aquí: así nunca ensancha la página */
main, .pie { overflow-x: clip; }
body::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; background: var(--ruido); opacity: .07; mix-blend-mode: multiply; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.wrap { width: min(1360px, 100% - var(--g) * 2); margin-inline: auto; }
.si-tactil { display: none; }
@media (hover: none) { .si-puntero { display: none; } .si-tactil { display: inline; } }
section { position: relative; padding: clamp(3rem, 4.5vw, 4rem) 0; }

/* ---------- Piezas comunes ---------- */
.btn {
  --s: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1em 1.4em;
  border: 3px solid var(--tinta); font: 800 .95rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  box-shadow: 5px 5px 0 var(--s); transition: transform .18s var(--ease), box-shadow .18s var(--ease); rotate: -1deg;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--s); rotate: 0deg; }
.btn--amarillo { background: var(--amarillo); color: var(--tinta); --s: var(--rosa); }
.btn--tinta { background: var(--tinta); color: var(--amarillo); --s: var(--amarillo); }
.btn--sm { padding: .75em 1em; font-size: .78rem; box-shadow: 3px 3px 0 var(--s); }
.btn--bloque { display: flex; width: 100%; }
.btn--grande { font-size: 1.05rem; padding: 1.1em 1.4em; }
.btn.is-off { opacity: .4; pointer-events: none; }
.cinta { position: absolute; top: -13px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -4deg; background: rgba(255, 244, 200, .8); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%); z-index: 3; }

.etiqueta { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; font: 500 .8rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
.etiqueta b { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .4rem; background: var(--tinta); color: var(--amarillo); font: 400 1.2rem var(--f-pieza); letter-spacing: 0; rotate: -5deg; }
.etiqueta--clara { color: var(--blanco); }
.etiqueta--clara b { background: var(--amarillo); color: var(--tinta); }
.titulo { font: 900 clamp(1.6rem, calc(6vw + .3rem), 4.8rem)/.98 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; color: var(--tinta); max-width: 15ch; text-wrap: balance; }
.titulo--claro { color: var(--blanco); }
.cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; margin-bottom: clamp(1.5rem, 2.6vw, 2.2rem); }
.pista { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font: 500 .76rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pista::before { content: ""; flex: none; width: 1.6rem; height: 3px; background: currentColor; }
.papel { background: var(--papel) var(--puntos); color: var(--tinta); }

/* ---------- NAV ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 90; display: flex; align-items: center; gap: 1.2rem; padding: 12px var(--g); background: linear-gradient(rgba(22, 18, 26, .9), rgba(22, 18, 26, 0)); transition: padding .3s var(--ease), background-color .3s, box-shadow .3s; }
.nav.is-fija { padding-block: 8px; background: rgba(22, 18, 26, .96); box-shadow: 0 1px 0 rgba(251, 248, 241, .1), 0 10px 30px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav__marca { display: flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; color: var(--blanco); }
.nav__marca img { width: 48px; height: auto; border-radius: 6px; rotate: -4deg; box-shadow: 3px 3px 0 var(--morado); }
.nav__marca span { font: 900 .78rem/1 var(--f-titulo); text-transform: uppercase; }
.nav__links { display: flex; gap: .4rem; }
.nav__links a { font: 700 .82rem var(--f-texto); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; padding: .4rem .6rem; background: rgba(22, 18, 26, .6); }
.nav__links a:hover { background: var(--amarillo); color: var(--tinta); }
.nav__menu { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border: 3px solid var(--tinta); background: var(--blanco); color: var(--tinta); font: 800 .78rem var(--f-titulo); text-transform: uppercase; box-shadow: 3px 3px 0 var(--morado-2); cursor: pointer; }
.nav__menu i { font-style: normal; font-size: 1.3rem; line-height: .7; transition: rotate .3s; }
.nav__menu[aria-expanded="true"] i { rotate: 45deg; }

/* Menú con foto por sección */
.menu { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; padding: 110px var(--g) 26px; background: var(--tinta); overflow-y: auto; animation: baja .45s var(--ease); }
@keyframes baja { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.menu__body { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 4rem; align-items: center; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista a { display: flex; align-items: baseline; gap: 1rem; padding: .28rem 0; font: 900 clamp(1.6rem, 3.6vw, 3.2rem)/1.08 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; text-decoration: none; color: rgba(251, 248, 241, .35); transition: color .2s, padding .3s; }
.menu__lista a span { font: 500 .8rem var(--f-mono); color: var(--amarillo); letter-spacing: 0; }
.menu__lista a:hover, .menu__lista a:focus-visible { color: var(--blanco); padding-left: 1rem; }
.menu__lista .menu__dona { color: var(--rosa); }
.menu__vista { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 66vh; rotate: 2.5deg; padding: 10px; background: var(--blanco); box-shadow: 10px 10px 0 var(--morado); }
.menu__vista img { width: 100%; height: 100%; object-fit: cover; }
.menu__pie { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(251, 248, 241, .2); font: 500 .8rem var(--f-mono); text-transform: uppercase; }
.menu__pie a { color: var(--amarillo); text-decoration: none; }
.menu__pie span { margin-left: auto; opacity: .6; }

/* ==========================================================================
   LA PIEZA (motor de capas: hero, ediciones, simulador, firma y pie)
   ========================================================================== */
.pz { position: relative; --boceto: 1; --relleno: 1; --fade: 1; --contorno: 1; --sombra: 1; --brillo: 1; --fondo: 1; --trazo: rgba(251, 248, 241, .8); font-family: var(--f-pieza); line-height: .86; }
.pz__texto { position: relative; display: grid; z-index: 1; }
.pz__capa { grid-area: 1 / 1; white-space: nowrap; pointer-events: none; }
.pz__l { display: block; }
.pz__l--2 { margin: -.06em 0 0 .45em; }
.pz__l .pz__esp { width: .28em; }
.pz__l span { display: inline-block; transform: rotate(var(--r)) translateY(var(--y)); margin-right: -.035em; }
.pz__capa--boceto { color: transparent; -webkit-text-stroke: 2px var(--trazo); transform: translate(.025em, -.02em) rotate(-.7deg); clip-path: inset(-10% calc((1 - var(--boceto)) * 110%) -10% -10%); opacity: calc(1 - var(--contorno)); }
.pz__capa--relleno span { color: transparent; background: linear-gradient(180deg, #FFF6CC 0%, #FFE57E 38%, #FFD23F 66%, #F2A922 100%); -webkit-background-clip: text; background-clip: text; }
.pz__capa--relleno { -webkit-mask: linear-gradient(105deg, #000 calc(var(--relleno) * 125% - 25%), transparent calc(var(--relleno) * 125%)); mask: linear-gradient(105deg, #000 calc(var(--relleno) * 125% - 25%), transparent calc(var(--relleno) * 125%)); }
.pz__capa--fade span { color: transparent; background: linear-gradient(180deg, transparent 48%, rgba(255, 62, 138, .9) 66%, rgba(155, 93, 229, .95) 88%); -webkit-background-clip: text; background-clip: text; }
.pz__capa--fade { -webkit-mask: linear-gradient(0deg, #000 calc(var(--fade) * 120% - 20%), transparent calc(var(--fade) * 120%)); mask: linear-gradient(0deg, #000 calc(var(--fade) * 120% - 20%), transparent calc(var(--fade) * 120%)); }
.pz__capa--contorno { color: transparent; -webkit-text-stroke: calc(var(--contorno) * .085em) var(--tinta); }
.pz__capa--sombra span {
  color: var(--morado-osc); -webkit-text-stroke: .085em var(--tinta);
  text-shadow:
    calc(var(--sombra) * .014em) calc(var(--sombra) * .014em) 0 var(--morado), calc(var(--sombra) * .028em) calc(var(--sombra) * .028em) 0 var(--morado),
    calc(var(--sombra) * .042em) calc(var(--sombra) * .042em) 0 var(--morado), calc(var(--sombra) * .056em) calc(var(--sombra) * .056em) 0 var(--morado),
    calc(var(--sombra) * .07em) calc(var(--sombra) * .07em) 0 var(--morado), calc(var(--sombra) * .084em) calc(var(--sombra) * .084em) 0 var(--tinta),
    calc(var(--sombra) * .095em) calc(var(--sombra) * .095em) 0 var(--tinta);
}
.pz__capa--sombra { opacity: min(1, calc(var(--sombra) * 4)); }
.pz__capa--aura span { color: var(--blanco); -webkit-text-stroke: .2em var(--blanco); transform: rotate(var(--r)) translate(.04em, calc(var(--y) + .04em)); }
.pz__capa--aura { opacity: var(--sombra); filter: drop-shadow(0 .05em .1em rgba(0, 0, 0, .35)); }
.pz__capa--brillo span { color: transparent; background: linear-gradient(118deg, transparent 0 20%, rgba(255, 255, 255, .95) 20% 25%, transparent 25% 29%, rgba(255, 255, 255, .85) 29% 31%, transparent 31%) 0 0 / 100% 62% no-repeat; -webkit-background-clip: text; background-clip: text; }
.pz__capa--brillo { opacity: var(--brillo); }
.pz__fondo { position: absolute; inset: -18% -10%; z-index: 0; pointer-events: none; }
.pz__fondo i { position: absolute; left: var(--x); top: var(--y); width: 26%; aspect-ratio: 1; border-radius: 50%; translate: -20% -20%; background: radial-gradient(circle at 45% 45%, var(--c) 0 38%, color-mix(in srgb, var(--c) 55%, transparent) 55%, transparent 71%); filter: blur(3px); transform: scale(calc(var(--fondo) * var(--s))); opacity: calc(var(--fondo) * .9); }
.pz__chispas, .pz__saludos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pz__chispas i { position: absolute; left: var(--x); top: var(--y); font-style: normal; font-size: .38em; color: #fff; text-shadow: 0 0 .25em #fff, 0 0 .6em var(--cian); transform: scale(var(--brillo)) rotate(calc(var(--brillo) * 90deg)); }
.pz__saludos span { position: absolute; left: var(--x); top: var(--y); font: 400 .2em/1 var(--f-tag); color: var(--c); rotate: var(--r); white-space: nowrap; opacity: var(--fondo); text-shadow: 0 0 .3em color-mix(in srgb, var(--c) 50%, transparent); }
.pz--solo-boceto { --relleno: 0; --fade: 0; --contorno: 0; --sombra: 0; --brillo: 0; --fondo: 0; --trazo: var(--blanco); }
.pz--solo-boceto .pz__capa--boceto { -webkit-text-stroke-width: 2.5px; }

/* ==========================================================================
   HERO: pieza + boleta de patrocinio
   ========================================================================== */
.hero { min-height: 100svh; display: grid; align-items: center; padding: 110px 0 70px; overflow: hidden; }
.hero__pared { position: absolute; inset: 0; background-color: var(--muro); background-image: var(--pared); box-shadow: inset 0 -140px 140px rgba(0, 0, 0, .4); }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero__izq { display: grid; justify-items: start; }
.hero__paso, .hero__lead { grid-row: 3; grid-column: 1; align-self: start; }
.hero__ante { font: 500 .8rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.pz--hero { font-size: clamp(3.6rem, 9.6vw, 10.6rem); width: max-content; max-width: 100%; margin: 0 0 0 -.05em; --boceto: 0; --relleno: 0; --fade: 0; --contorno: 0; --sombra: 0; --brillo: 0; --fondo: 0; }
.hero__paso { min-height: 2.2rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); font: 500 .8rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; transition: opacity .4s; }
.hero__paso b { display: inline-block; padding: .4rem .7rem; background: var(--amarillo); color: var(--tinta); font-weight: 500; rotate: -2deg; }
.hero.is-listo .hero__paso { opacity: 0; }
.hero__lead { max-width: 46ch; margin-top: clamp(1.4rem, 3vh, 2.2rem); font: 600 clamp(1.05rem, 1.4vw, 1.25rem)/1.45 var(--f-texto); opacity: 0; transform: translateY(12px); transition: opacity .6s .1s, transform .6s .1s var(--ease); }
.hero__lead b { color: var(--amarillo); }
.hero.is-listo .hero__lead { opacity: 1; transform: none; }
.hero__repetir { margin-top: 1rem; padding: 0; border: 0; background: none; color: rgba(251, 248, 241, .7); font: 500 .8rem var(--f-mono); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; opacity: 0; transition: opacity .4s .3s; }
.hero.is-listo .hero__repetir { opacity: 1; }
.hero__repetir:hover { color: var(--amarillo); }

/* Boleta (de la opción C) */
.boleto { position: relative; display: grid; gap: 1rem; padding: 2rem 1.6rem 1.5rem; background: var(--tinta); border: 3px solid var(--blanco); box-shadow: 10px 10px 0 var(--amarillo); rotate: 1.2deg; }
.boleto::before, .boleto::after { content: ""; position: absolute; top: 46%; width: 26px; height: 26px; border-radius: 50%; background: #45413c; border: 3px solid var(--blanco); }
.boleto::before { left: -16px; clip-path: inset(0 0 0 50%); }
.boleto::after { right: -16px; clip-path: inset(0 50% 0 0); }
.boleto__eti { font: 500 .78rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); }
.boleto__fecha { font: 900 clamp(3rem, 5vw, 4.4rem)/.86 var(--f-titulo); letter-spacing: -.03em; }
.cuenta { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.cuenta span { display: grid; justify-items: center; padding: .55rem .2rem; background: var(--blanco); color: var(--tinta); }
.cuenta b { font: 900 1.45rem/1 var(--f-titulo); }
.cuenta small { font: 500 .62rem var(--f-mono); text-transform: uppercase; }
.boleto__meta { display: grid; gap: .45rem; padding-top: .9rem; border-top: 2px dashed rgba(251, 248, 241, .35); font: 500 .82rem var(--f-mono); }
.boleto__meta b { font-weight: 500; color: var(--amarillo); }
.barra { display: block; height: 12px; border: 2px solid var(--blanco); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; width: var(--p); background: var(--amarillo); }
.boleto__cupos { color: rgba(251, 248, 241, .8); }
.boleto__meta > p:first-child:not(:has(+ .barra)) { font-size: .9rem; }
.boleto__paises { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font: 500 .72rem var(--f-mono); color: rgba(251, 248, 241, .7); }
.boleto__paises span { margin-left: .3rem; }
.boleto__dona { justify-self: center; font: 600 .95rem var(--f-texto); color: var(--blanco); text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 4px; }
.boleto__dona:hover { color: var(--amarillo); }

/* Disco con el logo, girando */
.disco { position: absolute; top: -64px; right: -44px; width: 128px; height: 128px; z-index: 4; }
.disco svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 16s linear infinite; overflow: visible; }
.disco text { font: 700 14px var(--f-titulo); fill: var(--blanco); }
.disco::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rosa); border: 3px solid var(--tinta); box-shadow: 5px 5px 0 var(--tinta); }
.disco img { position: absolute; inset: 22%; width: 56%; height: 56%; object-fit: cover; border-radius: 50%; border: 3px solid var(--tinta); }
@keyframes gira { to { rotate: 360deg; } }

/* ---------- Cinta de saludos ---------- */
.cinta-saludos { position: relative; z-index: 6; overflow: hidden; margin: -26px 0; padding: .7rem 0; background: var(--amarillo); color: var(--tinta); rotate: -1.8deg; border-block: 4px solid var(--tinta); box-shadow: 0 10px 0 rgba(0, 0, 0, .25); }
.cinta-saludos__pista { display: flex; width: max-content; gap: 1.2rem; align-items: center; animation: corre 40s linear infinite; font: 900 1.05rem var(--f-titulo); text-transform: uppercase; white-space: nowrap; }
.cinta-saludos__pista span { font: 400 1.5rem var(--f-tag); text-transform: none; color: var(--morado); }
.cinta-saludos__pista i { font-style: normal; color: var(--rosa); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- Aparecer pintado con aerosol (se usa en varias secciones) ---------- */
@property --rad { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.con-spray [data-spray]:not(.spray-fin) {
  -webkit-mask: radial-gradient(circle at var(--sx, 30%) var(--sy, 45%), #000 calc(var(--rad) - 14%), rgba(0, 0, 0, .55) calc(var(--rad) - 6%), transparent var(--rad));
          mask: radial-gradient(circle at var(--sx, 30%) var(--sy, 45%), #000 calc(var(--rad) - 14%), rgba(0, 0, 0, .55) calc(var(--rad) - 6%), transparent var(--rad));
  transition: --rad 1.15s cubic-bezier(.3, .6, .2, 1) var(--d, 0s);
}
.con-spray [data-spray].is-pintado { --rad: 170%; }

/* ---------- 01 Festival: la pared del barrio ---------- */
.festival {
  overflow: hidden; color: var(--blanco);
  background-color: #2C2038;
  background-image:
    var(--ruido),
    radial-gradient(50% 60% at 85% 30%, rgba(255, 62, 138, .18), transparent 70%),
    radial-gradient(45% 50% at 10% 90%, rgba(45, 226, 230, .12), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 calc(12.5% - 2px), rgba(0, 0, 0, .22) calc(12.5% - 2px) 12.5%),
    repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 2px), rgba(0, 0, 0, .14) calc(16.66% - 2px) 16.66%);
  box-shadow: inset 0 40px 80px rgba(0, 0, 0, .35);
}
/* Una rejilla: arriba el título; en medio la nota dorada y la descripción a la izquierda, las fotos a la derecha; abajo las cifras a todo el ancho */
.festival__muro { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); grid-template-areas: "tit tit" "cit fot" "des fot" "cif cif"; gap: 1.2rem clamp(1.5rem, 3vw, 3rem); align-items: center; }
.festival__tit { grid-area: tit; margin-bottom: .6rem; }
.festival__muro > .engrudo { grid-area: cit; align-self: end; }
.festival__p { grid-area: des; align-self: start; max-width: 42ch; margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.18rem); color: rgba(251, 248, 241, .86); }
/* En pantallas anchas la nota sube junto al título: ocupa el hueco a la derecha de sus líneas 2 y 3, que son más cortas */
@media (min-width: 1400px) {
  .festival__muro { grid-template-areas: "tit tit" "des fot" "cif cif"; }
  .festival__muro > .engrudo { grid-area: tit; justify-self: end; align-self: end; width: clamp(380px, calc(100% - 860px), 500px); margin-bottom: .6rem; }
  .festival__p { align-self: center; }
}
/* Afiche pegado con engrudo: papel arrugado sobre la pared */
.engrudo {
  position: relative; margin: 0; padding: 1.4rem 1.4rem 1.2rem; color: var(--tinta); rotate: -1.5deg;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .55) 0 12%, transparent 12% 30%, rgba(0, 0, 0, .05) 30% 31%, transparent 31% 62%, rgba(255, 255, 255, .35) 62% 64%, transparent 64%),
    linear-gradient(18deg, transparent 0 46%, rgba(0, 0, 0, .06) 46% 47%, transparent 47%),
    var(--amarillo);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15), 0 18px 30px -12px rgba(0, 0, 0, .55);
  clip-path: polygon(0 2%, 4% 0, 30% 1.5%, 62% 0, 100% 1%, 99% 40%, 100% 98%, 70% 100%, 35% 98.5%, 2% 100%, 0 60%);
}
.engrudo p { font: 900 clamp(.95rem, 1.2vw, 1.1rem)/1.25 var(--f-titulo); text-transform: uppercase; letter-spacing: -.01em; }
.engrudo cite { display: block; margin-top: .7rem; font: 500 .74rem var(--f-mono); font-style: normal; }
.collage { grid-area: fot; position: relative; height: clamp(230px, 17.5vw, 270px); }
.pegada { position: absolute; margin: 0; padding: 10px 10px 0; background: var(--blanco); rotate: var(--r); translate: 0 var(--py, 0px); box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .7), 0 2px 0 rgba(0, 0, 0, .2); will-change: translate; }
.pegada img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pegada figcaption { padding: .55rem .2rem .7rem; font: 500 .72rem var(--f-mono); color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.pegada--1 { width: 35%; left: 0; top: 6%; z-index: 1; }
.pegada--2 { width: 35%; left: 32.5%; top: 0; z-index: 2; }
.pegada--3 { width: 35%; right: 0; top: 8%; z-index: 3; }
.pegada--3 img { object-position: 50% 30%; }
.cifras { grid-area: cif; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; margin-top: 1rem; padding-top: 1.3rem; border-top: 3px dashed rgba(251, 248, 241, .25); }
.cifra { display: flex; align-items: center; gap: 1.1rem; }
.pz--cifra { flex: none; font-size: clamp(2.6rem, 3.4vw, 3.3rem); height: 1.12em; }
.cifra p { font: 800 .76rem/1.25 var(--f-titulo); text-transform: uppercase; letter-spacing: .02em; max-width: 18ch; }

/* ---------- 02 Obras: afiches pegados en la pared ---------- */
.obras {
  color: var(--blanco); overflow: hidden;
  background-color: #3B3733;
  background-image:
    var(--ruido),
    radial-gradient(42% 50% at 50% 46%, rgba(255, 238, 200, .16), transparent 72%),
    repeating-linear-gradient(180deg, transparent 0 calc(12.5% - 2px), rgba(0, 0, 0, .2) calc(12.5% - 2px) 12.5%),
    repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 2px), rgba(0, 0, 0, .12) calc(16.66% - 2px) 16.66%),
    linear-gradient(180deg, #46423d, #2b2825);
  box-shadow: inset 0 60px 90px rgba(0, 0, 0, .35);
}
.escenario { display: grid; gap: 1.8rem; }
.escenario__visor { position: relative; --alto: clamp(360px, 52vh, 480px); height: var(--alto); }
.larga .escenario__visor { --alto: 440px; }
@media (min-width: 1101px) {
  .obras .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cab tira" "vis vis"; column-gap: 2rem; }
  .obras .cabeza { grid-area: cab; }
  .obras .escenario { display: contents; }
  .obras .escenario__visor { grid-area: vis; }
  .obras .escenario__tira { grid-area: tira; align-self: end; display: grid; grid-template-columns: repeat(5, 66px); gap: 10px 12px; margin-bottom: clamp(1.5rem, 2.6vw, 2.2rem); }
  .obras .mini { width: 66px; }
}
.escena { position: absolute; inset: 0 0 40px; display: grid; place-items: center; margin: 0; visibility: hidden; pointer-events: none; }
.escena.is-on, .escena.is-p1, .escena.is-p2 { visibility: visible; }
.escena.is-on { z-index: 3; pointer-events: auto; }
.escena.is-p1 { z-index: 2; }
.escena.is-p2 { z-index: 1; }
.escena__papel { position: relative; display: block; padding: 12px; background: var(--blanco); rotate: var(--r); box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 44px 60px -24px rgba(0, 0, 0, .85); transition: translate .7s var(--ease), rotate .7s var(--ease), filter .7s, scale .7s var(--ease); }
.escena__papel::before, .escena__papel::after { content: ""; position: absolute; top: -14px; width: 110px; height: 30px; background: rgba(255, 244, 200, .82); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%); z-index: 2; }
.escena__papel::before { left: 6%; rotate: -7deg; }
.escena__papel::after { right: 6%; rotate: 6deg; }
.escena img { display: block; width: auto; height: auto; max-height: calc(var(--alto) - 120px); max-width: min(76vw, 1040px); }
.escena.is-p1 .escena__papel { translate: -8% 3%; rotate: calc(var(--r) - 6deg); filter: brightness(.5) saturate(.7); scale: .93; }
.escena.is-p2 .escena__papel { translate: 9% -2%; rotate: calc(var(--r) + 7deg); filter: brightness(.35) saturate(.5); scale: .88; }
.escena.is-pega .escena__papel { animation: pegar .6s cubic-bezier(.2, .9, .25, 1.12); }
@keyframes pegar { from { opacity: 0; transform: scale(1.16) rotate(7deg) translateY(-30px); } 55% { opacity: 1; } }
.escenario__ficha { position: absolute; left: 0; bottom: 0; z-index: 6; display: grid; gap: .1rem; max-width: min(440px, 62%); padding: .8rem 1.1rem .9rem; background: var(--amarillo); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); rotate: -2deg; }
.escenario__ficha span { font: 500 .72rem var(--f-mono); letter-spacing: .1em; }
.escenario__ficha b { font-weight: 500; }
.escenario__ficha strong { font: 900 clamp(1.05rem, 1.8vw, 1.45rem)/1.05 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; }
.escenario__ficha small { font: 600 .85rem var(--f-texto); }
.escenario__ctrl { position: absolute; right: 0; bottom: 0; z-index: 6; display: flex; gap: .7rem; }
.escenario__ctrl button, .lupa__nav, .lupa__x { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--tinta); background: var(--amarillo); color: var(--tinta); font: 900 1.4rem var(--f-titulo); box-shadow: 4px 4px 0 var(--tinta); cursor: pointer; transition: transform .2s var(--ease); }
.escenario__ctrl button:hover, .lupa__nav:hover { transform: translateY(-3px) rotate(-6deg); }
.escenario__ctrl button:first-child { background: var(--blanco); }
.escenario__grande { position: absolute; top: 0; right: 0; z-index: 6; padding: .55rem .8rem; border: 3px solid var(--tinta); background: var(--blanco); color: var(--tinta); font: 500 .76rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; rotate: 3deg; box-shadow: 4px 4px 0 var(--tinta); cursor: zoom-in; }
.escenario__grande:hover { background: var(--amarillo); }
.escenario__tiempo { position: absolute; left: 34%; right: 34%; bottom: 14px; z-index: 6; height: 6px; border-radius: 99px; background: rgba(251, 248, 241, .18); overflow: hidden; }
.escenario__tiempo i { display: block; height: 100%; width: 0; background: var(--amarillo); }
.escenario__tiempo i.corre { width: 100%; transition: width var(--dur, 6s) linear; }
.escenario__tira { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.mini { position: relative; width: 92px; aspect-ratio: 1; padding: 5px; border: 0; background: var(--blanco); rotate: var(--r); cursor: pointer; opacity: .7; filter: saturate(.5); box-shadow: 0 12px 16px -8px rgba(0, 0, 0, .7); transition: opacity .25s, filter .25s, transform .25s var(--ease); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini span { position: absolute; left: 0; top: -8px; padding: .05rem .35rem; background: var(--tinta); color: var(--amarillo); font: 500 .62rem var(--f-mono); }
.mini:hover { opacity: 1; filter: none; transform: translateY(-4px); }
.mini.is-on { opacity: 1; filter: none; transform: translateY(-8px) scale(1.06); outline: 3px solid var(--amarillo); outline-offset: 2px; }
.lupa { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(11, 8, 14, .97); color: var(--blanco); }
.lupa[open] { display: grid; place-items: center; }
.lupa::backdrop { background: transparent; }
.lupa img { max-width: 92vw; max-height: 80dvh; object-fit: contain; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.lupa__pie { position: absolute; left: 50%; bottom: 3vh; translate: -50% 0; display: grid; justify-items: center; gap: .2rem; text-align: center; }
.lupa__pie b { font: 900 1.2rem var(--f-titulo); text-transform: uppercase; }
.lupa__pie span { font: 500 .8rem var(--f-mono); opacity: .8; }
.lupa__x { position: absolute; top: 18px; right: 18px; background: var(--blanco); }
.lupa__nav { position: absolute; top: 50%; translate: 0 -50%; }
.lupa__nav--ant { left: 18px; }
.lupa__nav--sig { right: 18px; }

/* ---------- 03 Patrocina ---------- */
.patrocina { background: var(--noche); background-image: radial-gradient(60% 50% at 85% 10%, rgba(107, 47, 163, .45), transparent 70%); }
.boceta { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.boceta__muro { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: hidden; container-type: inline-size; border: 4px solid var(--tinta); background-color: var(--muro); background-image: var(--pared); }
.boceta__mural { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.55) saturate(1.1); transition: opacity .5s; }
.boceta__presenta { position: absolute; top: 5%; left: 50%; translate: -50% 0; z-index: 3; white-space: nowrap; padding: .45em .9em; background: var(--tinta); color: var(--blanco); font: 500 2cqi/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; opacity: 0; transition: opacity .4s; }
.boceta__presenta b { color: var(--amarillo); font-weight: 500; }
.boceta__pie { position: absolute; left: 3%; bottom: 3%; z-index: 3; font: 500 1.6cqi var(--f-mono); color: rgba(251, 248, 241, .75); text-transform: uppercase; }
.pz--marca { font-size: var(--fs, 15cqi); transition: font-size .4s var(--ease); }
.boceta__muro[data-nivel="tag"] .pz--marca { font-family: var(--f-tag); rotate: -8deg; }
.boceta__muro[data-nivel="tag"] .pz__capa:not(.pz__capa--relleno), .boceta__muro[data-nivel="tag"] .pz__fondo, .boceta__muro[data-nivel="tag"] .pz__chispas { display: none; }
.boceta__muro[data-nivel="tag"] .pz__capa--relleno span { background: none; color: var(--tinta); }
.boceta__muro[data-nivel="throwup"] .pz--marca { font-family: var(--f-bomba); }
.boceta__muro[data-nivel="throwup"] .pz__capa--fade, .boceta__muro[data-nivel="throwup"] .pz__capa--brillo, .boceta__muro[data-nivel="throwup"] .pz__capa--aura, .boceta__muro[data-nivel="throwup"] .pz__fondo, .boceta__muro[data-nivel="throwup"] .pz__chispas { display: none; }
.boceta__muro[data-nivel="throwup"] .pz__capa--relleno span { background: linear-gradient(180deg, #fff, #D9D7E0); -webkit-background-clip: text; background-clip: text; }
.boceta__muro[data-nivel="throwup"] .pz { --sombra: .45; }
.boceta__muro[data-nivel="piece"] .pz__capa--brillo, .boceta__muro[data-nivel="piece"] .pz__capa--aura, .boceta__muro[data-nivel="piece"] .pz__fondo, .boceta__muro[data-nivel="piece"] .pz__chispas { display: none; }
.boceta__muro[data-nivel="masterpiece"] .boceta__mural, .boceta__muro[data-nivel="masterpiece"] .boceta__presenta { opacity: 1; }
.pz--marca .pz__capa--boceto, .pz--mini .pz__capa--boceto, .pz--pie .pz__capa--boceto, .pz--ed:not(.pz--solo-boceto) .pz__capa--boceto { display: none; }
.boceta__panel { display: grid; gap: .9rem; }
.boceta__panel .pista { margin: 0; }
.campo { display: grid; gap: .4rem; }
.patrocina .cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); align-items: end; }
.campo--cab { margin-bottom: .5rem; }
@media (max-width: 860px) { .patrocina .cabeza { grid-template-columns: minmax(0, 1fr); } }
.campo > span { font: 500 .74rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 248, 241, .7); }
.campo input { width: 100%; padding: .4rem 0 .5rem; background: transparent; border: 0; border-bottom: 3px solid currentColor; border-radius: 0; font: 800 1.3rem var(--f-titulo); text-transform: uppercase; color: var(--blanco); }
.campo input::placeholder { color: rgba(251, 248, 241, .3); }
.campo input:focus { outline: none; border-color: var(--amarillo); }
.niveles { display: grid; gap: .4rem; }
.nivel { position: relative; display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "n c p"; gap: 0 1.2rem; align-items: center; padding: .55rem .9rem; border: 3px solid rgba(251, 248, 241, .25); cursor: pointer; transition: border-color .2s, background-color .2s, rotate .2s; }
.nivel input { position: absolute; opacity: 0; }
.nivel:has(input:checked) { border-color: var(--amarillo); background: rgba(255, 210, 63, .1); rotate: -1deg; }
.nivel:has(input:focus-visible) { outline: 3px solid var(--rosa); outline-offset: 2px; }
.nivel__n { grid-area: n; font: 900 1.15rem var(--f-titulo); text-transform: uppercase; }
.nivel__p { grid-area: p; justify-self: end; font: 400 1.5rem var(--f-pieza); color: var(--amarillo); }
.nivel__c { grid-area: c; justify-self: end; font: 500 .72rem var(--f-mono); opacity: .7; }
.beneficios { margin: 0; padding-left: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.6rem; font-size: .92rem; line-height: 1.35; }
.beneficios li::marker { content: "✦  "; color: var(--amarillo); }

/* ---------- 04 La crew: cartel de festival ---------- */
.crew { background: var(--amarillo); color: var(--tinta); overflow: hidden; }
.cartel { position: relative; padding: clamp(1.3rem, 2.4vw, 1.8rem) clamp(1rem, 4vw, 3rem); background: var(--tinta); color: var(--blanco); text-align: center; border: 4px solid var(--tinta); box-shadow: 12px 12px 0 var(--rosa); rotate: -.6deg; }
.cartel::before, .cartel::after { content: ""; position: absolute; width: 110px; height: 30px; background: rgba(255, 244, 200, .8); clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%); }
.cartel::before { top: -14px; left: 8%; rotate: -6deg; }
.cartel::after { bottom: -14px; right: 8%; rotate: 4deg; }
.cartel__cab { font: 500 .8rem var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--amarillo); margin-bottom: 1.4rem; }
.cartel__renglon { list-style: none; margin: 0; padding: .3rem 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .1rem 0; }
.cartel__renglon li { display: inline-flex; align-items: center; }
.cartel__renglon button { font-size: 1em; }
.cartel__renglon li + li::before { content: "/"; margin: 0 .45em; color: var(--rosa); font: 400 .8em/1 var(--f-pieza); }
.cartel__renglon--xl { flex-direction: column; }
.cartel__renglon--xl li + li::before { content: none; }
.cartel__renglon button { padding: 0; border: 0; background: none; color: inherit; font-family: var(--f-titulo); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: 1.02; cursor: pointer; transition: color .2s; }
.cartel__renglon button:hover, .cartel__renglon button:focus-visible { color: var(--amarillo); }
.cartel__renglon .fl { width: 18px; }
.cartel__renglon--xl li { font-size: clamp(1.9rem, 4.2vw, 3.9rem); }
.cartel__renglon--xl button { color: var(--amarillo); }
.cartel__renglon--xl button:hover { color: var(--rosa); }
.cartel__renglon--lg li { font-size: clamp(1.4rem, 2.8vw, 2.7rem); }
.cartel__renglon--md li { font-size: clamp(1.15rem, 2.3vw, 2.2rem); }
.cartel__renglon--md button { color: var(--cian); }
.cartel__renglon--sm li { font-size: clamp(1rem, 1.7vw, 1.6rem); }
.cartel__mas { margin-top: .8rem; font: 500 .82rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(251, 248, 241, .75); }
.cartel__pie { margin-top: 1rem; padding-top: .7rem; border-top: 2px solid rgba(251, 248, 241, .25); font: 400 1.6rem var(--f-tag); color: var(--rosa); }
.crew__visor { position: fixed; left: 0; top: 0; z-index: 70; width: clamp(220px, 22vw, 330px); aspect-ratio: 4 / 5; margin: 0; padding: 8px; background: var(--blanco); border: 3px solid var(--tinta); box-shadow: 10px 10px 0 var(--morado); pointer-events: none; opacity: 0; scale: .6; transition: opacity .2s, scale .3s var(--ease); }
.crew__visor img { width: 100%; height: 100%; object-fit: cover; }
.crew__visor.is-on { opacity: 1; scale: 1; }

/* ---------- 05 Cero Catorce: su foto, su obra y su pasaporte ---------- */
.c14__cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); align-items: end; }
.c14__lead { margin-bottom: .4rem; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.5; }
.c14__cuerpo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr) minmax(0, .62fr); gap: clamp(1.2rem, 2.4vw, 2.2rem); grid-template-rows: clamp(400px, 30vw, 450px); align-items: stretch; }
.c14__foto { position: relative; margin: 0; rotate: -1.5deg; }
.c14__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; border: 4px solid var(--tinta); box-shadow: 10px 10px 0 var(--morado); }
.c14__tag { position: absolute; left: -6%; bottom: -1.1rem; font: 400 clamp(2.2rem, 3.6vw, 3.4rem)/1 var(--f-tag); color: var(--amarillo); rotate: -8deg; -webkit-text-stroke: .025em var(--tinta); paint-order: stroke fill; text-shadow: .05em .05em 0 var(--tinta); white-space: nowrap; }
.psp__obra { display: flex; flex-direction: column; margin: 0; padding: 8px 8px 0; background: var(--blanco); border: 3px solid var(--tinta); rotate: .8deg; box-shadow: 8px 8px 0 var(--rosa); }
.psp__obra img { flex: 1; min-height: 0; width: 100%; object-fit: cover; transition: opacity .25s; }
.psp__obra img.is-cambio { opacity: 0; }
.psp__obra figcaption { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; padding: .6rem .2rem .7rem; }
.psp__obra figcaption > span { display: grid; gap: .15rem; }
.psp__obra figcaption b { font: 400 1.5rem/1 var(--f-tag); }
.psp__obra figcaption small { font: 500 .74rem var(--f-mono); color: var(--gris); }
.psp__todas { flex: none; padding: .5rem .8rem; border: 3px solid var(--tinta); background: var(--amarillo); color: var(--tinta); font: 900 .74rem var(--f-titulo); text-transform: uppercase; box-shadow: 3px 3px 0 var(--tinta); cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.psp__todas:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.pasaporte__hoja { position: relative; display: flex; flex-direction: column; padding: 1rem 1rem 1.1rem; background: #F7F1E1; border: 3px solid var(--tinta); border-radius: 6px; box-shadow: 8px 8px 0 var(--tinta);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(31, 95, 168, .07) 27px 28px); }
.pasaporte__t { font: 500 .7rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 2px solid var(--tinta); }
.sellos { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .7rem .6rem; }
.sello { display: grid; place-content: center; gap: .1rem; padding: .3rem; border: 3px double var(--t); color: var(--t); background: transparent; rotate: var(--r); cursor: pointer; opacity: .82; text-align: center; transition: opacity .2s, transform .25s var(--ease), background-color .2s; mix-blend-mode: multiply; }
.sello--circ { border-radius: 50%; border-style: dashed; }
.sello--rect { border-radius: 8px; }
.sello:hover, .sello:focus-visible { opacity: 1; transform: scale(1.07); }
.sello.is-on { opacity: 1; background: color-mix(in srgb, var(--t) 16%, transparent); transform: scale(1.08); }
.sello__pais { font: 900 .62rem/1.05 var(--f-titulo); text-transform: uppercase; letter-spacing: -.01em; }
.sello__anio { font: 400 1.2rem/1 var(--f-pieza); }
/* Galería con todas las obras */
.galeria { width: min(1180px, 94vw); max-height: 90vh; padding: 0; border: 4px solid var(--tinta); background: var(--papel); color: var(--tinta); box-shadow: 12px 12px 0 var(--morado); overflow: auto; }
.galeria::backdrop { background: rgba(21, 16, 26, .82); }
.galeria__cab { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.2rem; background: var(--tinta); color: var(--blanco); font: 500 .8rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.galeria__cab b { color: var(--amarillo); font: 400 1.3rem var(--f-tag); text-transform: none; letter-spacing: 0; }
.galeria__x { width: 40px; height: 40px; border: 2px solid var(--blanco); background: none; color: var(--blanco); font: 900 1.4rem var(--f-titulo); cursor: pointer; }
.galeria__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; padding: 1.4rem; }
.galeria__obra { display: grid; gap: .4rem; padding: 6px 6px 8px; border: 2px solid var(--tinta); background: var(--blanco); text-align: left; cursor: zoom-in; transition: transform .2s var(--ease), box-shadow .2s; }
.galeria__obra:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 5px 5px 0 var(--rosa); }
.galeria__obra img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.galeria__obra span { font: 400 1.05rem/1.1 var(--f-tag); }
.galeria__vista { margin: 0; padding: 1.2rem; display: grid; gap: .8rem; justify-items: center; }
.galeria__vista[hidden], .galeria__grid[hidden] { display: none; }
.galeria__vista img { max-width: 100%; max-height: 70vh; object-fit: contain; border: 3px solid var(--tinta); }
.galeria__vista figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }
.galeria__vista b { font: 400 1.6rem var(--f-tag); }
.galeria__vista button { padding: .5rem .8rem; border: 2px solid var(--tinta); background: var(--amarillo); font: 900 .75rem var(--f-titulo); text-transform: uppercase; cursor: pointer; }

/* ---------- 06 Ediciones: línea de tiempo, una edición a la vez ---------- */
.ediciones { background-color: #211B27; background-image: var(--ruido), radial-gradient(50% 60% at 80% 60%, rgba(255, 62, 138, .14), transparent 70%); }

/* ---------- 07 En especie: stickers "Se necesitan" ---------- */
.ferre {
  color: var(--blanco);
  background-color: #17121C;
  background-image:
    var(--ruido),
    radial-gradient(55% 45% at 12% 8%, rgba(155, 93, 229, .16), transparent 70%),
    radial-gradient(45% 45% at 92% 95%, rgba(255, 210, 63, .08), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 calc(12.5% - 2px), rgba(0, 0, 0, .22) calc(12.5% - 2px) 12.5%),
    repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 2px), rgba(0, 0, 0, .14) calc(16.66% - 2px) 16.66%);
}
.ferre__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.slaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem 1.1rem; }
.slap { position: relative; display: flex; flex-direction: column; padding-bottom: 1rem; background: var(--blanco); color: var(--tinta); border: 3px solid var(--tinta); border-radius: 12px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .75); rotate: var(--r); text-align: center; transition: rotate .3s var(--ease), transform .3s var(--ease), box-shadow .3s, background-color .3s; }
@media (hover: hover) { .slap:hover { rotate: 0deg; transform: translateY(-4px); } }
.slap__cab { padding: .55rem .5rem .5rem; background: var(--morado); color: var(--amarillo); border-bottom: 3px solid var(--tinta); border-radius: 9px 9px 0 0; font: 900 .74rem var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; }
.slap__ilus { width: 42px; height: 42px; margin: .6rem auto .1rem; opacity: .85; }
.slap__ilus svg { display: block; width: 100%; height: 100%; overflow: visible; }
.slap__ilus svg * { fill: none !important; stroke: var(--tinta); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.slap__ilus .c { fill: var(--c); }
.slap__ilus .b { fill: #FBF8F1; }
.slap__ilus .g { fill: #B9BFC5; }
.slap__ilus .k { fill: var(--tinta); }
.slap__ilus .y { fill: var(--amarillo); }
.slap__ilus .o { fill: var(--naranja); }
.slap__ilus .a { fill: none; }
.slap__ilus .n { stroke: rgba(255, 255, 255, .85); stroke-width: 3.5; }
.slap.is-pop .slap__ilus { animation: pop .45s var(--ease); }
@keyframes pop { 40% { transform: scale(1.2) rotate(-8deg); } }
.slap__cifra { display: flex; justify-content: center; align-items: baseline; gap: .35rem; }
.slap__n { font: 400 2.1rem/1 var(--f-pieza); }
.slap.is-activo .slap__n { color: var(--morado); }
.slap__cifra span { font: 500 .72rem var(--f-mono); text-transform: uppercase; }
.slap__nombre { display: grid; place-items: center; min-height: 2.4em; margin: .2rem .7rem .6rem; font: 800 .8rem/1.15 var(--f-titulo); text-transform: uppercase; letter-spacing: -.01em; }
.slap__barra { position: relative; height: 10px; margin: 0 1rem .8rem; border: 2px solid var(--tinta); border-radius: 99px; background: #EAE3D3; overflow: hidden; }
.slap__ya { position: absolute; inset: 0 auto 0 0; width: var(--ya); background: var(--morado); }
.slap__tuyo { position: absolute; inset: 0 auto 0 var(--ya); width: var(--tuyo, 0%); background: repeating-linear-gradient(45deg, var(--rosa) 0 5px, #FF8DBA 5px 10px); transition: width .35s var(--ease); }
.slap__yo { margin: 0 1rem; padding: .6rem .5rem; border: 3px solid var(--tinta); background: var(--amarillo); font: 900 .8rem var(--f-titulo); text-transform: uppercase; box-shadow: 3px 3px 0 var(--tinta); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.slap__yo:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.slap .paso { display: none; margin: 0 1rem; }
.slap.is-activo .slap__yo { display: none; }
.slap.is-activo .paso { display: grid; }
.slap.is-activo { background: #FFF5CF; box-shadow: 6px 6px 0 var(--morado-2); rotate: 0deg; }
.slap__sello { position: absolute; top: 40px; right: -14px; padding: .3rem .55rem; background: var(--tinta); color: var(--amarillo); border: 2px solid var(--blanco); font: 900 .6rem var(--f-titulo); text-transform: uppercase; rotate: 10deg; scale: 0; transition: scale .25s var(--ease); pointer-events: none; }
.slap.is-activo .slap__sello { scale: 1; }
.paso { grid-template-columns: 38px minmax(0, 1fr) 38px; border: 3px solid var(--tinta); background: var(--blanco); box-shadow: 3px 3px 0 var(--tinta); }
.paso button { height: 38px; padding: 0; border: 0; background: var(--blanco); font: 900 1.15rem/1 var(--f-titulo); cursor: pointer; }
.paso button[data-mas] { background: var(--amarillo); }
.paso button:hover { background: var(--tinta); color: var(--amarillo); }
.paso input { width: 100%; min-width: 0; border: 0; border-inline: 3px solid var(--tinta); text-align: center; font: 900 1.05rem var(--f-titulo); background: transparent; -moz-appearance: textfield; }
.paso input::-webkit-outer-spin-button, .paso input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paso input:focus { outline: 3px solid var(--rosa); outline-offset: -3px; }
.lata-vuela { position: fixed; z-index: 95; pointer-events: none; transition: transform .7s cubic-bezier(.5, -.3, .4, 1), opacity .7s; }
/* Bolsa de papel kraft */
.bolsa-papel { position: sticky; top: 100px; display: grid; justify-items: center; }
.bolsa-papel.is-salta { animation: salta .45s var(--ease); }
@keyframes salta { 30% { transform: translateY(8px) scaleY(.96); } 60% { transform: translateY(-6px); } }
.bolsa-papel__cuerpo { position: relative; width: 100%; padding: 1.6rem 1.4rem 1.4rem; background: var(--blanco); color: var(--tinta); border: 4px solid var(--tinta); box-shadow: 10px 10px 0 var(--rosa); }
.bolsa-papel__n { position: absolute; top: -22px; right: -22px; display: grid; place-items: center; min-width: 50px; height: 50px; padding: 0 .4rem; border-radius: 50%; background: var(--amarillo); border: 3px solid var(--tinta); font: 900 1.1rem var(--f-titulo); rotate: 10deg; scale: 0; transition: scale .3s var(--ease); }
.bolsa-papel.tiene .bolsa-papel__n { scale: 1; }
.bolsa-papel__sello { display: grid; gap: .35rem; margin-bottom: 1.1rem; font: 900 1.45rem/1 var(--f-titulo); text-transform: uppercase; letter-spacing: -.01em; }
.bolsa-papel__sello small { font: 500 .66rem var(--f-mono); letter-spacing: .12em; color: var(--gris); }
.bolsa-papel__aliados { display: grid; gap: .3rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 2px dashed rgba(21, 16, 26, .3); font: 500 .74rem/1.5 var(--f-mono); color: var(--gris); }
.bolsa-papel__aliados b { font: 900 .72rem var(--f-titulo); text-transform: uppercase; color: var(--tinta); }
.bolsa-papel__pie { margin-top: .8rem; font: 500 .7rem var(--f-mono); text-align: center; color: var(--gris); }
.recibo { margin-bottom: 1.1rem; padding: .9rem .9rem .7rem; background: var(--papel); border: 2px dashed rgba(21, 16, 26, .35); font-family: var(--f-mono); }
.recibo__t { padding-bottom: .5rem; border-bottom: 2px dashed var(--tinta); font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.recibo ul { list-style: none; margin: 0; padding: .5rem 0 0; min-height: 3rem; font-size: .8rem; }
.recibo li { display: flex; justify-content: space-between; gap: .6rem; padding: .25rem 0; animation: cae .35s var(--ease); }
.recibo li b { font-weight: 500; white-space: nowrap; }
@keyframes cae { from { transform: translateY(-10px); opacity: 0; } }
.recibo__vacio { color: var(--gris); }
/* Botón "Aportar" fijo en celular */
.aportar-barra { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 79; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .7rem .6rem 1rem; background: var(--tinta); color: var(--blanco); border: 3px solid var(--blanco); box-shadow: 5px 5px 0 var(--amarillo); text-decoration: none; transform: translateY(170%); transition: transform .4s var(--ease); }
.aportar-barra > span:first-child { display: grid; line-height: 1.2; }
.aportar-barra small { font: 500 .66rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(251, 248, 241, .7); }
.aportar-barra b { font: 900 .95rem var(--f-titulo); text-transform: uppercase; color: var(--amarillo); }
.aportar-barra.is-on { transform: none; }
/* Barra fija en celular para enviar sin buscar la bolsa */
.bolsa-barra { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .7rem .6rem 1rem; background: var(--tinta); color: var(--blanco); border: 3px solid var(--blanco); box-shadow: 5px 5px 0 var(--amarillo); font: 600 .95rem var(--f-texto); transform: translateY(170%); transition: transform .4s var(--ease); }
.bolsa-barra b { font: 900 1.1rem var(--f-titulo); color: var(--amarillo); }
.bolsa-barra.is-on { transform: none; }

/* ---------- 08 Firma la pieza ---------- */
.firma { background: #1B1424; background-image: radial-gradient(60% 50% at 15% 20%, rgba(255, 62, 138, .22), transparent 70%), radial-gradient(60% 60% at 90% 90%, rgba(45, 226, 230, .14), transparent 70%); }
.firma__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: stretch; }
.firma__muro { position: relative; display: grid; place-items: center; min-height: 440px; overflow: hidden; container-type: inline-size; border: 4px solid var(--tinta); background-color: var(--muro); background-image: var(--pared); }
.pz--mini { font-size: 13cqi; margin-top: -4cqi; }
.tag { position: absolute; left: var(--x); top: var(--y); z-index: 3; rotate: var(--r); font: 400 4.2cqi/1 var(--f-tag); color: var(--c); white-space: nowrap; text-shadow: 0 0 .3em color-mix(in srgb, var(--c) 45%, transparent); }
.tag--tuya { left: 50%; top: auto; bottom: 7%; translate: -50% 0; rotate: -4deg; font-size: 7.5cqi; max-width: 92%; }
.tag--tuya.is-spray { animation: spray .5s var(--ease); }
@keyframes spray { from { clip-path: inset(0 100% 0 0); filter: blur(3px); } to { clip-path: inset(0); filter: none; } }
.firma__nota { position: absolute; right: 2%; top: 2%; font: 500 .7rem var(--f-mono); color: rgba(251, 248, 241, .6); }
.firma__form { display: grid; gap: .8rem; align-content: start; padding: clamp(1.2rem, 2.4vw, 1.6rem); background: var(--blanco); color: var(--tinta); border: 4px solid var(--tinta); box-shadow: 10px 10px 0 var(--rosa); }
.meta p { font: 500 .85rem var(--f-mono); }
.meta b { font: 400 1.6rem var(--f-pieza); }
.meta > b { display: block; margin-top: .1rem; font-size: 2.2rem; line-height: 1; }
.meta__aliados { margin-top: .5rem; font: 500 .78rem/1.45 var(--f-mono) !important; color: var(--gris); }
.meta__barra { display: block; height: 14px; margin-top: .4rem; border: 3px solid var(--tinta); border-radius: 99px; overflow: hidden; background: #e7e1d3; }
.meta__barra i { display: block; height: 100%; width: var(--p); background: var(--amarillo); }
.montos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.monto { position: relative; cursor: pointer; }
.monto input { position: absolute; opacity: 0; }
.monto > span { display: grid; gap: .15rem; padding: .55rem .8rem; border: 3px solid var(--tinta); transition: background-color .2s, rotate .2s; }
.monto b { font: 900 1.05rem var(--f-titulo); }
.monto small { font: 500 .7rem var(--f-mono); color: var(--morado); letter-spacing: .05em; }
.monto:has(input:checked) > span { background: var(--amarillo); rotate: -1.5deg; box-shadow: 4px 4px 0 var(--tinta); }
.monto:has(input:focus-visible) > span { outline: 3px solid var(--rosa); outline-offset: 2px; }
.campo--claro > span { color: var(--gris); }
.campo--claro input { color: var(--tinta); }
.campo--claro input::placeholder { color: rgba(21, 16, 26, .3); }
.campo--claro input:focus { border-color: var(--morado); }
.colores { display: flex; gap: .5rem; }
.colores label { position: relative; cursor: pointer; }
.colores input { position: absolute; opacity: 0; }
.colores i { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 3px solid var(--tinta); transition: transform .2s; }
.colores input:checked + i { transform: scale(1.18) rotate(-8deg); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 6px var(--tinta); }
.firma__seguro { font: 500 .76rem var(--f-mono); color: var(--gris); }

/* ---------- Pie ---------- */
.pie { padding: clamp(4rem, 8vw, 7rem) 0 2.5rem; background: var(--amarillo); color: var(--tinta); overflow: hidden; }
.pie__top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.pz--pie { font-size: clamp(2.6rem, 8vw, 8.5rem); width: max-content; max-width: 100%; }
.disco--pie { position: relative; inset: auto; top: auto; left: auto; flex: none; width: clamp(120px, 14vw, 190px); height: auto; aspect-ratio: 1; }
.disco--pie::before { background: var(--tinta); box-shadow: 6px 6px 0 var(--rosa); }
.disco--pie text { fill: var(--amarillo); }
.pie__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 3px solid var(--tinta); font: 500 .85rem var(--f-mono); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Cómo aportar: tres carteles pegados en la pared */
.aportar { color: var(--blanco); background-color: var(--muro); background-image: var(--pared); }
.formas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2.4rem); }
.forma { position: relative; display: flex; flex-direction: column; gap: .7rem; min-height: 330px; padding: 2.2rem 1.8rem 1.6rem; color: var(--tinta); text-decoration: none; box-shadow: 0 18px 34px rgba(0, 0, 0, .45); background-image: linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 30%, rgba(0, 0, 0, .07) 62%, transparent 82%); transition: rotate .3s var(--ease), translate .3s var(--ease); }
.forma:hover { rotate: 0deg; translate: 0 -4px; }
.forma .cinta { top: -13px; }
.forma--1 { background-color: var(--amarillo); rotate: -1.4deg; }
.forma--2 { background-color: var(--morado-2); color: var(--blanco); rotate: 1deg; margin-top: 1.4rem; }
.forma--3 { background-color: var(--blanco); rotate: -.6deg; }
.forma__quien { font: 500 .74rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.forma b { font: 900 clamp(1.7rem, 2.6vw, 2.5rem)/.95 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; }
.forma > span:not(.forma__quien):not(.forma__ir) { font-weight: 600; max-width: 32ch; }
.forma__ir { margin-top: auto; padding-top: 1rem; border-top: 3px solid currentColor; font: 900 1.15rem var(--f-titulo); text-transform: uppercase; }

/* Ediciones: cartelera (afiche grande al centro, vecinos a los lados) */
.cartelera { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.cart__escena { position: relative; height: clamp(360px, 29vw, 430px); touch-action: pan-y; user-select: none; }
.cart__afi { position: absolute; top: 50%; left: 50%; height: 94%; aspect-ratio: 4 / 5; margin: 0; padding: 8px; background: var(--blanco); translate: -50% -50%; box-shadow: 0 26px 44px -16px rgba(0, 0, 0, .85); cursor: pointer; transition: transform .6s var(--ease), opacity .45s, filter .45s; }
.cart__afi img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cart__afi .cinta { top: -12px; }
.cart__afi[data-lugar="centro"] { z-index: 3; transform: rotate(-1.5deg); cursor: default; }
.cart__afi[data-lugar="izq"] { z-index: 2; transform: translateX(-64%) scale(.72) rotate(-6deg); filter: brightness(.45) saturate(.6); }
.cart__afi[data-lugar="der"] { z-index: 2; transform: translateX(64%) scale(.72) rotate(6deg); filter: brightness(.45) saturate(.6); }
.cart__afi[data-lugar="fuera"] { z-index: 1; opacity: 0; transform: scale(.55); pointer-events: none; }
.cart__afi[data-lugar="izq"]:hover, .cart__afi[data-lugar="der"]:hover { filter: brightness(.7) saturate(.85); }
.cart__afi--boceto { display: grid; place-content: center; justify-items: center; gap: .6rem; background: #241D2B; border: 3px dashed rgba(251, 248, 241, .6); box-shadow: none; }
.cart__afi--boceto > span { font: 500 .74rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 248, 241, .7); }
.pz--ed { font-size: clamp(4rem, 7vw, 6rem); }
.cart__lado { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 1.6rem; align-content: center; }
.cart__info { display: grid; gap: .7rem; justify-items: start; }
.cart__info[hidden] { display: none; }
.cart__info.is-entra { animation: entra .5s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
.cart__fecha { font: 500 .8rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); }
.cart__info h3 { font: 900 clamp(1.5rem, 2.2vw, 1.95rem)/1.05 var(--f-titulo); text-transform: uppercase; letter-spacing: -.02em; }
.cart__txt { max-width: 42ch; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.5; color: rgba(251, 248, 241, .85); }
.cart__fotos { display: flex; gap: .8rem; margin-top: .3rem; }
.cart__fotos img { width: min(31%, 150px); aspect-ratio: 4 / 3; object-fit: cover; padding: 5px; background: var(--blanco); rotate: var(--r); box-shadow: 0 12px 18px -8px rgba(0, 0, 0, .8); }
.cart__info .btn { margin-top: .4rem; }
.cart__nav { display: flex; align-items: center; gap: .8rem; padding-top: 1.2rem; border-top: 3px dashed rgba(251, 248, 241, .2); }
.cart__flecha { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--tinta); background: var(--blanco); color: var(--tinta); font: 900 1.2rem var(--f-titulo); box-shadow: 3px 3px 0 var(--tinta); cursor: pointer; transition: transform .2s var(--ease); }
.cart__flecha--sig { background: var(--amarillo); }
.cart__flecha:hover { transform: translateY(-2px); }
.cart__tabs { flex: 1; display: flex; justify-content: space-between; gap: .3rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cart__tabs::-webkit-scrollbar { display: none; }
.cart__tabs button { flex: none; display: grid; justify-items: center; gap: .1rem; padding: .35rem .6rem; border: 2px solid transparent; background: none; color: rgba(251, 248, 241, .6); cursor: pointer; transition: color .2s, background-color .2s, rotate .2s; }
.cart__tabs button:hover { color: var(--blanco); }
.cart__tabs b { font: 400 1.15rem/1 var(--f-pieza); }
.cart__tabs small { font: 500 .64rem var(--f-mono); letter-spacing: .08em; }
.cart__tabs button[aria-selected="true"] { color: var(--tinta); background: var(--amarillo); border-color: var(--tinta); rotate: -2deg; }
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .festival__muro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tit" "cit" "des" "cif" "fot"; }
  .festival__muro > .engrudo { max-width: 620px; }
  .festival__p { max-width: 56ch; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .4rem; }
  .festival__muro .collage { height: 34vw; margin-top: .8rem; }
  .hero__grid, .boceta, .firma__grid, .ferre__grid, .cartelera { grid-template-columns: minmax(0, 1fr); }
  .c14__cab { grid-template-columns: minmax(0, 1fr); }
  .c14__cuerpo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .c14__cuerpo { grid-template-rows: auto; }
  .c14__foto { grid-row: span 2; }
  .psp__obra img { flex: none; aspect-ratio: 16 / 10; }
  .sellos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
  .sello { aspect-ratio: 1.2; }
  .hero { padding-top: 120px; }
  .pz--hero { font-size: clamp(3.4rem, 15vw, 9rem); }
  .boleto { max-width: 460px; margin: 2.4rem 0 0 40px; }
  .bolsa-papel { position: relative; top: 0; max-width: 380px; }
  .menu__body { grid-template-columns: 1fr; }
  .menu__vista { display: none; }
}
@media (max-width: 760px) {
  .formas { grid-template-columns: 1fr; }
  .forma { min-height: 0; padding: 1.8rem 1.4rem 1.3rem; }
  .forma--2 { margin-top: 0; }
  .cart__escena { height: 340px; }
  .cart__afi[data-lugar="izq"] { transform: translateX(-52%) scale(.66) rotate(-6deg); }
  .cart__afi[data-lugar="der"] { transform: translateX(52%) scale(.66) rotate(6deg); }
  .cart__flecha { width: 44px; height: 44px; }
  .nav { gap: .6rem; }
  .nav__cta { display: none; }
  .hero { padding: 100px 0 64px; }
  .hero__ante { font-size: .68rem; margin-bottom: 1.6rem; }
  .pz--hero { font-size: clamp(3rem, 16vw, 6rem); }
  .boleto { margin: 3.4rem 0 0 18px; padding: 1.7rem 1.2rem 1.3rem; }
  /* El disco va sobre la esquina, dentro de la pantalla y sin tapar el texto de la boleta */
  .disco { width: 92px; height: 92px; top: -70px; right: 6px; }
  .disco text { font-size: 16px; }
  .cinta-saludos__pista { font-size: .85rem; }
  .pegada figcaption { font-size: .62rem; }
  .festival__muro .collage { height: auto; margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .pegada { position: relative; inset: auto; width: auto; }
  .pegada--1 { grid-column: 1 / -1; width: 92%; }
  .pegada--1 img { aspect-ratio: 4 / 3; }
  .pegada--2 img, .pegada--3 img { aspect-ratio: 1; }
  .cifra { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .pz--cifra { font-size: 2.8rem; }
  .cifra p { font-size: .74rem; }
  .escenario__visor { --alto: clamp(460px, 66vh, 620px); }
  .escena { inset: 52px 0 96px; }
  .escena img { max-height: calc(var(--alto) - 190px); max-width: 82vw; }
  .escenario__ficha { left: 0; right: 0; max-width: none; }
  .escenario__ctrl { top: 0; bottom: auto; right: 0; }
  .escenario__ctrl button { width: 46px; height: 46px; font-size: 1.1rem; }
  .escenario__grande { top: 4px; left: 0; right: auto; rotate: -2deg; }
  .escenario__tiempo { display: none; }
  .escenario__tira { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 14px 4px 10px; scroll-snap-type: x mandatory; }
  .mini { flex: none; width: 72px; scroll-snap-align: start; }
  .cartel { rotate: 0deg; }
  .cartel__renglon li + li::before { margin: 0 .35em; }
  .c14__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .c14__foto { grid-row: auto; max-width: 420px; }
  .c14__foto img { aspect-ratio: 4 / 5; height: auto; }
  .psp__obra figcaption { flex-wrap: wrap; }
  .sello__pais { font-size: .5rem; }
  .nivel { grid-template-columns: 1fr auto; grid-template-areas: "n p" "n c"; }
  .sello__anio { font-size: 1.05rem; }
  .galeria__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: .9rem; }
  .slaps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem .8rem; }
  .slap { rotate: 0deg; }
  .slap__ilus { width: 58px; height: 58px; margin-top: .7rem; }
  .slap__n { font-size: 2rem; }
  .slap__nombre { margin-inline: .4rem; font-size: .68rem; }
  .slap__barra { margin: 0 .6rem .8rem; }
  .slap__yo, .slap .paso { margin: 0 .6rem; }
  .slap__yo { padding: .7rem .3rem; font-size: .72rem; }
  .slap__cab { font-size: .6rem; letter-spacing: .04em; }
  .paso { grid-template-columns: 32px minmax(0, 1fr) 32px; }
  .paso button { height: 36px; }
  .slap__sello { right: -6px; font-size: .52rem; }
  .bolsa-barra, .aportar-barra { display: flex; }
  .firma__muro { min-height: 340px; }
  .pie__top { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .disco--pie { top: auto; right: auto; width: 116px; height: auto; }
  /* Ajustes de espacios en celular */
  .beneficios { grid-template-columns: 1fr; }
  .c14__tag { left: 2%; font-size: 2.2rem; }
  .cartel__renglon li + li::before { content: none; }
  .cartel__renglon li:not(:last-child)::after { content: "/"; margin: 0 .35em; color: var(--rosa); font: 400 .8em/1 var(--f-pieza); }
  .cartel__renglon--xl li::after { content: none !important; }
  .cart__flecha { display: none; }
  .cart__tabs { overflow: visible; }
  .cart__tabs button { padding: .35rem .45rem; }
  .btn--grande { gap: .5em; font-size: .84rem; padding: 1em .8em; white-space: nowrap; }
  .pz--pie { font-size: 3.1rem; }
}

/* Página completa en el visor y movimiento reducido: la pieza ya pintada */
.larga .hero { min-height: min(900px, 100vh); }
.larga .pz--hero, .pieza-lista .pz--hero { --boceto: 1; --relleno: 1; --fade: 1; --contorno: 1; --sombra: 1; --brillo: 1; --fondo: 1; }
.larga .hero__paso, .pieza-lista .hero__paso { opacity: 0; }
.larga .nav { position: absolute; }
@media (prefers-reduced-motion: reduce) { .cinta-saludos__pista, .disco svg { animation: none; } }
.larga .bolsa-barra { display: none !important; }
@media (max-width: 760px) { .larga .aportar-barra { position: absolute; top: var(--y-captura, 2700px); bottom: auto; transform: none; } }