/* ==========================================================================
   TEMA: CUMPLEAÑOS · MUNDO DE BLOQUES  —  dirección de arte "ARCADE ELÉCTRICO"
   Rehecho el 4 de octubre de 2026. Abdiel vio la primera versión (caricatura
   plana) y dijo: "se ve como un Mario moderno… lo quiero tipo 3D… básate en mi
   juego" (SHOCK SHOT, su juego de bloques). De ahí sale TODO:
     · monitos de CUBOS en 3D de verdad (seis caras, con luz y sombra), sin
       orilla de caricatura. El de la portada gira y saluda: no es una imagen.
     · de noche, con rejilla de neón en el piso y aros de luz, como su lobby
     · cubos de energía con letras, flotando y girando
     · el título en letra gorda inclinada, amarillo a naranja, como su portada
     · paneles de "vidrio y neón"
   Diseño propio: sin nombre, logo ni personajes de ninguna marca.

   TEORÍA DEL COLOR (medida en la portada de su juego: noche #0C0A26, índigo
   #1B1464, cian #4DE8FF, rosa #FF4FA3, amarillo #FFC83D, morado #5B2EE6):
   la noche índigo de base (60), paneles morado hondo (30) y tres luces de neón
   (10): el AMARILLO se guarda para lo que se toca, el cian para lo que guía y
   el rosa para lo que adorna. Amarillo-naranja sobre azul-morado son
   complementarios: por eso el título y los botones truenan.

   CONTRASTE MEDIDO (fórmula WCAG): ver la tabla al final de este comentario,
   la escribe herramientas/bloques-arte.js al medir (no se pone a ojo).
   @@CONTRASTE@@
   ========================================================================== */
:root{
  --papel:#0C0A26;  --papel-hondo:#17144A;
  --tinta:#F5F2FF;  --tinta-suave:#C3BCEB;
  --marca:#4DE8FF;  --marca-claro:#8FF3FF;
  --acento:#FFC83D; --acento-hondo:#FF9A1F;
  --cian:#4DE8FF; --rosa:#FF4FA3; --amarillo:#FFC83D; --morado:#5B2EE6; --noche:#0C0A26;
  --f-display:"Lilita One", "Fredoka", system-ui, sans-serif;
  --f-texto:"Nunito", system-ui, sans-serif;
  --radio:16px;
  --sombra:0 0 0 2px rgba(77,232,255,.55), 0 0 22px -4px rgba(77,232,255,.7), 0 18px 34px -22px #000;
  --sombra-alta:0 0 0 2px rgba(255,79,163,.7), 0 0 30px -4px rgba(255,79,163,.8), 0 26px 50px -26px #000;
  /* el cielo de noche: unas cuantas estrellas, hechas con puntitos */
  --estrellas:
    radial-gradient(1.6px 1.6px at 12% 8%, #fff 60%, transparent), radial-gradient(1.4px 1.4px at 32% 22%, #BFD9FF 60%, transparent),
    radial-gradient(1.8px 1.8px at 58% 6%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 74% 18%, #FFE9B0 60%, transparent),
    radial-gradient(1.6px 1.6px at 90% 10%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 6% 34%, #BFD9FF 60%, transparent),
    radial-gradient(1.4px 1.4px at 46% 30%, #fff 60%, transparent), radial-gradient(1.6px 1.6px at 84% 36%, #fff 60%, transparent),
    radial-gradient(1.2px 1.2px at 22% 52%, #FFE9B0 60%, transparent), radial-gradient(1.4px 1.4px at 66% 48%, #BFD9FF 60%, transparent);
  /* la rejilla de neón, acostada (para los bloques alternos) */
  --rejilla:
    repeating-linear-gradient(0deg, rgba(77,232,255,.13) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,79,163,.11) 0 1px, transparent 1px 44px);
}
body{ background:var(--estrellas), radial-gradient(120% 70% at 50% 0%, #241A7A 0%, var(--papel) 62%), var(--papel); }

/* el listón morado, inclinado (como el de la portada de su juego) */
.etiqueta{
  display:inline-block; padding:.38rem .9rem .32rem; background:var(--morado); color:#fff;
  font-family:var(--f-display); font-weight:400; font-size:.86rem; letter-spacing:.14em; line-height:1.1;
  transform:skewX(-9deg) rotate(-1.5deg); box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
/* la letra gorda, inclinada, amarillo a naranja con su orilla de noche */
.titulo, .portada__nombre, .entrada__nombre, .saludo__nombre{
  font-family:var(--f-display); font-weight:400; font-style:normal; line-height:1.02;
  background:linear-gradient(180deg, #FFF3A6 0%, #FFD23F 38%, #FF9A1F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(2px 0 0 #0A0820) drop-shadow(-2px 0 0 #0A0820) drop-shadow(0 2px 0 #0A0820) drop-shadow(0 -2px 0 #0A0820) drop-shadow(0 5px 0 #0A0820) drop-shadow(0 0 14px rgba(255,170,40,.45));
  transform:skewX(-7deg);
}
.titulo{ font-size:clamp(2.2rem,10vw,3.1rem); margin:.9rem 0 1.5rem; padding:0 .2em; }


/* EL JUEGO DE CUBOS (las piezas en 3D) vive en nucleo/cubos3d.css: lo comparten los temas de cubos.
   Aquí solo se le dan los colores de ESTE tema. */
:root{ --aro-1:var(--cian); --aro-2:var(--rosa); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — el cubo de energía. Se le pega: truena con rayos.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{
  overflow:hidden;
  background:var(--estrellas),
    radial-gradient(46% 30% at 50% 54%, rgba(77,232,255,.34), rgba(77,232,255,0) 70%),
    radial-gradient(120% 70% at 50% 0%, #2A1E8C 0%, #0C0A26 62%), #0C0A26;
  transition:opacity .7s ease .35s, visibility 0s linear 1.1s;
}
.entrada::after{                           /* la rejilla del piso, al fondo */
  content:""; position:absolute; left:-40%; right:-40%; bottom:-6%; height:44%; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(77,232,255,.55) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(255,79,163,.5) 0 2px, transparent 2px 46px);
  transform:perspective(420px) rotateX(64deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 46%); mask-image:linear-gradient(180deg, transparent 0, #000 46%);
}
.entrada > *{ position:relative; z-index:1; }
.entrada__para{
  padding:.34rem .9rem .3rem; background:var(--morado); color:#fff; transform:skewX(-9deg);
  font-family:var(--f-display); font-weight:400; letter-spacing:.2em; font-size:.8rem; box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
.entrada__nombre{ font-size:clamp(1.8rem,8vw,2.4rem); margin:.7rem 0 .4rem; padding:0 .2em; }
.gancho.cubo-premio{ position:relative; width:min(64vw,250px); height:min(64vw,250px); }
.gancho.cubo-premio .mundo3d{ position:absolute; inset:0; --suelo:86%; }
.gancho.cubo-premio .aro3d{ --aro:210px; }
.gancho.cubo-premio .aro3d--2{ --aro:130px; }
.gancho.cubo-premio .premio{ animation:cp-gira 6s linear infinite; }
@keyframes cp-gira{
  from{ transform:translate3d(0, -104px, 0) rotateX(-12deg) rotateY(0deg); }
  50%{ transform:translate3d(0, -118px, 0) rotateX(-12deg) rotateY(180deg); }
  to{ transform:translate3d(0, -104px, 0) rotateX(-12deg) rotateY(360deg); }
}
.gancho.cubo-premio .trozo{ opacity:0; }
.gancho.cubo-premio .rayos{ position:absolute; inset:-14% -18%; width:136%; height:128%; opacity:0; pointer-events:none; }
.gancho.cubo-premio .rayos path{ fill:none; stroke:#fff; stroke-width:5; stroke-linejoin:bevel; filter:drop-shadow(0 0 6px #8FF3FF) drop-shadow(0 0 16px #4DE8FF); }
/* el golpe: el cubo se enciende en blanco, se sacude y le caen rayos */
.gancho.cubo-premio.golpe{ animation:cp-temblor .5s linear; }
@keyframes cp-temblor{ 0%,100%{ transform:translate(0,0); } 15%{ transform:translate(-7px,3px); } 30%{ transform:translate(6px,-4px); } 50%{ transform:translate(-5px,-2px); } 70%{ transform:translate(4px,3px); } }
.gancho.cubo-premio.golpe .premio > .f{ animation:cp-destello .5s ease-out; }
@keyframes cp-destello{ 0%{ background:#fff; box-shadow:0 0 60px #fff; } 100%{ background:var(--c); } }
.gancho.cubo-premio.golpe .rayos{ animation:cp-rayos .5s steps(1, end); }
@keyframes cp-rayos{ 0%{ opacity:1; } 18%{ opacity:0; } 30%{ opacity:1; } 55%{ opacity:0; } 100%{ opacity:0; } }
/* al abrir: revienta en cubitos que salen volando hacia todos lados */
.gancho.cubo-premio.abre{ animation:none; }
.gancho.cubo-premio.abre .premio{ animation:cp-tronar .45s ease-in forwards; }
@keyframes cp-tronar{ 0%{ transform:translate3d(0,-110px,0) rotateY(20deg) scale3d(1,1,1); opacity:1; } 55%{ transform:translate3d(0,-110px,0) rotateY(110deg) scale3d(1.35,1.35,1.35); opacity:1; } 100%{ transform:translate3d(0,-110px,0) rotateY(200deg) scale3d(.1,.1,.1); opacity:0; } }
.gancho.cubo-premio.abre .rayos{ animation:cp-rayos .7s steps(1, end); }
.gancho.cubo-premio.abre .trozo{ animation:cp-volar .95s cubic-bezier(.15,.7,.3,1) .12s forwards; }
@keyframes cp-volar{
  0%{ opacity:1; transform:translate3d(0,-110px,0) rotate3d(1,1,0,0deg) scale3d(.6,.6,.6); }
  75%{ opacity:1; }
  100%{ opacity:0; transform:translate3d(var(--fx), var(--fy), var(--fz)) rotate3d(1,1,0,420deg) scale3d(1.2,1.2,1.2); }
}
.entrada__pista{
  margin-top:1.1rem; padding:.6rem 1.3rem .52rem; border-radius:12px; transform:skewX(-7deg);
  background:linear-gradient(180deg, #FFE27A, #FFB21F); color:var(--noche); border:3px solid #0A0820; box-shadow:0 5px 0 #0A0820, 0 0 22px rgba(255,190,60,.55);
  font-family:var(--f-display); font-weight:400; font-size:1.1rem; letter-spacing:.03em;
  animation:pista-late 1.4s ease-in-out infinite;
}
@keyframes pista-late{ 0%,100%{ transform:skewX(-7deg) scale(1); } 50%{ transform:skewX(-7deg) scale(1.06); } }
.entrada__marcador{ margin-top:.9rem; color:var(--marca-claro); font-weight:800; letter-spacing:.2em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — la arena: el festejado en 3D, girando sobre sus aros de luz
   ══════════════════════════════════════════════════════════════════════ */
.portada{
  isolation:isolate; overflow:hidden;
  background:var(--estrellas),
    radial-gradient(58% 26% at 50% 40%, rgba(120,170,255,.5), rgba(77,232,255,.16) 46%, rgba(77,232,255,0) 72%),
    radial-gradient(120% 70% at 50% 0%, #2A1E8C 0%, #0C0A26 64%), #0C0A26;
}
.portada::before{                              /* los rayos de luz detrás del festejado, girando despacio */
  content:""; position:absolute; left:50%; top:40%; width:150vmax; height:150vmax; margin:-75vmax 0 0 -75vmax; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(143,243,255,.1) 0 4deg, transparent 4deg 15deg);
  -webkit-mask-image:radial-gradient(circle, #000 0, transparent 46%); mask-image:radial-gradient(circle, #000 0, transparent 46%);
  animation:rayos-giran 60s linear infinite;
}
@keyframes rayos-giran{ to{ transform:rotate(360deg); } }
.portada__arriba{
  display:inline-block; padding:.38rem .9rem .32rem; background:var(--morado); color:#fff; transform:skewX(-9deg) rotate(-1.5deg);
  font-family:var(--f-display); font-weight:400; font-size:.86rem; letter-spacing:.16em; box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
.arena{ width:100%; height:min(92vw, 350px); margin:.4rem 0 0; }
.arena .camara3d{ --suelo:90%; }
.arena .monito{ --t:.72; }
.portada__nombre{ font-size:clamp(4.6rem,24vw,7rem); margin:.1rem 0 0; padding:0 .16em; }
/* el piso es 3D y se extiende: el nombre y la fecha van ENCIMA, no debajo */
.portada__nombre, .portada__fecha, .portada__lugar{ position:relative; z-index:1; }
.portada__anos{
  margin:.2rem 0 1.2rem; font-family:var(--f-display); font-size:1.5rem; letter-spacing:.04em; color:var(--tinta);
  text-shadow:0 0 12px rgba(77,232,255,.8);
}
.portada__anos b{ color:var(--amarillo); font-weight:400; font-size:1.25em; }
.portada__fecha{
  background:rgba(23,20,74,.86); border:2px solid var(--cian); border-radius:var(--radio); padding:.6rem 1.2rem; gap:1rem;
  box-shadow:0 0 18px rgba(77,232,255,.6), inset 0 0 16px rgba(77,232,255,.22);
}
.portada__fecha .fcol{ color:var(--tinta); font-weight:800; letter-spacing:.14em; font-size:.72rem; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:400; font-size:2.7rem; color:var(--amarillo); text-shadow:0 0 14px rgba(255,200,61,.7); }
.portada__lugar{ margin-top:1.2rem; color:var(--tinta); font-weight:700; }
.portada__flecha span{ border-color:var(--cian); border-width:3px; filter:drop-shadow(0 0 6px var(--cian)); }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — paneles de vidrio y neón
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-size:clamp(1.7rem,7.4vw,2.2rem); padding:0 .2em; }
.saludo__pases{
  background:transparent; color:var(--amarillo); border:2px solid var(--amarillo); border-radius:10px;
  box-shadow:0 0 14px rgba(255,200,61,.55), inset 0 0 12px rgba(255,200,61,.2); font-weight:800; letter-spacing:.06em;
}

.seccion.alterna{
  position:relative; background:var(--rejilla), var(--papel-hondo);
  border-top:2px solid var(--cian); border-bottom:2px solid var(--rosa);
  box-shadow:0 -1px 22px rgba(77,232,255,.45), 0 1px 22px rgba(255,79,163,.45);
}

.momento{ padding-top:2.6rem; padding-bottom:3.4rem; }
.momento__foto{ border:0; border-radius:20px; box-shadow:var(--sombra-alta); transform:rotate(-1.4deg); background:var(--papel-hondo); }
.flotantes{ display:none; }

.cuenta__caja, .tarjeta, .faq__item, .notas__lista li, .formulario, .mapa{
  background:rgba(23,20,74,.92); color:var(--tinta);
  border:0; border-radius:var(--radio); box-shadow:var(--sombra);
}
.seccion.alterna .cuenta__caja, .seccion.alterna .tarjeta, .seccion.alterna .faq__item, .seccion.alterna .notas__lista li{ background:rgba(12,10,38,.94); }
.cuenta__caja b, .cuenta__caja strong, .cuenta__caja span:first-child{ font-family:var(--f-display); font-weight:400; color:var(--amarillo); text-shadow:0 0 14px rgba(255,200,61,.6); }
.tarjeta:nth-child(3n+2){ box-shadow:0 0 0 2px rgba(255,79,163,.6), 0 0 22px -4px rgba(255,79,163,.75), 0 18px 34px -22px #000; }
.tarjeta:nth-child(3n+3){ box-shadow:0 0 0 2px rgba(255,200,61,.6), 0 0 22px -4px rgba(255,200,61,.7), 0 18px 34px -22px #000; }
.tarjeta__icono{ color:var(--cian); background:rgba(77,232,255,.1); border-radius:14px; box-shadow:inset 0 0 0 2px rgba(77,232,255,.5); filter:drop-shadow(0 0 6px rgba(77,232,255,.7)); }
.tarjeta:nth-child(3n+2) .tarjeta__icono{ color:var(--rosa); background:rgba(255,79,163,.1); box-shadow:inset 0 0 0 2px rgba(255,79,163,.5); filter:drop-shadow(0 0 6px rgba(255,79,163,.7)); }
.tarjeta:nth-child(3n+3) .tarjeta__icono{ color:var(--amarillo); background:rgba(255,200,61,.1); box-shadow:inset 0 0 0 2px rgba(255,200,61,.5); filter:drop-shadow(0 0 6px rgba(255,200,61,.7)); }

.dedicatoria__texto{ font-family:var(--f-display); font-weight:400; font-size:1.45rem; line-height:1.4; color:var(--tinta); }
.dedicatoria__firma{ color:var(--tinta-suave); font-weight:700; }

.galeria__grid{ gap:1.1rem; padding:4px; }
.foto img{ border:0; border-radius:14px; box-shadow:var(--sombra); background:var(--papel-hondo); }
.foto:nth-child(even) img{ box-shadow:0 0 0 2px rgba(255,79,163,.7), 0 0 22px -4px rgba(255,79,163,.8), 0 18px 34px -22px #000; }
.foto__hueco{ border:2px dashed var(--cian); background:var(--papel-hondo); border-radius:14px; }

.linea::before{ background:linear-gradient(180deg, var(--cian), var(--rosa)); width:3px; box-shadow:0 0 12px var(--cian); }
.linea__paso::before{ background:var(--amarillo); border:0; border-radius:3px; box-shadow:0 0 12px var(--amarillo); }
.linea__hora{ font-family:var(--f-display); font-weight:400; color:var(--amarillo); }
.linea__que{ color:var(--tinta); }

.faq__item summary{ font-family:var(--f-display); font-weight:400; color:var(--tinta); }
.notas__lista{ margin-top:1.1rem; }
.notas__lista li{ border-left:4px solid var(--amarillo); }

.boton{
  background:linear-gradient(180deg, #FFE27A, #FFB21F); color:var(--noche);
  border:3px solid #0A0820; border-radius:14px; box-shadow:0 6px 0 #0A0820, 0 0 24px rgba(255,190,60,.5);
  font-family:var(--f-display); font-weight:400; letter-spacing:.04em; font-size:1.12rem;
}
.boton:active{ transform:translateY(5px); box-shadow:0 1px 0 #0A0820, 0 0 14px rgba(255,190,60,.5); }
.boton--linea{ background:transparent; color:var(--tinta); border:2px solid var(--cian); box-shadow:0 0 16px rgba(77,232,255,.5), inset 0 0 12px rgba(77,232,255,.2); }
.boton--linea:active{ box-shadow:0 0 8px rgba(77,232,255,.5); }

.formulario{ padding:1.3rem 1.1rem 1.4rem; }
.campo, .campo label, .formulario label, .formulario__quien{ color:var(--tinta); }
.campo input, .campo select, .campo textarea, .buscar__entrada{
  background:#0C0A26; color:var(--tinta); border:2px solid rgba(77,232,255,.6); border-radius:12px;
}
.campo input::placeholder, .campo textarea::placeholder, .buscar__entrada::placeholder{ color:var(--tinta-suave); }
.campo select option{ background:#0C0A26; color:var(--tinta); }
.rsvp__intro b{ color:var(--amarillo); }

.volver{ background:#17144A; color:var(--tinta); border:2px solid var(--cian); box-shadow:0 0 16px rgba(77,232,255,.5); }
.volver svg{ stroke:var(--tinta); }

.pie{ background:#07061A; border-top:2px solid var(--cian); box-shadow:0 -1px 22px rgba(77,232,255,.5); }
.pie__nombre{ font-family:var(--f-display); font-weight:400; color:var(--amarillo); }

@media (prefers-reduced-motion:reduce){
  .camara3d.gira, .monito.saluda .brazo--d, .cubo-letra.flota, .gancho.cubo-premio .premio, .entrada__pista, .portada::before{ animation:none; }
}