/* ==========================================================================
   MOIRE - cabecera (nav)
   --------------------------------------------------------------------------
   Medidas sacadas de tres frames de Figma:
     Header escritorio  222:1467   1920x210
     Header Tablet      214:1475    768x72
     Header Mobile      236:1453    375x72
   y de la capa de menu a pantalla completa:
     Menu Links         309:2      1920x1019

   UN SOLO MARCADO para las tres anchuras (ver inc/nav.php): aqui solo se
   cambia la posicion y el tamano por CSS, nunca el HTML.
   ========================================================================== */

/* --- Icono del boton "Menu/Menú" -----------------------------------------
   Ya NO es un SVG: el icono del diseno fundia la hamburguesa con la lupa
   de un buscador (el sitio es solo de escaparate, sin buscador, asi que
   la lupa sobra) y ademas un <img> no se puede animar por dentro. Se
   dibuja con CSS: el propio <span> es el trazo central, y ::before y
   ::after son el de arriba y el de abajo. Cada uno es un elemento propio
   que se puede desplazar y rotar por separado para formar la X.

   GEOMETRIA, calcada de los tres trazos de la hamburguesa en el icono del
   diseno (se descartan los dos trazos de la lupa):
     arriba   x 1.5-18.5 (17 de largo)  y 5.5
     central  x 1.5-16.5 (15 de largo)  y 10.5   <- mas corto, a proposito
     abajo    x 1.5-18.5 (17 de largo)  y 15.5
   Grosor 3, extremos redondeados (border-radius: mitad del grosor).
   Los tres arrancan en el mismo x=1.5: por eso comparten "left". La
   separacion entre centros es 5px arriba y 5px abajo del central, y esos
   5px son justo lo que hay que desplazar arriba/abajo para que las dos
   rectas se crucen en el centro al formar la X. */
.nav__abrir-icono {
  position: relative;
  display: block;
  width: 15px;
  height: 3px;
  border-radius: 1.5px;
  background-color: var(--c-burdeos);
  /* background-color, no opacity: la opacity de un elemento se hereda
     tambien en sus pseudo-elementos (::before y ::after cuentan como
     hijos suyos a efectos de pintado), asi que apagaria a la vez los
     otros dos trazos, los que SI tienen que verse formando la X. Un
     color de fondo solo afecta a su propia caja. */
  transition: background-color 0.2s ease;
}

.nav__abrir-icono::before,
.nav__abrir-icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 3px;
  border-radius: 1.5px;
  background-color: var(--c-burdeos);
  transition: transform 0.2s ease;
}

.nav__abrir-icono::before { top: -5px; }
.nav__abrir-icono::after  { top: 5px; }

/* El estado abierto lo marca aria-expanded, que ya lleva el boton: asi el
   dibujo del icono y el estado accesible no se pueden desincronizar (no
   hace falta -ni conviene- una clase aparte que haya que acordarse de
   sincronizar a mano). El trazo central se desvanece y los otros dos
   rotan 45 grados hasta cruzarse formando la X. */
.nav__abrir[aria-expanded="true"] .nav__abrir-icono {
  background-color: transparent;
}

.nav__abrir[aria-expanded="true"] .nav__abrir-icono::before {
  transform: translateY(5px) rotate(45deg);
}

.nav__abrir[aria-expanded="true"] .nav__abrir-icono::after {
  transform: translateY(-5px) rotate(-45deg);
}

.nav__abrir {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--c-burdeos);
}

/* El texto "Menu"/"Menú" lleva de serie la clase .solo-lectores (la misma
   del salto de contenido, en vez de reinventar la misma tecnica con
   font-size:0): en Tablet y Mobile (214:1475 y 236:1453) el diseno SOLO
   muestra el icono. En escritorio (222:1467) si se ve el texto, asi que
   ahi se deshace .solo-lectores; ver el media query de 1200px mas abajo. */

.nav__logo img {
  display: block;
}

/* --- Selector de idioma ----------------------------------------------------
   MAQUETACION PROPIA: no esta en ningun frame de Figma (ver el comentario
   de inc/nav.php).

   El aspecto -flex, hueco, tipografia, color, opacidad de cada idioma y el
   separador "/"- es el mismo componente que su gemelo del pie, y vive en
   assets/css/base.css (ver el comentario de alli): aqui solo queda su
   posicion dentro de la cabecera, que es lo unico que le pertenece a
   nav.css. */

/* ==========================================================================
   Escritorio y tablet comparten alto (72) y reticula: la unica diferencia
   entre tablet (768) y movil (375) es el margen lateral y el tamano del
   logo. El salto grande esta en 1200, donde la cabecera pasa a 210 y el
   marcado se reordena con posicionamiento absoluto para centrar el logo
   con independencia del ancho de "Menu".
   ========================================================================== */

/* LA CABECERA ES PEGAJOSA Y SE ESCONDE AL BAJAR (28/09/2026).

   El encargo fue reproducir el comportamiento de rhodeskin.com: arriba del
   todo se ve, al bajar se va hacia arriba, y al subir vuelve a caer. Se leyo
   su CSS en vez de imitarlo a ojo -clase .Header__hidden con
   transform: translateY(-150%) y transition 0.7s cubic-bezier(0.76,0,0.24,1)-
   y de ahi salen la curva y la duracion de aqui abajo.

   sticky Y NO fixed, que es lo que ellos usan. Con fixed la cabecera sale
   del flujo y habria que darle a CADA pagina un relleno superior igual a su
   alto -72 o 186 segun el ancho- y rehacer la cuenta de la portada, que hoy
   mide una pantalla justa envolviendo cabecera y foto. Con sticky no se
   toca ninguna otra hoja: la cabecera sigue ocupando su hueco y solo se
   despega cuando le tocaria irse.

   SE ANIMA transform Y NO top NI margin: es la unica de las tres que el
   navegador puede mover sin rehacer la maquetacion en cada fotograma.

   -100% Y NO EL -150% DE ELLOS. Ese margen de mas esta para que el sombreado
   del elemento tambien salga de pantalla; esta cabecera no tiene sombra, es
   un rectangulo blanco, asi que con su propio alto ya no se ve nada. Si
   algun dia se le pone sombra, hay que subir este numero.

   NO HAY BLOQUE prefers-reduced-motion AQUI: base.css ya deja todas las
   transiciones del sitio en 0,01ms cuando el sistema lo pide, y esta entra
   en ese saco. */
/* LA CABECERA NO TIENE FONDO (30/09/2026).

   Lo pidio el responsable: la franja blanca iba tapando la parte de arriba
   de las fotografias al volver a aparecer. Sin fondo, el contenido pasa por
   debajo y no se corta nada.

   SOLO SE PONE BLANCA CON EL MENU ABIERTO, que es cuando tiene que tapar de
   verdad: alli el panel cubre la pagina de la cabecera para abajo y la
   cabecera tiene que cubrir lo suyo, o se veria el contenido colandose por
   la franja de arriba.

   LO QUE ESTO CUESTA, Y VA DICHO AQUI PARA QUE NO SORPRENDA: el logotipo,
   el boton MENU y el EN/ES son de color burdeos (#400f17), o sea oscuros.
   Sobre el blanco de la pagina y sobre las fotografias claras se leen; sobre
   un fondo oscuro, no. Los sitios donde la cabecera puede quedar sobre algo
   oscuro estan medidos en el informe del 30/09/2026: la seccion del
   perfumista de cada ficha y el pack de cherry-on-top, candynude y
   lickorice.

   EN LA DEL PERFUMISTA EL CONTRASTE ES 1,00:1, o sea que no es que se lea
   mal: es que el fondo de esa seccion es #400f17 y el contenido de la
   cabecera tambien, exactamente el mismo color. Desaparece. Sobre el rojo
   oscuro del pack son 1,66:1, que tampoco se lee.

   No se resuelve aqui porque no hay una solucion de una linea: haria falta
   o una version clara del logotipo que se encienda sobre fondo oscuro, o un
   velo degradado bajo la cabecera, y las dos son decisiones de marca.

   background-color Y NO background: para poder transicionarlo sin arrastrar
   el resto del atajo. */
.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: transparent;
}

/* LA CAPA DE FONDO DE LA CABECERA.
   -------------------------------------------------------------------------
   SIN DESENFOQUE DESDE EL 30/09/2026. Lo tuvo -un blur(14px) con un velo
   blanco al 50% que se encendia al desplazar- y el responsable pidio
   quitarlo y dejar la cabecera transparente. Esta capa se queda porque es
   la que lleva los DOS estados opacos que si siguen: el crema de /about y
   el blanco con el menu abierto. Fuera de esos dos casos es invisible
   (opacity: 0) y la cabecera no tiene fondo de ninguna clase.

   LO QUE ESO CUESTA, Y VA ESCRITO AQUI PARA QUE NO SE REDESCUBRA: sin velo,
   el contenido de la cabecera -que es #400f17- cae directamente sobre lo
   que pase por debajo. Sobre la seccion del perfumista de una ficha, que es
   un burdeos plano DEL MISMO COLOR, el contraste es 1,00:1: la cabecera
   desaparece. Sobre el rojo oscuro del pack son 1,66:1. Con el velo al 50%
   que habia eran 4,88:1. Es una decision tomada sabiendolo, no un olvido.

   SI ALGUIEN VUELVE A TRAER UN backdrop-filter, QUE LO PONGA AQUI Y NUNCA
   EN .nav. Un backdrop-filter convierte al elemento en BLOQUE CONTENEDOR de
   sus descendientes fijos, igual que un transform, y el panel del menu es
   un position:fixed que cuelga de .nav: puesto alli, el panel dejaria de
   medirse contra la ventana y se quedaria con el alto de la cabecera, o sea
   sin alto. Es el fallo que ya costo dos arreglos el 28/09 con el transform
   y el sintoma -abrir el menu y no ver nada- no se parece a la causa. Un
   pseudoelemento no es antepasado de nadie y no tiene ese problema.

   z-index: -1 LO DEJA DETRAS DEL CONTENIDO DE LA CABECERA Y DELANTE DE LA
   PAGINA. No se escapa hacia atras porque .nav crea contexto de apilado
   propio (tiene position y z-index), asi que ese -1 solo cuenta dentro de
   la cabecera.

   ESTA CAPA NO TIENE COLOR PROPIO, y es a proposito: el color lo pone cada
   uno de los dos estados -crema en /about, blanco con el menu abierto-
   porque no son el mismo color ni se encienden por lo mismo. Un color aqui
   seria un tercer valor que no se ve nunca y que habria que acordarse de
   mantener. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
}

/* LA TRANSICION CUELGA DE .nav--animada, igual que la del desplazamiento y
   por el mismo motivo: nav.js pone esa clase pasados dos fotogramas. Al
   recargar una pagina que el navegador restaura ya desplazada, el velo
   tiene que estar puesto DESDE EL PRIMER PINTADO; declarada en .nav::before
   a secas, se veria aparecer solo. */
.nav--animada::before {
  transition: opacity 0.45s cubic-bezier(0.76, 0, 0.24, 1),
              background-color 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}

/* EN /about LA CABECERA NO ES TRANSPARENTE: VA EN CREMA (30/09/2026).

   Lo pidio el responsable, y el color es el del fondo de la marquesina del
   banner de la portada -la de "Moire is MORE"-, que es #f1efe7, o sea
   --c-crema. Asi la cabecera de /about se lee como parte de la misma
   familia que ese bloque en vez de como una franja neutra.

   OPACA DESDE ARRIBA DEL TODO, no solo al desplazarse: por eso lleva
   opacity: 1 ademas del color. Y por eso /about se ha salido de la lista de
   paginas que suben su contenido -ver mas arriba-: una cabecera opaca tiene
   que reservar su sitio o taparia la primera fotografia.

   VA ANTES DE LAS REGLAS DEL MENU ABIERTO Y NO DESPUES. Tiene la misma
   especificidad que body.nav--abierto .nav::before, asi que si fuera
   despues ganaria ella y la cabecera se quedaria en crema con el menu
   abierto, contra el panel blanco. Puesta antes, manda la del menu. */
body.about .nav::before {
  opacity: 1;
  background-color: var(--c-crema);
}

/* ENCENDIDA SOLO CON EL MENU ABIERTO. Antes se encendia tambien al
   desplazar -era el velo desenfocado- y eso se quito el 30/09/2026 a
   peticion del responsable: la cabecera va transparente todo el rato. Con
   el menu abierto SI tiene que tapar, aunque se este arriba del todo, o la
   pagina se veria por la franja de la cabecera mientras se lee el menu.

   /about se enciende por su cuenta, unas lineas mas arriba. */
body.nav--abierto .nav::before {
  opacity: 1;
}

/* AQUI NO HAY "transform: translateY(0)", Y ESA AUSENCIA ES LA REGLA.

   Lo tuvo, y rompio el menu: CUALQUIER transform distinto de none convierte
   al elemento en el bloque contenedor de sus descendientes position:fixed.
   El panel del menu (#menu) es hijo de <header class="nav">, asi que su
   "top:72px; bottom:0" dejo de medirse contra la ventana y paso a medirse
   contra los 72px de la cabecera: el panel quedo en 1024x0 y al abrir el
   menu no se veia nada. Medido, no deducido.

   POR ESO LOS DOS ESTADOS VISIBLES DE ABAJO DICEN "none" Y NO
   "translateY(0)", que a la vista son lo mismo y aqui no lo son. La
   transicion funciona igual: al interpolar, none se trata como la matriz
   identidad. */

/* LA TRANSICION NO SE DECLARA EN .nav SINO EN ESTA CLASE, y la pone
   nav.js pasados dos fotogramas. Es el mismo truco que el
   "html:not(.is-header-interactive)" de ellos y no es adorno: al recargar
   una pagina el navegador restaura el scroll donde estabas, y sin esto la
   cabecera podria animarse sola nada mas cargar, sin que nadie haya tocado
   la rueda. Sin JavaScript la cabecera se queda pegajosa y siempre visible,
   que es un final digno. */
.nav--animada {
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.nav--oculta {
  transform: translateY(-100%);
}

/* DOS CASOS EN LOS QUE NO PUEDE ESCONDERSE.

   Los dos ganan a .nav--oculta por especificidad (0,2,0 contra 0,1,0), asi
   que no dependen del orden.

   1. Alguien esta tabulando y llega al boton del menu o al selector de
      idioma. Esconder la cabecera con el foco dentro deja a esa persona
      pulsando algo que no ve.
   2. El menu esta abierto. Bastaria con el :focus-within -#menu vive dentro
      de la cabecera, asi que al abrirlo el foco ya esta dentro- pero se
      escribe aparte porque no es lo mismo: esta regla dice "con el menu
      abierto", y eso tiene que seguir siendo verdad aunque manana el foco
      se maneje de otra forma.

   none Y NO translateY(0): ver la nota de .nav mas arriba. Con
   translateY(0) la cabecera vuelve a ser el bloque contenedor del panel y
   el menu se queda sin alto. */
body.nav--abierto .nav {
  transform: none;
}

/* BLANCA DEL TODO SOLO CON EL MENU ABIERTO. El resto del tiempo es un velo
   desenfocado, para no cortar las fotografias; aqui tiene que tapar de
   verdad, o el contenido se colaria por la franja de arriba. */
body.nav--abierto .nav::before {
  background-color: var(--c-blanco);
}

/* :has(:focus-visible) Y NO :focus-within, QUE FUE MI PRIMERA VERSION Y
   DEJABA LA CABECERA CLAVADA.

   Al cerrar el menu, nav.js devuelve el foco al boton -que esta dentro de
   la cabecera- asi que :focus-within seguia siendo cierto despues de
   cerrarlo, con raton o con el dedo. Resultado: quien abria el menu una vez
   ya no volvia a ver la cabecera esconderse en toda la pagina. Medido: la
   clase .nav--oculta se ponia y el transform seguia en none.

   :focus-visible es "tiene el foco Y hace falta verlo", que es exactamente
   el caso que esta regla quiere cubrir: alguien navegando con el tabulador.
   Tras una pulsacion con raton o dedo no se activa, asi que la cabecera
   vuelve a poder esconderse.

   VA EN SU PROPIA REGLA Y NO EN LA LISTA DE ARRIBA: si un navegador no
   entiende :has(), descarta la regla entera donde aparezca. Juntas, se
   llevaria por delante tambien la del menu abierto, que es la importante.
   Separadas, lo peor que pasa es que en ese navegador la cabecera pueda
   esconderse mientras alguien tabula. */
.nav:has(:focus-visible) {
  transform: none;
}

/* --- Base: tablet y movil (<1200) -----------------------------------------
   Header Mobile (236:1453): flex simple, logo a la izquierda e icono a la
   derecha, alto 72, margen lateral 24px. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding-inline: 24px;   /* margen del frame "Header Mobile", NO es --margen-pagina */
}

/* El marcado trae abrir->logo->idiomas en ese orden, pero visualmente en
   movil/tablet el logo va primero y el boton de abrir el ultimo: se
   reordena por flex, no se toca el HTML. */
.nav__abrir { order: 3; }
.nav__logo  { order: 1; }
.nav__idiomas { order: 2; }

/* POSICIONADOS SOLO PARA QUE CUENTE SU z-index (el 101 de mas abajo, que
   los pone por delante del panel del menu). Un elemento estatico ignora el
   z-index, y aqui los dos lo son.

   VA EN EL BLOQUE DE BASE Y NO ABAJO CON EL z-index a proposito: de 1200 en
   adelante estos dos pasan a position:absolute, y como aquel media query
   esta escrito ANTES, un relative de mas abajo se lo comeria. Aqui, en
   cambio, el absolute de 1200 gana por orden, que es lo que se quiere. */
.nav__abrir,
.nav__logo {
  position: relative;
}

.nav__logo img {
  width: 124px;
  height: 38px;
}

/* EL SELECTOR DE IDIOMA NO SE VE EN LA CABECERA POR DEBAJO DE 1200
   (28/09/2026, decision del responsable). Antes flotaba entre el logo y el
   boton, apoyado en el icono para no solaparse; la cabecera de movil tiene
   72px de alto y tres cosas dentro eran una de mas.

   NO SE OCULTA A SECAS: reaparece dentro del menu cuando se abre, en la
   regla de aqui abajo. Ocultarlo sin mas dejaria a un visitante espanol sin
   ninguna forma de llegar al castellano desde el movil, y este sitio tiene
   la mitad del contenido ahi.

   EL display SE APAGA AQUI Y SE VUELVE A ENCENDER EN 1200. El valor que se
   repone alli es flex, que es el que trae de base.css -lo comparte con
   .pie__idiomas-, no uno inventado para esta regla. */
.nav__idiomas {
  display: none;
}

/* DENTRO DEL MENU ABIERTO, ABAJO Y CENTRADO.

   SE COLOCA CON position:fixed Y NO ES HIJO DEL PANEL. El selector vive en
   la cabecera, fuera de .nav__menu, y ahi se queda: moverlo dentro del
   panel en el marcado lo dejaria oculto en escritorio, porque el panel esta
   [hidden] mientras el menu no se abre. Asi que lo que se mueve es donde se
   pinta, no donde vive.

   LA CLASE nav--abierto LA PONE assets/js/nav.js en el <body> al abrir el
   menu, y ya existia. Aqui solo se usa: no hace falta tocar el guion para
   que esto funcione.

   ABAJO Y NO DEBAJO DE "ABOUT", que seria lo bonito. Pegarlo a la ultima
   entrada obligaria a escribir aqui un top fijo calculado a partir de
   cuantas entradas tiene el menu y de su tamano de letra: el dia que se
   anada una cuarta -SHOP esta en el diseno y no se ha implementado- se
   solaparian sin que nada avise. Anclado abajo, el numero de entradas deja
   de importar.

   z-index 101: uno mas que el panel (100), o si no queda debajo. */
/* VA DENTRO DE UN max-width Y ESO NO ES OPCIONAL. Sin el, esta regla se
   aplica tambien de 1200 en adelante, y ahi el selector SI vive en la
   cabecera: se mezclaba con su posicion de escritorio -que sigue poniendo
   top:34px y una altura fija- y el resultado era una barra a ancho completo
   pegada arriba, con el EN/ES centrado encima del logo y tapando el boton
   de cerrar, que dejaba de poder pulsarse. Reportado nada mas montarlo.

   NO BASTA CON EL ORDEN EN EL FICHERO: "body.nav--abierto .nav__idiomas"
   es mas especifico que el ".nav__idiomas" del bloque de 1200, asi que gana
   aunque este escrito antes. El unico corte que funciona es el ancho.

   1199.98 y no 1200: asi no hay un ancho en el que valgan las dos reglas. */
@media (max-width: 1199.98px) {
  body.nav--abierto .nav__idiomas {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;

    /* JUSTO DEBAJO DE LA ULTIMA ENTRADA, Y EL NUMERO LO MIDE EL GUION.

       Estuvo anclado abajo del panel -bottom: 32- porque pegarlo a "ABOUT"
       parecia obligar a un numero a mano, y a mano no vale: la letra de las
       entradas es clamp(32px, 9vw, 110px), o sea que el alto de cada una
       cambia con el ancho de la ventana. Un top calculado para 375 quedaria
       despegado en 700.

       Se resolvio al reves: en vez de que el CSS adivine donde acaba el
       menu, nav.js lo MIDE al abrirlo y lo deja en --menu-fin. Es exacto a
       cualquier ancho, no duplica aqui la escala tipografica -que es lo que
       de verdad se desincroniza- y sigue valiendo el dia que el menu tenga
       una cuarta entrada, porque mide la ultima, no la tercera.

       NO HACE FALTA RESPALDO si la variable no existe: esta regla solo se
       aplica con la clase nav--abierto puesta, y esa clase la pone el mismo
       guion que hace la medicion. Sin JavaScript el menu no llega a
       abrirse. */
    top: var(--menu-fin);
    z-index: 101;
  }
}

/* --- Tablet (768 a 1199): Header Tablet (214:1475) -------------------------
   Mismo alto y misma disposicion que movil; cambia el margen lateral (80,
   el mismo --margen-pagina que usa la reticula de /collections) y el
   tamano del logo. */
@media (min-width: 768px) {
  .nav {
    padding-inline: var(--margen-pagina);
  }

  .nav__logo img {
    width: 151.93px;
    height: 46px;
  }

}

/* --- Escritorio (>=1200): Header escritorio (222:1467) ---------------------
   210 de alto. El logo se centra con independencia del ancho real de
   "Menu", asi que aqui se abandona el flex y se posiciona cada pieza de
   forma absoluta, tal y como estan medidas en el diseno: todas arrancan a
   34px del borde superior. */
@media (min-width: 1200px) {
  .nav {
    display: block;
    /* 186 Y NO LOS 210 DEL DISENO (28/09/2026, decision del responsable:
       el logo se veia demasiado grande y estiraba la cabecera).

       EL NUMERO NO ES A OJO: la cabecera del diseno son 34 de aire, el logo
       y otros 34 de aire (34 + 142 + 34 = 210). Se conserva esa
       composicion y solo encoge el logo, asi que el alto sale de la misma
       cuenta con el logo nuevo: 34 + 118 + 34 = 186. Si manana se vuelve a
       tocar el tamano del logo, este numero se recalcula igual.

       OJO: hay que cambiarlo A LA VEZ que el "top" del panel del menu (mas
       abajo en este fichero). Son el mismo numero: el panel empieza justo
       donde acaba la cabecera, y si se desincronizan queda una franja de la
       pagina asomando entre las dos. */
    height: 186px;
    padding-inline: 0;
  }

  .nav__abrir {
    position: absolute;
    /* A LA DERECHA DESDE EL 28/09/2026. Estaba a la izquierda y el selector
       de idioma a la derecha; se intercambian por decision del responsable.
       Es donde la gente busca un menu, y deja el idioma en el primer sitio
       donde cae la vista al leer. */
    right: var(--margen-pagina);
    top: 34px;
    /* Alto fijo, no el que le de su contenido: es la MISMA variable que usa
       .nav__idiomas mas abajo para su propio alto. Con eso, cambiar el
       tamaño de letra de "MENU" (o el de .nav__abrir-texto) ya no puede
       descuadrar la alineacion con el selector de idioma: los dos siguen
       centrando su texto -por el align-items:center de aqui abajo y el de
       base.css- dentro de la misma fila, porque los dos leen su alto de un
       unico sitio en vez de tener cada uno el suyo por su cuenta. */
    height: var(--nav-fila);
    order: initial;
    /* Aqui si se ve el texto "MENÚ", junto al icono (222:1467): se deshace
       .solo-lectores del texto (ver mas abajo) y se recupera el hueco
       entre el icono y el texto. */
    gap: 12px;   /* 60.75 - 48.75 = 12px entre el icono y el texto, en el diseno */
  }

  /* Deshace .solo-lectores (base.css): en escritorio el texto SI se ve,
     junto al icono. En vez de reescribir toda la regla, se anula cada
     propiedad que lo esconde.

     line-height:23.8px es el interlineado real del diseno para este texto
     (16px de letra), pero YA NO gobierna el alto de .nav__abrir: ese alto
     es fijo (--nav-fila, ver arriba), asi que si este numero cambia -o si
     cambia font-size- el texto solo se recentra dentro de esa fila fija,
     no la agranda ni desalinea el selector de idioma. */
  .nav__abrir-texto {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: nowrap;
    font-size: 16px;
    font-weight: var(--peso-medium);
    letter-spacing: 1.6px;
    line-height: 23.8px;
  }

  .nav__logo {
    position: absolute;
    left: 50%;
    top: 34px;
    transform: translateX(-50%);
    order: initial;
  }

  /* EL LOGO, UN 17% MAS PEQUENO QUE EN EL DISENO (222:1467, que lo da a
     469x142). Decision del responsable el 28/09/2026: a 142 de alto se
     comia la cabecera.

     LAS DOS MEDIDAS SE MANTIENEN EN PROPORCION: 469/142 = 3,3028, y
     118 x 3,3028 = 389,73. Se escriben las dos y no solo el alto -que
     bastaria, porque el SVG conserva su proporcion- para no romper el
     patron de los otros dos cortes, que tambien declaran ambas. El decimal
     es a proposito: redondear a 390 deformaria el dibujo, poco, pero sin
     motivo. */
  .nav__logo img {
    width: 389.73px;
    height: 118px;
  }

  .nav__idiomas {
    /* Comparte linea de verdad con "MENÚ", no solo el borde superior: el
       diseno original anclaba MENU y CESTA los dos en y=34 (ver
       222:1467); al quitar la cesta este selector se quedo debajo de
       donde estaba, y hay que devolverlo a esa reticula, no a un numero
       inventado. top:34px es ese valor.

       Para que el CENTRO del texto coincida con el de "MENÚ" -y siga
       coincidiendo si algun dia cambia el tamaño de letra de cualquiera
       de los dos-, se le da la MISMA altura de caja que el boton, y esa
       altura es --nav-fila (base.css), no un "26px" propio: son la MISMA
       variable, no dos numeros que hoy midan igual por casualidad. Con
       eso el centrado vertical por flex que ya trae de serie (.nav__idiomas
       de base.css es display:flex; align-items:center) hace el resto: el
       texto se centra dentro de esa fila, pase lo que pase con su tamaño
       de letra, igual que el texto de "MENÚ" se centra dentro de la suya. */
    /* SE VUELVE A VER: por debajo de 1200 esta en display:none y vive
       dentro del menu. De 1200 en adelante la cabecera mide 210 de alto y
       hay sitio de sobra, asi que se queda a la vista. */
    display: flex;
    position: absolute;
    top: 34px;
    height: var(--nav-fila);
    /* A LA IZQUIERDA: ver el intercambio explicado en .nav__abrir. */
    left: var(--margen-pagina);
    transform: none;
    order: initial;
  }
}

/* ==========================================================================
   Menu a pantalla completa (Menu Links, 309:2)
   --------------------------------------------------------------------------
   El alto del frame (1019) es el de un viewport de 1229 menos los 210 de
   la cabecera: el menu no tapa la cabecera, empieza justo debajo, asi que
   el boton que lo abre sigue visible (y pulsable) para cerrarlo. Por eso
   el "top" es la altura de la cabecera en cada ancho, no 0.

   OJO: [hidden] ya lo oculta el navegador (display:none de la hoja de
   estilos del user agent), pero esa regla tiene menos especificidad que
   cualquier .nav__menu{display:...} que se escriba aqui. Por eso el estado
   visible se declara con :not([hidden]) en vez de en el selector a secas:
   asi el `hidden` del HTML sigue siendo lo que manda.
   ========================================================================== */

/* COMO ES EL PANEL. Todo menos el display, y esa reparticion es
   deliberada desde el 30/09/2026: ver la nota de :not([hidden]) aqui
   debajo, que cuenta el fallo que costo.

   justify-content: flex-start (el valor por defecto, asi que no hace falta
   escribirlo): en el lienzo de Figma (1920x1019, un alto de canvas
   concreto) las 4 entradas se centran como grupo, pero aqui el panel es una
   capa fija de alto variable (el que le sobre a cada pantalla) y centrar el
   grupo dejaba un hueco de 92px encima de la primera entrada. La primera
   entrada tiene que empezar pegada al panel, con solo su propio padding-top
   separandola de la cabecera. */
/* EL PANEL CUBRE LA PANTALLA ENTERA, DESDE EL PIXEL 0 (30/09/2026).

   Antes empezaba debajo de la cabecera (top: 72 / 186) y el blanco de la
   cabecera lo ponia su propio velo. Eran DOS superficies: al abrir, la
   cabecera se ponia blanca por su lado y el panel se descubria por el suyo,
   y se veian como dos trozos. Lo reporto el responsable con captura.

   Con el panel empezando en 0, la cortinilla barre la pantalla entera de
   una sola pasada: primero destapa la banda de la cabecera y sigue hacia
   abajo. Una sola superficie y un solo movimiento.

   EL padding-top SUSTITUYE AL top: las entradas tienen que seguir
   empezando donde empezaban, o sea debajo de la cabecera. Es el mismo
   numero de antes, solo que ahora es hueco dentro del panel en vez de
   distancia desde arriba.

   Y EL LOGOTIPO Y EL BOTON SE QUEDAN POR ENCIMA -llevan z-index 101, ver
   su regla- porque si no el panel los taparia al pasar y no habria con que
   cerrar el menu. */
.nav__menu {
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding-top: 72px;

  /* EL PANEL NO SE DESPLAZA: LO HACE SU <nav> (30/09/2026, correccion).

     Al pasar el hueco de la cabecera de top a padding-top, ese hueco quedo
     DENTRO de la zona desplazable: en una ventana corta -donde las entradas
     no caben- al desplazar el panel las entradas se metian detras del
     logotipo, porque la banda de la cabecera se desplazaba con ellas.
     Reproducido a 1440x620: con 100px de desplazamiento la primera entrada
     quedaba en el pixel 86, y la cabecera llega hasta 186.

     Desplazando solo el <nav> de dentro, el hueco de arriba se queda quieto
     y lo que se mueve son las entradas, que es lo que tiene que moverse. */
  overflow: hidden;
  background: var(--c-blanco);
  z-index: 100;
}

/* min-height: 0 NO SOBRA. Un elemento de caja flexible no se encoge por
   debajo del tamano de su contenido a menos que se le diga, asi que sin
   esta linea el <nav> mide lo que miden las entradas, no desborda nunca y
   el overflow-y no llega a hacer nada: en una ventana corta las ultimas
   entradas quedarian fuera y sin forma de alcanzarlas. */
.nav__menu nav {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* POR ENCIMA DEL PANEL, que ahora pasa por delante de la cabecera. El 101
   es el mismo que ya llevaba el selector de idiomas y por el mismo motivo:
   uno mas que el panel.

   AQUI SOLO EL z-index. El position que hace falta para que ese z-index
   cuente esta arriba, en el bloque de base, Y TIENE QUE SEGUIR ALLI: de
   1200 en adelante estos dos son position:absolute -el logo centrado con
   left:50% y el boton anclado con right- y esta regla esta ESCRITA DESPUES
   de aquel media query. Un position:relative aqui gana por orden y les
   quita el absolute: el left:50% del logo deja de centrarlo y pasa a
   correrlo media pantalla a la derecha, lo que saca la pagina 953px de
   ancho y le pone barra horizontal. Paso el 30/09/2026 y lo reporto el
   responsable con captura. */
.nav__logo,
.nav__abrir {
  z-index: 101;
}

/* AQUI SOLO EL display, Y ESTO NO ES ORDEN: ES EL ARREGLO DE UN FALLO.

   Hasta el 30/09/2026 esta regla llevaba tambien el position, el fondo, el
   z-index y el top. Funcionaba mientras el menu se cerraba de golpe, y dejo
   de funcionar al ponerle la cortinilla: el `hidden` entra al instante y
   con el se apaga TODA esta regla, mientras que el display se queda en flex
   450ms mas porque la transicion lo aplaza (allow-discrete).

   O sea que durante esos 450ms el panel seguia pintandose pero sin fondo,
   sin position:fixed y sin z-index: las entradas del menu caian sueltas
   sobre el video de la portada. El responsable lo reporto dos veces con
   captura y las dos primeras veces se diagnostico mal -primero como un
   fundido, despues como cache-.

   LA REGLA GENERAL, por si vuelve a tocar: de un elemento que se anima al
   desaparecer, en el selector que depende del estado solo puede quedar lo
   que se pueda apagar de golpe sin que se note. Todo lo demas -lo que
   define como SE VE- va en el selector de siempre, o se evapora en el
   primer fotograma de la salida.

   Y el display se queda aqui por lo de la cabecera de este bloque: con
   :not([hidden]) es el atributo del HTML el que manda. */
.nav__menu:not([hidden]) {
  display: flex;
}

@media (min-width: 1200px) {
  .nav__menu {
    /* EL MISMO NUMERO QUE .nav{height} de este fichero, no una coincidencia:
       las entradas arrancan justo donde acaba la cabecera. Ver la nota
       alli. Es hueco y no distancia desde arriba desde que el panel cubre
       la pantalla entera para que la cortinilla sea una sola. */
    padding-top: 186px;
  }
}

.nav__menu nav {
  width: 100%;
}

.nav__menu ul {
  width: 100%;
}

/* Cada entrada mide 178px de alto en el diseno (144:1623 y hermanos):
     padding-top    16
     etiqueta      130   (interlineado, ver .nav__menu a)
     hueco          16   (entre el texto y el divisor)
     divisor         0   (una linea de 1px que NO ocupa alto propio)
     padding-bottom 16
   El "hueco" (16, entre el texto y la linea) y el "padding-bottom" (16,
   entre la linea y la siguiente entrada) SUMAN el mismo padding-bottom de
   32px -eso ya daba el alto total correcto-, pero son dos huecos
   DISTINTOS con la linea en medio, no uno solo: la linea tiene que caer
   16px por debajo del texto, no en el borde exterior de la caja (a 32px).
   Un box-shadow en el borde de la caja pintaba la linea ahi, en el sitio
   equivocado, y ningun conteo de alturas lo delataba porque el total (178)
   y el hueco entre dos textos seguidos (48 = 16+16+16) seguian cuadrando.

   La linea se pinta con un ::after propio, no con border-bottom (que
   anadiria su grosor al alto de la caja) ni con box-shadow (que la deja en
   el borde exterior): position:absolute + bottom:16px la deja exactamente
   16px por encima del borde inferior de la caja, justo donde el
   padding-bottom (16, el segundo hueco) empieza y el "hueco" del texto (16,
   el primero) termina. No hace falta tocar el marcado -que solo tiene un
   <a> dentro de cada <li>- para reservarle su propio elemento. */
.nav__menu li {
  position: relative;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 32px;
  text-align: center;
}

.nav__menu li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* bottom:15px (no 16) para que el borde SUPERIOR de esta linea de 1px
     -el que cuenta como "la linea"- quede a 16px del texto: si el
     desplazamiento fuera 16, el borde superior de la linea quedaria a
     15px del texto y el inferior a 16, por el propio grosor de 1px de la
     linea. Comprobado con getBoundingClientRect(): borde inferior del
     texto a borde superior de la linea = 16px exactos. Quedan otros 16
     (32 de padding-bottom, menos 15 de este offset, menos 1 del grosor
     de la linea) hasta la siguiente entrada. */
  bottom: 15px;
  height: 1px;
  background: var(--c-burdeos);   /* la "Divider / ..." del diseno */
}

.nav__menu a {
  display: block;
  font-weight: var(--peso-medium);
  color: var(--c-burdeos);
  /* El diseno pone el texto en VERSALES (COLLECTIONS, ABOUT); las claves de
     t() se guardan con mayuscula inicial nada mas, asi que el mayusculado
     es cosa del CSS y no toca los diccionarios de traduccion. */
  text-transform: uppercase;
  /* 110px de letra y 12.1px de tracking son los del diseno a 1920px;
     0.11em de tracking da exactamente 12.1px a 110px de letra (110 x
     0.11 = 12.1), comprobado. clamp() conserva el tamaño de letra en
     escritorio y lo reduce en pantallas estrechas, donde el frame no
     cubre este componente: por eso el interlineado tambien va en
     unidades relativas (130/110 = 1.1818) y no en el "130px" fijo que
     dice el diseno, para que seguir siendo proporcional cuando el
     tamaño de letra se reduce por el clamp(). A 110px da los mismos
     130px del diseno. */
  font-size: clamp(32px, 9vw, 110px);
  letter-spacing: 0.11em;
  line-height: 1.1818;
}

/* Mientras el menu esta abierto, el fondo no se desplaza. */
body.nav--abierto {
  overflow: hidden;
}


/* ==========================================================================
   EL MENU SE ABRE CON UNA CORTINILLA  (30/09/2026)
   --------------------------------------------------------------------------
   Antes aparecia de golpe: el panel pasa de display:none a display:flex y
   eso no tiene estado intermedio. El responsable lo pidio menos directo.

   SE DESCUBRE DE ARRIBA ABAJO, NO SE DESPLAZA. La primera idea fue deslizar
   el panel desde arriba con transform, que es el mismo gesto que ya hace la
   cabecera al volver. No vale aqui: el panel lleva z-index 100 y la
   cabecera 90, asi que durante el recorrido le pasaria POR ENCIMA y taparia
   el boton de cerrar justo mientras se abre. Bajarle el z-index no es
   opcion -tiene que cubrir la pagina- y recortarlo pediria un envoltorio
   nuevo en el marcado.

   clip-path lo resuelve sin mover nada: el panel esta donde tiene que estar
   desde el primer fotograma y lo que crece es la parte que se ve. Empieza
   recortado del todo por abajo -inset(0 0 100% 0)- y termina entero.

   Y NO CREA NINGUN PROBLEMA DE CAPA: clip-path convierte al elemento en
   bloque contenedor de sus descendientes fijos, igual que transform, y esa
   es la trampa que ya mordio dos veces en esta hoja. Aqui es inofensivo
   porque el panel no tiene ni un descendiente fijo: los unicos dos
   position:fixed de este fichero son el propio panel y el selector de
   idiomas, y el selector NO cuelga de el (ver su bloque, mas arriba).

   LA TRANSICION VIVE EN EL SELECTOR SIN :not([hidden]), o sea en el estado
   CERRADO, y eso es lo que hace que tambien se vea al cerrar. Declarada
   solo en el estado abierto, al poner el hidden el elemento deja de
   casarlo, se queda sin transicion y desaparece de golpe.

   display EN LA LISTA, CON allow-discrete: display no se puede interpolar
   -no hay medio camino entre none y flex- asi que por defecto salta al
   principio y el panel se borra antes de que la cortinilla corra. Con
   allow-discrete el salto se aplaza al final, que es justo lo que hace
   falta al cerrar.

   @starting-style ES EL VALOR DE PARTIDA la primera vez. Sin el, el
   navegador no tiene desde donde animar la primera apertura -el elemento
   acaba de aparecer- y la primera vez se veria de golpe y las siguientes
   no. Es exactamente el tipo de fallo que solo se ve recargando.

   NO HAY REGLA PARA prefers-reduced-motion: assets/css/base.css ya deja
   todas las transiciones del sitio en 0,01ms cuando se pide menos
   movimiento, asi que esto se apaga solo.

   NO HAY FUNDIDO, Y ES LA CORRECCION DEL 30/09/2026 POR LA TARDE. La
   primera version acompanaba la cortinilla con un opacity de 0,3s, y el
   responsable mando una captura del cierre: durante el fundido se veia el
   video de la portada A TRAVES del panel, con los tres enlaces encima. Es
   lo que pasa siempre al fundir una capa opaca que tapa contenido -por
   definicion, mientras se funde se ven las dos cosas a la vez- y en una
   pagina cuyo fondo es un video en movimiento se nota el doble.

   La cortinilla sola no tiene ese problema: el panel es opaco de principio
   a fin y lo unico que cambia es cuanto se ve de el. Donde esta, tapa; y
   donde no, no hay nada que fundir.

   EL TIEMPO: 0,45s, con la misma curva que la cabecera
   (cubic-bezier(0.76, 0, 0.24, 1)). La cabecera usa 0,7s porque entra y
   sale sola mientras se lee; un menu responde a una pulsacion y a esa
   velocidad se siente lento.
   ========================================================================== */

.nav__menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s cubic-bezier(0.76, 0, 0.24, 1),
              display 0.45s allow-discrete;
}

.nav__menu:not([hidden]) {
  clip-path: inset(0 0 0 0);
}

@starting-style {
  .nav__menu:not([hidden]) {
    clip-path: inset(0 0 100% 0);
  }
}

/* EL SELECTOR DE IDIOMAS NO ES HIJO DEL PANEL, asi que la cortinilla no lo
   recorta: sin esto aparece de golpe en su sitio mientras el panel todavia
   se esta descubriendo, que es peor que no animar nada.

   VA CON UNA ANIMACION Y NO CON UNA TRANSICION porque este elemento pasa de
   display:none a verse, y una animacion arranca sola cuando eso ocurre sin
   necesitar @starting-style.

   El retardo de 0,25s lo deja entrar cuando la cortinilla ya ha pasado por
   donde el esta, que es el pie del menu. */
@keyframes nav-idiomas-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.nav--abierto .nav__idiomas {
  animation: nav-idiomas-entra 0.3s cubic-bezier(0.76, 0, 0.24, 1) 0.25s both;
}


/* ==========================================================================
   EL CONTENIDO EMPIEZA DEBAJO DE LA CABECERA  (30/09/2026)
   --------------------------------------------------------------------------
   Con la cabecera sin fondo se esperaba ver la fotografia a traves de ella y
   lo que se veia era blanco: no porque la cabecera tuviera fondo -no lo
   tiene- sino porque NO HABIA NADA DETRAS. La cabecera esta en el flujo y
   ocupa su banda; el contenido empezaba justo donde ella acababa, asi que lo
   que se transparentaba era el fondo de la pagina.

   SE TIRA DEL CONTENIDO HACIA ARRIBA, no se saca la cabecera del flujo.
   Sacarla (position: fixed) obligaria a compensar su alto en todas las
   paginas y a rehacer el calculo del panel del menu, que se apoya en que la
   cabecera ocupa sitio.

   VIVE EN ESTE FICHERO Y NO EN EL DE CADA PAGINA por dos motivos: lo cargan
   todas, y el numero TIENE que ser el alto de la cabecera, que se declara
   aqui mismo unas lineas mas arriba. Separados, el dia que el alto cambie
   nadie se acuerda del margen y el contenido asoma por encima o deja una
   franja.

   NO VALE EN TODAS LAS PAGINAS, Y NO ES UN OLVIDO -----------------------
   Solo en las que abren con una imagen a sangre. El responsable pidio
   "aplicalo a todas" y aplicarlo literalmente romperia la mitad del sitio:

     portada, /collections                    abren con imagen       -> si
     /about                                   abre con imagen, pero
                                              su cabecera es opaca   -> no
     /links                                   NO TIENE CABECERA      -> no
     /privacy, /legal, /cookies, /social-privacy   abren con el
                                             TITULO del documento    -> no
     las seis fichas de fragancia            abren con la banda de
                                             texto (coleccion+nombre)-> no

   En esas diez, subir el contenido 186px mete el primer renglon detras de
   la cabecera.

   Y /about se salio de la lista el 30/09/2026 por decision del
   responsable: alli la cabecera no va transparente sino en crema (ver la
   regla de body.about mas abajo), y una cabecera opaca TIENE que reservar
   su sitio o taparia la primera fotografia en vez de dejarla pasar.

   /links se queda fuera por otro motivo: esa pagina no
   monta cabecera -no incluye inc/nav.php ni carga este fichero- asi que
   subir su contenido lo subiria contra nada. Estuvo un momento en la
   lista y la comprobacion lo caso: alli querySelector('.nav') es null. Queda escrito aqui porque desde el CSS no se ve con que
   abre cada pagina, y el dia que alguien anada body.legal a esta lista el
   sintoma sera un titulo cortado que nadie relaciona con esta regla.
   ========================================================================== */

body.home main,
body.collections main {
  margin-top: -72px;
}

@media (min-width: 1200px) {
  body.home main,
  body.collections main {
    margin-top: -186px;
  }
}