/* ==========================================================================
   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.

     Los cuatro lados son el mismo margen. Antes se reservaba de más a la
     derecha, porque ahí iba la insignia del otro mundo; ahora esa puerta vive
     dentro de la portada, bajo el título del menú, y la barra vuelve a ocupar
     todo el ancho que le dejan. */
  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(--superficie);
  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(--sobre-marca);
  /* 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;
  }
}

/* Teléfonos angostos de verdad, de los de 320px. Ahí «Nosotros» y «Contacto»
   se rozan dentro de la píldora. Se recorta el margen de los lados, que es de
   donde se puede sacar ancho sin tocar el texto. */
@media (max-width: 359px) {
  .nav { --barra-margen: 8px; }
}

/* --------------------------------------------------------------------------
   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(--fondo);
    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);
  }
}

/* ==========================================================================
   El paso entre los dos mundos
   El sitio son dos líneas de producto con la misma casa: los GELÉE clásicos
   en crema y los proteicos en negro. Este es el botón que lleva de una a la
   otra, más el velo que cubre el cambio.

   Sigue viviendo en nav.css, y no en index.css, porque es navegación y porque
   el velo que lo acompaña hace falta en las dos portadas.
   ========================================================================== */

/* El botón ya no trae color propio. Antes iba pintado con el papel del sitio
   al que lleva —negro hacia la proteica, terracota hacia la clásica— y era lo
   que lo distinguía del de ordenar. Ahora lleva las clases de .btn--primario,
   o sea exactamente el mismo color que Ordenar por WhatsApp en cada mundo.

   El resultado es que las dos acciones de la portada se leen como hermanas y
   no como una principal y un anuncio de otra cosa. De que al otro lado hay
   otro color ya se encarga el velo, que sí es el papel del sitio al que se va.

   Así que a .mundo no le queda nada de forma: todo lo pone .btn. Lo único
   suyo es la flecha y el enganche de js/mundos.js por data-mundo.

   La flecha va detrás del texto y se adelanta al pasar el ratón. Es lo único
   que dice que esto lleva a otra parte. */
.mundo__flecha {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform var(--transicion);
}

.mundo:hover .mundo__flecha { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .mundo__flecha { transition: none; }
  .mundo:hover .mundo__flecha { transform: none; }
}

/* El velo sí es el color puro del mundo al que se va: es la pantalla del otro
   sitio adelantándose, y por eso tapa con su papel y no con otra cosa. Salen
   tal cual del --fondo de cada línea. */
.velo--proteico { --velo-fondo: #0F0F12; }
.velo--clasico  { --velo-fondo: #FBF7F2; }

/* --------------------------------------------------------------------------
   El velo del cambio
   -------------------------------------------------------------------------- */

/* Cubre la pantalla mientras se carga la otra línea. No es una barra de carga
   falsa que haga esperar de más: dura lo que tarda el desvanecido y la página
   siguiente ya viene pedida por debajo. Nace con hidden y solo js/mundos.js lo
   enciende, así que sin JavaScript el enlace funciona como cualquier enlace. */
.velo {
  position: fixed;
  inset: 0;
  z-index: 200;

  display: grid;
  place-items: center;

  background-color: var(--velo-fondo);
  opacity: 0;
  transition: opacity 380ms ease;
}

.velo[hidden] { display: none; }
.velo--entrando { opacity: 1; }

/* El logotipo del destino, respirando. Es el único movimiento del sitio que no
   es un color o un desplazamiento, y está solo aquí porque una espera sin nada
   que mirar se siente más larga de lo que es. */
.velo__logo {
  width: clamp(140px, 40vw, 200px);
  height: auto;
  animation: velo-latido 1.4s ease-in-out infinite;
}

/* Los dos logotipos son JPEG con el fondo quemado dentro, así que se borra con
   una mezcla, igual que en las portadas: multiply come el blanco del clásico y
   screen come el negro del proteico. */
.velo--proteico .velo__logo { mix-blend-mode: screen; }
.velo--clasico  .velo__logo { mix-blend-mode: multiply; }

@keyframes velo-latido {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1);    }
}

/* Quien pidió menos movimiento no ve ni el latido ni el desvanecido. El velo
   sigue apareciendo, porque sirve para avisar que algo está pasando, pero
   aparece de golpe. */
@media (prefers-reduced-motion: reduce) {
  .velo { transition: none; }
  .velo__logo { animation: none; opacity: 1; }
}