/* ==========================================================================
   TEMA: SÚPER CUMPLEAÑOS — dirección de arte "MUNDO DE PLATAFORMAS"
   Creada el 6 de octubre de 2026. Abdiel mostró el anuncio de la competencia
   (una invitación de videojuego de plataformas con personaje famoso) y pidió:
   "hazla". Esta es la nuestra: mismo mundo que reconoce cualquier mamá, pero
   de diseño propio y con el festejado de héroe.

   LA IDEA: caricatura de orilla gruesa (todo lleva su borde azul marino y su
   sombra dura, como calcomanía). Se entra pegándole al bloque: el niño brinca,
   sale una moneda en cada toque y al tercero sale la estrella; la pantalla se
   abre en un círculo amarillo, como al pasar de nivel. En la portada su nombre
   va en letras de colores y él sigue brincando abajo, frente a las colinas.
   Las cajas de la cuenta son bloques amarillos; el itinerario es el mapa, con
   monedas en cada parada.

   EL HÉROE ES UNA IMAGEN QUE SE CAMBIA: heroe.webp (520 × 640, sin fondo, puño
   derecho arriba). Todo lo demás se acomoda solo a ese archivo.

   TEORÍA DEL COLOR: cielo claro de base (60), pasto en los bloques (30), rojo
   solo en lo que se toca (10). Amarillo únicamente en monedas, bloques y horas.
   El azul marino de las orillas amarra todo y es el color de la letra.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre cielo claro #EAF7FF → tinta #1B1B3A 15.2 · suave #41466E 8.3 · azul #1F5FD0 5.3 · rojo #CF2A1B 4.8
     sobre blanco             → suave 9.0 · azul 5.8 · rojo 5.2
     sobre pasto  #1E7B3A     → blanco 5.3 · amarillo claro #FFE07A 4.1 (solo en letra grande)
     tinta sobre el cielo de la portada #3FA9F5 → 6.5 · tinta sobre amarillo #FFC83D → 10.7
     blanco sobre el botón rojo #CF2A1B → 5.2 · blanco sobre el pie #1B1B3A → 16.6
   ========================================================================== */
:root{
  --cielo:#3FA9F5; --cielo-bajo:#C9EEFF; --pasto:#1E7B3A; --rojo:#CF2A1B; --amarillo:#FFC83D; --marino:#1B1B3A; --azul:#1F5FD0;
  --papel:#EAF7FF;  --papel-hondo:#D3EEFF;
  --tinta:#1B1B3A;  --tinta-suave:#41466E;
  --marca:#1B1B3A;  --marca-claro:#1F5FD0;
  --acento:#CF2A1B; --acento-hondo:#9E1D11;
  --f-display:"Titan One", "Arial Black", sans-serif;
  --f-texto:"Baloo 2", system-ui, sans-serif;
  --radio:18px;
  --sombra:0 6px 0 #1B1B3A;
  --sombra-alta:0 9px 0 #1B1B3A;
  /* la orilla de las letras grandes: ocho sombras alrededor y una abajo */
  --orilla-letra:3px 0 0 #1B1B3A, -3px 0 0 #1B1B3A, 0 3px 0 #1B1B3A, 0 -3px 0 #1B1B3A, 2px 2px 0 #1B1B3A, -2px 2px 0 #1B1B3A, 2px -2px 0 #1B1B3A, -2px -2px 0 #1B1B3A, 0 7px 0 #1B1B3A;
  font-synthesis:none;
}
body{ background:var(--papel); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
h1, h2, .titulo, .portada__nombre, .entrada__nombre, .saludo__nombre, .pie__nombre, .dedicatoria__firma, .linea__hora, .cuenta__caja .n, .portada__fecha .fnum{ font-weight:400; }

/* los bloques de pasto: la letra se aclara, y adentro de las tarjetas vuelve a ser oscura */
.seccion.alterna, .pie{ --tinta:#FFFFFF; --tinta-suave:#F1FBF3; --marca:#FFFFFF; --acento:#FFE07A; color:var(--tinta); }
.seccion.alterna :is(.cuenta__caja, .tarjeta, .formulario, .notas__lista li, .faq__item, .buscar){ --tinta:#1B1B3A; --tinta-suave:#41466E; --marca:#1B1B3A; --acento:#CF2A1B; color:var(--tinta); }

.etiqueta{ font-family:var(--f-texto); font-weight:800; font-size:.76rem; letter-spacing:.2em; color:var(--azul); }
.seccion.alterna .etiqueta{ color:#FFFFFF; }
.titulo{ font-family:var(--f-display); line-height:1.08; font-size:clamp(2rem,9.2vw,2.8rem); margin:.4rem 0 1.5rem; color:var(--tinta); }
.titulo::after{ content:""; display:block; width:80px; height:26px; margin:.6rem auto 0; background:url(moneda.webp) center / auto 26px space no-repeat; }
.seccion.alterna .titulo{ color:#FFFFFF; text-shadow:0 3px 0 #1B1B3A; }
.parrafo b{ color:var(--acento); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — pégale al bloque. Tres toques: moneda, moneda, ¡estrella!
   (El motor quita la entrada 1.6 s después del último toque: todo cabe ahí.)
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:linear-gradient(180deg, var(--cielo), var(--cielo-bajo)); transition:opacity .4s ease .45s, visibility 0s linear .85s; }
.entrada::before{ content:""; position:absolute; top:8%; left:0; width:150px; height:79px; background:url(nube.webp) center / contain no-repeat; animation:nube-va 30s linear infinite; }
.entrada::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:60px; background:url(piso.webp) 0 0 / 88px 60px repeat-x; }
@keyframes nube-va{ from{ transform:translateX(-160px); } to{ transform:translateX(100vw); } }
.entrada > *{ position:relative; z-index:1; }
.entrada__para{ font-family:var(--f-texto); font-weight:800; letter-spacing:.24em; font-size:.74rem; color:var(--marino); }
.entrada__nombre{ font-family:var(--f-display); font-size:clamp(1.6rem,7.6vw,2.2rem); line-height:1.15; margin:.1rem 0 .4rem; color:#FFFFFF; text-shadow:var(--orilla-letra); letter-spacing:.02em; }
.gancho.plataforma{ position:relative; width:230px; height:330px; }
.gancho.plataforma.golpe, .gancho.plataforma.abre{ animation:none; }
.salto{ position:absolute; inset:0; display:block; }
.salto::before{ content:""; position:absolute; width:1px; height:1px; background:url(bloque-usado.webp); opacity:0; }   /* para que ya esté cargado */
.gancho.plataforma .salto__heroe{ position:absolute; z-index:3; left:8px; bottom:26px; width:170px; height:auto; transform-origin:50% 100%; animation:heroe-espera 1.1s ease-in-out infinite; }
@keyframes heroe-espera{ 0%,100%{ transform:translateY(0) scaleY(1); } 50%{ transform:translateY(-5px) scaleY(1.02); } }
.salto__base{                                   /* la plataforma de ladrillo donde está parado */
  position:absolute; left:12px; bottom:0; width:164px; height:30px; box-sizing:border-box; border:3px solid var(--marino); border-radius:9px; box-shadow:0 5px 0 rgba(27,27,58,.25);
  background:linear-gradient(90deg, transparent 0 32%, #9A5524 32% 34%, transparent 34% 66%, #9A5524 66% 68%, transparent 68%), linear-gradient(180deg, rgba(255,255,255,.4) 0 5px, transparent 5px), #E0893B;
}
.salto__bloque{ position:absolute; z-index:2; left:100px; bottom:214px; width:78px; height:78px; display:grid; place-items:center; background:url(bloque.webp) center / 100% 100% no-repeat; }
.salto__bloque b{ font-family:var(--f-display); font-weight:400; font-size:2.6rem; line-height:1; color:#FFFFFF; text-shadow:var(--orilla-letra); transform:translateY(-5px); transition:opacity .15s ease .2s; }
.salto__moneda{ position:absolute; z-index:1; left:121px; bottom:236px; width:36px; height:45px; opacity:0; background:url(moneda.webp) center / contain no-repeat; }
.salto__estrella{ position:absolute; z-index:4; left:99px; bottom:214px; width:80px; height:80px; opacity:0; background:url(estrella.webp) center / contain no-repeat; }
.salto__iris{ position:absolute; z-index:5; left:119px; bottom:330px; width:40px; height:40px; border-radius:50%; background:var(--amarillo); transform:scale(0); }
/* cada toque: brinca, el bloque rebota y sale una moneda */
.gancho.plataforma.golpe .salto__heroe, .gancho.plataforma.abre .salto__heroe{ animation:heroe-brinca .5s cubic-bezier(.3,.7,.4,1); }
@keyframes heroe-brinca{ 0%{ transform:translateY(0) scaleY(.93); } 38%{ transform:translateY(-48px) scaleY(1.04); } 50%{ transform:translateY(-44px); } 100%{ transform:translateY(0); } }
.gancho.plataforma.golpe .salto__bloque, .gancho.plataforma.abre .salto__bloque{ animation:bloque-pega .5s ease; }
@keyframes bloque-pega{ 0%,34%{ transform:translateY(0); } 48%{ transform:translateY(-18px); } 70%{ transform:translateY(3px); } 100%{ transform:translateY(0); } }
.gancho.plataforma.golpe .salto__moneda{ animation:moneda-sale .7s ease-out .16s; }
@keyframes moneda-sale{ 0%{ opacity:1; transform:translateY(0) scaleX(1); } 30%{ opacity:1; transform:translateY(-74px) scaleX(.2); } 60%{ opacity:1; transform:translateY(-100px) scaleX(1); } 100%{ opacity:0; transform:translateY(-86px) scaleX(.3); } }
/* el tercero: el bloque se gasta, sale la estrella y la pantalla se abre en amarillo */
.gancho.plataforma.abre .salto__bloque{ background-image:url(bloque-usado.webp); }
.gancho.plataforma.abre .salto__bloque b{ opacity:0; }
.gancho.plataforma.abre .salto__estrella{ animation:estrella-sale .6s cubic-bezier(.2,.8,.3,1) .16s forwards; }
@keyframes estrella-sale{ 0%{ opacity:1; transform:translateY(0) scale(.6) rotate(-40deg); } 100%{ opacity:1; transform:translateY(-104px) scale(1.7) rotate(0); } }
.gancho.plataforma.abre .salto__iris{ animation:iris-abre .5s cubic-bezier(.6,0,.9,.5) .7s forwards; }
@keyframes iris-abre{ to{ transform:scale(64); } }
.entrada__pista{
  margin-top:1rem; padding:.55rem 1.4rem .5rem; border:3px solid var(--marino); border-radius:16px; background:var(--rojo); color:#FFFFFF; box-shadow:var(--sombra);
  font-family:var(--f-display); font-weight:400; font-size:1.15rem; letter-spacing:.02em;
  animation:pista-late 1.5s ease-in-out infinite;
}
@keyframes pista-late{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.entrada__marcador{ margin-top:.9rem; margin-bottom:56px; color:var(--marino); font-weight:800; letter-spacing:.14em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — su nombre en letras de colores; abajo, él sigue brincando
   --w es el ancho del paisaje: todo lo de abajo se mide con él.
   ══════════════════════════════════════════════════════════════════════ */
.portada{ --w:min(100vw, 560px); --hx:calc(50% - var(--w) * .2); overflow:hidden; gap:0; justify-content:flex-start; padding-top:3.4rem; padding-bottom:calc(var(--w) * .62); background:linear-gradient(180deg, var(--cielo), var(--cielo-bajo) 72%); }
.portada > :not(.nivel){ position:relative; z-index:2; }
.nivel{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.nivel__nube{ position:absolute; left:0; width:120px; height:63px; background:url(nube.webp) center / contain no-repeat; animation:nube-va 34s linear infinite; }
.nivel__nube--1{ top:57%; animation-delay:-8s; } .nivel__nube--2{ top:5%; width:84px; height:44px; animation-duration:46s; animation-delay:-30s; opacity:.9; }
.nivel__piso{ position:absolute; left:0; right:0; bottom:0; height:calc(var(--w) * .0917); background:url(piso.webp) 50% 0 / auto calc(var(--w) * .1) repeat-x; }
.nivel__colinas{ position:absolute; left:50%; bottom:0; width:var(--w); aspect-ratio:1200/640; margin-left:calc(var(--w) / -2); background:url(colinas.webp) center / 100% 100% no-repeat; }
.nivel__heroe{ position:absolute; left:var(--hx); bottom:calc(var(--w) * .078); width:calc(var(--w) * .34); height:auto; transform-origin:50% 100%; animation:nivel-brinca 3.2s cubic-bezier(.3,.7,.4,1) infinite; }
.nivel__bloque{ position:absolute; left:calc(var(--hx) + var(--w) * .34 * .773 - var(--w) * .07); bottom:calc(var(--w) * .078 + var(--w) * .34 * 1.2308 * .667 + var(--w) * .085); width:calc(var(--w) * .14); height:calc(var(--w) * .14); display:grid; place-items:center; background:url(bloque.webp) center / 100% 100% no-repeat; animation:nivel-bloque 3.2s ease infinite; }
.nivel__bloque b{ font-family:var(--f-display); font-weight:400; font-size:calc(var(--w) * .085); line-height:1; color:#FFFFFF; text-shadow:2px 0 0 #1B1B3A, -2px 0 0 #1B1B3A, 0 2px 0 #1B1B3A, 0 -2px 0 #1B1B3A, 0 4px 0 #1B1B3A; transform:translateY(-8%); }
.nivel__moneda{ position:absolute; left:calc(var(--hx) + var(--w) * .34 * .773 - var(--w) * .03); bottom:calc(var(--w) * .078 + var(--w) * .34 * 1.2308 * .667 + var(--w) * .12); width:calc(var(--w) * .06); height:calc(var(--w) * .075); opacity:0; background:url(moneda.webp) center / contain no-repeat; animation:nivel-moneda 3.2s ease-out infinite; }
@keyframes nivel-brinca{ 0%,62%,100%{ transform:translateY(0) scaleY(1); } 31%{ transform:translateY(-1.5%) scaleY(1.02); } 66%{ transform:translateY(0) scaleY(.93); } 75%{ transform:translateY(calc(var(--w) * -.08)) scaleY(1.04); } 88%{ transform:translateY(0); } }
@keyframes nivel-bloque{ 0%,74%,92%,100%{ transform:translateY(0); } 78%{ transform:translateY(calc(var(--w) * -.03)); } 86%{ transform:translateY(calc(var(--w) * .006)); } }
@keyframes nivel-moneda{ 0%,76%{ opacity:0; transform:translateY(0) scaleX(1); } 77%{ opacity:1; } 86%{ opacity:1; transform:translateY(calc(var(--w) * -.14)) scaleX(.25); } 94%{ opacity:1; transform:translateY(calc(var(--w) * -.17)) scaleX(1); } 100%{ opacity:0; transform:translateY(calc(var(--w) * -.15)) scaleX(.4); } }

.portada__arriba{ padding:.34rem 1rem .26rem; border:3px solid var(--marino); border-radius:999px; background:#FFFFFF; box-shadow:0 4px 0 var(--marino); font-family:var(--f-display); font-size:.95rem; letter-spacing:.03em; color:var(--rojo); }
.portada__nombre{ font-family:var(--f-display); line-height:1; font-size:clamp(4rem,21vw,6rem); margin:1.2rem 0 1rem; color:#FFFFFF; letter-spacing:.01em; }
.portada__nombre .l{ display:inline-block; text-shadow:4px 0 0 #1B1B3A, -4px 0 0 #1B1B3A, 0 4px 0 #1B1B3A, 0 -4px 0 #1B1B3A, 3px 3px 0 #1B1B3A, -3px 3px 0 #1B1B3A, 3px -3px 0 #1B1B3A, -3px -3px 0 #1B1B3A, 0 10px 0 #1B1B3A; }
.portada__nombre .l:nth-child(4n+1){ color:#E23D28; transform:rotate(-4deg); }
.portada__nombre .l:nth-child(4n+2){ color:#2F6FDE; transform:rotate(3deg) translateY(4%); }
.portada__nombre .l:nth-child(4n+3){ color:#FFC83D; transform:rotate(-2deg); }
.portada__nombre .l:nth-child(4n){ color:#3DBB4E; transform:rotate(4deg) translateY(3%); }
body.revelado .portada__nombre .l{ animation:letra-cae .5s cubic-bezier(.3,1.5,.5,1) backwards; }
body.revelado .portada__nombre .l:nth-child(1){ animation-delay:1.25s; } body.revelado .portada__nombre .l:nth-child(2){ animation-delay:1.33s; } body.revelado .portada__nombre .l:nth-child(3){ animation-delay:1.41s; }
body.revelado .portada__nombre .l:nth-child(4){ animation-delay:1.49s; } body.revelado .portada__nombre .l:nth-child(5){ animation-delay:1.57s; } body.revelado .portada__nombre .l:nth-child(n+6){ animation-delay:1.65s; }
@keyframes letra-cae{ from{ opacity:0; translate:0 -60px; scale:.6; } to{ opacity:1; translate:0 0; scale:1; } }
.portada__nombre .amp{ display:block; width:fit-content; margin:1.1rem auto 0; padding:.3rem 1.1rem .22rem; border:3px solid var(--marino); border-radius:999px; background:var(--azul); box-shadow:0 4px 0 var(--marino); font-size:.24em; line-height:1.3; letter-spacing:.04em; color:#FFFFFF; }
.portada__fecha{ background:#FFFFFF; border:3px solid var(--marino); border-radius:16px; box-shadow:var(--sombra); padding:.6rem 1.3rem .5rem; gap:1rem; }
.portada__fecha .fcol{ color:var(--tinta); font-weight:800; letter-spacing:.1em; font-size:.76rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-size:2.7rem; color:var(--rojo); }
.portada__lugar{ margin-top:1.1rem; color:var(--tinta); font-weight:800; font-size:1rem; }
.portada__flecha{ display:none; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — calcomanías sobre cielo y pasto
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); font-size:clamp(1.7rem,7.6vw,2.3rem); line-height:1.12; color:var(--tinta); }
.saludo__pases{ background:var(--amarillo); color:var(--marino); border:3px solid var(--marino); border-radius:999px; box-shadow:0 4px 0 var(--marino); font-weight:800; }

.seccion.alterna{                               /* pasto, con sus manchas claras y su orilla */
  position:relative; border-top:4px solid var(--marino); border-bottom:4px solid var(--marino);
  background:radial-gradient(ellipse 46px 26px at 12% 18%, rgba(255,255,255,.1) 98%, transparent), radial-gradient(ellipse 34px 20px at 86% 34%, rgba(255,255,255,.1) 98%, transparent), radial-gradient(ellipse 40px 22px at 20% 82%, rgba(255,255,255,.1) 98%, transparent), radial-gradient(ellipse 30px 18px at 82% 90%, rgba(255,255,255,.1) 98%, transparent), var(--pasto);
}
.seccion.alterna .parrafo b{ color:#FFE07A; }

.momento{ padding-top:1.4rem; padding-bottom:3.2rem; }
.momento__foto{ border:4px solid var(--marino); border-radius:20px; box-shadow:var(--sombra-alta); transform:rotate(-1.6deg); background:var(--cielo); }
.flotantes{ display:none; }

/* las tarjetas: blancas, con orilla y sombra dura */
.tarjeta, .notas__lista li, .formulario, .faq__item, .buscar{ background:#FFFFFF; border:3px solid var(--marino); border-radius:var(--radio); box-shadow:var(--sombra); }
/* la cuenta: cuatro bloques amarillos con sus remaches */
.cuenta__caja{
  border:3px solid var(--marino); border-radius:14px; box-shadow:inset 0 -8px 0 #E09A12, inset 0 5px 0 rgba(255,255,255,.45), 0 5px 0 var(--marino);
  background:radial-gradient(circle at 12% 16%, #1B1B3A 0 2.5px, transparent 3px), radial-gradient(circle at 88% 16%, #1B1B3A 0 2.5px, transparent 3px), var(--amarillo);
}
.cuenta__caja .n{ font-family:var(--f-display); color:#1B1B3A; }
.cuenta__caja .l{ color:#1B1B3A; font-weight:800; }
.tarjeta__icono{ color:#1F5FD0; }
.tarjeta b{ font-family:var(--f-display); font-weight:400; font-size:1.25rem; line-height:1.15; color:#CF2A1B; }
.tarjeta:nth-child(odd){ transform:rotate(-1.4deg); } .tarjeta:nth-child(even){ transform:rotate(1.4deg); }

.dedicatoria__texto{ font-family:var(--f-texto); font-weight:700; font-size:1.2rem; line-height:1.55; color:var(--tinta); }
.dedicatoria__firma{ font-family:var(--f-display); font-size:1.7rem; color:var(--rojo); }

.galeria__grid{ gap:.9rem; }
.foto img{ border:3px solid var(--marino); border-radius:16px; box-shadow:var(--sombra); background:var(--cielo); box-sizing:border-box; }
.foto:nth-child(even) img{ transform:rotate(1.4deg); } .foto:nth-child(odd) img{ transform:rotate(-1.4deg); }
.foto--ancha img{ transform:none; aspect-ratio:1100/620; }
.foto__hueco{ border:3px dashed var(--marino); border-radius:16px; }

/* el itinerario: el mapa, con una moneda en cada parada */
.linea::before{ width:0; background:none; border-left:4px dotted rgba(255,255,255,.9); border-radius:0; left:4px; }
.linea__paso::before{ left:-11px; top:.9rem; width:22px; height:28px; border:0; border-radius:0; background:url(moneda.webp) center / contain no-repeat; }
.linea__paso.destaca::before{ width:30px; height:30px; left:-15px; top:.8rem; background:url(estrella.webp) center / contain no-repeat; }
.linea__hora{ font-family:var(--f-display); font-size:1.3rem; color:#FFE07A; text-shadow:0 2px 0 #1B1B3A; min-width:3.5rem; }
.linea__que b{ font-family:var(--f-texto); font-weight:800; font-size:1.12rem; color:#FFFFFF; }
.linea__que small{ font-size:.92rem; }

.lugares__hora{ font-weight:800; color:var(--acento); }
.mapa{ border:3px solid var(--marino); border-radius:16px; box-shadow:var(--sombra); }

.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ border-left:3px solid var(--marino); font-weight:600; }
.faq__item summary{ font-family:var(--f-texto); font-weight:800; font-size:1.05rem; color:var(--tinta); }

.boton{
  background:var(--rojo); color:#FFFFFF; border:3px solid var(--marino); border-radius:16px; box-shadow:var(--sombra);
  font-family:var(--f-display); font-weight:400; font-size:1.12rem; letter-spacing:.02em;
}
.boton:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--marino); }
.boton--linea{ background:#FFFFFF; color:var(--tinta); font-family:var(--f-texto); font-weight:800; font-size:1rem; letter-spacing:0; }

.formulario{ padding:1.5rem 1.1rem 1.6rem; }
.formulario .boton{ font-size:1rem; padding-left:.6rem; padding-right:.6rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:2.5px solid var(--marino); border-radius:12px; background:#fff; color:#1B1B3A; font-size:1rem; }
.rsvp__intro b{ color:#FFE07A; }

.pie{ position:relative; padding-top:calc(60px + 2.4rem); background:var(--marino); }
.pie::before{ content:""; position:absolute; left:0; right:0; top:0; height:60px; background:url(piso.webp) 0 0 / 88px 60px repeat-x; }
.pie__nombre{ font-family:var(--f-display); font-size:2.7rem; line-height:1.1; color:var(--amarillo); }

@media (prefers-reduced-motion:reduce){
  .gancho.plataforma .salto__heroe, .entrada__pista, .entrada::before, .nivel__nube, .nivel__heroe, .nivel__bloque, .nivel__moneda{ animation:none; }
  body.revelado .portada__nombre .l{ animation:none; }
}