/* ==========================================================================
   TEMA: CUMPLEAÑOS DE ADULTO · NIVEL 40 — dirección de arte "CARTUCHO DE 8 BITS"
   Creada el 5 de octubre de 2026 (trabajo nocturno). Abdiel pidió temas para
   "gente mayor que se cree niño". El arcade retro sale en todas las listas de
   fiestas de adultos de 2026 (birthday.tools, fiestafacil.com).

   LA IDEA: la invitación es un juego de plataformas de los de antes, de día.
   Entra por la pantalla de la maquinita (INSERT COIN: se echa la moneda), y en
   la portada el festejado corre hecho de pixeles, entre monedas, hacia su
   bandera. Las tarjetas son cajas de diálogo de juego de rol (azul marino con
   doble raya blanca) y los botones, bloques amarillos con bisel de pixeles.
   Todo con esquinas cuadradas y sombras duras: nada de curvas ni degradados.
   Diseño propio: sin personajes ni piezas de ningún videojuego.

   TEORÍA DEL COLOR: azul cielo de base (60), azul marino de las cajas y de la
   "cueva" (30) y amarillo moneda en lo que se toca (10). Amarillo y azul son
   complementarios: el botón es lo primero que se ve. Verde pasto, café tierra y
   rojo bandera son los colores del mundo, en detalles chicos.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre cielo  #74C7F5 → tinta #0F1A3C 9.3 · suave #1F2D5A 6.9 · rojo hondo #8E1F12 5.9
     sobre marino #0F1A3C → blanco 17.6 · amarillo 12.1 · celeste #9FE8FF 12.9
     tinta sobre el botón amarillo #FFD23F → 12.1

   LETRAS: "Press Start 2P" NO trae mayúsculas con acento ni Ñ. Solo se usa en
   letreros fijos sin acentos y en números. Todo lo demás va en "Jersey 15", que se lee
   claro (el 2, el 8, la B y la G no se confunden) y trae acentos y Ñ. Es de un solo grosor:
   lo que iría en negrita se distingue por color.
   ========================================================================== */
:root{
  --cielo:#74C7F5; --marino:#0F1A3C; --cueva:#171A3A; --amar:#FFD23F; --amar-hondo:#C98A00; --rojo:#E5483B; --pasto:#4FB648; --tierra:#B86A2F; --celeste:#9FE8FF;
  --papel:#74C7F5;  --papel-hondo:#171A3A;
  --tinta:#0F1A3C;  --tinta-suave:#1F2D5A;
  --marca:#0F1A3C;  --marca-claro:#FFD23F;
  --acento:#8E1F12; --acento-hondo:#5E130A;
  --f-display:"Jersey 15", "Courier New", monospace;
  --f-texto:"Jersey 15", "Courier New", monospace;
  --f-pix:"Press Start 2P", "Courier New", monospace;
  --radio:0px;
  --sombra:4px 4px 0 #0F1A3C;
  --sombra-alta:6px 6px 0 #0F1A3C;
  /* el piso: pasto arriba, tierra con sus piedritas */
  --piso:linear-gradient(180deg, #4FB648 0 8px, #2F8A3A 8px 12px, transparent 12px),
         linear-gradient(90deg, #8A4A1E 0 16px, transparent 16px) 0 24px / 40px 24px, linear-gradient(90deg, #8A4A1E 0 16px, transparent 16px) 20px 36px / 40px 24px, #B86A2F;
  font-synthesis:none;
}
/* la letra de pixeles es chica de por sí: todo el tema crece un 19% (los tamaños del núcleo van en rem) */
html{ font-size:118.75%; }
body{ background:var(--papel); font-size:1.1rem; line-height:1.34; font-weight:400; }
b, strong, h1, h2, h3, summary, .titulo, .etiqueta, .boton{ font-weight:400; }
.parrafo b{ color:var(--acento); }
.seccion.alterna .parrafo b{ color:var(--amar); }
img{ image-rendering:auto; }
.foto img, .momento__foto{ image-rendering:pixelated; }

/* las cajas de diálogo: marino con doble raya blanca. Adentro, letra clara. */
.cuenta__caja, .tarjeta, .notas__lista li, .formulario, .faq__item, .buscar, .portada__fecha{
  --tinta:#FFFFFF; --tinta-suave:#C9D4F5; --marca:#FFFFFF; --acento:#FFD23F;
  background:var(--marino); color:#fff; border:0; border-radius:0;
  box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 6px var(--marino), inset 0 0 0 8px #fff, 5px 5px 0 rgba(15,26,60,.35);
}
.seccion.alterna, .entrada, .pie{ --tinta:#FFFFFF; --tinta-suave:#C9D4F5; --marca:#FFFFFF; --acento:#FFD23F; color:#fff; }

.etiqueta{ display:inline-block; padding:.3rem .7rem .26rem; background:var(--marino); color:var(--amar); font-family:var(--f-texto); font-size:.95rem; letter-spacing:.14em; }
.seccion.alterna .etiqueta{ background:var(--amar); color:var(--marino); }
.titulo{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; line-height:1.05; font-size:clamp(2.1rem,9.6vw,3rem); margin:.9rem 0 1.4rem; color:var(--marino); text-shadow:3px 3px 0 #fff; }
.seccion.alterna .titulo{ color:var(--amar); text-shadow:3px 3px 0 var(--rojo); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — la pantalla de la maquinita: INSERT COIN
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 2px, transparent 2px 4px), #05060F; transition:opacity .45s ease .55s, visibility 0s linear 1s; }
.entrada::after{ content:""; position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }      /* el flashazo al arrancar */
.entrada > *{ position:relative; z-index:1; }
.arcade__marcador{ position:absolute !important; top:1.1rem; left:0; width:100%; margin:0; text-align:center; font-family:var(--f-pix); font-size:.54rem; letter-spacing:.04em; color:#fff; }
.entrada__para{ font-family:var(--f-pix); font-size:.6rem; letter-spacing:.2em; color:var(--celeste); }
.entrada__nombre{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.8rem,8vw,2.4rem); line-height:1.1; margin:.5rem 0 1.4rem; color:#fff; text-shadow:3px 3px 0 var(--rojo); }
.arcade__insert{ font-family:var(--f-pix); font-size:1rem; color:var(--amar); margin-bottom:1.6rem; animation:px-parpadea 1s steps(2) infinite; }
@keyframes px-parpadea{ 50%{ opacity:0; } }
.gancho.moneda-arcade{ position:relative; width:150px; height:190px; }
.moneda{ position:absolute; left:50%; top:0; width:128px; height:128px; margin-left:-64px; background:url(moneda.png) 0 0 / 100% 100% no-repeat; image-rendering:pixelated; animation:px-gira 1.2s steps(6) infinite, px-flota 1.2s ease-in-out infinite; }
@keyframes px-gira{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.08); } }
@keyframes px-flota{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
.ranura{ position:absolute; left:50%; bottom:0; width:96px; height:40px; margin-left:-48px; background:#2A2F52; box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 8px #2A2F52; }
.ranura::after{ content:""; position:absolute; left:50%; top:50%; width:8px; height:24px; margin:-12px 0 0 -4px; background:#05060F; }
/* primer toque: cae la moneda (crédito 1). Segundo: arranca con un flashazo */
.gancho.moneda-arcade.golpe .moneda, .gancho.moneda-arcade.abre .moneda{ animation:px-cae .45s steps(6) forwards; }
@keyframes px-cae{ 0%{ transform:scale(1); translate:0 0; opacity:1; } 70%{ transform:scale(.3,.3); translate:0 110px; opacity:1; } 100%{ transform:scale(.1,.3); translate:0 118px; opacity:0; } }
.gancho.moneda-arcade.golpe .ranura{ box-shadow:inset 0 0 0 4px var(--amar), inset 0 0 0 8px #2A2F52; }
.gancho.moneda-arcade.abre .ranura{ box-shadow:inset 0 0 0 4px var(--pasto), inset 0 0 0 8px #2A2F52; }
body.revelado .entrada::after{ animation:px-flash .5s steps(4) .1s; }
@keyframes px-flash{ 0%{ opacity:0; } 25%{ opacity:1; } 50%{ opacity:0; } 75%{ opacity:.8; } 100%{ opacity:0; } }
.entrada__pista{
  margin-top:1.6rem; padding:.9rem 1.2rem .8rem; background:var(--amar); color:var(--marino);
  box-shadow:inset -4px -4px 0 var(--amar-hondo), inset 4px 4px 0 #FFF3B0, 0 0 0 4px var(--marino), 4px 8px 0 4px rgba(255,255,255,.18);
  font-family:var(--f-pix); font-size:.76rem; text-transform:uppercase;
}
.entrada__marcador{ margin-top:1.1rem; font-family:var(--f-display); font-weight:700; font-size:1.1rem; color:var(--celeste); letter-spacing:.04em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — el nivel: nubes, lomas, monedas y el héroe corriendo
   ══════════════════════════════════════════════════════════════════════ */
.portada{ overflow:hidden; gap:0; padding:0 1.5rem 4.6rem; justify-content:flex-start; background:var(--cielo); }
.portada__arriba{ align-self:stretch; margin:0 -1.5rem 1.8rem; padding:.85rem .5rem .7rem; background:var(--marino); border-bottom:4px solid var(--amar); font-family:var(--f-pix); font-size:.54rem; letter-spacing:.02em; color:#fff; }
.portada__nivel{ font-family:var(--f-pix); font-size:min(10vw, 3.3rem); line-height:1.1; color:var(--amar); text-shadow:4px 4px 0 var(--rojo), 8px 8px 0 var(--marino); white-space:nowrap; margin-right:8px; }
.portada__desbloqueado{ margin-top:1.3rem; padding:.34rem .9rem .3rem; background:var(--marino); color:#fff; font-family:var(--f-pix); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; box-shadow:4px 4px 0 var(--rojo); }
.escena{ position:relative; align-self:stretch; height:214px; font-size:16px; margin:1.2rem -1.5rem 0; overflow:hidden; }
.escena > i{ position:absolute; display:block; }
.escena__piso{ left:0; right:0; bottom:0; height:44px; background:var(--piso); }
.escena__loma{ bottom:44px; border-radius:50% 50% 0 0 / 100% 100% 0 0; background:#5FC455; box-shadow:inset 0 6px 0 #7BD66B; }
.escena__loma--1{ left:-4%; width:44%; height:62px; } .escena__loma--2{ right:-8%; width:56%; height:92px; }
.escena__nube{ width:64px; height:16px; background:#fff; box-shadow:16px -12px 0 #fff, 32px -12px 0 #fff, 8px 8px 0 -4px #fff; animation:px-nube 26s linear infinite; }
.escena__nube--1{ top:26px; left:8%; } .escena__nube--2{ top:58px; left:62%; animation-duration:34s; animation-delay:-12s; }
@keyframes px-nube{ from{ translate:-40vw 0; } to{ translate:60vw 0; } }
.escena__moneda{ width:32px; height:32px; background:url(moneda.png) 0 0 / 100% 100% no-repeat; image-rendering:pixelated; animation:px-gira 1s steps(6) infinite, px-flota 1s ease-in-out infinite; }
.escena__moneda:nth-of-type(5){ left:4%; bottom:70px; } .escena__moneda:nth-of-type(6){ left:13%; bottom:100px; animation-delay:-.2s; } .escena__moneda:nth-of-type(7){ left:22%; bottom:118px; animation-delay:-.4s; }
.escena__moneda:nth-of-type(8){ left:31%; bottom:100px; animation-delay:-.6s; } .escena__moneda:nth-of-type(9){ left:40%; bottom:70px; animation-delay:-.8s; }
.escena__heroe{ left:calc(50% - 10px); bottom:42px; width:96px; height:128px; background:url(heroe.png) 0 0 / 200% 100% no-repeat; image-rendering:pixelated; animation:px-corre .36s steps(1) infinite, px-brinco 2.4s steps(8) infinite; left:auto; right:30%; }
@keyframes px-corre{ 0%{ background-position:0 0; } 50%{ background-position:100% 0; } }
@keyframes px-brinco{ 0%,62%,100%{ translate:0 0; } 74%{ translate:0 -34px; } 86%{ translate:0 -40px; } 94%{ translate:0 -14px; } }
.escena__bandera{ right:24%; bottom:44px; width:8px; height:128px; background:var(--marino); }
.escena__bandera::after{ content:"40"; position:absolute; left:8px; top:0; width:64px; height:44px; background:var(--rojo); color:#fff; font-family:var(--f-pix); font-size:.9rem; line-height:44px; text-align:center; box-shadow:inset -8px 0 0 #B5301F; }
.portada__de{ margin-top:1.5rem; font-family:var(--f-pix); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--marino); }
.portada__nombre{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; line-height:.95; font-size:clamp(5rem,28vw,7.6rem); margin:.2rem 0 1.1rem; color:var(--marino); text-shadow:5px 5px 0 #fff; }
.portada__fecha{ padding:1rem 1.3rem .9rem; gap:1rem; }
.portada__fecha .fcol{ color:#fff; font-weight:700; letter-spacing:.08em; font-size:.92rem; }
.portada__fecha .fcol small{ color:var(--celeste); }
.portada__fecha .fnum{ font-family:var(--f-pix); font-weight:400; font-size:1.9rem; color:var(--amar); }
.portada__lugar{ margin-top:1.4rem; color:var(--marino); font-weight:600; }
.portada__flecha span{ border-color:var(--marino); border-width:4px; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — de día sobre el cielo; las alternas, bajo tierra
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.9rem,8.4vw,2.5rem); line-height:1.06; color:var(--marino); text-shadow:3px 3px 0 #fff; }
.saludo__pases{ background:var(--marino); color:var(--amar); border-radius:0; font-weight:700; }

.seccion.alterna{ position:relative; background:var(--cueva); padding-top:5.4rem; }
.seccion.alterna::before{ content:""; position:absolute; left:0; right:0; top:0; height:48px; background:var(--piso); }      /* el piso por donde se baja a la cueva */

.momento{ padding-top:1.6rem; padding-bottom:3.2rem; }
.momento__foto{ border:0; border-radius:0; box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--marino), 14px 14px 0 rgba(15,26,60,.35); }
.flotantes{ display:none; }

.cuenta__caja{ padding:1rem .2rem .8rem; }
.cuenta__caja .n{ font-family:var(--f-pix); font-weight:400; font-size:clamp(1rem,5vw,1.4rem); color:var(--amar); }
.cuenta__caja .l{ color:#C9D4F5; font-weight:600; margin-top:.4rem; }
.tarjeta{ padding:1.3rem .8rem 1.2rem; }
.tarjeta__icono{ color:var(--amar); }
.tarjeta b{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.2rem; line-height:1.1; }
.tarjeta small{ color:var(--celeste); font-size:.95rem; }

.dedicatoria__texto{ font-family:var(--f-texto); font-weight:500; font-size:1.34rem; line-height:1.45; color:var(--marino); }
.dedicatoria__firma{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:1.5rem; color:var(--marino); }

.galeria__grid{ gap:1rem; }
.foto img{ border-radius:0; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--marino), 10px 10px 0 rgba(15,26,60,.3); background:var(--marino); }
.foto__hueco{ border:3px dashed var(--marino); border-radius:0; }

.linea::before{ background:#fff; width:4px; border-radius:0; }
.linea__paso::before{ background:var(--amar); border:3px solid var(--marino); border-radius:0; box-shadow:0 0 0 2px #fff; }
.linea__paso.destaca::before{ background:var(--rojo); }
.linea__hora{ font-family:var(--f-pix); font-weight:400; font-size:.74rem; color:var(--amar); padding-top:.3rem; }
.linea__que b{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; color:#fff; }
.linea__que small{ font-size:.98rem; }

.lugares__hora{ font-weight:700; color:var(--acento); }
.mapa{ border:0; border-radius:0; box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--marino), 12px 12px 0 rgba(15,26,60,.3); }

.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ border-left:0; padding:1.1rem 1.1rem 1.1rem 2.6rem; position:relative; }
.notas__lista li::before{ content:""; position:absolute; left:1.05rem; top:1.5rem; border-style:solid; border-width:7px 0 7px 10px; border-color:transparent transparent transparent var(--amar); }
.faq__item{ padding:.2rem .3rem; }
.faq__item summary{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; color:#fff; }
.faq__item p{ color:var(--celeste); font-size:1rem; }

/* los botones: bloques amarillos con su bisel de pixeles */
.boton{
  background:var(--amar); color:var(--marino); border:0; border-radius:0;
  box-shadow:inset -4px -4px 0 var(--amar-hondo), inset 4px 4px 0 #FFF3B0, 0 0 0 4px var(--marino), 4px 8px 0 4px rgba(15,26,60,.3);
  font-family:var(--f-pix); font-weight:400; font-size:.62rem; line-height:1.7; text-transform:uppercase; padding-top:1rem; padding-bottom:.9rem;
}
.boton:active{ transform:translateY(4px); box-shadow:inset -4px -4px 0 var(--amar-hondo), inset 4px 4px 0 #FFF3B0, 0 0 0 4px var(--marino); }
.boton--linea{ background:#fff; box-shadow:inset -4px -4px 0 #C9D4F5, 0 0 0 4px var(--marino), 4px 8px 0 4px rgba(15,26,60,.25); font-size:.54rem; }

.formulario{ padding:1.6rem 1.3rem 1.7rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:3px solid #fff; border-radius:0; background:#fff; color:#0F1A3C; font-family:var(--f-texto); font-size:1.1rem; }
.buscar{ padding:1.4rem 1.2rem; }
.buscar__campo, .buscar__campo b{ color:#fff; }
.rsvp__intro b{ color:var(--amar); }

.pie{ background:#05060F; }
.pie::before{ content:"FIN DEL NIVEL 40"; display:block; margin-bottom:1rem; font-family:var(--f-pix); font-size:.7rem; color:var(--amar); letter-spacing:.06em; }
.pie__nombre{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:3rem; line-height:1; color:#fff; text-shadow:4px 4px 0 var(--rojo); }

@media (prefers-reduced-motion:reduce){
  .arcade__insert, .moneda, .escena__moneda, .escena__heroe, .escena__nube{ animation:none; }
}