/* Cabecera común y megamenú de landings. */

.skip { position: absolute; left: var(--space-4); top: -4rem; z-index: 1100; background: var(--color-white); color: var(--color-navy); padding: .6rem 1rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; transition: top .15s; }
.skip:focus { top: var(--space-3); }
[id] { scroll-margin-top: 84px; }

/* Con ScrollSmoother activo (clase puesta por smooth.js) la cabecera sale del flujo y el contenido deja su hueco. */
.smooth-on .site-header { position: fixed; top: 0; left: 0; right: 0; }
.smooth-on #smooth-content { padding-top: var(--header-h, 77px); }
.site-header { container: hdr / inline-size; position: sticky; top: 0; z-index: 900; background: var(--bg-dark); color: var(--fg-on-dark); border-bottom: 1px solid var(--line-on-dark); }
.site-header__bar { display: flex; align-items: center; gap: var(--space-5); min-height: 76px; padding-block: var(--space-3); }
.site-header__logo { display: block; line-height: 0; flex: none; }
.site-header__logo img { width: 56px; height: 56px; display: block; }
.site-header__brand { font-size: var(--fs-label); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .72); text-decoration: none; }
a.site-header__brand:hover { color: var(--color-teal); }

/* ---------- Acciones de la cabecera ---------- */
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.site-header a.btn { color: var(--color-navy); }
.site-header a.btn:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-navy); }

.menu-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; border-radius: var(--radius); color: var(--fg-on-dark); cursor: pointer; transition: color .15s, background .15s; }
.menu-btn:hover { background: rgba(255, 255, 255, .1); color: var(--color-teal); }
.menu-btn[aria-expanded="true"] { background: var(--color-white); color: var(--color-navy); }
.menu-btn svg { grid-area: 1 / 1; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-btn__close { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__open { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__close { display: block; }

/* ---------- Menú ---------- */
/* Pantalla ancha: enlaces en la propia barra. Pantalla estrecha: icono + desplegable sencillo (menu.js). */
.nav-inline { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); }
.nav-list a { display: inline-block; padding: .5rem 0; border-bottom: 2px solid transparent; color: var(--fg-on-dark); font-size: var(--fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.nav-list a:hover, .nav-list a:focus-visible { border-bottom-color: var(--color-teal); color: var(--color-white); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-dark); border-top: 1px solid var(--line-on-dark); box-shadow: 0 24px 48px rgba(0, 0, 0, .35); max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain; }
.mega[hidden] { display: none; }
.mega__links { list-style: none; margin: 0; padding-block: var(--space-2) var(--space-4); }
.mega__links a { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--line-on-dark); color: var(--fg-on-dark); font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.mega__links li:last-child a { border-bottom: 0; }
.mega__links a:hover, .mega__links a:focus-visible { color: var(--color-teal); }

@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes megaOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: no-preference) {
  .mega:not([hidden]) { animation: megaIn .22s ease-out both; }
  .mega.is-closing:not([hidden]) { animation: megaOut .22s ease-in both; }
}

/* Con el menú abierto la página no se desplaza (menu.js también pausa el scroll suavizado) */
html { scrollbar-gutter: stable; } /* reserva el hueco de la barra: al bloquear el scroll la página no salta */
html.menu-open { overflow: hidden; }
/* Adaptación según el ancho de la cabecera (container query), no según un salto fijo de pantalla */
@container hdr (min-width: 68rem) {
  .nav-inline { display: block; margin-left: var(--space-3); }
  .menu-btn, .mega { display: none !important; }
}
.site-header__bar { gap: clamp(.75rem, 2vw, 1.5rem); }
.site-header__actions { gap: clamp(.5rem, 1.5vw, .75rem); }
.site-header__cta { padding: clamp(.75rem, .6rem + .6vw, .9375rem) clamp(.875rem, .3rem + 2.4vw, 2.125rem); white-space: nowrap; }
.user-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); color: var(--fg-on-dark); text-decoration: none; }
.user-btn:hover { background: rgba(255, 255, 255, .1); color: var(--color-teal); }
.user-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Members Call: Join the meeting y Add to calendar en la cabecera fija ---------- */
.hdr-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--radius); color: var(--fg-on-dark); font-size: var(--fs-small); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.hdr-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hdr-btn:hover, .hdr-btn:focus-visible { background: var(--color-white); border-color: var(--color-white); color: var(--color-navy); }
.hdr-btn--join { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-navy); }
.hdr-btn--join:hover, .hdr-btn--join:focus-visible { background: var(--color-white); border-color: var(--color-white); }
@container hdr (max-width: 40rem) {
  .hdr-btn--cal { width: 40px; padding: 0; justify-content: center; }
  .hdr-btn--cal span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hdr-btn--join { padding: 0 var(--space-3); }
  .hdr-btn--join span { font-size: .8125rem; }
  .site-header__brand { display: none; }
}
@container hdr (max-width: 24rem) { .hdr-btn--join span { display: none; } .hdr-btn--join { width: 40px; padding: 0; justify-content: center; } }

/* ---------- Desplegable "Add to calendar" ---------- */
.cal { position: relative; }
.hdr-btn--cal { cursor: pointer; font-family: inherit; background: transparent; }
.hdr-btn__caret { width: 14px; height: 14px; margin-left: -2px; transition: transform .2s; }
.hdr-btn--cal[aria-expanded="true"] { background: var(--color-white); border-color: var(--color-white); color: var(--color-navy); }
.hdr-btn--cal[aria-expanded="true"] .hdr-btn__caret { transform: rotate(180deg); }
.cal__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 950; min-width: 16.5rem; margin: 0; padding: var(--space-2); list-style: none; background: var(--color-white); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.cal__menu[hidden] { display: none; }
.cal__menu a { display: block; padding: .7rem .9rem; border-radius: 4px; color: var(--color-navy); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.cal__menu a:hover, .cal__menu a:focus-visible { background: var(--color-cream); }
@media (prefers-reduced-motion: no-preference) { .cal__menu:not([hidden]) { animation: megaIn .16s ease-out both; } }
@container hdr (max-width: 40rem) { .hdr-btn__caret { display: none; } }