* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ladrillo: #c4502b;
  --cafe: #6b2f12;
  --azul: #233f86;
  --crema: #fbf1dc;
  --transicion: 2.5s ease;
}

html, body { height: 100%; }

body {
  font-family: "Fraunces", Georgia, serif;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0e1f4d;
  transition: background var(--transicion);
}
body.dia { background: #78b8ea; }

/* Relleno difuminado para las franjas cuando la pantalla no es 16:9 */
body::before, body::after {
  content: "";
  position: fixed;
  inset: -40px;
  background: url("assets/fondo-dia.webp") center / cover;
  filter: blur(24px) brightness(.85);
  transition: opacity var(--transicion);
  z-index: -1;
}
body::after { background-image: url("assets/fondo-noche.webp"); opacity: 0; }
body.noche::after { opacity: 1; }

/* Al cargar, el día o la noche aparecen directamente, sin fundido */
body.sin-transicion, body.sin-transicion *, body.sin-transicion::before, body.sin-transicion::after { transition: none !important; }

button { font: inherit; cursor: pointer; border: 0; background: none; }

/* ---------- Escenario (fondo + camino) ---------- */
.escenario {
  position: relative;
  width: min(100vw, 100vh * 1672 / 941);
  aspect-ratio: 1672 / 941;
  container-type: inline-size;
}

.fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--transicion);
}
.fondo-noche { opacity: 0; }
body.noche .fondo-noche { opacity: 1; }

.letrero {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 46%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.35));
  animation: flotar 5s ease-in-out infinite;
}

.btn-dia {
  position: absolute;
  width: 3.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: latido 2.6s ease-in-out infinite;
}
.btn-dia img { width: 100%; filter: drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.45)); }
.btn-dia:hover, .btn-dia:focus-visible {
  animation: none;
  transform: translate(-50%, -50%) scale(1.3);
  transition: transform .2s;
  outline: none;
}
.btn-dia:hover img, .btn-dia:focus-visible img {
  filter: drop-shadow(0 0 1cqw #ffe28a);
}

.btn-villancicos {
  position: absolute;
  right: 1.5%;
  bottom: 3%;
  width: 27%;
  display: flex;
  align-items: center;
  gap: 0;
  transition: transform .2s;
}
.btn-villancicos img { width: 81%; filter: drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.5)); }
.btn-villancicos .play-saltando {
  width: 19%;
  margin-right: -2.5cqw;
  position: relative;
  z-index: 1;
  animation: saltar 1.6s ease-in-out infinite;
}
.btn-villancicos:hover .play-saltando { animation-play-state: paused; }
/* Dos saltitos y una pausa, como una pelota */
@keyframes saltar {
  0%, 40%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(-30%) scale(.95, 1.05); }
  20% { transform: translateY(0) scale(1.08, .92); }
  28% { transform: translateY(-14%); }
  36% { transform: translateY(0) scale(1.04, .96); }
}
.btn-villancicos:hover { transform: scale(1.07) rotate(-2deg); }

@keyframes latido {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes flotar {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -54%); }
}

/* ---------- Logo (color de día, blanco de noche) ---------- */
.logo {
  position: absolute;
  left: 1.8%;
  top: 3%;
  width: 11%;
  pointer-events: none;
}
.logo img { width: 100%; display: block; transition: opacity var(--transicion); }
.logo-dia { filter: drop-shadow(0 0 .6cqw rgba(255,255,255,.9)) drop-shadow(0 0 .2cqw rgba(255,255,255,.9)); }
.logo-noche { position: absolute; inset: 0; opacity: 0; filter: drop-shadow(0 .15cqw .4cqw rgba(0,0,0,.5)); }
body.noche .logo-dia { opacity: 0; }
body.noche .logo-noche { opacity: 1; }

/* ---------- Sol / luna (detrás del letrero) ---------- */
.astro {
  position: absolute;
  width: 9%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 1s linear, top 1s linear;
}

/* ---------- Caravana: camello y Reyes Magos ---------- */
.caminante {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -78%);
  filter: drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.3));
}
.caminante.izquierda { transform: translate(-50%, -78%) scaleX(-1); }
.camello { width: 6.5%; }
.rey { width: 3.3%; }
body.noche .caminante { filter: brightness(.75) drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.3)); }

/* ---------- Botón guía del docente ---------- */
.btn-guia {
  position: absolute;
  left: 1.5%;
  bottom: 3%;
  width: 17%;
  transition: transform .2s;
}
.btn-guia { cursor: pointer; }
.btn-guia img { width: 100%; display: block; filter: drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.5)); }
.btn-guia:hover, .btn-guia:focus-visible { transform: scale(1.07) rotate(2deg); outline: none; }

/* ---------- Pantalla de bienvenida ---------- */
.bienvenida {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(10, 18, 50, .55);
  backdrop-filter: blur(6px);
  transition: opacity .6s ease;
}
.bienvenida[hidden] { display: none; }
.bienvenida.saliendo { opacity: 0; pointer-events: none; }
.bienvenida-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vh;
  animation: entrar .5s cubic-bezier(.2, 1.4, .5, 1);
}
.bienvenida-letrero { width: min(80vw, 700px); filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
.bienvenida-boton {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 34px 12px 14px;
  border-radius: 99px;
  background: var(--crema);
  border: 5px solid var(--ladrillo);
  color: var(--ladrillo);
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  animation: latidoBoton 1.4s ease-in-out infinite;
}
.bienvenida-boton img { width: clamp(48px, 7vw, 80px); }
.bienvenida-boton:hover { animation-play-state: paused; transform: scale(1.06); }
@keyframes latidoBoton { 50% { transform: scale(1.07); } }

/* ---------- Menú de música ---------- */
.musica {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.musica-boton {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--crema);
  border: 4px solid var(--ladrillo);
  color: var(--ladrillo);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  transition: transform .2s;
}
.musica-boton:hover { transform: scale(1.1); }
.musica.sonando .musica-icono { display: inline-block; animation: bailar 1s ease-in-out infinite alternate; }
@keyframes bailar { from { transform: rotate(-12deg) translateY(1px); } to { transform: rotate(12deg) translateY(-2px); } }

.musica-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--crema);
  border: 3px solid #e9b64a;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  animation: desplegar .2s ease;
}
.musica-panel[hidden] { display: none; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } }
.musica-panel button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  color: var(--crema);
  background: var(--ladrillo);
}
.musica-panel .musica-mute { background: none; font-size: 20px; width: 28px; }
.musica-panel input[type="range"] { width: 110px; accent-color: var(--ladrillo); cursor: pointer; }

/* ---------- Modales ---------- */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 15, 40, .6);
  backdrop-filter: blur(3px);
  z-index: 10;
  animation: aparecer .3s ease;
}
.modal[hidden] { display: none; }
@keyframes aparecer { from { opacity: 0; } }

.cerrar {
  position: absolute;
  top: 1.5%;
  right: 2%;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--ladrillo);
  color: var(--crema);
  font-size: clamp(16px, 2.2vh, 26px);
  font-weight: 800;
  line-height: 1;
  border: 3px solid var(--crema);
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  z-index: 2;
}
.cerrar:hover { transform: scale(1.1); }

/* ---------- Pop up del día ---------- */
.popup {
  position: relative;
  height: min(94vh, 94vw * 2268 / 1890);
  aspect-ratio: 1890 / 2268;
  container-type: size;
  animation: entrar .35s cubic-bezier(.2, 1.4, .5, 1);
}
@keyframes entrar { from { transform: scale(.8); opacity: 0; } }

.popup-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 3cqw;
  transition: opacity var(--transicion);
}
.popup-fondo-noche { opacity: 0; }
body.noche .popup-fondo-noche { opacity: 1; }

.popup-cabecera {
  position: absolute;
  top: 1.5%;
  left: 8%;
  right: 8%;
  height: 19.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.popup-cabecera h2 {
  font-size: 10cqw;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.6);
}
.popup-cabecera p {
  margin-top: 1.2cqw;
  max-height: 9.5cqh;
  overflow: hidden;
  font-size: 3.6cqw;
  font-weight: 800;
  line-height: 1.2;
  color: #1b1b1b;
  text-shadow: 0 0 1cqw #fff, 0 0 2cqw #fff;
}
body.noche .popup-cabecera p { color: #fff; text-shadow: 0 .3cqw 1cqw rgba(0,0,0,.9); }

.caja {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 1.8cqw 1.8cqw 1.4cqw;
}
.caja-video { left: 4.4%; top: 23.6%; width: 46.4%; height: 71.6%; padding: 1.6cqw; }
/* Coinciden con el área color crema de cada recuadro de la imagen */
.caja-1 { left: 56%; top: 22.6%; width: 40.6%; height: 21%; }
.caja-2 { left: 56%; top: 47%; width: 40.6%; height: 22.3%; }
.caja-3 { left: 56%; top: 72.5%; width: 40.6%; height: 19%; }

.caja-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 2cqw;
  background: #000;
}

.caja h3 {
  flex: none;
  text-align: center;
  color: var(--azul);
  font-size: 3cqw;
  font-weight: 800;
  margin-bottom: .6cqw;
}
.caja p {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #1f1a14;
  font-size: 2.55cqw;
  font-weight: 600;
  line-height: 1.22;
}

.caja p.desborda {
  display: block;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ladrillo) transparent;
}

/* ---------- Guía del docente ---------- */
.guia {
  position: relative;
  width: min(96vw, 1000px);
  height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
  padding: 1.5vh 2vw 1.5vh;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0, #2d4f9e, #0f2257 70%);
  border: 4px solid #e9b64a;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  animation: entrar .35s cubic-bezier(.2, 1.4, .5, 1);
}
.guia-titulo { height: min(9vh, 80px); flex: none; }
.guia-visor {
  flex: 1;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 4px solid #e9b64a;
  background: #525659;
}
.guia-visor iframe { width: 100%; height: 100%; border: 0; display: block; }
.guia-alterno { flex: none; color: var(--crema); font-size: 14px; font-weight: 600; }

/* ---------- Playlist ---------- */
.playlist {
  position: relative;
  width: min(96vw, 1200px);
  max-height: 96vh;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 1.5vh 2vw;
  align-items: start;
  padding: 2vh 2vw 3vh;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0, #2d4f9e, #0f2257 70%);
  border: 4px solid #e9b64a;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  animation: entrar .35s cubic-bezier(.2, 1.4, .5, 1);
}
.playlist-titulo {
  grid-column: 1 / -1;
  justify-self: center;
  height: min(13vh, 120px);
}
.reproductor {
  align-self: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid #e9b64a;
  background: #000;
}
.reproductor iframe, #ytPlayer { width: 100%; height: 100%; display: block; }

.lista {
  position: relative;
  height: min(76vh, 560px);
  aspect-ratio: 1147 / 1371;
  container-type: inline-size;
  border-radius: 14px;
  overflow: hidden;
}
.lista > img { width: 100%; height: 100%; display: block; }
.lista ol { list-style: none; }
.lista li {
  position: absolute;
  left: 17%;
  width: 74.5%;
  height: 7%;
  /* Primera fila centrada en 20%, separadas 8.17% */
  top: calc(20% + var(--i) * 8.17% - 3.5%);
}
.lista button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2cqw;
  border-radius: 99px;
  color: var(--cafe);
  font-weight: 800;
  font-size: 4.6cqw;
  text-align: left;
  transition: background .2s;
}
.lista button img { height: 82%; transition: transform .2s; }
.lista button span { flex: 1; text-align: center; padding-right: 4cqw; }
.lista button:hover { background: rgba(196, 80, 43, .12); }
.lista button:hover img { transform: scale(1.15); }
.lista li.activa button { background: rgba(233, 182, 74, .45); }
.lista li.activa img { animation: girar 3s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (max-aspect-ratio: 1/1) {
  .playlist { grid-template-columns: 1fr; overflow-y: auto; }
  .lista { height: auto; width: 100%; }
}