/* Barra de navegación.

   Sobre el hero no es una barra: son dos anclas tonales en las esquinas.
   Nada de fondo, filete ni blur, porque el negro del canvas es material y
   cualquier superficie encima le dibuja un borde que no debería existir.

   Al terminar el hero la barra emerge: sube luminancia y aparece el filete,
   igual que el resto de la página. No se desliza. */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60; /* bajo el loader (100), sobre el hero */
  /* tres zonas: marca | secciones | acciones. La columna central queda
     centrada respecto a la página, no respecto a lo que midan los lados */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--margen);
  padding: clamp(1rem, 2.2vw, 1.6rem) var(--margen);
  /* el filete y el fondo entran solo cuando la barra se posa */
  border-bottom: 1px solid transparent;
  background: transparent;
  visibility: visible;
  transition: background-color .45s ease, border-color .45s ease,
              padding .45s ease,
              transform .55s cubic-bezier(.22, 1, .36, 1),
              opacity .4s ease, visibility 0s;
}

/* Mientras corre el scrub la barra se retira hacia arriba: durante la
   animación no hay nada encima del hero. Vuelve al llegar al último frame,
   que es cuando el usuario percibe que la animación terminó.
   La fase la publica hero.js en el <html>.

   visibility la saca también del orden de tabulación: si no, un teclado
   podría enfocar enlaces invisibles durante toda la animación. */
/* La barra no se va de una pieza: primero se desmonta por zonas en orden
   inverso al de entrada —acciones, secciones, marca— y solo cuando están
   fuera sale el contenedor. De ahí el retardo de .2s en el transform. */
html[data-hero="corriendo"] .nav {
  transform: translateY(-115%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.55, 0, .68, .3) .2s,
              opacity .3s ease .2s,
              visibility 0s linear .62s;
}

.nav-marca,
.nav-enlaces,
.nav-acciones {
  transition: opacity .35s ease,
              transform .5s cubic-bezier(.22, 1, .36, 1);
}

html[data-hero="corriendo"] .nav-marca,
html[data-hero="corriendo"] .nav-enlaces,
html[data-hero="corriendo"] .nav-acciones {
  transform: translateY(-26px);
  opacity: 0;
  transition: opacity .26s ease, transform .34s cubic-bezier(.55, 0, .68, .3);
}

/* salida: de derecha a izquierda */
html[data-hero="corriendo"] .nav-acciones { transition-delay: 0s; }
html[data-hero="corriendo"] .nav-enlaces { transition-delay: .07s; }
html[data-hero="corriendo"] .nav-marca { transition-delay: .14s; }

/* entrada: el orden se invierte, de izquierda a derecha */
html[data-hero="final"] .nav-marca { transition-delay: .14s; }
html[data-hero="final"] .nav-enlaces { transition-delay: .22s; }
html[data-hero="final"] .nav-acciones { transition-delay: .30s; }

/* Degradado superior, no barra: da contraste al texto sobre cualquier
   frame sin dibujar un borde. Un fondo plano partiría el negro en dos;
   un degradado no tiene frontera que delate el recuadro. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 190px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .42) 42%,
    transparent 100%
  );
  transition: opacity .45s ease;
}

/* posada ya tiene fondo propio: el degradado sobra */
.nav.posada::before { opacity: 0; }

/* Hairline que se traza de izquierda a derecha al posarse, en vez de
   aparecer de golpe con un border-color. */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(242, 239, 233, .16);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1) .1s;
}

.nav.posada::after { transform: scaleX(1); }

.nav.posada {
  background: rgba(0, 0, 0, .82);
  padding-top: clamp(.7rem, 1.4vw, 1rem);
  padding-bottom: clamp(.7rem, 1.4vw, 1rem);
  backdrop-filter: blur(14px);
}

/* Oculta a la vista sin sacarlo del árbol de accesibilidad.
   display:none lo borraría y el control se quedaría sin nombre. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- marca --- */

.nav-marca {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  text-decoration: none;
  color: var(--texto);
  /* tonal sobre el hero: presente, no protagonista */
  opacity: .62;
  /* la transición la pone la regla compartida de las tres zonas: repetirla
     aquí la pisaría y se perdería el transform del escalonado */
}

.nav.posada .nav-marca,
.nav-marca:hover,
.nav-marca:focus-visible {
  opacity: 1;
}

.nav-marca-tf {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: .06em;
}

.nav-marca-nombre {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* --- enlaces (solo escritorio) --- */

.nav-enlaces {
  display: none;
  grid-column: 2;
  justify-content: center;
  gap: clamp(1.6rem, 3vw, 3rem);
}

/* .nav-item: clase compartida por los <a> que de verdad navegan y los
   <button> que abren un panel (Invierte) — antes esto seleccionaba por
   etiqueta (.nav-enlaces a), pero con los dos tipos mezclados hacía falta
   un gancho común. El reset de borde/fondo/cursor/fuente es para que el
   <button> no se note distinto del <a> a su lado. */
.nav-enlaces .nav-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  padding: 0 0 .4rem;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto);
  /* con el degradado detrás ya se leen: no hace falta esconderlas */
  opacity: .82;
  transition: opacity .3s ease;
}

.nav-enlaces .nav-item:hover,
.nav-enlaces .nav-item:focus-visible { opacity: 1; }

/* Índice numerado: lenguaje de ficha técnica, no de menú de tienda.
   Es el detalle que separa la barra de una lista de enlaces cualquiera. */
.indice {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--hueso);
  opacity: .42;
  transition: color .3s ease, opacity .3s ease, transform .3s ease;
}

.nav-enlaces .nav-item:hover .indice,
.nav-enlaces .nav-item:focus-visible .indice {
  color: var(--humo);
  opacity: 1;
  transform: translateY(-2px);
}

/* --- hover: la etiqueta se releva a sí misma --- */

.cambio {
  display: block;
  overflow: hidden;
  /* altura de una sola línea: sin esto la máscara crece hasta contener las
     dos copias y se ven ambas apiladas */
  height: 1.15em;
}

.cambio-pista {
  display: block;
  /* dos copias apiladas: subir media pista intercambia una por otra */
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

.cambio-pista i {
  display: block;
  font-style: normal;
  line-height: 1.15;
}

.nav-enlaces .nav-item:hover .cambio-pista,
.nav-enlaces .nav-item:focus-visible .cambio-pista {
  transform: translateY(-50%);
}

/* filete rojo que se traza bajo la etiqueta: el acento del humo, el mismo
   que remata las anotaciones del HUD */
.nav-enlaces .nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--humo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.nav-enlaces .nav-item:hover::after,
.nav-enlaces .nav-item:focus-visible::after { transform: scaleX(1); }

/* --- acciones --- */

.nav-acciones {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(.9rem, 2vw, 1.6rem);
}

/* Era un <a href="#carrito">; ahora abre #panel-carrito (ver nav.js), así
   que es <button> — de ahí el reset de borde/fondo/cursor/fuente. */
.nav-carrito {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto);
  opacity: .82;
  transition: opacity .3s ease;
}

.nav-carrito:hover,
.nav-carrito:focus-visible { opacity: 1; }

/* --- bolsa --- */

.nav-bolsa {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* el asa se levanta al pasar el cursor, como si alguien cogiera la bolsa */
.nav-bolsa-asa {
  transform-origin: 12px 9px;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.nav-carrito:hover .nav-bolsa-asa,
.nav-carrito:focus-visible .nav-bolsa-asa {
  transform: translateY(-2.5px) scaleY(1.18);
}

.nav-bolsa-cuerpo {
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.nav-carrito:hover .nav-bolsa-cuerpo,
.nav-carrito:focus-visible .nav-bolsa-cuerpo {
  transform: translateY(1px);
}


.nav-cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .35rem;
  border: 1px solid rgba(242, 239, 233, .32);
  font-size: .68rem;
  letter-spacing: 0;
  transition: border-color .3s ease, transform .3s ease;
}

.nav-carrito:hover .nav-cuenta,
.nav-carrito:focus-visible .nav-cuenta {
  border-color: rgba(242, 239, 233, .7);
}

/* el rojo solo cuando hay algo dentro: acento en reserva */
.nav-cuenta[data-lleno="si"] {
  border-color: var(--humo);
  background: var(--humo);
  color: var(--negro);
}

/* --- disparador del menú (solo móvil) --- */

.nav-boton {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto);
  opacity: .72;
  /* Las barras miden 22x8: eso es intocable con el pulgar. El botón se
     lleva a 44x44 de área táctil y el margen negativo compensa el
     crecimiento para que no descoloque el resto de la barra. */
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -14px -11px;
}

.nav-boton-barras {
  display: grid;
  gap: 5px;
  width: 22px;
}

.nav-boton-barras i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}

/* al abrir, las dos barras forman una X */
.menu-abierto .nav-boton-barras i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.menu-abierto .nav-boton-barras i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* --- overlay del menú --- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
  /* los enlaces en la mitad inferior: ahí llega el pulgar */
  padding: 0 var(--margen) calc(var(--margen) + 2rem);
  background: var(--negro);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}

.menu.abierto {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease, visibility 0s;
}

.menu-enlaces {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

/* .menu-item: igual que .nav-item arriba, clase compartida porque Invierte
   y Carrito ya no navegan — abren un panel, así que son <button>. */
.menu-enlaces .menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--texto);
  font-family: var(--display);
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* mismo lenguaje que el nombre del hero: cada línea sube desde su máscara */
.menu-enlaces .mascara {
  display: block;
  overflow: hidden;
}

.menu-enlaces .mascara > span {
  display: block;
  transform: translateY(105%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.menu.abierto .mascara > span { transform: translateY(0); }

/* escalonado: entran una detrás de otra */
.menu.abierto .menu-item:nth-child(1) .mascara > span { transition-delay: .06s; }
.menu.abierto .menu-item:nth-child(2) .mascara > span { transition-delay: .12s; }
.menu.abierto .menu-item:nth-child(3) .mascara > span { transition-delay: .18s; }
.menu.abierto .menu-item:nth-child(4) .mascara > span { transition-delay: .24s; }
.menu.abierto .menu-item:nth-child(5) .mascara > span { transition-delay: .3s; }
.menu.abierto .menu-item:nth-child(6) .mascara > span { transition-delay: .36s; }

.menu-pie {
  margin: 0;
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--hueso);
  opacity: 0;
  transition: opacity .4s ease .3s;
}

.menu.abierto .menu-pie { opacity: .55; }

.menu-pie i { font-style: normal; opacity: .5; margin: 0 .4em; }

/* bloquea el scroll del fondo mientras el menú está abierto */
body.menu-abierto { overflow: hidden; }

/* --- paneles: carrito e invierte ---

   Ninguno de los dos es una sección del scroll: son overlays que solo
   existen mientras están abiertos, con el mismo criterio de diálogo que
   .menu arriba (telón + caja, Escape, foco atrapado — todo en nav.js,
   crearPanel). Lo que cambia entre uno y otro es la geometría: el carrito
   se despliega del lado de su propio botón (derecha, .nav-acciones vive
   ahí), como un cajón; invierte es una ficha aparte, centrada, no una
   parada más del recorrido. */

.panel {
  position: fixed;
  inset: 0;
  z-index: 58; /* bajo el nav (60): el botón que lo abre sigue encima y
                  usable para cerrarlo, igual que el disparador del menú */
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}

.panel.abierto {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease, visibility 0s;
}

.panel-telon {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.panel-cerrar {
  border: 0;
  background: none;
  padding: 0;
  width: 2rem;
  height: 2rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--texto);
  opacity: .7;
  cursor: pointer;
  transition: opacity .25s ease;
}

.panel-cerrar:hover,
.panel-cerrar:focus-visible { opacity: 1; }

.panel-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto);
}

/* --- carrito: cajón que entra por donde está el botón --- */

.panel-carrito {
  justify-content: flex-end;
}

.panel-carrito .panel-caja {
  position: relative;
  width: min(420px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--negro);
  border-left: 1px solid rgba(242, 239, 233, .14);
  /* fuera de cuadro a la derecha hasta que se abre: el mismo lado del botón */
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.panel-carrito.abierto .panel-caja { transform: translateX(0); }

.panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-vacio {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--texto);
  opacity: .6;
}

/* --- invierte: ficha centrada, no un cajón --- */

.panel-invierte {
  align-items: center;
  justify-content: center;
  padding: var(--margen);
}

.panel-invierte .panel-caja {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--negro);
  border: 1px solid rgba(242, 239, 233, .14);
  text-align: center;
  transform: scale(.94);
  opacity: 0;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}

.panel-invierte.abierto .panel-caja {
  transform: scale(1);
  opacity: 1;
}

.panel-invierte .panel-cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.panel-invierte .panel-titulo {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
}

/* bloquea el scroll del fondo mientras un panel está abierto */
body.panel-abierto { overflow: hidden; }

/* --- secciones de relleno --- */

.pendiente {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .3;
  /* sin borde: todas son del mismo negro plano, así que una línea entre
     ellas no separa texturas distintas, solo dibuja una costura de más */
}

/* --- escritorio ---
   860px alcanzaba con 3 enlaces; con los 5 actuales (Oversize/Chaquetas/
   Gorras/Próximamente/Invierte) el ancho auto de .nav-enlaces empuja a
   .nav-acciones fuera de pantalla entre ~900 y ~1100px — medido en vivo, a
   partir de 1200px ya no pasa. */

@media (min-width: 1200px) {
  /* con sitio de sobra, lo que en móvil solo leían los lectores se ve */
  .nav-marca-nombre,
  .nav-carrito-texto {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
  }
  .nav-enlaces { display: flex; }
  /* con los enlaces a la vista, el disparador sobra */
  .nav-boton { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* sigue escondiéndose durante el hero, pero sin recorrido ni escalonado */
  html[data-hero="corriendo"] .nav-marca,
  html[data-hero="corriendo"] .nav-enlaces,
  html[data-hero="corriendo"] .nav-acciones { transform: none; }

  html[data-hero="final"] .nav-marca,
  html[data-hero="final"] .nav-enlaces,
  html[data-hero="final"] .nav-acciones { transition-delay: 0s; }

  .nav,
  .nav::before,
  .nav::after,
  .indice,
  .nav-enlaces,
  .nav-acciones,
  .nav-marca,
  .nav-enlaces .nav-item,
  .nav-enlaces .nav-item::after,
  .cambio-pista,
  .nav-carrito,
  .nav-cuenta,
  .nav-bolsa-asa,
  .nav-bolsa-cuerpo,
  .nav-boton-barras i,
  .menu,
  .menu-enlaces .mascara > span,
  .menu-pie,
  .panel,
  .panel-carrito .panel-caja,
  .panel-invierte .panel-caja,
  .panel-cerrar {
    transition: none;
  }

  /* sin movimiento el relevo no se entiende: se queda la primera copia */
  .nav-enlaces .nav-item:hover .cambio-pista,
  .nav-enlaces .nav-item:focus-visible .cambio-pista { transform: none; }
}