/* ==========================================================================
   GELÉE — nav.css
   Un solo bloque de marcado sirve a las dos navegaciones:
     < 900px  barra inferior fija de 5 espacios, "Ordenar" al centro en círculo
     >= 900px header superior de 72px, logo a la izquierda y 5 links a la derecha
   El logo de escritorio es la campana del lockup más el wordmark en texto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Móvil — barra inferior fija (por defecto, mobile-first)
   -------------------------------------------------------------------------- */
.nav {
  /* Píldora flotante: fija a la pantalla, así que acompaña el scroll, pero
     separada de los tres bordes para que se lea como un objeto encima de la
     página y no como el final de ella. El safe-area del iPhone se suma al
     margen inferior en vez de ir como padding interno. */
  position: fixed;
  inset: auto var(--barra-margen)
         calc(var(--barra-margen) + env(safe-area-inset-bottom, 0px))
         var(--barra-margen);
  z-index: 50;
  /* En tablets no tiene sentido estirarla de lado a lado */
  max-width: 440px;
  margin-inline: auto;
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 999px;
  box-shadow: var(--sombra-barra);
}

.nav__interior {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
}

/* El logo solo existe en escritorio. Al estar en display:none el navegador
   tampoco descarga la campana en móvil. */
.nav__logo { display: none; }

.nav__lista {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: var(--barra-alto);
}

.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  height: 100%;
  padding: 0 2px;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color var(--transicion);
}

.nav__link:hover { color: var(--texto); }

/* Los íconos son sólidos, no de contorno: a 22px se leen más limpios y
   aguantan mejor el fondo blanco de la píldora. */
.nav__icono {
  width: 22px;
  height: 22px;
  flex: none;
}

.nav__etiqueta {
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Ítem activo */
.nav__link[aria-current="page"] { color: var(--marca); }

/* --- "Ordenar": círculo sólido de 56px que sobresale por encima de la barra --- */
.nav__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--marca);
  color: var(--blanco);
  /* Sobresale por encima del borde de la píldora */
  transform: translateY(-15px);
  box-shadow: var(--sombra-barra);
  transition: background-color var(--transicion), transform var(--transicion);
}

.nav__link--destacado:hover .nav__circulo {
  background-color: var(--marca-oscuro);
}

.nav__link--destacado:active .nav__circulo {
  transform: translateY(-13px);
}

.nav__link--destacado[aria-current="page"] .nav__circulo {
  background-color: var(--marca-oscuro);
}

.nav__circulo .nav__icono {
  width: 25px;
  height: 25px;
}

/* En móvil el círculo se lee solo; la etiqueta queda para lectores de pantalla */
@media (max-width: 899px) {
  .nav__link--destacado {
    justify-content: center;
    gap: 0;
  }

  .nav__link--destacado .nav__etiqueta {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Escritorio — header superior de 72px
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .nav {
    position: sticky;
    inset: 0 0 auto 0;
    flex: none;
    max-width: none;
    margin-inline: 0;
    background-color: var(--crema);
    border: 0;
    border-bottom: 1px solid var(--linea);
    border-radius: 0;
    box-shadow: none;
  }

  .nav__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-32);
    height: var(--header-alto);
    padding-inline: var(--margen-lateral);
  }

  .nav__logo {
    display: flex;
    align-items: center;
    /* Hueco corto: la campana y el wordmark son un solo logo, no dos cosas
       puestas juntas. */
    gap: 10px;
    color: var(--marca);
    text-decoration: none;
    transition: color var(--transicion);
  }

  /* Se mide por el alto y el ancho sale del propio dibujo, que es más alto que
     ancho. 34px deja la campana un poco por encima de la mayúscula del
     wordmark, que es como se lee en el logo original. */
  .nav__logo-marca {
    height: 34px;
    width: auto;
    flex: none;
  }

  .nav__logo-texto {
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .nav__logo:hover { color: var(--marca-oscuro); }

  /* La campana es un PNG, así que no la alcanza el color del enlace. El filtro
     la oscurece más o menos lo mismo que --marca-oscuro al wordmark, para que
     las dos partes reaccionen juntas al pasar el ratón. */
  .nav__logo:hover .nav__logo-marca { filter: brightness(0.78); }

  .nav__lista {
    display: flex;
    grid-template-columns: none;
    gap: var(--esp-32);
    height: auto;
  }

  /* En escritorio los 5 son links de texto: sin íconos y sin círculo */
  .nav__icono,
  .nav__circulo { display: none; }

  .nav__link {
    flex-direction: row;
    gap: 0;
    min-height: 0;
    height: auto;
    padding: 4px 0;
    color: var(--texto);
  }

  .nav__link .nav__etiqueta {
    font-size: var(--t-nav);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
  }

  /* Underline animado sutil */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transicion);
  }

  .nav__link:hover {
    color: var(--marca);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }
}