/* ==========================================================================
   TEMA: CUMPLEAÑOS DE ADULTO · EDICIÓN LIMITADA — dirección de arte "CAJA DE JUGUETE"
   Creada el 5 de octubre de 2026. La pidió Abdiel: "ese tipo de monito también está
   chilo… algo para adulto, pero como chistosón".

   LA IDEA: el festejado es una figura de colección. La invitación ES su empaque:
     · la entrada es su caja, sellada ("Nuevo · Sin abrir"); se toca dos veces y se abre
     · en la portada sale de la caja y da la vuelta en su vitrina: se gira con el dedo
       (son 36 fotos del monito en 3D; las mueve nucleo/detalles.js)
     · las secciones hablan como caja de juguete: "La caja incluye", "Instrucciones de
       uso", "Advertencias del fabricante", "Punto de venta"
   Diseño propio: sin nombre, logo ni personajes de ninguna marca.

   TEORÍA DEL COLOR: paleta de empaque de juguete de los ochenta. Crema de cartón de base
   (60), azul marino en bloques que alternan (30), y mostaza + rojo naranja solo en lo que
   se toca y en los sellos (10). Mostaza y marino son casi complementarios: por eso el botón
   salta sin gritar. El turquesa (la camisa de la figura) entra en detalles chicos.

   CONTRASTE MEDIDO (fórmula WCAG):
     sobre crema  #FFF4DC → tinta marino 14.3 · suave 7.1 · rojo hondo 5.3
     sobre marino #1F2041 → crema 14.3 · mostaza 8.8 · suave claro 9.9
     marino sobre el botón mostaza #F5B82E → 8.8 · crema sobre el pie rojo hondo #B8391A → 5.3
     (el rojo vivo #E4572E solo va en sombras, cintas y sellos: nunca lleva texto chico)
   ========================================================================== */
:root{
  --marino:#1F2041; --marino-2:#2B2C57; --mostaza:#F5B82E; --rojo:#E4572E; --rojo-hondo:#B8391A; --turq:#17BEBB; --crema:#FFF4DC;
  --papel:#FFF4DC;  --papel-hondo:#FBE6B4;
  --tinta:#1F2041;  --tinta-suave:#4E4F78;
  --marca:#1F2041;  --marca-claro:#F5B82E;
  --acento:#B8391A; --acento-hondo:#8A2A12;
  --f-display:"Anton", Impact, "Arial Black", sans-serif;
  --f-texto:"Rubik", system-ui, sans-serif;
  --radio:16px;
  --sombra:5px 5px 0 rgba(31,32,65,.2);
  --sombra-alta:8px 8px 0 rgba(31,32,65,.24);
  --puntos:radial-gradient(circle at 4px 4px, rgba(255,255,255,.06) 3px, transparent 3.6px) 0 0 / 22px 22px;
  --cinta:repeating-linear-gradient(-45deg, var(--mostaza) 0 14px, var(--rojo) 14px 28px);
  font-synthesis:none;
}
body{ background:var(--papel); }
h1, h2, .titulo, .boton, .portada__nombre, .entrada__nombre, .saludo__nombre, .pie__nombre, .dedicatoria__firma, .linea__hora, .cuenta__caja .n, .portada__fecha .fnum{ font-weight:400; }

/* sobre marino, las letras se voltean a claro; las tarjetas de adentro regresan a tinta sobre crema */
.entrada, .portada, .seccion.alterna, .pie{ --tinta:#FFF4DC; --tinta-suave:#CFCBE4; --marca:#F5B82E; --acento:#F5B82E; color:var(--tinta); }
.seccion.alterna :is(.cuenta__caja, .tarjeta, .formulario, .notas__lista li, .parrafo-caja){ --tinta:#1F2041; --tinta-suave:#4E4F78; --marca:#1F2041; --acento:#B8391A; color:var(--tinta); }

.etiqueta{
  display:inline-block; padding:.4rem .9rem .34rem; border-radius:6px; background:var(--marino); color:var(--mostaza);
  font-family:var(--f-texto); font-weight:800; font-size:.66rem; letter-spacing:.2em; transform:rotate(-1.2deg);
}
.seccion.alterna .etiqueta{ background:var(--mostaza); color:var(--marino); }
.titulo{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.01em; line-height:1.02;
  font-size:clamp(2.3rem,11vw,3.3rem); margin:.8rem 0 1.4rem;
  color:var(--marino); text-shadow:3px 3px 0 var(--mostaza);
}
.seccion.alterna .titulo{ color:var(--mostaza); text-shadow:3px 3px 0 var(--rojo); }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — la caja sellada. Se toca dos veces y se abre.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:var(--puntos), var(--marino); transition:opacity .6s ease .45s, visibility 0s linear 1.1s; }
.entrada::before, .entrada::after{ content:""; position:absolute; left:0; right:0; height:16px; background:var(--cinta); pointer-events:none; }
.entrada::before{ top:0; } .entrada::after{ bottom:0; }
.entrada > *{ position:relative; z-index:1; }
.entrada__para{
  padding:.34rem .9rem .3rem; border-radius:6px; background:var(--mostaza); color:var(--marino);
  font-family:var(--f-texto); font-weight:800; letter-spacing:.24em; font-size:.68rem; transform:rotate(-2deg);
}
.entrada__nombre{
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.9rem,8.6vw,2.6rem); line-height:1.05; margin:.6rem 0 .9rem;
  color:var(--crema); text-shadow:3px 3px 0 var(--rojo);
}
.gancho.caja-figura{ position:relative; width:min(58vw,236px); aspect-ratio:760/1140; animation:cf-flota 3.6s ease-in-out infinite; }
@keyframes cf-flota{ 0%,100%{ transform:rotate(-2.5deg) translateY(0); } 50%{ transform:rotate(1.5deg) translateY(-8px); } }
.caja__arte{ display:block; width:100%; height:100%; border-radius:12px; box-shadow:0 0 0 3px var(--crema), 10px 12px 0 rgba(0,0,0,.35); }
.caja__cinta{                                  /* la cinta que la sella, cruzada en la esquina */
  position:absolute; right:-25%; top:5%; padding:.34rem 2.6rem .3rem; background:var(--rojo); color:var(--crema);
  font-family:var(--f-display); font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  transform:rotate(32deg); box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.gancho.caja-figura .rayos{ position:absolute; left:50%; top:50%; width:190%; height:auto; aspect-ratio:1; transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.gancho.caja-figura .rayos path{ fill:var(--mostaza); }
/* el toque: la caja se sacude y se asoman los rayos */
.gancho.caja-figura.golpe{ animation:cf-sacude .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes cf-sacude{ 0%,100%{ transform:rotate(0) scale(1); } 15%{ transform:rotate(-7deg) scale(1.04); } 35%{ transform:rotate(6deg) scale(1.06); } 55%{ transform:rotate(-4deg) scale(1.03); } 75%{ transform:rotate(2deg); } }
.gancho.caja-figura.golpe .rayos{ animation:cf-rayos .5s ease-out; }
@keyframes cf-rayos{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(0); } 35%{ opacity:.9; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.05) rotate(18deg); } }
/* al abrir: la cinta sale volando, la caja se viene encima y se desvanece */
.gancho.caja-figura.abre{ animation:cf-abre .75s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes cf-abre{ 0%{ transform:rotate(0) scale(1); opacity:1; } 30%{ transform:rotate(-4deg) scale(.94); opacity:1; } 100%{ transform:rotate(5deg) scale(3.4); opacity:0; } }
.gancho.caja-figura.abre .caja__cinta{ animation:cf-cinta .5s ease-in forwards; }
@keyframes cf-cinta{ to{ transform:translate(120%,-160%) rotate(70deg); opacity:0; } }
.gancho.caja-figura.abre .rayos{ animation:cf-rayos .75s ease-out; }
.entrada__pista{
  margin-top:1.5rem; padding:.6rem 1.4rem .5rem; border-radius:10px;
  background:var(--mostaza); color:var(--marino); box-shadow:4px 4px 0 var(--rojo);
  font-family:var(--f-display); font-size:1.2rem; letter-spacing:.04em; text-transform:uppercase;
  animation:cf-late 1.5s ease-in-out infinite;
}
@keyframes cf-late{ 0%,100%{ transform:scale(1) rotate(-1.5deg); } 50%{ transform:scale(1.06) rotate(1deg); } }
.entrada__marcador{ margin-top:.9rem; color:var(--crema); font-weight:800; letter-spacing:.14em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — fuera de la caja: la figura da la vuelta en su vitrina
   ══════════════════════════════════════════════════════════════════════ */
.portada{ overflow:hidden; background:var(--puntos), var(--marino); gap:0; padding-top:3rem; }
.portada::before{ content:""; position:absolute; left:0; right:0; top:0; height:14px; background:var(--cinta); }
.portada__arriba{ font-family:var(--f-texto); font-weight:800; font-size:.58rem; letter-spacing:.17em; white-space:nowrap; text-transform:uppercase; color:var(--crema); }
.portada__marca{
  font-family:var(--f-display); text-transform:uppercase; line-height:1; letter-spacing:.01em;
  font-size:clamp(2.9rem,14.5vw,4.3rem); margin:.5rem 0 1rem; color:var(--mostaza); text-shadow:4px 4px 0 var(--rojo);
}
.vitrina{
  position:relative; width:min(84vw,330px); padding:1.1rem 0 .6rem; border-radius:30px;
  background:
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,255,255,.34) 0 11.25deg, transparent 11.25deg 22.5deg),
    radial-gradient(circle at 50% 46%, #FFF8E4 0, #FFE2A0 56%, #F7B955 100%);
  box-shadow:0 0 0 8px var(--crema), 0 0 0 12px var(--rojo), 14px 16px 0 rgba(0,0,0,.3);
}
.vitrina::after{                               /* el brillo del plástico */
  content:""; position:absolute; inset:0; border-radius:30px; pointer-events:none;
  background:linear-gradient(105deg, transparent 12%, rgba(255,255,255,.2) 12% 30%, transparent 30% 36%, rgba(255,255,255,.2) 36% 41%, transparent 41%);
}
.giratorio{
  position:relative; z-index:1; width:min(62vw,246px); aspect-ratio:270/380; margin:0 auto;
  background:url(giro.webp) 0 0 / 900% 400% no-repeat;
  touch-action:pan-y; cursor:grab; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; outline-offset:6px;
}
.giratorio--agarrado{ cursor:grabbing; }
.vitrina__base{                                /* la tarima donde está parado */
  position:absolute; left:50%; bottom:1.05rem; width:62%; height:34px; margin-left:-31%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%, #FFFDF4 0 58%, #F0DDB0 60% 100%); box-shadow:0 0 0 3px var(--mostaza), 0 9px 0 #D9B56A, 0 12px 0 rgba(0,0,0,.18);
}
.sello{ position:absolute; z-index:2; left:-22px; top:-26px; width:104px; height:104px; display:grid; place-items:center; transform:rotate(-10deg); }
.sello svg{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.25)); }
.sello polygon{ fill:var(--rojo); }
.sello b{ position:relative; font-family:var(--f-display); font-weight:400; font-size:2.9rem; line-height:1; color:var(--crema); text-shadow:2px 2px 0 var(--marino); margin-top:-.5rem; }
.sello small{ position:absolute; bottom:19px; left:0; right:0; font-family:var(--f-texto); font-weight:800; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mostaza); }
.calca{
  position:absolute; z-index:2; right:14px; bottom:-17px; padding:.36rem .8rem .3rem; border-radius:8px;
  background:var(--turq); color:var(--marino); box-shadow:3px 3px 0 var(--marino);
  font-family:var(--f-display); font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; transform:rotate(-3deg);
  animation:cf-calca 2.4s ease-in-out infinite; transition:opacity .5s ease;
}
@keyframes cf-calca{ 0%,100%{ transform:rotate(-3deg) translateX(0); } 50%{ transform:rotate(-1deg) translateX(-8px); } }
.giratorio--tocado ~ .calca{ opacity:0; }
.portada__de{ margin-top:2.1rem; font-family:var(--f-texto); font-weight:800; font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mostaza); }
.portada__nombre{
  font-family:var(--f-display); text-transform:uppercase; line-height:.94; letter-spacing:.01em;
  font-size:clamp(5.4rem,31vw,8.6rem); margin:.1rem 0 1rem; color:var(--crema); text-shadow:6px 6px 0 var(--rojo);
}
.portada__fecha{ background:var(--crema); border:0; border-radius:12px; box-shadow:5px 5px 0 var(--rojo); padding:.55rem 1.2rem; gap:1rem; transform:rotate(-1.2deg); }
.portada__fecha .fcol{ color:#1F2041; font-weight:800; letter-spacing:.14em; font-size:.7rem; }
.portada__fecha .fcol small{ color:#4E4F78; }
.portada__fecha .fnum{ font-family:var(--f-display); font-size:2.9rem; color:#B8391A; }
.portada__lugar{ margin-top:1.3rem; color:var(--crema); font-weight:600; }
.portada__flecha span{ border-color:var(--mostaza); border-width:4px; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — cartón crema y bloques marino, con su cinta
   ══════════════════════════════════════════════════════════════════════ */
.saludo__nombre{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.9rem,8.4vw,2.5rem); line-height:1.06; color:var(--marino); }
.saludo__pases{ background:var(--marino); color:var(--mostaza); border-radius:8px; font-weight:700; }

.seccion.alterna{ position:relative; background:var(--puntos), var(--marino); }
.seccion.alterna::before{ content:""; position:absolute; left:0; right:0; top:0; height:10px; background:var(--cinta); max-width:none; }
.seccion.alterna .parrafo{ color:var(--crema); }
.seccion.alterna .parrafo b{ color:var(--mostaza); }

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

.cuenta__caja, .tarjeta, .notas__lista li, .formulario{ background:var(--crema); border:0; border-radius:var(--radio); box-shadow:5px 5px 0 var(--rojo); }
.cuenta__caja .n{ font-family:var(--f-display); color:#B8391A; }
.cuenta__caja .l{ color:#4E4F78; font-weight:700; }
.tarjeta:nth-child(even){ box-shadow:5px 5px 0 var(--mostaza); }
.tarjeta:nth-child(odd){ transform:rotate(-1deg); } .tarjeta:nth-child(even){ transform:rotate(1deg); }
.tarjeta__icono{ color:var(--marino); background:var(--mostaza); border-radius:50%; padding:9px; width:58px; height:58px; box-sizing:border-box; }
.tarjeta:nth-child(even) .tarjeta__icono{ background:var(--turq); }
.tarjeta b{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; font-size:1.25rem; letter-spacing:.02em; line-height:1.1; }

.dedicatoria__texto{ font-family:var(--f-texto); font-weight:600; font-size:1.3rem; line-height:1.5; color:var(--marino); }
.dedicatoria__firma{ font-family:var(--f-display); text-transform:uppercase; font-size:1.7rem; color:var(--acento); margin-top:.3rem; }

.galeria__grid{ gap:1rem; }
.foto img{ border-radius:12px; box-shadow:0 0 0 4px var(--marino), var(--sombra); background:var(--papel-hondo); }
.foto:nth-child(even) img{ transform:rotate(1.2deg); } .foto:nth-child(odd) img{ transform:rotate(-1.1deg); }
.foto--ancha img{ transform:none; }
.foto__hueco{ border:3px dashed var(--marino); border-radius:12px; }

.linea::before{ background:var(--mostaza); width:4px; border-radius:4px; }
.linea__paso::before{ background:var(--marino); border:3px solid var(--mostaza); }
.linea__paso.destaca::before{ background:var(--rojo); border-color:var(--crema); }
.linea__hora{ font-family:var(--f-display); font-size:1.25rem; color:var(--mostaza); }
.linea__que b{ font-family:var(--f-texto); font-weight:700; color:var(--crema); }

.lugares__hora{ font-weight:700; color:var(--acento); }
.mapa{ border:0; border-radius:14px; box-shadow:0 0 0 4px var(--marino), var(--sombra); }

.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ border-left:8px solid var(--rojo); font-weight:500; }
.faq__item{ background:#fff; border-radius:12px; box-shadow:0 0 0 3px var(--marino), var(--sombra); }
.faq__item summary{ font-family:var(--f-texto); font-weight:700; color:var(--marino); }

.boton{
  background:var(--mostaza); color:var(--marino); border:0; border-radius:12px;
  box-shadow:5px 6px 0 var(--rojo); font-family:var(--f-display); font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase;
}
.boton:active{ transform:translate(4px,5px); box-shadow:1px 1px 0 var(--rojo); }
.boton--linea{ background:var(--crema); color:var(--marino); border:0; box-shadow:inset 0 0 0 3px var(--marino), 4px 5px 0 rgba(31,32,65,.2); font-size:1.05rem; }
.boton--linea:active{ box-shadow:inset 0 0 0 3px var(--marino); }

.formulario{ padding:1.3rem 1.1rem 1.4rem; box-shadow:6px 6px 0 var(--mostaza); }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:2px solid #C9C2A6; border-radius:10px; background:#fff; color:#1F2041; }
.rsvp__intro{ color:var(--crema); } .rsvp__intro b{ color:var(--mostaza); }
.buscar{ box-shadow:0 0 0 3px var(--marino), var(--sombra); }

.pie{ position:relative; background:var(--rojo-hondo); --marca:#FFF4DC; }
.pie::before{ content:""; position:absolute; left:0; right:0; top:0; height:12px; background:repeating-linear-gradient(-45deg, var(--mostaza) 0 14px, var(--marino) 14px 28px); }
.pie__nombre{ font-family:var(--f-display); text-transform:uppercase; font-size:3rem; line-height:1; color:var(--mostaza); text-shadow:3px 3px 0 var(--marino); padding-top:.6rem; }

@media (prefers-reduced-motion:reduce){
  .gancho.caja-figura, .entrada__pista, .calca{ animation:none; }
}