/* =============================================================================
   Glotus — components.css · chrome transversal del child theme
   -----------------------------------------------------------------------------
   v1.0 (2026-06-11) — Pieza 02 · Header (variantes logged-out / logged-in).
   Extraído del <style> del artifact canónico wordpress/piezas/02-header y
   tokenizado: cero literales de color; todo via var(--glotus-*) o color-mix
   sobre tokens (regla de valores estrictos, estado-operativo §7.1).
   Se encolá DESPUÉS del bridge (dependencia: glotus-wp-bridge).
   Secciones futuras (footer, cards) se anexan acá con banner por pieza.
   ============================================================================= */

/* ─── Pieza 02 · site-header ─────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  background: color-mix(in srgb, var(--glotus-paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms cubic-bezier(.2, 0, 0, 1);
}
body.admin-bar .site-header { top: 32px; } /* offset del admin bar WP (solo staff logueado) */
.site-header.is-scrolled { border-bottom-color: var(--glotus-border-visible); }

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.site-logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.site-logo img, .site-logo svg { height: 28px; width: auto; display: block; }

/* ─── Pieza 02 · main-navigation ─────────────────────────────────────────── */

.main-navigation { display: flex; gap: 28px; margin-right: auto; }
.main-navigation a {
  text-decoration: none;
  color: var(--glotus-ink-900);
  font-size: 15px;
  font-weight: 400;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  line-height: 1.4;
}
.main-navigation a.current-menu-item,
.main-navigation a[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--glotus-color-accent);
}
.main-navigation a:hover {
  border-bottom-color: color-mix(in srgb, var(--glotus-color-accent) 40%, transparent); /* stylelint-disable-line scale-unlimited/declaration-strict-value -- tint derivado de token via color-mix, cero literal (límite v0: ignoreFunctions) */
}

/* ─── Pieza 02 · header-actions (cluster derecho) ────────────────────────── */

.header-actions { display: flex; align-items: center; gap: 18px; }

/* Logged-out: link "Iniciar sesión" — mismo vocabulario que los items del nav */
.site-header__login {
  text-decoration: none;
  color: var(--glotus-ink-900);
  font-size: 15px;
  font-weight: 400;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}
.site-header__login:hover {
  border-bottom-color: color-mix(in srgb, var(--glotus-color-accent) 40%, transparent); /* stylelint-disable-line scale-unlimited/declaration-strict-value -- tint derivado de token via color-mix, cero literal (límite v0: ignoreFunctions) */
}

/* ─── Pieza 02 · user-menu ───────────────────────────────────────────────── */

.user-menu { position: relative; }
.user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--glotus-ink-900);
  transition: background 120ms, border-color 120ms;
}
.user-menu__trigger:hover {
  background: color-mix(in srgb, var(--glotus-color-primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--glotus-color-primary) 18%, transparent); /* stylelint-disable-line scale-unlimited/declaration-strict-value -- tint derivado de token via color-mix, cero literal (límite v0: ignoreFunctions) */
}
.user-menu__trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--glotus-color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--glotus-color-primary) 25%, transparent); /* stylelint-disable-line scale-unlimited/declaration-strict-value -- tint derivado de token via color-mix, cero literal (límite v0: ignoreFunctions) */
}
.user-menu__name { font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--glotus-color-primary);
  color: var(--glotus-fg-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.user-menu__chev { width: 14px; height: 14px; color: var(--glotus-ink-600); }

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--glotus-bg-elevated);
  border: 1px solid var(--glotus-bone);
  border-radius: 12px;
  box-shadow: var(--glotus-shadow-3);
  padding: 6px;
  display: none;
}
.user-menu.is-open .user-menu__dropdown { display: block; }
.user-menu__dropdown-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--glotus-bone);
  margin-bottom: 6px;
}
.user-menu__dropdown-header strong { display: block; font-size: 14px; color: var(--glotus-ink-900); line-height: 1.3; }
.user-menu__dropdown-header span { display: block; font-size: 12px; color: var(--glotus-ink-600); margin-top: 2px; }
.user-menu__dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--glotus-ink-900);
  font-size: 14px;
  line-height: 1.4;
}
.user-menu__dropdown a:hover { background: var(--glotus-bone); }
.user-menu__dropdown a.is-active {
  background: color-mix(in srgb, var(--glotus-color-primary) 10%, transparent);
  color: var(--glotus-color-primary);
  font-weight: 600;
}
.user-menu__dropdown a.is-logout { color: var(--glotus-color-destructive); }
.user-menu__dropdown a.is-logout:hover {
  background: color-mix(in srgb, var(--glotus-color-destructive) 8%, transparent);
}
.user-menu__dropdown hr { border: none; border-top: 1px solid var(--glotus-bone); margin: 6px 4px; }
.user-menu__dropdown svg { width: 16px; height: 16px; color: var(--glotus-ink-600); flex-shrink: 0; }
.user-menu__dropdown a.is-active svg { color: var(--glotus-color-primary); }
.user-menu__dropdown a.is-logout svg { color: var(--glotus-color-destructive); }

/* ─── Pieza 02 · header-cta ──────────────────────────────────────────────── */

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--glotus-color-primary);
  color: var(--glotus-fg-on-dark);
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 8px;
  border: 1px solid var(--glotus-color-primary);
  transition: background 120ms, transform 120ms;
}
.header-cta:hover { background: var(--glotus-color-primary-deep); }
.header-cta:active { transform: scale(.99); }
.header-cta svg { width: 14px; height: 14px; }

/* ─── Marca · wordmark (consume tokens §8 — no reimplementa valores) ─────── */
/* Colores: dual-track de tokens §1 (root teal-650 typographic, suffix
   coral-550). Variante .on-dark: derivada de la regla del isotipo invertido
   (INTEGRATION-v3 §1.2 — teal→paper, coral se mantiene en track graphic).
   PENDIENTE validación CD contra colors_and_type.css canónico. */

.glotus-wordmark {
  font-family: var(--glotus-font-sans);
  font-weight: 600;
  letter-spacing: var(--glotus-wordmark-letter-spacing);
  line-height: 1;
}
.glotus-wordmark .root { color: var(--glotus-color-primary); }
.glotus-wordmark .suffix {
  font-weight: 400;
  color: var(--glotus-color-accent);
  letter-spacing: var(--glotus-wordmark-suffix-letter-spacing);
  margin-left: var(--glotus-wordmark-suffix-margin-left);
}
.glotus-wordmark.on-dark .root { color: var(--glotus-fg-on-dark); }
.glotus-wordmark.on-dark .suffix { color: var(--glotus-color-accent-graphic); }

/* ─── Pieza 08 · franja de transición D1 ─────────────────────────────────── */

.footer-transition {
  position: relative;
  height: 80px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--glotus-bg) 0 50%, var(--glotus-ink-900) 50% 100%);
}
.footer-transition::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--glotus-bone) 32%, transparent);
}
.footer-transition__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  display: block;
}

/* ─── Pieza 08 · cuerpo del footer ───────────────────────────────────────── */

.glotus-footer {
  position: relative;
  background: var(--glotus-ink-900);
  color: var(--glotus-fg-on-dark);
  padding: 96px 48px 0;
  overflow: hidden;
}
.glotus-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 32% 22% 22% 24%;
  gap: 48px;
  align-items: start;
}

/* ─── Pieza 08 · columna branding ────────────────────────────────────────── */

.col-brand__lockup {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
}
.col-brand__lockup svg { display: block; flex-shrink: 0; }
.col-brand__lockup .glotus-wordmark { font-size: 32px; }

.col-brand__tagline {
  font-family: var(--glotus-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--glotus-fg-on-dark-muted);
  margin: 0 0 28px;
  max-width: 30ch;
  text-wrap: balance;
}

.col-brand__address {
  font-family: var(--glotus-font-mono);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--glotus-fg-on-dark-muted);
  margin: 0;
  line-height: 1.85;
  font-style: normal;
}
.col-brand__address strong { color: var(--glotus-fg-on-dark); font-weight: 500; }

/* ─── Pieza 08 · columnas de links ───────────────────────────────────────── */

.col__header {
  font-family: var(--glotus-font-serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--glotus-fg-on-dark);
  margin: 0 0 20px;
  letter-spacing: -.005em;
  line-height: 1;
}
.col__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.col__nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--glotus-font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--glotus-fg-on-dark-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.col__nav a:hover,
.col__nav a:focus-visible {
  color: var(--glotus-fg-on-dark);
}
.col__nav a:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--glotus-paper) 40%, transparent);
  outline-offset: 3px;
  border-radius: 2px;
}

.col__nav .when {
  font-family: var(--glotus-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--glotus-paper) 40%, transparent); /* stylelint-disable-line scale-unlimited/declaration-strict-value -- tint derivado de token via color-mix, cero literal (límite v0: ignoreFunctions) */
  font-weight: 400;
}

/* ─── Pieza 08 · WhatsApp (excepción cromática funcional, sub-patrón D1) ── */

.col__nav a.wa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--glotus-fg-on-dark);
}
.col__nav a.wa .wa-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.col__nav a.wa .wa-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--glotus-color-whatsapp);
}
.col__nav a.wa .wa-number {
  font-family: var(--glotus-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--glotus-fg-on-dark-muted);
  padding-left: 24px;
}
.col__nav a.wa:hover .wa-number { color: var(--glotus-fg-on-dark); }

/* ─── Pieza 08 · bottom bar ──────────────────────────────────────────────── */

.footer-bottom {
  margin-top: 80px;
  padding: 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--glotus-paper) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--glotus-font-mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--glotus-paper) 50%, transparent); /* stylelint-disable-line scale-unlimited/declaration-strict-value -- tint derivado de token via color-mix, cero literal (límite v0: ignoreFunctions) */
}
.footer-bottom p { margin: 0; font-size: inherit; }
.footer-bottom__legals {
  display: flex;
  gap: 18px;
  align-items: center;
}
.footer-bottom__legals a {
  color: inherit;
  text-decoration: none;
  transition: color 120ms ease;
}
.footer-bottom__legals a:hover { color: var(--glotus-fg-on-dark); }

/* ─── Pieza 08 · watermark D1 ────────────────────────────────────────────── */

.footer-watermark {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 340px;
  height: 340px;
  opacity: .06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ─── Pieza 08 · responsive ──────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .glotus-footer { padding: 80px 40px 0; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px 48px;
  }
  .col-brand   { grid-column: 1; grid-row: 1; }
  .col-cursos  { grid-column: 2; grid-row: 1; }
  .col-sobre   { grid-column: 1; grid-row: 2; }
  .col-soporte { grid-column: 2; grid-row: 2; }
  .footer-watermark { right: -80px; bottom: -100px; width: 300px; height: 300px; }
}

@media (max-width: 767px) {
  .footer-transition { height: 64px; }
  .footer-transition__orbit { width: 88px; height: 88px; }
  .glotus-footer { padding: 64px 28px 0; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .col-brand, .col-cursos, .col-sobre, .col-soporte { grid-column: auto; grid-row: auto; }
  .col-brand { text-align: center; }
  .col-brand__lockup { justify-content: center; }
  .col-brand__tagline { margin-inline: auto; }
  .col__header { margin-bottom: 16px; }
  .col__nav { gap: 14px; }
  .col__nav a { font-size: 15px; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-top: 56px;
    padding: 20px 0;
  }
  .footer-bottom__legals { flex-wrap: wrap; justify-content: center; }
  .footer-watermark { right: -100px; bottom: -80px; width: 240px; height: 240px; opacity: .05; }
}

/* ─── Aviso de cookies · informativo (Fase 4 · paso 4) ───────────────────── */
/* Discreto: ink-900 + paper, texto chico, sin urgencia. No es CMP. */

.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 12px 24px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--glotus-ink-900);
  color: var(--glotus-fg-on-dark-muted);
  border-top: 1px solid color-mix(in srgb, var(--glotus-paper) 20%, transparent);
  font-family: var(--glotus-font-sans);
  font-size: 13px;
  line-height: 1.5;
}
.cookie-notice[hidden] { display: none; }

.cookie-notice__text { margin: 0; }
.cookie-notice__text a {
  color: var(--glotus-fg-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}
.cookie-notice__text a:hover { color: var(--glotus-fg-on-dark); }

.cookie-notice__btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--glotus-fg-on-dark);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--glotus-paper) 35%, transparent); /* stylelint-disable-line scale-unlimited/declaration-strict-value -- tint derivado de token via color-mix, cero literal (límite v0: ignoreFunctions) */
  border-radius: 8px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.cookie-notice__btn:hover {
  background: color-mix(in srgb, var(--glotus-paper) 10%, transparent);
  border-color: color-mix(in srgb, var(--glotus-paper) 55%, transparent); /* stylelint-disable-line scale-unlimited/declaration-strict-value -- tint derivado de token via color-mix, cero literal (límite v0: ignoreFunctions) */
}
.cookie-notice__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--glotus-paper) 60%, transparent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .cookie-notice {
    font-size: 12.5px;
    gap: 10px 16px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Glotus · Pieza 01 (alcance acotado) · HEADER MOBILE — CANÓNICO
   2026-06-11 · Bloque 3 · bloqueante de lanzamiento (no de montaje)

   QUÉ ES. La única versión mobile del header del sitio público
   (logged-out y logged-in). Se canoniza acá y se RETIRA de las
   referencias: los headers de los wordpress.html de 03/04/10 son
   duplicados de referencia y NO se montan (regla de Fase 4/5).

   DESTINO. Anexar este archivo completo a `components.css` del child
   theme, después del bloque .site-header existente (el deployado desde
   la Pieza 02 en Fase 4). No reemplaza ninguna regla desktop: solo
   agrega el colapso que components.css hoy no tiene (smoke Fase 5:
   952px naturales a 375px, desborde de 577px).

   MARKUP. Requiere tres agregados en los partials del header
   (header-logged-out.php / header-logged-in.php) — el contrato de
   markup y el JS productivo viven en `header-mobile.html` (review):
     1. <button class="nav-toggle"> al final de .site-header__inner
     2. <div class="mobile-menu-scrim"> + <aside class="mobile-menu">
        inmediatamente después del <header>
     3. variante logged-out del CTA: class="header-cta header-cta--trial"

   RULINGS DE DRIFT (cierran lo reportado por CW, ver review html):
   R1 · CTA logged-out "Clase de prueba" = coral-400 fill / coral-550
        hover (regla de fricción de DESIGN.md: fricción baja). El
        .header-cta deployado (teal, "Ir al campus", logged-in) queda
        intacto; el coral entra como modificador .header-cta--trial.
   R2 · El campus es PATH del mismo dominio (glotus.com.ar/campus),
        no subdominio — Moodle + OAuth deployados ahí desde la Pieza
        06A. "Iniciar sesión" → /campus/login/index.php (target de
        Pieza 06). "Ir al campus" → /campus/. `/wp-login.php` (03/04)
        sigue siendo drift: solo staff (INTEGRATION-v3 §4.2).
        [Corregido 2026-06-12 — el ruling original decía subdominio;
        ese era el error, no los paths relativos.]
   R3 · Hover/activo: nav HORIZONTAL = subrayado coral (canon 02
        deployada: hover rgba(224,94,76,.4), activo coral-550 + fw600).
        Menús VERTICALES (este sheet) = canon del dropdown de la 02:
        hover/active bone, activo tint teal rgba(0,120,120,.10) +
        teal-650 + fw600. No se inventa vocabulario nuevo.
   R4 · Alturas: 72px desktop (intacto) · 64px mobile · hit targets
        ≥44px. Wordmark 28px desktop / 24px mobile.

   Tokens: consume --glotus-* canónicos (v14.2) con fallback literal.
   Scrim neutro rgba(24,24,24,.45) por decisión A2 del paquete v14
   ("un scrim oscurece, no es sombra proyectada").
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hamburger · oculto en desktop, el colapso lo activa ───────────── */
.nav-toggle{display:none}

/* ── CTA logged-out · modificador sobre el .header-cta deployado ───── */
.header-cta--trial{
  background:var(--glotus-coral-400,#FB6E5F);
  border-color:var(--glotus-coral-400,#FB6E5F);
}
.header-cta--trial:hover{
  background:var(--glotus-coral-550,#E05E4C);
  border-color:var(--glotus-coral-550,#E05E4C);
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET · 768–1023 · header completo, condensado
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .site-header__inner{padding:0 24px;gap:24px}
  .main-navigation{gap:20px}
  .main-navigation a{font-size:14px}
  .header-cta{font-size:14px;padding:9px 14px}
  .user-menu__name{display:none} /* avatar solo — el nombre vuelve en el dropdown */
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE · ≤767 · barra mínima: brand · CTA · hamburger
   La nav y la cuenta viajan al sheet. La barra tiene la MISMA
   estructura en ambos estados (paridad 02: el login no resetea
   el layout) — solo cambian label y color del CTA.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .site-header{height:64px}
  .site-header__inner{padding:0 16px;gap:12px}
  .site-logo svg,
  .site-header__brand svg{height:24px}

  .main-navigation{display:none}
  .site-header__login{display:none}   /* → sheet, sección "Tu cuenta" */
  .user-menu{display:none}            /* → sheet, head de identidad   */

  .header-actions{gap:8px;margin-left:auto}
  .header-cta{margin-left:auto;font-size:13px;padding:9px 14px}
  .header-actions .header-cta{margin-left:0}

  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-10px;flex-shrink:0;
    background:transparent;border:0;border-radius:8px;cursor:pointer;
    color:var(--glotus-ink-900,#1C1915);
    transition:background 120ms;
  }
  .nav-toggle:hover,
  .nav-toggle:active{background:var(--glotus-bone,#F0EBE2)}
  .nav-toggle svg{width:22px;height:22px}
}

/* ═══════════════════════════════════════════════════════════════════
   SHEET · off-canvas derecho + scrim
   Solo opera ≤767 (el toggle que lo abre no existe arriba de eso);
   el guard ≥768 cubre el caso resize-con-menú-abierto.
   ═══════════════════════════════════════════════════════════════════ */
.mobile-menu-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(24,24,24,.45); /* scrim neutro · paquete v14 §A2 */
  opacity:0;pointer-events:none;
  transition:opacity 200ms cubic-bezier(.2,0,0,1);
}
.mobile-menu-scrim.is-open{opacity:1;pointer-events:auto}

.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(86vw,340px);
  background:var(--glotus-paper,#FAF7F2);
  box-shadow:var(--glotus-shadow-3,0 12px 32px rgba(46,32,18,.10),0 2px 4px rgba(46,32,18,.05));
  transform:translateX(100%);
  transition:transform 280ms cubic-bezier(.2,0,0,1);
  display:flex;flex-direction:column;
}
.mobile-menu.is-open{transform:translateX(0)}

.mobile-menu__head{
  min-height:64px;display:flex;align-items:center;gap:12px;
  padding:10px 8px 10px 16px;
  border-bottom:1px solid var(--glotus-bone,#F0EBE2);
}
.mobile-menu__close{
  margin-left:auto;width:44px;height:44px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  color:var(--glotus-ink-900,#1C1915);transition:background 120ms;
}
.mobile-menu__close:hover,
.mobile-menu__close:active{background:var(--glotus-bone,#F0EBE2)}
.mobile-menu__close svg{width:20px;height:20px}

/* identidad (head, solo logged-in) — espeja el dropdown-header de la 02 */
.mobile-menu__identity{display:flex;align-items:center;gap:12px;min-width:0}
.mobile-menu__avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--glotus-teal-650,#007878);color:var(--glotus-paper,#FAF7F2);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;letter-spacing:.02em;
}
.mobile-menu__who{min-width:0}
.mobile-menu__who strong{display:block;font-size:14px;font-weight:600;line-height:1.3;
  color:var(--glotus-ink-900,#1C1915);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-menu__who span{display:block;font-size:12px;color:var(--glotus-ink-600,#5A554C);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* nav — canon del dropdown 02: hover bone · activo tint teal + fw600 */
.mobile-menu__nav{padding:8px;display:flex;flex-direction:column;overflow-y:auto}
.mobile-menu__label{
  padding:14px 14px 6px;margin:0;
  font-family:var(--glotus-font-mono,ui-monospace,monospace);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--glotus-ink-600,#5A554C);font-weight:500;
}
.mobile-menu__nav a{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;border-radius:8px;min-height:44px;
  text-decoration:none;font-size:16px;font-weight:500;line-height:1.4;
  color:var(--glotus-ink-900,#1C1915);
  transition:background 120ms;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:active{background:var(--glotus-bone,#F0EBE2)}
.mobile-menu__nav a.current-menu-item,
.mobile-menu__nav a[aria-current="page"]{
  background:rgba(0,120,120,.10);
  color:var(--glotus-teal-650,#007878);font-weight:600;
}
.mobile-menu__nav a svg{width:16px;height:16px;flex-shrink:0;color:var(--glotus-ink-600,#5A554C)}
.mobile-menu__nav a.current-menu-item svg,
.mobile-menu__nav a[aria-current="page"] svg{color:var(--glotus-teal-650,#007878)}
.mobile-menu__nav a.is-logout{color:var(--glotus-coral-600,#CC3F2A)}
.mobile-menu__nav a.is-logout svg{color:var(--glotus-coral-600,#CC3F2A)}
.mobile-menu__nav a.is-logout:hover,
.mobile-menu__nav a.is-logout:active{background:rgba(204,63,42,.08)}
.mobile-menu__nav hr{border:0;border-top:1px solid var(--glotus-bone,#F0EBE2);margin:6px 6px}

/* foot — logged-out: login como botón quiet full-width */
.mobile-menu__foot{
  margin-top:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--glotus-bone,#F0EBE2);
}
.mobile-menu__login{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;padding:13px 19px;border-radius:8px;
  background:transparent;text-decoration:none;
  border:1px solid var(--glotus-teal-650,#007878);
  color:var(--glotus-teal-650,#007878);font-weight:600;font-size:15px;
  transition:background 120ms,color 120ms;
}
.mobile-menu__login:hover,
.mobile-menu__login:active{background:rgba(0,120,120,.06)}
.mobile-menu__hint{margin:0;font-size:12px;text-align:center;color:var(--glotus-ink-600,#5A554C)}

/* body lock mientras el sheet está abierto (la clase la pone el JS) */
body.mobile-menu-open{overflow:hidden}

@media (min-width:768px){
  .mobile-menu,.mobile-menu-scrim{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu-scrim,.nav-toggle{transition:none}
}