/* Atelier · Proyector. Una función de cine recorrida por sus materiales: negro de sala, la sala fotografiada con el haz del
   proyector, la marquesina de focos, el cartel impreso, la mesa de montaje, el guion mecanografiado, el telón, la pantalla de
   plata, el terciopelo de las butacas y la ficha de taquilla. Todo en blanco y negro salvo el oro champaña y el burdeos.
   Grano y polvo de película (fotos de Magnific) y la fuga de luz corren con el contenido: nada va fijo al viewport. */
.inv[data-theme="at-proyector"]{
  --at-papel:#141210; --at-fondo:#0C0B0A; --at-tinta:#ECE4D6; --at-tenue:#A79E90; --at-acento:#CDB27A; --at-linea:rgba(236,228,214,.14);
  --at-fd:'Cormorant'; --at-ft:'Mulish'; --oro:#CDB27A; --oro2:#8C7646; --negro:#0C0B0A; --pantalla:#D9D3C6; --gis:rgba(242,238,229,.9);
  --burdeos:#8E2630; --tinta-osc:#211C17; --maquina:'Courier New',Courier,'Courier Prime',monospace;
  font-size:18px; line-height:1.62; font-weight:400; background:#0B0A09;
}
/* Negro de sala: un halo cálido de alto fijo arriba (no un radial pensado para el viewport) sobre negro. */
.py{position:relative;isolation:isolate;background:radial-gradient(900px 720px at 50% 0,#1A1611,rgba(12,11,10,0) 70%),#0C0B0A;overflow:hidden;color:var(--at-tinta)}
/* Grano de película: foto de grano real centrada en gris medio (overlay neutro), en mosaico, saltando de cuadro en cuadro. */
.py-grano{position:absolute;inset:-20%;pointer-events:none;opacity:.5;mix-blend-mode:overlay;z-index:1;
  background:url(/img/texturas/proyector-grano.jpg) 0 0/300px 300px;animation:py-grano .5s steps(1) infinite}
/* En la página el grano cubre todo el largo y corre con él: salta moviendo la posición del mosaico, no la capa. */
.py-grano-pag{inset:0;z-index:6;opacity:.12;animation:py-grano-pag .5s steps(1) infinite}
@keyframes py-grano{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-5%,-2%)}100%{transform:translate(0,0)}}
@keyframes py-grano-pag{0%{background-position:0 0}25%{background-position:-112px 87px}50%{background-position:93px -141px}75%{background-position:-151px -58px}}
/* Polvo y rayones de la cinta (foto sobre negro, en screen), en mosaico a lo largo de la página: cambian de lugar en cada cuadro. */
.py-polvo-pag{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:screen;opacity:.42;
  background:url(/img/texturas/proyector-polvo.jpg) 0 0/1000px auto repeat;animation:py-polvo-pag .64s steps(1) infinite}
@keyframes py-polvo-pag{0%{background-position:0 0}25%{background-position:-380px 610px;opacity:.36}50%{background-position:-740px 120px}75%{background-position:-180px 880px;opacity:.48}}
/* Fuga de luz fotográfica (naranja sobre negro, entonada a champaña) en la portada; respira y sigue el giro. */
.py-leak{position:absolute;top:0;left:0;right:0;height:min(100svh,940px);z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.46;
  background:url(/img/texturas/proyector-fuga.jpg) calc(100% + 8% + var(--tx,0) * 6%) calc(16% + var(--ty,0) * 8%)/auto 90% no-repeat;animation:py-respira 7s ease-in-out infinite}
@keyframes py-respira{0%,100%{opacity:.46}40%{opacity:.3}62%{opacity:.54}}
.py img{filter:grayscale(1) contrast(1.06) brightness(.96)}
.py-perf{display:none}

/* ---------- Apertura: proyector ---------- */
.py-op{background:#050504;color:var(--at-tinta);display:grid;place-items:center}
.py-sala{position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 100%,rgba(60,50,35,.35),transparent 70%),#050504}
.py-haz{position:absolute;left:50%;top:-6%;width:min(140vw,900px);height:62vh;transform:translateX(-50%);opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(236,228,214,.9),rgba(236,228,214,.35) 40%,rgba(236,228,214,.08));clip-path:polygon(49% 0,51% 0,100% 100%,0 100%);filter:blur(10px);transition:opacity 1.2s ease-out .25s}
.py-polvo{position:absolute;left:0;right:0;top:0;height:60vh;pointer-events:none;opacity:0;transition:opacity 1.2s .6s}
.py-polvo i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(236,228,214,.9);filter:blur(.6px);animation:py-polvo 7s linear infinite;left:calc(50% + var(--x) * 1%);top:calc(var(--y) * 1%);animation-delay:var(--dl)}
.py-polvo i:nth-child(1){--x:-18;--y:28;--dl:-1s}.py-polvo i:nth-child(2){--x:12;--y:40;--dl:-3s;width:2px;height:2px}.py-polvo i:nth-child(3){--x:-6;--y:55;--dl:-5s}.py-polvo i:nth-child(4){--x:22;--y:22;--dl:-2s;width:2px;height:2px}
.py-polvo i:nth-child(5){--x:-26;--y:48;--dl:-6s}.py-polvo i:nth-child(6){--x:4;--y:16;--dl:-4s;width:2px;height:2px}.py-polvo i:nth-child(7){--x:16;--y:62;--dl:-.5s}.py-polvo i:nth-child(8){--x:-12;--y:70;--dl:-2.5s;width:2px;height:2px}
.py-polvo i:nth-child(9){--x:28;--y:50;--dl:-5.5s}.py-polvo i:nth-child(10){--x:-30;--y:66;--dl:-3.5s;width:2px;height:2px}.py-polvo i:nth-child(11){--x:8;--y:34;--dl:-1.5s}.py-polvo i:nth-child(12){--x:-2;--y:80;--dl:-4.5s}
@keyframes py-polvo{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}50%{transform:translate(14px,18px)}85%{opacity:.8}100%{transform:translate(-10px,36px);opacity:0}}
.py-pantalla{position:relative;z-index:2;width:min(86vw,520px);aspect-ratio:4/3;padding:6px;background:#141311;box-shadow:0 0 0 1px rgba(236,228,214,.08),0 30px 60px -20px rgba(0,0,0,.9);transform:translateY(-4vh)}
.py-pantalla-in{position:relative;width:100%;height:100%;overflow:hidden;background:#1A1816;display:grid;place-items:center;transition:background .5s .3s,box-shadow .8s .3s}
.py-cinta{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.py-cinta svg{position:absolute;width:100%;height:100%}
.py-barrido{stroke-dasharray:0 290;transform-box:fill-box;transform-origin:center}
.py-n{position:absolute;font:400 clamp(80px,30vw,150px)/1 var(--at-fd),serif;color:#2A2824;opacity:0}
.py-titulo{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:24px;opacity:0;color:#1A1816}
.py-ti-eb{margin:0;font:400 10px/1 var(--at-ft),sans-serif;letter-spacing:.36em;text-transform:uppercase}
.py-ti-n{margin:0;display:grid;gap:2px;font:italic 300 clamp(34px,10vw,54px)/1 var(--at-fd),serif;letter-spacing:.14em;transition:letter-spacing 1.8s cubic-bezier(.2,.7,.2,1) 2.9s}
.py-ti-n em{font-style:italic;font-size:.5em}
.py-ti-f{margin:0;font:400 11px/1.4 var(--at-ft),sans-serif;letter-spacing:.14em;text-transform:uppercase}
.py-op .py-grano{opacity:0;transition:opacity .6s .5s}
.py-arriba{position:absolute;top:max(44px,8vh);left:0;right:0;z-index:3;display:grid;gap:8px;justify-items:center;text-align:center;padding:0 24px;transition:opacity .5s}
.py-op .at-para{font-family:var(--at-ft),sans-serif;font-size:11px;letter-spacing:.32em;color:var(--oro);opacity:1}
.py-pista{margin:0;font:italic 300 22px/1.2 var(--at-fd),serif;color:rgba(236,228,214,.7)}
.py-op .at-skip{color:var(--at-tinta);font-family:var(--at-ft),sans-serif;box-shadow:inset 0 0 0 1px rgba(236,228,214,.25)}
.py-switch{position:absolute;bottom:max(80px,14vh);left:50%;z-index:3;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;padding:0;border:0;background:none;color:var(--oro);cursor:pointer;transition:opacity .5s}
.py-sw-base{display:block;width:64px;height:34px;border-radius:17px;background:linear-gradient(180deg,#2A2621,#14120F);box-shadow:inset 0 0 0 1px rgba(205,178,122,.45),inset 0 2px 4px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06);position:relative}
.py-sw-palanca{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E9D7A8,#CDB27A 55%,#8C7646);box-shadow:0 2px 4px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.4,1.4,.6,1)}
.py-sw-t{font:400 10px/1 var(--at-ft),sans-serif;letter-spacing:.3em;text-transform:uppercase}
.py-switch:hover .py-sw-palanca{transform:translateX(3px)}
/* Secuencia: palanca, haz y polvo, pantalla que se ilumina, cuenta 3-2-1, título. */
.py-op.is-opening .py-sw-palanca{transform:translateX(30px)}
.py-op.is-opening .py-sw-base{box-shadow:inset 0 0 0 1px rgba(205,178,122,.8),inset 0 2px 4px rgba(0,0,0,.8),0 0 18px rgba(205,178,122,.35)}
.py-op.is-opening .py-haz,.py-op.is-opening .py-polvo{opacity:1}
.py-op.is-opening .py-grano{opacity:.7}
.py-op.is-opening .py-pantalla-in{background:var(--pantalla);box-shadow:0 0 60px rgba(217,211,198,.35)}
.py-op.is-opening .py-cinta{animation:py-cinta-on 2.1s steps(1) .55s both}
.py-op.is-opening .py-barrido{animation:py-barrido .66s linear .6s 3}
.py-op.is-opening .py-n3{animation:py-num .66s steps(1) .6s both}
.py-op.is-opening .py-n2{animation:py-num .66s steps(1) 1.26s both}
.py-op.is-opening .py-n1{animation:py-num .66s steps(1) 1.92s both}
.py-op.is-opening .py-titulo{animation:py-titulo 1.2s ease-out 2.8s forwards}
.py-op.is-opening .py-ti-n{letter-spacing:.03em}
.py-op.is-opening .py-arriba,.py-op.is-opening .py-switch,.py-op.is-opening .at-skip{opacity:0}
.py-op.is-opening::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--negro);opacity:0;animation:py-fundido .7s ease-in 4.1s forwards}
@keyframes py-cinta-on{0%{opacity:1}100%{opacity:0}}
@keyframes py-barrido{from{stroke-dasharray:0 290}to{stroke-dasharray:290 290}}
@keyframes py-num{0%{opacity:1}100%{opacity:0}}
@keyframes py-titulo{from{opacity:0}to{opacity:1}}
@keyframes py-fundido{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.py-op.is-opening .py-cinta,.py-op.is-opening .py-barrido,.py-op.is-opening .py-n{animation:none;opacity:0}.py-op.is-opening .py-titulo{animation:none;opacity:1}.py-grano{animation:none}.py-polvo i{animation:none}.py-op.is-opening::after{animation:none}}

/* ---------- Página: un material por sección ---------- */
.py-patio{position:relative;z-index:2;isolation:isolate}
.py-sec{position:relative;max-width:720px;margin:0 auto;padding:96px clamp(32px,10vw,80px);text-align:center}
.py-ancho .py-sec{max-width:none;padding-left:0;padding-right:0}
.py-breve .py-sec{padding-top:48px;padding-bottom:48px}
.py-h{margin:0 0 40px}
.py-k{margin:0 0 14px;font:500 13px/1.6 var(--at-ft),sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);text-wrap:balance}
.py-k span::after{content:"·";margin:0 .7em}
.py-k2{margin:0 0 8px;font:500 13px/1.5 var(--at-ft),sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.py-t{margin:0;font:italic 300 clamp(42px,11vw,60px)/1.04 var(--at-fd),serif;letter-spacing:-.005em;color:#F4EDE1;text-wrap:balance}
.py-intro{margin:0 auto;max-width:34ch;font-size:18px;line-height:1.7;color:rgba(236,228,214,.86)}
.py-centro{text-align:center;margin-bottom:30px}
.py-nota{margin:14px 0 0;font:italic 400 19px/1.45 var(--at-fd),serif;color:var(--at-tenue)}
/* Dos patios de sala seguidos (hospedaje, notas, hashtag): los separa un filete corto de cinta con dos perforaciones. */
.py-negro + .py-negro .py-sec::before{content:"";position:absolute;top:0;left:50%;width:64px;height:10px;transform:translate(-50%,-50%);border-radius:2px;
  background:radial-gradient(circle,#0C0B0A 2px,transparent 2.5px) 12px 50%/20px 10px repeat-x,#2A2621;box-shadow:inset 0 0 0 1px rgba(205,178,122,.35)}

/* Botón de vidrio con filo de oro (sobre fondos oscuros) y de tinta (sobre cartulina) */
.inv[data-theme="at-proyector"] .py-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:18px;padding:0 26px;border-radius:999px;color:#F1E4C4;text-decoration:none;font:500 13px/1 var(--at-ft),sans-serif;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 55%,rgba(255,255,255,.05));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(205,178,122,.62),inset 0 1px 0 rgba(255,244,214,.3),inset 0 -1px 0 rgba(0,0,0,.4),0 12px 26px -12px rgba(0,0,0,.85);transition:box-shadow .3s,transform .3s}
.inv[data-theme="at-proyector"] .py-btn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(226,203,150,.9),inset 0 1px 0 rgba(255,244,214,.36),inset 0 -1px 0 rgba(0,0,0,.4),0 16px 30px -12px rgba(205,178,122,.32)}
.inv[data-theme="at-proyector"] .py-btn-tinta{color:#F4ECDD;background:linear-gradient(180deg,#2E2722,#1B1613);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(205,178,122,.7),inset 0 1px 0 rgba(255,244,214,.18),0 10px 18px -10px rgba(30,20,10,.8)}

/* ---------- Claqueta de escena (proyector-claqueta.png, 1440×980) ----------
   Dos copias de la foto: la base con la pizarra y la barra superior recortada aparte (clip-path), que gira sobre la bisagra
   (20.5 % · 30.2 %) y se cierra al aparecer. Sobre la pizarra, escrito con gis: producción, escena, toma y fecha. */
.py-claq{position:relative;width:min(74vw,330px);aspect-ratio:1440/980;container-type:inline-size;color:var(--gis);font-family:var(--at-fd),serif;font-style:italic;text-shadow:0 0 1px rgba(242,238,229,.5)}
.py-claq::before,.py-claq::after{content:"";position:absolute;inset:0;background:url(/img/texturas/proyector-claqueta.webp) center/100% 100% no-repeat;pointer-events:none}
.py-claq::before{clip-path:polygon(0 0,20.5% 0,20.5% 30.4%,100% 16.6%,100% 100%,0 100%)}
.py-claq::after{clip-path:polygon(20.5% 0,100% 0,100% 16.6%,20.5% 30.4%);transform-origin:20.5% 30.2%;transform:rotate(0deg)}
.in .py-claq::after{transform:rotate(6.6deg);transition:transform .2s cubic-bezier(.7,0,1,.6) .55s}
.py-claq span{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;line-height:1}
.py-claq-a{left:5%;right:5%;top:44.5%;height:13%;font-size:6.4cqw;letter-spacing:.02em}
.py-claq-b{left:5%;right:5%;top:58.6%;height:18.4%;font-size:10cqw;font-weight:500}
.py-claq-c,.py-claq-d,.py-claq-e{top:78%;height:19%;font-size:5.6cqw}
.py-claq-c{left:3%;width:26.5%}.py-claq-d{left:30.5%;width:34%}.py-claq-e{left:65.5%;width:32.5%;font-style:normal;font-family:var(--at-ft),sans-serif;font-size:4.6cqw;letter-spacing:.06em}

/* ---------- Portada (negro de sala): la película corre al alto del teléfono ----------
   proyector-cinta.png (1380×792): perforaciones a los lados, ventana 208–1168 × 116–676. En 9 cortes con border-image:
   esquinas intactas, las orillas perforadas (negro liso con huecos) se repiten (round) a cualquier alto. */
.py-portada{position:relative;z-index:2;min-height:100vh;min-height:100svh;padding:0 max(8px,2.4vw)}
.py-rollo{position:relative;isolation:isolate;container-type:inline-size;width:min(100%,600px);min-height:100vh;min-height:100svh;margin:0 auto}
.py-rollo::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:0 solid transparent;
  border-image:url(/img/texturas/proyector-cinta.webp) 116 212 116 208 / 6.6cqw 12.1cqw 6.6cqw 11.9cqw stretch round}
.py-ventana{position:absolute;inset:6.2cqw 11.8cqw 6.2cqw 11.6cqw;overflow:hidden;background:#151311;display:flex;flex-direction:column;justify-content:flex-end}
.py-fondo{position:absolute;inset:0;z-index:0}
.py-fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.05) translate(calc(var(--tx,0) * -.8%),calc(var(--ty,0) * -.8%))}
.py-vineta{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,11,10,.62),rgba(12,11,10,0) 22%,rgba(12,11,10,0) 42%,rgba(12,11,10,.55) 62%,rgba(12,11,10,.94) 88%),radial-gradient(90% 70% at 50% 40%,transparent 55%,rgba(12,11,10,.5))}
.py-pin{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 9% max(30px,9%);text-align:center}
.py-pin>:not(.py-eb){position:relative;z-index:2}
.py-eb{position:absolute;z-index:2;top:0;left:0;right:0;margin:0;padding:max(26px,9%) 9% 0;font:500 13px/1 var(--at-ft),sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--oro)}
.py-nombres{margin:0;display:grid;gap:0;font:italic 300 clamp(50px,14.4cqw,92px)/.96 var(--at-fd),serif;letter-spacing:-.01em;color:#F7F1E6;text-shadow:0 2px 30px rgba(0,0,0,.6);overflow-wrap:anywhere}
.py-nombres em{font-style:italic;font-size:.5em;line-height:1.35;color:var(--oro)}
.py-fecha{margin:4px 0 0;font:italic 400 clamp(19px,5.2cqw,23px)/1.4 var(--at-fd),serif;max-width:24ch;color:#EFE7DA}
.py-fecha span{display:block;margin-bottom:2px;font:500 13px/2 var(--at-ft),sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--oro);font-style:normal}
.py-lugar{margin:0;font:500 13px/1.4 var(--at-ft),sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--at-tenue)}
.py-para{margin:2px 0 0;font:italic 400 19px/1.4 var(--at-fd),serif;color:var(--oro)}
.py-tc{margin:8px 0 0;font:500 13px/1 var(--at-ft),sans-serif;letter-spacing:.2em;color:rgba(236,228,214,.6);font-variant-numeric:tabular-nums}

/* ---------- Mensaje: fotografía de la sala vacía con el haz del proyector (1024×1536) ----------
   La pantalla encendida y el haz ocupan la mitad de arriba; la cita va en blanco sobre la penumbra de las butacas. */
.py-escena{min-height:min(118svh,1060px);display:grid;align-items:end;background:url(/img/texturas/proyector-sala.jpg) 34% 0/cover #0E0605}
.py-escena::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#0C0B0A,rgba(12,11,10,0) 9%,rgba(12,11,10,0) 40%,rgba(14,6,6,.62) 56%,rgba(12,8,7,.9) 74%,#0C0B0A)}
.py-escena .py-sec{padding-top:min(64svh,600px);padding-bottom:88px}
.py-escena blockquote{margin:0}
.py-escena blockquote p{margin:0 auto;max-width:24ch;font:italic 300 clamp(30px,7.6vw,40px)/1.28 var(--at-fd),serif;color:#FBF6EC;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.py-escena cite{display:block;margin-top:16px;font:500 13px/1.3 var(--at-ft),sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);font-style:normal}
.py-escena .py-intro{margin-top:26px;color:rgba(248,242,232,.9);text-shadow:0 1px 14px rgba(0,0,0,.6)}
/* En escritorio la foto se muestra a su alto y sus lados se funden con la penumbra de la sala. */
@media (min-width:760px){
  .py-escena{background-size:auto 100%;background-position:50% 0}
  .py-escena::before{background:
    linear-gradient(90deg,#0C0B0A calc(50% - min(118svh,1060px) * .36),rgba(12,11,10,0) calc(50% - min(118svh,1060px) * .2),rgba(12,11,10,0) calc(50% + min(118svh,1060px) * .2),#0C0B0A calc(50% + min(118svh,1060px) * .36)),
    linear-gradient(180deg,#0C0B0A,rgba(12,11,10,0) 9%,rgba(12,11,10,0) 40%,rgba(14,6,6,.62) 56%,rgba(12,8,7,.9) 74%,#0C0B0A)}
}

/* ---------- Cuenta: marquesina de focos (proyector-marquesina.png, 1100×439) sobre la noche ----------
   Tablero blanco lechoso de 6.1 a 93.3 % × 18.9 a 80.8 %: los números cuelgan ahí como letras de cartelera.
   La marquesina sale del margen del texto para ocupar casi todo el ancho del teléfono. */
.py-noche{background:radial-gradient(min(90vw,620px) 300px at 50% 52%,rgba(255,196,120,.16),rgba(255,196,120,0) 72%),linear-gradient(180deg,#0C0B0A,#100D0A 50%,#0C0B0A)}
.py-noche .py-sec{padding-top:88px;padding-bottom:88px}
.py-noche .py-k{margin-bottom:22px}
.py-marq{position:relative;isolation:isolate;width:min(calc(100vw - 16px),760px);margin:0 0 0 50%;translate:-50% 0;aspect-ratio:1100/439;container-type:inline-size}
.py-marq::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/img/texturas/proyector-marquesina.webp) center/100% 100% no-repeat}
.py-marq::before{content:"";position:absolute;inset:8% 5%;z-index:-2;pointer-events:none;border-radius:20px;box-shadow:0 0 70px 14px rgba(255,186,100,.2),0 30px 50px -10px rgba(0,0,0,.9)}
.py-marq-in{position:absolute;left:6.1%;right:6.7%;top:18.9%;bottom:19.2%;display:grid;place-items:center}
.py-cd{display:flex;justify-content:center;gap:6.4cqw}
.py-cd .cdu{display:grid;justify-items:center;gap:1.2cqw}
.py-cd b{font:500 10.2cqw/.86 var(--at-fd),serif;font-variant-numeric:lining-nums tabular-nums;color:#16120E;letter-spacing:-.01em}
.py-cd small{font:600 max(12px,2.6cqw)/1 var(--at-ft),sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#4A3B2C}
.py-marq-f{margin:26px 0 0;font:italic 400 22px/1.3 var(--at-fd),serif;color:#EFE7DA}
.py-marq-f + p{margin:0}

/* ---------- Familias: cartel de cine impreso (papel de cartel con su doblez en cruz), créditos al pie ---------- */
.py-cartel{color:var(--tinta-osc);background:url(/img/texturas/proyector-cartel-teja.jpg) 50% 0/760px auto repeat,#E9D8B6}
.py-cartel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%,rgba(252,246,232,.5),rgba(252,246,232,.18) 80%),linear-gradient(180deg,rgba(60,40,20,.22),rgba(60,40,20,0) 18px,rgba(60,40,20,0) calc(100% - 18px),rgba(60,40,20,.22))}
/* Filete impreso del cartel: marco doble en tinta burdeos */
.py-cartel::after{content:"";position:absolute;inset:16px max(14px,3vw);z-index:-1;pointer-events:none;border:1.5px solid rgba(142,38,48,.55);outline:1px solid rgba(142,38,48,.35);outline-offset:-6px}
.py-cartel .py-sec{padding-top:88px;padding-bottom:80px}
.py-presenta{margin:0 0 30px;font:italic 400 20px/1.3 var(--at-fd),serif;color:#5A4A3A}
.py-cartel .py-k{color:var(--burdeos)}
.py-cartel .py-t{color:#1C1712;font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(34px,9vw,52px);line-height:1.02}
.py-creditos{display:grid;gap:30px;padding:30px 0 30px;border-top:1px solid rgba(33,28,23,.45);border-bottom:1px solid rgba(33,28,23,.45)}
.py-cred .py-k2{color:#6A5543;margin-bottom:6px}
.py-nom{margin:0;font:500 clamp(19px,5vw,23px)/1.34 var(--at-fd),serif;text-transform:uppercase;letter-spacing:.035em;color:#1C1712;text-wrap:balance}
.py-pie-cartel{margin:22px 0 0;font:600 13px/1.5 var(--at-ft),sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--burdeos)}
@media(min-width:600px){.py-creditos{grid-template-columns:1fr 1fr}.py-cred:nth-child(3):last-child{grid-column:1/-1}}

/* ---------- Lugares: mesa de montaje en acero; cada fotograma va sobre su mesa de luz ----------
   La luz se ve por las perforaciones de la cinta (proyector-cinta.png, ventana 15.1–84.6 % × 14.6–85.4 %). */
.py-mesa{background:url(/img/texturas/proyector-acero-teja.jpg) 50% 0/max(100%,760px) auto repeat-y,#2A2A2A}
.py-mesa::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,.7),rgba(8,8,8,.28) 140px,rgba(8,8,8,.34) calc(100% - 140px),rgba(8,8,8,.75)),linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,.4))}
.py-mesa .py-sec{max-width:680px;padding-left:max(6vw,18px);padding-right:max(6vw,18px)}
.py-loc{display:grid;gap:64px}
.py-luz{position:relative;padding:7% 5%;border-radius:6px;background:radial-gradient(120% 120% at 50% 40%,#FFFBF2,#F1EADC 60%,#DCD3C3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 6px #1B1B1B,0 0 0 7px rgba(255,255,255,.12),0 0 60px 4px rgba(255,240,210,.18),0 30px 40px -18px rgba(0,0,0,.9)}
.py-foto{position:relative;isolation:isolate;aspect-ratio:1380/792;width:100%;margin:0 auto;rotate:-1.4deg}
.py-cuadro:nth-child(2n) .py-foto{rotate:1.2deg}
.py-foto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url(/img/texturas/proyector-cinta.webp) center/100% 100% no-repeat}
.py-foto::before{content:"";position:absolute;inset:4% 2%;z-index:0;pointer-events:none;box-shadow:0 10px 18px -4px rgba(60,48,30,.45)}
.py-foto img{position:absolute;z-index:1;left:14.4%;top:13.6%;width:70.9%;height:72.8%;object-fit:cover}
.py-cuadro-t{padding:30px max(12px,6%) 0}
.py-cuadro-t h3{margin:0 0 8px;font:italic 400 clamp(30px,8vw,38px)/1.1 var(--at-fd),serif;color:#F4EDE1;text-wrap:balance}
.py-hora{margin:0;font:italic 400 21px/1.4 var(--at-fd),serif;color:var(--oro)}
.py-dir{margin:8px auto 0;max-width:30ch;color:#C2B9AB;font-size:17px;line-height:1.55}

/* ---------- Programa: hoja de guion mecanografiada con broches de latón, sobre la sala; la claqueta encima ---------- */
.py-negro{background:transparent}
#itinerario.py-negro{background:radial-gradient(min(110vw,700px) 640px at 50% 46%,rgba(255,226,170,.13),rgba(255,226,170,0) 70%)}
#itinerario .py-sec{padding-left:max(5vw,16px);padding-right:max(5vw,16px);max-width:560px}
.py-guion-w{position:relative;padding-top:min(30vw,130px)}
.py-guion-w .py-claq{position:absolute;z-index:3;top:0;left:50%;width:min(66vw,280px);translate:-50% 0;rotate:-3deg}
.py-hoja{position:relative;isolation:isolate;padding:min(30vw,128px) 10% 12% 15%;text-align:left;color:#26211B}
.py-hoja::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/img/texturas/proyector-guion-teja.jpg) 0 0/420px auto repeat,#F3EEE3;background-blend-mode:multiply;box-shadow:inset 0 0 0 1px rgba(60,48,30,.12)}
.py-hoja::before{content:"";position:absolute;inset:2% 6%;z-index:-2;pointer-events:none;box-shadow:0 34px 60px -6px rgba(0,0,0,.75),0 10px 18px rgba(0,0,0,.35)}
/* Tres perforaciones con broche de latón en el margen izquierdo, como un guion encuadernado */
.py-broche{position:absolute;left:5.4%;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#F6E6B4,#C9A55A 42%,#7A5E28 78%,#4D3A18);box-shadow:0 1px 1px rgba(0,0,0,.35),1px 2px 3px rgba(60,40,10,.35),0 0 0 2px rgba(38,33,27,.14)}
.py-broche:nth-child(1){top:7%}.py-broche:nth-child(2){top:calc(50% - 7px)}.py-broche:nth-child(3){bottom:7%}
.py-hoja-k{margin:0 0 6px;font:400 13px/1.5 var(--maquina);letter-spacing:.06em;text-transform:uppercase;color:#6B5E4E}
.py-hoja-t{margin:0 0 26px;font:italic 400 clamp(36px,9.4vw,48px)/1.05 var(--at-fd),serif;color:#1E1A15}
.py-guion{list-style:none;margin:0;padding:0;font-family:var(--maquina)}
.py-guion li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 0;border-top:1px dashed rgba(38,33,27,.28)}
.py-gt{grid-column:1/-1;font:700 15px/1.3 var(--maquina);letter-spacing:.04em;color:var(--burdeos);font-variant-numeric:tabular-nums}
.py-gd{grid-column:1/-1;display:grid;gap:3px}
.py-gd strong{font:700 17px/1.35 var(--maquina);text-transform:uppercase;letter-spacing:.02em;color:#211C17}
.py-gd small{font:400 16px/1.45 var(--maquina);color:#4E4438}
.py-hoja-f{margin:16px 0 0;padding-top:14px;border-top:1px dashed rgba(38,33,27,.28);text-align:right;font:400 14px/1 var(--maquina);letter-spacing:.08em;text-transform:uppercase;color:#6B5E4E}

/* ---------- Vestimenta: telón de terciopelo; los colores sugeridos son focos de luz sobre la tela ---------- */
.py-telon{background:url(/img/texturas/proyector-telon.jpg) 50% 0/auto 100% repeat-x,#4A0D14}
.py-telon::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(min(80vw,520px) 70% at 50% 50%,rgba(14,4,5,.62),rgba(14,4,5,.3) 70%,rgba(14,4,5,.1)),linear-gradient(180deg,#0C0B0A,rgba(12,11,10,0) 90px,rgba(12,11,10,0) calc(100% - 90px),#0C0B0A)}
.py-telon .py-t{color:#FBF4E8;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.py-vest p{margin:0 auto;max-width:32ch;color:#F2E9DB;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.py-vest .py-nota{color:#E3D3BC}
.py-focos{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin:30px 0 14px}
.py-focos i{position:relative;display:block;width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c) 55%,#fff) 0,var(--c) 58%);
  box-shadow:0 0 0 2px rgba(20,8,8,.5),0 0 0 4px rgba(205,178,122,.55),0 0 34px 10px color-mix(in srgb,var(--c) 45%,transparent)}

/* ---------- Galería: pantalla de plata con grano; la tira de fotogramas corre a lo ancho ---------- */
.py-plata{color:var(--tinta-osc);background:#D6D0C4}
.py-plata::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.26;mix-blend-mode:multiply;background:url(/img/texturas/proyector-grano.jpg) 0 0/220px 220px repeat}
.py-plata::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(min(120vw,900px) 80% at 50% 50%,rgba(255,252,244,.62),rgba(255,252,244,0) 75%),linear-gradient(180deg,rgba(12,11,10,.5),rgba(12,11,10,0) 40px,rgba(12,11,10,0) calc(100% - 40px),rgba(12,11,10,.5))}
.py-plata .py-k{color:#6B4F33}
.py-plata .py-t{color:#1C1712}
.py-plata .py-h{padding:0 max(10vw,32px)}
/* Tira horizontal de cuadros verticales (proyector-cinta-v.webp, 792×1380; ventana 14.6–85.4 % × 15.1–84.6 %).
   Cada cuadro se encima 5.56 % sobre el anterior para que las perforaciones sigan su paso, como una cinta continua. */
.py-tira{position:relative}
.py-tira-in{--fw:min(60vw,260px);display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px calc(50% - var(--fw) / 2) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.py-tira-in::-webkit-scrollbar{display:none}
.py-fotograma{position:relative;isolation:isolate;flex:0 0 var(--fw);aspect-ratio:792/1380;scroll-snap-align:center}
.py-fotograma+.py-fotograma{margin-left:calc(var(--fw) * -.0556)}
.py-fotograma::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:url(/img/texturas/proyector-cinta-v.webp) center/100% 100% no-repeat}
.inv[data-theme="at-proyector"] .py-fotograma .gal-i{position:absolute;z-index:1;left:13.9%;right:13.9%;top:14.4%;bottom:14.7%;display:block;width:auto;height:auto;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#111}
.py-fotograma .gal-i img{width:100%;height:100%;object-fit:cover}
.py-desliza{margin:16px 0 0;font:600 12px/1 var(--at-ft),sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#5E5244}

/* ---------- Terciopelo de butaca (regalos y confirmación): teja espejada en dos capas desfasadas ---------- */
.py-butaca{background:url(/img/texturas/proyector-terciopelo-teja.jpg) 0 0/380px auto repeat,url(/img/texturas/proyector-terciopelo-teja.jpg) 173px 241px/560px auto repeat,#5A1019;background-blend-mode:multiply,normal}
.py-butaca::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(min(100vw,640px) 420px at 50% 0,rgba(255,206,150,.12),rgba(255,206,150,0) 70%),linear-gradient(rgba(16,3,6,.42),rgba(16,3,6,.42)),linear-gradient(180deg,#0C0B0A,rgba(12,11,10,0) 80px,rgba(12,11,10,0) calc(100% - 80px),#0C0B0A)}
.py-butaca .py-t{color:#FBF4E8}
.py-butaca .py-intro{color:#F0E4D4}

/* Regalos: boletos de rollo de cartulina, con muescas en las puntas y perforación; el número en tinta roja. */
.py-boletos{display:grid;gap:28px;justify-items:center}
@media(min-width:760px){.py-butaca#regalos .py-sec{max-width:900px}.py-boletos{grid-template-columns:1fr 1fr;align-items:start;gap:34px 30px}.py-boletos .py-rollo-b:nth-child(odd):last-child{grid-column:1/-1}}
.py-rollo-b{--papel:#FFF4DE;position:relative;isolation:isolate;width:min(100%,400px);padding:30px 15% 34px;rotate:var(--r);color:var(--tinta-osc);
  --at-tinta:#211C17;--at-tenue:#5B4C3E;--ink:#211C17;--muted:#5B4C3E}
.py-rollo-b:nth-child(2n){--papel:#F7D3C6}
.py-rollo-b::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(33,28,23,.42) 1.4px,transparent 1.9px) 8% 0/6px 9px repeat-y,radial-gradient(circle,rgba(33,28,23,.42) 1.4px,transparent 1.9px) 92% 0/6px 9px repeat-y,
    url(/img/texturas/proyector-cartulina-teja.jpg) 0 0/360px auto repeat,var(--papel);background-blend-mode:normal,normal,multiply;
  -webkit-mask:radial-gradient(circle 13px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 13px at 0 50%,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 96%,#000) right/51% 100% no-repeat}
.py-rollo-b::before{content:"";position:absolute;inset:6% 4%;z-index:-2;pointer-events:none;border-radius:6px;box-shadow:0 22px 34px -6px rgba(0,0,0,.6),0 6px 12px rgba(0,0,0,.3)}
.py-rollo-b .py-rb-h{display:flex;justify-content:space-between;gap:10px;margin:0 0 16px;padding-bottom:12px;border-bottom:1.5px solid rgba(142,38,48,.6);font:700 12.5px/1.2 var(--at-ft),sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--burdeos)}
.py-rollo-b .py-k2{color:#5B4C3E}
.py-rollo-b p{margin:0 0 4px}
.py-rollo-b .py-nota{color:#5B4C3E}
.py-rollo-b .at-clabe{margin:10px 0 0}

/* ---------- Confirmación: ficha de taquilla de cartulina, de corte recto, con su talón ---------- */
.py-rsvp .py-sec{max-width:600px;padding-left:max(4vw,14px);padding-right:max(4vw,14px)}
.py-ficha{--talon:84px;position:relative;isolation:isolate;width:min(100%,520px);margin:0 auto;padding:0 10% calc(var(--talon) + 6px);text-align:center;color:var(--tinta-osc);
  --ink:#2A2420; --paper:transparent; --bg:rgba(255,250,240,.42); --muted:#6A5A4B; --line:rgba(42,36,32,.32); --accent:#A3322B;
  --at-tinta:#2A2420; --at-tenue:#6A5A4B; --at-linea:rgba(42,36,32,.22)}
.py-ficha::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:3px;
  background:linear-gradient(rgba(255,250,240,.2),rgba(255,250,240,.2)),url(/img/texturas/proyector-cartulina-teja.jpg) 0 0/420px auto repeat,#FFF8EA;background-blend-mode:normal,multiply;
  -webkit-mask:radial-gradient(circle 14px at 0 calc(100% - var(--talon)),#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% calc(100% - var(--talon)),#0000 96%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 14px at 0 calc(100% - var(--talon)),#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% calc(100% - var(--talon)),#0000 96%,#000) right/51% 100% no-repeat}
.py-ficha::before{content:"";position:absolute;inset:2% 6%;z-index:-2;pointer-events:none;border-radius:10px;box-shadow:0 36px 60px -6px rgba(0,0,0,.72),0 10px 18px rgba(0,0,0,.4)}
.py-ficha-h{display:flex;justify-content:space-between;align-items:center;margin:0 -2%;padding:34px 0 16px;border-bottom:1.5px solid rgba(163,50,43,.65);font:700 13px/1 var(--at-ft),sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#A3322B}
.py-bol-k{margin:22px 0 0;font:600 13px/1.4 var(--at-ft),sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#6A5A4B}
.py-bol-t{margin:10px 0 0;font:italic 500 clamp(32px,8.6vw,42px)/1.1 var(--at-fd),serif;color:#231D18;text-wrap:balance}
.py-bol-f{margin:8px 0 24px;font:500 16px/1.4 var(--at-ft),sans-serif;color:#5B4C3E}
.py-nw{white-space:nowrap}
.py-talon{position:absolute;left:0;right:0;bottom:0;height:var(--talon);display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 10%;
  border-top:2px dotted rgba(42,36,32,.4);font:700 12.5px/1.2 var(--at-ft),sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#6A5A4B}
.py-talon span:last-child{max-width:40%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.py-cera{border-top:1px dashed rgba(42,36,32,.35);padding-top:24px;padding-bottom:30px;text-align:left}
.py-cera .lead{margin:0 0 18px;text-align:center;font-size:16px;color:#5B4C3E}
.py-cera .pass{margin:0 0 22px;padding:16px;background:transparent;box-shadow:inset 0 0 0 1px rgba(42,36,32,.3);text-align:center}
.py-cera .pass::before,.py-cera .pass::after{display:none}
.py-cera .pass-n{font:italic 500 30px/1.15 var(--at-fd),serif}
.inv[data-theme="at-proyector"] .py-cera .rsvp{padding:0;background:transparent;box-shadow:none;gap:18px}
.inv[data-theme="at-proyector"] .py-cera .seg{background:rgba(42,36,32,.06);box-shadow:inset 0 0 0 1px rgba(42,36,32,.28)}
.inv[data-theme="at-proyector"] .py-cera .seg span{font:600 14.5px/1.2 var(--at-ft),sans-serif;color:#5B4C3E}
.inv[data-theme="at-proyector"] .py-cera .seg input:checked+span{background:#231D18;color:#F4ECDD}
.inv[data-theme="at-proyector"] .py-cera .fld>span{font:600 13px/1.3 var(--at-ft),sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6A5A4B}
.inv[data-theme="at-proyector"] .py-cera .fld input,.inv[data-theme="at-proyector"] .py-cera .fld select,.inv[data-theme="at-proyector"] .py-cera .fld textarea{padding:12px 14px;border-radius:4px;background:rgba(255,251,242,.55);color:#231D18;font-size:17px;box-shadow:inset 0 0 0 1px rgba(42,36,32,.3)}
.inv[data-theme="at-proyector"] .py-cera .fld input::placeholder,.inv[data-theme="at-proyector"] .py-cera .fld textarea::placeholder{color:rgba(90,76,62,.6)}
.inv[data-theme="at-proyector"] .py-cera .rsvp .btn{min-height:54px;border-radius:999px;background:linear-gradient(180deg,#2E2722,#1B1613);color:#F1E4C4;font:600 13px/1 var(--at-ft),sans-serif;letter-spacing:.22em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(205,178,122,.7),inset 0 1px 0 rgba(255,244,214,.18),0 12px 22px -12px rgba(30,20,10,.8)}
.inv[data-theme="at-proyector"] .py-cera .form-msg{color:#A3322B}
.inv[data-theme="at-proyector"] .py-cera .rsvp-done{text-align:center}
.inv[data-theme="at-proyector"] .py-cera .stamp{color:#A3322B;box-shadow:inset 0 0 0 2px #A3322B,inset 0 0 0 7px rgba(255,250,240,.4),inset 0 0 0 8px #A3322B}
.inv[data-theme="at-proyector"] .py-cera .done-t{font:italic 500 30px/1.2 var(--at-fd),serif}
.inv[data-theme="at-proyector"] .py-cera .btn-line{color:#231D18}
.inv[data-theme="at-proyector"] .py-cera .alt{text-align:center;color:#5B4C3E;font-size:15px}
.inv[data-theme="at-proyector"] .py-cera .alt a{color:#A3322B}

/* ---------- Hospedaje, notas, hashtag: sala limpia ---------- */
.py-hoteles{display:grid;gap:40px}
.py-hotel h3{margin:0 0 6px;font:italic 400 30px/1.2 var(--at-fd),serif;color:#F4EDE1}
.py-hotel p{margin:0 0 4px;color:#D8CFC1}
.py-hotel a:not(.py-btn){color:var(--oro)}
.py-hotel + .py-hotel{padding-top:40px;border-top:1px solid var(--at-linea)}
.py-notas{margin:0;padding:0;list-style:none;display:grid;gap:10px;font:italic 400 20px/1.45 var(--at-fd),serif;color:#C9C0B2}
.py-tag{margin:0;font:italic 300 clamp(34px,9vw,48px)/1.1 var(--at-fd),serif;color:var(--oro)}

/* ---------- Cierre: proyector antiguo en grabado (máscara teñida de luz) sobre negro con la fuga de luz ---------- */
.py-fuga{background:url(/img/texturas/proyector-fuga.jpg) calc(100% + 40px) 18%/auto 86% no-repeat,#050404}
.py-fuga::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0C0B0A,rgba(12,11,10,0) 120px,rgba(11,10,9,0) calc(100% - 160px),#0B0A09),radial-gradient(min(90vw,560px) 360px at 50% 200px,rgba(255,226,170,.1),rgba(255,226,170,0) 70%)}
.py-fuga .py-sec{padding-top:80px;padding-bottom:120px}
.py-emblema{display:block;width:min(58vw,250px);aspect-ratio:1;margin:0 auto 6px;background:linear-gradient(180deg,#F2E6CB,#CDB27A 70%,#B39760);
  -webkit-mask:url(/img/texturas/proyector-emblema.webp) center/contain no-repeat;mask:url(/img/texturas/proyector-emblema.webp) center/contain no-repeat}
.py-fin{margin:0 0 14px;font:italic 300 76px/1 var(--at-fd),serif;color:#F4EDE1;letter-spacing:.02em}
.py-firma{margin:20px 0 8px;font:italic 300 clamp(32px,8.6vw,44px)/1.1 var(--at-fd),serif;color:#F4EDE1}
.py-cierre .py-k{color:var(--at-tenue)}
.inv[data-theme="at-proyector"] .inv-brand{color:rgba(236,228,214,.5)}
@media (prefers-reduced-motion:reduce){.py-grano,.py-polvo-pag,.py-leak{animation:none}.in .py-claq::after{transition:none}}

/* ---------- Apertura en video (el proyector se enciende) ----------
   El video (720×1278, 9:16) ocupa el alto de la pantalla y se centra: en el teléfono recorta los lados; en pantallas anchas
   quedan a los lados la penumbra de la sala y sus orillas se funden. El remate usa la misma caja: el título se proyecta
   dentro de la pantalla iluminada (21.7–78.3 % × 22.7–47.2 % del cuadro). */
.inv[data-template="proyector"] .op-video{background:#070605}
.inv[data-template="proyector"] .opv,
.inv[data-template="proyector"] .opv-fin{inset:auto;top:0;left:50%;width:auto;height:100%;aspect-ratio:720/1278;transform:translateX(-50%)}
.inv[data-template="proyector"] .opv{object-fit:cover;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@media (max-aspect-ratio:720/1278){.inv[data-template="proyector"] .opv{-webkit-mask-image:none;mask-image:none}}
.inv[data-template="proyector"] .opv-ui{padding-top:max(36px,5.4svh);gap:4px}
.inv[data-template="proyector"] .opv-ui .op-to{color:rgba(236,228,214,.84);text-shadow:0 1px 10px rgba(0,0,0,.8);font:500 13px/1.4 var(--at-ft),sans-serif;letter-spacing:.32em;text-transform:uppercase}
.inv[data-template="proyector"] .opv-ui .op-to strong{font-weight:600;color:#F7F1E6}
.inv[data-template="proyector"] .opv-n{margin-top:4px;font:italic 300 clamp(40px,11vw,58px)/1.05 'Cormorant',serif;color:#F4EDE1;text-shadow:0 2px 18px rgba(0,0,0,.85);text-wrap:balance;max-width:14ch}
/* Botón de vidrio con filo de oro sobre las butacas */
.inv[data-template="proyector"] .opv-ui .opv-tap{bottom:max(84px,11svh)}
.inv[data-template="proyector"] .opv-tap{white-space:nowrap;min-height:52px;padding:0 30px;color:#F4E8CC;font:500 13px/1 'Mulish',sans-serif;letter-spacing:.26em;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 55%,rgba(255,255,255,.08));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(205,178,122,.75),inset 0 1px 0 rgba(255,244,214,.35),inset 0 -1px 0 rgba(0,0,0,.35),0 14px 34px -10px rgba(0,0,0,.85)}
.inv[data-template="proyector"] .opv-skip{color:rgba(236,228,214,.78);font:500 12px/1 'Mulish',sans-serif;letter-spacing:.26em;text-shadow:0 1px 8px rgba(0,0,0,.8)}
/* Remate: sobre la pantalla iluminada se proyecta el cuadro del título, oscuro con letras claras, que parpadea al entrar. */
.inv[data-template="proyector"] .opv-fin{display:block;padding:0}
.inv[data-template="proyector"] .opv-fin-titulo::before{inset:auto;left:21.9%;top:22.9%;width:56.2%;height:24.1%;
  background:radial-gradient(100% 90% at 50% 50%,rgba(34,29,24,.9),rgba(18,15,12,.96) 70%),#14110E;box-shadow:0 0 18px 6px rgba(255,236,200,.18);border-radius:2px;opacity:0}
.inv[data-template="proyector"] .op-video.is-fin .opv-fin-titulo::before{animation:py-proyecta 1s steps(1) forwards}
@keyframes py-proyecta{0%{opacity:0}12%{opacity:.85}22%{opacity:.35}34%{opacity:1}48%{opacity:.8}60%,100%{opacity:1}}
.inv[data-template="proyector"] .opv-fin-in{position:absolute;left:21.9%;top:22.9%;width:56.2%;height:24.1%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 6%;box-sizing:border-box;
  container-type:size;transform:none;opacity:0;transition:opacity .9s ease .45s}
.inv[data-template="proyector"] .op-video.is-fin .opv-fin-in{opacity:1}
.inv[data-template="proyector"] .opv-fin-eb{font:500 clamp(10px,6.2cqw,13px)/1.3 'Mulish',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#CDB27A;opacity:1}
.inv[data-template="proyector"] .opv-fin-n{display:grid;justify-items:center;font:italic 300 clamp(24px,16.5cqw,46px)/.98 'Cormorant',serif;color:#F7F1E6;text-shadow:0 0 14px rgba(255,236,200,.25);text-align:center;text-wrap:balance}
.inv[data-template="proyector"] .opv-fin-n .amp{color:#CDB27A;font-size:.5em;line-height:1.2;margin:0}
.inv[data-template="proyector"] .opv-fin-f{margin:2px 0 0;font:italic 400 clamp(13px,8cqw,18px)/1.25 'Cormorant',serif;color:rgba(236,228,214,.86);text-align:center;opacity:1}