/* Colores personalizados de la paleta AMCI */
:root {
  --amci-purple: #6A3C9A; /* Un púrpura oscuro similar al de la imagen */
  --amci-red: #CC3366;    /* El rojo del botón "REGRESA AMCI" de la imagen original */
  --text-dark: #1f2937;  /* Un gris oscuro para el texto principal, similar a Tailwind gray-800 */
}

/* Clase para inactivar una opción: 50% opacidad y sin interacción */
.disabled-option {
  opacity: 0.5;
  pointer-events: none;
}

/* Animación para indicar la selección de un botón */
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: 1; }
}
.selected-option {
  animation: pop 0.3s ease-out;
}

/* Animación fade-in para secciones emergentes y entrada inicial */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1.5s ease-out forwards;
}

/* Estilos para el cuadro de detalles (modal) */
.cuadro-detalles {
  position: fixed; /* Mantenemos fixed para que el modal flote sobre todo */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white; /* Fondo blanco */
  padding: 20px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 80%; /* Ancho fijo para el modal */
  max-width: 600px; /* Ancho máximo */
  text-align: center;
  z-index: 1001; /* Mayor z-index que el overlay */
  border-radius: 10px;
  color: var(--text-dark); /* Texto oscuro */
  max-height: 90vh; /* Permite que el modal sea scrollable si su contenido es muy largo */
  overflow-y: auto; /* Agrega scroll al modal si el contenido excede max-height */
}

.cuadro-detalles img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 20px;
  border-radius: 8px;
}

/* Overlay para oscurecer el fondo cuando el modal está activo */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente oscuro */
  z-index: 1000; /* Debe estar por debajo del modal pero por encima del resto del contenido */
}

/* Nuevo estilo para el cursor parpadeante del efecto Typewriter */
.blinking-cursor {
  font-weight: 100;
  color: var(--amci-purple); /* Color púrpura del cursor */
  animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

/* Se asegura que el texto se envuelva y no desborde horizontalmente */
.cuadro-detalles h2,
.cuadro-detalles p {
  word-wrap: break-word;
  white-space: normal;
}

/* Estilos para el botón principal (Empezar, Cine, Actuación, Ver más) */
.button-primary {
  background-color: var(--amci-purple); /* Fondo púrpura */
  color: #ffffff; /* Texto blanco */
  font-weight: bold;
}

.button-primary:hover {
  background-color: color-mix(in srgb, var(--amci-purple) 90%, black); /* Un púrpura ligeramente más oscuro al pasar el ratón */
}

/* Estilos para el botón rojo (si se desea en algún lugar, aunque no se usa en esta V28) */
.button-red {
  background-color: var(--amci-red); /* Fondo rojo */
  color: #ffffff; /* Texto blanco */
  font-weight: bold;
}

.button-red:hover {
  background-color: color-mix(in srgb, var(--amci-red) 90%, black); /* Un rojo ligeramente más oscuro al pasar el ratón */
}

/* Ajustes para los enlaces dentro de los resultados de Cine/Actuación */
#cineResult a, #actuacionResult a {
  color: var(--text-dark); /* Texto oscuro para los enlaces */
  text-decoration: underline; /* Opcional: para que se vean como enlaces */
}

#cineResult a:hover, #actuacionResult a:hover {
  color: var(--amci-purple); /* Cambio de color al pasar el ratón */
}

/* Media query para estilos móviles (hasta 767px de ancho) */
@media (max-width: 767px) {
  .min-h-screen-half {
    min-height: 75vh; /* Hero ocupa 75% de la altura del viewport en móvil */
  }
  /* Importante: quitamos overflow-hidden del body en móvil para que interactiveContent pueda scrollear */
  body {
    overflow-y: auto !important; /* Permite scroll vertical en el body para móvil */
  }
  /* Aseguramos que interactiveContent ocupe el resto del espacio */
  #interactiveContent {
    min-height: 25vh; /* 100vh - 75vh del hero */
  }
}