/* Bautizo de lino. Muestra de MARËA Studio. Lo común está en ../receta/receta.css.
   Una mañana de domingo junto a una ventana: lino, eucalipto, encaje, nácar y plata vieja.
   Las piezas son imágenes hechas con la IA de Canva y se publican tal como salen de Canva. */
:root{
  --suelo:#ECE9E3; --tinta:#2E3633; --tinta-s:#4A5450; --oro:#55625F; --papel:#F6F4EE; --linea:rgba(46,54,51,.26); --seda:#56656C;
  --sombra:rgba(60,68,72,.30); --pulso:rgba(85,98,95,.7); --dorso:#C7CFC9; --seda-forro:#BCC8CD; --c-dentro:#EFEDE7;
  --cursiva:'Italiana','Cormorant Garamond',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='%232E3633'/></svg>");
  /* geometría del sobre, medida sobre piezas/sobre.jpg */
  --s-bisagra:31.19%;
  --s-suelo:37.2%;
  --s-hueco:polygon(11.65% 31.19%,88.67% 31.19%,88.24% 31.55%,87.5% 33.33%,86.86% 33.93%,71.19% 42.32%,55.4% 50.42%,50.11% 53.1%,45.23% 50.6%,29.24% 42.26%,13.24% 34.05%);
  --s-dorso:polygon(11.65% 31.19%,88.67% 31.19%,88.24% 30.83%,87.5% 29.05%,86.86% 28.45%,71.19% 20.06%,55.4% 11.96%,50.11% 9.29%,45.23% 11.79%,29.24% 20.12%,13.24% 28.33%);
  --s-forro:polygon(15.57% 31.19%,84.75% 31.19%,50.11% 11.43%);
  --s-frente:polygon(11.65% 62.8%,88.67% 62.8%,88.67% 31.19%,88.24% 31.55%,87.5% 33.33%,86.86% 33.93%,71.19% 42.32%,55.4% 50.42%,50.11% 53.1%,45.23% 50.6%,29.24% 42.26%,13.24% 34.05%,11.65% 31.19%);
  --s-solapa:polygon(11.65% 31.19%,88.67% 31.19%,88.24% 31.55%,87.5% 33.33%,86.86% 33.93%,71.19% 42.32%,55.51% 50.6%,55.3% 51.55%,54.66% 52.38%,53.5% 53.15%,52.12% 53.63%,50.42% 53.75%,48.94% 53.57%,47.35% 53.15%,46.19% 52.5%,45.44% 51.67%,45.23% 50.6%,29.24% 42.26%,13.24% 34.05%);
  --s-baja:540; --s-x:476; --s-y:855; --s-boton:1098;
  --parche-x:490; --parche-y:866; --parche-dx:170; --parche-dy:-60; --parche-r:78; --parche-r2:112;
  /* la tarjeta en blanco de piezas/portada.jpg y dónde va la letra */
  --c-x:13.5; --c-y:187.5; --c-w:938; --c-h:1199;
  --l-x:276; --l-y:462; --l-w:410; --l-h:620;
}

.fondo{background-image:url(piezas/tela.jpg)}

/* ---------- imágenes del sobre ---------- */
.a-hueco,.a-dorso::after{background-image:url(piezas/tela.jpg)}
.a-hueco{background-color:#B4C1C7}
.a-dorso{background-image:url(piezas/sobre.jpg);background-size:250% 250%;background-position:calc(-715*var(--e)) calc(-1194*var(--e))}
.a-frente,.a-frente::after,.a-solapa{background-image:url(piezas/sobre.jpg)}
.a-papel::before{inset:19% 25.6% 21.4% 25.2%}
.a-papel::after{background-image:url(piezas/papel-v.png)}
.monograma{top:calc(852*var(--e));font:italic 500 calc(58*var(--e))/1 var(--serif);color:#5E6863;text-shadow:0 calc(1.5*var(--e)) 0 rgba(250,249,245,.7)}

/* ---------- portada ---------- */
.letra{mix-blend-mode:multiply;justify-content:center}
.l-sobre{font:400 max(11px,calc(25*var(--e)))/1.2 var(--caps);letter-spacing:.28em;margin-right:-.28em;text-transform:uppercase;color:var(--oro)}
.l-nombres{margin-top:calc(26*var(--e));font:400 calc(164*var(--e))/1 var(--cursiva);letter-spacing:.005em}
.l-frase{margin-top:calc(30*var(--e));max-width:calc(330*var(--e));font:italic 400 calc(38*var(--e))/1.16 var(--serif);text-wrap:balance}
.l-fecha{margin-top:calc(42*var(--e));font:400 max(11px,calc(26*var(--e)))/1.2 var(--caps);letter-spacing:.18em;margin-right:-.18em;text-transform:uppercase}
.l-lugar{margin-top:calc(8*var(--e));font:italic 500 calc(39*var(--e))/1.15 var(--serif)}

/* ---------- la sombra de las hojas: una rama muy difuminada que se mueve como con brisa en la ventana ---------- */
.brisa{position:absolute;pointer-events:none;mix-blend-mode:multiply;animation:brisa-a 23s ease-in-out infinite alternate}
.brisa img{display:block;width:100%;height:auto;transform-origin:6% 2%;animation:brisa-b 17s ease-in-out infinite alternate}
@keyframes brisa-a{from{transform:translate3d(-1.2%,-.5%,0)}to{transform:translate3d(1.4%,.8%,0)}}
@keyframes brisa-b{from{transform:rotate(-1.8deg)}to{transform:rotate(2.4deg)}}
.p-brisa{left:calc(-150*var(--e));top:calc(-110*var(--e));width:calc(860*var(--e))}
.p-brisa img{opacity:.17;filter:grayscale(1) brightness(.6) blur(calc(10*var(--e)))}
.d-brisa{z-index:5;left:calc(-60*var(--u));top:calc(-70*var(--u));width:calc(360*var(--u))}
.d-brisa img{opacity:.17;filter:grayscale(1) brightness(.6) blur(calc(4*var(--u)))}
@media (prefers-reduced-motion:reduce){.brisa,.brisa img{animation:none}}

/* ---------- títulos ---------- */
.bloque{isolation:isolate}
.et{letter-spacing:.26em}
h2{font:400 calc(34*var(--u))/1.08 var(--cursiva);letter-spacing:.005em}

/* ---------- el día: marco ovalado de plata, faldón y encaje ---------- */
.b-dia{margin-top:calc(44*var(--u));height:calc(560*var(--u))}
.d-cab{position:relative;z-index:4;padding:0 0 0 calc(26*var(--u))}
.d-cab h2{width:calc(300*var(--u));margin-top:calc(10*var(--u));font-size:calc(47*var(--u));line-height:1.03}
.d-frase{width:calc(150*var(--u));margin-top:calc(26*var(--u));font:italic 400 calc(23*var(--u))/1.18 var(--serif)}
.ovalo{position:absolute;z-index:2;right:calc(-85*var(--u));top:calc(84*var(--u));width:calc(362*var(--u));height:calc(484.6*var(--u));transform:rotate(3deg)}
.o-marco{position:absolute;inset:0;width:100%;height:100%;filter:saturate(.5) brightness(1.2) drop-shadow(calc(2*var(--u)) calc(6*var(--u)) calc(9*var(--u)) var(--sombra))}
.o-hueco{position:absolute;left:28.1%;top:24.7%;width:44.1%;height:48.1%;border-radius:50%;overflow:hidden}
.o-hueco img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;filter:brightness(1.16) saturate(.8)}
.o-hueco::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset calc(3*var(--u)) calc(4*var(--u)) calc(8*var(--u)) rgba(40,45,45,.5)}
.d-encaje{z-index:1;left:calc(-70*var(--u));top:calc(392*var(--u));width:calc(560*var(--u));transform:rotate(-7deg)}
/* el filtro gira con la pieza: en las muy giradas, la sombra se calcula para que siga cayendo abajo a la derecha */
.d-ramita{z-index:3;left:calc(-14*var(--u));top:calc(318*var(--u));width:calc(190*var(--u));transform:rotate(-34deg);filter:drop-shadow(calc(-1.1*var(--u)) calc(5.3*var(--u)) calc(6*var(--u)) var(--sombra))}

/* ---------- el programa: pañuelo de lino con vainica ---------- */
.b-prog{z-index:2;margin-top:calc(26*var(--u));height:calc(420*var(--u))}
.panuelo{position:absolute;left:calc(-31*var(--u));top:0;width:calc(437*var(--u));height:calc(437*var(--u));transform:rotate(-2.4deg)}
.pa-img{width:100%;height:100%;filter:brightness(1.12) drop-shadow(calc(2*var(--u)) calc(5*var(--u)) calc(8*var(--u)) var(--sombra))}
.pa-txt{position:absolute;left:19%;right:19%;top:17%;bottom:17%;display:flex;flex-direction:column;justify-content:center}
.pa-txt h2{margin:0;font-size:calc(40*var(--u))}
.prog{list-style:none;margin:calc(22*var(--u)) 0 0;padding:0}
.prog li{display:grid;grid-template-columns:calc(100*var(--u)) 1fr;align-items:baseline;padding:calc(18*var(--u)) 0;border-top:1px dotted var(--tinta-s)}
.prog b{font:300 calc(40*var(--u))/1 var(--serif);font-variant-numeric:lining-nums}
.prog span{font:italic 400 calc(24*var(--u))/1.12 var(--serif);text-wrap:balance}
.pa-cinta{z-index:1;left:calc(150*var(--u));top:calc(330*var(--u));width:calc(330*var(--u));transform:rotate(-8deg);filter:brightness(1.22) saturate(.9) drop-shadow(0 calc(3*var(--u)) calc(5*var(--u)) var(--sombra))}

/* ---------- cuánto falta: papel rasgado y la concha encima, con la cinta del pañuelo cayéndole ---------- */
.b-cuenta{z-index:1;margin-top:calc(52*var(--u))}
.b-cuenta .papel{width:calc(322*var(--u));margin:0 auto 0 calc(18*var(--u));padding:calc(20*var(--u)) calc(24*var(--u)) calc(20*var(--u));transform:rotate(-1.2deg)}
.p-h::before{background-image:url(piezas/papel-h.png);inset:-40.3% -33.3% -43.1% -33.3%;filter:drop-shadow(calc(2*var(--u)) calc(5*var(--u)) calc(8*var(--u)) var(--sombra))}
.cu-concha{z-index:1;right:calc(-30*var(--u));top:calc(-92*var(--u));width:calc(170*var(--u));transform:rotate(16deg);filter:brightness(1.12) drop-shadow(calc(2*var(--u)) calc(5*var(--u)) calc(7*var(--u)) var(--sombra))}
.cuenta{margin-top:calc(14*var(--u));grid-template-columns:1.3fr 1fr 1fr .72fr}
.cuenta b{font:300 calc(46*var(--u))/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.cuenta div{border-left:0;padding:0}

/* ---------- dónde: la lámina con su pie ---------- */
.b-donde{margin-top:calc(30*var(--u))}
.lamina{position:relative;width:calc(418*var(--u));height:calc(559.2*var(--u));margin-left:calc(-21.5*var(--u));transform:rotate(-1.6deg)}
.la-img{width:100%;height:100%;filter:brightness(1.07) saturate(.82) drop-shadow(calc(2*var(--u)) calc(5*var(--u)) calc(8*var(--u)) var(--sombra))}
.la-txt{position:absolute;left:14%;right:14%;top:70.5%;bottom:8%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;mix-blend-mode:multiply}
.la-txt h2{margin-top:calc(7*var(--u));font-size:calc(31*var(--u))}
.la-txt p{margin-top:calc(5*var(--u));font:italic 400 calc(18.5*var(--u))/1.2 var(--serif);font-variant-numeric:lining-nums}
.do-ramita{z-index:2;left:calc(-26*var(--u));top:calc(-44*var(--u));width:calc(170*var(--u));transform:rotate(-146deg);filter:drop-shadow(calc(-4.4*var(--u)) calc(-3*var(--u)) calc(6*var(--u)) var(--sombra))}
.do-acciones{position:relative;margin-top:calc(-2*var(--u));padding:0 calc(24*var(--u));text-align:center}
.do-acciones .botones{justify-content:center}
.boton.lleno,.vienes input:checked+span{background-image:url(piezas/tela.jpg)}

/* ---------- confirma: papel de algodón sobre el encaje ---------- */
.b-confirma{margin-top:calc(46*var(--u));padding:calc(58*var(--u)) 0 calc(62*var(--u))}
.p-v::before{background-image:url(piezas/papel-v.png);inset:-29.8% -48.8% -33.9% -48.8%;filter:drop-shadow(calc(2*var(--u)) calc(6*var(--u)) calc(9*var(--u)) var(--sombra))}
.co-encaje{position:absolute;left:50%;height:auto;width:calc(640*var(--u));margin-left:calc(-320*var(--u));pointer-events:none;filter:drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) var(--sombra))}
.co-e1{top:calc(-100*var(--u));transform:rotate(177deg);filter:drop-shadow(calc(-.8*var(--u)) calc(-3*var(--u)) calc(3*var(--u)) var(--sombra))}
.co-e2{bottom:calc(-94*var(--u));transform:rotate(-2.5deg)}
.co-cinta{right:calc(-74*var(--u));top:calc(-10*var(--u));width:calc(300*var(--u));transform:rotate(24deg);filter:brightness(1.22) saturate(.9) drop-shadow(calc(2.6*var(--u)) calc(2.1*var(--u)) calc(5*var(--u)) var(--sombra))}
.b-confirma .papel{width:calc(322*var(--u));margin:0 auto;padding:calc(30*var(--u)) calc(28*var(--u)) calc(30*var(--u));text-align:center;transform:rotate(.7deg)}
.co-limite{font:italic 400 calc(18*var(--u))/1.2 var(--serif);font-variant-numeric:lining-nums;margin-top:calc(6*var(--u))}
.b-confirma .aviso{text-align:center}

/* ---------- cierre: la corona ---------- */
.b-cierre{margin-top:calc(30*var(--u));height:calc(470*var(--u))}
.c-corona{position:absolute;left:50%;top:0;width:calc(520*var(--u));height:calc(520*var(--u));margin-left:calc(-260*var(--u));filter:drop-shadow(calc(2*var(--u)) calc(5*var(--u)) calc(6*var(--u)) var(--sombra));max-width:none}
.c-txt{position:absolute;left:50%;top:calc(260*var(--u));transform:translate(-50%,-50%);width:calc(220*var(--u));text-align:center}
.c-adios{font:400 calc(40*var(--u))/1.06 var(--cursiva)}
.c-firma{margin-top:calc(12*var(--u));font:400 max(11px,calc(11.5*var(--u)))/1.3 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta)}