/* ==========================================================================
   bb2026 — CABECERA + MENU OVERLAY
   Barra fija minimalista (wordmark + hamburguesa) y overlay que cubre
   solo la mitad derecha en escritorio y el 100% en movil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   JERARQUIA DE CAPAS (z-index) — NO ROMPER
   Cualquier elemento con position + z-index crea su propio contexto de
   apilamiento: los z-index de sus hijos solo compiten DENTRO de el. Por eso
   la cabecera tiene que ir por encima del overlay como bloque completo; si
   la cabecera queda por debajo, el boton de cerrar es intocable (en movil,
   sin Escape y sin zona "fuera", el menu se queda bloqueado para siempre).

     0–99     contenido de pagina (hero, paneles, .bb-tag, etc.)
     290      .bb-nav-scrim  (zona clicable para cerrar)
     300      .bb-nav        (overlay del menu; tapa el contenido)
     400      .bb-bar        (cabecera: wordmark + boton cerrar SIEMPRE arriba)
     500+     reservado para futuros lightbox / modales, que deben ir por
              encima de la cabecera (usar 500 o mas, nunca 400 o menos)
     999      .bb-skip-link  (accesibilidad, siempre lo primero al tabular)
   -------------------------------------------------------------------------- */
.bb-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 400: por encima de .bb-nav (300) para que el boton de cerrar sea
     visible y clicable con el menu abierto. Ver jerarquia de capas arriba. */
  z-index: 400;
  height: var(--bb-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--bb-gutter);
  mix-blend-mode: normal;
  transition: background 0.4s var(--bb-ease), box-shadow 0.4s var(--bb-ease);
}

/* Al hacer scroll, la barra gana un fondo papel para mantener legibilidad */
.bb-bar.is-stuck {
  background: var(--bb-paper);
  box-shadow: 0 1px 0 var(--bb-ink-soft);
}

/* MENU ABIERTO -> la barra se integra con el overlay SIN pintar su propio
   verde alli donde el overlay ya esta detras de ella.
   El overlay (.bb-nav, z-index 300) es de altura completa y la barra va por
   encima (z-index 400): donde la barra es transparente se ve el verde del
   panel con su color EXACTO. Asi la costura desaparece por construccion,
   sin tocar la translucidez del panel (--bb-overlay sigue al 95%, rasgo
   deliberado del diseno: se intuye la fotografia detras).
   Antes la barra usaba --bb-accent SOLIDO en todo su ancho y quedaba ~10
   puntos por canal mas oscura que el panel compuesto sobre papel: se veia
   una banda en la franja superior.
   Por debajo de 1024px el panel ocupa el 100% del ancho, luego la barra no
   necesita fondo propio en ningun punto.
   Sin borde ni sombra, y el logo en su version CLARA a cualquier ancho.
   Gana a .is-stuck por especificidad (clase en body + clase en la barra)
   y por orden; no hace falta !important. */
body.bb-nav-open .bb-bar,
body.bb-nav-open .bb-bar.is-stuck {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

/* A partir de 1024px el panel solo cubre la mitad derecha (.bb-nav
   { width: 50vw }), asi que la barra si necesita verde propio en la mitad
   IZQUIERDA para que el logotipo sea legible. Corte duro al 50%.
   DEPENDENCIA: el 50% debe coincidir con el ancho de .bb-nav en este mismo
   breakpoint (verificado: 50vw, sin cambios tras pasar el menu a 10 items:
   el ajuste de 10 items se resolvio por ALTURA, no ensanchando el panel;
   ver "PRESUPUESTO DE ALTURA" en .bb-nav__list a). Si ese ancho cambia,
   iguala aqui el porcentaje; al alinear el corte con el borde izquierdo del
   panel la transicion lee como continuidad con el, no como un defecto. */
@media (min-width: 1024px) {
  body.bb-nav-open .bb-bar,
  body.bb-nav-open .bb-bar.is-stuck {
    background: linear-gradient(to right, var(--bb-accent) 0 50%, transparent 50% 100%);
  }
}

/* Sobre hero oscuro, texto claro hasta que la barra se fija */
.bb-bar--over-dark:not(.is-stuck) .bb-burger { color: var(--bb-paper); }

/* --------------------------------------------------------------------------
   LOGOTIPO DE MARCA
   Sustituye al antiguo wordmark de texto. Se imprimen las DOS versiones
   (tinta y clara, ver bb_logo_pair() en inc/helpers.php) y aqui elegimos
   cual se ve segun el fondo. La tinta siempre esta en el flujo: define la
   caja y, al no ocultarse con display:none, el enlace conserva su nombre
   accesible en cualquier estado.
   -------------------------------------------------------------------------- */
.bb-bar__logo {
  position: relative;
  display: block;
  line-height: 0;
  /* Movil: 34px de alto (rango pedido 32-38). */
  height: 34px;
  /* Reserva de caja antes de que carguen los PNG: evita salto de layout. */
  aspect-ratio: 818 / 144;
}
.bb-bar__logo-img {
  display: block;
  width: auto;
  height: 100%;
  transition: opacity 0.4s var(--bb-ease);
}
/* La clara se apila encima de la tinta, sin sacarla del flujo. */
.bb-bar__logo-img--claro {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
}
.bb-bar__logo-img--tinta { opacity: 1; }

/* Fondos oscuros donde toca la version CLARA:
   hero de portada mientras la barra no esta fijada. */
.bb-bar--over-dark:not(.is-stuck) .bb-bar__logo-img--claro { opacity: 1; }
.bb-bar--over-dark:not(.is-stuck) .bb-bar__logo-img--tinta { opacity: 0; }

/* Con el menu abierto la barra pasa a verde en TODO su ancho (ver el bloque
   body.bb-nav-open .bb-bar, mas arriba), por lo que el logo esta siempre
   sobre verde: la version CLARA se aplica a cualquier ancho.
   Antes esta regla estaba acotada a max-width: 1023.98px porque en
   escritorio el overlay solo cubre la mitad derecha y el logo quedaba blanco
   sobre papel; con la barra en verde esa dependencia del breakpoint ya no
   existe. Contraste del logo claro sobre el acento: ~8,9:1. */
body.bb-nav-open .bb-bar__logo-img--claro { opacity: 1; }
body.bb-nav-open .bb-bar__logo-img--tinta { opacity: 0; }

@media (min-width: 768px) {
  /* Escritorio: 46px de alto -> ~261px de ancho (rango pedido 42-52). */
  .bb-bar__logo { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-bar__logo-img { transition: none; }
}

/* --- Boton hamburguesa --- */
.bb-burger {
  position: relative;
  /* Local al contexto de .bb-bar (400). No sube el boton por encima del
     overlay por si mismo: eso lo hace el z-index de la cabecera. */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--bb-s2);
  color: var(--bb-ink);
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: 0.33em;
}
.bb-burger__label { display: none; }
@media (min-width: 600px) { .bb-burger__label { display: inline; } }

.bb-burger__lines {
  position: relative;
  width: 30px;
  height: 12px;
  flex: 0 0 auto;
}
.bb-burger__lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--bb-ease), opacity 0.25s var(--bb-ease);
}
.bb-burger__lines i:nth-child(1) { top: 0; }
.bb-burger__lines i:nth-child(2) { bottom: 0; width: 70%; }

/* Estado abierto: se convierte en X */
.bb-burger[aria-expanded="true"] { color: var(--bb-paper); }
.bb-burger[aria-expanded="true"] .bb-burger__lines i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.bb-burger[aria-expanded="true"] .bb-burger__lines i:nth-child(2) { bottom: 5px; width: 100%; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   OVERLAY
   -------------------------------------------------------------------------- */
.bb-nav {
  position: fixed;
  top: 0; bottom: 0;
  right: 0;
  width: 100%;
  z-index: 300;
  background: var(--bb-overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--bb-bar-h) + var(--bb-s4)) var(--bb-gutter) var(--bb-s4);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Cerrado por defecto */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.7s var(--bb-ease), visibility 0s linear 0.7s;
}

@media (min-width: 1024px) {
  .bb-nav { width: 50vw; }
}

.bb-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.7s var(--bb-ease), visibility 0s linear 0s;
}

/* Zona clicable para cerrar (mitad izquierda en escritorio) */
.bb-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(28, 27, 25, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--bb-ease), visibility 0s linear 0.6s;
}
.bb-nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--bb-ease), visibility 0s linear 0s;
}

/* --- Micro-etiqueta sobre los items --- */
/* El hueco baja de s4 (40px) a s3 (24px): con 10 items el panel es un
   presupuesto de ALTURA y este espacio muerto competia con el tamano de
   los items. Ver "PRESUPUESTO DE ALTURA" mas abajo. */
.bb-nav__kicker {
  color: rgba(247, 245, 242, 0.62);
  margin-bottom: var(--bb-s3);
}

/* --- Items --- */
.bb-nav__list {
  list-style: none;
  /* Hueco hasta el pie: s4 (40px) en vez de s5 (64px). Mismo motivo que en
     .bb-nav__kicker: 24px devueltos al presupuesto de altura. Con 40px el
     pie (redes + telefono) sigue leyendose como bloque separado. */
  margin: 0 0 var(--bb-s4);
  padding: 0;
}
.bb-nav__list li { overflow: hidden; }
.bb-nav__list li + li { margin-top: 8px; }

.bb-nav__list a {
  display: block;
  padding-block: 2px;
  font-family: var(--bb-font-display);
  /* Light (300): coherente con el logotipo de marca, que combina
     "beatriz" en light con "baqueiro" en bold. La cara 300 esta
     autoalojada en fonts.css — no usar sin ella (el navegador la
     sintetizaria adelgazando la 500 y se veria sucia). */
  font-weight: 300;
  /* Compensacion por aligerar el peso: subimos la pendiente fluida de
     4.5vw a 5vw (~+11%) para que el light conserve presencia. El techo
     de escritorio se mantiene para no reducir nada en pantallas anchas.

     PRESUPUESTO DE ALTURA - por que hay un termino vh
     Con 9 items bastaba medir el ANCHO. Al pasar a 10 el panel se quedo
     corto de ALTO: en pantallas anchas pero bajas (1024x800, 1366x768) el
     5vw pedia 51,2px, los labels largos partian en dos lineas y el panel
     entraba en scroll (CONTACTO cortado, micro-etiqueta fuera de vista).
     El panel tiene un peso fijo de 382,6px a >=768 (padding 168 + kicker
     52,6 + huecos de lista 122 + pie 40); con los dos recortes de arriba
     baja a 342,6px. Los 10 items cuestan 11,6 x tamano
     (10 x (4px de padding + 1,16 de line-height) + 9 x 2px de separacion).
     Techo real por altura = (alto - 342,6) / 11,6:
       768px -> 36,7   800px -> 39,4   950px -> 52,4   1080px -> 63,6
     De ahi el 4.4vh: da 33,8 / 35,2 / 41,8 / 47,5 respectivamente, con
     ~33px de holgura en el peor caso (1024x768). min() coge el limite que
     antes se agote, ancho o alto; el minimo de 26px y el techo de 52px no
     cambian, asi que en movil el tamano es el de hoy. */
  font-size: clamp(1.25rem, min(4.1vw, 2.6vh), 2.6875rem);
  line-height: 1.16;
  /* Un item NUNCA parte en dos lineas: partirlo es lo que disparaba la
     altura de la lista. No hace falta ensanchar el panel para lograrlo: el
     label mas ancho ("Comuniones") mide 7,07px por cada px de tamano, o
     sea 249px a 35,2px de fuente, contra los 432px utiles del panel a
     1024px de ancho (50vw menos los dos margenes). El panel sigue en 50vw
     en toda la banda de escritorio -> el corte del degradado de la barra
     se queda en 50%, sin cambios (ver DEPENDENCIA arriba). */
  white-space: nowrap;
  text-transform: uppercase;
  /* El light admite mas aire entre letras que el bold. */
  letter-spacing: 0.06em;
  color: var(--bb-paper);
  /* Estado inicial del stagger */
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.7s var(--bb-ease), opacity 0.7s var(--bb-ease), color 0.3s var(--bb-ease);
}
.bb-nav.is-open .bb-nav__list a { transform: translateY(0); opacity: 1; }
.bb-nav__list a:hover, .bb-nav__list a:focus-visible { color: rgba(247, 245, 242, 0.55); }

/* Item activo */
.bb-nav__list .current-menu-item > a,
.bb-nav__list .current_page_item > a { color: rgba(247, 245, 242, 0.55); }

/* Stagger: retardo progresivo (hasta 12 items) */
.bb-nav.is-open .bb-nav__list li:nth-child(1) a { transition-delay: 0.14s; }
.bb-nav.is-open .bb-nav__list li:nth-child(2) a { transition-delay: 0.19s; }
.bb-nav.is-open .bb-nav__list li:nth-child(3) a { transition-delay: 0.24s; }
.bb-nav.is-open .bb-nav__list li:nth-child(4) a { transition-delay: 0.29s; }
.bb-nav.is-open .bb-nav__list li:nth-child(5) a { transition-delay: 0.34s; }
.bb-nav.is-open .bb-nav__list li:nth-child(6) a { transition-delay: 0.39s; }
.bb-nav.is-open .bb-nav__list li:nth-child(7) a { transition-delay: 0.44s; }
.bb-nav.is-open .bb-nav__list li:nth-child(8) a { transition-delay: 0.49s; }
.bb-nav.is-open .bb-nav__list li:nth-child(9) a { transition-delay: 0.54s; }
.bb-nav.is-open .bb-nav__list li:nth-child(10) a { transition-delay: 0.59s; }
.bb-nav.is-open .bb-nav__list li:nth-child(11) a { transition-delay: 0.64s; }
.bb-nav.is-open .bb-nav__list li:nth-child(12) a { transition-delay: 0.69s; }

/* --- Pie del overlay: redes + contacto --- */
.bb-nav__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bb-s3);
  color: var(--bb-paper);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--bb-ease) 0.6s, transform 0.6s var(--bb-ease) 0.6s;
}
.bb-nav.is-open .bb-nav__foot { opacity: 1; transform: none; }
.bb-nav__foot a { color: var(--bb-paper); }
.bb-nav__tel {
  font-family: var(--bb-font-display);
  font-weight: 500;
  /* 11px (antes 9px): a 9px el numero era casi inservible como dato de
     contacto. El tracking sigue en 0.28em, la MISMA proporcion relativa
     (2.52px a 9px -> 3.08px a 11px), asi no se dispara el interletraje. */
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* Sin motion: sin transiciones ni desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .bb-nav, .bb-nav__list a, .bb-nav__foot, .bb-nav-scrim { transition: none !important; }
  .bb-nav__list a { transform: none !important; opacity: 1 !important; }
  .bb-nav__foot { transform: none !important; opacity: 1 !important; }
}