/**
 * =============================================================================
 * INDEX/CONTACTO.CSS - Estilos de la Página de Contacto
 * =============================================================================
 * 
 * Este archivo CSS define la apariencia visual de la página de contacto.
 * Es utilizado por: index/contacto.html
 * 
 * Esta página muestra iconos de redes sociales para contactar con Batuak.
 * 
 * =============================================================================
 * ESTRUCTURA DEL ARCHIVO:
 * =============================================================================
 * 1. IMPORTS           - Importar Font Awesome
 * 2. ANIMACIONES       - Keyframes para animaciones
 * 3. BODY              - Estilos base de la página
 * 4. SOCIAL CONTAINER  - Contenedor de iconos sociales
 * 5. SOCIAL BUTTONS    - Botones de redes sociales
 * 6. SOCIAL BUTTON HOVER - Efectos al pasar el mouse
 * 7. BOTÓN VOLVER      - Estilos del botón de navegación
 * 8. RESPONSIVE        - Ajustes para móviles
 * 9. PREFERENCES      - Soporte para prefers-reduced-motion
 * 
 * =============================================================================
 */

/* =============================================================================
SECCIÓN 1: IMPORTS
================================================================================
Importamos Font Awesome para los iconos de redes sociales.
*/

/* 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 y efectos.
*/

/* Animación de entrada: desliza desde abajo y aparece */
@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 de pulso con brillo - para focus de botones */
@keyframes pulseGlow {
  0%,
  100% {
    /* Sombra pequeña al inicio y final */
    box-shadow:
      0 0 5px var(--color),
      0 0 10px var(--color);
  }
  50% {
    /* Sombra grande en la mitad de la animación */
    box-shadow:
      0 0 20px var(--color),
      0 0 40px var(--color);
  }
}

/* Animación flotante simple */
@keyframes float {
  0%,
  100% {
    transform: translateY(0); /* Sin movimiento */
  }
  50% {
    transform: translateY(-5px); /* Se eleva 5px */
  }
}

/* =============================================================================
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 horizontal y verticalmente */
  justify-content: center;
  align-items: center;
  
  /* Ocupa toda la altura de la pantalla */
  height: 100vh;
  
  /* Eliminar márgenes por defecto */
  margin: 0;
  
  /* Fuente principal del sitio */
  font-family: 'Segoe UI', sans-serif;
}

/* =============================================================================
SECCIÓN 4: SOCIAL CONTAINER
================================================================================
Contenedor que agrupa todos los iconos de redes sociales.
*/

/* Contenedor de los botones sociales */
.social-container {
  /* Usar flexbox para alinear los botones */
  display: flex;
  
  /* Espacio entre los botones */
  gap: 30px;
  
  /* Animación de entrada */
  animation: fadeInUp 0.8s ease-out;
}

/* =============================================================================
SECCIÓN 5: SOCIAL BUTTONS
================================================================================
Estilos para los botones de redes sociales.
*/

/* Botón individual de red social */
.social-btn {
  /* Posición relativa para posicionar elementos hijos */
  position: relative;
  
  /* Dimensiones del botón circular */
  width: 90px;
  height: 90px;
  
  /* Forma circular perfecta */
  border-radius: 50%;
  
  /* Centrar contenido dentro del botón */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Quitar decoración de enlace */
  text-decoration: none;
  
  /* Tamaño del icono */
  font-size: 2.2rem;
  
  /* Color del icono (se usa variable CSS --color) */
  color: var(--color);
  
  /* Fondo semitransparente */
  background: rgba(255, 255, 255, 0.05);
  
  /* Efecto vidrio esmerilado */
  backdrop-filter: blur(8px);
  
  /* Transición suave para todos los cambios */
  transition: 0.4s;
  
  /* Animación de entrada escalonada */
  opacity: 1; /* Asegurar visibilidad */
  transform: translateY(0);
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Delays escalonados para cada botón (entrada en cascada) */
.social-btn:nth-child(1) {
  animation-delay: 0.1s; /* Primer botón */
}
.social-btn:nth-child(2) {
  animation-delay: 0.2s; /* Segundo botón */
}
.social-btn:nth-child(3) {
  animation-delay: 0.3s; /* Tercer botón */
}
.social-btn:nth-child(4) {
  animation-delay: 0.4s; /* Cuarto botón */
}
.social-btn:nth-child(5) {
  animation-delay: 0.5s; /* Quinto botón */
}

/* =============================================================================
SECCIÓN 6: REFLEJO Y EFECTOS HOVER
================================================================================
Efectos visuales para los botones al pasar el mouse.
*/

/* REFLEJO: Efecto de espejo debajo del botón */
.social-btn::after {
  /* Usar el atributo data-icon para el icono */
  content: attr(data-icon);
  
  /* Fuente de Font Awesome Brands */
  font-family: 'Font Awesome 6 Brands';
  font-weight: 900;
  
  /* Posicionar debajo del botón */
  position: absolute;
  top: 100%;
  
  /* Invertir verticalmente para efecto espejo */
  transform: scaleY(-1) scale(0.5);
  
  /* Reducir tamaño a la mitad */
  font-size: 2.2rem;
  
  /* Color igual al botón */
  color: var(--color);
  
  /* Semi-transparente */
  opacity: 0.25;
  
  /* Ligero desenfoque */
  filter: blur(1px);
  
  /* El ratón no puede hacer clic en el reflejo */
  pointer-events: none;
  
  /* Máscara para que el reflejo se desvanezca */
  mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
  
  /* Transición suave */
  transition: opacity 0.4s;
}

/* EFECTO HOVER: Al pasar el mouse por encima */
.social-btn:hover {
  /* Fondo del color del icono */
  background: var(--color);
  
  /* Icono blanco */
  color: white;
  
  /* Elevar y escalar ligeramente */
  transform: translateY(-5px) scale(1.05);
  
  /* Sombra de color */
  box-shadow:
    0 0 10px var(--color),
    0 0 40px var(--color);
}

/* Ocultar el reflejo al hacer hover */
.social-btn:hover::after {
  opacity: 0;
}

/* FOCUS VISIBLE: Para accesibilidad WCAG */
.social-btn:focus {
  /* Outline blanco para destacar */
  outline: 3px solid white;
  outline-offset: 3px;
  
  /* Animación de pulso */
  animation: pulseGlow 1s ease-in-out;
}

/* =============================================================================
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 de los iconos */
  margin-top: 40px;
  
  /* 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.6s 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 */
.btn-volver:focus {
  outline: 3px solid white;
  outline-offset: 3px;
}

/* =============================================================================
SECCIÓN 8: RESPONSIVE
================================================================================
Ajustes para diferentes tamaños de pantalla.
*/

/* =========================
MÓVILES (hasta 600px)
========================= */

/* Media query para pantallas pequeñas */
@media (max-width: 600px) {
  /* Reducir padding del body */
  body {
    padding: 20px;
  }
  
  /* Los botones se organizan en columna */
  .social-container {
    flex-direction: column;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Botones más pequeños */
  .social-btn {
    width: 70px;
    height: 70px;
    font-size: 1.8rem;
  }
  
  /* Reflejo más pequeño */
  .social-btn::after {
    font-size: 1.8rem;
    transform: scaleY(-1) scale(0.45);
  }
  
  /* Botón ocupar todo el ancho */
  .btn-volver {
    width: 100%;
    text-align: center;
    font-size: 1rem;
  }
}

/* =========================
TABLETS (600px - 1024px)
========================= */

/* Media query para tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Espacio entre botones */
  .social-container {
    gap: 25px;
  }
  
  /* Botones de tamaño medio */
  .social-btn {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }
  
  /* Reflejo de tamaño medio */
  .social-btn::after {
    font-size: 2rem;
  }
}

/* =========================
PC GRANDES (+1024px)
========================= */

/* Media query para pantallas grandes */
@media (min-width: 1025px) {
  /* Botones más grandes */
  .social-btn {
    width: 100px;
    height: 100px;
    font-size: 2.4rem;
  }
  
  /* Reflejo más grande */
  .social-btn::after {
    font-size: 2.4rem;
  }
}

/* =============================================================================
SECCIÓN 9: 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 */
  .social-btn,
  .btn-volver,
  .social-container {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  /* Eliminar animación de focus */
  .social-btn:focus {
    animation: none;
  }
}