/* ================== CORRECCIONES DEL MENÚ DE NAVEGACIÓN ================== */
/* Archivo: menu-fix.css */
/* Propósito: Arreglar visibilidad de RRSS, fondo del menú móvil y consistencia en todas las páginas */

/* ===== MENÚ CONSISTENTE EN TODAS LAS PÁGINAS ===== */

/* Asegurar que el menú SIEMPRE funcione igual, con o sin clase .over-hero */
.top-nav {
  background: var(--nav-purple); /* Fondo semitransparente estándar */
  z-index: 2000;                 /* Z-index alto para estar sobre TODOS los elementos incluyendo hero fijo */
}

/* Asegurar que los dropdowns SIEMPRE funcionen y aparezcan sobre el hero */
.dropdown {
  z-index: 2100;                 /* Mayor que top-nav para aparecer sobre hero fijo */
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;                /* Muestra dropdown al hover/focus */
  opacity: 1;                    /* Visible */
  pointer-events: auto;          /* Clicable */
}

/* ===== OPTIMIZACIÓN DE ESPACIO EN DESKTOP PARA RRSS ===== */

/* Reducir padding lateral del contenedor de navegación en desktop */
.nav-container.container {
  padding: 0 8px;                /* Reducido de 16px a 8px para liberar espacio horizontal */
}

/* Ajustar gap entre elementos del menú para optimizar espacio */
.nav-menu {
  gap: 10px;                     /* Reducido de 14px a 10px para comprimir menú sin perder legibilidad */
}

/* ===== MEJORAS DE REDES SOCIALES (RRSS) ===== */

/* Contenedor de redes sociales - siempre visible */
.nav-social {
  display: flex;                 /* Layout flexbox horizontal para alinear iconos */
  align-items: center;           /* Centra verticalmente los iconos dentro del contenedor */
  gap: 12px;                     /* Separación entre cada icono de red social (antes era 10px) */
  margin-left: 8px;              /* Espacio reducido respecto al último elemento del menú (optimizado para desktop) */
  white-space: nowrap;           /* Evita que los iconos se partan en múltiples líneas */
}

/* Estilo individual de cada botón/enlace de red social */
.nav-social a {
  width: 38px;                   /* Ancho fijo del botón circular (aumentado de 36px) */
  height: 38px;                  /* Alto fijo del botón circular (aumentado de 36px) */
  display: inline-flex;          /* Layout flexbox para centrar perfectamente el icono */
  align-items: center;           /* Centra verticalmente el icono Font Awesome */
  justify-content: center;       /* Centra horizontalmente el icono Font Awesome */
  border-radius: 50%;            /* Forma circular perfecta (50% del ancho/alto) */
  border: 1.5px solid rgba(255,255,255,.5); /* Borde blanco más visible (antes 1px con .35 opacidad) */
  color: #fff;                   /* Color blanco para los iconos */
  text-decoration: none;         /* Elimina el subrayado del enlace */
  transition: all .2s ease;      /* Transición suave para todos los cambios (hover, etc.) */
  background: rgba(0, 0, 0, 0.25); /* Fondo negro semi-transparente para mejorar contraste */
}

/* Estado hover (cuando el mouse pasa por encima) de los iconos sociales */
.nav-social a:hover {
  background: rgba(0, 194, 199, 0.2); /* Fondo teal sutil (color de marca) al hacer hover */
  border-color: rgba(0, 194, 199, 0.8); /* Borde teal más visible en hover */
  transform: translateY(-2px) scale(1.05); /* Elevación y ligero aumento de tamaño para feedback visual */
  box-shadow: 0 4px 12px rgba(0, 194, 199, 0.3); /* Sombra teal para efecto de elevación */
}

/* Tamaño del icono Font Awesome dentro del botón */
.nav-social i {
  font-size: 1.1rem;             /* Tamaño del icono aumentado (antes 1rem) para mejor visibilidad */
  line-height: 1;                /* Altura de línea compacta para centrado perfecto */
}

/* ===== RESPONSIVE: ADAPTACIONES PARA MÓVIL ===== */

/* Media query para tablets y móviles (pantallas menores a 900px) */
@media (max-width: 900px) {
  
  /* MENÚ MÓVIL: Fondo sólido para evitar confusión con contenido de fondo */
  .nav-menu {
    display: none;               /* Oculto por defecto hasta que se active el botón hamburguesa */
    flex-direction: column;      /* Cambia de layout horizontal a vertical en móvil */
    align-items: stretch;        /* Los elementos del menú ocupan todo el ancho disponible */
    gap: 8px;                    /* Espacio reducido entre elementos del menú en móvil */
    position: fixed;             /* Posición fija en la pantalla para overlay completo */
    top: var(--nav-h);           /* Se posiciona justo debajo de la barra superior (52px) */
    left: 0;                     /* Alineado al borde izquierdo de la pantalla */
    right: 0;                    /* Alineado al borde derecho (ancho completo) */
    background: rgba(11, 14, 19, 0.98); /* Fondo sólido grafito casi opaco (color de marca #0B0E13) */
    backdrop-filter: blur(12px); /* Efecto blur profesional para separación visual del contenido */
    -webkit-backdrop-filter: blur(12px); /* Soporte para Safari del efecto blur */
    border-bottom: 2px solid rgba(0, 194, 199, 0.4); /* Línea inferior con color teal de marca */
    padding: 16px 20px 20px;     /* Relleno interno: superior, horizontal, inferior */
    z-index: 999;                /* Índice Z muy alto para aparecer sobre todo el contenido */
    white-space: normal;         /* Permite que el texto se parta en varias líneas si es necesario */
    max-height: calc(100vh - var(--nav-h)); /* Altura máxima: pantalla completa menos barra superior */
    overflow-y: auto;            /* Scroll vertical automático si hay muchos elementos */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Sombra profunda para efecto de elevación */
  }

  /* REDES SOCIALES EN MÓVIL: Mantenerlas visibles dentro del menú */
  .nav-social {
    display: flex;               /* Mantiene visible (sobrescribe el display:none del CSS original) */
    justify-content: center;     /* Centra los iconos horizontalmente en móvil */
    margin: 16px 0 8px;          /* Margen: superior (separación del menú), horizontal (0), inferior */
    padding-top: 16px;           /* Espacio superior adicional para separación visual */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea superior sutil para separar del menú */
    gap: 16px;                   /* Mayor separación entre iconos en móvil (antes 12px) */
  }

  /* Botones de RRSS en móvil: Ligeramente más grandes para facilitar el toque */
  .nav-social a {
    width: 42px;                 /* Ancho aumentado para mejor área de toque en móvil */
    height: 42px;                /* Alto aumentado para mejor área de toque en móvil */
    background: rgba(0, 0, 0, 0.4); /* Fondo más oscuro en móvil para mejor contraste */
    border-color: rgba(255, 255, 255, 0.6); /* Borde más visible en móvil */
  }

  /* Hover/Active en móvil: Efecto táctil */
  .nav-social a:active {
    background: rgba(0, 194, 199, 0.3); /* Fondo teal al tocar en dispositivos táctiles */
    transform: scale(0.95);      /* Ligera reducción de tamaño para feedback táctil */
  }
}

/* ===== MEJORA ADICIONAL: Iconos específicos de Font Awesome ===== */

/* Asegura que el icono de Facebook sea visible con buen contraste */
.nav-social a .fa-facebook,
.nav-social a .fa-facebook-f {
  font-weight: 600;              /* Peso de fuente más grueso para mejor visibilidad */
}

/* ===== ACCESIBILIDAD: Focus visible para navegación por teclado ===== */

/* Estado focus (cuando se navega con teclado) de los botones de RRSS */
.nav-social a:focus {
  outline: 2px solid rgba(0, 194, 199, 0.8); /* Borde teal visible al navegar con TAB */
  outline-offset: 3px;           /* Separación del outline respecto al botón */
  background: rgba(0, 194, 199, 0.15); /* Fondo teal sutil en estado focus */
}