/* ==========================================================
   Diseño "Juguetes" · Infantil (cuarto de juegos, motivos genéricos)
   jalar la cuerda → cofre abierto → cubos con el nombre → empaque
   ========================================================== */

:root {
  --cielo: #8ec5ff;
  --cielo-osc: #5ea6ee;
  --amarillo: #ffd23f;
  --amarillo-osc: #e8a400;
  --rojo: #e63946;
  --rojo-osc: #b8222e;
  --verde: #57b947;
  --verde-osc: #3d8f30;
  --morado: #7b5cd6;
  --morado-osc: #5a3fb0;
  --tinta: #24305e;
  --madera: #d08a45;

  --s-fondo: #f2f8ff;
  --s-tinta: var(--tinta);
  --s-suave: #4f5d8a;
  --s-acento: var(--rojo);
  --s-acento-tinta: #fff;
  --s-tarjeta: #ffffff;
  --s-borde: rgba(123, 92, 214, .25);
  --s-radio: 22px;
  --s-sombra: 0 8px 0 rgba(36, 48, 94, .12), 0 18px 26px -16px rgba(36, 48, 94, .45);
  --s-fuente: "Fredoka", system-ui, sans-serif;
  --s-titulo: "Fredoka", system-ui, sans-serif;
  --s-titulo-tam: clamp(2rem, 9vw, 2.6rem);
  --s-etiqueta: "Fredoka", system-ui, sans-serif;
  --s-num: "Fredoka", system-ui, sans-serif;
  --s-titulo-color: var(--morado);
  /* Papel tapiz de cuarto de juguetes (propio): nubecitas irregulares, estrellas, puntos y garabatos de crayón */
  --nubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='220'%3E%3Cg fill='%23ffffff' fill-opacity='.7'%3E%3Ccircle cx='40' cy='50' r='11'/%3E%3Ccircle cx='55' cy='43' r='15'/%3E%3Crect x='30' y='50' width='44' height='10' rx='5'/%3E%3Ccircle cx='190' cy='160' r='8'/%3E%3Ccircle cx='202' cy='155' r='11'/%3E%3Ccircle cx='214' cy='161' r='7'/%3E%3Crect x='184' y='160' width='36' height='8' rx='4'/%3E%3C/g%3E%3Cpath d='M150 40l3.5 7 7.5 1-5.5 5 1.5 7.5-7-3.6-7 3.6 1.5-7.5-5.5-5 7.5-1z' fill='%23ffd23f'/%3E%3Cpath d='M60 160l2.5 5 5.5.8-4 3.8 1 5.4-5-2.6-5 2.6 1-5.4-4-3.8 5.5-.8z' fill='%23ffd23f'/%3E%3Ccircle cx='110' cy='110' r='4' fill='%23e63946' fill-opacity='.6'/%3E%3Ccircle cx='230' cy='70' r='3.5' fill='%2357b947' fill-opacity='.7'/%3E%3Ccircle cx='20' cy='120' r='3' fill='%237b5cd6' fill-opacity='.6'/%3E%3Cpath d='M100 190q8-10 16 0t16 0' fill='none' stroke='%237b5cd6' stroke-opacity='.45' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M200 100q6-8 12 0t12 0' fill='none' stroke='%23e63946' stroke-opacity='.4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

body {
  background: var(--nubes) 0 0 / 260px 220px, var(--s-fondo);
  color: var(--tinta);
  font-family: var(--s-fuente);
}

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Cuarto (HERO) ---------- */
.cuarto {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  text-align: center;
  background: var(--nubes) 0 0 / 260px 220px, linear-gradient(180deg, #a6d2ff, var(--cielo) 70%);
}
.piso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15svh;
  border-top: 12px solid #ffffff;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .16), transparent 12px),
    repeating-linear-gradient(90deg, #dc9b58 0 64px, #c4834a 64px 66px);
  box-shadow: 0 -3px 0 rgba(36, 48, 94, .15);
}
.colgantes { position: absolute; inset: 0 0 auto; height: 0; z-index: 1; }
.colgante { position: absolute; top: 0; width: 34px; height: 70px; transform-origin: 50% 0; animation: mecer 3.6s ease-in-out infinite; }
.colgante::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 44px; background: rgba(36, 48, 94, .35); }
.colgante__e { position: absolute; left: 0; bottom: 0; width: 34px; height: 34px; }
.colgante--1 { left: 6%; }
.colgante--2 { left: 18%; height: 44px; animation-delay: -1.2s; }
.colgante--2::before { height: 20px; }
.colgante--3 { right: 7%; height: 56px; animation-delay: -2.1s; }
.colgante--3::before { height: 30px; }
@keyframes mecer { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

.juguetes-capa { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.juguete { position: absolute; left: 0; top: 0; height: auto; opacity: 0; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 6px 4px rgba(36, 48, 94, .25)); }
.juguete.suelto { opacity: 1; }
.juguete--pelota { width: 54px; }
.juguete--cohete { width: 36px; }
.juguete--estrella { width: 46px; }
.juguete--trompo { width: 40px; }
.juguete--tambor { width: 56px; }
.juguete--estrella-chica { width: 30px; }
.juguete--cubo { width: 40px; }

/* Contenido del hero */
.hero-j {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: calc(env(safe-area-inset-top) + 22px) 16px calc(env(safe-area-inset-bottom) + 76px);
}
.nombre-j { margin: 0; font-weight: 700; line-height: 1; }
.nombre-j:focus { outline: none; }
.bloques {
  --n: 6;
  --b: min(56px, calc((min(100vw, 520px) - 32px - (var(--n) - 1) * 6px) / var(--n)));
  display: flex;
  justify-content: center;
  gap: 6px;
}
.bloque {
  position: relative;
  width: var(--b);
  height: var(--b);
  display: grid;
  place-items: center;
  border-radius: calc(var(--b) * .18);
  background: var(--rojo);
  color: #fff;
  font-size: calc(var(--b) * .62);
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  box-shadow: inset 0 0 0 calc(var(--b) * .08) rgba(255, 255, 255, .35), inset 0 calc(var(--b) * -.1) 0 rgba(0, 0, 0, .18), 0 5px 0 rgba(36, 48, 94, .25);
  opacity: 0;
}
.bloque.cayo { opacity: 1; }
.bloque:nth-child(5n + 2) { background: var(--amarillo); color: var(--tinta); text-shadow: none; }
.bloque:nth-child(5n + 3) { background: var(--verde); }
.bloque:nth-child(5n + 4) { background: var(--morado); }
.bloque:nth-child(5n + 5) { background: #3f8fe0; }
.bloque:nth-child(odd) { rotate: -3deg; }
.bloque:nth-child(even) { rotate: 3deg; }
.bloque--espacio { background: none !important; box-shadow: none; width: calc(var(--b) * .4); }

.cumple-j {
  margin: 8px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 0 2px 0 var(--cielo-osc), 0 3px 6px rgba(36, 48, 94, .35);
}
.cumple-j b { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--amarillo); color: var(--tinta); font-size: 1.9rem; text-shadow: none; box-shadow: 0 4px 0 var(--amarillo-osc); }

/* Empaque de juguete */
.empaque-zona { position: relative; width: clamp(200px, min(80vw, calc((100svh - 330px) * .818 + 44px)), 340px); flex: none; margin-top: 10px; opacity: 0; }
.empaque-zona.visible { opacity: 1; }
.empaque {
  position: relative;
  margin: 0;
  padding: 10px 14px 12px;
  border-radius: 20px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .5) 2px, transparent 2.5px) 0 0 / 16px 16px,
    linear-gradient(180deg, #ffe066, var(--amarillo));
  border: 7px solid var(--rojo);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 8px 0 var(--rojo-osc), 0 24px 30px -12px rgba(36, 48, 94, .5);
}
.empaque__colgador {
  position: absolute;
  left: 50%;
  top: -34px;
  width: 64px;
  height: 30px;
  margin-left: -32px;
  border-radius: 14px 14px 0 0;
  background: radial-gradient(ellipse 13px 6px at 50% 45%, var(--cielo) 0 98%, transparent 100%), var(--rojo);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3);
}
.empaque__especial {
  margin: 0 0 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  background: var(--morado);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 4.6vw, 1.25rem);
  letter-spacing: .02em;
  text-shadow: 0 2px 0 var(--morado-osc);
  box-shadow: 0 4px 0 var(--morado-osc);
}
.empaque__estrella { width: 22px; height: 22px; flex: none; animation: brillar 1.6s ease-in-out infinite; }
.empaque__estrella:last-child { animation-delay: -.8s; }
@keyframes brillar { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.25) rotate(20deg); } }
.empaque__ventana {
  position: relative;
  aspect-ratio: 9 / 11;
  overflow: hidden;
  border-radius: 46% 46% 16px 16px / 18% 18% 16px 16px;
  background: #e9f4ff;
  box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--morado);
}
.empaque__ventana img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.empaque__plastico {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .5) 0 7%, transparent 8% 20%, rgba(255, 255, 255, .22) 21% 25%, transparent 26% 72%, rgba(255, 255, 255, .16) 73% 76%, transparent 77%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), inset 0 0 26px rgba(255, 255, 255, .35);
  overflow: hidden;
}
.empaque__plastico::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: destello 4.5s ease-in-out 2.5s infinite;
}
@keyframes destello { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.empaque__pie { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--tinta); }
.empaque__incluye { font-size: .82rem; opacity: .85; }
.empaque__fecha { font-size: 1rem; font-weight: 700; color: var(--rojo); }
.empaque__fecha [data-pieza="semana"] { text-transform: capitalize; }
.empaque__edad {
  position: absolute;
  right: -20px;
  bottom: 64px;
  width: 66px;
  height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 0 4px 0 var(--verde-osc), 0 8px 14px rgba(36, 48, 94, .3);
  transform: rotate(12deg);
}
.empaque__edad b { font-size: 1.8rem; }
.empaque__edad small { font-size: .7rem; font-weight: 600; }
.personaje {
  position: absolute;
  left: -20%;
  bottom: -6%;
  z-index: 4;
  width: 54%;
  height: auto;
  filter: drop-shadow(0 10px 10px rgba(36, 48, 94, .35));
  opacity: 0;
  transform: translateY(40%) scale(.4);
  transform-origin: 50% 100%;
}
.cuarto.revelado .personaje { animation: resorte 1s linear forwards; }
@keyframes resorte {
  0% { opacity: 0; transform: translateY(40%) scale(.4); }
  30% { opacity: 1; transform: translateY(-12%) scale(1.08, .94); }
  50% { transform: translateY(4%) scale(.96, 1.05); }
  70% { transform: translateY(-3%) scale(1.02, .98); }
  100% { opacity: 1; transform: none; }
}

/* Estado inicial del hero (antes de abrir el cofre) */
.cumple-j { opacity: 0; transform: scale(.6); transition: opacity .5s ease, transform .7s cubic-bezier(.3, 1.7, .5, 1); }
.cuarto.revelado .cumple-j { opacity: 1; transform: none; }

/* ---------- Escenario (INTRO): repisa, cofre y cuerda ---------- */
.escenario {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top) + 7svh);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  transition: transform 1s cubic-bezier(.6, -0.3, .7, 1), opacity .7s ease .3s;
}
.escenario.retirado { transform: translateY(80svh) scale(.6); opacity: 0; pointer-events: none; }
.escenario__t { margin: 0; max-width: 16em; font-weight: 700; font-size: clamp(1.3rem, 6vw, 1.7rem); line-height: 1.2; color: #fff; text-shadow: 0 3px 0 var(--cielo-osc), 0 4px 10px rgba(36, 48, 94, .3); }
.estante { position: relative; width: clamp(220px, 66vw, 300px); margin-top: 8px; }
.cofre { position: relative; z-index: 2; width: 86%; margin: 0 auto -6px; }
.cofre__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 6px rgba(36, 48, 94, .3)); }
.cofre__tapa { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .7s cubic-bezier(.3, 1.8, .5, 1); }
.cofre.abierto .cofre__tapa { transform: rotate(-40deg) translate(-6px, -10px); }
.cofre__brillo { opacity: 0; transition: opacity .4s; }
.cofre.abierto .cofre__brillo { opacity: 1; }
.cofre.temblor { animation: temblor .12s linear infinite; }
@keyframes temblor { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px) rotate(.4deg); } }
.repisa { position: relative; z-index: 1; height: 16px; border-radius: 6px; background: linear-gradient(180deg, #e9a866, #b8743a); box-shadow: 0 6px 0 #8f5726, 0 14px 14px rgba(36, 48, 94, .25); }
.repisa::before, .repisa::after { content: ""; position: absolute; top: 100%; width: 22px; height: 30px; background: #b8743a; clip-path: polygon(0 0, 100% 0, 0 100%); }
.repisa::before { left: 14%; }
.repisa::after { right: 14%; transform: scaleX(-1); }

.cuerda { position: absolute; left: calc(50% - 20px); top: 57.33%; width: 40px; height: 400px; overflow: visible; z-index: 3; pointer-events: none; }
.cuerda__base { fill: none; stroke: #c9965a; stroke-width: 6; stroke-linecap: round; }
.cuerda__trenza { fill: none; stroke: #8f6230; stroke-width: 3.5; stroke-dasharray: 4 5; stroke-linecap: round; }
.aro {
  all: unset;
  position: absolute;
  left: 50%;
  top: calc(57.33% + 92px);
  z-index: 4;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  display: grid;
  place-items: start center;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.aro span {
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 9px solid var(--rojo);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .2), 0 3px 0 var(--rojo-osc), 0 8px 10px rgba(36, 48, 94, .3);
  animation: invitar 1.6s ease-in-out infinite;
}
.aro:active { cursor: grabbing; }
.aro:active span, .aro.jalando span { animation: none; }
.aro:focus-visible span { outline: 3px dashed #fff; outline-offset: 5px; }
@keyframes invitar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.escenario__ayuda { margin-top: 112px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: opacity .3s; }
.escenario__jala { margin: 0; font-weight: 700; font-size: 1.4rem; color: var(--rojo); background: #fff; padding: 4px 16px; border-radius: 999px; box-shadow: 0 4px 0 rgba(36, 48, 94, .2); }
.escenario__jala.pide { animation: pide .5s ease; }
@keyframes pide { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.escenario__d { margin: 0; font-weight: 600; font-size: .95rem; color: #fff; text-shadow: 0 2px 3px rgba(36, 48, 94, .4); }
.escenario.abierto .escenario__ayuda, .escenario.abierto .escenario__t { opacity: 0; }
.escenario.abierto .aro { pointer-events: none; }

.cuarto .desliza-c { color: var(--tinta); z-index: 7; }

/* ---------- Secciones ---------- */
.manual-sec { padding-top: 80px; }
.manual {
  position: relative;
  width: min(100%, 380px);
  padding: 26px 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 4px solid var(--morado);
  box-shadow: 8px 8px 0 var(--amarillo), 0 20px 30px -18px rgba(36, 48, 94, .5);
}
.manual__foto { float: right; width: 110px; aspect-ratio: 9 / 11; margin: -40px -34px 8px 12px; padding: 6px; border-radius: 14px; background: var(--amarillo); border: 4px solid var(--rojo); transform: rotate(5deg); }
.manual__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 8px; }
.manual__t { margin: 0 0 10px; font-weight: 700; font-size: 1.45rem; color: var(--morado); text-align: left; }
.manual__p { margin: 0; font-size: 1.05rem; line-height: 1.65; text-align: left; }

.s-titulo { font-weight: 700; text-shadow: 0 3px 0 var(--amarillo); }
.s-cuenta__caja { border: 0; color: #fff; background: var(--rojo); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 6px 0 var(--rojo-osc); }
.s-cuenta__caja:nth-child(2) { background: var(--amarillo); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .45), 0 6px 0 var(--amarillo-osc); }
.s-cuenta__caja:nth-child(3) { background: var(--verde); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 6px 0 var(--verde-osc); }
.s-cuenta__caja:nth-child(4) { background: var(--morado); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 6px 0 var(--morado-osc); }
.s-cuenta__num { font-weight: 700; color: #fff; }
.s-cuenta__lbl { color: rgba(255, 255, 255, .9); }
.s-cuenta__caja:nth-child(2) .s-cuenta__num, .s-cuenta__caja:nth-child(2) .s-cuenta__lbl { color: var(--tinta); }
.s-cuenta__fin { font-weight: 700; color: var(--rojo); }
.s-evento { border: 4px solid var(--amarillo); }
.s-evento__icono { color: #fff; background: var(--morado); border-color: var(--morado); }
.s-evento__hora { font-weight: 700; color: var(--rojo); }
.s-vestimenta__tipo { font-weight: 700; font-size: 1.45rem; color: var(--verde-osc); }
.s-rsvp__saludo { font-weight: 700; font-size: 1.25rem; color: var(--morado); }
.s-btn { font-weight: 700; letter-spacing: .06em; }
.s-btn--linea, .s-btn--mini { border: 3px solid var(--morado); background: #fff; }
.s-btn--lleno { background: linear-gradient(180deg, #f2545f, var(--rojo)); box-shadow: 0 6px 0 var(--rojo-osc), 0 14px 20px rgba(36, 48, 94, .3); }
.s-btn--lleno:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--rojo-osc); }
.s-foto { border: 4px solid #fff; }
.s-pie__n { font-weight: 700; color: var(--morado); }
.btn-musica { background: var(--amarillo); color: var(--tinta); box-shadow: 0 4px 0 var(--amarillo-osc); }

@media (max-height: 640px) {
  .escenario { top: calc(env(safe-area-inset-top) + 3svh); }
  .estante { width: clamp(200px, 56vw, 250px); }
}
@media (prefers-reduced-motion: reduce) {
  .colgante, .aro span, .empaque__estrella, .empaque__plastico::after, .cofre.temblor { animation: none !important; }
  .escenario { transition-duration: .4s; }
  .cuarto.revelado .personaje { animation-duration: .01s; }
}