/* ==========================================================================
   TEMA: CUMPLEAÑOS · REINO DE CUBOS  —  dirección de arte "CUENTO DE AZÚCAR"
   Creada el 4 de octubre de 2026. La pidió Abdiel después de ver el monito de
   cubos girando: "haz la princesa de cubos, pero con colores no tan neón, más
   pastel, más de princesa, un castillo".

   LA IDEA: el mismo juego de cubos en 3D de "Mundo de bloques", pero de día y
   de cuento. La princesa (vestido de tres olanes, pelo largo, tiara) gira y
   saluda frente a su castillo de cubos, sobre un piso de losetas. Nada de
   neón: luz de amanecer, colores de dulce y oro en los detalles.
     · la entrada: una caja de regalo de cubos que gira; se toca tres veces
       (chispea) y se abre en cubitos de colores
     · tarjetas blancas de orilla suave, listones lila, botones de oro
   Diseño propio: sin nombre, logo ni personajes de ninguna marca.

   TEORÍA DEL COLOR: crema rosado de base (60), rosa y lila pastel en los
   bloques (30) y ORO solo en lo que se toca y en la tiara (10). Rosa y lila
   son análogos (se llevan suave, como de cuento); el oro es el complemento
   cálido que hace brillar los botones. La tinta es un morado ciruela, no
   negro: así el texto se lee sin endurecer la página.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre crema  #FFF7F2 → tinta 11.1 · suave 5.5 · lila hondo 5.9 · rosa hondo 5.3
     sobre rosa   #FCE6F0 → tinta 9.9  · suave 4.9 · lila hondo 5.3 · rosa hondo 4.8
     sobre blanco #FFFFFF → tinta 11.8 · suave 5.8 · lila hondo 6.3 · rosa hondo 5.6
     tinta sobre el botón de oro #F2C14E → 7.0 · blanco sobre el listón lila #7B48AB → 6.3
   ========================================================================== */
:root{
  --papel:#FFF7F2;  --papel-hondo:#FCE6F0;
  --tinta:#4A2A5E;  --tinta-suave:#775A8C;
  --marca:#7B48AB;  --marca-claro:#C9B6F2;
  --acento:#B03A78; --acento-hondo:#8E2A60;
  --rosa:#F7A8CC; --lila:#C9B6F2; --menta:#BDEBD8; --cielo:#BFE3FF; --oro:#F2C14E; --oro-hondo:#C48A22;
  --f-display:"Fredoka", system-ui, sans-serif;
  --f-texto:"Nunito", system-ui, sans-serif;
  --radio:22px;
  --sombra:0 14px 30px -18px rgba(122,72,150,.55);
  --sombra-alta:0 26px 50px -24px rgba(122,72,150,.6);
  /* el juego de cubos, con los colores de este cuento */
  --loseta-a:#FBD3E6; --loseta-b:#FFF6EC;
  --aro-1:#F2C14E; --aro-2:#FFFFFF; --brillo:10px;
  --f-cubos:"Fredoka", system-ui, sans-serif;
  --porton:#8A5FA8;
  /* el cielo del amanecer y sus nubes de cubos */
  --amanecer:linear-gradient(180deg, #C9B6F2 0%, #F3C4E4 38%, #FFD9C9 72%, #FFF1DD 100%);
  --nubes:
    linear-gradient(#fff, #fff) 6% 9% / 104px 28px no-repeat, linear-gradient(#fff, #fff) calc(6% + 22px) calc(9% - 18px) / 50px 24px no-repeat,
    linear-gradient(#fff, #fff) 95% 17% / 88px 24px no-repeat, linear-gradient(#fff, #fff) calc(95% - 16px) calc(17% - 16px) / 44px 22px no-repeat;
  /* chispitas de cuento, para los bloques alternos */
  --chispas:
    radial-gradient(2px 2px at 12% 18%, #fff 60%, transparent), radial-gradient(2.4px 2.4px at 38% 62%, #fff 60%, transparent),
    radial-gradient(2px 2px at 64% 24%, #fff 60%, transparent), radial-gradient(2.4px 2.4px at 86% 70%, #fff 60%, transparent),
    radial-gradient(1.8px 1.8px at 52% 88%, #fff 60%, transparent), radial-gradient(2px 2px at 24% 84%, #fff 60%, transparent);
}
body{ background:var(--papel); }

/* los aros de este tema no son de neón: una alfombra de oro, sin resplandor */
.aro3d{ border-width:6px; box-shadow:0 0 0 2px rgba(255,255,255,.7), 0 0 10px rgba(242,193,78,.6); }
.aro3d--2{ box-shadow:0 0 8px rgba(255,255,255,.9); border-style:dashed; }
/* el piso se pierde suave, y las letras de los cubos van en ciruela clara */
.cubo-letra > .f{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), inset 0 0 14px rgba(255,255,255,.5), 0 0 var(--brillo) rgba(255,255,255,.9); }
.corazon{ position:absolute; left:36%; right:36%; top:14%; height:19%; background:var(--oro); transform:rotate(45deg); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6); }

.etiqueta{
  display:inline-block; padding:.36rem 1rem .34rem; border-radius:999px; background:var(--marca); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:.74rem; letter-spacing:.16em;
  box-shadow:0 3px 0 var(--acento-hondo, #5E3486), 0 0 0 3px #fff;
}
/* la letra del cuento: redonda, rosa a lila, con su orilla blanca */
.titulo, .portada__nombre, .entrada__nombre, .saludo__nombre{
  font-family:var(--f-display); font-weight:700; line-height:1.04;
  background:linear-gradient(180deg, #F36FA8 0%, #B565D9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 0 rgba(122,72,150,.35));
}
.titulo{ font-size:clamp(2.1rem,9.6vw,3rem); margin:.9rem 0 1.5rem; }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — la caja de regalo de cubos. Se toca: chispea y se abre.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:var(--nubes), var(--amanecer); transition:opacity .7s ease .35s, visibility 0s linear 1.1s; }
.entrada::after{                           /* el piso de losetas, al fondo */
  content:""; position:absolute; left:-50%; right:-50%; bottom:-4%; height:38%; pointer-events:none;
  background:conic-gradient(var(--loseta-a) 90deg, var(--loseta-b) 0 180deg, var(--loseta-a) 0 270deg, var(--loseta-b) 0) 0 0 / 92px 92px;
  transform:perspective(420px) rotateX(62deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 52%); mask-image:linear-gradient(180deg, transparent 0, #000 52%);
}
.entrada > *{ position:relative; z-index:1; }
.entrada__para{
  padding:.34rem 1rem .32rem; border-radius:999px; background:var(--marca); color:#fff;
  font-family:var(--f-display); font-weight:600; letter-spacing:.22em; font-size:.72rem; box-shadow:0 0 0 3px #fff;
}
.entrada__nombre{ font-size:clamp(1.8rem,8vw,2.4rem); margin:.7rem 0 .4rem; }
.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 7s 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); }
}
/* el listón de oro de la caja: una franja en cruz sobre cada cara */
.gancho.cubo-premio .premio > .f::before{ content:""; position:absolute; left:42%; right:42%; top:0; bottom:0; background:var(--oro); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.gancho.cubo-premio .premio > .f::after{ content:""; position:absolute; top:42%; bottom:42%; left:0; right:0; background:var(--oro); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.gancho.cubo-premio .premio .letra{ z-index:1; color:#fff; text-shadow:0 2px 0 var(--oro-hondo); font-size:calc(var(--w) * .34); }
.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:#fff; stroke:var(--oro); stroke-width:3; stroke-linejoin:round; filter:drop-shadow(0 0 6px #fff); }
/* el toque: la caja brinca y le salen chispas (no truena: es de cuento) */
.gancho.cubo-premio.golpe{ animation:cp-brinco .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes cp-brinco{ 0%,100%{ transform:translateY(0) scale(1); } 20%{ transform:translateY(5px) scale(1.06,.94); } 50%{ transform:translateY(-22px) scale(.97,1.05); } }
.gancho.cubo-premio.golpe .rayos{ animation:cp-chispas .5s ease-out; }
@keyframes cp-chispas{ 0%{ opacity:0; transform:scale(.6) rotate(-10deg); } 30%{ opacity:1; } 100%{ opacity:0; transform:scale(1.2) rotate(14deg); } }
/* al abrir: se deshace en cubitos de colores */
.gancho.cubo-premio.abre{ animation:none; }
.gancho.cubo-premio.abre .premio{ animation:cp-abrir .45s ease-in forwards; }
@keyframes cp-abrir{ 0%{ transform:translate3d(0,-110px,0) rotateY(20deg) scale3d(1,1,1); opacity:1; } 55%{ transform:translate3d(0,-110px,0) rotateY(110deg) scale3d(1.3,1.3,1.3); opacity:1; } 100%{ transform:translate3d(0,-110px,0) rotateY(200deg) scale3d(.1,.1,.1); opacity:0; } }
.gancho.cubo-premio.abre .rayos{ animation:cp-chispas .8s ease-out; }
.gancho.cubo-premio.abre .trozo{ animation:cp-volar 1s 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,380deg) scale3d(1.15,1.15,1.15); }
}
.entrada__pista{
  margin-top:1.1rem; padding:.62rem 1.4rem .56rem; border-radius:999px;
  background:linear-gradient(180deg, #FFE08A, #F4B93E); color:var(--tinta); box-shadow:0 5px 0 var(--oro-hondo), 0 0 0 3px #fff;
  font-family:var(--f-display); font-weight:600; font-size:1.05rem;
  animation:pista-late 1.6s ease-in-out infinite;
}
@keyframes pista-late{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.entrada__marcador{ margin-top:.9rem; color:var(--tinta); font-weight:800; letter-spacing:.16em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — la princesa en 3D, girando frente a su castillo
   ══════════════════════════════════════════════════════════════════════ */
.portada{ isolation:isolate; overflow:hidden; background:var(--nubes), var(--amanecer); }
.portada::before{                              /* la luz del amanecer detrás del castillo */
  content:""; position:absolute; left:50%; top:38%; width:120vmax; height:120vmax; margin:-60vmax 0 0 -60vmax; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.3) 0 5deg, transparent 5deg 16deg);
  -webkit-mask-image:radial-gradient(circle, #000 0, transparent 42%); mask-image:radial-gradient(circle, #000 0, transparent 42%);
  animation:rayos-giran 80s linear infinite;
}
@keyframes rayos-giran{ to{ transform:rotate(360deg); } }
.portada__arriba{
  display:inline-block; padding:.38rem 1rem .34rem; border-radius:999px; background:var(--marca); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:.82rem; letter-spacing:.16em; box-shadow:0 3px 0 #5E3486, 0 0 0 3px #fff;
}
.arena{ width:100%; height:min(96vw, 370px); margin:.4rem 0 0; }
.arena .camara3d{ --suelo:90%; }
.arena .princesa{ --t:.7; }
.arena .castillo{ --t:.4; }
/* 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; }
.camara3d.gira{ animation-duration:8s; }
.portada__nombre{ font-size:clamp(4.2rem,22vw,6.4rem); margin:.6rem 0 .8rem; }
.portada__fecha{ background:#fff; border:2px solid var(--rosa); border-radius:var(--radio); box-shadow:var(--sombra); padding:.6rem 1.2rem; gap:1rem; }
.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:700; font-size:2.7rem; color:var(--acento); }
.portada__lugar{ margin-top:1.2rem; color:var(--tinta); font-weight:700; }
.portada__flecha span{ border-color:var(--marca); border-width:3px; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — tarjetas de cuento
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-size:clamp(1.7rem,7.4vw,2.2rem); }
.saludo__pases{ background:#fff; color:var(--tinta); border:2px solid var(--oro); border-radius:999px; box-shadow:var(--sombra); font-weight:800; }

.seccion.alterna{ position:relative; background:var(--chispas), linear-gradient(180deg, #FCE6F0 0%, #EFE3FB 100%); }
.seccion.alterna::before, .seccion.alterna::after{                 /* la orilla de olán: medias lunas blancas arriba y abajo */
  content:""; position:absolute; left:0; right:0; height:14px; pointer-events:none;
  background:radial-gradient(circle at 14px 0, var(--papel) 0 13px, transparent 14px) 0 0 / 28px 14px repeat-x;
}
.seccion.alterna::before{ top:0; } .seccion.alterna::after{ bottom:0; transform:scaleY(-1); }

.momento{ padding-top:2.6rem; padding-bottom:3.4rem; }
.momento__foto{ border:6px solid #fff; border-radius:26px; 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:#fff; color:var(--tinta); border:2px solid #F3CFE2; border-radius:var(--radio); box-shadow:var(--sombra);
}
.cuenta__caja b, .cuenta__caja strong, .cuenta__caja span:first-child{ font-family:var(--f-display); font-weight:700; color:var(--acento); }
.tarjeta:nth-child(3n+2){ border-color:#DCCDF6; } .tarjeta:nth-child(3n+3){ border-color:#F6E2A6; }
.tarjeta__icono{ color:var(--acento); background:#FDE8F2; border-radius:18px; }
.tarjeta:nth-child(3n+2) .tarjeta__icono{ color:var(--marca); background:#F0E8FC; }
.tarjeta:nth-child(3n+3) .tarjeta__icono{ color:#8A5B12; background:#FCF2D2; }

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

.galeria__grid{ gap:1rem; }
.foto img{ border:5px solid #fff; border-radius:20px; box-shadow:var(--sombra); background:var(--papel-hondo); }
.foto:nth-child(even) img{ transform:rotate(1.1deg); } .foto:nth-child(odd) img{ transform:rotate(-1deg); }
.foto--ancha img{ transform:none; }
.foto__hueco{ border:2px dashed var(--rosa); background:#fff; border-radius:20px; }

.linea::before{ background:linear-gradient(180deg, var(--rosa), var(--lila)); width:4px; border-radius:4px; }
.linea__paso::before{ background:var(--oro); border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 2px var(--oro-hondo); }
.linea__hora{ font-family:var(--f-display); font-weight:700; color:var(--acento); }
.linea__que{ color:var(--tinta); }

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

.boton{
  background:linear-gradient(180deg, #FFE08A, #F4B93E); color:var(--tinta);
  border:0; border-radius:999px; box-shadow:0 6px 0 var(--oro-hondo), 0 0 0 3px #fff, 0 16px 26px -14px rgba(196,138,34,.8);
  font-family:var(--f-display); font-weight:600; letter-spacing:.02em; font-size:1.1rem;
}
.boton:active{ transform:translateY(5px); box-shadow:0 1px 0 var(--oro-hondo), 0 0 0 3px #fff; }
.boton--linea{ background:#fff; color:var(--marca); box-shadow:inset 0 0 0 2px var(--marca), 0 4px 0 #D9C8F0; }
.boton--linea:active{ box-shadow:inset 0 0 0 2px var(--marca); }

.formulario{ padding:1.3rem 1.1rem 1.4rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:2px solid #E7C9DC; border-radius:14px; background:#fff; color:var(--tinta); }
.rsvp__intro b{ color:var(--acento); }

.pie{ background:var(--tinta); border-top:6px solid var(--oro); }
.pie__nombre{ font-family:var(--f-display); font-weight:700; color:var(--oro); }

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