/* ===================== ESTILOS ESPECÍFICOS VIEW-FRASE ===================== */
/* Nota: Estilos base (fonts, reset, body, animaciones comunes) están en yonunca_base.css */

/* ===================== LOGO CONTAINER ESPECÍFICO FRASE ===================== */
/* Logo container único para frase - sin herencia */
/* IMPORTANTE: La visibilidad se controla completamente desde spa_transitions.css */
/* No establecer opacity/visibility aquí para evitar conflictos - spa_transitions.css lo maneja cuando .spa-view.active */
.logo-container_frase {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
  /* Sin opacity/visibility - spa_transitions.css lo maneja con #view-frase.spa-view.active */
  /* La animación moveUpDown se controla desde spa_transitions.css */
}

/* Logo único para frase - sin herencia */
#view-frase .logo_frase,
.logo_frase {
  display: block;
  width: 50vw;
  height: auto;
  margin-top: 15vh;
  margin-bottom: 4vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
  font-size: 8vw;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  /* Sin opacity/visibility - spa_transitions.css lo maneja */
  /* La animación se aplica al logo-container, no al logo */
  will-change: transform;
}

/* ===================== FRASE ESPECÍFICA ===================== */
/* IMPORTANTE: La visibilidad se controla desde spa_transitions.css cuando la vista está activa */
#view-frase .phrase {
  display: block;
  position: relative;
  z-index: 2;
  margin-bottom: 20vh;
  /* Espacio adicional para que el Lottie no se superponga */
  /* Sin opacity/visibility - spa_transitions.css lo maneja */
}

#view-frase .phrase p {
  display: block;
  font-size: 4vw;
  font-weight: bold;
  color: white;
  margin-bottom: 20vh;
  /* Espacio adicional para el Lottie fijo */
  margin-top: 10vh;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  letter-spacing: 0.3vw;
  text-shadow: 0.1vw 0.1vw 0.2vw rgb(244, 29, 29), -0.1vw -0.1vw 0.2vw rgb(0, 255, 255);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
  position: relative;
  z-index: 2;
  /* Por encima del Lottie */
  /* Sin opacity/visibility - spa_transitions.css lo maneja */
}

/* ===================== LOTTIE CONTAINER ESPECÍFICO FRASE ===================== */
#view-frase #lottie-container {
  width: 75vw !important;
  height: 6vh !important;
  background: transparent !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 30px !important;
  border: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 8vh !important;
  z-index: 10 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* El contenido SVG del Lottie */
#view-frase #lottie-container>* {
  position: relative;
  z-index: 1;
}

/* Desactivar interacciones en SVG del Lottie */
#view-frase #lottie-container svg {
  pointer-events: none !important;
  user-select: none !important;
  touch-action: none !important;
  transform: none !important;
}

/* Desactivar cualquier efecto hover en el contenedor */
#view-frase #lottie-container:hover {
  transform: translateX(-50%) !important;
  scale: 1 !important;
}

/* Desactivar interacciones en todos los elementos hijo del Lottie */
#view-frase #lottie-container * {
  pointer-events: none !important;
  user-select: none !important;
  touch-action: none !important;
}


/* ===================== BOTÓN PLAY/PAUSE ===================== */
#view-frase .play-pause-btn {
  background: linear-gradient(90deg, #2563eb 60%, #38bdf8 100%);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.10);
  transition: background 0.2s, transform 0.1s;
  position: absolute;
  left: calc(100% + 0.8rem);
  /* a la derecha del lottie */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: auto !important;
  /* reactivar eventos solo para el botón */
}

#view-frase .play-pause-btn:hover {
  transform: translateY(-50%) scale(1.04);
}

#view-frase .play-pause-icon {
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
}

/* ===================== TÍTULO Y OTROS ===================== */
#view-frase .title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 40px;
}

#view-frase .icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

#view-frase .icon img {
  width: 5vw;
  height: auto;
}

html[lang="en"] .logo_frase {
  width: 30vw;
}