/**
 * =============================================================================
 * INDEX/AVISOLEGAL.CSS - Estilos de la Página de Aviso Legal
 * =============================================================================
 * 
 * Este archivo CSS define la apariencia visual de la página de aviso legal.
 * Es utilizado por: index/avisolegal.html
 * 
 * =============================================================================
 * ESTRUCTURA DEL ARCHIVO:
 * =============================================================================
 * 1. IMPORTS           - Importar Font Awesome
 * 2. ANIMACIONES       - Keyframes para animaciones
 * 3. BODY              - Estilos base de la página
 * 4. CONTENEDOR        - Contenedor principal de contenido
 * 5. TÍTULOS          - Estilos para h1, h2
 * 6. TEXTO             - Estilos para párrafos y listas
 * 7. BOTÓN VOLVER      - Estilos del botón de navegación
 * 8. TRADUCTOR         - Estilos del widget de traducción
 * 9. RESPONSIVE        - Ajustes para móviles
 * 10. PREFERENCES      - Soporte para prefers-reduced-motion
 * 
 * =============================================================================
 */

/* =============================================================================
SECCIÓN 1: IMPORTS
================================================================================
Importamos Font Awesome para usar iconos en la página.
*/

/* Importación de Font Awesome 6 desde CDN */
@import url('https://use.fontawesome.com/releases/v6.4.2/css/all.css');

/* =============================================================================
SECCIÓN 2: ANIMACIONES
================================================================================
Definición de keyframes para las animaciones de entrada.
*/

/* Animación de entrada: opacity y translateY (desliza desde abajo) */
@keyframes fadeInUp {
  from {
    opacity: 0; /* Invisible al inicio */
    transform: translateY(30px); /* Desplazado 30px hacia abajo */
  }
  to {
    opacity: 1; /* Visible al final */
    transform: translateY(0); /* En su posición original */
  }
}

/* Animación simple de fade in */
@keyframes fadeIn {
  from {
    opacity: 0; /* Invisible */
  }
  to {
    opacity: 1; /* Visible */
  }
}

/* =============================================================================
SECCIÓN 3: BODY
================================================================================
Estilos base del cuerpo de la página.
*/

/* Reset y estilos base del body */
body {
  /* Gradiente de fondo oscuro (azul verdoso) */
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  
  /* Usar flexbox para centrar contenido */
  display: flex;
  flex-direction: column;
  
  /* Centrar elementos horizontalmente */
  align-items: center;
  
  /* Ocupa toda la altura de la pantalla */
  min-height: 100vh;
  
  /* Eliminar márgenes por defecto */
  margin: 0;
  
  /* Fuente principal del sitio */
  font-family: 'Segoe UI', sans-serif;
  
  /* Color de texto blanco */
  color: white;
  
  /* Espaciado interno */
  padding: 30px;
}

/* =============================================================================
SECCIÓN 4: CONTENEDOR PRINCIPAL
================================================================================
El contenedor que envuelve todo el contenido del aviso legal.
*/

/* Contenedor principal del documento legal */
.legal-container {
  /* Ancho máximo del contenido */
  max-width: 900px;
  
  /* Fondo semitransparente con efecto vidrio */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  
  /* Bordes redondeados */
  border-radius: 20px;
  
  /* Espaciado interno */
  padding: 30px 40px;
  
  /* Sombra suave */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  
  /* Animación de entrada */
  animation: fadeInUp 0.8s ease-out;
}

/* =============================================================================
SECCIÓN 5: TÍTULOS
================================================================================
Estilos para los títulos de la página.
*/

/* Título principal h1 */
h1 {
  /* Centrar el texto */
  text-align: center;
  
  /* Margen inferior */
  margin-bottom: 20px;
  
  /* Tamaño de fuente grande */
  font-size: 2.5rem;
  
  /* Animación con delay */
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

/* Títulos de sección h2 */
h2 {
  /* Margen superior para separarlo del contenido anterior */
  margin-top: 25px;
  
  /* Color verde azulado (color de acento del sitio) */
  color: #57a1a4;
  
  /* Animación con delay mayor */
  animation: fadeInUp 0.6s ease-out 0.3s both;
  
  /* Transición suave del color */
  transition: color 0.3s ease;
}

/* Cambio de color al hover */
h2:hover {
  /* Color más claro al pasar el mouse */
  color: #8fd4d7;
}

/* =============================================================================
SECCIÓN 6: TEXTO
================================================================================
Estilos para párrafos y listas.
*/

/* Estilos para párrafos */
p,
li {
  /* Tamaño de fuente base */
  font-size: 1rem;
  
  /* Altura de línea para mejor lectura */
  line-height: 1.6;
  
  /* Animación con delay */
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

/* Transición suave para párrafos */
p {
  transition: transform 0.3s ease;
}

/* Efecto al hover en párrafos */
p:hover {
  /* Pequeño desplazamiento a la derecha */
  transform: translateX(5px);
}

/* Estilos para listas */
ul {
  /* Espaciado izquierdo para la viñeta */
  padding-left: 20px;
}

/* Transiciones para elementos de lista */
li {
  /* Transiciones suaves */
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

/* Efecto al hover en elementos de lista */
li:hover {
  /* Cambio de color */
  color: #8fd4d7;
  
  /* Desplazamiento a la derecha */
  transform: translateX(5px);
}

/* =============================================================================
SECCIÓN 7: BOTÓN VOLVER
================================================================================
Estilos para el botón de navegación volver.
*/

/* Botón para volver a la página anterior */
.btn-volver {
  /* Margen superior para separarlo */
  margin-top: 30px;
  
  /* Espaciado interno */
  padding: 12px 30px;
  
  /* Fondo blanco */
  background: white;
  
  /* Texto negro */
  color: black;
  
  /* Quitar subrayado */
  text-decoration: none;
  
  /* Bordes completamente redondeados (forma de píldora) */
  border-radius: 30px;
  
  /* Texto en negrita */
  font-weight: bold;
  
  /* Transición suave */
  transition: 0.3s;
  
  /* Ocultar inicialmente para la animación */
  opacity: 0;
  transform: translateY(20px);
  
  /* Animación de entrada con delay */
  animation: fadeInUp 0.5s ease-out 0.5s forwards;
}

/* Efecto hover del botón */
.btn-volver:hover {
  /* Cambio de fondo al verde azulado */
  background: #57a1a4;
  
  /* Texto blanco */
  color: white;
  
  /* Elevar ligeramente */
  transform: translateY(-3px);
  
  /* Sombra suave */
  box-shadow: 0 5px 20px rgba(87, 161, 164, 0.4);
}

/* Focus visible para accesibilidad WCAG */
.btn-volver:focus {
  /* Outline blanco para destacar */
  outline: 3px solid white;
  outline-offset: 3px;
}

/* =============================================================================
SECCIÓN 8: TRADUCTOR (GTRANSLATE)
================================================================================
Estilos para el widget de traducción de Google.
*/

/* Contenedor del selector de idioma */
.idiomas-box {
  /* Posición absoluta respecto al contenedor padre */
  position: absolute;
  
  /* Posicionar en la esquina superior derecha */
  top: 20px;
  right: 20px;
  
  /* Asegurar que esté por encima de otros elementos */
  z-index: 1000;
  
  /* Animación de entrada */
  opacity: 0;
  animation: fadeIn 0.5s ease-out 0.6s forwards;
}

/* Wrapper del traductor - fondo transparente */
.gtranslate_wrapper {
  background: transparent !important; /* Fondo completamente transparente */
  border: none !important; /* Sin borde */
  padding: 0; /* Sin padding */
}

/* Estilos del texto del selector de idioma */
.gt_float_switcher span {
  color: rgb(0, 0, 0) !important; /* Texto negro */
  font-weight: bold; /* Negrita */
  font-size: 0.95rem; /* Tamaño de letra */
  background: transparent !important; /* Fondo transparente */
  transition: color 0.3s ease; /* Transición del color */
}

/* Cambio de color al hover */
.gt_float_switcher:hover span {
  color: #57a1a4 !important;
}

/* Opciones desplegables del traductor */
.gt_float_switcher .gt_options {
  background: transparent !important; /* Fondo transparente */
  border: none !important; /* Sin borde */
}

/* Estilos de las opciones del desplegable */
.gt_float_switcher .gt_options a {
  color: rgb(0, 0, 0) !important; /* Texto negro */
  background: transparent !important; /* Fondo transparente */
  transition: /* Transiciones suaves */
    background 0.3s ease,
    color 0.3s ease;
}

/* Efecto hover en las opciones */
.gt_float_switcher .gt_options a:hover {
  /* Fondo semitransparente del color de acento */
  background: rgba(87, 161, 164, 0.5) !important;
  
  /* Color de texto más claro */
  color: rgb(97, 196, 218) !important;
}

/* =============================================================================
SECCIÓN 9: RESPONSIVE
================================================================================
Ajustes para dispositivos móviles.
*/

/* Media query para pantallas pequeñas (hasta 600px) */
@media (max-width: 600px) {
  /* El traductor se coloca en el flujo normal */
  .idiomas-box {
    position: static;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;
  }
  
  /* Texto del traductor más pequeño */
  .gt_float_switcher span {
    font-size: 0.9rem;
  }

  /* Título más pequeño */
  h1 {
    font-size: 2rem;
  }

  /* Contenedor con menos padding */
  .legal-container {
    padding: 20px;
  }
}

/* =============================================================================
SECCIÓN 10: PREFERENCIAS DE USUARIO
================================================================================
Soporte para usuarios que prefieren reducción de movimiento.
*/

/* Desactivar animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  /* Eliminar animaciones de todos los elementos */
  h1,
  h2,
  p,
  li,
  .btn-volver,
  .legal-container,
  .idiomas-box {
    animation: none; /* Sin animación */
    opacity: 1; /* Totalmente visible */
    transform: none; /* Sin transformación */
  }
  
  /* Eliminar efectos hover de transformación */
  p:hover,
  li:hover {
    transform: none;
  }
  
  /* El botón volver tampoco se eleva */
  .btn-volver:hover {
    transform: none;
  }
}