/* Cumple infantil «Globos». 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.
   Taller de papel en una mañana de sol: toda la luz viene de arriba a la izquierda, también las sombras de CSS. */
:root{
  --suelo:#87A3B4; --tinta:#1F2A33; --tinta-s:#34414C; --oro:#4A2F10; --papel:#F6EFDF; --linea:rgba(31,42,51,.28); --seda:#CDB6B0;
  --sombra:rgba(26,40,58,.38); --pulso:rgba(74,47,16,.8); --dorso:#B4925F; --seda-forro:#EFDDD6; --c-dentro:#E2DBCE;
  --sobre-seda:#FBF5E8; --rojo:#A03A33; --crema:#FBF5E8;
  --cursiva:'Fredoka',system-ui,sans-serif;
  --serif:'Fredoka',system-ui,sans-serif;
  --caps:'Fredoka',system-ui,sans-serif;
  --flecha:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%231F2A33' stroke-width='2' stroke-linecap='round'/></svg>");
  --p-niebla:0px;
  /* geometría del sobre, medida sobre piezas/sobre.jpg */
  --s-bisagra:27.917%;
  --s-suelo:33.33%;
  --s-hueco:polygon(15.04% 27.92%,85.49% 27.92%,85.38% 28.04%,84.85% 29.17%,84.53% 30.18%,83.9% 31.07%,82.84% 31.73%,81.57% 32.56%,80.3% 33.15%,78.6% 34.17%,74.15% 36.9%,67.06% 41.49%,60.06% 45.24%,50.64% 50.83%,42.37% 46.01%,34.64% 41.85%,27.54% 37.32%,22.25% 34.17%,19.92% 32.86%,18.33% 31.96%,16.74% 31.07%,16% 30.06%,15.57% 29.05%,15.04% 27.98%);
  --s-dorso:polygon(15.04% 27.92%,85.49% 27.92%,85.38% 27.8%,84.85% 26.67%,84.53% 25.65%,83.9% 24.76%,82.84% 24.11%,81.57% 23.27%,80.3% 22.68%,78.6% 21.67%,74.15% 18.93%,67.06% 14.35%,60.06% 10.6%,50.64% 5%,42.37% 9.82%,34.64% 13.99%,27.54% 18.51%,22.25% 21.67%,19.92% 22.98%,18.33% 23.87%,16.74% 24.76%,16% 25.77%,15.57% 26.79%,15.04% 27.86%);
  --s-forro:polygon(18.96% 27.92%,81.57% 27.92%,50.64% 7.14%);
  --s-frente:polygon(15.04% 66.67%,85.49% 66.67%,85.49% 27.92%,85.38% 28.04%,84.85% 29.17%,84.53% 30.18%,83.9% 31.07%,82.84% 31.73%,81.57% 32.56%,80.3% 33.15%,78.6% 34.17%,74.15% 36.9%,67.06% 41.49%,60.06% 45.24%,50.64% 50.83%,42.37% 46.01%,34.64% 41.85%,27.54% 37.32%,22.25% 34.17%,19.92% 32.86%,18.33% 31.96%,16.74% 31.07%,16% 30.06%,15.57% 29.05%,15.04% 27.98%,15.04% 27.92%);
  --s-solapa:polygon(15.04% 27.92%,85.49% 27.92%,85.38% 28.04%,84.85% 29.17%,84.53% 30.18%,83.9% 31.07%,82.84% 31.73%,81.57% 32.56%,80.3% 33.15%,78.6% 34.17%,74.15% 36.9%,67.06% 41.49%,60.06% 45.24%,57.42% 46.37%,58.05% 47.56%,58.05% 48.81%,57.2% 50.36%,55.3% 51.61%,52.86% 52.5%,50.11% 52.74%,47.35% 52.5%,44.92% 51.61%,43.01% 50.36%,42.16% 48.81%,42.16% 47.56%,42.9% 46.37%,34.64% 41.85%,27.54% 37.32%,22.25% 34.17%,19.92% 32.86%,18.33% 31.96%,16.74% 31.07%,16% 30.06%,15.57% 29.05%,15.04% 27.98%);
  --s-baja:420; --s-x:473; --s-y:811; --s-boton:1178;
  --parche-x:474; --parche-y:826; --parche-dx:0; --parche-dy:-170; --parche-r:84; --parche-r2:122;
  /* la tarjeta en blanco de piezas/portada.jpg y dónde va la letra */
  --c-x:188; --c-y:462; --c-w:573; --c-h:664;
  --l-x:226; --l-y:486; --l-w:497; --l-h:616;
  /* borde rasgado del final de la portada */
  --rasgado:polygon(0 0,100% 0,100% 99.53%,98.7% 99.19%,97.7% 99.08%,97.1% 99.03%,95.7% 99.04%,94.2% 99.18%,93% 99.02%,92.4% 98.92%,90.8% 98.88%,89.6% 98.99%,88.2% 99.32%,87.5% 99.42%,86.4% 99.41%,85.6% 99.45%,84.6% 99.42%,83.1% 99.45%,81.7% 99.61%,80.7% 99.58%,79.1% 99.4%,77.5% 99.11%,76.5% 99.09%,75.1% 99.07%,73.5% 99.16%,72.1% 98.98%,71.6% 98.9%,70.7% 98.92%,69.4% 98.96%,68.5% 99.28%,67% 99.43%,65.4% 99.38%,63.7% 99.36%,63% 99.44%,62.2% 99.5%,61.6% 99.63%,60.8% 99.69%,59.2% 99.43%,58.2% 99.26%,57.2% 99.03%,56.4% 98.95%,54.8% 99.18%,53.1% 99.21%,52.5% 99.13%,51.9% 99.08%,50.5% 98.82%,49.2% 99.02%,48.2% 99.16%,46.5% 99.53%,44.8% 99.41%,43.3% 99.36%,41.8% 99.57%,40.4% 99.58%,39.2% 99.43%,37.8% 99.16%,36.6% 99.1%,35.3% 99.07%,34.7% 99.14%,33.7% 99.2%,32.9% 99.21%,31.4% 98.89%,29.9% 98.86%,28.7% 99.01%,27.4% 99.25%,26.7% 99.35%,26.1% 99.51%,24.9% 99.42%,23.7% 99.32%,23.1% 99.4%,22% 99.42%,20.5% 99.59%,19.2% 99.59%,18% 99.39%,17.4% 99.12%,16.3% 99.12%,14.8% 99.12%,14% 99.11%,12.3% 99.14%,11.7% 99.01%,10.5% 98.98%,9.6% 98.99%,8.1% 99.2%,7.3% 99.31%,6.4% 99.43%,5.8% 99.48%,4.8% 99.38%,3.9% 99.34%,3.4% 99.31%,2.8% 99.41%,1.2% 99.5%,0.2% 99.51%,0 99.3%);
  --rasgado-b:polygon(0 0,100% 0,100% 99.91%,98.7% 99.5%,97.7% 99.33%,97.1% 99.23%,95.7% 99.12%,94.2% 99.27%,93% 99.31%,92.4% 99.26%,90.8% 99.24%,89.6% 99.31%,88.2% 99.67%,87.5% 99.67%,86.4% 99.64%,85.6% 99.59%,84.6% 99.49%,83.1% 99.56%,81.7% 99.87%,80.7% 99.97%,79.1% 99.78%,77.5% 99.46%,76.5% 99.3%,75.1% 99.16%,73.5% 99.33%,72.1% 99.15%,71.6% 99.1%,70.7% 99.14%,69.4% 99.32%,68.5% 99.64%,67% 99.72%,65.4% 99.66%,63.7% 99.48%,63% 99.59%,62.2% 99.62%,61.6% 99.72%,60.8% 99.85%,59.2% 99.67%,58.2% 99.68%,57.2% 99.41%,56.4% 99.24%,54.8% 99.51%,53.1% 99.36%,52.5% 99.3%,51.9% 99.19%,50.5% 99.02%,49.2% 99.19%,48.2% 99.5%,46.5% 99.84%,44.8% 99.75%,43.3% 99.57%,41.8% 99.74%,40.4% 99.72%,39.2% 99.53%,37.8% 99.37%,36.6% 99.42%,35.3% 99.45%,34.7% 99.53%,33.7% 99.59%,32.9% 99.44%,31.4% 99.05%,29.9% 98.92%,28.7% 99.2%,27.4% 99.48%,26.7% 99.59%,26.1% 99.88%,24.9% 99.7%,23.7% 99.74%,23.1% 99.8%,22% 99.65%,20.5% 99.76%,19.2% 99.66%,18% 99.56%,17.4% 99.27%,16.3% 99.34%,14.8% 99.47%,14% 99.4%,12.3% 99.5%,11.7% 99.37%,10.5% 99.22%,9.6% 99.23%,8.1% 99.33%,7.3% 99.39%,6.4% 99.61%,5.8% 99.63%,4.8% 99.6%,3.9% 99.7%,3.4% 99.71%,2.8% 99.82%,1.2% 99.85%,0.2% 99.76%,0 99.6%);
}

/* la cartulina se aclara un punto para que la letra se lea con holgura */
.fondo{background-image:url(piezas/cielo.jpg);filter:brightness(1.08)}

/* Fredoka no tiene cursiva: nada de inclinaciones falsas, ni versalitas espaciadas */
body{font-size:calc(18.5*var(--u));line-height:1.3}
h2{font:600 calc(31*var(--u))/1.1 var(--caps);margin-top:calc(5*var(--u));text-wrap:balance}
h2+p{margin-top:calc(7*var(--u))}
.et{font:600 max(12px,calc(14.5*var(--u)))/1.2 var(--caps);letter-spacing:.01em;text-transform:none;color:var(--oro)}

/* ---------- imágenes del sobre ---------- */
.a-hueco,.a-dorso::after{background-image:url(piezas/seda.jpg);filter:saturate(.8)}
.a-dorso{background-image:url(piezas/papel-h.png)}
.a-frente,.a-frente::after,.a-solapa{background-image:url(piezas/sobre.jpg)}
/* la carta es la misma tarjeta de la portada: encaja al desaparecer el sobre */
.a-papel{filter:drop-shadow(0 calc(-3*var(--e)) calc(12*var(--e)) rgba(40,30,20,.4))}
.a-papel::before{display:none}
.a-papel::after{background-image:url(piezas/portada.jpg);background-size:calc(944*var(--e)) calc(1680*var(--e));background-position:calc(var(--c-x)*-1*var(--e)) calc(var(--c-y)*-1*var(--e))}
/* la tarjeta de la portada queda casi a la altura de la bisagra: sube un poco más, sale del sobre y se posa */
.sacando .a-carta{transform:translateY(calc(-124*var(--e)));transition:transform .84s cubic-bezier(.22,.7,.2,1)}
.posada .a-carta,.fuera .a-carta{transform:none;transition:transform .36s cubic-bezier(.35,.1,.3,1)}
.monograma{font:600 calc(104*var(--e))/1 var(--caps);color:#5A390B;text-shadow:0 calc(2*var(--e)) 0 rgba(255,226,150,.55)}
.a-boton{min-height:44px;font:600 calc(19*var(--u))/1.2 var(--caps);letter-spacing:0;text-transform:none}
.a-muestra,.p-muestra{letter-spacing:.01em}

/* ---------- portada ---------- */
.p-sombra{position:absolute;inset:0;filter:drop-shadow(0 calc(4*var(--u)) calc(5*var(--u)) var(--sombra))}
.p-sombra::before{content:"";position:absolute;inset:0;background:#EFE8D6;clip-path:var(--rasgado-b)}
.p-marco{clip-path:var(--rasgado)}
.letra{mix-blend-mode:multiply;justify-content:center}
.l-sobre{font:600 calc(44*var(--e))/1.15 var(--caps)}
.l-nombre{margin-top:calc(-4*var(--e));font:600 calc(236*var(--e))/1 var(--caps);color:var(--rojo)}
.l-frase{margin-top:calc(-2*var(--e));max-width:calc(450*var(--e));font:400 calc(44*var(--e))/1.16 var(--caps);text-wrap:balance}
.l-fecha{margin-top:calc(26*var(--e));font:600 calc(43*var(--e))/1.18 var(--caps)}
.l-lugar{margin-top:calc(4*var(--e));font:400 calc(42*var(--e))/1.18 var(--caps)}
.p-muestra{top:calc(50% + 310*var(--e));padding:0 calc(24*var(--u))}
.bajar{font:600 calc(15*var(--u))/1 var(--caps);letter-spacing:.02em;text-transform:none;color:var(--crema);text-shadow:0 1px calc(3*var(--u)) rgba(24,32,18,.55)}

/* ---------- papeles ---------- */
.papel::before{filter:drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(7*var(--u)) var(--sombra))}
/* el recorte de Canva lleva aire alrededor: el papel de verdad queda justo en la caja del texto */
.p-h::before{background-image:url(piezas/papel-h.png);left:-16.5%;right:-16.8%;top:-28.6%;bottom:-35.9%;filter:brightness(1.14) saturate(.9) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(7*var(--u)) var(--sombra))}
.p-v::before{background-image:url(piezas/papel-v.png);left:-17.4%;right:-17.4%;top:-13.8%;bottom:-14.4%;filter:brightness(1.1) saturate(.82) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(7*var(--u)) var(--sombra))}

/* ---------- lápices de cera: un solo archivo, cada cera con su recorte ---------- */
.cera{position:absolute;display:block;pointer-events:none;background-image:url(piezas/ceras.png);background-repeat:no-repeat;background-size:calc(640*var(--k)) calc(427*var(--k));filter:drop-shadow(calc(3*var(--u)) calc(4*var(--u)) calc(4*var(--u)) var(--sombra))}
.cera-mostaza{--k:calc(.6*var(--u));width:calc(170*var(--k));height:calc(147*var(--k));background-position:calc(-96*var(--k)) calc(-49*var(--k))}
.cera-roja{--k:calc(.6*var(--u));width:calc(156*var(--k));height:calc(136*var(--k));background-position:calc(-262*var(--k)) calc(-38*var(--k))}
.cera-azul{--k:calc(.62*var(--u));width:calc(134*var(--k));height:calc(182*var(--k));background-position:calc(-448*var(--k)) calc(-92*var(--k))}
.cera-verde{--k:calc(.62*var(--u));width:calc(186*var(--k));height:calc(133*var(--k));background-position:calc(-76*var(--k)) calc(-211*var(--k))}

/* ---------- cuánto falta: cubos de madera sueltos sobre la cartulina ---------- */
.b-cuenta{padding-top:calc(26*var(--u))}
.cu-titulo{position:relative;z-index:2;margin:0 0 0 calc(22*var(--u));font-size:calc(34*var(--u))}
.b-cuenta{z-index:3}
.cu-globo{z-index:1;right:calc(-22*var(--u));top:calc(-78*var(--u));width:calc(152*var(--u))}
.cuenta{position:relative;z-index:2;display:block;height:calc(246*var(--u));margin:0}
.cuenta .cubo{position:absolute;isolation:isolate;width:var(--t);height:calc(var(--t)*1.0389);padding:calc(var(--t)*.1) 0 0;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.cubo::before{content:"";position:absolute;inset:0;z-index:-1;background-image:url(piezas/cubos.png);background-repeat:no-repeat;background-size:calc(var(--t)*5) calc(var(--t)*2.5);filter:brightness(1.1) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(6*var(--u)) var(--sombra))}
.cuenta .cubo b{font:600 calc(var(--t)*.37)/1 var(--caps);color:inherit}
.cuenta .cubo small{margin-top:calc(var(--t)*.015);font:600 max(11px,calc(var(--t)*.125))/1 var(--caps);letter-spacing:0;text-transform:none;color:inherit}
.cu-d{--t:calc(150*var(--u));left:calc(16*var(--u));top:calc(40*var(--u));transform:rotate(-5deg)}
.cu-d::before{background-position:calc(var(--t)*-1.4333) calc(var(--t)*-.7111)}
.cu-h{--t:calc(112*var(--u));left:calc(166*var(--u));top:calc(8*var(--u));transform:rotate(4deg)}
.cu-h::before{background-position:calc(var(--t)*-.3333) calc(var(--t)*-.7111)}
.cu-m{--t:calc(104*var(--u));left:calc(162*var(--u));top:calc(126*var(--u));transform:rotate(-3deg)}
.cu-m::before{background-position:calc(var(--t)*-2.5556) calc(var(--t)*-.7111)}
.cu-s{--t:calc(96*var(--u));left:calc(268*var(--u));top:calc(112*var(--u));transform:rotate(7deg);color:var(--crema)}
.cu-s::before{background-position:calc(var(--t)*-3.6667) calc(var(--t)*-.7111)}
.b-cuenta .cera-roja{z-index:3;left:calc(8*var(--u));top:calc(226*var(--u));transform:rotate(-20deg)}

/* ---------- la fiesta: kraft rasgado y unas botas que han pisado de verdad ---------- */
.b-fiesta{z-index:2;margin-top:calc(22*var(--u));min-height:calc(352*var(--u))}
.f-nota{z-index:1;width:calc(310*var(--u));margin-left:calc(40*var(--u));padding:calc(25*var(--u)) calc(24*var(--u)) calc(30*var(--u));transform:rotate(-2.2deg)}
.f-nota h2{font-size:calc(33*var(--u))}
.f-nota p{font-size:calc(18.5*var(--u));line-height:1.22;text-wrap:balance}
.f-botas{z-index:2;left:calc(-2*var(--u));top:calc(150*var(--u));width:calc(226*var(--u));transform:rotate(-4deg);filter:drop-shadow(calc(5*var(--u)) calc(8*var(--u)) calc(8*var(--u)) var(--sombra))}

/* ---------- el programa: un camino de puntos que sube de nube en nube ---------- */
.b-prog{z-index:1;margin-top:calc(-104*var(--u));height:calc(652*var(--u))}
.pr-titulo{position:absolute;z-index:2;left:calc(22*var(--u));top:calc(112*var(--u));margin:0;font-size:calc(32*var(--u));white-space:nowrap}
.pr-globo{z-index:1;left:calc(238*var(--u));top:calc(-88*var(--u));width:calc(140*var(--u))}
.pr-camino{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pr-trazo{stroke:var(--rojo)}
.pr-mascara{stroke-dasharray:1}
.espera .pr-mascara{stroke-dashoffset:1}
.dibuja .pr-mascara{stroke-dashoffset:1;animation:traza 3.4s ease-in-out .15s forwards}
@keyframes traza{to{stroke-dashoffset:0}}
.pr-suelo{position:absolute;z-index:1;left:50%;top:calc(520*var(--u));width:calc(470*var(--u));height:calc(132*var(--u));margin-left:calc(-235*var(--u));filter:drop-shadow(calc(3*var(--u)) calc(4*var(--u)) calc(5*var(--u)) var(--sombra))}
.pr-suelo img{position:absolute;left:0;top:calc(-66.5*var(--u));width:100%;height:auto;clip-path:polygon(2.4% 0,97.6% 0,98.04% 30%,97.53% 32.8%,97.86% 35.5%,97.59% 38.5%,97.89% 42.3%,97.59% 45.5%,97.5% 48.1%,97.86% 50.6%,97.54% 53.1%,97.5% 55.3%,98.08% 57.3%,97.64% 60%,97.6% 61.8%,98.01% 64.1%,97.54% 67.7%,97.95% 70.7%,97.69% 73.4%,97.61% 76.2%,97.76% 79.5%,97.43% 81.2%,97.4% 82.21%,96.9% 82.19%,95.7% 82.29%,95.2% 82.48%,94% 82.79%,93.4% 82.68%,92.8% 82.71%,92.2% 82.8%,91.6% 82.76%,90.5% 82.98%,89.8% 83.39%,89.1% 83.31%,88.5% 83.39%,87.4% 83.5%,86.2% 83.14%,85.5% 82.92%,84.6% 83.2%,83.9% 82.97%,82.8% 82.97%,82.4% 82.78%,81.2% 82.36%,80% 82.29%,79% 82.46%,78% 82.6%,77.2% 82.89%,76.4% 82.61%,75.7% 82.68%,75.3% 82.49%,74.1% 82.67%,73.6% 83.12%,72.8% 83.18%,72.2% 83.33%,71.6% 83.67%,70.7% 83.23%,70.2% 83.1%,69.7% 82.95%,68.7% 83.1%,67.7% 82.98%,67.2% 83.25%,66.4% 83.22%,65.5% 82.94%,64.6% 82.44%,63.9% 82.26%,63.4% 82.44%,62.2% 82.38%,61.6% 82.72%,61% 82.64%,59.9% 82.82%,58.7% 82.71%,57.9% 82.71%,56.7% 83.05%,56.1% 83.2%,55% 83.45%,54.3% 83.44%,53% 83.25%,52.6% 82.94%,51.6% 83.03%,50.9% 83.26%,49.9% 83.11%,48.8% 83.07%,47.6% 82.53%,47% 82.46%,45.7% 82.36%,44.5% 82.69%,44.1% 82.88%,43.4% 82.63%,42.7% 82.72%,41.6% 82.38%,40.8% 82.61%,40% 83.15%,38.9% 83.39%,37.6% 83.25%,36.9% 83.09%,36.3% 83.23%,35.1% 83.24%,34.6% 83.21%,34.1% 83.28%,33% 83.15%,32.3% 82.98%,31.6% 82.75%,30.7% 82.59%,29.8% 82.2%,28.8% 82.6%,27.5% 82.84%,26.6% 82.62%,25.9% 82.54%,24.7% 82.61%,23.5% 82.9%,22.5% 83.16%,21.5% 83.59%,20.9% 83.25%,20% 83.03%,18.8% 83.09%,18.3% 83.16%,17.8% 83.21%,16.8% 83.19%,15.6% 83.24%,14.7% 82.9%,13.5% 82.54%,12.7% 82.38%,12.2% 82.44%,11.5% 82.66%,10.6% 82.77%,9.3% 82.51%,8.3% 82.38%,7.4% 82.55%,6.3% 83%,5.6% 83.26%,4.9% 83.4%,4.3% 83.24%,3.2% 83.1%,2.44% 82%,2.14% 79%,2.16% 76.3%,2.31% 74.1%,2.51% 71.1%,1.94% 68%,2.6% 64.6%,2.1% 61%,1.95% 58.5%,2.6% 55.6%,2.28% 51.9%,2.23% 48.2%,2.6% 45.5%,2.01% 42.6%,2.16% 39.6%,2.51% 36.4%,2.16% 33.2%,2.11% 30.5%)}
.pr-tren{z-index:3;left:calc(150*var(--u));top:calc(548*var(--u));width:calc(226*var(--u));filter:brightness(1.04) drop-shadow(calc(3*var(--u)) calc(5*var(--u)) calc(5*var(--u)) rgba(26,40,30,.5))}
.pr-salida{position:absolute;z-index:3;left:calc(16*var(--u));top:calc(628*var(--u));font:600 max(12px,calc(15*var(--u)))/1.1 var(--caps);white-space:nowrap}
.pr-paradas{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.pr-paradas li{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.espera .pr-paradas li{opacity:0;transform:translateY(calc(10*var(--u))) scale(.95)}
.dibuja .pr-p1{transition-delay:.1s}
.dibuja .pr-p2{transition-delay:1.2s}
.dibuja .pr-p3{transition-delay:1.85s}
.dibuja .pr-p4{transition-delay:2.55s}
/* dos nubes distintas: la ancha (a) y la lobulada (b). Sus medidas salen de la caja del recorte, para que li sea justo la nube */
.pr-p1,.pr-p3{width:calc(206*var(--u));height:calc(102.4*var(--u))}
.pr-p2,.pr-p4{width:calc(190*var(--u));height:calc(111.4*var(--u))}
.pr-p1{left:calc(8*var(--u));top:calc(444*var(--u))}
.pr-p2{left:calc(178*var(--u));top:calc(330*var(--u))}
.pr-p3{left:calc(6*var(--u));top:calc(218*var(--u))}
.pr-p4{left:calc(178*var(--u));top:calc(102*var(--u))}
.pr-nube{position:absolute;height:auto;max-width:none;filter:brightness(1.16) saturate(.82) drop-shadow(calc(3*var(--u)) calc(5*var(--u)) calc(5*var(--u)) var(--sombra))}
.pr-p1 .pr-nube,.pr-p3 .pr-nube{left:calc(-41.1*var(--u));top:calc(-42.2*var(--u));width:calc(289.3*var(--u))}
.pr-p2 .pr-nube,.pr-p4 .pr-nube{left:calc(-54.2*var(--u));top:calc(-40.5*var(--u));width:calc(297.8*var(--u))}
.pr-p1 .pr-nube{transform:rotate(-1.5deg)}
.pr-p2 .pr-nube{transform:rotate(2deg)}
.pr-p3 .pr-nube{transform:rotate(1.5deg)}
.pr-p4 .pr-nube{transform:rotate(-2.5deg)}
.pr-txt{position:relative;padding-top:calc(10*var(--u));max-width:calc(136*var(--u))}
.pr-txt b{display:block;font:600 calc(23*var(--u))/1.05 var(--caps);color:var(--rojo)}
.pr-txt span{display:block;margin-top:calc(1*var(--u));font:400 calc(17.5*var(--u))/1.12 var(--caps);text-wrap:balance}

/* ---------- la tarta: su momento propio. Las velas se soplan de verdad con el dedo ---------- */
.b-tarta{margin-top:calc(22*var(--u));padding-top:calc(486*var(--u))}
.t-banderines{left:50%;top:calc(-18*var(--u));width:calc(500*var(--u));margin-left:calc(-250*var(--u));transform:rotate(-1.5deg)}
.t-avisos{position:absolute;z-index:3;left:0;right:0;top:calc(172*var(--u));min-height:calc(48*var(--u));display:grid;place-items:center;text-align:center;pointer-events:none}
.t-avisos>*{grid-area:1/1}
.t-pista{font:600 calc(21*var(--u))/1.15 var(--caps);transition:opacity .3s ease}
.t-deseo{font:600 calc(38*var(--u))/1.1 var(--caps);color:var(--tinta);min-height:1em}
.js .t-deseo{opacity:0;transform:scale(.82);transition:opacity .45s ease,transform .55s cubic-bezier(.2,1.3,.4,1)}
.js .soplada .t-deseo,.estatica .t-deseo{opacity:1;transform:none}
.soplada .t-pista,.estatica .t-pista{opacity:0}
html:not(.js) .t-pista{display:none}
.t-boton{position:absolute;z-index:2;left:50%;top:calc(196*var(--u));width:calc(356*var(--u));height:calc(356*var(--u));margin-left:calc(-178*var(--u));padding:0;border:0;background:none;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.t-boton:focus-visible{outline:2px solid var(--oro);outline-offset:calc(-34*var(--u));border-radius:50%}
.t-img{width:100%;height:100%;filter:saturate(.86) drop-shadow(calc(7*var(--u)) calc(10*var(--u)) calc(10*var(--u)) var(--sombra))}
.vela{position:absolute;display:block;width:0;height:0}
.vela i{position:absolute;display:block}
/* la llama: un cuerpo anaranjado de punta estrecha, el corazón claro dentro y el resplandor alrededor */
.llama{left:calc(-5.5*var(--u));bottom:calc(-3*var(--u));width:calc(11*var(--u));height:calc(27*var(--u));transform-origin:50% 88%;border-radius:50% 50% 50% 50%/82% 82% 26% 26%;background:linear-gradient(#F3A63E,#F9C860 46%,#FFE29A 78%,#FFEFC4);filter:blur(calc(.35*var(--u)));animation:llama 1.25s ease-in-out infinite alternate;transition:opacity .16s ease,transform .16s ease}
.llama::before{content:"";position:absolute;left:50%;top:58%;width:calc(70*var(--u));height:calc(70*var(--u));margin:calc(-35*var(--u)) 0 0 calc(-35*var(--u));border-radius:50%;background:radial-gradient(circle,rgba(255,206,120,.42) 0,rgba(255,206,120,.17) 34%,rgba(255,206,120,0) 68%);pointer-events:none}
.llama::after{content:"";position:absolute;left:24%;right:24%;bottom:14%;height:50%;border-radius:50% 50% 50% 50%/70% 70% 34% 34%;background:#FFF8E4;filter:blur(calc(1*var(--u)))}
.vela:nth-of-type(2) .llama{animation-delay:-.4s;animation-duration:1.05s}
.vela:nth-of-type(3) .llama{animation-delay:-.8s;animation-duration:1.35s}
.vela:nth-of-type(4) .llama{animation-delay:-.2s;animation-duration:1.15s}
.vela:nth-of-type(5) .llama{animation-delay:-.6s;animation-duration:.95s}
@keyframes llama{0%{transform:rotate(-1.6deg) scale(1,1)}40%{transform:rotate(1.3deg) scale(.94,1.09)}70%{transform:rotate(-.7deg) scale(1.04,.95)}100%{transform:rotate(1.7deg) scale(.97,1.06)}}
.apagada .llama{opacity:0;animation:none;transform:scale(.25,.2)}
/* una brasa pequeña en la mecha y un hilo de humo */
.vela::before{content:"";position:absolute;left:calc(-2*var(--u));top:calc(-1*var(--u));width:calc(4*var(--u));height:calc(4*var(--u));border-radius:50%;background:#E9682F;opacity:0}
.apagada::before{animation:brasa 1.1s ease-out}
@keyframes brasa{0%{opacity:1}100%{opacity:0}}
.humo{left:calc(-3*var(--u));bottom:0;width:calc(6*var(--u));height:calc(15*var(--u));filter:blur(calc(1.7*var(--u)))}
.humo::before,.humo::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(246,244,238,.9);opacity:0;transform-origin:50% 100%}
.apagada .humo::before{animation:humo 1.5s ease-out forwards}
.apagada .humo::after{animation:humo2 1.7s ease-out .22s forwards}
@keyframes humo{0%{opacity:0;transform:translate(0,0) scale(.5,.5)}14%{opacity:.85}45%{opacity:.6;transform:translate(calc(-4*var(--u)),calc(-22*var(--u))) scale(.9,1.5)}100%{opacity:0;transform:translate(calc(3*var(--u)),calc(-58*var(--u))) scale(1.7,2.4)}}
@keyframes humo2{0%{opacity:0;transform:translate(0,0) scale(.45,.5)}18%{opacity:.7}50%{opacity:.45;transform:translate(calc(4*var(--u)),calc(-26*var(--u))) scale(.9,1.4)}100%{opacity:0;transform:translate(calc(-3*var(--u)),calc(-52*var(--u))) scale(1.5,2.2)}}
/* la nota: un trozo arrancado del cuaderno, con su cinta */
.t-nota{position:relative;z-index:3;isolation:isolate;width:calc(306*var(--u));margin:0 calc(18*var(--u)) 0 auto;padding:calc(30*var(--u)) calc(22*var(--u)) calc(12*var(--u)) calc(26*var(--u));transform:rotate(1.8deg)}
.t-nota h2{font-size:calc(28*var(--u))}
.t-nota p{line-height:1.22}
.t-hoja{position:absolute;z-index:-1;left:calc(-53*var(--u));top:calc(-54*var(--u));width:calc(412*var(--u));height:calc(549.5*var(--u));pointer-events:none;filter:drop-shadow(calc(4*var(--u)) calc(5*var(--u)) calc(6*var(--u)) var(--sombra))}
.t-hoja i{display:block;width:100%;height:100%;background-image:url(piezas/papel-v.png);background-repeat:no-repeat;background-size:100% 100%;filter:brightness(1.1) saturate(.82);clip-path:polygon(0 0,100% 0,100% 41%,88% 40.4%,86.9% 40.34%,85.4% 41.36%,83.6% 41.02%,81.7% 41.75%,80.8% 41.45%,79.6% 40.44%,78.7% 40.76%,77.7% 41%,76.8% 40.54%,75.8% 40.37%,74.9% 41.11%,73.2% 41.09%,71.6% 41.32%,69.9% 41.67%,69% 40.69%,67.4% 40.82%,66.5% 40.73%,64.6% 40.24%,62.9% 41.13%,61.2% 41.03%,60.3% 41.72%,58.6% 41.41%,57.6% 40.64%,56.2% 41.04%,54.4% 40.5%,52.6% 40.82%,51.2% 40.96%,50.1% 41.01%,48.8% 41.71%,47.2% 41.3%,46% 40.71%,44.6% 40.86%,43.6% 40.3%,41.8% 40.73%,40.4% 41.24%,39.4% 41.04%,38.6% 41.33%,37.4% 41.63%,35.5% 40.91%,33.6% 41.2%,32% 40.12%,31.2% 40.18%,30.3% 40.82%,28.6% 40.98%,27.7% 40.99%,26.1% 41.72%,24.8% 41.07%,22.9% 41.08%,21.6% 40.79%,20.4% 40.09%,19.5% 40.76%,18.6% 41.08%,16.9% 40.6%,15.8% 41.48%,14.1% 41.33%,12.8% 41.03%,10% 41%,0 41%)}

/* ---------- dónde: cartulina mostaza y el mapa del tesoro ---------- */
.b-donde{margin-top:calc(46*var(--u));padding-bottom:calc(8*var(--u))}
.do-nota{z-index:2;width:calc(338*var(--u));margin-left:calc(16*var(--u));padding:calc(30*var(--u)) calc(22*var(--u)) calc(14*var(--u)) calc(24*var(--u));transform:rotate(-1.4deg)}
.do-nota::before{background-image:url(piezas/cartulina.png);left:-15%;right:-15.2%;top:-17.2%;bottom:-20.7%;filter:brightness(1.1) saturate(.9) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(7*var(--u)) var(--sombra))}
.do-nota .et{color:var(--tinta)}
.do-nota h2{font-size:calc(32*var(--u))}
.do-nota h2+p{font-weight:400;margin-top:calc(4*var(--u))}
#av1{max-width:calc(246*var(--u))}
.botones{gap:calc(8*var(--u));margin-top:calc(12*var(--u))}
.boton{min-height:46px;padding:calc(10*var(--u)) calc(11*var(--u));border:calc(1.6*var(--u)) solid var(--tinta);border-radius:calc(13*var(--u));font:600 calc(15*var(--u))/1.1 var(--caps);letter-spacing:0}
.do-google{margin-top:calc(2*var(--u));font:400 calc(16*var(--u))/1.2 var(--caps)}
.do-google a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.aviso{font:400 calc(16.5*var(--u))/1.25 var(--caps);color:var(--tinta)}
.do-mapa{position:relative;z-index:1;width:calc(446*var(--u));height:calc(334.5*var(--u));margin:calc(-22*var(--u)) 0 0 calc(-22*var(--u));transform:rotate(3.2deg);filter:brightness(1.04) saturate(.92) drop-shadow(calc(4*var(--u)) calc(7*var(--u)) calc(8*var(--u)) var(--sombra))}
.do-mapa img{width:100%;height:auto}
.b-donde .cera-azul{z-index:3;left:calc(30*var(--u));bottom:calc(-6*var(--u));transform:rotate(58deg)}
.b-donde .cera-verde{z-index:3;left:calc(112*var(--u));bottom:calc(-22*var(--u));transform:rotate(16deg)}

/* ---------- confirma: la hoja de cuaderno entera, con un globo detrás ---------- */
.b-confirma{margin-top:calc(42*var(--u));padding-bottom:calc(36*var(--u))}
.co-globo{z-index:0;left:calc(214*var(--u));top:calc(-118*var(--u));width:calc(178*var(--u));transform:rotate(8deg)}
.b-confirma .papel{z-index:1;width:calc(324*var(--u));margin:0 auto;padding:calc(36*var(--u)) calc(26*var(--u)) calc(30*var(--u));transform:rotate(-.9deg)}
.b-confirma .aviso{text-align:center}
.co-limite{margin-top:calc(2*var(--u));line-height:1.2}
.boton.lleno,.vienes input:checked+span{background-image:url(piezas/seda.jpg);background-position:center 62%;border-color:#7E332A}
.boton.lleno{margin-top:calc(20*var(--u));min-height:50px;font-size:calc(18*var(--u))}
#f{margin-top:calc(10*var(--u))}
.campo,.vienes legend{font:600 max(12px,calc(15*var(--u)))/1.2 var(--caps);letter-spacing:0;text-transform:none;color:var(--oro)}
.campo{margin-top:calc(12*var(--u))}
.campo input,.campo select{padding:calc(5*var(--u)) 0;border-bottom:calc(1.6*var(--u)) solid var(--tinta-s);font:400 max(16px,calc(20*var(--u)))/1.25 var(--caps);min-height:44px}
.vienes{margin-top:calc(14*var(--u))}
.vienes span{min-height:48px;border:calc(1.6*var(--u)) solid var(--tinta-s);border-radius:calc(13*var(--u));font:600 calc(17*var(--u))/1.1 var(--caps)}
.boton:focus-visible,.vienes input:focus-visible+span,.campo input:focus-visible,.campo select:focus-visible,.do-google a:focus-visible,.a-boton:focus-visible{outline-color:var(--tinta)}
.b-confirma .cera-mostaza{z-index:2;left:calc(4*var(--u));bottom:calc(-4*var(--u));transform:rotate(-24deg)}

/* ---------- cierre: una nube grande, un globo que se va y las colinas de abajo ---------- */
.b-cierre{margin-top:calc(26*var(--u));height:calc(286*var(--u))}
.c-globo{z-index:1;left:calc(-12*var(--u));top:calc(-48*var(--u));width:calc(158*var(--u))}
.c-nube{position:absolute;z-index:2;left:calc(18*var(--u));top:calc(58*var(--u));width:calc(344*var(--u));height:calc(201.6*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:calc(26*var(--u))}
.c-nube img{position:absolute;left:calc(-98.1*var(--u));top:calc(-73.3*var(--u));width:calc(539.2*var(--u));height:auto;max-width:none;filter:brightness(1.16) saturate(.82) drop-shadow(calc(5*var(--u)) calc(7*var(--u)) calc(8*var(--u)) var(--sombra))}
.c-adios{position:relative;font:600 calc(50*var(--u))/1 var(--caps);color:var(--rojo)}
.c-firma{position:relative;margin-top:calc(3*var(--u));font:600 calc(29*var(--u))/1.1 var(--caps)}
.hoja{padding-bottom:0}
.pie{margin-top:calc(8*var(--u));font-size:max(12px,calc(13.5*var(--u)));line-height:1.45;text-wrap:balance}
.c-suelo{--cw:max(calc(620*var(--u)),calc(100vw + 120px));position:relative;left:50%;width:var(--cw);height:calc(var(--cw)*.2786);margin:calc(14*var(--u)) 0 0 calc(var(--cw)/-2);overflow:hidden}
.c-suelo img{position:absolute;left:0;top:calc(var(--cw)*-.1414);width:100%;height:auto}

/* ---------- globos que flotan despacio ---------- */
.flota{animation:flota 8s ease-in-out infinite alternate}
.pr-globo.flota{animation-duration:10s;animation-delay:-3s}
.c-globo.flota{animation-duration:9s;animation-delay:-5s}
@keyframes flota{0%{transform:translateY(calc(5*var(--u))) rotate(-1.8deg)}100%{transform:translateY(calc(-11*var(--u))) rotate(1.8deg)}}

/* ---------- quieto: con ?estatica=1 y para quien pide menos movimiento, todo a la vista y sin moverse ---------- */
.estatica .flota,.estatica .llama{animation:none}
@media (prefers-reduced-motion:reduce){
  .flota,.llama{animation:none}
  .llama,.t-pista,.js .t-deseo{transition:none}
  .js .t-deseo{transform:none}
  .apagada .humo::before,.apagada .humo::after,.apagada::before{animation:none}
}

/* ---------- ordenador ---------- */
@media (min-width:640px){
  /* la columna del sobre y la cartulina de fuera quedan casi del mismo tono */
  .fondo{filter:none}
  .p-sombra{filter:none}
  .p-sombra::before{display:none}
  .p-marco{clip-path:none}
}