/* Mensajería del Caos — landing. Los mismos materiales que el juego: corcho de
   oficina, notas de papel con cinta, sellos de goma y la cinta transportadora. */
:root {
  --corcho: #9C5E30;
  --corcho-oscuro: #74431F;
  --papel: #FFF6E5;
  --papel-blanco: #FFFDF8;
  --papel-sombra: #E8D9BC;
  --tinta: #2B1D14;
  --tinta-suave: #6B5544;
  --sello: #D7263D;
  --sello-oscuro: #8E1022;
  --cinta-amarilla: #FFC93C;
  --azul-tinta: #1F5FAE;
  --carton: #D49A5E;
  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --maquina: "Special Elite", "Courier New", monospace;
  --cuerpo: "Nunito", "Segoe UI", system-ui, sans-serif;
  --suave: cubic-bezier(.22, 1, .36, 1);
  /* Corcho en tres capas: motas oscuras, motas claras y manchas grandes. SVG con
     stitchTiles para que el mosaico no tenga costuras. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .11 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --motas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .5 0 0 0 0 .3 0 0 0 14 -9.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --manchas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--corcho-oscuro); }
/* clip (no hidden): corta lo que asoman las notas giradas sin romper la barra sticky. */
html, body { overflow-x: clip; }
body {
  margin: 0; color: var(--tinta); font: 500 17px/1.55 var(--cuerpo);
  background: var(--grano), var(--motas), var(--manchas), linear-gradient(var(--corcho), var(--corcho-oscuro));
}
/* Viñeta: los bordes del tablón más oscuros, como en la oficina del juego. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, color-mix(in srgb, var(--tinta) 45%, transparent));
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cinta-amarilla); outline-offset: 3px; }

/* ── Barra ── */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: 8px max(16px, calc((100% - 1080px) / 2));
  background: color-mix(in srgb, var(--corcho-oscuro) 92%, transparent); border-bottom: 3px solid var(--tinta);
}
.marca img { width: 120px; }
.idiomas { margin-left: auto; display: flex; gap: 4px; }
.idiomas button {
  min-width: 44px; min-height: 40px; border: 2px solid var(--tinta); border-radius: 8px; background: var(--papel-sombra);
  font: 400 15px var(--display); color: var(--tinta-suave); cursor: pointer; transition: translate .08s ease-out;
}
.idiomas button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); }
.idiomas button:active { translate: 0 1px; }

/* ── Botón sello: rojo, con su sombra de goma; se hunde al pulsar ── */
.boton-sello {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px;
  border: 2px solid var(--sello-oscuro); border-radius: 12px; background: var(--sello); color: var(--papel);
  font: 400 22px/1 var(--display); letter-spacing: .02em; text-decoration: none; rotate: -1.5deg;
  box-shadow: 0 5px 0 var(--sello-oscuro), inset 0 0 0 3px color-mix(in srgb, var(--papel) 35%, transparent);
  transition: translate .08s ease-out, box-shadow .08s ease-out, rotate .25s var(--suave), filter .12s;
}
.boton-sello.pequeno { min-height: 40px; padding: 0 14px; font-size: 16px; rotate: 0deg; box-shadow: 0 3px 0 var(--sello-oscuro); }
.boton-sello:active { translate: 0 4px; box-shadow: 0 1px 0 var(--sello-oscuro); }
@media (hover: hover) {
  /* La nota se despega un poco de la esquina al pasar el ratón. */
  .boton-sello:hover { rotate: -3.5deg; filter: brightness(1.07); }
  .boton-sello.pequeno:hover { rotate: -2deg; }
}
.boton-secundario {
  min-height: 48px; padding: 0 20px; border: 2px solid var(--tinta); border-radius: 10px; background: var(--papel);
  font: 400 18px var(--display); color: var(--tinta); cursor: pointer; box-shadow: 0 3px 0 var(--tinta);
  transition: translate .08s ease-out, box-shadow .08s ease-out;
}
.boton-secundario:active { translate: 0 2px; box-shadow: 0 1px 0 var(--tinta); }

/* ── Secciones ── */
main > section { width: min(1080px, 100% - 32px); margin: 0 auto; padding: 56px 0; }
.nota-titulo {
  display: inline-block; margin: 0 0 24px; padding: 6px 16px; rotate: -2deg; position: relative;
  background: var(--papel); border: 2px solid var(--tinta); border-radius: 4px;
  font: 400 clamp(26px, 5vw, 38px)/1.1 var(--display); box-shadow: 0 4px 0 color-mix(in srgb, var(--tinta) 30%, transparent);
}
.nota-titulo::before { /* tira de cinta adhesiva sujetando la nota */
  content: ""; position: absolute; top: -12px; left: 50%; width: 76px; height: 22px; translate: -50% 0; rotate: 4deg;
  background: color-mix(in srgb, var(--cinta-amarilla) 80%, transparent); border-left: 2px dashed color-mix(in srgb, var(--tinta) 25%, transparent); border-right: 2px dashed color-mix(in srgb, var(--tinta) 25%, transparent);
}

/* Portada */
/* Portada: un tablón de corcho limpio, con un foco de luz cálida detrás del logo,
   los bordes en sombra y el listón de madera abajo. Los personajes son lo único
   que llama la atención. */
main > section.portada {
  --foco: rgb(255 236 200 / .42); --sombra: rgb(43 29 20 / .55);
  width: 100%; display: grid; justify-items: center; text-align: center;
  padding: 28px max(16px, calc((100% - 1080px) / 2)) 84px;
  background:
    radial-gradient(ellipse 50% 42% at 50% 36%, var(--foco), transparent 72%),
    radial-gradient(ellipse 80% 75% at 50% 42%, transparent 50%, var(--sombra)),
    url("assets/img/corcho.webp") center / 384px, #B97A45;
  border-bottom: 4px solid var(--tinta); box-shadow: 0 10px 0 color-mix(in srgb, var(--tinta) 35%, transparent);
}
main > section.portada::after { /* listón de madera */
  content: ""; position: absolute; inset: auto 0 0; height: 26px; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / .18), transparent 30%, rgb(0 0 0 / .25)),
    repeating-linear-gradient(90deg, #7A4A28 0 37px, #6E4123 37px 61px, #83522D 61px 97px);
  border-top: 3px solid var(--tinta); box-shadow: 0 -6px 10px rgb(0 0 0 / .25);
}
.escena { display: grid; place-items: center; width: min(980px, 112%); margin-inline: -6%; }
.escena > * { grid-area: 1 / 1; }
.escena h1 { margin: 0; width: min(440px, 46%); filter: drop-shadow(0 6px 0 color-mix(in srgb, var(--tinta) 35%, transparent)); }

.lema {
  margin: 8px 0 12px; padding: 4px 14px; background: var(--tinta); color: var(--papel); rotate: 1deg;
  font: 400 clamp(17px, 3.2vw, 22px) var(--maquina);
}
.entradilla {
  max-width: 56ch; margin: 0 0 28px; padding: 16px 20px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 6px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tinta) 30%, transparent);
}
/* El botón de itch.io y la insignia oficial de Google Play, a la misma altura. */
.ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; align-items: center; }
.google-play { display: block; border-radius: 10px; transition: translate .12s ease-out, filter .12s; }
.google-play-insignia { height: 56px; width: auto; filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--tinta) 45%, transparent)); }
.google-play:active { translate: 0 3px; }
@media (hover: hover) { .google-play:hover { filter: brightness(1.15); } }
.detalle { margin: 18px 0 0; padding: 2px 10px; font: 14px var(--maquina); color: var(--papel); background: color-mix(in srgb, var(--tinta) 75%, transparent); }

/* Escaparate: la cinta del juego con cajas pasando */
.escaparate { text-align: center; }
.cinta {
  position: relative; overflow: hidden; height: 132px; margin-inline: calc(50% - 50vw); border-block: 4px solid var(--tinta);
  background: url("assets/img/cinta-banda.webp") 0 0 / auto 100% repeat-x;
  animation: banda var(--dur-banda, 30s) linear infinite;
  box-shadow: inset 0 8px 0 color-mix(in srgb, var(--tinta) 40%, transparent), inset 0 -8px 0 color-mix(in srgb, var(--tinta) 40%, transparent);
}
.cinta-pista { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; gap: 28px; padding-left: 28px; width: max-content; animation: pista var(--dur-pista, 40s) linear infinite; }
@keyframes pista { to { translate: -50% 0; } }
@keyframes banda { to { background-position-x: calc(-1 * var(--ancho-banda, 2207px)); } }
.caja {
  position: relative; flex: none; width: 104px; height: 88px; display: grid; place-items: center; overflow: hidden;
  border: 3px solid var(--tinta); border-radius: 8px; box-shadow: 0 5px 0 color-mix(in srgb, var(--tinta) 45%, transparent);
}
.caja:nth-child(3n) { width: 150px; }
.caja:nth-child(4n + 1) { height: 104px; }
/* Cartón como en el juego: la textura multiplicada sobre un kraft claro, la cinta
   casi blanca teñida con su color y el sello de goma estampado encima. */
.carton { background: url("assets/img/caja-carton.webp") 0 0 / 150px auto, color-mix(in srgb, var(--carton) 55%, var(--papel-blanco)); background-blend-mode: multiply; }
.cinta-adhesiva {
  position: absolute; inset: 50% 0 auto; height: 24%; translate: 0 -50%;
  background: url("assets/img/caja-cinta.webp") 0 50% / auto 100% repeat-x, var(--cinta-caja, #C8443B); background-blend-mode: multiply;
}
.vertical .cinta-adhesiva { inset: 0 auto 0 50%; width: 24%; height: auto; translate: -50% 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--papel-blanco) 40%, transparent), transparent 35% 70%, color-mix(in srgb, var(--tinta) 14%, transparent)), var(--cinta-caja, #C8443B); }
.sello-caja { position: relative; width: min(60px, 62%); rotate: -8deg; mix-blend-mode: multiply; opacity: .9; pointer-events: none; }
/* Objetos extraviados: sueltos, sin caja, con su etiqueta de objeto perdido. */
.caja.suelta { width: 96px; height: 96px; overflow: visible; border: 0; box-shadow: none; background: none; }
.caja.suelta img { width: 84px; rotate: -6deg; filter: drop-shadow(0 5px 2px color-mix(in srgb, var(--tinta) 45%, transparent)); }
.etiqueta { position: absolute; top: 4px; right: 2px; width: 22px; height: 15px; rotate: 24deg; border: 2px solid var(--tinta); border-radius: 3px 7px 7px 3px; background: radial-gradient(circle at 75% 50%, var(--tinta) 0 2px, var(--papel) 2.5px); }
.pie { max-width: 60ch; margin: 22px auto 0; padding: 10px 16px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 6px; rotate: .5deg; }

/* Objetos del juego clavados o tirados por el tablón. Decorado: detrás del
   contenido, sin eventos y fuera del árbol de accesibilidad (alt=""). */
/* main e body crean su propio contexto: así los z-index negativos quedan sobre el
   fondo de corcho y no debajo. */
body { isolation: isolate; }
main { position: relative; z-index: 0; }
main > section { position: relative; }
.deco { position: absolute; z-index: -1; pointer-events: none; width: var(--t, 150px); rotate: var(--r, 0deg); filter: drop-shadow(0 6px 4px color-mix(in srgb, var(--tinta) 40%, transparent)); }
/* :where() deja esta regla sin peso: cualquier clase con position propia la gana. */
main > section > :where(:not(.deco, .mancha-cafe)) { position: relative; }
.deco-pinzas { --t: 190px; --r: -28deg; top: 10px; right: -150px; }
.deco-celo { --t: 170px; --r: 12deg; bottom: 30px; left: -170px; }
.deco-cafe { --t: 190px; --r: -8deg; bottom: -40px; right: -170px; }
.deco-borron { --t: 200px; --r: 20deg; top: 60px; left: -150px; opacity: .85; filter: none; }
.deco-cajas { --t: 170px; --r: 6deg; top: -10px; right: -40px; }
/* Cerco de taza sobre el corcho (imagen generada por script). multiply para que
   el café tiña el corcho en vez de taparlo. */
.mancha-cafe { position: absolute; z-index: -1; width: 220px; pointer-events: none; mix-blend-mode: multiply; opacity: .9; }
.como .mancha-cafe { top: -70px; right: 14%; rotate: 25deg; }
.final .mancha-cafe { bottom: 10px; left: 6%; width: 250px; rotate: -40deg; }
@media (max-width: 1240px) {
  .deco-pinzas { right: -90px; } .deco-celo { left: -110px; } .deco-cafe { right: -110px; } .deco-borron { left: -110px; }
}

/* La gallina sobre la cinta, y su huevo. */
.cinta-marco { position: relative; }
.gallina { position: absolute; z-index: 3; bottom: calc(100% - 22px); left: 7%; width: 112px; padding: 0; border: 0; background: none; cursor: pointer; }
.gallina img { width: 100%; filter: drop-shadow(0 5px 2px color-mix(in srgb, var(--tinta) 45%, transparent)); }
.huevo { position: absolute; z-index: 4; width: 52px; pointer-events: none; }

/* Paquete urgente: la caja que tiembla y los seis minijuegos. */
.urgente-cabecera { display: flex; gap: 22px; align-items: center; margin-bottom: 26px; }
.urgente-caja { width: 130px; flex: none; filter: drop-shadow(0 6px 3px color-mix(in srgb, var(--tinta) 45%, transparent)); }
.urgente-entradilla { margin: 0; max-width: 56ch; padding: 12px 16px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 6px; rotate: -.5deg; }
.minijuegos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .minijuegos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .minijuego img { width: 72px; height: 72px; } .minijuego strong { font-size: 17px; } .minijuego span { font-size: 13px; } }
.minijuego {
  display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 14px 16px; background: var(--papel-blanco); border: 2px solid var(--tinta);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--tinta) 30%, transparent); rotate: var(--g, -1deg);
}
.minijuego:nth-child(2n) { --g: 1.4deg; } .minijuego:nth-child(3n) { --g: -.4deg; }
.minijuego img { width: 96px; height: 96px; object-fit: contain; }
.minijuego strong { font: 400 20px/1.15 var(--display); }
.minijuego span { font-size: 14px; color: var(--tinta-suave); }

/* Temporada: en Halloween y Navidad cambia la luz del tablón. */
[data-temporada="halloween"] main > section.portada { --foco: rgb(255 150 50 / .4); --sombra: rgb(38 16 52 / .75); }
[data-temporada="christmas"] main > section.portada { --foco: rgb(255 244 214 / .5); --sombra: rgb(18 58 36 / .6); }
@media (max-width: 640px) {
  .gallina { width: 72px; bottom: calc(100% - 14px); left: auto; right: 4%; }
  .urgente-cabecera { flex-direction: column; text-align: center; }
  .urgente-caja { width: 100px; }
}

/* Cómo se juega */
.notas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.nota {
  position: relative; display: grid; gap: 6px; justify-items: start; padding: 18px 18px 22px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 4px;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--tinta) 30%, transparent); rotate: var(--giro, -1deg); transition: rotate .25s var(--suave), translate .25s var(--suave);
}
.nota:nth-child(2) { --giro: 1.2deg; } .nota:nth-child(3) { --giro: -.6deg; } .nota:nth-child(4) { --giro: 1.6deg; background: #FFF0C8; }
.nota::before { content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F05A6B, var(--sello) 55%, var(--sello-oscuro)); border: 2px solid var(--tinta); } /* chincheta */
.nota img { width: 84px; }
.nota strong { font: 400 24px var(--display); }
.nota span { font-size: 15px; color: var(--tinta-suave); }
@media (hover: hover) { .nota:hover { rotate: 0deg; translate: 0 -3px; } }

/* Álbum: una página roja como la mochila de la gallina, con las pegatinas pegadas. */
.album-entradilla { max-width: 58ch; margin: 0 0 26px; padding: 10px 16px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 6px; rotate: .4deg; }
.album-mesa { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.album-hoja {
  position: relative; padding: 46px 22px 24px; rotate: -1.2deg; border: 3px solid var(--tinta); border-radius: 18px;
  background: var(--grano), radial-gradient(circle at 30% 20%, #D8384B, #B21E33 60%, #8E1022);
  outline: 2px dashed color-mix(in srgb, var(--papel) 55%, transparent); outline-offset: -11px; /* costura */
  box-shadow: 0 8px 0 color-mix(in srgb, var(--tinta) 40%, transparent);
}
.album-rotulo { position: absolute; top: -16px; left: 50%; translate: -50% 0; rotate: 2deg; padding: 4px 14px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 4px; font: 400 20px var(--display); white-space: nowrap; }
.album-pegatinas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pegatina { display: grid; place-items: center; aspect-ratio: 1; rotate: var(--g, -4deg); transition: rotate .25s var(--suave), scale .25s var(--suave); }
.pegatina:nth-child(3n) { --g: 5deg; } .pegatina:nth-child(4n + 1) { --g: -7deg; } .pegatina:nth-child(5n + 2) { --g: 3deg; }
.pegatina img { width: 100%; filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--tinta) 45%, transparent)); }
.pegatina.hueco { margin: 8%; border: 2px dashed color-mix(in srgb, var(--papel) 60%, transparent); border-radius: 12px; rotate: 0deg; font: 12px/1.2 var(--maquina); color: var(--papel); text-align: center; padding: 6px; }
@media (hover: hover) { .pegatina:not(.hueco):hover { rotate: 0deg; scale: 1.12; } }
.album-notas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
.album-notas .nota { padding: 14px 12px 16px; }
.album-notas .nota img { width: 60px; }
.album-notas .nota strong { font-size: 19px; }
.album-notas .nota span { font-size: 14px; }
.album-notas .nota:nth-child(2) { --giro: 1.6deg; background: var(--papel); } .album-notas .nota:nth-child(3) { --giro: -1.4deg; background: #FFF0C8; }
@media (max-width: 760px) { .album-mesa { grid-template-columns: minmax(0, 1fr); } .album-hoja { padding: 40px 14px 18px; } .pegatina.hueco { font-size: 10px; padding: 3px; } }

/* Sellos */
.sellos { text-align: center; }
.hoja {
  position: relative; height: 300px; max-width: 720px; margin: 0 auto; overflow: hidden; cursor: crosshair; touch-action: manipulation;
  background: repeating-linear-gradient(var(--papel-blanco) 0 27px, #DCE7F4 27px 28px), var(--papel-blanco);
  border: 2px solid var(--tinta); border-radius: 4px; box-shadow: 0 6px 0 color-mix(in srgb, var(--tinta) 30%, transparent); rotate: -.8deg;
}
.hoja.golpe { animation: golpe .18s ease-out; }
@keyframes golpe { 40% { translate: 0 3px; scale: .995; } }
.hoja-texto { position: absolute; inset: auto 0 18px; margin: 0; font: 15px var(--maquina); color: var(--tinta-suave); pointer-events: none; }
.hoja-sellos img { position: absolute; width: 150px; pointer-events: none; mix-blend-mode: multiply; animation: estampa .3s var(--suave) both; }
.hoja-sellos img.goma { opacity: .88; }
@keyframes estampa { from { scale: 1.7; opacity: 0; } 60% { opacity: 1; } }
.sello-acciones { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.sello-cuenta { margin: 0; min-height: 1.5em; padding: 2px 10px; background: var(--tinta); color: var(--papel); font: 15px var(--maquina); }
.sello-cuenta:empty { display: none; }

/* Capturas */
.polaroids { display: grid; grid-template-columns: 1fr minmax(160px, 30%); gap: 24px; align-items: center; }
.polaroid { margin: 0; padding: 12px 12px 8px; background: var(--papel-blanco); border: 2px solid var(--tinta); box-shadow: 0 8px 0 color-mix(in srgb, var(--tinta) 30%, transparent); }
.polaroid.ancha { rotate: -1.2deg; }
.polaroid.estrecha { rotate: 2deg; }
.polaroid figcaption { padding-top: 8px; text-align: center; font: 15px var(--maquina); color: var(--tinta-suave); }
.chapas { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chapas li { padding: 6px 12px; border: 2px solid var(--azul-tinta); border-radius: 6px; background: var(--papel); color: var(--azul-tinta); font: 15px var(--maquina); rotate: -1deg; }
.chapas li:nth-child(even) { rotate: 1.2deg; border-color: var(--sello); color: var(--sello); }

/* Final */
.final { display: grid; justify-items: center; gap: 16px; text-align: center; }
.final-escena { display: flex; align-items: flex-end; gap: 4px; }
.final-jefa { width: 150px; border-radius: 50%; border: 3px solid var(--tinta); background: var(--papel); }
.final-taza { width: 96px; margin-left: -28px; filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--tinta) 35%, transparent)); }
.final-texto { margin: 0; padding: 8px 16px; background: var(--papel); border: 2px solid var(--tinta); border-radius: 6px; font: 400 clamp(20px, 3.6vw, 28px) var(--display); }

.pie-pagina { padding: 28px 16px 40px; text-align: center; color: var(--papel); font: 14px var(--maquina); background: color-mix(in srgb, var(--tinta) 70%, transparent); }
.pie-pagina p { margin: 4px 0; }


@media (max-width: 640px) {
  body { font-size: 16px; }
  main > section { padding: 40px 0; }
  .marca img { width: 96px; }
  .boton-sello { font-size: 20px; padding: 0 22px; }
  .escena { width: 118%; margin-inline: -9%; }
  main > section.portada { padding-bottom: 64px; }
  .deco { --t: 96px !important; opacity: .9; }
  .deco-pinzas { right: -46px; } .deco-celo { left: -54px; bottom: -30px; } .deco-cafe { right: -44px; bottom: -50px; }
  .mancha-cafe { width: 150px !important; }
  .deco-borron { left: -60px; } .deco-cajas { right: -20px; top: -20px; }   .escena h1 { width: 52%; }
  .cinta { height: 108px; }
  .caja { width: 84px; height: 72px; } .caja:nth-child(3n) { width: 120px; } .caja:nth-child(4n + 1) { height: 86px; }
  .caja.suelta { width: 80px; height: 80px; } .caja.suelta img { width: 68px; }
  .polaroids { grid-template-columns: 1fr; }
  .polaroid.estrecha { width: 62%; justify-self: center; }
  .hoja { height: 240px; }
  .hoja-sellos img { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cinta, .cinta-pista, .hoja.golpe, .hoja-sellos img { animation: none; }
  .boton-sello, .nota { transition: none; }
}