/* Atelier · Proyector. Sala a oscuras, pantalla de cine, película de 35 mm y una luz cálida de proyector.
   Todo en blanco y negro salvo el oro champaña y el burdeos del terciopelo de las butacas.
   Materiales reales: grano y polvo de película (fotos de Magnific, en capas fijas propias), fuga de luz fotográfica
   que sigue el giro del teléfono (--tx, --ty), fotogramas de 35 mm, claquetas y boleto antiguo generados (PNG con transparencia). */
.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);
  font-size:18px; line-height:1.62; font-weight:400; background:#0B0A09;
}
.py{position:relative;isolation:isolate;background:radial-gradient(120% 60% at 50% 0%,#17140F,#0C0B0A 60%);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}
.py-grano-pag{position:fixed;z-index:4;opacity:.13}
@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)}}
/* Polvo y rayones de la cinta (foto sobre negro, en screen): cambian de lugar en cada cuadro. */
.py-polvo-pag{position:fixed;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:url(/img/texturas/proyector-polvo.jpg) 0 0/cover;animation:py-polvo-pag .64s steps(1) infinite}
@keyframes py-polvo-pag{0%{background-position:0 0}25%{background-position:38% 61%;opacity:.42}50%{background-position:74% 12%}75%{background-position:18% 88%;opacity:.56}}
/* Fuga de luz fotográfica (naranja sobre negro, entonada a champaña) que respira y sigue el giro. */
.py-leak{position:fixed;inset:-12%;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 70% 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 ---------- */
.py-sec{position:relative;z-index:2;padding:76px max(28px,8vw);max-width:640px;margin:0 auto;text-align:center}
.py-ancho{max-width:none;padding-left:0;padding-right:0}
.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-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:26px}
.py-nota{margin:12px 0 0;font:italic 400 19px/1.45 var(--at-fd),serif;color:var(--at-tenue)}

/* ---------- 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 la sección. Sobre la pizarra, escrito con gis: producción, escena, toma y fecha. */
.py-h{margin:0 0 34px;display:grid;justify-items:center;gap:22px}
.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)}
.py-h.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}
.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}

.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)}
.py-vidrio{position:relative;padding:38px max(26px,9%);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(205,178,122,.3),inset 0 1px 0 rgba(255,244,214,.14),0 30px 60px -30px rgba(0,0,0,.9)}
.py-vidrio h3{margin:0 0 6px;font:italic 400 28px/1.2 var(--at-fd),serif}
.py-vidrio p{margin:0 0 4px}
.py-vidrios{display:grid;gap:18px}

/* ---------- Portada: 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 se repiten (round) a cualquier alto; anchos en cqw de la propia tira. */
.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 */
.py-msg blockquote{margin:0 auto 22px;max-width:24ch;font:italic 300 clamp(30px,7.6vw,40px)/1.28 var(--at-fd),serif;color:#F4EDE1;text-wrap:balance}
.py-msg cite{display:block;margin-top:14px;font:500 13px/1 var(--at-ft),sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);font-style:normal}

/* Cuenta: vidrio con filo de oro */
.py-cuenta .py-k2{margin-bottom:14px}
.py-cd{display:flex;justify-content:center;gap:clamp(14px,5vw,26px);padding:6px 0 4px}
.py-cd .cdu{display:grid;justify-items:center;gap:8px}
.py-cd b{font:300 clamp(46px,12.6vw,64px)/1 var(--at-fd),serif;font-variant-numeric:lining-nums tabular-nums;color:#F7F1E6}
.py-cd small{font:500 12px/1 var(--at-ft),sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--at-tenue)}

/* Reparto: créditos de película */
.py-reparto{display:grid;gap:34px}
.py-reparto .py-k2{color:var(--oro)}
.py-nom{margin:0;font:400 clamp(25px,6.6vw,30px)/1.3 var(--at-fd),serif;color:#F2EBDF}
@media(min-width:600px){.py-reparto{grid-template-columns:1fr 1fr}.py-reparto>div:nth-child(3):last-child{grid-column:1/-1}}

/* Locaciones: la foto en un fotograma de 35 mm (proyector-cinta.png al 100 %; ventana 15.1–84.6 % × 14.6–85.4 %). */
#lugares{max-width:680px;padding-left:max(16px,4vw);padding-right:max(16px,4vw)}
.py-loc{display:grid;gap:56px}
.py-foto{position:relative;isolation:isolate;aspect-ratio:1380/792;width:100%;margin:0 auto}
.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 img{position:absolute;z-index:1;left:14.4%;top:13.6%;width:70.9%;height:72.8%;object-fit:cover;transition:transform 1.4s var(--ease-papel)}
.py-cuadro-t{padding:26px 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:var(--at-tenue);font-size:17px;line-height:1.55}

/* Guion: códigos de tiempo */
.py-guion{list-style:none;margin:0 auto;padding:0;max-width:460px;text-align:left}
.py-guion li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--at-linea)}
.py-guion li:last-child{border-bottom:1px solid var(--at-linea)}
.py-gt{font:500 14px/1.6 var(--at-ft),sans-serif;letter-spacing:.1em;color:var(--oro);font-variant-numeric:tabular-nums;padding-top:5px}
.py-gd{display:grid;gap:2px}.py-gd strong{font:italic 400 25px/1.2 var(--at-fd),serif;color:#F2EBDF}.py-gd small{font-size:16px;color:var(--at-tenue)}

/* Vestuario */
.py-paleta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:18px 0 6px}
.py-paleta i{display:block;width:42px;height:42px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 3px var(--negro),0 0 0 4px rgba(205,178,122,.55)}

/* Fotogramas: 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:14px 0 0;font:500 12px/1 var(--at-ft),sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--at-tenue)}

/* Notas, hashtag */
.py-notas ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font:italic 400 20px/1.45 var(--at-fd),serif;color:var(--at-tenue)}
.py-tag{margin:0;font:italic 300 clamp(34px,9vw,48px)/1.1 var(--at-fd),serif;color:var(--oro)}

/* ---------- Butacas: boleto antiguo sobre terciopelo burdeos ----------
   Terciopelo real (Magnific) oscurecido; el boleto (proyector-boleto.png, 746×1528) en 9 cortes: arriba el número, abajo
   la perforación y el talón; los lados (filete doble) y el centro se estiran con el formulario. Anchos en cqw del boleto. */
.py-rsvp{position:relative;z-index:2;isolation:isolate;padding:86px max(14px,4vw) 96px}
.py-rsvp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,#0C0B0A,rgba(12,11,10,0) 12%,rgba(12,11,10,0) 88%,#0C0B0A),
  radial-gradient(70% 40% at 50% 26%,rgba(255,206,150,.12),transparent 70%),
  linear-gradient(rgba(16,3,6,.5),rgba(16,3,6,.5)),
  url(/img/texturas/proyector-terciopelo.jpg) center/1100px auto #3A0E15}
.py-rsvp-in{max-width:560px;margin:0 auto;text-align:center}
.py-rsvp .py-h{margin-bottom:38px}
.py-boleto{position:relative;isolation:isolate;container-type:inline-size;width:min(100%,520px);margin:0 auto;text-align:center;color:#2A2420;
  --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-boleto::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:0 solid transparent;
  border-image:url(/img/texturas/proyector-boleto.webp) 210 124 398 120 fill / 28.15cqw 16.62cqw 53.35cqw 16.09cqw stretch}
.py-boleto::before{content:"";position:absolute;inset:3% 4% 4%;z-index:-2;pointer-events:none;border-radius:12px;box-shadow:0 34px 60px -6px rgba(0,0,0,.7),0 10px 18px rgba(0,0,0,.4)}
.py-boleto-in{padding:27cqw 13cqw 58cqw}
.py-bol-k{margin:0;font:600 13px/1.4 var(--at-ft),sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#A3322B}
.py-bol-t{margin:12px 0 0;font:italic 500 clamp(30px,8.4cqw,40px)/1.1 var(--at-fd),serif;color:#231D18;text-wrap:balance}
.py-bol-f{margin:8px 0 22px;font:500 16px/1.4 var(--at-ft),sans-serif;color:#5B4C3E}
.py-cera{border-top:1px dashed rgba(42,36,32,.35);padding-top:24px;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,.5);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}

/* Cierre: «Fin» */
.py-cierre{position:relative;z-index:2;padding:40px max(28px,8vw) 80px;text-align:center}
.py-cierre .rv{display:grid;justify-items:center;gap:14px}
.py-fin{margin:0 0 12px;width:150px;height:150px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(205,178,122,.7),inset 0 0 0 6px var(--negro),inset 0 0 0 7px rgba(205,178,122,.32),0 0 60px rgba(205,178,122,.08);font:italic 300 66px/1 var(--at-fd),serif;color:var(--oro)}
.py-firma{margin:0;font:italic 300 clamp(32px,8.6vw,44px)/1.1 var(--at-fd),serif;color:#F4EDE1}
.py-cierre .py-k2{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}.py-h.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}