@font-face{font-family:"Little Dinosaur";src:url(/fonts/LittleDinosaur.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Little Dinosaur";src:url(/fonts/LittleDinosaur-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --h:clamp(230px,36vh,300px);
  --rosa:#F04E98; --rosa-hondo:#d93a85;
  --blanco:#fff; --tinta:#1f1c1b;
  --azul:#4AC9E3; --amarillo:#F9E267; --lavanda:#C5B4E3; --naranja:#FF7F41;
  --display:"Little Dinosaur", "Comic Sans MS", cursive;
  --texto:"Author", ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--rosa);color:var(--blanco);font:500 17px/1.4 var(--texto);-webkit-font-smoothing:antialiased}
.hoja{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding:24px clamp(16px,4vw,40px)}
header{user-select:none;-webkit-user-select:none;display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
header img{display:block}
.centro{position:absolute;left:50%;top:calc(50% - var(--h) / 2);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;width:min(100%,22rem)}
.lugar{height:var(--h);margin-bottom:28px}
.sticker{position:absolute;inset:0;touch-action:none;opacity:0;transition:opacity .3s;z-index:5;pointer-events:none}
.sticker.encima{pointer-events:auto}
.pronto,.estado,header,footer{position:relative;z-index:1}
.pronto,.estado{pointer-events:none}
.sticker.listo{opacity:1}
.sticker canvas{outline:none}
.pronto{user-select:none;-webkit-user-select:none;font-weight:600;font-size:1.25rem;margin-bottom:18px}
.aviso{display:flex;width:100%;background:var(--blanco);border-radius:999px;padding:5px}
.aviso input[type=email]{flex:1;min-width:0;border:0;background:transparent;font:500 1rem var(--texto);color:var(--tinta);padding:10px 14px;outline:0}
.aviso input::placeholder{color:#b07a92}
.aviso:focus-within{outline:2px solid var(--blanco);outline-offset:3px}
.aviso button{font:700 1.2rem var(--display);border:0;border-radius:999px;background:var(--rosa);color:var(--blanco);padding:10px 18px;cursor:pointer}
.aviso button:hover{background:var(--rosa-hondo)}
.aviso button:disabled{opacity:.6;cursor:wait}
.aviso.listo{display:none}
.estado{min-height:1.4em;margin-top:12px;font-size:.95rem}
.trampa,.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
footer{grid-row:3;justify-self:center;font-size:.9rem}
footer a{color:var(--blanco);text-underline-offset:3px}
.nombre{display:block;height:34px;width:auto}
.sticker.cambiando{opacity:0;transition:none}
