/* Boda vintage. 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:#E6D8BC; --tinta:#35392A; --tinta-s:#55583F; --oro:#6B5228; --papel:#F8F5EC; --linea:rgba(53,57,42,.24); --seda:#4C4E36;
  --sombra:rgba(72,55,24,.32); --pulso:rgba(107,82,40,.75); --dorso:#DCCDAC; --seda-forro:#6B6D4C; --c-dentro:#E2D6B8;
  --cursiva:'Pinyon Script',cursive;
  --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='%2335392A'/></svg>");
  /* geometría del sobre, medida sobre piezas/sobre.jpg */
  --s-bisagra:31.607%;
  --s-suelo:38.1%;
  --s-hueco:polygon(13.56% 31.61%,87.08% 31.61%,86.65% 32.62%,63.56% 44.82%,49.89% 50.77%,36.02% 44.23%,14.09% 32.86%);
  --s-dorso:polygon(13.56% 31.61%,87.08% 31.61%,86.65% 30.6%,63.56% 18.39%,49.89% 12.44%,36.02% 18.99%,14.09% 30.36%);
  --s-forro:polygon(17.5% 31.61%,82.3% 31.61%,49.89% 14.6%);
  --s-frente:polygon(13.56% 61.9%,87.08% 61.9%,87.08% 31.61%,86.65% 32.62%,63.56% 44.82%,49.89% 50.77%,36.02% 44.23%,14.09% 32.86%,13.56% 31.61%);
  --s-solapa:polygon(13.56% 31.61%,87.08% 31.61%,86.65% 32.62%,63.56% 44.82%,56.89% 47.74%,56.78% 49.4%,55.3% 50.95%,52.75% 51.9%,49.79% 52.26%,46.61% 51.96%,44.07% 50.95%,42.9% 49.4%,43.22% 47.62%,36.02% 44.23%,14.09% 32.86%);
  --s-baja:575; --s-x:469; --s-y:812; --s-boton:1074;
  --parche-x:478; --parche-y:825; --parche-dx:70; --parche-dy:-100; --parche-r:76; --parche-r2:116;
  /* la tarjeta en blanco de piezas/portada.jpg y dónde va la letra */
  --c-x:176; --c-y:399; --c-w:604; --c-h:808;
  --l-x:230; --l-y:492; --l-w:496; --l-h:660;
}

/* el satén suelto es más amarillo que el de la portada: se baja aquí para que sean la misma tela */
.fondo{background-image:url(piezas/saten.jpg);filter:saturate(.66) brightness(1.03)}

/* ---------- imágenes del sobre ---------- */
.a-hueco,.a-dorso::after{background-image:url(piezas/saten.jpg)}
.a-dorso{background-image:url(piezas/papel-h.png)}
.a-frente,.a-frente::after,.a-solapa{background-image:url(piezas/sobre.jpg)}
.a-papel{filter:brightness(1.08) saturate(.82)}
.a-papel::after{background-image:url(piezas/papel-v.png)}
.monograma{top:calc(809*var(--e));font:italic 500 calc(36*var(--e))/1 var(--serif);letter-spacing:.02em;color:#463310;text-shadow:0 calc(1.5*var(--e)) 0 rgba(255,236,190,.6)}

/* ---------- portada ---------- */
.p-foto{position:absolute;left:calc(709.5*var(--e));top:calc(1262*var(--e));width:calc(198*var(--e));height:calc(283*var(--e));transform:rotate(-15deg);overflow:hidden}
.p-foto img{width:100%;height:100%;object-fit:cover;object-position:62% 58%}
.p-foto::after{content:"";position:absolute;inset:0;box-shadow:inset calc(7*var(--e)) calc(9*var(--e)) calc(13*var(--e)) rgba(40,25,5,.55)}
.letra{mix-blend-mode:multiply}
.l-sobre{font:400 max(10.5px,calc(29*var(--e)))/1.2 var(--caps);letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.l-nombres{margin-top:calc(30*var(--e));font:400 calc(124*var(--e))/.98 var(--cursiva)}
.l-nombres span{display:block;margin-left:-.25em;word-spacing:-.12em}
.l-frase{margin-top:calc(26*var(--e));max-width:calc(320*var(--e));font:italic 400 calc(39*var(--e))/1.16 var(--serif);text-wrap:balance}
.l-fecha{margin-top:calc(32*var(--e));font:400 max(11px,calc(29*var(--e)))/1.2 var(--caps);letter-spacing:.16em;text-transform:uppercase}
.l-lugar{margin-top:calc(8*var(--e));font:italic 500 calc(40*var(--e))/1.15 var(--serif)}
.bajar{left:calc(50% + var(--w)*.058)}

/* ---------- papel ---------- */
.papel::before{filter:brightness(1.08) saturate(.82) drop-shadow(0 calc(5*var(--u)) calc(8*var(--u)) var(--sombra))}
.p-h::before{background-image:url(piezas/papel-h.png)}
.p-v::before{background-image:url(piezas/papel-v.png)}

/* cuánto falta */
.b-cuenta{padding-top:calc(52*var(--u))}
.b-cuenta .papel{width:calc(322*var(--u));margin:0 auto;padding:calc(100*var(--u)) calc(16*var(--u)) calc(28*var(--u));text-align:center;transform:rotate(-1.2deg)}
.lazo{z-index:2;left:50%;top:calc(-6*var(--u));width:calc(170*var(--u));margin-left:calc(-85*var(--u));transform:rotate(-4deg)}

/* el día */
.b-dia{margin-top:calc(58*var(--u));padding-bottom:calc(10*var(--u))}
.marco{position:relative;width:calc(338*var(--u));height:calc(418.7*var(--u));margin:0 auto;transform:rotate(1.6deg)}
.m-marco{position:absolute;inset:0;width:100%;height:100%;filter:saturate(.84) brightness(.95) drop-shadow(0 calc(7*var(--u)) calc(11*var(--u)) rgba(72,55,24,.38))}
.m-hueco{position:absolute;left:25.7%;top:21.1%;width:48.7%;height:56.5%;overflow:hidden}
.m-hueco img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;filter:saturate(.75) sepia(.14)}
.m-hueco::after{content:"";position:absolute;inset:0;box-shadow:inset calc(3*var(--u)) calc(4*var(--u)) calc(7*var(--u)) rgba(40,25,5,.5)}
.d-rama{z-index:3;left:calc(-38*var(--u));top:calc(262*var(--u));width:calc(160*var(--u));transform:rotate(-6deg)}
.d-cala{z-index:3;left:calc(-8*var(--u));top:calc(296*var(--u));width:calc(150*var(--u));transform:rotate(12deg);filter:saturate(.7) drop-shadow(0 calc(4*var(--u)) calc(6*var(--u)) var(--sombra))}
.d-nota{z-index:2;width:calc(296*var(--u));margin:calc(-36*var(--u)) calc(14*var(--u)) 0 auto;padding:calc(26*var(--u)) calc(24*var(--u)) calc(28*var(--u)) calc(30*var(--u));text-align:right;transform:rotate(-1.1deg)}
.d-nota::before{transform:scaleX(-1)}

/* programa sobre el encaje */
.b-prog{margin-top:calc(14*var(--u));height:calc(745*var(--u))}
.encaje{position:absolute;left:50%;top:0;width:calc(556*var(--u));height:calc(743.9*var(--u));margin-left:calc(-278*var(--u));transform:rotate(-1.4deg)}
.e-img{width:100%;height:100%;filter:sepia(.24) brightness(.97) drop-shadow(0 calc(3*var(--u)) calc(5*var(--u)) rgba(72,55,24,.3))}
.e-tarjeta{position:absolute;left:27.6%;right:27.4%;top:24.6%;bottom:24.6%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(8*var(--u)) calc(10*var(--u))}
.e-titulo{margin:0;font:400 calc(44*var(--u))/1.05 var(--cursiva)}
.prog{list-style:none;margin:calc(14*var(--u)) 0 0;padding:0;display:grid;gap:calc(10*var(--u))}
.prog b{display:block;font:400 calc(13*var(--u))/1.2 var(--caps);letter-spacing:.14em;color:var(--oro)}
.prog span{display:block;font:italic 400 calc(21*var(--u))/1.08 var(--serif);margin-top:calc(2*var(--u));text-wrap:balance}
.prog li+li{position:relative;padding-top:calc(10*var(--u))}
.prog li+li::before{content:"";position:absolute;left:50%;top:0;width:calc(24*var(--u));height:1px;margin-left:calc(-12*var(--u));background:var(--linea)}

/* la música: el surco no se mueve, gira solo la galleta del centro, como en un disco de verdad */
.b-musica{margin-top:calc(8*var(--u));min-height:calc(272*var(--u))}
.vinilo{position:absolute;right:calc(-64*var(--u));top:calc(12*var(--u));width:calc(248*var(--u));height:calc(248*var(--u))}
.v-disco{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 calc(5*var(--u)) calc(8*var(--u)) rgba(50,38,16,.45))}
.v-etiqueta{position:absolute;left:32%;top:32%;width:36%;height:36%;border-radius:50%;background:#E9DEC5 url(piezas/papel-h.png) center/260% no-repeat;overflow:hidden}
.v-gira{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--tinta);animation:gira 7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.v-gira::after{content:"";position:absolute;left:50%;top:50%;width:calc(6*var(--u));height:calc(6*var(--u));margin:calc(-3*var(--u)) 0 0 calc(-3*var(--u));border-radius:50%;background:#2E2A1E}
.v-nom{font:italic 500 calc(13*var(--u))/1 var(--serif);margin-bottom:calc(20*var(--u))}
.v-lado{font:400 calc(6.5*var(--u))/1 var(--caps);letter-spacing:.14em}
.m-txt{position:relative;width:calc(204*var(--u));padding:calc(38*var(--u)) 0 0 calc(26*var(--u))}
.m-txt .et{color:var(--tinta)}
.m-txt h2{font-size:calc(27*var(--u))}

/* dónde: mapa dibujado y una nota encima */
.b-donde{margin-top:calc(22*var(--u))}
.do-mapa{position:relative;width:calc(404*var(--u));height:calc(301.8*var(--u));margin-left:calc(-20*var(--u));transform:rotate(-1.8deg);filter:brightness(1.03) saturate(.9) drop-shadow(0 calc(5*var(--u)) calc(9*var(--u)) var(--sombra))}
.do-mapa img{width:100%;height:100%}
.do-aqui{position:absolute;left:12%;top:6%;font:400 calc(23*var(--u))/1 var(--cursiva);color:#3D2F16;white-space:nowrap}
.do-nota{z-index:2;width:calc(330*var(--u));margin:calc(-58*var(--u)) auto 0;padding:calc(26*var(--u)) calc(26*var(--u)) calc(24*var(--u));transform:rotate(.9deg)}
.do-nota::before{transform:scaleY(-1)}
.boton.lleno,.vienes input:checked+span{background-image:url(piezas/saten.jpg)}

/* vestimenta: etiqueta de papel con cordel */
.b-viste{margin-top:calc(34*var(--u));height:calc(272*var(--u))}
.v-pieza{position:absolute;left:calc(-64*var(--u));top:0;width:calc(450*var(--u));height:calc(300.2*var(--u));transform:rotate(-3deg);filter:brightness(1.1) saturate(.8) drop-shadow(0 calc(5*var(--u)) calc(8*var(--u)) var(--sombra))}
.v-img{width:100%;height:100%}
.v-txt{position:absolute;left:35%;right:9%;top:22%;bottom:29%;display:flex;flex-direction:column;justify-content:center;filter:none}
.v-txt h2{font-size:calc(27*var(--u));margin-top:calc(6*var(--u))}
.v-txt p{font-size:calc(17.5*var(--u));margin-top:calc(5*var(--u))}

/* confirma: banda de seda oliva, encaje y papel */
.b-confirma{margin-top:calc(26*var(--u));padding:calc(70*var(--u)) 0 calc(74*var(--u))}
.co-seda{position:absolute;left:50%;top:calc(14*var(--u));bottom:calc(10*var(--u));width:170vw;margin-left:-85vw;transform:rotate(-3deg);filter:drop-shadow(0 calc(5*var(--u)) calc(7*var(--u)) rgba(50,38,16,.42))}
.co-seda::before{content:"";position:absolute;inset:0;background:var(--seda) url(piezas/saten.jpg) center/cover no-repeat;background-blend-mode:multiply;clip-path:polygon(0% 1.61%,2.3% 0.97%,4.5% 1.59%,6.8% 2.26%,9.1% 1.16%,11.4% 1.16%,13.6% 2.15%,15.9% 2.34%,18.2% 1.41%,20.5% 1.39%,22.7% 1.49%,25% 0.98%,27.3% 1.19%,29.5% 1.19%,31.8% 1.92%,34.1% 2.25%,36.4% 1.63%,38.6% 2.12%,40.9% 2.36%,43.2% 1.76%,45.5% 1.32%,47.7% 1.72%,50% 2.18%,52.3% 2.21%,54.5% 2.07%,56.8% 1.8%,59.1% 1.49%,61.4% 1.65%,63.6% 1.78%,65.9% 2.31%,68.2% 1.27%,70.5% 1.43%,72.7% 1.98%,75% 1.3%,77.3% 1.63%,79.5% 1.26%,81.8% 1.11%,84.1% 2.22%,86.4% 1.24%,88.6% 1.2%,90.9% 2.32%,93.2% 2.06%,95.5% 1.52%,97.7% 1.68%,100% 1.96%,100% 98.32%,97.7% 97.72%,95.5% 98.54%,93.2% 97.93%,90.9% 98.61%,88.6% 98.63%,86.4% 98.61%,84.1% 98.52%,81.8% 98.69%,79.5% 98.2%,77.3% 98.99%,75% 97.89%,72.7% 98.47%,70.5% 97.79%,68.2% 98.46%,65.9% 98.77%,63.6% 98.1%,61.4% 98.16%,59.1% 98.2%,56.8% 97.72%,54.5% 97.67%,52.3% 98.1%,50% 99%,47.7% 98.66%,45.5% 98.26%,43.2% 98.74%,40.9% 98.51%,38.6% 98.48%,36.4% 98.76%,34.1% 98.54%,31.8% 98.36%,29.5% 97.8%,27.3% 98.1%,25% 97.85%,22.7% 98.04%,20.5% 98.38%,18.2% 98.74%,15.9% 98.02%,13.6% 98.96%,11.4% 97.98%,9.1% 98.46%,6.8% 98.7%,4.5% 99.09%,2.3% 98.9%,0% 98.44%)}
.co-encaje{position:absolute;left:50%;top:calc(-24*var(--u));width:calc(530*var(--u));height:auto;margin-left:calc(-265*var(--u));transform:rotate(3deg);pointer-events:none;filter:sepia(.24) brightness(.97) drop-shadow(0 calc(3*var(--u)) calc(5*var(--u)) rgba(30,24,10,.45))}
.b-confirma .papel{width:calc(322*var(--u));margin:0 auto;padding:calc(36*var(--u)) calc(30*var(--u)) calc(36*var(--u));text-align:center}
.co-limite{font:italic 400 calc(18*var(--u))/1.2 var(--serif);margin-top:calc(5*var(--u))}
.b-confirma .aviso{text-align:center}

/* cierre */
.b-cierre{margin-top:calc(14*var(--u));padding-top:calc(134*var(--u));text-align:center}
.c-rama{left:50%;top:calc(-46*var(--u));width:calc(130*var(--u));margin-left:calc(-92*var(--u));transform:rotate(58deg)}
.c-cala{left:50%;top:calc(-44*var(--u));width:calc(126*var(--u));margin-left:calc(-30*var(--u));transform:rotate(-62deg) scaleX(-1);filter:saturate(.7) drop-shadow(0 calc(4*var(--u)) calc(6*var(--u)) var(--sombra))}
.c-adios{position:relative;font:400 calc(52*var(--u))/1.1 var(--cursiva)}
.c-firma{position:relative;margin-top:calc(6*var(--u));font:400 max(11px,calc(12*var(--u)))/1.2 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--tinta)}

@media (prefers-reduced-motion:reduce){.v-gira{animation:none}}