/* Fiesta · cumpleaños infantil: colores brillantes, globos, confeti y la edad en una estrella */
:root {
  --azul: #3bb2e8; --amarillo: #ffcc33; --rosa: #ff5d8f; --verde: #34c38f; --morado: #8b6cf0;
  --fondo: #fffdf6; --texto: #1f2a44; --suave: #fff3c9; --acento: #ff5d8f; --sobre-acento: #fff;
  --linea: rgba(31, 42, 68, .12);
  --encabezado-fondo: rgba(255, 253, 246, .94); --menu-fondo: #fffdf6;
  --fuente-display: "Baloo 2", system-ui, sans-serif;
  --fuente-script: "Baloo 2", system-ui, sans-serif;
  --fuente-texto: "Nunito", system-ui, sans-serif;
  --radio: 999px; --radio-foto: 24px;
}
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.espacio-sm { margin-top: 28px; }
body { font-weight: 500; }
.encabezado__marca { font: 800 26px var(--fuente-display); color: var(--rosa); }
.titulo { font-weight: 800; color: var(--texto); }
.eyebrow { color: var(--morado); font-weight: 800; }
.boton { font-weight: 800; letter-spacing: .06em; box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.boton--linea { background: #fff; }
.boton--claro { background: #fff; color: var(--texto); border-color: #fff; }
.boton--linea-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); box-shadow: none; }

/* Confeti */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.confeti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: caer 9s linear infinite; opacity: .85; }
.confeti i:nth-child(5n+1) { background: var(--azul); }
.confeti i:nth-child(5n+2) { background: var(--amarillo); }
.confeti i:nth-child(5n+3) { background: var(--rosa); }
.confeti i:nth-child(5n+4) { background: var(--verde); }
.confeti i:nth-child(5n+5) { background: var(--morado); }
.confeti i:nth-child(1) { left: 4%; animation-delay: -1s; } .confeti i:nth-child(2) { left: 10%; animation-delay: -6s; animation-duration: 11s; }
.confeti i:nth-child(3) { left: 16%; animation-delay: -3s; } .confeti i:nth-child(4) { left: 22%; animation-delay: -8s; animation-duration: 12s; }
.confeti i:nth-child(5) { left: 28%; animation-delay: -2s; } .confeti i:nth-child(6) { left: 34%; animation-delay: -5s; animation-duration: 10s; }
.confeti i:nth-child(7) { left: 40%; animation-delay: -7s; } .confeti i:nth-child(8) { left: 46%; animation-delay: -4s; animation-duration: 13s; }
.confeti i:nth-child(9) { left: 52%; animation-delay: -9s; } .confeti i:nth-child(10) { left: 58%; animation-delay: -1.5s; animation-duration: 11s; }
.confeti i:nth-child(11) { left: 64%; animation-delay: -6.5s; } .confeti i:nth-child(12) { left: 70%; animation-delay: -3.5s; animation-duration: 12s; }
.confeti i:nth-child(13) { left: 76%; animation-delay: -8.5s; } .confeti i:nth-child(14) { left: 82%; animation-delay: -2.5s; animation-duration: 10s; }
.confeti i:nth-child(15) { left: 88%; animation-delay: -5.5s; } .confeti i:nth-child(16) { left: 94%; animation-delay: -7.5s; animation-duration: 13s; }
.confeti i:nth-child(17) { left: 7%; animation-delay: -10s; } .confeti i:nth-child(18) { left: 61%; animation-delay: -11s; }
@keyframes caer { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(110vh) rotate(720deg); } }

/* Portada */
.hero { position: relative; overflow: hidden; min-height: 100svh; display: grid; place-items: center; gap: 30px; padding: calc(96px + env(safe-area-inset-top, 0px)) 16px 64px; text-align: center;
  background: radial-gradient(circle at 15% 20%, #e6f6fd 0, transparent 40%), radial-gradient(circle at 85% 80%, #fff1c2 0, transparent 45%), var(--fondo); }
.globo { position: absolute; width: 56px; height: 126px; animation: subir 6s ease-in-out infinite alternate; }
.g1 { fill: var(--rosa); top: 14%; left: 5%; }
.g2 { fill: var(--azul); top: 8%; right: 8%; animation-delay: -2s; width: 46px; height: 104px; }
.g3 { fill: var(--amarillo); bottom: 10%; right: 4%; animation-delay: -4s; }
@keyframes subir { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-18px) rotate(4deg); } }
.hero__foto-marco { position: relative; width: min(72vw, 380px); z-index: 1; }
.hero__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: 40px; border: 8px solid #fff; box-shadow: 0 0 0 6px var(--azul), 0 22px 40px rgba(31,42,68,.15); transform: rotate(-2deg); }
.edad { position: absolute; right: -22px; bottom: -26px; width: 120px; height: 120px; display: grid; place-items: center; transform: rotate(10deg); }
.edad svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--amarillo); filter: drop-shadow(0 6px 0 rgba(0,0,0,.12)); }
.edad span { position: relative; font: 800 56px/1 var(--fuente-display); color: var(--texto); margin-top: 8px; }
.hero__texto { position: relative; z-index: 1; display: grid; justify-items: center; }
.hero__pre { font: 800 18px var(--fuente-display); color: var(--morado); letter-spacing: .08em; text-transform: uppercase; }
.hero__nombre { font: 800 clamp(64px, 18vw, 120px)/.95 var(--fuente-display); color: var(--rosa); text-shadow: 4px 4px 0 var(--amarillo); }
.hero__nombre small { display: block; font-size: .42em; color: var(--azul); text-shadow: none; }
.hero__tema { font-size: 19px; margin-top: 10px; }
.hero__tema strong { color: var(--verde); font-weight: 800; }
.hero__fecha { font: 700 22px var(--fuente-display); margin-top: 4px; }
.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 380px minmax(0, 540px); justify-content: center; gap: 100px; }
}

/* Tarjetas */
.tarjeta { background: #fff; border-radius: 28px; padding: 32px 24px; border: 3px solid var(--texto); box-shadow: 6px 6px 0 var(--texto); }

/* Invitación */
.frase { font: 700 clamp(22px, 4vw, 30px)/1.4 var(--fuente-display); max-width: 30ch; margin: 0 auto; }
.padres { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font: 700 24px var(--fuente-display); }
.padres__y { color: var(--rosa); }

/* Fondos de color */
.azul { background: var(--azul); color: #fff; }
.azul .titulo { color: #fff; }
.amarillo { background: var(--suave); }
.rosa { background: var(--rosa); color: #fff; }
.rosa .titulo { color: #fff; }

/* Cuenta regresiva */
.cuenta__item { background: #fff; color: var(--texto); border-radius: 24px; box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.cuenta__num { font-weight: 800; color: var(--rosa); }
.cuenta__lbl { font-weight: 800; }

/* La fiesta */
.eventos { max-width: 560px; margin-inline: auto; grid-template-columns: 1fr; }
.evento { background: #fff; border-radius: 28px; border: 3px solid var(--texto); box-shadow: 6px 6px 0 var(--azul); }
.evento__tipo { color: var(--morado); }
.evento__hora { color: var(--rosa); font-weight: 800; font-size: 32px; }
.itin-caja { margin: 40px auto 0; max-width: 560px; }
.subtitulo { font: 800 30px var(--fuente-display); color: var(--azul); }
.itin__hora { color: var(--rosa); font-weight: 800; }
.itin__txt { text-align: left; font-weight: 700; }
.itin__punto { width: 16px; height: 16px; background: var(--amarillo); border: 3px solid var(--texto); }

/* Detalles */
.detalles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.vest__codigo { color: var(--rosa); font-weight: 800; }
.regalos__texto { font-size: 18px; }

/* Galería */
.galeria { grid-auto-flow: dense; }
.gal__item { border-radius: 24px; border: 3px solid var(--texto); }
.gal__item:first-child { grid-row: span 2; aspect-ratio: auto; }
.hashtag { margin-top: 24px; }
.hashtag strong { color: var(--rosa); }

/* Confirmar */
.confirmar__texto { max-width: 42ch; margin: 12px auto 0; font-size: 18px; }

.pie__nombre { font: 800 40px var(--fuente-display); color: var(--azul); }
@media (prefers-reduced-motion: reduce) { .confeti { display: none; } }