/* XV Gala. Muestra de MARËA Studio. Lo común está en ../receta/receta.css.
   Las piezas son imágenes hechas con la IA de Canva y se publican tal como salen de Canva. */
:root{
  --suelo:#1C070B; --tinta:#3A0F14; --tinta-s:#5E2B27; --oro:#775519; --papel:#F2E8D5; --linea:rgba(58,15,20,.26); --seda:#5B1521;
  --sombra:rgba(14,3,5,.62); --pulso:rgba(226,190,120,.85); --dorso:#4B1219; --seda-forro:#F0E2C4; --c-dentro:#E5D6B8;
  --cursiva:'Bodoni Moda',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --caps:'Jost','Inter',sans-serif;
  --flecha:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%233A0F14'/></svg>");
  --a-letra:#F0E5CF; --sobre-seda:#F4EAD6; --oro-claro:#DCC08A;
  /* geometría del sobre, medida sobre piezas/sobre.jpg */
  --s-bisagra:26.786%;
  --s-suelo:34.7%;
  --s-hueco:polygon(15.36% 26.79%,84.75% 26.79%,84.43% 27.5%,82.1% 30.36%,78.39% 32.86%,67.8% 39.29%,57.2% 45.71%,50.21% 50.6%,42.37% 46.13%,31.78% 39.4%,21.19% 33.04%,16.95% 30.36%,15.47% 27.86%);
  --s-dorso:polygon(15.36% 26.79%,84.75% 26.79%,84.43% 26.07%,82.1% 23.21%,78.39% 20.71%,67.8% 14.29%,57.2% 7.86%,50.21% 2.98%,42.37% 7.44%,31.78% 14.17%,21.19% 20.54%,16.95% 23.21%,15.47% 25.71%);
  --s-forro:polygon(19.28% 26.79%,80.83% 26.79%,50.21% 5.12%);
  --s-frente:polygon(15.36% 65.3%,84.75% 65.3%,84.75% 26.79%,84.43% 27.5%,82.1% 30.36%,78.39% 32.86%,67.8% 39.29%,57.2% 45.71%,50.21% 50.6%,42.37% 46.13%,31.78% 39.4%,21.19% 33.04%,16.95% 30.36%,15.47% 27.86%,15.36% 26.79%);
  --s-solapa:polygon(15.36% 26.79%,84.75% 26.79%,84.43% 27.5%,82.1% 30.36%,78.39% 32.86%,67.8% 39.29%,57.2% 45.71%,56.36% 47.62%,56.57% 49.05%,56.04% 50.48%,54.56% 51.67%,52.44% 52.44%,50.11% 52.68%,47.78% 52.44%,45.66% 51.67%,44.17% 50.48%,43.64% 49.05%,43.86% 47.62%,42.37% 46.13%,31.78% 39.4%,21.19% 33.04%,16.95% 30.36%,15.47% 27.86%);
  --s-baja:575; --s-x:473; --s-y:824; --s-boton:1148;
  --parche-x:473; --parche-y:830; --parche-dx:-150; --parche-dy:-100; --parche-r:70; --parche-r2:108;
  /* la tarjeta en blanco de piezas/portada.jpg y dónde va la letra */
  --c-x:186; --c-y:368; --c-w:624; --c-h:838;
  --l-x:236; --l-y:416; --l-w:530; --l-h:720;
}

/* el terciopelo suelto es más oscuro que el de la portada: se sube aquí para que sean la misma tela */
.fondo{background-image:url(piezas/tela.jpg);filter:brightness(1.25) saturate(1.05)}

/* ---------- imágenes del sobre: por fuera burdeos, por dentro damasco de oro viejo ---------- */
.a-hueco,.a-dorso::after{background-image:url(piezas/forro.jpg)}
.a-hueco{background-color:#F0E2C4}
.a-dorso{background-image:url(piezas/sobre.jpg);background-size:250% 250%;background-position:49.7% 87.3%}
.a-frente,.a-frente::after,.a-solapa{background-image:url(piezas/sobre.jpg)}
/* la carta es más ancha que el sobre por 10 px: dentro del sobre se recorta a su anchura y no asoma */
.a-marcha{clip-path:polygon(0 0,100% 0,100% 26.79%,84.6% 26.79%,84.6% 64.9%,15.5% 64.9%,15.5% 26.79%,0 26.79%)}
.a-papel{filter:brightness(1.04) saturate(.85)}
.a-papel::before{inset:2% 2%}
.a-papel::after{background-image:url(piezas/papel-v.png);inset:-7.28% -12.83% -8.33% -12.96%}
.monograma{top:calc(823*var(--e));font:500 calc(42*var(--e))/1 var(--cursiva);letter-spacing:.01em;color:#2E1C06;text-shadow:0 calc(1.5*var(--e)) 0 rgba(255,232,178,.55)}

/* a 320 de ancho, lo que la receta deja en menos de 11 px sube a 11. Sobre el terciopelo, la letra clara lleva una sombra que la separa de los brillos */
.a-boton,.bajar{font-size:max(11px,calc(12*var(--u)))}
.a-boton,.bajar,.a-muestra,.p-muestra,.pie,.vi-txt,.b-cierre{text-shadow:0 1px calc(5*var(--u)) rgba(14,3,5,.75)}

/* ---------- portada ---------- */
.letra{justify-content:center;mix-blend-mode:multiply}
.l-sobre{font:400 max(11px,calc(27*var(--e)))/1.2 var(--caps);letter-spacing:.28em;text-transform:uppercase;color:var(--oro)}
.l-nombre{margin-top:calc(24*var(--e));font:400 calc(104*var(--e))/1.02 var(--cursiva);letter-spacing:-.005em}
.l-frase{margin-top:calc(28*var(--e));max-width:calc(430*var(--e));font:italic 400 calc(39*var(--e))/1.17 var(--serif);text-wrap:balance}
.l-fecha{margin-top:calc(34*var(--e));font:400 max(11px,calc(27*var(--e)))/1.2 var(--caps);letter-spacing:.18em;text-transform:uppercase}
.l-lugar{margin-top:calc(8*var(--e));font:italic 500 calc(41*var(--e))/1.15 var(--serif)}

/* ---------- papel y piezas: la sombra cae hacia abajo a la derecha, como la luz de las velas ---------- */
.pieza{filter:drop-shadow(calc(3*var(--u)) calc(5*var(--u)) calc(6*var(--u)) var(--sombra))}
.papel::before{filter:brightness(1.12) saturate(.76) drop-shadow(calc(3*var(--u)) calc(6*var(--u)) calc(9*var(--u)) var(--sombra))}
.p-h::before{background-image:url(piezas/papel-h.png);inset:-16% -14.07% -19.5% -13.81%}
.p-v::before{background-image:url(piezas/papel-v.png);inset:-7.28% -12.83% -8.33% -12.96%}
h2{font:italic 400 calc(28*var(--u))/1.12 var(--cursiva)}
.et{letter-spacing:.26em}

/* cuánto falta: una entrada de teatro, con su talón */
.b-cuenta{height:calc(292*var(--u))}
.entrada{position:absolute;left:calc(-37*var(--u));top:calc(26*var(--u));width:calc(450*var(--u));height:calc(253.3*var(--u));transform:rotate(-3.5deg)}
.en-img{width:100%;height:100%;filter:brightness(1.22) saturate(.68) drop-shadow(calc(3*var(--u)) calc(6*var(--u)) calc(9*var(--u)) var(--sombra))}
.en-txt{position:absolute;left:14.5%;width:58.5%;top:21%;height:54%;display:flex;flex-direction:column;justify-content:center;text-align:center}
.en-txt .et{font-size:max(11px,calc(11.5*var(--u)))}
.cuenta{margin-top:calc(9*var(--u))}
.cuenta b{font:400 calc(33*var(--u))/1.05 var(--cursiva);font-variant-numeric:lining-nums tabular-nums}
.cuenta small{margin-top:calc(4*var(--u));font-size:max(11px,calc(11*var(--u)))}
.en-talon{position:absolute;left:76.4%;width:11%;top:18.5%;height:58%;display:flex;align-items:center;justify-content:center;font:italic 400 calc(27*var(--u))/1 var(--cursiva);color:var(--tinta);writing-mode:vertical-rl;transform:rotate(180deg)}
.c-perlas{z-index:3;left:calc(96*var(--u));top:calc(166*var(--u));width:calc(310*var(--u));transform:rotate(-6deg);filter:brightness(1.32) saturate(.62) drop-shadow(calc(2*var(--u)) calc(3*var(--u)) calc(3*var(--u)) var(--sombra))}
.c-rosa{z-index:4;left:calc(-44*var(--u));top:calc(180*var(--u));width:calc(176*var(--u));transform:rotate(-14deg);filter:brightness(1.24) saturate(.92) drop-shadow(calc(3*var(--u)) calc(5*var(--u)) calc(6*var(--u)) var(--sombra))}

/* la noche: un teatrito. El telón se abre al llegar y se queda recogido a los lados */
.b-noche{margin-top:calc(22*var(--u))}
.teatrito{position:relative;width:calc(530*var(--u));height:calc(662.5*var(--u));margin-left:calc(-77.5*var(--u))}
.t-marco{position:absolute;inset:0;width:100%;height:100%;filter:saturate(.92) brightness(1.04) drop-shadow(calc(5*var(--u)) calc(8*var(--u)) calc(11*var(--u)) var(--sombra))}
.t-hueco{position:absolute;left:24%;width:52.2%;top:20.96%;height:62.24%;border-radius:50% 50% 0 0/26.7% 26.7% 0 0;overflow:hidden;background:var(--suelo)}
.t-hueco::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset calc(6*var(--u)) calc(9*var(--u)) calc(16*var(--u)) rgba(14,3,5,.62);pointer-events:none}
.t-sensor{position:absolute;left:50%;top:48%;width:2px;height:calc(30*var(--u))}
.t-salon{width:100%;height:100%;object-fit:cover;object-position:38% 30%;transition:filter 2.6s ease .3s}
.t-panel{position:absolute;top:0;width:50.5%;height:100%;background-image:url(piezas/telon.jpg);background-size:198% 100%;background-repeat:no-repeat;transform:scaleX(.3);filter:brightness(1.08) drop-shadow(calc(3*var(--u)) 0 calc(6*var(--u)) rgba(14,3,5,.55));will-change:transform}
.t-i{left:0;background-position:0 0;transform-origin:0 50%}
.t-d{right:0;background-position:100% 0;transform-origin:100% 50%;filter:brightness(1.08) drop-shadow(calc(-3*var(--u)) 0 calc(6*var(--u)) rgba(14,3,5,.55))}
.js .t-panel{transition:transform 2.8s cubic-bezier(.62,.02,.18,1) .2s}
.js:not(.estatica) .t-sensor:not(.in)~.t-panel{transform:none}
.js:not(.estatica) .t-sensor:not(.in)~.t-salon{filter:brightness(.45)}
.estatica .t-panel,.estatica .t-salon{transition:none}
.n-nota{z-index:2;width:calc(286*var(--u));margin:calc(-92*var(--u)) auto 0 calc(26*var(--u));padding:calc(20*var(--u)) calc(24*var(--u)) calc(22*var(--u));transform:rotate(-1.6deg)}
.n-nota h2{margin-top:calc(7*var(--u));font-size:calc(29*var(--u))}
.n-nota p{margin-top:calc(7*var(--u));font-size:calc(19*var(--u));line-height:1.25}

/* programa de mano: cuatro actos */
.b-prog{margin-top:calc(58*var(--u));height:calc(540*var(--u))}
.pr-hoja{position:absolute;right:calc(-16*var(--u));top:0;width:calc(322*var(--u));height:calc(584*var(--u));transform:rotate(2.2deg)}
.pr-img{width:100%;height:100%;filter:brightness(1.14) saturate(.74) drop-shadow(calc(4*var(--u)) calc(7*var(--u)) calc(10*var(--u)) var(--sombra))}
.pr-txt{position:absolute;left:14%;right:14%;top:10.5%;bottom:17%;display:flex;flex-direction:column;align-items:center;text-align:center}
.pr-titulo{margin:0;font:italic 400 calc(38*var(--u))/1.05 var(--cursiva)}
.pr-sub{margin-top:calc(5*var(--u));font:400 max(11px,calc(11.5*var(--u)))/1.2 var(--caps);letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.actos{list-style:none;margin:calc(16*var(--u)) 0 0;padding:0;display:flex;flex-direction:column;flex:1;justify-content:space-between;width:100%}
.actos li{position:relative;padding-top:calc(13*var(--u))}
.actos li::before{content:"";position:absolute;left:50%;top:0;width:calc(26*var(--u));height:1px;margin-left:calc(-13*var(--u));background:var(--oro);opacity:.6}
.a-num{display:block;font:400 max(11px,calc(11.5*var(--u)))/1.2 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.a-que{display:block;margin-top:calc(3*var(--u));font:italic 400 calc(25*var(--u))/1.1 var(--serif)}
.a-hora{display:block;margin-top:calc(3*var(--u));font:400 calc(17*var(--u))/1.1 var(--cursiva);font-variant-numeric:lining-nums}
.pr-perlas{z-index:3;left:calc(-118*var(--u));top:calc(4*var(--u));width:calc(300*var(--u));transform:rotate(44deg);filter:brightness(1.32) saturate(.62) drop-shadow(calc(2*var(--u)) calc(3*var(--u)) calc(3*var(--u)) var(--sombra))}
.pr-rosa{z-index:4;left:calc(-52*var(--u));top:calc(350*var(--u));width:calc(200*var(--u));transform:rotate(16deg);filter:brightness(1.14) saturate(.9) drop-shadow(calc(3*var(--u)) calc(5*var(--u)) calc(6*var(--u)) var(--sombra))}

/* vestimenta: guantes y zapatos sueltos, la letra directa sobre el terciopelo */
.b-viste{margin-top:calc(54*var(--u));height:calc(470*var(--u))}
.vi-guantes{left:calc(78*var(--u));top:calc(-24*var(--u));width:calc(440*var(--u));transform:rotate(-2deg);filter:brightness(1.2) saturate(.86) drop-shadow(calc(3*var(--u)) calc(6*var(--u)) calc(8*var(--u)) var(--sombra))}
.vi-zapatos{left:calc(-34*var(--u));top:calc(232*var(--u));width:calc(214*var(--u));transform:rotate(-6deg);filter:brightness(1.12) saturate(.72) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(7*var(--u)) var(--sombra))}
.vi-txt{position:absolute;left:calc(26*var(--u));top:calc(40*var(--u));width:calc(170*var(--u));color:var(--a-letra)}
.vi-txt .et{color:var(--oro-claro)}
.vi-txt h2{margin-top:calc(8*var(--u));font:400 calc(38*var(--u))/1.05 var(--cursiva)}
.vi-txt p{margin-top:calc(9*var(--u));font-size:calc(19*var(--u));line-height:1.22}

/* dónde: la nota encima y la lámina del teatro asomando por debajo */
.b-donde{margin-top:calc(30*var(--u));padding-bottom:calc(14*var(--u))}
.do-nota{z-index:2;width:calc(322*var(--u));margin:0 auto 0 calc(22*var(--u));padding:calc(24*var(--u)) calc(24*var(--u)) calc(22*var(--u));transform:rotate(-1.2deg)}
.do-nota p{font-size:calc(18*var(--u));font-variant-numeric:lining-nums}
.do-lamina{position:relative;width:calc(450*var(--u));height:calc(337.5*var(--u));margin:calc(-44*var(--u)) 0 0 calc(-22*var(--u));transform:rotate(2deg)}
.do-lamina img{width:100%;height:100%;filter:brightness(1.1) saturate(.82) drop-shadow(calc(4*var(--u)) calc(7*var(--u)) calc(10*var(--u)) var(--sombra))}
.boton.lleno,.vienes input:checked+span{background-image:url(piezas/telon.jpg);background-blend-mode:normal;background-position:50% 30%}

/* confirma: delante del telón cerrado, con su fleco dorado */
.b-confirma{margin-top:calc(26*var(--u));padding:calc(64*var(--u)) 0 calc(86*var(--u))}
.co-telon{position:absolute;left:50%;top:0;bottom:0;width:100vw;margin-left:-50vw;background-image:url(piezas/telon.jpg);background-size:100% 100%;background-repeat:no-repeat;filter:brightness(.92) drop-shadow(0 calc(8*var(--u)) calc(10*var(--u)) var(--sombra));-webkit-mask-image:linear-gradient(transparent,#000 calc(70*var(--u)));mask-image:linear-gradient(transparent,#000 calc(70*var(--u)))}
.b-confirma .papel{width:calc(322*var(--u));margin:0 auto;padding:calc(30*var(--u)) calc(28*var(--u));text-align:center}
.co-limite{font:italic 400 calc(18*var(--u))/1.2 var(--serif);margin-top:calc(5*var(--u));font-variant-numeric:lining-nums}
.b-confirma .aviso{text-align:center}
.co-perlas{z-index:3;left:calc(-122*var(--u));top:calc(-16*var(--u));width:calc(290*var(--u));transform:rotate(-8deg);filter:brightness(1.32) saturate(.62) drop-shadow(calc(2*var(--u)) calc(3*var(--u)) calc(3*var(--u)) var(--sombra))}
.co-rosa{z-index:3;right:calc(-62*var(--u));bottom:calc(-30*var(--u));width:calc(186*var(--u));transform:rotate(-24deg);filter:brightness(1.02) saturate(.9) drop-shadow(calc(3*var(--u)) calc(5*var(--u)) calc(6*var(--u)) var(--sombra))}

/* cierre */
.b-cierre{margin-top:calc(34*var(--u));padding-top:calc(108*var(--u));text-align:center;color:var(--a-letra)}
.ci-tiara{left:50%;top:calc(-6*var(--u));width:calc(220*var(--u));margin-left:calc(-110*var(--u));filter:brightness(1.2) saturate(.85) drop-shadow(calc(2*var(--u)) calc(4*var(--u)) calc(4*var(--u)) var(--sombra))}
.ci-adios{position:relative;font:italic 400 calc(50*var(--u))/1.1 var(--cursiva)}
.ci-firma{position:relative;margin-top:calc(9*var(--u));font:400 max(11px,calc(13*var(--u)))/1.2 var(--caps);letter-spacing:.34em;text-transform:uppercase;color:var(--oro-claro)}

/* en ordenador, el sobre queda en columna sobre la tela, como la portada */
@media (min-width:640px){.js .apertura{box-shadow:0 calc(14*var(--u)) calc(34*var(--u)) var(--sombra)}}

@media (prefers-reduced-motion:reduce){
  .js .t-panel,.js .t-salon{transition:none}
  .js:not(.estatica) .t-sensor:not(.in)~.t-panel{transform:scaleX(.3)}
  .js:not(.estatica) .t-sensor:not(.in)~.t-salon{filter:none}
}