/* ============================================================
   16. NAVBAR  — agregar al final de global.css
   ============================================================ */

/* ── Wrapper del header ── */
.site-header {
  position:         sticky;
  top:              0;
  z-index:          900;
  background-color: var(--color-blanco);
  border-bottom:    2px solid transparent;
  transition:
    border-color var(--transicion),
    box-shadow   var(--transicion);
}

/* Clase que se agrega con JS al hacer scroll */
.site-header--scroll {
  border-bottom-color: var(--color-borde);
  box-shadow:          var(--sombra-suave);
}

/* ── Barra de navegación ── */
.navbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          64px;
}

/* ── Logo ── */
.navbar__logo {
  display:        flex;
  flex-direction: column;
  line-height:    1;
  gap:            0;
  text-decoration: none;
  /* Sin transición de color en hover: el logo no cambia de color */
}

.navbar__logo-linea1,
.navbar__logo-linea2 {
  font-family:    var(--fuente-titulo);
  letter-spacing: 0.06em;
  color:          var(--color-verde);
  display:        block;
  transition:     color var(--transicion);
}

.navbar__logo-linea1 {
  font-size: 1.05rem;
}

.navbar__logo-linea2 {
  font-size:   1.55rem;
  margin-top:  -4px;         /* acerca las dos líneas */
  color:       var(--color-texto); /* "Sports" en negro */
}

.navbar__logo:hover .navbar__logo-linea1,
.navbar__logo:hover .navbar__logo-linea2 {
  color: var(--color-verde-hover);
}

/* ── Lista de links ── */
.navbar__links {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-xs); /* espacio mínimo; el padding de cada link da el aire */
  list-style:  none;
}

/* ── Link individual ── */
.navbar__link {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-family:     var(--fuente-cuerpo);
  font-weight:     700;
  font-size:       0.95rem;
  color:           var(--color-texto);
  text-decoration: none;
  padding:         6px 10px;
  border-radius:   var(--radio-sm);
  transition:      color var(--transicion), background-color var(--transicion);
  white-space:     nowrap;
}

/* Subrayado animado debajo del link */
.navbar__link::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             10px;
  right:            10px;
  height:           2px;
  background-color: var(--color-verde);
  transform:        scaleX(0);
  transform-origin: center;
  transition:       transform var(--transicion);
  border-radius:    1px;
}

.navbar__link:hover {
  color:            var(--color-verde);
  background-color: rgba(27, 94, 32, 0.06);
}

.navbar__link:hover::after {
  transform: scaleX(1);
}

/* Estado activo (página actual) */
.navbar__link.activo {
  color: var(--color-verde);
}

.navbar__link.activo::after {
  transform: scaleX(1);
}

/* ── Separador entre links y íconos ── */
.navbar__separador {
  width:            1px;
  height:           20px;
  background-color: var(--color-borde);
  margin:           0 var(--espacio-xs);
  flex-shrink:      0;
}

/* ── Links de ícono (Instagram, WhatsApp) ── */
.navbar__link--icono {
  font-size:   1.25rem;  /* ícono más grande */
  padding:     6px 8px;
  color:       var(--color-texto-secundario);
}

.navbar__link--icono:hover {
  color: var(--color-verde);
}

/* WhatsApp: verde siempre */
.navbar__link--whatsapp {
  color:            var(--color-blanco);
  background-color: var(--color-verde);
  border-radius:    var(--radio-pill);
  font-size:        1rem;
  padding:          7px 16px;
  gap:              6px;
  font-weight:      700;
}

.navbar__link--whatsapp::after {
  display: none; /* sin subrayado en el botón verde */
}

.navbar__link--whatsapp:hover {
  color:            var(--color-blanco);
  background-color: var(--color-verde-hover);
  transform:        translateY(-1px);
  box-shadow:       var(--sombra-suave);
}

/* Texto que solo aparece en mobile (dentro de links de ícono) */
.navbar__link-texto-mobile {
  display: none;
}

/* ── Botón hamburguesa ── */
.navbar__hamburguesa {
  display:        none;           /* oculto en desktop */
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            5px;
  width:          40px;
  height:         40px;
  padding:        6px;
  border:         none;
  background:     none;
  cursor:         pointer;
  border-radius:  var(--radio-sm);
  transition:     background-color var(--transicion);
}

.navbar__hamburguesa:hover {
  background-color: rgba(27, 94, 32, 0.08);
}

.navbar__hamburguesa-barra {
  display:          block;
  width:            22px;
  height:           2px;
  background-color: var(--color-texto);
  border-radius:    2px;
  transition:
    transform        0.3s ease,
    opacity          0.3s ease,
    background-color var(--transicion);
}

/* ── Animación del ícono hamburguesa → X ── */
.navbar__hamburguesa[aria-expanded="true"] .navbar__hamburguesa-barra:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburguesa[aria-expanded="true"] .navbar__hamburguesa-barra:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}
.navbar__hamburguesa[aria-expanded="true"] .navbar__hamburguesa-barra:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE: breakpoint hasta 767px ── */
@media (max-width: 767px) {

  .navbar__hamburguesa {
    display: flex;
  }

  /* El separador visual desktop no aparece en mobile */
  .navbar__separador {
    display: none;
  }

  /* Menú vertical oculto por defecto */
  .navbar__links {
    position:         absolute;
    top:              64px;           /* justo debajo del header */
    left:             0;
    right:            0;
    flex-direction:   column;
    align-items:      stretch;
    background-color: var(--color-blanco);
    border-top:       2px solid var(--color-verde);
    box-shadow:       var(--sombra-media);
    padding:          var(--espacio-md) var(--espacio-md) var(--espacio-lg);
    gap:              4px;

    /* Animación slide-down */
    overflow:         hidden;
    max-height:       0;
    opacity:          0;
    transform:        translateY(-8px);
    transition:
      max-height 0.35s ease,
      opacity    0.25s ease,
      transform  0.25s ease;
    pointer-events:   none;
  }

  /* Menú abierto */
  .navbar__links.abierto {
    max-height:     400px;
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
  }

  /* Links en columna — más grandes y fáciles de tocar */
  .navbar__link {
    font-size:   1rem;
    padding:     12px var(--espacio-md);
    border-radius: var(--radio-md);
    width:       100%;
  }

  .navbar__link::after {
    display: none; /* sin subrayado animado en mobile, el fondo es suficiente */
  }

  .navbar__link.activo {
    background-color: rgba(27, 94, 32, 0.08);
  }

  /* Ícono + texto en mobile */
  .navbar__link--icono {
    font-size: 1rem;
    color:     var(--color-texto);
  }

  .navbar__link-texto-mobile {
    display: inline; /* muestra "Instagram", "WhatsApp" */
  }

  /* WhatsApp en mobile: ancho completo, centrado */
  .navbar__link--whatsapp {
    justify-content: center;
    margin-top:      var(--espacio-sm);
    padding:         12px var(--espacio-md);
  }
}