/* ══════════════════════════════════════════════════════════════════════
   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 — el menú de colores se vuelve panel a pantalla completa
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .mobile-menu-toggle { display: block; }

  body.menu-open { overflow: hidden; }

  .color-nav {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: block;
    height: auto;
    padding:
      calc(env(safe-area-inset-top, 0px) + 72px)
      calc(env(safe-area-inset-right, 0px) + 16px)
      calc(env(safe-area-inset-bottom, 0px) + 24px)
      calc(env(safe-area-inset-left, 0px) + 16px);
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .38s var(--nav-smooth), opacity .22s ease;
  }

  body.menu-open .color-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

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

  .nav-menus {
    display: grid;
    gap: 6px;
    height: auto;
  }

  /* Las celdas pasan a ancho completo y altura táctil */
  .menu-bicm,
  .menu-archivo,
  .menu-servicios,
  .menu-tienda,
  .menu-servicios:hover,
  .menu-tienda:hover {
    width: 100%;
    height: auto;
    min-height: 62px;
    padding: 0 18px;
  }

  .menu-bicm,
  .menu-archivo { flex-direction: column; align-items: stretch; padding: 0; }

  .menu-bicm > .base-label,
  .menu-archivo > .base-label {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 0 18px;
  }

  .base-label,
  .sub-item > span { font-size: clamp(30px, 8.5vw, 46px); }
  .menu-archivo .sub-item > span { font-size: clamp(26px, 7vw, 38px); }

  /* Submenús siempre desplegados en el panel */
  .sub,
  .color-nav.nav-up .sub {
    position: static;
    top: auto;
    bottom: auto;
    flex-direction: column;
    pointer-events: auto;
  }

  .sub-item,
  .sub-item:hover,
  .sub-item:focus-visible,
  .color-nav.nav-up .sub-item {
    width: 100%;
    height: auto;
    min-height: 54px;
    padding: 0 18px 0 32px;
    opacity: 1;
    transform: none;
    transition-delay: 0ms !important;
  }

  .nav-arrow,
  .sub-arrow { transform: scale(1); opacity: 1; }
}

@media (max-width: 420px) {
  .mobile-menu-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
    width: 44px;
    height: 44px;
  }

  .color-nav { padding-top: calc(env(safe-area-inset-top, 0px) + 62px); }

  .menu-bicm,
  .menu-archivo,
  .menu-servicios,
  .menu-tienda,
  .menu-servicios:hover,
  .menu-tienda:hover { min-height: 54px; padding: 0 14px; }

  .menu-bicm > .base-label,
  .menu-archivo > .base-label { min-height: 54px; padding: 0 14px; }

  .base-label,
  .sub-item > span { font-size: clamp(26px, 8vw, 34px); }
  .menu-archivo .sub-item > span { font-size: clamp(20px, 6.4vw, 28px); }

  .sub-item,
  .sub-item:hover,
  .sub-item:focus-visible,
  .color-nav.nav-up .sub-item { min-height: 48px; padding: 0 14px 0 26px; }

  .nav-arrow,
  .sub-arrow { width: 18px; height: 18px; }
}

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