/* ============================================
   AUTORAS Y LATINAS — animations.css
   Animaciones, transiciones y pantalla de intro
   ============================================ */

/* ============================================
   PANTALLA DE INTRO (splash screen)
   ============================================ */

.intro {
  position: fixed;
  inset: 0;
  background-color: #e5901d; /* Mismo naranja del video exportado desde Canva */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: all;
}

/* Video de intro exportado desde Canva — centrado sin recorte */
.intro__video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Salida del splash */
.intro.saliendo {
  animation: salidaIntro 500ms var(--ease-entrada) forwards;
  pointer-events: none;
}

@keyframes salidaIntro {
  to {
    opacity: 0;
    transform: scale(1.02);
  }
}

/* ============================================
   ANIMACIONES DE ENTRADA (scroll / page load)
   Elementos con clase .animar entran con fade + slide
   ============================================ */

.animar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-entrada),
              transform 500ms var(--ease-entrada);
}

.animar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: delay entre elementos consecutivos */
.animar:nth-child(1)  { transition-delay: 0ms; }
.animar:nth-child(2)  { transition-delay: 80ms; }
.animar:nth-child(3)  { transition-delay: 160ms; }
.animar:nth-child(4)  { transition-delay: 240ms; }
.animar:nth-child(5)  { transition-delay: 320ms; }
.animar:nth-child(6)  { transition-delay: 400ms; }
.animar:nth-child(7)  { transition-delay: 480ms; }
.animar:nth-child(8)  { transition-delay: 560ms; }
.animar:nth-child(9)  { transition-delay: 640ms; }
.animar:nth-child(10) { transition-delay: 720ms; }
.animar:nth-child(11) { transition-delay: 800ms; }
.animar:nth-child(12) { transition-delay: 880ms; }

/* Variante sin stagger (para elementos solos) */
.animar-solo {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-entrada),
              transform 500ms var(--ease-entrada);
}

.animar-solo.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   TRANSICIONES DEL CUESTIONARIO
   ============================================ */

/* Paso del cuestionario: fade out → fade in */
.cuestionario__paso-contenido {
  transition: opacity 200ms ease, transform 200ms ease;
}

.cuestionario__paso-contenido.saliendo {
  opacity: 0;
  transform: translateY(-8px);
}

.cuestionario__paso-contenido.entrando {
  animation: entradaPaso 300ms var(--ease-entrada) forwards;
}

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

/* Escala en la opción seleccionada */
.opcion.seleccionada {
  animation: seleccionOpcion 150ms var(--ease-entrada) forwards;
}

@keyframes seleccionOpcion {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.025); }
  100% { transform: scale(1.02); }
}

/* ============================================
   ELEMENTO DECORATIVO DE CELEBRACIÓN
   (aparece junto al resultado del cuestionario)
   ============================================ */

.resultado-celebracion {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, var(--color-amarillo) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: celebracion 600ms var(--ease-entrada) 100ms forwards;
  pointer-events: none;
}

@keyframes celebracion {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 0.6; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ============================================
   ACCESIBILIDAD — prefers-reduced-motion
   Respeta la preferencia del sistema operativo
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .intro {
    display: none;
  }

  .animar,
  .animar-solo {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   HEADER FUCSIA CON LOGO CENTRADO
   ============================================ */

.header--fucsia {
  background-color: var(--color-fucsia);
}

.header__inner--centrado {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0 16px;
}

.header__logo-img {
  display: block;
  text-decoration: none;
}

.header__logo-imagen {
  height: 80px;
  width: auto;
  display: block;
}

.header__nav--centrado {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.header__nav--centrado a {
  color: #ffffff;
  font-family: var(--fuente-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 200ms ease;
}

.header__nav--centrado a:hover {
  opacity: 0.75;
}

/* Ocultar hamburguesa en desktop cuando el nav está centrado */
@media (min-width: 768px) {
  .header--fucsia .header__hamburger {
    display: none;
  }
}

/* Mobile: mostrar hamburguesa, ocultar nav centrado */
@media (max-width: 767px) {
  .header__nav--centrado {
    display: none;
  }

  .header__inner--centrado {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
  }

  .header__logo-imagen {
    height: 48px;
  }

  /* Hamburguesa en blanco sobre fucsia */
  .header--fucsia .header__hamburger span {
    background-color: #ffffff;
  }

  /* Menú mobile sobre fucsia */
  .header--fucsia .header__menu-mobile a {
    color: #ffffff;
  }
}

/* ============================================
   HERO HOME — sin sidebar
   ============================================ */

.hero--home {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 0 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.hero__descripcion {
  font-family: var(--fuente-body);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--color-texto);
  max-width: 60ch;
}

/* ============================================
   PÁGINA CUESTIONARIO
   ============================================ */

.cuestionario-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 0 64px;
}

.cuestionario-page__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--color-texto);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 8px;
}

.cuestionario-page__bajada {
  font-family: var(--fuente-body);
  font-size: 17px;
  color: var(--color-texto-sec);
  margin-bottom: 40px;
}