/* =========================================
   MI CUENTO — Estilos para niños 3-4 años
   Control de elementos sueltos plastilina 
   ========================================= */

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

body {
  font-family: 'Georgia', serif;
  background: #e4d9d1;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   PANTALLA DE INICIO (CENTRADO PERFECTO)
   ========================================= */
#pantalla-inicio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  animation: fadeIn 1s ease;
  width: 100vw;
  height: 100vh;
}

#img-portada {
  max-width: 380px;
  width: 88vw;
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}

#btn-comenzar {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#btn-comenzar img {
  width: 220px;
  transition: transform 0.2s;
}

#btn-comenzar:hover img,
#btn-comenzar:active img {
  transform: scale(1.07);
}

/* =========================================
   VISOR PRINCIPAL
   ========================================= */
#visor {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  max-width: 700px;
  position: relative;
}

/* =========================================
   BARRA SUPERIOR DE PROGRESO
   ========================================= */
#barra-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.btn-inicio {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.btn-inicio img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

#barra-progreso {
  flex: 1;
  height: 8px;
  background: rgba(128,128,128,0.12);
  border-radius: 10px;
  overflow: hidden;
}

#progreso-fill {
  height: 100%;
  background: #f4c430;
  border-radius: 10px;
  transition: width 0.5s ease;
  width: 0%;
}

#contador-pagina {
  font-size: 0.78rem;
  color: rgba(48,48,48,0.4);
  min-width: 40px;
  text-align: right;
}

/* =========================================
   ÁREA DE ILUSTRACIÓN (REESTRUCTURADO)
   ========================================= */
#contenido-pagina {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 2px;
  overflow: hidden;
  position: relative; /* Contenedor base */
  max-height: 90vh;
  width: 100%;
}

#imagen-pagina {
  max-width: 90%;
  max-height: 90%;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  object-fit: contain;
  animation: slideIn 0.4s ease;
  
  /* IMPORTANTE: Esto asegura que el fondo sea la guía de tamaño */
  position: relative; 
  z-index: 1; 
}

/* =========================================
   LOS ELEMENTOS INTERACTIVOS (ENCIMA DEL FONDO)
   ========================================= */
#objeto1-interactivo, 
#objeto2-interactivo,
#objeto3-interactivo {
  position: absolute; /* Esto hace que floten y no empujen la imagen de fondo */
  width: 300px;       /* Reduje un poco el tamaño predeterminado (de 300px) para que no se corten en pantallas pequeñas */
  height: auto;
  pointer-events: none;
  
  /* IMPORTANTE: z-index mayor que 1 para que queden obligatoriamente encima de la escena */
  z-index: 10; 
  

  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Postura 1: Flotando normal */
.postura-flotar {
  animation: flota 3s ease-in-out infinite;
}
@keyframes flota {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* Postura 2: Mareado */
.postura-mareado {
  animation: mareado 0.5s ease-in-out infinite;
}
@keyframes mareado {
  0%, 100% { transform: scale(1) rotate(-4deg); }
  50% { transform: scale(1.03) rotate(4deg); }
}

/* Postura 3: Asustado */
.postura-asustado {
  animation: asustado 0.15s ease-in-out infinite;
}
@keyframes asustado {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Postura 4: Elástico / Gomoso */
.postura-elastico {
  animation: elastica 1.2s ease-in-out infinite;
}

@keyframes elastica {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.2, 0.75); } /* Se aplasta */
  60% { transform: scale(0.85, 1.25); } /* El rebote hacia arriba */
  80% { transform: scale(1.05, 0.95); } /* Estabilizándose */
}

/* Postura 5: Giro rodante */
.postura-rodar {
  animation: rueda 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes rueda {
  0% { transform: rotate(0deg); }
  80%, 100% { transform: rotate(360deg); } /* Gira y se detiene un momento */
}

/* Postura 6: Péndulo */
.postura-pendulo {
  animation: pendulo 2.5s ease-in-out infinite;
  transform-origin: top center; /* El balanceo se origina desde arriba */
}

@keyframes pendulo {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}

/* Postura 7: Latido / Respiración */
.postura-latido {
  animation: latido 1.5s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.12); filter: brightness(1.05); } /* Crece y brilla un poquito */
}

/* Postura 8: Resbalón pesado */
.postura-caida {
  animation: caida 1.8s ease-in-out infinite;
}

@keyframes caida {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(25px) scale(1.05, 0.9); } /* Se cae y se aplasta al llegar abajo */
  50% { transform: translateY(25px) scale(1.05, 0.9); } /* Pausa dramática abajo */
  75% { transform: translateY(-5px) scale(0.95, 1.05); } /* Sube rápido pasando su posición */
}

/* Postura 9: Brincar con desplazamiento */

.postura-brinco {
  animation: brinco 1.8s ease-in-out infinite; 
}

@keyframes brinco {
  0% { transform: translateX(0) translateY(0) scale(1); filter: brightness(1); }
  20%  { transform: translateX(3px) translateY(0) scale(1.15, 0.85); }
  50%  { transform: translateX(80px) translateY(-80px) scale(0.9, 1); filter: brightness(1.05); } 
  80%  { transform: translateX(75px) translateY(0) scale(1, 0.85); }
  100% { transform: translateX(20px) translateY(0) scale(1); filter: brightness(1); }
}

/* Postura 10: Rodar en zig-zag */

.rodar-zigzag { animation: rodarZigZag 3s ease-in-out infinite alternate; display: inline-block;  }

@keyframes rodarZigZag {  
  0% { transform: translateX(0) translateY(0) rotate(0deg); }

  /* Primer pico del zig-zag: avanza y sube */
  25% { transform: translateX(75px) translateY(-30px) rotate(180deg); }

  /* Segundo pico: avanza y baja de la línea central */
  50% { transform: translateX(100px) translateY(30px) rotate(360deg); }

  /* Tercer pico: avanza y vuelve a subir */
  75% { transform: translateX(125px) translateY(-30px) rotate(540deg); }

  /* Final del camino: llega a la derecha y se alinea al centro */
  100% { transform: translateX(200px) translateY(0) rotate(720deg); }
}

/* Postura 11: Desplazamiento de lado a lado INFINITO */
.postura-desplazar { 
 animation: desplazarLineaRecta 2s ease-in-out infinite alternate;
}

@keyframes desplazarLineaRecta {
  /* Inicio: Lado izquierdo (1) */
  0% { transform: translateX(0); }

  /* Final: Lado derecho (2)  LONGITUD*/
  100% { transform: translateX(200px); }
}

/* Postura 12: UN SOLO DESPLAZAMIENTO DERECHA A IZQUIERDA*/
.desplazar { animation: caminar 3s ease-out forwards; }

@keyframes caminar {
  /* Inicio posición inicial */
  0% { transform: translateX(0); }

  /* Final: ajuste de la longitud */
  100% { transform: translateX(-110px); }
}



/* =========================================
   ZONA DEL CONTROL DE PLASTILINA
   ========================================= */
#zona-control {
  padding: 0px 8px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#control-plastilina {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fondo-control {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 14px;
  pointer-events: none;
  user-select: none;
}

.btn-plastilina {
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 12px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-plastilina img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.btn-plastilina:active {
  transform: scale(0.88);
}

.btn-plastilina:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* =========================================
   UTILIDADES
   ========================================= */
.oculto {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   RESPONSIVE — MÓVIL (TUS BOTONES PERFECTOS)
   ========================================= */
@media (max-width: 480px) {
  #control-plastilina {
    height: 78px;
    max-width: 360px;
  }
  .btn-plastilina {
    width: 60px;
    height: 60px;
    margin: 0 8px;
  }
  #imagen-pagina {
    border-radius: 12px;
  }
}

@media (max-width: 360px) {
  #control-plastilina {
    height: 68px;
  }
  .btn-plastilina {
    width: 52px;
    height: 52px;
    margin: 0 6px;
  }
}

/* ANIMACIÓN DEL BOTÓN PLAY BAILANDO */
.play-bailando {
  animation: brincoPlay 0.6s ease-in-out infinite alternate;
}

@keyframes brincoPlay {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.08) translateY(-8px); /* Da un pequeño brinco flotante */
  }
}