/* Carta de Navidad.com — collage de papel: hojas con grano, washi tape, cartulina cosida y pegatinas troqueladas
   sobre un diorama nevado en verde menta. Rojo acebo y verde abeto intensos para lo que se toca. */
:root {
  --rojo: #e2343f; --rojo-osc: #a91d2b;
  --verde: #1f8a5b; --verde-osc: #11603e;
  --oro: #f4b73f; --oro-osc: #c88a16;
  --menta: #7fd1c6; --menta-osc: #4fb0a3; --menta-p: #cfeee8;
  --rosa: #ffd3df; --lavanda: #d9cff5;
  --tinta: #2b2340; --tinta-suave: #5d5680;
  --papel: #fffaf2; --papel-2: #f6ead8; --raya: #cfdcf2; --margen: #ffb3c1;
  --sombra: 28, 52, 72;
  --f-display: 'Grandstander', 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --f-texto: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --f-mano: 'Gochi Hand', 'Comic Sans MS', 'Chalkboard SE', cursive;
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --papel-sombra: 0 1px 1px rgba(var(--sombra), .08), 0 6px 10px -4px rgba(var(--sombra), .22), 0 22px 34px -18px rgba(var(--sombra), .45);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  font-family: var(--f-texto); color: var(--tinta);
  background: linear-gradient(180deg, #8fd0c8 0%, #bfe7e0 55%, #f2fbf8 100%);
  -webkit-tap-highlight-color: transparent;
}
body.sin-3d::before {
  content: ""; position: fixed; inset: auto 0 0; height: 38%;
  background: radial-gradient(60px 40px at 10% 0, #fff 98%, transparent) repeat-x, #fff;
  background-size: 90px 60px, auto; background-position: 0 0, 0 30px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--oro); outline-offset: 3px; }
svg { display: block; }

#escena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* ---------- piezas de papel reutilizables ---------- */
.papel { background-color: var(--papel); background-image: var(--grano); }
.cinta {
  position: absolute; z-index: 3; width: 112px; height: 30px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(226, 52, 63, .82) 0 9px, rgba(255, 255, 255, .82) 9px 18px);
  clip-path: polygon(3% 0, 97% 4%, 100% 22%, 97% 45%, 100% 70%, 96% 100%, 4% 96%, 0 74%, 3% 50%, 0 26%);
  box-shadow: 0 2px 4px rgba(var(--sombra), .15);
  opacity: .92;
}
.cinta.verde { background: repeating-linear-gradient(90deg, rgba(31, 138, 91, .82) 0 7px, rgba(255, 246, 233, .85) 7px 14px); }
.cinta.menta { background: radial-gradient(circle at 6px 6px, rgba(255, 255, 255, .9) 2.6px, transparent 3px) 0 0 / 14px 14px, rgba(127, 209, 198, .88); }
.cinta.oro { background: repeating-linear-gradient(45deg, rgba(244, 183, 63, .85) 0 6px, rgba(255, 246, 233, .85) 6px 12px); }
.pegatina { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 4px 5px rgba(var(--sombra), .25)); }
.pegatina svg { width: 100%; height: auto; overflow: visible; }
.troquel { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 6px rgba(var(--sombra), .28)); }

/* ---------- barra superior ---------- */
.barra {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  pointer-events: none;
}
.barra > * { pointer-events: auto; }
.marca {
  display: flex; align-items: center; gap: 8px; border: 0; padding: 6px 14px 6px 8px;
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; color: var(--tinta);
  background: var(--papel) var(--grano); border-radius: 6px; transform: rotate(-2deg);
  box-shadow: var(--papel-sombra);
}
.marca svg { width: 28px; height: 28px; animation: girar 10s linear infinite; }
.barra-der {
  display: flex; gap: 8px; align-items: center; padding: 7px;
  background: rgba(255, 250, 242, .88); border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 16px; box-shadow: 0 4px 18px rgba(var(--sombra), .15);
  backdrop-filter: blur(10px);
}
.chip {
  background: var(--papel) var(--grano); border: 0; border-radius: 6px; padding: 7px 14px;
  font-family: var(--f-display); font-weight: 700; font-size: .95rem; color: var(--tinta);
  box-shadow: var(--papel-sombra); transform: rotate(1.5deg);
}
.chip-boton { width: 44px; height: 44px; padding: 0; font-size: 1.2rem; display: grid; place-items: center; border-radius: 50%; transform: none; }
.chip-boton[aria-pressed="false"] { color: var(--tinta-suave); }
.chip-boton[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--verde), var(--papel-sombra); }
.chip-boton[aria-pressed="false"]::after { content: ""; width: 15px; height: 2px; background: currentColor; position: absolute; bottom: 5px; }
.chip-boton { position: relative; }

/* Controles distinguibles sin depender del rojo y el verde. */
/* El personaje vive detrás del decorado 3D; este botón solo muestra el foco. */
.grinch-acceso {
  position: fixed; z-index: 11; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
}
.grinch-pop {
  position: fixed; z-index: 11; pointer-events: none; color: var(--tinta);
  background: var(--papel); padding: 7px 10px; border: 2px dashed var(--verde);
  border-radius: 45%; font-family: var(--f-display); font-weight: 800;
  animation: grinchPop .6s ease-out both;
}
@keyframes grinchPop { 0% { opacity: 0; scale: .4; } 25%, 65% { opacity: 1; scale: 1.15; } 100% { opacity: 0; scale: 1.3; } }

/* ---------- capa de interfaz ---------- */
.ui { position: fixed; inset: 0; z-index: 10; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pantalla {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding-block: calc(84px + env(safe-area-inset-top, 0px)) calc(40px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.pantalla.entrando > * { animation: posar .75s cubic-bezier(.2, 1, .3, 1) both; }
.pantalla.saliendo > * { animation: levantar .32s ease-in both; }

.tarjeta {
  position: relative; isolation: isolate;
  background: var(--papel) var(--grano); border-radius: 4px;
  box-shadow: var(--papel-sombra);
}
.tarjeta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px;
  background: var(--papel-2) var(--grano); transform: rotate(2.2deg) translate(4px, 6px);
  box-shadow: 0 10px 22px -12px rgba(var(--sombra), .4);
}

/* ---------- botones de cartulina cosida ---------- */
.boton {
  --b: var(--rojo); --bo: var(--rojo-osc);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 0; padding: .78em 1.6em;
  border-radius: 18px 22px 17px 23px / 22px 17px 23px 18px;
  font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; color: #fff;
  background: var(--b) var(--grano);
  box-shadow: 0 5px 0 var(--bo), 0 14px 22px -10px rgba(var(--sombra), .6);
  transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .18s;
  transform: rotate(-1.2deg);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.boton::after { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(255, 255, 255, .6); border-radius: inherit; pointer-events: none; }
.boton:hover { transform: rotate(1deg) translateY(-3px) scale(1.03); }
.boton:active { transform: rotate(0) translateY(4px); box-shadow: 0 1px 0 var(--bo), 0 6px 12px -8px rgba(var(--sombra), .6); }
.boton:disabled { filter: grayscale(.75) opacity(.6); cursor: not-allowed; transform: rotate(-1.2deg); }
.boton-verde { --b: var(--verde); --bo: var(--verde-osc); }
.boton-blanco { --b: var(--papel); --bo: #e7d8bf; color: var(--tinta); text-shadow: none; }
.boton-blanco::after { border-color: rgba(43, 35, 64, .25); }
.boton-grande { font-size: clamp(1.3rem, 4.5vw, 1.7rem); padding: .8em 1.8em; }
.boton-mini { font-size: 1rem; padding: .55em 1.15em; box-shadow: 0 4px 0 var(--bo), 0 10px 18px -10px rgba(var(--sombra), .55); }
.boton-mini::after { inset: 4px; }

/* ---------- inicio ---------- */
.hero {
  position:relative; width:min(640px,100%); min-width:0;
  text-align:center; display:grid; justify-items:center; gap:10px; margin-top:0;
  padding:clamp(14px,2vw,22px) clamp(14px,2vw,22px);
  background-color:rgba(255,250,242,.92); background-image:var(--hoja-fondo);
  background-position:0 0,0 0,0 12px;
  border:2px solid rgba(255,255,255,.95); border-radius:18px 22px 16px 20px;
  box-shadow:var(--papel-sombra); backdrop-filter:blur(5px);
}
.hero > p { margin:0; }
.hero .titulo { max-width:100%; font-size:clamp(2rem,6vw,4.2rem); }
.hero .subtitulo { padding:8px 14px; font-size:clamp(1rem,2.5vw,1.15rem); }
.hero .pista { font-size:.9rem; padding:5px 10px; }
.antetitulo {
  position: relative; margin: 0; padding: 7px 34px;
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: .82rem;
  color: #fff; background: var(--rojo) var(--grano);
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  filter: drop-shadow(0 3px 0 var(--rojo-osc));
}
.antetitulo-oscuro { color: #fff; background-color: var(--verde); }
.titulo {
  margin: 0; font-family: var(--f-display); font-weight: 800; line-height: .95;
  font-size: clamp(3.4rem, 13vw, 8.4rem); letter-spacing: -.01em;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .26em;
  filter: drop-shadow(0 5px 0 rgba(var(--sombra), .16)) drop-shadow(0 12px 14px rgba(var(--sombra), .2));
}
.titulo .palabra { display: inline-flex; }
.titulo .letra {
  --r: 0deg;
  display: inline-block; cursor: pointer; user-select: none;
  color: var(--c, var(--rojo));
  -webkit-text-stroke: .15em #fff; paint-order: stroke fill;
  transform: rotate(var(--r));
  animation: caer .9s cubic-bezier(.2, 1.3, .4, 1) both;
  animation-delay: calc(var(--i) * 55ms);
}
.titulo .letra.tocada { animation: voltear .7s cubic-bezier(.3, 1.4, .5, 1); }
.subtitulo {
  margin: 0; max-width: 38ch; padding: 12px 24px;
  background: var(--papel) var(--grano); border-radius: 3px; box-shadow: var(--papel-sombra);
  font-size: clamp(1.1rem, 3.2vw, 1.35rem); font-weight: 600; color: var(--tinta); text-wrap: balance;
  transform: rotate(.8deg); position: relative;
}
.subtitulo .cinta { top: -14px; left: calc(50% - 46px); width: 92px; height: 24px; transform: rotate(-4deg); }
.pista { margin: 0; font-size: .98rem; font-weight: 700; color: var(--tinta); background: var(--menta-p) var(--grano); padding: 5px 14px; border-radius: 3px; transform: rotate(-1deg); box-shadow: var(--papel-sombra); }

/* ---------- adulto ---------- */
/* Reserva el saliente del muñeco y las cintas debajo de la barra real. */
#p-adulto { padding-top: calc(var(--barra-espacio, 100px) + 76px); }
.tarjeta-adulto {
  width: min(560px, 100%); padding: 34px clamp(30px, 4vw, 40px) 30px;
  display: grid; gap: 16px; transform: rotate(-.6deg);
  background-color: rgba(255, 250, 242, .88);
  background-image: var(--grano),
    linear-gradient(90deg, transparent 20px, rgba(255, 179, 193, .65) 20px 22px, transparent 22px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(207, 220, 242, .6) 31px 32px);
  background-position: 0 0, 0 0, 0 12px;
  border: 1px solid #e6dcca;
  box-shadow: var(--papel-sombra);
  backdrop-filter: blur(5px);
}
.tarjeta-adulto::before { content: none; }
/* Entrar desde abajo evita invadir el menú durante la animación. */
#p-adulto.entrando > *, #p-carta.entrando > * { animation-name: posarCarta; }
@keyframes posarCarta { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
.tarjeta-adulto > .cinta { top: -13px; left: 36px; transform: rotate(-6deg); }
.tarjeta-adulto > .cinta + .cinta { left: auto; right: 36px; transform: rotate(5deg); }
.tarjeta-adulto .pegatina { right: 12px; top: -54px; width: 90px; transform: rotate(10deg); }
.adulto-cabecera { display: flex; gap: 14px; align-items: flex-start; padding-right: 50px; }
.adulto-cabecera h2 { margin: 0; font-family: var(--f-display); font-size: 1.45rem; line-height: 1.15; text-wrap: balance; }
.adulto-cabecera p { margin: 4px 0 0; color: var(--tinta-suave); }
.candado { font-size: 1.8rem; background: var(--rosa) var(--grano); border-radius: 50%; width: 54px; height: 54px; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 3px #fff, 0 3px 6px rgba(var(--sombra), .18); }
.campo { display: grid; gap: 6px; font-weight: 700; min-width: 0; }
.campo input, .campo select {
  font: inherit; font-weight: 500; font-size: 1.1rem; color: var(--tinta); width: 100%;
  padding: 12px 16px; border-radius: 10px; border: 2px solid #e6dcca; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px rgba(31, 138, 91, .16); }
.fila-campos { display: grid; grid-template-columns: minmax(0, 1fr) 152px; gap: 12px; }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--tinta-suave); line-height: 1.4; }
.check input { width: 22px; height: 22px; accent-color: var(--verde); flex: none; margin-top: 1px; }
.check a { color: var(--verde); font-weight: 700; }
.aviso-dos-emails { background: var(--menta-p) var(--grano); border-radius: 3px; padding: 12px 14px; font-size: .98rem; line-height: 1.45; transform: rotate(.5deg); box-shadow: 0 2px 4px rgba(var(--sombra), .12); }
.error { margin: 0; color: var(--rojo); font-weight: 700; }

/* ---------- destinatarios (polaroids) ---------- */
.bloque-destino { width: min(1020px, 100%); display: grid; gap: 26px; justify-items: center; }
.titulo-pantalla {
  margin: 0; text-align: center; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.7rem, 5vw, 2.8rem); line-height: 1.08; text-wrap: balance; color: var(--tinta);
  background: var(--papel) var(--grano); padding: 10px 26px; border-radius: 3px; box-shadow: var(--papel-sombra); transform: rotate(-1deg);
}
.destinos { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px 18px; }
.destino {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 10px 14px; text-align: center; border: 0;
  background: #fff var(--grano); border-radius: 3px; box-shadow: var(--papel-sombra);
  transform: rotate(var(--r, -2deg));
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s;
}
.destino:nth-child(2) { --r: 1.8deg; } .destino:nth-child(3) { --r: -1deg; } .destino:nth-child(4) { --r: 2.4deg; } .destino:nth-child(5) { --r: -2.6deg; }
.destino .cinta { top: -12px; left: calc(50% - 40px); width: 80px; height: 24px; transform: rotate(3deg); }
.destino:hover { transform: rotate(0) translateY(-8px) scale(1.04); box-shadow: 0 2px 2px rgba(var(--sombra), .1), 0 30px 40px -18px rgba(var(--sombra), .55); }
.destino[aria-checked="true"] { transform: rotate(0) scale(1.06); box-shadow: 0 0 0 5px var(--oro), var(--papel-sombra); }
.destino-foto { width: 100%; aspect-ratio: 1; max-width: 100%; display: grid; place-items: end center; background: var(--fondo, var(--menta-p)) var(--grano); overflow: hidden; }
.destino-foto svg { width: 92%; height: auto; }
.destino-nombre { margin-top: 6px; font-family: var(--f-mano); font-size: 1.55rem; line-height: 1.05; color: var(--tinta); }
.destino-lema { font-size: .9rem; color: var(--tinta-suave); line-height: 1.25; }

/* ---------- carta ---------- */
.pantalla-carta { flex-direction: column; justify-content: flex-start; gap: 22px; }
#p-carta { padding-top: calc(var(--barra-espacio, 100px) + 42px); }
.carta {
  position: relative; isolation: isolate; width: min(740px, 100%);
  padding: 48px clamp(18px, 5vw, 50px) 38px clamp(52px, 9vw, 86px);
  background-color: var(--hoja-color);
  background-image: var(--hoja-fondo);
  background-position: 0 0, 0 0, 0 12px;
  border-radius: 3px;
  box-shadow: var(--papel-sombra);
  transform: rotate(-.5deg);
  font-family: var(--f-mano); color: var(--tinta);
}
/* La hoja de respaldo no debe cubrir el rayado de la carta. */
.carta::before { content: none; }
.carta > .cinta { top: -13px; left: 40px; transform: rotate(-5deg); }
.carta > .cinta.d { left: auto; right: 120px; transform: rotate(4deg); }
.acebo { position: absolute; top: -26px; left: -22px; width: 104px; transform: rotate(-14deg); z-index: 4; }
.sello { position: absolute; top: 34px; right: clamp(12px, 3vw, 28px); width: 82px; transform: rotate(6deg); filter: drop-shadow(0 4px 4px rgba(var(--sombra), .22)); }
.sello svg { width: 100%; height: auto; }
.carta-saludo { margin: 0 110px 10px 0; font-size: clamp(2rem, 6vw, 2.6rem); color: var(--rojo); line-height: 1.1; }
.carta-linea { display: block; margin: 0 0 6px; font-size: clamp(1.35rem, 4vw, 1.6rem); line-height: 42px; }
.carta-linea strong { color: var(--verde); font-weight: 400; }
.portado { margin: 6px 0 10px; }
.portado input[type="range"] { width: min(380px, 100%); accent-color: var(--verde); height: 30px; }

.deseos { list-style: none; margin: 0; padding: 0; display: grid; }
.deseo {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px;
  min-height: 42px; font-size: clamp(1.5rem, 4.6vw, 1.85rem); line-height: 1.2;
  animation: deseoPop .7s cubic-bezier(.2, 1.5, .4, 1) both;
}
.deseo-emoji {
  width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.5rem; font-family: system-ui, sans-serif;
  background: #fff; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(var(--sombra), .22);
  animation: girarPoco 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s);
}
.deseo-texto { min-width: 0; overflow-wrap: anywhere; }
.deseo-borrar { border: 0; background: var(--rosa); color: var(--rojo); width: 34px; height: 34px; border-radius: 50%; font-family: var(--f-texto); font-weight: 800; font-size: 1rem; opacity: .8; }
.deseo-borrar:hover { opacity: 1; transform: rotate(90deg); transition: transform .2s; }
.deseo.saliendo { animation: deseoFuera .35s ease-in both; }
.deseos-vacio { margin: 0; font-size: 1.35rem; color: var(--tinta-suave); line-height: 42px; }

.anadir {
  display: flex; gap: 10px; align-items: center; margin: 14px 0 2px;
  background: #fff; border: 2px dashed #e1d3bb; border-radius: 999px; padding: 6px 6px 6px 18px;
  font-family: var(--f-texto);
}
.anadir:focus-within { border-color: var(--verde); border-style: solid; box-shadow: 0 0 0 4px rgba(31, 138, 91, .14); }
.anadir input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-family: var(--f-mano); font-size: 1.5rem; color: var(--tinta); }
.contador { margin: 4px 0 0 6px; min-height: 1.4em; font-family: var(--f-texto); font-size: .95rem; color: var(--tinta-suave); }
.extra { margin-top: 18px; }
.campo-mano { display: block; box-sizing: border-box; width: 100%; min-width: 0; border: 2px dashed #e1d3bb; border-radius: 20px; background-color: #fff; resize: vertical; font-family: var(--f-mano); font-size: 1.45rem; color: var(--tinta); line-height: 42px; padding: 6px 16px; }
.campo-mano::placeholder { color: var(--tinta-suave); opacity: 1; }
.campo-mano:focus { outline: none; border-color: var(--verde); border-style: solid; box-shadow: 0 0 0 4px rgba(31, 138, 91, .14); }
textarea.campo-mano { background-image: repeating-linear-gradient(180deg, transparent 0 41px, var(--raya) 41px 42px); background-origin: content-box; background-clip: padding-box; }

.dibujo { margin-top: 22px; }
.dibujo summary { list-style: none; cursor: pointer; display: inline-block; }
.dibujo summary::-webkit-details-marker { display: none; }
.dibujo summary .boton { pointer-events: none; }
.lienzo-caja { margin-top: 14px; display: grid; gap: 10px; }
#lienzo { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; height: auto; background: #fff; border-radius: 4px; touch-action: none; cursor: crosshair; box-shadow: 0 0 0 6px #fff, 0 6px 14px rgba(var(--sombra), .2); }
.paleta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--f-texto); }
.color { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(var(--sombra), .25); background: var(--col); }
.color[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--tinta); transform: scale(1.12); }
.herr { border: 0; background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 700; box-shadow: 0 2px 4px rgba(var(--sombra), .2); }
.herr[aria-pressed="true"] { background: var(--tinta); color: #fff; }

.carta-firma { margin: 26px 0 0; text-align: right; font-size: 1.5rem; line-height: 1.4; }
.carta-firma span { font-size: 2.1rem; color: var(--rojo); }
.galleta { position: absolute; left: -18px; bottom: -22px; width: 70px; border: 0; background: none; padding: 0; transform: rotate(-12deg); transform-origin: 50% 90%; z-index: 4; }
.galleta svg { width: 100%; height: auto; }
.galleta.saluda { animation: saludo .8s ease-in-out 2; }

.enviar-barra { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; justify-content: center; width: 100%; }
.enviar-barra .boton:not(:disabled) { animation: latido 1.8s ease-in-out infinite; }

/* ---------- envío: plegado en tres y sobre ---------- */
.envio { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 18px; pointer-events: none; }
.escenario-sobre { position: relative; width: 300px; height: 440px; perspective: 1100px; }
.carta-mini { position: absolute; z-index: 5; left: 20px; top: 0; width: 260px; height: 360px; transform-style: preserve-3d; }
.pliegue { position: absolute; left: 0; width: 260px; height: 120px; transform-style: preserve-3d; }
.pliegue.sup { top: 0; transform-origin: 50% 100%; }
.pliegue.med { top: 120px; }
.pliegue.inf { top: 240px; transform-origin: 50% 0; }
.pliegue > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pliegue .cara { background: var(--papel) var(--grano); box-shadow: inset 0 0 0 1px rgba(var(--sombra), .05); }
.pliegue .dorso { background: #f8eedf var(--grano); transform: rotateX(180deg); box-shadow: inset 0 0 0 1px rgba(var(--sombra), .07); }
.pliegue.sup .dorso { box-shadow: inset 0 -3px 0 rgba(var(--sombra), .06); }
.cm-hoja {
  position: absolute; left: 0; width: 260px; height: 360px; padding: 22px 18px 0 30px;
  font-family: var(--f-mano); color: var(--tinta); font-size: 16px; line-height: 24px;
  background-image: linear-gradient(90deg, transparent 21px, var(--margen) 21px, var(--margen) 22px, transparent 22px), repeating-linear-gradient(180deg, transparent 0 23px, var(--raya) 23px 24px);
  background-position: 0 0, 0 22px;
}
.cm-hoja p { margin: 0; }
.cm-hoja .cm-saludo { color: var(--rojo); font-size: 19px; }
.cm-hoja ul { margin: 0; padding: 0; list-style: none; }
.cm-hoja li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-hoja .cm-firma { position: absolute; right: 18px; bottom: 22px; color: var(--rojo); font-size: 20px; }

.sobre { position: absolute; z-index: 1; left: 0; top: 240px; width: 300px; height: 196px; perspective: 900px; }
.sobre > div { position: absolute; }
.s-fondo { inset: 0; border-radius: 8px; background: #f3d9cb var(--grano); box-shadow: 0 26px 40px -18px rgba(var(--sombra), .6); z-index: 1; }
.s-solapa {
  left: 0; top: 0; width: 300px; height: 118px; z-index: 2; transform-origin: 50% 0;
  background: #f6c7d3 var(--grano);
  clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%);
  transform: rotateX(180deg);
}
.s-solapa.cerrada { background-color: #ffd3df; }
.s-carta {
  left: 20px; top: 36px; width: 260px; height: 120px; z-index: 3; border-radius: 2px;
  background: #f8eedf var(--grano); box-shadow: 0 2px 6px rgba(var(--sombra), .2), inset 0 -3px 0 rgba(var(--sombra), .06);
}
.s-bolsillo {
  inset: 0; z-index: 4; border-radius: 8px; overflow: hidden;
  background:
    linear-gradient(to top right, #f8e2d4 49.6%, transparent 50%) left bottom / 50.4% 54% no-repeat,
    linear-gradient(to top left, #f8e2d4 49.6%, transparent 50%) right bottom / 50.4% 54% no-repeat;
}
.s-bolsillo::before, .s-bolsillo::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; background-image: var(--grano); }
.s-bolsillo::before { left: 0; background-color: #fbe7db; clip-path: polygon(0 0, 88% 53%, 0 100%); }
.s-bolsillo::after { right: 0; background-color: #f7dccd; clip-path: polygon(100% 0, 12% 53%, 100% 100%); }
.s-bolsillo i { position: absolute; inset: 0; background: #f8e2d4 var(--grano); clip-path: polygon(0 100%, 50% 47%, 100% 100%); }
.s-lacre {
  left: 50%; top: 82px; width: 62px; height: 62px; margin-left: -31px; z-index: 7; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6b7d, var(--rojo) 55%, var(--rojo-osc));
  color: #ffd3dc; font-size: 1.9rem; display: grid; place-items: center; transform: scale(0);
  box-shadow: 0 0 0 5px rgba(226, 52, 63, .22), 0 6px 10px rgba(0, 0, 0, .2);
}
.envio-texto {
  margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.3rem, 4.6vw, 1.9rem); color: var(--tinta); text-align: center;
  background: var(--papel) var(--grano); padding: 8px 22px; border-radius: 3px; box-shadow: var(--papel-sombra); transform: rotate(-1deg);
}

/* ---------- final ---------- */
.tarjeta-fin { width: min(620px, 100%); padding: 38px clamp(18px, 5vw, 40px) 30px; display: grid; gap: 14px; justify-items: center; text-align: center; transform: rotate(.6deg); }
.tarjeta-fin > .cinta { top: -13px; left: calc(50% - 56px); transform: rotate(-3deg); }
.tarjeta-fin .pegatina.izq { left: -40px; bottom: -34px; width: 104px; transform: rotate(-10deg); }
.tarjeta-fin .pegatina.der { right: -34px; bottom: -30px; width: 98px; transform: rotate(9deg); }
.titulo-fin { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.02; color: var(--rojo); text-wrap: balance; }
.fin-texto { margin: 0; font-size: 1.2rem; line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.certificado { display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; background: #fff7e2 var(--grano); border: 2px dashed var(--oro); border-radius: 4px; padding: 14px 16px; }
.certificado strong { display: block; font-family: var(--f-display); font-size: 1.05rem; }
.certificado span { display: block; font-size: .98rem; color: var(--tinta-suave); line-height: 1.35; }
.cert-sello { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: #fff; background: radial-gradient(circle at 35% 30%, #ffe08a, var(--oro) 55%, var(--oro-osc)); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--oro); animation: girar 12s linear infinite; }
.fin-padres { margin: 0; font-weight: 700; color: var(--verde); font-size: 1.1rem; }
.fin-botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- modales y burbuja ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(28, 52, 72, .35); backdrop-filter: blur(3px); }
.modal-caja { width: min(440px, 100%); padding: 30px 24px 26px; text-align: center; display: grid; gap: 10px; justify-items: center; animation: posar .5s cubic-bezier(.2, 1, .3, 1) both; }
.modal-caja > .cinta { top: -13px; left: calc(50% - 56px); }
.modal-caja h2 { margin: 0; font-family: var(--f-display); font-size: 1.7rem; }
.modal-caja p { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.modal-emoji { font-size: 3.4rem; line-height: 1; }
.carbon-bote { animation: boing 1s cubic-bezier(.2, 1.6, .4, 1) infinite; }

.burbuja {
  position: fixed; z-index: 35; max-width: min(300px, calc(100vw - 32px));
  background: var(--papel) var(--grano); color: var(--tinta); border-radius: 18px; padding: 10px 16px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; text-align: center;
  box-shadow: 0 0 0 3px #fff, 0 12px 24px -10px rgba(var(--sombra), .6);
  transform: translate(-50%, calc(-100% - 18px)); pointer-events: none;
  animation: burbuja .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.burbuja::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 18px; height: 18px; margin-left: -9px; background: var(--papel); transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 3px 3px 0 0 #fff; }
.burbuja.arriba { transform: translate(-50%, 0); }
.burbuja.arriba::after { display: none; }

.chispa-ui { position: fixed; z-index: 36; pointer-events: none; width: 12px; height: 12px; background: var(--col); animation: chispa 1s ease-out forwards; box-shadow: 0 0 0 1.5px #fff; }
.chispa-ui.f0 { border-radius: 50%; }
.chispa-ui.f1 { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); box-shadow: none; width: 16px; height: 16px; }
.chispa-ui.f2 { width: 8px; height: 14px; border-radius: 2px; }

/* ---------- animaciones ---------- */
@keyframes caer { from { transform: translateY(-140px) rotate(-30deg) scale(.6); opacity: 0; } to { transform: rotate(var(--r)); opacity: 1; } }
@keyframes voltear { 0% { transform: rotate(var(--r)) rotateY(0) scale(1); } 50% { transform: rotate(var(--r)) rotateY(180deg) scale(1.25); } 100% { transform: rotate(var(--r)) rotateY(360deg) scale(1); } }
@keyframes boing { 0% { transform: scale(1); } 30% { transform: scale(1.35, .7) translateY(10px); } 60% { transform: scale(.85, 1.25) translateY(-16px) rotate(8deg); } 100% { transform: scale(1); } }
@keyframes posar { 0% { opacity: 0; translate: 0 -46px; scale: 1.08; rotate: -4deg; } 60% { opacity: 1; translate: 0 4px; scale: .99; } 100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } }
@keyframes levantar { to { opacity: 0; translate: 0 -30px; rotate: 3deg; scale: 1.04; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes girarPoco { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes deseoPop { 0% { opacity: 0; transform: scale(.4) translateY(-20px) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes deseoFuera { to { opacity: 0; transform: translateX(60px) rotate(8deg); } }
@keyframes latido { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes saludo { 0%, 100% { transform: rotate(-12deg); } 25% { transform: rotate(-30deg) scale(1.2); } 75% { transform: rotate(8deg) scale(1.2); } }
@keyframes burbuja { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes chispa { from { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(260deg) scale(.4); } }

@media (max-width: 560px) {
  .fila-campos { grid-template-columns: minmax(0, 1fr) 152px; }
  .carta { transform: none; padding-top: 42px; }
  .carta-saludo { margin-right: 84px; }
  .sello { width: 66px; top: 28px; }
  .acebo { width: 80px; top: -20px; left: -12px; }
  .destinos { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .destino:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
  .chip { font-size: .8rem; padding: 6px 10px; }
  .marca span { display: none; }
  .tarjeta-adulto .pegatina { width: 74px; right: 10px; top: -46px; }
  .tarjeta-fin .pegatina.izq { left: -14px; width: 78px; }
  .tarjeta-fin .pegatina.der { right: -10px; width: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Controles hermanos: mismo trazo y tamaño, sin mezclar emojis con iconos. */
.chip-boton svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#cuenta-atras { min-width: 255px; text-align: center; transform: rotate(var(--cuenta-giro, -3deg)); backface-visibility: hidden; }
.boton { text-decoration: none; }
/* Acceso secundario con un tamaño cómodo para leerlo y pulsarlo. */
.acceso-localizador {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 11px 22px; border: 2px dashed var(--verde); border-radius: 12px 16px 11px 15px;
  background: var(--papel) var(--grano); color: var(--tinta); font-family: var(--f-display);
  font-size: 1.1rem; font-weight: 700; line-height: 1.3; text-decoration: none;
  box-shadow: var(--papel-sombra);
}
.acceso-localizador:hover { background-color: var(--menta-p); }
@media (hover: hover) and (pointer: fine) {
  body { cursor: url('cursor-galleta.png?v=1') 5 4, url('cursor-galleta.svg?v=4') 5 4, auto; }
  button:not(:disabled), a, .titulo .letra { cursor: url('cursor-galleta.png?v=1') 5 4, url('cursor-galleta.svg?v=4') 5 4, pointer; }
}
@media (max-width: 560px) { #cuenta-atras { min-width: 0; } }

/* Ráfagas pequeñas de nieve de papel junto al punto de pulsación. */
.copos-click { position: fixed; z-index: 100; width: 0; height: 0; pointer-events: none; }
.copos-click span {
  position: absolute; left: 0; top: 0; width: var(--copo-tamano); height: var(--copo-tamano);
  margin: 0; translate: -50% -50%; color: #f4fcff; pointer-events: none;
  filter: drop-shadow(1px 0 0 #4d8199) drop-shadow(-1px 0 0 #4d8199) drop-shadow(0 2px 2px #1c344866);
  animation: copoAlPulsar 1.1s ease-out both;
}
.copos-click svg { width: 100%; height: 100%; }
@keyframes copoAlPulsar {
  from { opacity: 0; transform: translate(0, 0) rotate(0) scale(.45); }
  12%, 40% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--copo-x), var(--copo-y)) rotate(var(--copo-giro)) scale(.7); }
}
@media (prefers-reduced-motion: reduce) { .copos-click { display: none; } }

/* Lámina de colores y texto visible: no confundir daltonismo con ocultar la pantalla. */
.chip-etiquetado { width: auto; display: inline-flex; gap: 7px; padding: 0 11px; border-radius: 14px; font-size: .85rem; }
.chip-etiquetado span { white-space: nowrap; }
.chip-etiquetado svg { flex: none; }
@media (max-width: 560px) { .chip-etiquetado { padding: 0 8px; gap: 5px; font-size: .78rem; } }

#btn-audio[aria-pressed="false"] .audio-ondas,
#btn-audio[aria-pressed="true"] .audio-silencio { display: none; }

/* Edad: etiqueta de regalo y opciones con la misma tipografía de la carta. */
.campo-edad { position: relative; align-content: start; }
.campo-edad small { font-size: .75rem; font-weight: 500; }
.edad-boton {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 54px; padding: 10px;
  border: 2px solid var(--verde); border-radius: 10px; color: var(--tinta);
  background: var(--papel) var(--grano); box-shadow: 0 3px 0 rgba(var(--sombra), .12);
  font-family: var(--f-display); font-size: 1rem; font-weight: 700;
}
.edad-boton span { flex: 1; text-align: left; white-space: nowrap; }
.edad-estrella { width: 19px; height: 19px; flex: none; fill: var(--oro); stroke: var(--tinta); stroke-width: 1.2; }
.edad-flecha { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.edad-boton[aria-expanded="true"] .edad-flecha { transform: rotate(180deg); }
.edad-opciones {
  position: absolute; top: 100%; right: 0; z-index: 5; margin-top: 7px; padding: 10px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
  width: min(280px, calc(100vw - 64px)); max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  border: 3px solid var(--verde); border-radius: 14px; background: var(--papel) var(--grano);
  box-shadow: 0 8px 20px rgba(var(--sombra), .25); font-family: var(--f-display);
}
.edad-opcion { min-height: 44px; padding: 10px 4px; text-align: center; border: 2px dashed #e6dcca; border-radius: 8px; font-weight: 700; }
.edad-opcion:first-child { grid-column: 1 / -1; }
.edad-opcion[aria-selected="true"] { background: var(--menta-p); border-style: solid; border-color: var(--verde); }
.edad-opcion[aria-selected="true"]::after { content: " ✓"; }
.edad-opcion:hover, .edad-opcion.activa { outline: 2px solid var(--tinta); outline-offset: -2px; background: var(--menta-p); }
@media (max-width: 400px) { .fila-campos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .edad-flecha { transition: none; } }

/* Copos de papel rematan las esquinas de los paneles translúcidos. */
.barra-der, .viaje-cabecera { position: relative; }
.hero::after, .barra-der::after, .seguimiento-barra::after, .viaje-cabecera::after, .viaje-curiosidad::after, .viaje-error::after, .viaje-mapa::after {
  content: ""; position: absolute; inset: -8px; pointer-events: none; border-radius: inherit;
  background: url('borde-nieve.svg') left top/28px 28px no-repeat, url('borde-nieve.svg') right top/28px 28px no-repeat, url('borde-nieve.svg') left bottom/28px 28px no-repeat, url('borde-nieve.svg') right bottom/28px 28px no-repeat;
}
.seguimiento-barra::after { inset: 0; background-size: 23px 23px; }

.viaje-mapa::after { inset: 12px; }

.btn-compartir svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.compartir-dialogo{width:min(500px,calc(100% - 28px));max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:20px;color:var(--tinta);background:var(--papel);box-shadow:var(--papel-sombra);overflow:auto}.compartir-dialogo::backdrop{background:#22483d55;backdrop-filter:blur(5px)}.compartir-caja{position:relative;padding:30px 22px;display:grid;gap:14px}.compartir-caja h2{margin:0 35px 0 0;font:800 1.7rem var(--f-display)}.compartir-caja p{margin:0;line-height:1.4}.compartir-cerrar{position:absolute;right:10px;top:10px;width:44px;height:44px;font-size:1.5rem}.compartir-redes{display:flex;flex-wrap:wrap;gap:12px}.compartir-redes a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}.compartir-caja textarea{width:100%;padding:12px;border:2px solid var(--menta-osc);border-radius:12px;color:var(--tinta);background:#fff;font:1rem/1.4 var(--f-texto);resize:vertical}.compartir-ayuda,.compartir-estado{font-size:.9rem}.compartir-caja [data-copiar]{white-space:normal}.compartir-estado{color:var(--verde-osc)}
@media(max-width:760px){.seguimiento-barra{flex-wrap:wrap}.seguimiento-barra>a{flex-basis:100%}.seguimiento-barra .btn-compartir{padding:0 8px}}

/* Barra móvil: una fila para calendario/idioma y otra para las tres opciones. */
.pantalla { padding-top: var(--barra-espacio, calc(84px + env(safe-area-inset-top, 0px))); }
@media (max-width: 760px) {
  .barra {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 7px 4px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 9px max(10px, env(safe-area-inset-left, 0px));
    background: rgba(255, 250, 242, .94); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .9); border-radius: 0 0 18px 18px;
    box-shadow: 0 4px 18px rgba(var(--sombra), .12);
  }
  .barra .marca { grid-column: 1 / 3; grid-row: 1; justify-self: start; justify-content: center; width: 44px; min-height: 44px; padding: 5px; transform: none; }
  .barra .marca span { display: none; }
  .barra .marca svg { flex: none; }
  .barra .barra-der { display: contents; }
  .barra-der::after { display: none; }
  .barra #cuenta-atras {
    grid-column: 3 / 11; grid-row: 1; min-width: 0; min-height: 44px; margin: 0; padding: 5px 2px;
    display: grid; align-items: center; background: transparent; box-shadow: none;
    font-size: .8rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere;
  }
  .barra .chip-etiquetado {
    grid-row: 2; width: 100%; min-width: 0; height: auto; min-height: 58px; padding: 7px 4px;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    border-radius: 12px; font-size: .78rem; line-height: 1.2;
  }
  .barra .chip-etiquetado span { white-space: normal; overflow-wrap: anywhere; text-align: center; }
  .barra .chip-etiquetado svg { width: 23px; height: 23px; }
  .barra .btn-compartir { grid-column: 1 / 5; }
  .barra #btn-audio { grid-column: 5 / 9; }
  .barra #btn-daltonismo { grid-column: 9 / 13; }
  .barra .chip-boton[aria-pressed="false"]::after { bottom: auto; top: 29px; width: 13px; }
  .barra .idioma-menu { grid-column: 11 / 13; grid-row: 1; justify-self: end; min-width: 0; }
  .barra .idioma-actual { justify-content: center; width: 44px; min-height: 44px; padding: 6px; border-radius: 10px; }
  .barra .idioma-actual span { display: none; }
  .barra .idioma-lista { top: calc(100% + 6px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 85px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  .pantalla { padding-top: var(--barra-espacio, calc(152px + env(safe-area-inset-top, 0px))); }
  .hero { margin-top: 0; }
}

/* Contador persistente fuera de las pantallas y de sus animaciones. */
#p-inicio{flex-direction:column;gap:16px}
.buzon-contenedor{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:grid;width:144px;margin:0;z-index:15;isolation:isolate}
.buzon-cartas{position:relative;width:144px;height:190px;padding:0;border:0;background:transparent;color:var(--tinta);filter:drop-shadow(0 4px 3px #173e2a25)}
.buzon-arte{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(3px 0 #fff) drop-shadow(-3px 0 #fff) drop-shadow(0 3px #fff) drop-shadow(0 -3px #fff)}
.buzon-arte svg{width:100%;height:100%;overflow:visible}
.buzon-tapa{transform-box:fill-box;transform-origin:center bottom}
.buzon-centro{position:absolute;left:6%;top:64%;width:88%;min-height:54px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px;border-radius:9px;background:var(--papel);border:3px solid #fff;box-shadow:0 2px 5px #173e2a30;color:var(--tinta);pointer-events:none;transform:rotate(-3deg)}
.buzon-centro strong{display:block;width:100%;font:800 clamp(.65rem,calc(140px / var(--buzon-caracteres,1)),1.6rem)/1.1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;letter-spacing:-.03em}
.buzon-centro>span{font:700 .7rem/1.15 var(--f-display);text-align:center}
.buzon-cartas:focus-visible{outline:3px solid var(--oro-osc);outline-offset:5px;border-radius:16px}
@media(min-width:761px) and (max-height:739px){.buzon-cartas{width:112px;height:148px}.buzon-contenedor{width:112px}.buzon-centro{min-height:44px;padding:4px}.buzon-centro strong{font-size:1.2rem}.buzon-centro>span{font-size:.6rem}}
@media(max-width:760px){.buzon-contenedor{right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:88px}.buzon-cartas{width:88px;height:116px}.buzon-centro{min-height:38px;padding:3px;gap:1px}.buzon-centro strong{font-size:clamp(.65rem,calc(80px / var(--buzon-caracteres,1)),1.1rem)}.buzon-centro>span{font-size:.6rem}.pantalla{padding-bottom:calc(142px + env(safe-area-inset-bottom,0px))}}
@media(min-width:761px) and (max-width:1000px){.pantalla{padding-bottom:calc(218px + env(safe-area-inset-bottom,0px))}}
.volver-inicio{justify-self:start;display:inline-flex;align-items:center;min-height:44px;width:max-content;max-width:100%;padding:8px 12px;transform:none;text-decoration:none}
.pantalla-carta>.volver-inicio{width:min(740px,100%);align-self:center;justify-content:flex-start}


/* Retratos alternos para acompañar el momento del adulto. */
.familia-adulto{height:96px;perspective:600px}
.familia-giro{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;animation:familiaVoltear 9s ease-in-out infinite}
.familia-cara{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.familia-cara svg{width:100%;height:100%;object-fit:contain}
.familia-padre{transform:rotateY(180deg)}
@keyframes familiaVoltear{0%,40%{transform:rotateY(0)}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@media(max-width:760px){.familia-adulto{height:79px}}
@media(prefers-reduced-motion:reduce){.familia-giro{animation:none}.familia-padre{display:none}}

/* Papel de libreta compartido por las hojas, sin transparentar sus textos. */
:root{--hoja-color:rgba(255,250,242,.88);--hoja-fondo:var(--grano),linear-gradient(90deg,transparent 20px,rgba(255,179,193,.65) 20px 22px,transparent 22px),repeating-linear-gradient(180deg,transparent 0 31px,rgba(207,220,242,.6) 31px 32px)}
.papel,.tarjeta,.cm-hoja,.pliegue .cara{background-color:var(--hoja-color);background-image:var(--hoja-fondo);background-position:0 0,0 0,0 12px}
.tarjeta::before{background:transparent}
.tarjeta-adulto{background-color:var(--hoja-color);background-image:var(--hoja-fondo)}
/* Se conserva un input nativo: teclado, foco y validación funcionan igual. */
.check input{appearance:none;-webkit-appearance:none;width:28px;height:28px;border:2px solid var(--verde);border-radius:7px;background:var(--papel);cursor:pointer;position:relative}
.check input:checked{border-color:var(--verde);background:var(--papel)}
.check input:checked::after{content:"";position:absolute;inset:-5px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M8 17l7 9L29 8a4 4 0 0 0-6-5l-2 3' fill='none' stroke='%23fff' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 17l7 9L29 8a4 4 0 0 0-6-5l-2 3' fill='none' stroke='%23e2343f' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 17l7 9L29 8a4 4 0 0 0-6-5l-2 3' fill='none' stroke='%23fffaf2' stroke-width='5' stroke-dasharray='3 5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 1px #173e2a30)}
@media(forced-colors:active){.check input{appearance:auto}.check input:checked::after{display:none}}
#fin-localizador-bloque{width:min(480px,100%);padding:10px 12px;background:var(--menta-p) var(--grano);border:2px solid #fff;border-radius:12px;display:grid;gap:3px;text-align:center}
.fin-localizador-fila{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:8px;min-width:0;width:100%}
.fin-localizador-fila code{min-width:0}
.fin-localizador-fila button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;flex:none;padding:8px;transform:none}
.fin-localizador-fila #btn-copiar-localizador{grid-column:2;grid-row:1}
.fin-localizador-fila svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#fin-copia-estado{font-size:.85rem;line-height:1.2}
#fin-copia-estado:empty{display:none}
@media(max-width:360px){.fin-localizador-fila{gap:6px}}

.fin-recordatorio{margin:6px 0 0;font:1.1rem/1.2 var(--f-mano);color:var(--tinta)}

/* Aviso de consentimiento: dos pulsos suaves; la casilla permanece visible. */
.check input[aria-invalid="true"] { outline:3px solid var(--rojo-osc); outline-offset:4px; }
.check input.privacidad-pulso { animation:privacidadAviso 1.4s ease-out; }
@keyframes privacidadAviso {
  0%,50%,100% { box-shadow:0 0 0 0 transparent; }
  25%,75% { box-shadow:0 0 0 9px #e9ad3b66; }
}
@media(prefers-reduced-motion:reduce) { .check input.privacidad-pulso { animation:none; } }

/* Explorar: la misma escena, con el centro libre para tocar el decorado. */
.explorar-acceso{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:2px solid white;border-radius:14px;background:#e0f1e9;color:var(--verde);font-weight:700;box-shadow:0 3px 0 #bfd7c8}
.explorar-acceso svg{width:22px;height:22px;fill:#f4b73f;stroke:#8b631c;stroke-width:1.5;flex:none}.explorar-acceso:hover{background:#cde9d9}
.pantalla-explorar{padding:0;align-items:flex-start;justify-content:center}
body.modo-explorar #p-explorar{padding:0}.modo-explorar .ui{overflow:hidden}
.explorar-pista{position:absolute;top:var(--barra-espacio,90px);margin:0 16px;padding:7px 14px;max-width:calc(100% - 32px);border:2px solid white;border-radius:14px;background:#fffaf2e6;box-shadow:var(--papel-sombra);font-size:.95rem;text-align:center;pointer-events:none}
.explorar-volver{position:fixed;z-index:16;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(var(--cookies-alto,0px) + 16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:calc(100% - 130px);min-height:48px;padding:12px 18px;font-size:1rem}
.explorar-volver svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.modo-explorar .barra .marca,.modo-explorar #cuenta-atras,.modo-explorar .barra [data-compartir]{display:none}.modo-explorar .barra{display:flex;justify-content:flex-end;background:transparent;border:0;box-shadow:none;backdrop-filter:none}.modo-explorar .barra .barra-der{display:flex;margin-left:auto}.modo-explorar .barra .chip-etiquetado{width:auto;min-width:60px;min-height:48px;padding:6px 9px}
@media(max-width:600px){.explorar-pista{font-size:.83rem;padding:6px 10px}.explorar-volver{left:max(10px,env(safe-area-inset-left,0px));max-width:calc(100% - 114px);padding:10px 12px;font-size:.9rem}}
.explorar-acceso,.explorar-volver{animation:explorar-tintineo 8s ease-in-out infinite;transform-origin:center}
@keyframes explorar-tintineo{0%,85%,100%{transform:rotate(0) scale(1)}88%,94%{transform:rotate(-3deg) scale(1.035)}91%,97%{transform:rotate(3deg) scale(1.035)}}
.explorar-acceso:hover,.explorar-acceso:focus-visible,.explorar-volver:hover,.explorar-volver:focus-visible{animation:none}
@media(prefers-reduced-motion:reduce){.explorar-acceso,.explorar-volver{animation:none}}

/* Etiquetas completas, incluso en idiomas con frases más largas. */
[data-ajustar-linea] { display: block; width: 100%; white-space: nowrap; }
.carta-saludo { min-height: 100px; }
.cm-contenido { transform-origin: top left; overflow-wrap: anywhere; }
.cm-hoja li { white-space: normal; overflow: visible; }
.cm-hoja .cm-firma { position: static; text-align: right; }
.cm-dibujo { display: block; max-width: 100%; height: 65px; object-fit: contain; margin: 4px auto; }
.fin-nombre { color: var(--verde); font-weight: 900; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; }
.viaje-explorar { display: inline-flex; margin: 8px; text-decoration: none; }
@media (max-width: 560px) {
  .adulto-cabecera { padding-right: 0; gap: 10px; }
  .adulto-cabecera > div { min-width: 0; flex: 1; }
  .adulto-cabecera h2 { font-size: clamp(1.18rem, 5.4vw, 1.45rem); text-wrap: pretty; }
  .adulto-cabecera .candado { width: 36px; height: 36px; font-size: 1.4rem; }
  .carta-saludo { min-height: 82px; }
}

.deseo-ayuda { font:600 1rem/1.4 var(--f-texto); margin:8px 0; color:var(--verde-osc); }
@media(max-width:560px) {
  .anadir input::placeholder, #deseo-otro::placeholder, #mensaje::placeholder { font-size:clamp(1rem,3.8vw,1.15rem); }
}