/* Baby shower de Martina: el mar en acuarela. 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. Sombras, tonos, recortes
   y movimiento van por CSS, sin tocar los archivos. */
:root{
  --suelo:#DCE9EE; --tinta:#1E3A50; --tinta-s:#3A5468; --oro:#2C5A75; --papel:#F6F3EB; --linea:rgba(30,58,80,.28); --seda:#3F6885;
  --sombra:rgba(34,58,80,.3); --pulso:rgba(44,96,110,.8); --dorso:#D6E4EA; --seda-forro:#6F97AF; --c-dentro:#EFEBE1;
  --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='%231E3A50'/></svg>");
  --azul-tinta:#22506F;
  /* geometría del sobre, medida sobre piezas/sobre.jpg */
  --s-bisagra:24.94%;
  --s-suelo:35.18%;
  --s-hueco:polygon(14.83% 24.94%,85.17% 24.94%,84.53% 26.9%,83.69% 28.27%,76.27% 32.74%,57.84% 44.11%,50% 48.93%,41.95% 44.11%,23.31% 32.86%,16.74% 28.57%,14.83% 28.39%);
  --s-dorso:polygon(14.83% 24.94%,85.17% 24.94%,84.53% 22.98%,83.69% 21.61%,76.27% 17.14%,57.84% 5.77%,50% 0.95%,41.95% 5.77%,23.31% 17.02%,16.74% 21.31%,14.83% 21.49%);
  --s-forro:polygon(18.75% 24.94%,81.25% 24.94%,50% 3.1%);
  --s-frente:polygon(14.83% 64.82%,85.17% 64.82%,85.17% 24.94%,84.53% 26.9%,83.69% 28.27%,76.27% 32.74%,57.84% 44.11%,50% 48.93%,41.95% 44.11%,23.31% 32.86%,16.74% 28.57%,14.83% 28.39%,14.83% 24.94%);
  --s-solapa:polygon(14.83% 24.94%,85.17% 24.94%,84.53% 26.9%,83.69% 28.27%,76.27% 32.74%,57.84% 44.11%,56.99% 46.13%,57.31% 47.92%,56.67% 49.29%,55.3% 50.48%,53.5% 51.31%,51.59% 51.9%,49.79% 51.85%,47.88% 51.31%,46.08% 50.71%,44.7% 50.12%,43.54% 48.93%,43.33% 47.62%,43.22% 45.83%,41.95% 44.11%,23.31% 32.86%,16.74% 28.57%,14.83% 28.39%);
  --s-baja:530; --s-x:475; --s-y:798; --s-boton:1128;
  --parche-x:475; --parche-y:830; --parche-dx:0; --parche-dy:-150; --parche-r:76; --parche-r2:116;
  /* la tarjeta en blanco de piezas/portada.jpg y dónde va la letra */
  --c-x:94; --c-y:276; --c-w:751; --c-h:728;
  --l-x:190; --l-y:350; --l-w:544; --l-h:570;
}

.fondo{background-image:url(piezas/agua.jpg)}
.hoja{padding-bottom:0}

/* ---------- imágenes del sobre ---------- */
/* el forro del sobre es la misma acuarela de las olas, ampliada: solo se ve el lavado, no el borde rasgado */
.a-hueco{background-color:#B4CAD8;background-image:url(piezas/ola-honda.png);background-size:320% auto;background-position:35% -30%}
.a-dorso::after{background-color:#DCE7ED;background-image:url(piezas/ola-azul.png);background-size:320% auto;background-position:70% -240%}
/* la solapa abierta es del mismo papel que el sobre: un trozo tranquilo de sobre.jpg, ampliado */
.a-dorso{background-image:url(piezas/sobre.jpg);background-size:250% 250%;background-position:50% 87%}
.a-frente,.a-frente::after,.a-solapa{background-image:url(piezas/sobre.jpg)}
.a-papel{filter:brightness(1.05) sepia(.14) saturate(.9)}
.a-papel::before{inset:8% 9%}
.a-papel::after{background-image:url(piezas/papel-v.png)}
.monograma{top:calc(796*var(--e));font:italic 500 calc(66*var(--e))/1 var(--serif);color:#2F5E5C;text-shadow:0 calc(1.5*var(--e)) 0 rgba(235,250,246,.6)}

/* ---------- portada ---------- */
.letra{mix-blend-mode:multiply;justify-content:center}
.l-sobre{font:400 max(11px,calc(28*var(--e)))/1.2 var(--caps);letter-spacing:.3em;text-transform:uppercase;color:var(--oro)}
.l-nombre{margin-top:calc(16*var(--e));font:400 calc(158*var(--e))/1.02 var(--cursiva);color:var(--azul-tinta)}
.l-frase{margin-top:calc(14*var(--e));font:italic 400 calc(39*var(--e))/1.14 var(--serif)}
.l-fecha{margin-top:calc(24*var(--e));font:400 max(11px,calc(28*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)}
/* el aviso de la portada cabe en el hueco entre la concha y los patucos */
.p-muestra{left:calc(50% - 22*var(--e));right:auto;width:max(calc(300*var(--e)),116px);transform:translateX(-50%);text-wrap:balance}

/* nada por debajo de 11 px, tampoco en un móvil de 320 */
.a-boton{font-size:max(11px,calc(12.5*var(--u)))}
.bajar{font-size:max(11px,calc(11.5*var(--u)))}
.cuenta small{font-size:max(11px,calc(11.5*var(--u)))}

/* ---------- papel ---------- */
.papel::before{filter:brightness(1.05) sepia(.08) drop-shadow(calc(2*var(--u)) 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)}
.boton.lleno,.vienes input:checked+span{background-image:url(piezas/agua.jpg)}

/* ---------- las olas: tiras de papel rasgado, a todo el ancho, en capas.
   Cada ola es una tira; a sus lados va la misma tira en espejo, así no se ve el empalme y llega a los bordes de cualquier pantalla.
   --fase mueve la tira en horizontal para que la misma pieza no parezca repetida. ---------- */
.ola{position:absolute;left:50%;width:calc(465*var(--u));margin-left:calc((var(--fase,0) - 232.5)*var(--u));height:calc(232*var(--u));background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;filter:drop-shadow(calc(1*var(--u)) calc(-1*var(--u)) calc(4*var(--u)) rgba(34,58,80,.32))}
.ola::before,.ola::after{content:"";position:absolute;top:0;width:40%;height:100%;background-image:inherit;background-repeat:no-repeat;background-size:250% 100%;transform:scaleX(-1)}
.ola::before{right:calc(100% - 1.5*var(--u));background-position:0 0}
.ola::after{left:calc(100% - 1.5*var(--u));background-position:100% 0}
@media (min-width:520px){.ola::before,.ola::after{width:200%;background-repeat:repeat-x;background-size:50% 100%}}
/* en pantalla ancha, una sola tira estirada: sin empalmes ni dibujos en espejo */
@media (min-width:900px){
  .ola{width:calc(100vw + 340px);margin-left:calc(-50vw - 170px + var(--fase,0)*.5*var(--u))}
  .ola::before,.ola::after{display:none}
}

/* cuánto falta: el mar se mueve */
.b-mar{padding-top:calc(44*var(--u))}
.m-cuenta{position:relative;z-index:1;width:calc(326*var(--u));margin:0 auto;text-align:center}
.mar{position:relative;isolation:isolate;height:calc(340*var(--u));margin-top:calc(-6*var(--u))}
.o-agua{top:0;z-index:1;background-image:url(piezas/ola-agua.png);animation:ola-a 13s ease-in-out infinite alternate}
.o-azul{top:calc(54*var(--u));z-index:3;background-image:url(piezas/ola-azul.png);animation:ola-b 9s ease-in-out infinite alternate}
.o-honda{top:calc(104*var(--u));height:calc(205*var(--u));z-index:4;--fase:30;background-image:url(piezas/ola-honda.png);animation:ola-c 11s ease-in-out infinite alternate}
.o-tira{top:calc(146*var(--u));z-index:5;--fase:-40;background-image:url(piezas/ola-tira.png);filter:saturate(.72) brightness(1.13) drop-shadow(calc(1*var(--u)) calc(-1*var(--u)) calc(4*var(--u)) rgba(34,58,80,.32));animation:ola-d 15s ease-in-out infinite alternate}
.barco{position:absolute;z-index:2;left:calc(185*var(--u));top:calc(8*var(--u));width:calc(190*var(--u));transform-origin:50% 62%;animation:mece 5.2s ease-in-out infinite}
.barco img{width:100%;height:auto;filter:drop-shadow(calc(2*var(--u)) calc(3*var(--u)) calc(4*var(--u)) var(--sombra))}
@keyframes ola-a{from{transform:translate3d(calc(-12*var(--u)),calc(2*var(--u)),0)}to{transform:translate3d(calc(12*var(--u)),calc(-3*var(--u)),0)}}
@keyframes ola-b{from{transform:translate3d(calc(16*var(--u)),calc(-2*var(--u)),0)}to{transform:translate3d(calc(-16*var(--u)),calc(3*var(--u)),0)}}
@keyframes ola-c{from{transform:translate3d(calc(-20*var(--u)),calc(2*var(--u)),0)}to{transform:translate3d(calc(20*var(--u)),calc(-2*var(--u)),0)}}
@keyframes ola-d{from{transform:translate3d(calc(14*var(--u)),calc(1*var(--u)),0)}to{transform:translate3d(calc(-14*var(--u)),calc(-1*var(--u)),0)}}
@keyframes mece{0%,100%{transform:translateY(calc(2*var(--u))) rotate(-5deg)}50%{transform:translateY(calc(-5*var(--u))) rotate(4.5deg)}}

/* la tarde: una taza, una nota y una botella con su consejo */
.b-tarde{margin-top:calc(-30*var(--u));height:calc(424*var(--u))}
.t-taza{z-index:2;left:calc(-44*var(--u));top:calc(-34*var(--u));width:calc(236*var(--u));transform:rotate(-7deg)}
.t-nota{position:absolute;z-index:1;left:calc(134*var(--u));top:calc(30*var(--u));width:calc(226*var(--u));padding:calc(20*var(--u)) calc(12*var(--u)) calc(22*var(--u)) calc(36*var(--u));transform:rotate(1.6deg)}
.t-consejo{position:absolute;left:calc(28*var(--u));top:calc(252*var(--u));width:calc(170*var(--u));font:italic 400 calc(25*var(--u))/1.12 var(--serif);text-wrap:balance}
.t-botella{z-index:2;left:calc(112*var(--u));top:calc(150*var(--u));width:calc(310*var(--u));transform:rotate(4deg)}

/* el programa: un hilo de algodón con una pieza en cada hora */
.b-prog{margin-top:calc(6*var(--u));height:calc(460*var(--u))}
.pr-hilo{position:absolute;left:50%;top:calc(30*var(--u));width:calc(230*var(--u));height:calc(430*var(--u));margin-left:calc(-125*var(--u));filter:drop-shadow(calc(1*var(--u)) calc(2*var(--u)) calc(2*var(--u)) var(--sombra))}
.pr-titulo{position:relative;margin:0 0 0 calc(30*var(--u));font-size:calc(32*var(--u))}
.prog{list-style:none;margin:0;padding:0}
.prog li{position:absolute;display:block}
.prog .pieza{position:absolute}
.prog b{display:block;font:400 calc(13.5*var(--u))/1.2 var(--caps);letter-spacing:.14em;color:var(--oro)}
.prog span{display:block;margin-top:calc(2*var(--u));font:italic 400 calc(24*var(--u))/1.06 var(--serif);text-wrap:balance}
.p1{left:0;top:calc(62*var(--u));width:100%}
.p1 .pieza{left:calc(66*var(--u));top:calc(-24*var(--u));width:calc(170*var(--u));transform:rotate(-10deg)}
.p1 div{position:absolute;left:calc(232*var(--u));top:calc(26*var(--u));width:calc(125*var(--u))}
.p2{left:0;top:calc(206*var(--u));width:100%}
.p2 .pieza{left:calc(172*var(--u));top:calc(-26*var(--u));width:calc(170*var(--u));transform:rotate(14deg)}
.p2 div{position:absolute;left:calc(8*var(--u));top:calc(14*var(--u));width:calc(134*var(--u));text-align:right}
.p3{left:0;top:calc(346*var(--u));width:100%}
.p3 .pieza{left:calc(90*var(--u));top:calc(-26*var(--u));width:calc(150*var(--u));transform:rotate(-8deg);filter:saturate(.72) brightness(1.06) drop-shadow(calc(2*var(--u)) calc(3*var(--u)) calc(4*var(--u)) var(--sombra))}
.p3 div{position:absolute;left:calc(240*var(--u));top:calc(20*var(--u));width:calc(120*var(--u))}

/* regalos: el tendedero. Una sola imagen, recortada por CSS en cinco capas: la cuerda quieta y cada prenda con su vaivén.
   La ropa cuelga por encima de la nota siguiente. */
.b-regalos{z-index:3;margin-top:calc(18*var(--u))}
.r-txt{position:relative;width:calc(300*var(--u));margin:0 auto;text-align:center}
.r-txt h2{font-size:calc(34*var(--u));margin-top:calc(6*var(--u))}
.r-txt p{margin-top:calc(5*var(--u))}
.tende{position:relative;width:calc(440*var(--u));height:calc(220*var(--u));margin:calc(-6*var(--u)) 0 0 calc(-34*var(--u));pointer-events:none}
.t-capa{position:absolute;inset:0;filter:drop-shadow(calc(2*var(--u)) calc(3*var(--u)) calc(3*var(--u)) var(--sombra))}
.t-capa img{width:100%;height:100%}
/* en pantallas anchas la cuerda sigue hasta los bordes */
@media (min-width:520px){
  .tende::before,.tende::after{content:"";position:absolute;width:100vw;height:calc(1.2*var(--u));background:#C2B296;box-shadow:calc(1*var(--u)) calc(2*var(--u)) calc(2*var(--u)) var(--sombra)}
  .tende::before{right:calc(100% - 1*var(--u));top:14.1%;transform-origin:100% 50%;transform:rotate(6.8deg)}
  .tende::after{left:calc(100% - 1*var(--u));top:17.1%;transform-origin:0 50%;transform:rotate(-5deg)}
}
/* medidas en píxeles de piezas/tendedero.png (1000 × 500), en porcentaje */
.t-cuerda{clip-path:polygon(0 0,100% 0,100% 18.2%,86.7% 20.6%,70% 21.8%,50% 21.6%,25% 20.8%,10% 17.6%,0 15.2%)}
.t-ropa{transform-origin:50% 19%;animation:vaiven 5.4s ease-in-out infinite}
.r1{clip-path:polygon(0 15.2%,10% 17.6%,25% 20.8%,32.5% 21%,32.5% 58%,0 58%);transform-origin:18.4% 17%}
.r2{clip-path:polygon(32.5% 21%,50% 21.6%,56% 21.7%,56% 72%,32.5% 72%);transform-origin:43.7% 18%;animation-duration:6.6s;animation-delay:-1.4s}
.r3{clip-path:polygon(56% 21.7%,70% 21.8%,76% 21.5%,76% 54%,56% 54%);transform-origin:66% 18.5%;animation-name:vaiven-b;animation-duration:4.6s;animation-delay:-.8s}
.r4{clip-path:polygon(76% 21.5%,86.7% 20.6%,100% 18.2%,100% 78%,76% 78%);transform-origin:86.7% 15%;animation-name:vaiven-b;animation-duration:5.8s;animation-delay:-2.6s}
@keyframes vaiven{0%,100%{transform:skewX(-.9deg)}50%{transform:skewX(1.1deg)}}
@keyframes vaiven-b{0%,100%{transform:skewX(-2deg)}50%{transform:skewX(2.2deg)}}

/* dónde: la nota encima de la acuarela. La casita acaba hundida en las primeras olas de «Confirma» */
.b-donde{margin-top:calc(-84*var(--u))}
.do-nota{z-index:2;width:calc(322*var(--u));margin:0 0 0 calc(22*var(--u));padding:calc(24*var(--u)) calc(24*var(--u)) calc(16*var(--u));transform:rotate(-.9deg);font-variant-numeric:lining-nums}
.do-casita{position:relative;width:calc(424*var(--u));height:auto;max-width:none;margin:calc(-30*var(--u)) 0 0 calc(-22*var(--u));transform:rotate(1.8deg);filter:brightness(1.02) saturate(.92) drop-shadow(calc(2*var(--u)) calc(5*var(--u)) calc(9*var(--u)) var(--sombra))}

/* confirma: capas de mar, una sobre otra, y el papel encima */
.b-confirma{z-index:1;margin-top:calc(-96*var(--u));padding:calc(112*var(--u)) 0 calc(104*var(--u))}
.co-capas{position:absolute;left:50%;width:100vw;margin-left:-50vw;top:0;bottom:calc(-24*var(--u));overflow:hidden}
.c1{top:0;--fase:30;background-image:url(piezas/ola-agua.png)}
.c2{top:calc(64*var(--u));--fase:-70;background-image:url(piezas/ola-azul.png)}
.c3{top:calc(150*var(--u));--fase:120;background-image:url(piezas/ola-honda.png)}
.c4{top:calc(250*var(--u));--fase:-150;background-image:url(piezas/ola-azul.png)}
.c5{top:calc(350*var(--u));--fase:60;background-image:url(piezas/ola-agua.png)}
.c6{top:calc(450*var(--u));--fase:-40;background-image:url(piezas/ola-honda.png)}
.c7{top:calc(550*var(--u));--fase:190;background-image:url(piezas/ola-azul.png)}
.c8{top:calc(650*var(--u));--fase:-120;background-image:url(piezas/ola-honda.png)}
.b-confirma .papel{z-index:1;width:calc(322*var(--u));margin:0 auto;padding:calc(34*var(--u)) calc(30*var(--u)) calc(30*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-estrella{z-index:2;right:calc(-16*var(--u));top:calc(58*var(--u));width:calc(122*var(--u));transform:rotate(34deg) scaleX(-1)}
.co-concha{z-index:2;left:calc(-30*var(--u));bottom:calc(-2*var(--u));width:calc(150*var(--u));transform:rotate(-16deg)}

/* la orilla: patucos sobre la arena, tapando las últimas capas de mar */
.b-final{z-index:3;margin-top:calc(-88*var(--u));padding-top:calc(58*var(--u));text-align:center}
.arena{position:absolute;left:50%;width:100vw;margin-left:-50vw;top:0;bottom:0;overflow:hidden}
.arena .ola{background-image:url(piezas/ola-arena.png);filter:saturate(.78) brightness(1.05) drop-shadow(calc(1*var(--u)) calc(-1*var(--u)) calc(4*var(--u)) rgba(70,56,28,.3))}
.a1{top:calc(-6*var(--u));height:calc(300*var(--u))}
.a2{top:calc(80*var(--u));height:calc(480*var(--u));--fase:-120}
.a3{top:calc(300*var(--u));height:calc(480*var(--u));--fase:90}
.f-orilla{position:relative;height:calc(186*var(--u))}
.f-patucos{left:calc(82*var(--u));top:calc(-18*var(--u));width:calc(214*var(--u));transform:rotate(-6deg);filter:drop-shadow(calc(2*var(--u)) calc(4*var(--u)) calc(5*var(--u)) rgba(70,56,28,.38))}
.f-cristal{left:calc(-26*var(--u));top:calc(70*var(--u));width:calc(130*var(--u));filter:saturate(.72) brightness(1.06) drop-shadow(calc(2*var(--u)) calc(3*var(--u)) calc(4*var(--u)) rgba(70,56,28,.34))}
.f-caracola{right:calc(-32*var(--u));top:calc(16*var(--u));width:calc(186*var(--u));transform:rotate(38deg);filter:drop-shadow(calc(2*var(--u)) calc(3*var(--u)) calc(4*var(--u)) rgba(70,56,28,.34))}
.f-adios{position:relative;margin-top:calc(2*var(--u));font:italic 400 calc(30*var(--u))/1.1 var(--serif)}
.f-adios span{font:400 calc(60*var(--u))/1 var(--cursiva);color:var(--azul-tinta);margin-right:calc(4*var(--u))}
.f-firma{position:relative;margin-top:calc(6*var(--u));font:400 max(11px,calc(13*var(--u)))/1.2 var(--caps);letter-spacing:.26em;text-transform:uppercase}
.pie{padding-bottom:calc(30*var(--u))}

@media (prefers-reduced-motion:reduce){.o-agua,.o-azul,.o-honda,.o-tira,.barco,.t-ropa{animation:none}}
.estatica .o-agua,.estatica .o-azul,.estatica .o-honda,.estatica .o-tira,.estatica .barco,.estatica .t-ropa{animation:none}