/* ══════════════════════════════════════════════════════════════════════
   BICM — COLOR NAV · componente canónico compartido
   ----------------------------------------------------------------------
   Este archivo es la ÚNICA fuente del menú de colores. Todas las páginas
   (landings y subpáginas) lo cargan y usan el mismo markup y el mismo JS
   (nav.js). No dupliques estas reglas en el CSS de ninguna página.

   Markup esperado:
     <button class="mobile-menu-toggle" type="button"
             aria-label="Abrir menú" aria-expanded="false">
       <span></span><span></span>
     </button>

     <nav class="color-nav" aria-label="Menú principal">
       <div class="nav-menus">
         <div class="menu-bicm">
           <div class="sub"> …5 × a.sub-item… </div>
           <span class="base-label">BICM</span>
         </div>
         <div class="menu-archivo">
           <div class="sub"> …2 × a.sub-item… </div>
           <span class="base-label">ARCHIVO</span>
         </div>
         <a class="menu-servicios" href="…">
           <span class="base-label">SERVICIOS</span><span class="nav-arrow">…</span>
         </a>
         <a class="menu-tienda" href="…">
           <span class="base-label">TIENDA</span><span class="nav-arrow">…</span>
         </a>
       </div>
     </nav>

   Modificadores:
     .color-nav--right  → el grupo se alinea a la derecha (landings)
     .color-nav.nav-up  → los submenús se abren HACIA ARRIBA (lo pone nav.js
                          cuando la barra está en la mitad inferior del viewport)

   Los colores salen de las variables de cada página (--orange, --blue…);
   se declaran fallbacks por si alguna no las define.
   ══════════════════════════════════════════════════════════════════════ */

.color-nav {
  /* Escala propia: el nav NO depende del lienzo --u/--uh de la página. */
  --nav-h: clamp(40px, 3.125vw, 50px);
  --nav-w: clamp(172px, 14.0625vw, 270px);
  --nav-w-tienda: clamp(140px, 11.406vw, 219px);
  --nav-w-hover: clamp(200px, 16.433vw, 315px);
  --nav-w-tienda-hover: clamp(170px, 13.776vw, 265px);
  --nav-pad: clamp(10px, 0.625vw, 12px);
  --nav-label: clamp(24px, 2.083vw, 40px);
  --nav-label-sm: clamp(20px, 1.667vw, 32px);
  --nav-arrow-size: clamp(19px, 1.44vw, 28px);
  --nav-ease: cubic-bezier(0, 0, 0, 1);
  --nav-smooth: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  z-index: 2;
  display: flex;
  height: var(--nav-h);
  overflow: visible;
}

/* Landings: la barra se pega al borde superior al hacer scroll. */
.color-nav--sticky { position: sticky; top: 0; z-index: 9000; }

.color-nav--right .nav-menus { margin-left: auto; }

.nav-menus {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: visible;
}

/* ── Celdas base de la barra ───────────────────────────────────────── */
.menu-bicm,
.menu-archivo,
.menu-servicios,
.menu-tienda {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--nav-pad);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.menu-bicm,
.menu-archivo { width: var(--nav-w); overflow: visible; }

.menu-servicios {
  width: var(--nav-w);
  overflow: hidden;
  transition: width .25s var(--nav-ease);
}

.menu-tienda {
  width: var(--nav-w-tienda);
  overflow: hidden;
  transition: width .25s var(--nav-ease);
}

.menu-bicm      { background: var(--orange, rgb(250,117,22)); }
.menu-archivo   { background: var(--blue,   rgb(27,111,183)); }
.menu-servicios { background: var(--yellow, rgb(253,185,19)); }
.menu-tienda    { background: var(--green,  rgb(116,183,67)); }

.menu-servicios:hover,
.menu-servicios:focus-visible { width: var(--nav-w-hover); }
.menu-tienda:hover,
.menu-tienda:focus-visible { width: var(--nav-w-tienda-hover); }

/* ── Etiquetas ─────────────────────────────────────────────────────── */
.base-label,
.sub-item > span {
  font-family: var(--font, 'Gill Sans', 'Gill Sans MT', sans-serif);
  font-size: var(--nav-label);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: none;
}

.menu-archivo .sub-item > span { font-size: var(--nav-label-sm); }

/* ── Flecha diagonal ───────────────────────────────────────────────── */
.nav-arrow,
.sub-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-arrow-size);
  height: var(--nav-arrow-size);
  font-size: clamp(18px, 1.22vw, 24px);
  line-height: 1;
  color: #fff;
  transform: scale(0);
  opacity: 0;
  transition: transform .25s var(--nav-ease), opacity .25s var(--nav-ease);
}

.nav-arrow svg,
.sub-arrow svg { display: block; width: 100%; height: 100%; }

.menu-servicios:hover .nav-arrow,
.menu-servicios:focus-visible .nav-arrow,
.menu-tienda:hover .nav-arrow,
.menu-tienda:focus-visible .nav-arrow,
.sub-item:hover .sub-arrow,
.sub-item:focus-visible .sub-arrow {
  transform: scale(1);
  opacity: 1;
}

/* ── Submenú ───────────────────────────────────────────────────────── */
.sub {
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Barra en la mitad inferior del viewport → abre hacia ARRIBA.
   column-reverse mantiene el primer item pegado a la barra. */
.color-nav.nav-up .sub {
  top: auto;
  bottom: 100%;
  flex-direction: column-reverse;
}

.menu-bicm:hover .sub,
.menu-archivo:hover .sub,
.menu-bicm:focus-within .sub,
.menu-archivo:focus-within .sub { pointer-events: auto; }

.sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--nav-w);
  height: var(--nav-h);
  padding: 0 var(--nav-pad);
  color: #fff;                 /* ← sin esto, un <a> hereda el azul del navegador */
  text-decoration: none;       /* ← y su subrayado por defecto */
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s var(--nav-ease),
              transform .2s var(--nav-ease),
              width .25s var(--nav-ease);
}

.color-nav.nav-up .sub-item { transform: translateY(6px); }

.sub-item:hover,
.sub-item:focus-visible { width: var(--nav-w-hover); }

.menu-bicm:hover .sub-item,
.menu-archivo:hover .sub-item,
.menu-bicm:focus-within .sub-item,
.menu-archivo:focus-within .sub-item {
  opacity: 1;
  transform: translateY(0);
}

/* Escalonado al entrar */
.menu-bicm:hover .sub-item:nth-child(2),
.menu-bicm:focus-within .sub-item:nth-child(2),
.menu-archivo:hover .sub-item:nth-child(2),
.menu-archivo:focus-within .sub-item:nth-child(2) { transition-delay: 35ms; }
.menu-bicm:hover .sub-item:nth-child(3),
.menu-bicm:focus-within .sub-item:nth-child(3) { transition-delay: 60ms; }
.menu-bicm:hover .sub-item:nth-child(4),
.menu-bicm:focus-within .sub-item:nth-child(4) { transition-delay: 85ms; }
.menu-bicm:hover .sub-item:nth-child(5),
.menu-bicm:focus-within .sub-item:nth-child(5) { transition-delay: 110ms; }

/* ── Botón burger — esquina superior derecha, respeta el notch ─────── */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 10001;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #000;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  transition: transform .3s var(--nav-smooth), opacity .2s ease;
}

body.menu-open .mobile-menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .mobile-menu-toggle span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════
   MÓVIL / TABLET — Figma "LANDING - FINAL" frame 8 (lienzo 340px)
   ------------------------------------------------------------------
   Ya NO hay burger: la barra de colores vive dentro de la página como
   una TIRA HORIZONTAL de celdas de 227×30 que se desliza y da la vuelta
   infinitamente (nav.js clona el juego de celdas y envuelve el scroll).

   La tira es sticky pero se detiene a 75px del borde superior para no
   quedar debajo del notch. Los desplegables (BICM / ARCHIVO) se abren
   por TAP: como el contenedor tiene overflow-x:auto (que recorta en
   vertical), el submenú se saca con position:fixed y nav.js le pone el
   `top` real leyendo el borde inferior de la barra.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* Columna de contenido del diseño (300px) centrada; los carruseles
     sangran a pantalla completa pero arrancan alineados a ella. */
  :root {
    --m-col: 300px;
    --m-pad: max(20px, calc((100vw - var(--m-col)) / 2));
    --m-nav-h: 30px;
    /* 25px del borde superior. El max() con el inset sólo entra en juego si la
       página llegara a usar viewport-fit=cover (hoy no): ahí el notch sí
       reporta su alto y la barra se baja lo necesario para no quedar debajo. */
    --m-nav-top: max(25px, calc(env(safe-area-inset-top, 0px) + 8px));
    /* Dónde se ATORA la barra al hacer scroll: 15px más arriba que su
       posición de reposo. Con position:sticky el elemento conserva su lugar
       en el flujo (no se mueve al cargar); este valor solo entra en juego
       cuando el scroll lo empujaría más arriba, y ahí se clava. */
    --m-nav-stuck: max(10px, calc(var(--m-nav-top) - 15px));
    /* Ancho de celda de la tira: 227px del diseño + 25%. */
    --m-nav-cell: 284px;
  }

  /* El burger desaparece: la barra ya es parte del flujo de la página */
  .mobile-menu-toggle { display: none !important; }
  body.menu-open { overflow: visible; }

  .color-nav,
  .color-nav--sticky {
    position: sticky;
    top: var(--m-nav-stuck);
    inset-inline: auto;
    z-index: 9000;
    display: block;
    width: 100%;
    height: var(--m-nav-h);
    overflow: visible;
    background: none;
    padding: 0;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  .color-nav--right .nav-menus { margin-left: 0; }

  /* La tira deslizable */
  .nav-menus {
    display: flex;
    flex-direction: row;
    height: var(--m-nav-h);
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: var(--m-pad);
  }
  .nav-menus::-webkit-scrollbar { display: none; }

  /* Celdas de ancho fijo: en pantallas grandes se ven MÁS celdas,
     no celdas más anchas. */
  .menu-bicm,
  .menu-archivo,
  .menu-servicios,
  .menu-tienda,
  .menu-servicios:hover,
  .menu-tienda:hover,
  .menu-servicios:focus-visible,
  .menu-tienda:focus-visible {
    flex: 0 0 var(--m-nav-cell);
    width: var(--m-nav-cell);
    height: var(--m-nav-h);
    min-height: 0;
    padding: 0 12px 0 24px;
    overflow: visible;
    transition: none;
  }

  .base-label { font-size: 24px; line-height: 1; }

  /* Flechas: en la tira estorban (no hay hover en táctil) */
  .nav-arrow { display: none; }

  /* ── Desplegable por tap ──────────────────────────────────────────
     position:fixed para escapar del recorte de overflow-x del scroller.
     nav.js escribe --sub-top con el borde inferior real de la barra. */
  .menu-bicm .sub,
  .menu-archivo .sub,
  .color-nav.nav-up .sub {
    position: fixed;
    top: var(--sub-top, calc(var(--m-nav-top) + var(--m-nav-h)));
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    flex-direction: column;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /* visibility con delay (no interpolada): al ABRIR cambia en el acto, así
       el menú nunca depende de que la transición llegue a su fin. */
    transition: opacity .18s var(--nav-ease), transform .18s var(--nav-ease), visibility 0s .18s;
    z-index: 9500;
  }

  /* El hover de escritorio no debe abrir nada en táctil */
  .menu-bicm:hover .sub,
  .menu-archivo:hover .sub,
  .menu-bicm:focus-within .sub,
  .menu-archivo:focus-within .sub { pointer-events: none; }

  .menu-bicm.is-open .sub,
  .menu-archivo.is-open .sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .18s var(--nav-ease), transform .18s var(--nav-ease), visibility 0s;
  }

  .sub-item,
  .sub-item:hover,
  .sub-item:focus-visible,
  .color-nav.nav-up .sub-item,
  .menu-bicm:hover .sub-item,
  .menu-archivo:hover .sub-item,
  .menu-bicm:focus-within .sub-item,
  .menu-archivo:focus-within .sub-item {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 0 20px 0 24px;
    opacity: 1;
    transform: none;
    transition-delay: 0ms !important;
  }

  .base-label,
  .sub-item > span { letter-spacing: -.04em; }
  .sub-item > span { font-size: 20px; }
  .menu-archivo .sub-item > span { font-size: 20px; }
  .sub-arrow { transform: scale(1); opacity: 1; width: 18px; height: 18px; }
}

/* Pantallas por debajo del lienzo del diseño (<340px): la celda se encoge
   lo justo para que siga asomando la siguiente y se lea como carrusel. */
@media (max-width: 330px) {
  .menu-bicm,
  .menu-archivo,
  .menu-servicios,
  .menu-tienda,
  .menu-servicios:hover,
  .menu-tienda:hover { flex-basis: 200px; width: 200px; padding-left: 20px; }
  .base-label { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .color-nav,
  .sub-item,
  .nav-arrow,
  .sub-arrow,
  .menu-servicios,
  .menu-tienda,
  .mobile-menu-toggle span { transition: none !important; }
}