/* █▄░█ ▄▀█ █░█ █▄▄ ▄▀█ █▀█ ░ █▀▀ █▀ █▀ */
/* █░▀█ █▀█ ▀▄▀ █▄█ █▀█ █▀▄ ▄ █▄▄ ▄█ ▄█ */

/* Botones sin bordes ni fondo, heredan estilos del texto */
button {
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Estilos para la barra de navegación */
.navbar {
  position: static; /* Barra fija */
  z-index: 1; /* Capa sobre otros elementos */
  top: 0;
  left: 0;
  display: flex;
  align-items: center; /* Centra elementos verticalmente */
  justify-content: center; /* Centra horizontalmente */
  width: 100%;
  height: 90px;
  background: #19191c; /* Fondo oscuro */
  color: #f9f9f9; /* Texto claro */
}

/* Estilos para pantallas grandes */
@media only screen and (min-width: 645px) {
  .navbar {
    justify-content: space-between; /* Espaciado entre elementos */
    padding: 0 16px; /* Margen lateral */
  }
}

/* Overlay del menú */
.navbar-overlay {
  position: fixed; /* Cubre toda la pantalla */
  z-index: 2; /* Sobre la barra */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  visibility: hidden; /* Oculto por defecto */
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave */
}

/* Muestra el overlay cuando el body tiene la clase "open" */
body.open .navbar-overlay {
  visibility: visible;
  opacity: 1;
}

/* Oculta el overlay en pantallas grandes */
@media only screen and (min-width: 645px) {
  .navbar-overlay {
    display: none;
  }
}

/* Menú hamburguesa */
.navbar-burger {
  position: absolute; /* En la esquina superior izquierda */
  top: 0;
  left: 0;
  display: grid; /* Centra el ícono */
  place-items: center;
  width: 64px;
  height: 90px;
  padding: 0;
}

/* Oculta el menú hamburguesa en pantallas grandes */
@media only screen and (min-width: 645px) {
  .navbar-burger {
    display: none;
  }
}

/* Estilo del título de la navbar */
.navbar-title {
  display: flex; /* Contenedor flexible */
  align-items: center;
  margin: 0;
}

/* Logo de la barra */
.navbar-logo {
  width: 100px; /* Tamaño del logo */
  height: auto;
  margin-left: 20px; /* Separación */
}

/* Estilo del menú */
.navbar-menu {
  position: fixed;
  z-index: 1050; /* Asegura que esté por encima de .carousel-caption */
  top: 0;
  left: 0;
  transform: translateX(-100%); /* Fuera de la vista por defecto */
  width: 270px;
  height: 100%;
  padding: 20px;
  display: flex;
  gap: 8px; /* Espaciado entre enlaces */
  flex-direction: column; /* Vertical */
  align-items: flex-start;
  background: #000000; /* Fondo negro */
  visibility: hidden; /* Oculto por defecto */
  transition: transform 0.3s ease, visibility 0.3s ease; /* Transición suave */
}

/* Muestra el menú cuando el body tiene la clase "open" */
body.open .navbar-menu {
  transform: translateX(0); /* Mueve el menú a la posición visible */
  visibility: visible;
}

/* Ajustes del menú en pantallas grandes */
@media only screen and (min-width: 645px) {
  .navbar-menu {
    position: static; /* No fijo */
    transform: translateX(0); /* Siempre visible */
    width: auto;
    background: transparent; /* Sin fondo */
    flex-direction: row; /* Horizontal */
    visibility: visible;
    z-index: 1; /* Asegura que no interfiera en pantallas grandes */
  }
}

/* Estilo de enlaces del menú */
.navbar-menu > a {
  display: flex; /* Contenedor flexible */
  align-items: center; /* Centra contenido */
  gap: 5px; /* Espacio entre ícono y texto */
  color: rgba(255, 255, 255, 0.5); /* Color blanco translúcido */
  background: transparent;
  padding: 0 8px;
  font-size: 18px; /* Tamaño de fuente */
  line-height: 50px; /* Altura de línea */
  text-decoration: none; /* Sin subrayado */
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease; /* Cambio suave de color */
}

/* Enlace activo con color heredado */
.navbar-menu > a.active {
  color: inherit;
}

/* Efecto hover de subrayado animado */
.navbar-menu > a:before {
  content: "";
  position: absolute;
  inset: calc(100% - 4px) 0 0 0; /* Subrayado animado */
  background: #ce4f20; /* Color de subrayado */
  transform: scaleX(0); /* Escala inicial */
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* Cambios de color y subrayado al hacer hover */
.navbar-menu > a:hover {
  color: #fff;
}

.navbar-menu > a:hover:before {
  transform: scaleX(1); /* Expande el subrayado */
}

/* Transición de subrayado al pasar entre enlaces */
.navbar-menu > a:has(~ a:hover):before {
  transform: translateX(100%) scaleX(0); /* Movimiento de subrayado */
  transition: transform 0.2s ease, scaleX 0s 0.3s;
}

.navbar-menu > a:hover ~ a:before {
  transform: translateX(-100%) scaleX(0);
  transition: transform 0.2s ease, scaleX 0s 0.3s;
}

/* Estilos de íconos en los enlaces */
.navbar-icon {
  width: 20px; /* Tamaño del ícono */
  height: auto;
  transition: filter 0.3s ease; /* Transición de filtro */
}

/* Cambios en íconos al hacer hover o en enlaces activos */
.navbar-menu > a:hover .navbar-icon,
.navbar-menu > a.active .navbar-icon {
  filter: brightness(0) invert(1); /* Ícono blanco */
}