/* ==========================================================================
   New Concept Bar — layout.css  (header, navigation, footer)
   ========================================================================== */

.ncb-main { display: block; }
.ncb-main:focus { outline: none; } /* programmatic focus target for the skip link */
/* Same idea for in-page anchors: theme.js gives the destination tabindex="-1"
   and focuses it, which would otherwise ring a whole <section> in gold. */
[tabindex="-1"]:focus { outline: none; }

/* --- Header --------------------------------------------------------------- */
.ncb-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.ncb-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 96px; /* keep in sync with --ncb-header-h in base.css */
}
.ncb-header.is-scrolled {
  background: color-mix(in srgb, var(--ncb-black) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--ncb-line);
}
/* Shrink-on-scroll only on the front page, where the header is position:fixed
   (out of flow). On sticky (interior) pages a height change would resize the
   document and create a scroll feedback loop — the "menu jitter" bug. */
.ncb-front .ncb-header.is-scrolled .ncb-header__inner { min-height: 80px; }
body:not(.ncb-front) .ncb-header {
  position: sticky;
  background: color-mix(in srgb, var(--ncb-black) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--ncb-line);
}

/* --- WordPress admin bar --------------------------------------------------
   The toolbar is a fixed strip at top:0 (32px desktop, 46px at <=782px) that
   would sit over our header (fixed on the front page, sticky elsewhere) since
   both anchor to the top. Push the header down by the exact toolbar height.
   `.admin-bar` is only present for logged-in users, so visitors are untouched. */
.admin-bar { --ncb-adminbar-h: 32px; }
.admin-bar .ncb-header { top: var(--ncb-adminbar-h); }
@media screen and (max-width: 782px) {
  .admin-bar { --ncb-adminbar-h: 46px; }
}

/* --- Logo ----------------------------------------------------------------- */
/* Horizontal lockup (1232 x 442). Height drives the size; width follows the
   intrinsic ratio so the wordmark never squashes. */
/* La altura se expresa con clamp() en vez de con breakpoints. Antes, la regla
   del estado "is-scrolled" (0,4,0) le ganaba en especificidad a las media
   queries de móvil (0,1,0) — las media queries no suman especificidad — y el
   logo CRECÍA al hacer scroll en el teléfono hasta invadir la zona de acciones.
   Con clamp() el ancho es siempre ~2,8 veces la altura, es decir un tercio de
   la pantalla como mucho, y el estado scrolled sólo cambia el valor de una
   variable que ya viene acotada por el viewport. */
.ncb-logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--ncb-text); --ncb-logo-h: clamp(40px, 12vw, 70px); min-width: 0; }
.ncb-logo__full { display: block; height: var(--ncb-logo-h); flex: none; transition: height var(--dur) var(--ease); }
.ncb-logo__full svg { height: 100%; width: auto; display: block; }
.ncb-logo__img { height: var(--ncb-logo-h); width: auto; flex: none; }
.ncb-logo__word-sub { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ncb-muted); }
.ncb-header__logo { --ncb-logo-h-scrolled: clamp(34px, 10vw, 58px); }
.ncb-front .ncb-header.is-scrolled .ncb-header__logo { --ncb-logo-h: var(--ncb-logo-h-scrolled); }
.ncb-footer__logo { --ncb-logo-h: clamp(64px, 18vw, 96px); }
/* Franja densa: a partir de 900px ya se muestran el menú, las redes y el botón
   "Hablemos" a la vez, pero todavía no sobra ancho. Es también lo que ve un
   móvil con "Solicitar versión de escritorio" activado (~980px). */
@media (min-width: 900px) and (max-width: 1200px) {
  .ncb-header__logo { --ncb-logo-h: clamp(40px, 5.5vw, 58px); --ncb-logo-h-scrolled: clamp(34px, 4.8vw, 50px); }
}

/* --- Nav ------------------------------------------------------------------ */
.ncb-nav { display: none; }
.ncb-nav__list { display: flex; align-items: center; gap: .35rem; }
.ncb-nav__list a {
  position: relative; display: inline-block; padding: .55rem .9rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ncb-muted); border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease);
}
.ncb-nav__list a::after {
  content: ""; position: absolute; left: 50%; bottom: .3rem; width: 0; height: 1.5px;
  background: var(--ncb-gold-grad); transform: translateX(-50%);
  transition: width var(--dur) var(--ease);
}
.ncb-nav__list a:hover, .ncb-nav__list .current-menu-item > a { color: var(--ncb-text); }
.ncb-nav__list a:hover::after, .ncb-nav__list .current-menu-item > a::after { width: calc(100% - 1.8rem); }

.ncb-header__actions { display: flex; align-items: center; gap: .6rem; }
.ncb-header__cta { display: none; }
.ncb-header__cta .ncb-icon { width: 18px; height: 18px; }
.ncb-header__social { display: none; align-items: center; gap: .1rem; margin-right: .2rem; }
.ncb-header__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ncb-muted); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.ncb-header__social a:hover { color: var(--ncb-gold-3); background: color-mix(in srgb, var(--ncb-gold-2) 12%, transparent); }
.ncb-header__social .ncb-icon { width: 19px; height: 19px; }

.ncb-mobile__social { display: flex; gap: .6rem; padding: 0 var(--gutter) 1.8rem; }
.ncb-mobile__social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ncb-line-solid); color: var(--ncb-muted); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.ncb-mobile__social a:hover { color: var(--ncb-gold-3); border-color: var(--ncb-gold-2); }
.ncb-mobile__social .ncb-icon { width: 20px; height: 20px; }

/* --- Burger --------------------------------------------------------------- */
.ncb-burger {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--ncb-line-solid); border-radius: var(--radius-sm);
  color: var(--ncb-gold-3); background: color-mix(in srgb, var(--ncb-surface) 60%, transparent);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ncb-burger:hover { border-color: var(--ncb-gold-2); }
.ncb-burger .ncb-icon { grid-area: 1/1; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ncb-burger__close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.ncb-burger[aria-expanded="true"] .ncb-burger__open { opacity: 0; transform: rotate(90deg) scale(.6); }
.ncb-burger[aria-expanded="true"] .ncb-burger__close { opacity: 1; transform: none; }

/* --- Mobile nav ----------------------------------------------------------- */
.ncb-mobile {
  /* Cap to the space actually left below the header (and the admin toolbar, which
     pushes the header down) and scroll internally — otherwise the last links sit
     past the fold and, now that the scroll lock really works, are unreachable. */
  max-height: calc(100svh - var(--ncb-header-h) - var(--ncb-adminbar-h, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--ncb-black) 96%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ncb-line);
}
/* `hidden` keeps the panel out of the a11y tree + tab order when closed;
   the entrance animation runs on open. */
.ncb-mobile:not([hidden]) .ncb-mobile__list { animation: ncb-menu-in var(--dur) var(--ease); }
@keyframes ncb-menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ncb-mobile:not([hidden]) .ncb-mobile__list { animation: none; } }
.ncb-mobile__list { display: flex; flex-direction: column; padding: 1rem var(--gutter) 1.6rem; }
.ncb-mobile__list a {
  display: block; padding: .95rem .4rem; font-family: var(--font-display); font-size: 1.4rem;
  color: var(--ncb-text); border-bottom: 1px solid var(--ncb-line);
}
.ncb-mobile__list a:hover { color: var(--ncb-gold-3); padding-left: 1rem; }
.ncb-mobile__list a { transition: padding var(--dur) var(--ease), color var(--dur-fast) var(--ease); }

/* --- Footer --------------------------------------------------------------- */
.ncb-footer { position: relative; padding-top: clamp(3.5rem, 2rem + 6vw, 6rem); padding-bottom: 2rem; overflow: hidden; background: linear-gradient(180deg, transparent 0%, rgba(9,9,12,.55) 45%, rgba(9,9,12,.85) 100%); border-top: 1px solid var(--ncb-line); }
.ncb-footer__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 78% 90% at 50% -6%, rgba(201,150,47,.13), transparent 62%); }
.ncb-footer__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 2.5rem 2rem; padding-bottom: 3rem; }
.ncb-footer__brand { max-width: 360px; }
.ncb-footer__logo { margin-bottom: 1.1rem; }
.ncb-footer__tagline { color: var(--ncb-muted); font-size: .95rem; line-height: 1.7; }
.ncb-footer__title { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ncb-gold); margin-bottom: 1.1rem; }
.ncb-footer__list { display: flex; flex-direction: column; gap: .7rem; }
.ncb-footer__list a, .ncb-footer__list span { color: var(--ncb-muted); font-size: .92rem; transition: color var(--dur-fast) var(--ease); display: inline-flex; align-items: center; gap: .55rem; }
.ncb-footer__list a:hover { color: var(--ncb-gold-3); }
.ncb-footer__list--contact .ncb-icon { width: 17px; height: 17px; color: var(--ncb-gold); flex: none; }
.ncb-footer__list--contact .is-static { color: var(--ncb-muted); }

.ncb-social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.ncb-social__link {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--ncb-line-solid); color: var(--ncb-muted);
  transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ncb-social__link .ncb-icon { width: 19px; height: 19px; }
.ncb-social__link:hover { color: var(--ncb-invert); background: var(--ncb-gold-grad); border-color: transparent; transform: translateY(-3px); }

.ncb-footer__bottom { position: relative; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; padding-top: 1.6rem; border-top: 1px solid var(--ncb-line); }
.ncb-footer__copy, .ncb-footer__credit { font-size: .82rem; color: var(--ncb-dim); }
.ncb-footer__credit a { color: var(--ncb-gold); }
.ncb-footer__credit a:hover { color: var(--ncb-gold-3); }

/* --- Breakpoints ---------------------------------------------------------- */
@media (min-width: 600px) {
  .ncb-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .ncb-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .ncb-nav { display: block; }
  .ncb-burger { display: none; }
  .ncb-header__cta { display: inline-flex; }
  .ncb-header__social { display: flex; }
  .ncb-mobile { display: none; }
  .ncb-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .ncb-footer__brand { grid-column: auto; }
}