/**
 * @file logo-yeyu.css
 * @description Archivo de estilos para el componente web personalizado LogoYeyu.
 *              Proporciona estilos completos para la visualización del logo principal de YEYU,
 *              animaciones de entrada suaves con intersection observer, diseño responsive optimizado,
 *              efectos de transición personalizados, soporte para slots flexibles,
 *              configuración de tipografía escalable, layout centrado y adaptativo,
 *              y optimizaciones específicas para diferentes dispositivos y tamaños de pantalla.
 * @author Enri Rego
 * @version 1.0.0
 * @date 30 de Mayo 2025
 * @since 1.0.0
 * @requires scripts/components/logo-yeyu.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ==========================================================================
   CONFIGURACIÓN BASE DEL COMPONENTE LOGO-YEYU
   ========================================================================== */

/**
 * Elemento principal del componente logo-yeyu
 * Establece el layout base flexbox centrado verticalmente con espaciado optimizado
 * para mostrar el logo completo con imagen, título y subtítulo en disposición columnar
 */

/* Contenedor principal del logo con layout flexbox centrado */
logo-yeyu {
  /* Layout flexbox para organización vertical centrada */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  /* Ocupar ancho completo disponible */
  width: 100%;

  /* Espaciado inferior usando variable del sistema */
  margin-bottom: var(--espacio-grande, 2rem);
}

/* ==========================================================================
   CONTENEDOR Y ELEMENTOS DE LA IMAGEN DEL LOGO
   ========================================================================== */

/**
 * Contenedor específico para la imagen del logo
 * Proporciona dimensiones fijas configurables y efectos de transición suaves
 * para animaciones de entrada con opacity y transform
 */

/* Contenedor de la imagen con dimensiones configurables */
logo-yeyu .logo-contenedor {
  /* Layout centrado para la imagen */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Dimensiones configurables mediante variable CSS */
  width: var(--tamano-logo, 150px);
  height: var(--tamano-logo, 150px);

  /* Espaciado inferior antes del texto */
  margin-bottom: var(--espacio-medio, 1rem);

  /* Transiciones suaves para animaciones de entrada */
  transition: transform 0.5s ease, opacity 0.5s ease;

  /* Estado inicial oculto para animación */
  opacity: 0;
}

/**
 * Imagen del logo con optimizaciones de dimensiones y object-fit
 * Incluye configuraciones específicas para mantener proporciones correctas
 * y compatibilidad cross-browser en el rendering de imágenes
 */

/* Imagen del logo con optimizaciones de renderizado */
logo-yeyu .logo-contenedor img {
  /* Dimensiones relativas al contenedor */
  width: 100%;
  height: 100%;

  /* Mantener proporciones de imagen sin distorsión */
  object-fit: contain;

  /* Límites máximos para evitar desbordamiento */
  max-width: 100%;
  max-height: 100%;
}

/* ==========================================================================
   TEXTO PRINCIPAL DEL LOGO
   ========================================================================== */

/**
 * Elemento de texto principal del logo (título YEYU)
 * Configurado con tipografía prominente, efectos de sombra y transiciones
 * para crear impacto visual y mantener legibilidad en diferentes fondos
 */

/* Texto principal del logo con tipografía prominente */
logo-yeyu .logo-texto {
  /* Tipografía de impacto para el título principal */
  font-size: 3rem;
  font-weight: 600;

  /* Espaciado inferior antes del subtítulo */
  margin-bottom: var(--espacio-chico, 0.5rem);

  /* Transiciones suaves para animaciones */
  transition: transform 0.5s ease, opacity 0.5s ease;

  /* Estado inicial oculto para animación secuencial */
  opacity: 0;

  /* Color distintivo usando variable del sistema */
  color: var(--naranja, #FF6B35);

  /* Sombra sutil para mejorar legibilidad */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   SUBTÍTULO DEL LOGO
   ========================================================================== */

/**
 * Elemento de subtítulo descriptivo del logo
 * Proporciona información adicional con tipografía legible y centrada
 * manteniendo jerarquía visual apropiada respecto al título principal
 */

/* Subtítulo descriptivo con tipografía optimizada */
logo-yeyu .subtitulo {
  /* Tipografía legible para texto descriptivo */
  font-size: var(--texto-grande, 1.2rem);
  line-height: 1.6;

  /* Espaciado inferior para separación de contenido siguiente */
  margin-bottom: var(--espacio-grande, 2rem);

  /* Transiciones para animación secuencial */
  transition: transform 0.5s ease, opacity 0.5s ease;

  /* Alineación centrada para mejor presentación */
  text-align: center;

  /* Estado inicial oculto para animación */
  opacity: 0;

  /* Color usando variables del sistema con fallback */
  color: var(--subtitulo, var(--texto, #444040));
}

/* ==========================================================================
   ANIMACIONES DE ENTRADA DEL COMPONENTE
   ========================================================================== */

/**
 * Clases de animación aplicadas dinámicamente por JavaScript
 * Proporcionan efectos de entrada escalonados para cada elemento del logo
 * creando una secuencia visual atractiva y profesional
 */

/* Animación del contenedor de imagen (primera en aparecer) */
logo-yeyu .logo-contenedor.animar {
  /* Animación inmediata sin delay */
  animation: entradaElementos 1s ease-out forwards;
}

/* Animación del texto principal (segunda en aparecer) */
logo-yeyu .logo-texto.animar {
  /* Animación con delay de 0.3s para efecto escalonado */
  animation: entradaElementos 1s ease-out 0.3s forwards;
}

/* Animación del subtítulo (última en aparecer) */
logo-yeyu .subtitulo.animar {
  /* Animación con delay de 0.6s para completar secuencia */
  animation: entradaElementos 1s ease-out 0.6s forwards;
}

/**
 * Keyframes para animación de entrada de elementos
 * Define el movimiento suave desde arriba con fade-in para crear
 * una experiencia visual elegante y no intrusiva
 */

/* Definición de keyframes para entrada suave de elementos */
@keyframes entradaElementos {
  0% {
    /* Estado inicial: elemento desplazado hacia arriba y transparente */
    transform: translateY(-20px);
    opacity: 0;
  }

  100% {
    /* Estado final: elemento en posición original y completamente visible */
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==========================================================================
   CONFIGURACIÓN RESPONSIVE PARA DISPOSITIVOS MÓVILES
   ========================================================================== */

/**
 * Media query para dispositivos móviles (768px y menores)
 * Ajusta tipografía y espaciado para mantener legibilidad y proporciones
 * apropiadas en pantallas más pequeñas
 */

/* Adaptaciones para dispositivos móviles */
@media (max-width: 768px) {

  /* Reducción del tamaño del texto principal para móviles */
  logo-yeyu .logo-texto {
    /* Tipografía más pequeña pero aún prominente */
    font-size: 2.5rem;
  }

  /* Ajustes del subtítulo para mejor legibilidad en móviles */
  logo-yeyu .subtitulo {
    /* Tamaño de fuente más pequeño para pantallas reducidas */
    font-size: 1rem;

    /* Padding horizontal para evitar texto pegado a bordes */
    padding: 0 1rem;
  }
}