:root {
  color-scheme: light;
  --papel: #fff9ed;
  --tinta: #394f43;
  --rosa: #ab5062;
  --fuente: "Courier New", Courier, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fuente); }
button { font: inherit; }
h1, h2, p { margin: 0; }
.contenedor-principal { width: 100%; }
.birthday-card { min-height: 100svh; }

.pantalla-inicio {
  min-height: 100svh; padding: 48px 24px; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; text-align: center; transition: opacity 450ms ease;
}
.pantalla-inicio.saliendo { opacity: 0; }
.flor-tarjeta { color: var(--rosa); font-size: 48px; }
.dedicatoria { font-size: 11px; letter-spacing: 0.18em; line-height: 1.8; }
h1 { max-width: 760px; font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1.15; }
h1 span { display: block; color: var(--rosa); margin-top: 8px; }
.invitacion { font-size: clamp(0.9rem, 2vw, 1.1rem); line-height: 1.7; }
.boton-iniciar {
  margin-top: 12px; padding: 17px 30px; border: 1px solid var(--rosa);
  background: #f7dfd7; color: #77394b; letter-spacing: 0.13em; cursor: pointer;
}
.boton-iniciar:hover { background: #f0cfc6; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 6px; }
.contenedor-escenas { padding: 36px 0 24px; }
.contenedor-escenas.apareciendo { animation: aparecer 650ms ease both; }
.encabezado-campus { padding: 0 20px 28px; text-align: center; }
h2 { margin-top: 10px; font-size: clamp(1.15rem, 3vw, 1.9rem); }
.nota-campus { padding: 22px 20px 0; text-align: center; font-size: 12px; }

.birthday-world {
  position: relative; container-type: inline-size; width: 100%; max-width: 1200px;
  aspect-ratio: 4 / 3; margin-inline: auto; overflow: hidden;
  background: #8bcde9; isolation: isolate;
}
.sky-layer, .distant-background, .campus-background, .trees-back,
.campus-ground, .path-layer, .flowers-back, .characters-back,
.characters-layer, .flowers-front, .effects-layer { position: absolute; inset: 0; }
.sky-layer { z-index: 0; }
.distant-background { z-index: 10; }
.campus-background { z-index: 20; }
.trees-back { z-index: 30; }
.campus-ground { z-index: 40; }
.path-layer { z-index: 50; }
.flowers-back { z-index: 60; }
.characters-back { z-index: 70; }
.characters-layer { z-index: 80; }
.flowers-front { z-index: 90; pointer-events: none; }
.effects-layer { z-index: 100; pointer-events: none; }
canvas { display: block; width: 100%; height: 100%; }
canvas, .birthday-world img { image-rendering: pixelated; }
.birthday-world img { max-width: 100%; }

.sun {
  position: absolute; left: 82%; top: 8%; width: 9%; height: 12%; background: #ffe5a1;
  clip-path: polygon(20% 0,80% 0,80% 10%,90% 10%,90% 20%,100% 20%,100% 80%,90% 80%,90% 90%,80% 90%,80% 100%,20% 100%,20% 90%,10% 90%,10% 80%,0 80%,0 20%,10% 20%,10% 10%,20% 10%);
  box-shadow: inset -1cqw -1cqw #f6cd80;
}
.sun::before { content: ""; position: absolute; left: 20%; top: 15%; width: 35%; height: 10%; background: #fff2bf; }
.sun-rays { position: absolute; inset: 0; background: #fff4cd; animation: brillo 5s steps(2) infinite; }
.cloud {
  position: absolute; width: 22%; height: 9%; background: #fffbed;
  clip-path: polygon(0 60%,10% 60%,10% 40%,20% 40%,20% 20%,30% 20%,30% 0,55% 0,55% 20%,65% 20%,65% 40%,85% 40%,85% 55%,95% 55%,95% 70%,100% 70%,100% 90%,85% 90%,85% 100%,10% 100%,10% 90%,0 90%);
  box-shadow: inset 0 -1cqw #d8e8e3;
  animation: nube 28s linear infinite alternate;
}
.cloud-one { left: 6%; top: 13%; }
.cloud-two { left: 50%; top: 10%; transform: scale(0.7); animation-duration: 33s; animation-delay: -25s; }

.character {
  --sprite-height: 12cqw;
  --sprite-width: 100%;
  --sprite-offset-y: 0%;
  --asset-scale: 1;
  --idle-duration: 8s;
  --idle-delay: -2s;
  --idle-lift: -0.1cqw;
  --idle-angle: 0.25deg;
  --scale: 1;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 11cqw;
  transform: translate(-50%, -100%);
  z-index: var(--depth, 1);
  text-align: center;
}
.character-visual { position: relative; height: calc(var(--sprite-height) * var(--scale)); }
.character-sprite {
  position: absolute; bottom: var(--sprite-offset-y); left: 50%;
  width: var(--sprite-width); height: calc(100% * var(--asset-scale)); transform: translateX(-50%);
  object-fit: contain; object-position: center bottom; image-rendering: pixelated;
}
.character-shadow {
  position: absolute; bottom: -0.3cqw; left: 27%; width: 46%; height: 1cqw;
  background: #71604e40;
  clip-path: polygon(0 30%,20% 30%,20% 0,80% 0,80% 30%,100% 30%,100% 70%,80% 70%,80% 100%,20% 100%,20% 70%,0 70%);
}
.character-shadow::after {
  content: ""; position: absolute; inset: 30% 22%; background: #5f51462e;
}
.character:not([data-sprite="loaded"]) .character-shadow { left: 37%; width: 26%; opacity: 0.65; }
.character-ground { display: none; position: absolute; bottom: -0.15cqw; left: 34%; width: 0.25cqw; height: 0.7cqw; background: #789f60; pointer-events: none; }
.character[data-sprite="loaded"]:is(.character--david, .character--mun, .character--emily, .character--ivan) .character-ground { display: none; }
.character-fallback {
  position: absolute; bottom: 0.6cqw; left: 50%; transform: translateX(-50%);
  width: 2.6cqw; height: 3.2cqw; background: #fff7dc; opacity: 0.8;
  clip-path: polygon(30% 0,70% 0,70% 15%,90% 15%,90% 60%,70% 60%,70% 80%,50% 100%,30% 80%,30% 60%,10% 60%,10% 15%,30% 15%);
}
.character-fallback::after { content: ""; position: absolute; inset: 25% 35% 50%; background: #8da77f; }
.nombre {
  display: block; position: relative; left: 50%; transform: translateX(-50%); margin: 0.6cqw 0 0;
  padding: 1px 0.45cqw; width: max-content;
  font-size: clamp(8px, 1.2cqw, 14px); font-weight: normal; line-height: 1.3;
  white-space: nowrap; color: #344d38; background: #fff8e5db;
  clip-path: polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 1px,100% 1px,100% calc(100% - 1px),calc(100% - 2px) calc(100% - 1px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 1px),0 calc(100% - 1px),0 1px,2px 1px);
}
.character--ada { --x: 18%; --y: 69%; --scale: 0.92; --depth: 3; --asset-scale: 1.0226; --sprite-offset-y: -1.412%; --idle-duration: 3.1s; --idle-delay: -1.37s; --idle-lift: -0.48cqw; --idle-angle: 1deg; --idle-sway: 0.1cqw; --entry-x: -2.2cqw; --entry-y: 0.6cqw; }
.character--daisy { --x: 35%; --y: 66%; --scale: 0.90; --depth: 2; --asset-scale: 1.0647; --sprite-offset-y: -2.059%; --idle-duration: 4.2s; --idle-delay: -4.11s; --idle-lift: -0.3cqw; --idle-angle: -0.8deg; --idle-sway: -0.14cqw; --entry-x: 2.2cqw; --entry-y: 0.5cqw; }
.character--alessandro { --x: 52%; --y: 65%; --scale: 0.91; --depth: 1; --asset-scale: 1.0647; --sprite-offset-y: -1.765%; --idle-duration: 4.5s; --idle-delay: -2.74s; --idle-lift: -0.32cqw; --idle-angle: 0.6deg; --idle-sway: 0.1cqw; --entry-x: -2cqw; --entry-y: 0.4cqw; }
.character--rey { --x: 71%; --y: 68%; --scale: 0.92; --depth: 2; --asset-scale: 1.0806; --sprite-offset-y: -2.687%; --idle-duration: 4.8s; --idle-delay: -12.33s; --idle-lift: -0.28cqw; --idle-angle: -0.55deg; --idle-sway: -0.08cqw; --entry-x: 2cqw; --entry-y: 0.4cqw; }
.character--valeria { --x: 32%; --y: 83%; --scale: 0.98; --depth: 4; --asset-scale: 1.0904; --sprite-offset-y: -3.313%; --idle-duration: 3.5s; --idle-delay: -13.70s; --idle-lift: -0.43cqw; --idle-angle: -0.85deg; --idle-sway: -0.1cqw; --entry-x: 2.2cqw; --entry-y: 0.6cqw; }
.character--david { --x: 22%; --y: 89%; --scale: 1; --depth: 3; --asset-scale: 1.0616; --sprite-offset-y: -2.639%; --idle-duration: 3.9s; --idle-delay: -6.85s; --idle-lift: -0.38cqw; --idle-angle: 0.7deg; --idle-sway: 0.12cqw; --entry-x: -2.2cqw; --entry-y: 0.6cqw; }
.character--dereck { --x: 74%; --y: 92%; --scale: 0.98; --depth: 2; --asset-scale: 1.0678; --sprite-offset-y: -2.655%; --idle-duration: 4.1s; --idle-delay: -8.22s; --idle-lift: -0.35cqw; --idle-angle: 0.65deg; --idle-sway: 0.1cqw; --entry-x: -2cqw; --entry-y: 0.6cqw; }
.character--mun { --x: 49%; --y: 83%; --scale: 1.05; --depth: 2; --asset-scale: 1.1003; --sprite-offset-y: -4.863%; --idle-duration: 2.9s; --idle-delay: -15.07s; --idle-lift: -0.5cqw; --idle-angle: -1.1deg; --idle-sway: 0.13cqw; --entry-x: 0cqw; --entry-y: 2.2cqw; }
.character--emily { --x: 83%; --y: 86%; --scale: 1; --depth: 4; --asset-scale: 1.1003; --sprite-offset-y: -3.647%; --idle-duration: 3.4s; --idle-delay: -9.59s; --idle-lift: -0.45cqw; --idle-angle: -0.9deg; --idle-sway: -0.12cqw; --entry-x: 2cqw; --entry-y: 0.6cqw; }
.character--darien { --x: 40%; --y: 98%; --scale: 0.98; --depth: 6; --asset-scale: 1.0432; --sprite-offset-y: -1.441%; --idle-duration: 4.4s; --idle-delay: -5.48s; --idle-lift: -0.32cqw; --idle-angle: 0.6deg; --idle-sway: 0.14cqw; --entry-x: -1.8cqw; --entry-y: 0.7cqw; }
.character--ivan { --x: 64%; --y: 98%; --scale: 0.98; --depth: 6; --asset-scale: 1.0616; --sprite-offset-y: -2.639%; --idle-duration: 4.7s; --idle-delay: -10.96s; --idle-lift: -0.3cqw; --idle-angle: -0.55deg; --idle-sway: -0.1cqw; --entry-x: 1.8cqw; --entry-y: 0.7cqw; }
.character--diego { --x: 89%; --y: 88%; --scale: 1; --depth: 5; --asset-scale: 1.0710; --sprite-offset-y: -2.663%; --idle-duration: 5s; --idle-delay: -0.00s; --idle-lift: -0.26cqw; --idle-angle: -0.6deg; --idle-sway: -0.12cqw; --entry-x: 2cqw; --entry-y: 0.5cqw; }
.character:is(.character--ada, .character--daisy, .character--alessandro, .character--rey, .character--crisception) .nombre {
  top: calc(-1 * (var(--sprite-height) * var(--scale) + 1.3em + 2px + 1.2cqw));
}
@media (max-width: 600px) {
  .character--valeria .nombre { left: calc(50% - 1cqw); }
  .character--emily .nombre { top: calc(-1 * (var(--sprite-height) * var(--scale) + 1.3em + 2px + 1.2cqw)); }
}
.character--nayeli { --x: 8%; --y: 85%; --scale: 0.98; --depth: 3; --asset-scale: 1.0462; --sprite-offset-y: -1.373%; --idle-duration: 4s; --idle-delay: -2.4s; --idle-lift: -0.32cqw; --idle-angle: 0.7deg; --idle-sway: 0.1cqw; --entry-x: -2cqw; --entry-y: 0.6cqw; }
.character--crisception { --x: 89%; --y: 64%; --scale: 0.91; --depth: 2; --asset-scale: 1.0379; --sprite-offset-y: -0.787%; --idle-duration: 4.6s; --idle-delay: -3.2s; --idle-lift: -0.3cqw; --idle-angle: -0.65deg; --idle-sway: -0.1cqw; --entry-x: 2cqw; --entry-y: 0.5cqw; }
.character--mun .nombre { color: #833d55; background: #fbe5dfe8; font-weight: bold; }
.character--mun .character-fallback { background: #f9d6d7; }
.character.is-hidden { visibility: hidden; pointer-events: none; }
.character:is(.is-walking, .is-talking, .is-happy, .is-jumping, .is-entering, .is-approaching, .is-hugging) .character-visual { transform-origin: center bottom; }
.flower { position: absolute; width: 0.65cqw; height: 1.4cqw; background: #427c51; }
.flower::before {
  content: ""; position: absolute; width: 0.65cqw; height: 0.65cqw; background: #ffeb9b;
  box-shadow: 0.65cqw 0 var(--petalo), -0.65cqw 0 var(--petalo), 0 -0.65cqw var(--petalo), 0 0.65cqw var(--petalo);
}
.flower.animada { transform-origin: bottom; animation: flor 4.5s steps(2) infinite; }
.particula { position: absolute; width: 0.65cqw; height: 0.65cqw; background: #fff9ba; opacity: 0; animation: luz 7s steps(5) infinite; }
.hoja { background: #407e53; width: 1.3cqw; animation: hoja 9s steps(8) infinite; }
.corazon {
  width: 2.5cqw; height: 2.5cqw; background: #e998a2;
  clip-path: polygon(0 20%,20% 20%,20% 0,40% 0,40% 20%,60% 20%,60% 0,80% 0,80% 20%,100% 20%,100% 60%,80% 60%,80% 80%,60% 80%,60% 100%,40% 100%,40% 80%,20% 80%,20% 60%,0 60%);
  animation: corazon 10s steps(10) infinite;
}
.destello { width: 1cqw; height: 1cqw; background: #fff2bd; animation-duration: 6s; }
.confeti { background: #edb781; animation-duration: 9s; }

.ambiental { animation-play-state: paused; }
.en-curso .ambiental { animation-play-state: running; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes nube { to { translate: 10cqw 0; } }
@keyframes brillo { 0%, 80%, 100% { opacity: 0.25; } 85%, 95% { opacity: 0.7; } }
@keyframes flor { 0%, 100% { transform: translateX(0) rotate(-3deg); } 50% { transform: translateX(0.35cqw) rotate(5deg); } }
@keyframes luz { 0%, 70%, 100% { opacity: 0; } 78%, 87% { opacity: 0.8; translate: 0 -1cqw; } }
@keyframes hoja { 0%, 80%, 100% { opacity: 0; } 82% { opacity: 1; translate: 0 0; } 96% { opacity: 0; translate: 3cqw 5cqw; } }
@keyframes corazon { 0%, 80%, 100% { opacity: 0; } 83% { opacity: 0.8; translate: 0 0; } 96% { opacity: 0; translate: 0 -5cqw; } }

.character-body { position: absolute; inset: 0; transform-origin: center bottom; }
.character.is-idle[data-sprite="loaded"] .character-body {
  animation: reposo-personaje var(--idle-duration) ease-in-out var(--idle-delay) infinite;
  animation-play-state: paused;
}
.en-curso .character.is-idle[data-sprite="loaded"]:not(.is-hidden, .is-entering, .is-jumping, .is-walking, .is-approaching, .is-hugging) .character-body { animation-play-state: running; }
.character-entry { position: relative; }
.character { --entry-duration: 780ms; --entry-hop: -0.8cqw; }
.character--mun { --entry-duration: 1000ms; --entry-hop: -1.25cqw; }
.character.is-entering .character-entry { animation: entrada-personaje var(--entry-duration) ease-out both; animation-play-state: paused; }
.en-curso .character.is-entering .character-entry { animation-play-state: running; }
.character.is-entering .nombre { opacity: 0; }
.character.is-jumping[data-sprite="loaded"] .character-body { animation: salto-personaje 600ms ease-out both; animation-play-state: paused; }
.en-curso .character.is-jumping[data-sprite="loaded"] .character-body { animation-play-state: running; }
.character.is-jumping:not([data-sprite="loaded"]) .character-entry { animation: entrada-personaje 650ms ease-out both; animation-play-state: paused; }
.en-curso .character.is-jumping:not([data-sprite="loaded"]) .character-entry { animation-play-state: running; }
.character.is-idle[data-sprite="loaded"]:is(.is-entering, .is-walking, .is-approaching, .is-hugging) .character-body { animation: none; }
@keyframes reposo-personaje {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(var(--idle-sway), var(--idle-lift)) rotate(var(--idle-angle)); }
  70% { transform: translate(calc(var(--idle-sway) * -0.5), calc(var(--idle-lift) * 0.25)) rotate(calc(var(--idle-angle) * -0.35)); }
}
@keyframes entrada-personaje {
  0% { opacity: 0; transform: translate(var(--entry-x, 0cqw), var(--entry-y, 1cqw)); }
  20% { opacity: 1; }
  60% { transform: translate(0, var(--entry-hop)); }
  82% { transform: translate(0, 0.15cqw); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes salto-personaje {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-0.7cqw); }
}

@media (max-width: 600px) {
  .contenedor-escenas { padding-top: 28px; }
  .encabezado-campus { padding-bottom: 22px; }
  .dedicatoria { font-size: 9px; }
  .character { --sprite-height: 11.5cqw; }
  .character--diego { --x: 88%; }
}

.character-gesture { position: absolute; inset: 0; transform-origin: center bottom; }
.character.is-congratulating .character-gesture { animation: gesto-feliz 700ms ease-out both; }
.character.is-congratulating .nombre { background: #f9d5de; color: #843b52; font-weight: bold; }
.foco-diego .character:not(.character--mun, .character--diego) { opacity: 0.78; --idle-duration: 6.5s; --idle-lift: -0.16cqw; --idle-angle: 0.35deg; }
.foco-diego .character--diego { z-index: 12; }
.character.is-idle[data-sprite="loaded"].is-walking .character-body { animation: pasos-diego 480ms ease-in-out infinite; }
.character.is-idle[data-sprite="loaded"].is-reacting .character-body { animation: none; }
.character.is-reacting .character-gesture { animation: reaccion-mun 900ms ease-in-out infinite alternate; }
.character--diego.is-arriving { animation: llegada-diego 1800ms linear both; }
.character--diego.is-travelling { animation: camino-diego 3000ms linear both; }
.burbuja-dialogo {
  position: absolute; z-index: 140; margin: 0; padding: 10px 13px;
  border: 1px solid #c69f96; border-radius: 0; background: #fff9ec;
  color: #443c37; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 2px 0 #e5c7b5, -2px 0 #e5c7b5, 0 2px #e5c7b5, 3px 4px #79695433;
  transform-origin: var(--cola-x, 50%) bottom;
}
.burbuja-dialogo.aparece { animation: aparecer-burbuja 220ms steps(5, end) both; }
.burbuja-dialogo.saliendo { animation: salir-burbuja 200ms steps(4, end) both; pointer-events: none; }
.burbuja-dialogo:focus-visible { outline: 2px solid #ac6177; outline-offset: 5px; }
.burbuja-dialogo::before, .burbuja-dialogo::after {
  content: ""; position: absolute; left: calc(var(--cola-x) - 7px); top: 100%;
  width: 14px; height: 10px; background: #c69f96;
  clip-path: polygon(0 0,100% 0,100% 30%,80% 30%,80% 60%,65% 60%,65% 80%,50% 80%,50% 100%,35% 100%,35% 70%,20% 70%,20% 40%,0 40%);
}
.burbuja-dialogo::after { background: #fff9ec; top: calc(100% - 2px); }
.burbuja-dialogo[data-orientacion="arriba"] { transform-origin: var(--cola-x) top; }
.burbuja-dialogo[data-orientacion="arriba"]::before { top: auto; bottom: 100%; transform: rotate(180deg); }
.burbuja-dialogo[data-orientacion="arriba"]::after { top: auto; bottom: calc(100% - 2px); transform: rotate(180deg); }
.burbuja-contenido { display: block; max-height: var(--contenido-max-height, 240px); overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; }
.firma-nota { display: block; color: #a24d67; font-size: clamp(10px, 1.2cqw, 13px); font-weight: bold; letter-spacing: 0.08em; margin-bottom: 5px; }
.mensaje-capas { display: grid; }
.mensaje-nota { grid-area: 1 / 1; display: block; font-size: clamp(12px, 1.4cqw, 16px); line-height: 1.45; white-space: pre-wrap; }
.medida-mensaje { visibility: hidden; }
.indicador-continuar { display: block; color: #b6657f; font-size: 12px; height: 14px; text-align: right; animation: latido-continuar 1300ms steps(2, end) infinite; }
.indicador-continuar[hidden] { display: block !important; visibility: hidden; }
.en-conversacion .character:not(.is-congratulating, .character--mun) { --idle-duration: 6s; --idle-lift: -0.17cqw; --idle-angle: 0.35deg; }
.en-conversacion .character.is-congratulating { z-index: 30; }
.en-conversacion .character.is-congratulating .character-gesture { animation: habla-amigo 1800ms ease-in-out infinite; }
.character.escucha-izquierda .character-gesture { animation: escucha-mun-izquierda 850ms ease-out both; }
.character.escucha-derecha .character-gesture { animation: escucha-mun-derecha 850ms ease-out both; }
.character.escucha-alegre .character-gesture { animation: escucha-mun-alegre 850ms ease-out both; }
@keyframes aparecer-burbuja { from { opacity: 0; transform: translateY(3px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes salir-burbuja { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(2px); } }
@keyframes latido-continuar { 50% { opacity: 0.45; } }
@keyframes habla-amigo { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-0.3cqw) scale(1.035) rotate(-0.7deg); } }
@keyframes escucha-mun-izquierda { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-1.3deg); } }
@keyframes escucha-mun-derecha { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(1.3deg); } }
@keyframes escucha-mun-alegre { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-0.55cqw); } }
.titulo-celebracion {
  position: absolute; z-index: 120; top: 30%; left: 50%; transform: translateX(-50%);
  width: 80%; text-align: center; color: #a84463; background: #fff3dfe8;
  padding: 12px 8px; font-size: clamp(17px, 3cqw, 34px); font-weight: bold;
  text-shadow: 1px 1px #fff8e6; transition: opacity 300ms ease;
}
.titulo-celebracion.saliendo { opacity: 0; }
.celebracion-efectos { position: absolute; inset: 0; z-index: 110; pointer-events: none; }
.detalle-celebracion {
  position: absolute; left: var(--particula-x); top: var(--particula-y);
  width: 0.6cqw; height: 1cqw; background: var(--particula-color);
  animation: detalle-flotante 2600ms ease-out var(--particula-delay) both;
}
.corazon-celebracion {
  width: 1.8cqw; height: 1.8cqw;
  clip-path: polygon(0 20%,20% 20%,20% 0,40% 0,40% 20%,60% 20%,60% 0,80% 0,80% 20%,100% 20%,100% 60%,80% 60%,80% 80%,60% 80%,60% 100%,40% 100%,40% 80%,20% 80%,20% 60%,0 60%);
}
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes gesto-feliz { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-0.6cqw) rotate(-1.5deg); } }
@keyframes pasos-diego { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-0.35cqw) rotate(0.6deg); } }
@keyframes reaccion-mun { from { transform: rotate(0); } to { transform: rotate(1.3deg) translateY(-0.2cqw); } }
@keyframes llegada-diego { from { left: 106%; top: 88%; } to { left: 89%; top: 88%; } }
@keyframes camino-diego { from { left: 89%; top: 88%; } to { left: 58%; top: 83%; } }
@keyframes detalle-flotante { 0% { opacity: 0; transform: translateY(0); } 15%, 65% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-5cqw); } }
@media (max-width: 600px) {
  .burbuja-dialogo { padding: 8px 10px; }
  .firma-nota { margin-bottom: 4px; }

  .titulo-celebracion { top: 24%; }
}


.foco-pareja .character:not(.character--mun, .character--diego) { --idle-duration: 8s; --idle-lift: -0.12cqw; --idle-angle: 0.2deg; }
.foco-pareja[data-final-phase] .character--diego { transition: left 1000ms ease-in-out, top 1000ms ease-in-out; }
.foco-pareja[data-final-phase] :is(.character--mun, .character--diego) .nombre { visibility: hidden; }
.foco-pareja[data-final-phase] .character.is-idle:is(.character--mun, .character--diego) .character-body { animation: none; }
.foco-pareja[data-final-phase] :is(.character--mun, .character--diego) .character-gesture { transition: transform 800ms ease-in-out; }
.foco-pareja[data-final-phase="acercamiento"] .character--mun .character-gesture { transform: rotate(2deg); }
.foco-pareja[data-final-phase="acercamiento"] .character--diego .character-gesture { transform: rotate(-2deg); }
.foco-pareja[data-final-phase="abrazo"] .character--mun .character-gesture { transform: rotate(5deg) scale(0.98); }
.foco-pareja[data-final-phase="abrazo"] .character--diego .character-gesture { transform: rotate(-5deg) scale(0.98); }
.foco-pareja[data-final-phase="abrazo"] :is(.character--mun, .character--diego) .character-entry { animation: abrazo-suave 1000ms ease-in-out both; }
.foco-pareja[data-final-phase="abrazoFinal"] .character--mun .character-gesture { transform: rotate(4deg) scale(0.98); }
.foco-pareja[data-final-phase="abrazoFinal"] .character--diego .character-gesture { transform: rotate(-4deg) scale(0.98); }
.foco-pareja[data-final-phase] :is(.character--mun, .character--diego) .character-visual { transition: opacity 600ms ease, visibility 0s 600ms; }
.pareja-con-sprite :is(.character--mun, .character--diego) .character-visual { opacity: 0; visibility: hidden; }
.pareja-especial { position: absolute; left: 51.5%; top: 80.5%; width: 18cqw; height: 14cqw; transform: translate(-50%, -100%); z-index: 95; pointer-events: none; }
.sprites-especiales { position: absolute; inset: 0; transform-origin: center bottom; }
.sprite-pareja {
  position: absolute; left: 50%; bottom: var(--special-bottom); width: auto; max-width: none;
  height: var(--special-height); image-rendering: pixelated;
  transform: translateX(var(--special-center)); transform-origin: center bottom;
  opacity: 0; scale: 0.98; translate: 0.12cqw 0.08cqw;
  transition: opacity var(--transicion-pareja, 600ms) ease, scale var(--transicion-pareja, 600ms) ease, translate var(--transicion-pareja, 600ms) ease;
}
.sprite-pareja.is-current { opacity: 1; scale: 1; translate: 0 0; }
.special--approach { --special-height: 101.91%; --special-bottom: -1%; --special-center: -49.57%; scale: 0.96; translate: 0 0.16cqw; }
.special--prehug { --special-height: 103.99%; --special-bottom: -3.61%; --special-center: -48.93%; }
.special--hug { --special-height: 103.22%; --special-bottom: -2.49%; --special-center: -49.07%; }
.special--hug-final { --special-height: 104.37%; --special-bottom: -3.63%; --special-center: -50.14%; translate: 0 0; scale: 1; }
.sombra-pareja { display: none; position: absolute; bottom: -0.25cqw; left: 20%; width: 60%; height: 1cqw; background: #71604e40; clip-path: polygon(0 30%,20% 30%,20% 0,80% 0,80% 30%,100% 30%,100% 70%,80% 70%,80% 100%,20% 100%,20% 70%,0 70%); }
.pareja-con-sprite .sombra-pareja { display: block; }
.nombre-pareja { position: absolute; top: calc(100% + 0.6cqw); left: 50%; transform: translateX(-50%); padding: 1px 0.45cqw; white-space: nowrap; color: #833d55; background: #fbe5dfe8; font-size: clamp(8px, 1.2cqw, 14px); }
[data-final-phase="abrazo"] .sprites-especiales { animation: abrazo-suave 1000ms ease-in-out both; }
[data-final-phase="abrazoFinal"] .sprites-especiales { animation: pausa-pareja 5s ease-in-out infinite; }
.cierre-final { max-width: 680px; margin: 24px auto 0; padding: 24px 20px; text-align: center; animation: aparecer 700ms ease both; }
.cierre-final h2 { color: #a04b65; margin: 0 0 12px; font-size: clamp(1.35rem, 4vw, 2.2rem); }
.cierre-final p { line-height: 1.7; font-size: clamp(12px, 2vw, 16px); }
.detalle-final { color: #c98599; margin-bottom: 12px; }
.boton-reiniciar { margin-top: 20px; padding: 11px 20px; border: 1px solid #c59b9e; background: #f8e4dc; color: #853f55; font: inherit; font-size: 13px; cursor: pointer; }
.boton-reiniciar:hover { background: #f1d6cf; }
@keyframes abrazo-suave { 0%, 100% { translate: 0 0; } 45% { translate: 0 -0.25cqw; scale: 1.012; } }
@keyframes pausa-pareja { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.08cqw; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .character.is-entering .nombre { opacity: 1; }
}