/* =========================================================
   PLANTILLA "MUNDO DE BLOQUES" — cumpleaños infantil, estética voxel/gamer.
   Original (sin marca). Hoja de estilo AUTOCONTENIDA: NO depende de
   base.css/temas.css. Comparte el mismo contrato de datos (clases/IDs/
   data-rol/data-modulo) que el motor (motor.js) ya manipula.

   Lenguaje visual: cubos isométricos (volumen con box-shadow + caras
   oscuras), paleta gamer (verde pasto + azul cielo + amarillo "moneda" +
   contorno tinta), íconos propios (moneda / corazón de vida / pico) en CSS,
   barras de NIVEL / VIDA. Pixel display SOLO para acentos cortos.
   Mobile-first · accesible · sin dependencias.
   ========================================================= */

:root {
  /* paleta gamer */
  --pasto:    #5bbf3a;   /* verde bloque */
  --pasto-d:  #3d8c25;   /* cara oscura del pasto */
  --tierra:   #7a4a2b;   /* marrón tierra */
  --tierra-d: #5a3520;
  --cielo:    #38a8e0;   /* azul cielo */
  --cielo-d:  #1f6fa8;
  --agua:     #2f7fd6;   /* azul profundo (acento frío) */
  --moneda:   #ffcf2e;   /* amarillo moneda */
  --moneda-d: #e0a517;
  --vida:     #e8453c;   /* rojo corazón de vida */
  --vida-d:   #b8281f;
  --tinta:    #16121f;   /* contorno oscuro */
  --noche:    #1b1730;   /* fondo profundo del pie */
  --blanco:   #ffffff;
  --hueso:    #fdfaf2;   /* superficie clara de bloque */
  --texto:    #241f33;
  --texto-sm: #5a5470;

  /* tipografía */
  --pixel: "Press Start 2P", "Courier New", monospace; /* acentos cortos */
  --sans:  "Baloo 2", system-ui, -apple-system, sans-serif; /* cuerpo */

  --esp-1:4px; --esp-2:8px; --esp-3:16px; --esp-4:24px; --esp-5:40px; --esp-6:64px; --esp-7:88px;

  /* contorno + volumen de cubo (cara inferior/derecha oscura) */
  --borde: 3px solid var(--tinta);
  --radio: 10px;
  --cubo:    0 6px 0 var(--tinta);        /* cara inferior (efecto bloque) */
  --cubo-sm: 0 4px 0 var(--tinta);
  --transicion: .12s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6; font-weight: 500;
  color: var(--texto);
  background-color: #bfe9ff;
  /* cielo voxel: degradado + rejilla isométrica muy tenue */
  background-image:
    linear-gradient(180deg, #8fd6ff 0%, #bfe9ff 45%, #d9f3ff 100%),
    linear-gradient(rgba(22,18,31,.05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(22,18,31,.05) 2px, transparent 2px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
iframe { border: 0; }

/* el hero NO usa foto: el fondo ES el diseño */
.hero { background-image: none !important; }

/* Reveal al hacer scroll */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.fade-up.is-visible { opacity: 1; transform: none; }

/* --- FIRMA GAMER (aditivo): los bloques "caen y se apilan" al entrar --- */
/* Engancha al reveal del motor (.fade-up.is-visible) solo en tarjetas .bloque.
   La animación termina en el mismo estado del reveal (opacidad 1, sin transform),
   así que si se apaga (reduced-motion) la tarjeta queda igual de visible. */
.bloque.fade-up.is-visible {
  animation: caer-bloque .62s cubic-bezier(.18, .9, .32, 1.4) both;
}
@keyframes caer-bloque {
  0%   { opacity: 0; transform: translateY(-46px) scale(.96); }
  55%  { opacity: 1; transform: translateY(0)     scale(1); }
  72%  { transform: translateY(0) scaleY(.9) scaleX(1.04); } /* impacto: aplasta al apilar */
  86%  { transform: translateY(0) scaleY(1.03) scaleX(.99); }
  100% { transform: none; }
}

/* =========================================================
   HERO — pantalla de inicio
   ========================================================= */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: var(--esp-6) var(--esp-3) var(--esp-7);
  background: linear-gradient(180deg, #6fc4f2 0%, #9fdcff 100%);
  color: var(--blanco);
  overflow: hidden;
}
/* nubes voxel flotando */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(closest-side, rgba(255,255,255,.95) 92%, transparent 95%),
    radial-gradient(closest-side, rgba(255,255,255,.9) 92%, transparent 95%),
    radial-gradient(closest-side, rgba(255,255,255,.85) 92%, transparent 95%);
  background-repeat: no-repeat;
  background-size: 130px 46px, 90px 34px, 110px 40px;
  background-position: 12% 16%, 78% 24%, 60% 9%;
  animation: nubes 30s linear infinite alternate;
}
/* "sol" bloque pixelado en una esquina */
.hero::after {
  content: ""; position: absolute; top: 8%; right: 9%; z-index: -1;
  width: 52px; height: 52px; border-radius: 6px;
  background: var(--moneda);
  border: var(--borde);
  box-shadow: var(--cubo-sm), 0 0 0 10px rgba(255,207,46,.25), 0 0 0 20px rgba(255,207,46,.12);
}
.hero__overlay { display: none; }

/* suelo de bloques de pasto al fondo del hero */
.hero__suelo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: -1;
  background: var(--pasto);
  border-top: 5px solid var(--tinta);
  box-shadow: inset 0 -14px 0 var(--pasto-d), inset 0 -64px 0 -50px var(--pasto-d);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(22,18,31,.18) 30px 33px),
    linear-gradient(180deg, var(--pasto) 0 18px, var(--tierra) 18px 100%);
}

.hero__contenido { position: relative; display: flex; flex-direction: column; align-items: center; }

/* sello = cubo isométrico con la inicial (lo llena motor.js → data-rol="hero-sello") */
.cubo-sello {
  width: 84px; height: 84px; margin-bottom: var(--esp-4);
  display: grid; place-items: center;
  font-family: var(--pixel); font-size: 1.5rem; line-height: 1;
  color: var(--tinta); background: var(--moneda);
  border: var(--borde); border-radius: 12px;
  box-shadow:
    0 8px 0 var(--moneda-d),       /* cara inferior 3D */
    0 8px 0 3px var(--tinta),      /* contorno de la cara inferior */
    inset 3px 3px 0 rgba(255,255,255,.5);
  transform: rotate(-3deg);
  animation: flotar 3s ease-in-out infinite;
}
.cubo-sello:empty { display: none; }

.hero__intro {
  display: inline-block;
  font-family: var(--pixel); font-size: clamp(.62rem, 3.1vw, .85rem); line-height: 1.5;
  letter-spacing: .5px; color: var(--tinta);
  background: var(--moneda); border: var(--borde); border-radius: 8px;
  padding: .55em .8em; box-shadow: var(--cubo-sm);
  transform: rotate(-1.5deg);
}
/* nombre tratado como BLOQUES apilados */
.hero__nombres {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .12em;
  font-family: var(--pixel); font-weight: 400;
  font-size: clamp(1.7rem, 9vw, 3.4rem); line-height: 1;
  margin: var(--esp-5) 0 var(--esp-4);
}
.hero__nombres > span { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .12em; }
/* el JS pone el nombre como texto plano; lo estilizamos con stroke + relieve de bloque */
.hero__nombres [data-rol="nombre-1"] {
  color: var(--moneda);
  -webkit-text-stroke: 4px var(--tinta); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--tierra-d), 0 5px 0 4px var(--tinta);
}
.hero__amp { display: none; }
.hero__sub {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1rem, 4.4vw, 1.3rem);
  color: var(--blanco); text-shadow: 0 3px 0 var(--cielo-d);
  margin-bottom: var(--esp-4);
}
/* fecha en placa de bloque */
.hero__fecha {
  display: inline-block; font-family: var(--pixel); font-weight: 400;
  font-size: clamp(.62rem, 3.2vw, .9rem); letter-spacing: .5px;
  color: var(--blanco); background: var(--vida);
  border: var(--borde); border-radius: 8px;
  padding: .6em .8em; box-shadow: 0 5px 0 var(--vida-d), 0 5px 0 3px var(--tinta);
}
.hero__scroll {
  margin-top: var(--esp-6);
  display: inline-flex; align-items: center; gap: var(--esp-2);
  font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: .3px;
  color: var(--tinta); background: var(--hueso); text-decoration: none;
  border: var(--borde); border-radius: 999px;
  padding: .5em 1.1em; box-shadow: var(--cubo-sm);
}
/* flecha = triángulo dibujado (sin glifo de fuente) */
.hero__flecha {
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 10px solid var(--vida);
  display: inline-block; animation: rebote 1.4s infinite;
}
@keyframes rebote { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes flotar { 0%,100%{transform:rotate(-3deg) translateY(0)} 50%{transform:rotate(-3deg) translateY(-8px)} }
@keyframes nubes  { from{background-position:8% 16%,76% 24%,58% 9%} to{background-position:20% 16%,86% 24%,68% 9%} }

/* --- FIRMA GAMER (aditivo): MONEDA que gira en el hero --- */
.moneda-gira {
  display: block; width: 40px; height: 40px; margin-bottom: var(--esp-3);
  perspective: 240px;
  animation: moneda-flota 3.4s ease-in-out infinite;
}
.moneda-gira__cara {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff3b0 0 18%, var(--moneda) 30% 64%, var(--moneda-d) 100%);
  border: 3px solid var(--tinta);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.45);
  transform-style: preserve-3d;
  animation: moneda-gira 2.4s linear infinite;
}
/* el "$" en relieve gira con la cara */
.moneda-gira__cara::after {
  content: "$"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--pixel); font-size: .7rem; color: var(--moneda-d);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
@keyframes moneda-gira  { 0%{transform:rotateY(0)} 100%{transform:rotateY(360deg)} }
@keyframes moneda-flota { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* --- FIRMA GAMER (aditivo): el CTA "Pulsa para jugar" parpadea suave --- */
.hero__scroll { animation: press-start 1.8s steps(1, end) infinite; }
@keyframes press-start { 0%,64%{opacity:1} 65%,100%{opacity:.42} }

/* =========================================================
   ESTRUCTURA GENERAL — bloques (cubos de superficie clara)
   ========================================================= */
main { padding: var(--esp-6) var(--esp-3) var(--esp-6); }
.bloque {
  position: relative;
  max-width: 560px; margin: 0 auto var(--esp-6);
  background: var(--hueso);
  border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--cubo);
  padding: var(--esp-5) var(--esp-4) var(--esp-5);
  text-align: center;
}
/* "studs" / remaches de bloque en el borde superior */
.bloque::before {
  content: ""; position: absolute; top: -3px; left: 18px; right: 18px; height: 8px;
  border-radius: 0 0 6px 6px;
  background-image: radial-gradient(circle at 6px 50%, var(--tinta) 2.4px, transparent 2.6px);
  background-size: 18px 8px; background-repeat: repeat-x;
  opacity: .25; pointer-events: none;
}
.galeria.bloque { padding-left: 0; padding-right: 0; overflow: hidden; }

/* DIVISOR — marca de sección dibujada por CSS: un cubo isométrico (rombo + caras) */
.divisor {
  display: block; width: 28px; height: 28px; margin: 0 auto var(--esp-4);
  background:
    linear-gradient(135deg, var(--moneda) 0 50%, var(--moneda-d) 50% 100%);
  border: var(--borde);
  box-shadow: var(--cubo-sm);
  transform: rotate(45deg);
  border-radius: 4px;
}

/* título de sección = placa de rótulo */
.seccion__titulo {
  display: inline-block;
  font-family: var(--pixel); font-weight: 400;
  font-size: clamp(.95rem, 4.2vw, 1.4rem); letter-spacing: .5px; line-height: 1.5;
  color: var(--tinta); background: var(--pasto);
  border: var(--borde); border-radius: 8px;
  padding: .55em .7em; box-shadow: 0 5px 0 var(--pasto-d), 0 5px 0 3px var(--tinta);
  margin-bottom: var(--esp-5);
  color: var(--blanco);
  text-shadow: 0 2px 0 var(--pasto-d);
}

/* =========================================================
   BIENVENIDA
   ========================================================= */
.bienvenida { text-align: center; }
.bienvenida__titulo {
  display: inline-block;
  font-family: var(--pixel); font-size: clamp(.95rem, 4.6vw, 1.5rem); line-height: 1.5;
  color: var(--blanco); background: var(--cielo);
  border: var(--borde); border-radius: 8px; padding: .5em .65em;
  box-shadow: 0 5px 0 var(--cielo-d), 0 5px 0 3px var(--tinta);
  text-shadow: 0 2px 0 var(--cielo-d); margin-bottom: var(--esp-4);
}
.bienvenida__texto {
  max-width: 480px; margin: var(--esp-2) auto 0; font-size: 1.12rem; font-weight: 500;
  color: var(--texto);
}

/* =========================================================
   CUENTA REGRESIVA — barra de carga del nivel + fichas
   ========================================================= */
.contador__lista { list-style: none; display: flex; gap: var(--esp-2); justify-content: center; flex-wrap: wrap; }
.contador__item {
  background: var(--cielo); color: var(--blanco);
  border: var(--borde); border-radius: 8px;
  box-shadow: 0 5px 0 var(--cielo-d), 0 5px 0 3px var(--tinta);
  min-width: 64px; padding: var(--esp-3) var(--esp-2) var(--esp-2);
}
.contador__num {
  display: block; font-family: var(--pixel); font-size: clamp(1.1rem, 5vw, 1.7rem);
  line-height: 1; color: var(--moneda);
  -webkit-text-stroke: 1.5px var(--tinta); paint-order: stroke fill;
}
.contador__label {
  display: block; margin-top: var(--esp-2); font-family: var(--sans); font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--blanco);
}

/* =========================================================
   EVENTO (La gran fiesta) + MAPA
   ========================================================= */
.evento__hora {
  display: inline-block; font-family: var(--pixel); font-weight: 400;
  font-size: .72rem; letter-spacing: .04em; color: var(--tinta);
  background: var(--moneda); border: var(--borde); border-radius: 6px;
  padding: .5em .7em; box-shadow: var(--cubo-sm); margin-bottom: var(--esp-3);
}
.evento__lugar { font-family: var(--sans); font-weight: 800; font-size: clamp(1.4rem, 6vw, 2rem); color: var(--agua); line-height: 1.1; }
.evento__direccion { font-weight: 500; color: var(--texto-sm); margin: var(--esp-2) 0 var(--esp-4); }
.evento__mapa { border: var(--borde); border-radius: 8px; overflow: hidden; box-shadow: var(--cubo-sm); }
.evento__mapa iframe { width: 100%; height: 280px; display: block; }

/* botones de acción (cómo llegar / mesa de regalos) */
.evento__boton, .mesa-regalos__link {
  display: inline-flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-4);
  font-family: var(--sans); font-weight: 800; font-size: 1.05rem; letter-spacing: .3px;
  color: var(--blanco); background: var(--pasto); text-decoration: none;
  border: var(--borde); border-radius: 999px; padding: .5em 1.1em;
  box-shadow: 0 5px 0 var(--pasto-d), 0 5px 0 3px var(--tinta);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.evento__boton:hover, .mesa-regalos__link:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--pasto-d), 0 7px 0 3px var(--tinta); }
.evento__boton:active, .mesa-regalos__link:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pasto-d), 0 2px 0 3px var(--tinta); }

/* =========================================================
   ITINERARIO — "mapa de niveles" numerado
   ========================================================= */
.itinerario__lista { list-style: none; max-width: 440px; margin: 0 auto; text-align: left; counter-reset: niv; }
.itinerario__item {
  display: grid; grid-template-columns: 44px 92px 1fr; align-items: center; gap: var(--esp-2);
  padding: var(--esp-3) 0; border-bottom: 3px dashed rgba(22,18,31,.18);
}
.itinerario__item:last-child { border-bottom: none; }
/* ficha de nivel (cubo numerado) */
.itinerario__item::before {
  counter-increment: niv; content: counter(niv);
  width: 36px; height: 36px; display: grid; place-items: center;
  font-family: var(--pixel); font-size: .8rem; color: var(--blanco);
  background: var(--vida); border: var(--borde); border-radius: 8px;
  box-shadow: 0 4px 0 var(--vida-d), 0 4px 0 2px var(--tinta);
}
.itinerario__hora { font-family: var(--pixel); font-size: .72rem; color: var(--agua); }
.itinerario__actividad { font-weight: 600; color: var(--texto); }

/* =========================================================
   DRESS CODE — "elige tu skin"
   ========================================================= */
.dress-code__descripcion { max-width: 460px; margin: 0 auto var(--esp-4); font-weight: 500; }
.dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
/* swatch como bloque cuadrado (no círculo) */
.dress-code__color { width: 46px; height: 46px; border-radius: 8px; border: var(--borde); box-shadow: var(--cubo-sm); display: inline-block; }

/* =========================================================
   MESA DE REGALOS — cofre de loot
   ========================================================= */
.mesa-regalos__mensaje { max-width: 460px; margin: 0 auto var(--esp-4); font-weight: 500; }
.mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
.mesa-regalos__link { margin-top: 0; background: var(--moneda); color: var(--tinta); box-shadow: 0 5px 0 var(--moneda-d), 0 5px 0 3px var(--tinta); }
.mesa-regalos__link:hover { box-shadow: 0 7px 0 var(--moneda-d), 0 7px 0 3px var(--tinta); }
.mesa-regalos__link:active { box-shadow: 0 2px 0 var(--moneda-d), 0 2px 0 3px var(--tinta); }
/* moneda dibujada antes del link */
.mesa-regalos__link::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--moneda); border: 3px solid var(--tinta);
  box-shadow: inset 0 0 0 3px var(--moneda-d);
}

/* =========================================================
   GALERÍA — álbum de capturas
   ========================================================= */
.carrusel { position: relative; }
.carrusel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carrusel__track::-webkit-scrollbar { display: none; }
.carrusel__slide { flex: 0 0 86%; scroll-snap-align: center; padding: 0 var(--esp-2); }
.carrusel__slide img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: var(--borde); border-radius: 10px; box-shadow: var(--cubo-sm); cursor: zoom-in; }
.carrusel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 10px; border: var(--borde);
  background: var(--moneda); color: var(--tinta); font-family: var(--sans); font-weight: 800; font-size: 1.4rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 0 var(--moneda-d), 0 4px 0 2px var(--tinta);
}
.carrusel__nav--prev { left: 12px; }
.carrusel__nav--next { right: 12px; }
.carrusel__dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--esp-4); }
.carrusel__dot { width: 14px; height: 14px; border: 3px solid var(--tinta); background: var(--blanco); border-radius: 4px; padding: 0; cursor: pointer; }
.carrusel__dot.is-active { background: var(--vida); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(16,12,28,.92); padding: var(--esp-3); opacity: 0; visibility: hidden; transition: opacity var(--transicion); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 100%; max-height: 85vh; border: var(--borde); border-radius: 10px; }
.lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: var(--vida); border: var(--borde); border-radius: 8px; width: 46px; height: 46px; color: var(--blanco); font-size: 1.6rem; cursor: pointer; line-height: 1; box-shadow: var(--cubo-sm); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--moneda); border: var(--borde); border-radius: 8px; width: 46px; height: 46px; color: var(--tinta); font-size: 1.6rem; cursor: pointer; box-shadow: var(--cubo-sm); }
.lightbox__nav--prev { left: var(--esp-2); }
.lightbox__nav--next { right: var(--esp-2); }

/* =========================================================
   RSVP — "únete a la partida" (formulario tipo panel de juego)
   ========================================================= */
.rsvp__nota { font-weight: 500; color: var(--texto-sm); margin-bottom: var(--esp-4); }
.rsvp__form { max-width: 420px; margin: 0 auto; text-align: left; }
.rsvp__auto { margin: calc(-1 * var(--esp-2)) 0 var(--esp-3); font-size: .85rem; font-weight: 600; color: var(--agua); }
.campo { margin-bottom: var(--esp-4); border: none; }
.campo__label { display: block; margin-bottom: var(--esp-2); font-family: var(--sans); font-weight: 800; font-size: .95rem; color: var(--tinta); }
.campo__input {
  width: 100%; padding: var(--esp-3); font-family: var(--sans); font-weight: 500; font-size: 1rem; color: var(--texto);
  background: var(--blanco); border: var(--borde); border-radius: 8px;
  box-shadow: inset 0 3px 0 rgba(22,18,31,.06);
}
.campo__input:focus-visible { outline: 3px solid var(--cielo); outline-offset: 2px; }
.rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-2); }
.rsvp__radio { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; font-weight: 600;
  background: var(--blanco); border: var(--borde); border-radius: 8px; padding: var(--esp-2) var(--esp-3); box-shadow: var(--cubo-sm); }
.rsvp__radio input { accent-color: var(--pasto); width: 20px; height: 20px; }
.boton {
  display: block; width: 100%; margin-top: var(--esp-4);
  font-family: var(--pixel); font-size: clamp(.85rem, 3.6vw, 1.05rem); letter-spacing: .5px; line-height: 1.4;
  color: var(--blanco); background: var(--pasto);
  border: var(--borde); border-radius: var(--radio); padding: .9em .6em;
  box-shadow: 0 6px 0 var(--pasto-d), 0 6px 0 3px var(--tinta); cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--pasto-d), 0 8px 0 3px var(--tinta); }
.boton:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pasto-d), 0 2px 0 3px var(--tinta); }
.boton:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; }
.boton:disabled { opacity: .6; cursor: default; transform: none; }
.rsvp__estado { margin-top: var(--esp-4); text-align: center; font-weight: 800; min-height: 1.4em; }
.rsvp__estado--ok { color: var(--pasto-d); }
.rsvp__estado--error { color: var(--vida-d); }
.rsvp__bloqueado { margin-top: var(--esp-3); }

/* focus-visible global para links/botones interactivos */
.hero__scroll:focus-visible,
.evento__boton:focus-visible,
.mesa-regalos__link:focus-visible,
.carrusel__nav:focus-visible,
.carrusel__dot:focus-visible,
.lightbox__cerrar:focus-visible,
.lightbox__nav:focus-visible,
.musica:focus-visible,
.carrusel__slide img:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; }

/* =========================================================
   MÚSICA (botón flotante) — bloque de nota
   ========================================================= */
.musica {
  position: fixed; bottom: var(--esp-4); right: var(--esp-4); z-index: 40;
  width: 56px; height: 56px; border-radius: 12px; border: var(--borde);
  background: var(--moneda); color: var(--tinta); cursor: pointer;
  display: grid; place-items: center; font-size: 1.5rem;
  box-shadow: 0 5px 0 var(--moneda-d), 0 5px 0 3px var(--tinta);
}
.musica[aria-pressed="true"] { background: var(--pasto); color: var(--blanco); box-shadow: 0 5px 0 var(--pasto-d), 0 5px 0 3px var(--tinta); }
.musica[aria-pressed="true"] .musica__icono { animation: girar 3s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   PIE — barra de VIDA + colofón nocturno
   ========================================================= */
.pie {
  position: relative;
  text-align: center; padding: var(--esp-7) var(--esp-3) calc(var(--esp-6) + 70px);
  background: var(--noche); color: var(--blanco);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px);
  background-size: 28px 28px, 28px 28px;
  border-top: 5px solid var(--tinta);
}
/* barra de VIDA decorativa sobre el pie (corazones) */
.pie::before {
  content: "";
  position: absolute; top: calc(-1 * var(--esp-4) - 5px); left: 50%; transform: translateX(-50%);
  width: 132px; height: 18px;
  background-image: radial-gradient(circle at 9px 9px, var(--vida) 6px, transparent 7px);
  background-size: 22px 18px; background-repeat: repeat-x;
  filter: drop-shadow(0 0 0 var(--tinta));
  /* --- FIRMA GAMER (aditivo): la barra de VIDA late --- */
  transform-origin: center; will-change: transform;
  animation: latido-vida 2.2s ease-in-out infinite;
}
/* el latido conserva el centrado translateX(-50%) del pseudo-elemento */
@keyframes latido-vida {
  0%, 28%, 100% { transform: translateX(-50%) scale(1); }
  14%           { transform: translateX(-50%) scale(1.12); }
  21%           { transform: translateX(-50%) scale(1.04); }
}
.pie__nombres { font-family: var(--pixel); font-size: clamp(1.1rem, 5vw, 1.7rem); color: var(--moneda); -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; letter-spacing: 1px; }
.pie__fecha { font-family: var(--sans); font-weight: 600; letter-spacing: .04em; margin: var(--esp-3) 0 var(--esp-3); color: #d6d2e6; }
.pie__credito { font-family: var(--pixel); font-size: .72rem; line-height: 1.6; color: var(--pasto); }

/* =========================================================
   BARRA DE PREVIEW (dev)
   ========================================================= */
.preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(16,12,28,.95); color: #fff; padding: var(--esp-2) var(--esp-3); display: flex; gap: var(--esp-4); flex-wrap: wrap; justify-content: center; font-family: system-ui, sans-serif; }
.preview__chip { background: rgba(255,255,255,.12); color: #fff; border: 1px solid transparent; padding: 4px 10px; border-radius: 6px; font-size: .8rem; cursor: pointer; }
.preview__chip.is-active { background: #fff; color: #111; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 768px) {
  .bloque { max-width: 640px; padding: var(--esp-6) var(--esp-5); }
  .hero__nombres { font-size: clamp(3rem, 11vw, 5rem); }
  .carrusel__slide { flex: 0 0 60%; }
  .carrusel__slide img { aspect-ratio: 16/10; }
  .evento__mapa iframe { height: 340px; }
}

/* =========================================================
   ACCESIBILIDAD — prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade-up { opacity: 1; transform: none; }
}