/* PHM UI — Cabeçalho Mestre do Ecossistema (Padrão Editorial Técnico) */
.phm-ecosystem-header { background:var(--surface,#fff); border-bottom:1px solid var(--line,#dbe3ef); box-shadow:none; width:100%; }
.phm-ecosystem-header .container,
.phm-ecosystem-header .nav-wrap,
.phm-ecosystem-header .phm-ecosystem-header__inner {
  max-width: 1440px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.phm-ecosystem-header__inner { min-height:64px; gap:0.65rem; display:flex; align-items:center; }
.phm-ecosystem-header__actions { margin-left:auto; display:flex; align-items:center; gap:0.35rem; flex-shrink:0; }
.phm-ecosystem-header .btn-header-action,
.phm-ecosystem-header .nav-pref-trigger { min-height:34px; height:34px; border-radius:4px; font-size:.8rem; border:1px solid var(--line); }
.phm-ecosystem-header .btn-header-action { padding-inline:.8rem; display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none; font-weight:600; color:var(--text-soft,#475569); background:var(--surface,#fff); cursor:pointer; transition:all .15s ease; white-space:nowrap !important; }
.phm-ecosystem-header .btn-header-action:hover { color:var(--navy,#0b1e3d); background:var(--surface-soft,#f1f5f9); border-color:var(--line-strong,#cbd5e1); }
[data-theme="dark"] .phm-ecosystem-header .btn-header-action { color:#cbd5e1; background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.12); }
[data-theme="dark"] .phm-ecosystem-header .btn-header-action:hover { color:#fff; background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); }

/* Bloco Esquerdo de Marca & Chancela Editorial */
.nav-left-cluster {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex-shrink: 0;
}
.brand-project,
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.app-logo-wordmark {
  height: 30px;
  max-height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}
.nav-brand-sep {
  width: 1px;
  height: 18px;
  background: var(--line-strong, #cbd5e1);
  opacity: 0.7;
  display: inline-block;
  margin-inline: 0.2rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.nav-brand-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  user-select: none;
}
[data-theme="dark"] .nav-brand-sep {
  background: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .nav-brand-tag {
  color: #64748b;
}
@media (max-width: 1120px) {
  .phm-ecosystem-header .nav-brand-tag,
  .phm-ecosystem-header .nav-brand-sep {
    display: none !important;
  }
}
/* ==========================================================================
   REGRA DE OURO DE RETORNO AO HUB PHM TECH (DESKTOP VS. MOBILE)
   ========================================================================== */
html body .phm-ecosystem-header a.phm-hub-back,
html body .phm-ecosystem-header .phm-hub-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

@media (min-width: 1061px) {
  html body .phm-ecosystem-header a.phm-hub-back,
  html body .phm-ecosystem-header .phm-hub-back {
    width: auto !important;
    min-width: 0 !important;
    padding-inline: 0.75rem !important;
    justify-content: center !important;
  }
  html body .phm-ecosystem-header a.phm-hub-back span,
  html body .phm-ecosystem-header .phm-hub-back span {
    display: inline !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
  }
}

@media (max-width: 1060px) {
  html body .phm-ecosystem-header a.phm-hub-back,
  html body .phm-ecosystem-header .phm-hub-back {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  html body .phm-ecosystem-header a.phm-hub-back span,
  html body .phm-ecosystem-header .phm-hub-back span {
    display: none !important;
  }
}
.phm-ecosystem-header .phm-carrossel-panel { min-width:280px; border-radius:6px; }
.phm-ecosystem-header .phm-carrossel-open { width:100%; justify-content:center; border-radius:4px; }
/* Separador Hairline do Cluster Utilitário */
.nav-cluster-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--line, #e2e8f0);
  margin-inline: 0.35rem 0.15rem;
  vertical-align: middle;
}


/* Utilitários Compactos Ghost 34x34px (Padrão Editorial / Vercel / GitHub) */
.phm-ecosystem-header .nav-pref-trigger.nav-pref-icon-only,
.nav-pref-trigger.nav-pref-icon-only {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-soft, #475569) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all var(--transition, 0.15s ease);
}

.phm-ecosystem-header .nav-pref-trigger.nav-pref-icon-only:hover,
.phm-ecosystem-header .nav-pref-trigger.nav-pref-icon-only.active,
.nav-pref-trigger.nav-pref-icon-only:hover,
.nav-pref-trigger.nav-pref-icon-only.active {
  background: var(--surface-soft, #f1f5f9) !important;
  border-color: var(--line, #e2e8f0) !important;
  color: var(--teal, #0d9488) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.nav-pref-trigger.nav-pref-icon-only svg {
  margin: 0 !important;
  stroke: currentColor;
}

[data-theme="dark"] .phm-ecosystem-header .nav-pref-trigger.nav-pref-icon-only,
[data-theme="dark"] .nav-pref-trigger.nav-pref-icon-only {
  color: #94a3b8 !important;
}

[data-theme="dark"] .phm-ecosystem-header .nav-pref-trigger.nav-pref-icon-only:hover,
[data-theme="dark"] .phm-ecosystem-header .nav-pref-trigger.nav-pref-icon-only.active,
[data-theme="dark"] .nav-pref-trigger.nav-pref-icon-only:hover,
[data-theme="dark"] .nav-pref-trigger.nav-pref-icon-only.active {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #2dd4bf !important;
}

@media (max-width:900px) {
  .phm-ecosystem-header__inner { min-height:0; }
  .phm-ecosystem-header__actions { margin-left:0; }
  .nav-cluster-divider { display:none; }
}

/* ==========================================================================
   PAINÉIS POPOVER ARQUITETÔNICOS (PREFERÊNCIAS & CARROSSEL)
   ========================================================================== */

.nav-pref-panel,
.home-carrossel-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 325px;
  max-width: 90vw;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line-strong, #cbd5e1);
  border-radius: 4px;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.05);
  z-index: 1100;
  box-sizing: border-box;
}

.nav-pref-panel[hidden],
.home-carrossel-panel[hidden] {
  display: none !important;
}

.pref-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line, #e2e8f0);
  margin-bottom: 0.95rem;
}

.pref-panel-title {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy, #0b1e3d);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pref-panel-title svg {
  stroke: var(--teal, #0d9488);
  flex-shrink: 0;
}

.pref-panel-close {
  background: transparent;
  border: 1px solid transparent;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.pref-panel-close:hover {
  background: var(--surface-soft, #f1f5f9);
  border-color: var(--line, #e2e8f0);
  color: var(--text-main, #0f172a);
}

.pref-group {
  margin-bottom: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pref-group:last-child {
  margin-bottom: 0;
}

.pref-group-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
}

/* Controles Segmentados Arquitetônicos (Retos, 4px) */
.segmented-control,
.pref-group .theme-switcher-pill,
.pref-group .font-size-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--surface-soft, #f1f5f9);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
  box-sizing: border-box;
  width: 100%;
}

.seg-btn,
.pref-group .theme-pill-btn,
.pref-group .font-ctrl-btn {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.38rem 0.25rem;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft, #475569);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
  text-align: center;
}

.seg-btn svg,
.pref-group .theme-pill-btn svg {
  stroke: currentColor;
  flex-shrink: 0;
}

.seg-btn:hover,
.pref-group .theme-pill-btn:hover,
.pref-group .font-ctrl-btn:hover {
  color: var(--text-main, #0f172a);
}

.seg-btn.active,
.pref-group .theme-pill-btn.active,
.pref-group .font-ctrl-btn.active {
  background: var(--surface, #ffffff) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: var(--teal-dark, #0f766e) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.seg-btn.active svg,
.pref-group .theme-pill-btn.active svg {
  stroke: var(--teal-dark, #0f766e) !important;
}

/* Botões de Ação do Painel */
.action-card-btn,
.pref-action-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 4px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main, #0f172a);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  box-sizing: border-box;
}

.action-card-btn svg,
.pref-action-btn svg {
  stroke: var(--teal, #0d9488);
  flex-shrink: 0;
}

.action-card-btn .btn-arrow {
  margin-left: auto;
  color: var(--text-muted, #64748b);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.action-card-btn:hover,
.pref-action-btn:hover {
  background: var(--surface, #ffffff);
  border-color: var(--teal, #0d9488);
  color: var(--teal-dark, #0f766e);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.action-card-btn:hover .btn-arrow {
  color: var(--teal, #0d9488);
  transform: translateX(2px);
}

/* Painel do Carrossel Musical */
.carrossel-select {
  width: 100%;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.82rem;
  padding: 0.45rem 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--surface-soft, #f8fafc);
  color: var(--text-main, #0f172a);
  cursor: pointer;
  box-sizing: border-box;
}

.carrossel-select:focus {
  outline: none;
  border-color: var(--teal, #0d9488);
}

.volume-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.volume-output-tag {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--teal-dark, #0f766e);
  background: var(--teal-subtle, #f0fdfa);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  border: 1px solid #ccfbf1;
}

.carrossel-range-slider {
  width: 100%;
  height: 4px;
  accent-color: var(--teal, #0d9488);
  cursor: pointer;
  margin-top: 0.35rem;
}

.home-carrossel-panel .home-carrossel-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.55rem 0.8rem;
  background: var(--navy, #0b1e3d) !important;
  color: #ffffff !important;
  border: 1px solid var(--navy, #0b1e3d) !important;
  border-radius: 4px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.home-carrossel-panel .home-carrossel-open:hover {
  background: #0f2c59 !important;
  border-color: #0f2c59 !important;
  transform: translateY(-1px);
}

.home-carrossel-config-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem;
  color: var(--teal, #0d9488);
  text-decoration: none;
  padding-top: 0.65rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.home-carrossel-config-link:hover {
  color: var(--teal-dark, #0f766e);
  text-decoration: underline;
}

/* ==========================================================================
   TEMA NOTURNO (DARK) PARA OS PAINÉIS
   ========================================================================== */

[data-theme="dark"] .nav-pref-panel,
[data-theme="dark"] .home-carrossel-panel {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .pref-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pref-panel-title {
  color: #f1f5f9;
}

[data-theme="dark"] .pref-panel-close {
  color: #94a3b8;
}

[data-theme="dark"] .pref-panel-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

[data-theme="dark"] .pref-group-label {
  color: #94a3b8;
}

[data-theme="dark"] .segmented-control,
[data-theme="dark"] .pref-group .theme-switcher-pill,
[data-theme="dark"] .pref-group .font-size-controls {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .seg-btn,
[data-theme="dark"] .pref-group .theme-pill-btn,
[data-theme="dark"] .pref-group .font-ctrl-btn {
  color: #94a3b8;
}

[data-theme="dark"] .seg-btn:hover,
[data-theme="dark"] .pref-group .theme-pill-btn:hover,
[data-theme="dark"] .pref-group .font-ctrl-btn:hover {
  color: #f1f5f9;
}

[data-theme="dark"] .seg-btn.active,
[data-theme="dark"] .pref-group .theme-pill-btn.active,
[data-theme="dark"] .pref-group .font-ctrl-btn.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #2dd4bf;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .action-card-btn,
[data-theme="dark"] .pref-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

[data-theme="dark"] .action-card-btn:hover,
[data-theme="dark"] .pref-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #2dd4bf;
  color: #2dd4bf;
}

[data-theme="dark"] .action-card-btn:hover .btn-arrow {
  color: #2dd4bf;
}

[data-theme="dark"] .carrossel-select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

[data-theme="dark"] .volume-output-tag {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.25);
  color: #2dd4bf;
}

[data-theme="dark"] .home-carrossel-panel .home-carrossel-open {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .home-carrossel-panel .home-carrossel-open:hover {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
}

/* ==========================================================================
   TEMA SÉPIA PARA OS PAINÉIS
   ========================================================================== */

[data-theme="sepia"] .nav-pref-panel,
[data-theme="sepia"] .home-carrossel-panel {
  background: #fbf7ee;
  border-color: #e2d9c8;
}

[data-theme="sepia"] .pref-panel-header {
  border-bottom-color: #e8e0d0;
}

[data-theme="sepia"] .segmented-control,
[data-theme="sepia"] .pref-group .theme-switcher-pill,
[data-theme="sepia"] .pref-group .font-size-controls {
  background: #f0ebd9;
  border-color: #dfd6c3;
}

[data-theme="sepia"] .seg-btn.active,
[data-theme="sepia"] .pref-group .theme-pill-btn.active,
[data-theme="sepia"] .pref-group .font-ctrl-btn.active {
  background: #fdfaf3;
  border-color: #d6cbaf;
  color: #78350f;
}

[data-theme="sepia"] .action-card-btn,
[data-theme="sepia"] .pref-action-btn {
  background: #f5efe2;
  border-color: #e2d9c8;
  color: #433422;
}

[data-theme="sepia"] .action-card-btn:hover,
[data-theme="sepia"] .pref-action-btn:hover {
  background: #fdfaf3;
  border-color: #92400e;
  color: #78350f;
}

/* ==========================================================================
   NAVEGAÇÃO EDITORIAL CENTRAL DO HEADER (.header-editorial-nav & .main-nav)
   ========================================================================== */

/* Botão Menu Hambúrguer — Oculto por padrão no Desktop */
.phm-ecosystem-header .menu-toggle,
.menu-toggle {
  display: none !important;
}

.menu-toggle svg {
  pointer-events: none;
}

/* Modo Desktop: Barra em Linha Única Horizontal */
@media (min-width: 861px) {
  .header-editorial-nav,
  .main-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.25rem !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

.header-editorial-nav a,
.main-nav a {
  font-family: var(--font-body, 'Plus Jakarta Sans', 'Inter', sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-soft, #475569);
  padding: 0.38rem 0.55rem;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.16s ease;
}

.header-editorial-nav a:hover,
.header-editorial-nav a:focus-visible,
.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--navy, #0b1e3d);
  background: var(--surface-soft, rgba(0, 0, 0, 0.04));
}

.header-editorial-nav a.active,
.main-nav a.active {
  color: var(--teal, #0d9488);
  background: rgba(13, 148, 136, 0.08);
  font-weight: 600;
}

[data-theme="dark"] .header-editorial-nav a,
[data-theme="dark"] .main-nav a {
  color: #94a3b8;
}

[data-theme="dark"] .header-editorial-nav a:hover,
[data-theme="dark"] .header-editorial-nav a:focus-visible,
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .header-editorial-nav a.active,
[data-theme="dark"] .main-nav a.active {
  color: #2dd4bf;
  background: rgba(45, 212, 191, 0.12);
}

[data-theme="sepia"] .header-editorial-nav a,
[data-theme="sepia"] .main-nav a {
  color: #715842;
}

[data-theme="sepia"] .header-editorial-nav a:hover,
[data-theme="sepia"] .header-editorial-nav a:focus-visible,
[data-theme="sepia"] .main-nav a:hover,
[data-theme="sepia"] .main-nav a:focus-visible {
  color: #2c1810;
  background: rgba(67, 52, 34, 0.08);
}

[data-theme="sepia"] .header-editorial-nav a.active,
[data-theme="sepia"] .main-nav a.active {
  color: #78350f;
  background: rgba(120, 53, 15, 0.12);
}

/* ==========================================================================
   COMPORTAMENTO RESPONSIVO MOBILE (Telas <= 860px)
   ========================================================================== */
@media (max-width: 860px) {
  /* Botão Menu Hambúrguer padrão editorial 34x34px */
  .phm-ecosystem-header .menu-toggle,
  .menu-toggle {
    display: inline-flex !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--line, #e2e8f0) !important;
    border-radius: 4px !important;
    background: var(--surface, #ffffff) !important;
    color: var(--text-soft, #475569) !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 0.15s ease;
  }

  .phm-ecosystem-header .menu-toggle:hover,
  .phm-ecosystem-header .menu-toggle[aria-expanded="true"],
  .menu-toggle:hover,
  .menu-toggle[aria-expanded="true"] {
    border-color: var(--teal, #0d9488) !important;
    background: var(--surface-soft, #f1f5f9) !important;
    color: var(--teal, #0d9488) !important;
  }

  [data-theme="dark"] .phm-ecosystem-header .menu-toggle,
  [data-theme="dark"] .menu-toggle {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
  }

  [data-theme="dark"] .phm-ecosystem-header .menu-toggle:hover,
  [data-theme="dark"] .phm-ecosystem-header .menu-toggle[aria-expanded="true"],
  [data-theme="dark"] .menu-toggle:hover,
  [data-theme="dark"] .menu-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #2dd4bf !important;
  }

  [data-theme="sepia"] .phm-ecosystem-header .menu-toggle,
  [data-theme="sepia"] .menu-toggle {
    background: #f5efe2 !important;
    border-color: #e2d9c8 !important;
    color: #715842 !important;
  }

  [data-theme="sepia"] .phm-ecosystem-header .menu-toggle:hover,
  [data-theme="sepia"] .phm-ecosystem-header .menu-toggle[aria-expanded="true"],
  [data-theme="sepia"] .menu-toggle:hover,
  [data-theme="sepia"] .menu-toggle[aria-expanded="true"] {
    background: #fdfaf3 !important;
    border-color: #92400e !important;
    color: #78350f !important;
  }

  /* Estado Fechado: Oculto por padrão */
  .phm-ecosystem-header .header-editorial-nav,
  .phm-ecosystem-header .main-nav,
  .header-editorial-nav,
  .main-nav {
    display: none !important;
  }

  /* Estado Aberto (.open): Painel dropdown suspenso diretamente abaixo do header */
  .phm-ecosystem-header .header-editorial-nav.open,
  .phm-ecosystem-header .main-nav.open,
  .header-editorial-nav.open,
  .main-nav.open {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: var(--surface, #ffffff) !important;
    border-top: 1px solid var(--line, #e2e8f0) !important;
    border-bottom: 1px solid var(--line-strong, #cbd5e1) !important;
    padding: 0.85rem 1.25rem !important;
    gap: 0.35rem !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
    z-index: 1050 !important;
    box-sizing: border-box !important;
    animation: phmMenuFadeDown 0.18s ease-out !important;
  }

  .phm-ecosystem-header .header-editorial-nav.open a,
  .phm-ecosystem-header .main-nav.open a,
  .header-editorial-nav.open a,
  .main-nav.open a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    color: var(--text-soft, #475569) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }

  .phm-ecosystem-header .header-editorial-nav.open a:hover,
  .phm-ecosystem-header .main-nav.open a:hover,
  .header-editorial-nav.open a:hover,
  .main-nav.open a:hover {
    background: var(--surface-soft, #f1f5f9) !important;
    color: var(--navy, #0b1e3d) !important;
  }

  .phm-ecosystem-header .header-editorial-nav.open a.active,
  .phm-ecosystem-header .main-nav.open a.active,
  .header-editorial-nav.open a.active,
  .main-nav.open a.active {
    background: rgba(13, 148, 136, 0.08) !important;
    color: var(--teal, #0d9488) !important;
    font-weight: 600 !important;
  }

  /* Temas Noturno e Sépia para o menu aberto */
  [data-theme="dark"] .phm-ecosystem-header .header-editorial-nav.open,
  [data-theme="dark"] .phm-ecosystem-header .main-nav.open,
  [data-theme="dark"] .header-editorial-nav.open,
  [data-theme="dark"] .main-nav.open {
    background: #0f172a !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important;
  }

  [data-theme="dark"] .phm-ecosystem-header .header-editorial-nav.open a,
  [data-theme="dark"] .phm-ecosystem-header .main-nav.open a,
  [data-theme="dark"] .header-editorial-nav.open a,
  [data-theme="dark"] .main-nav.open a {
    color: #cbd5e1 !important;
  }

  [data-theme="dark"] .phm-ecosystem-header .header-editorial-nav.open a:hover,
  [data-theme="dark"] .phm-ecosystem-header .main-nav.open a:hover,
  [data-theme="dark"] .header-editorial-nav.open a:hover,
  [data-theme="dark"] .main-nav.open a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
  }

  [data-theme="dark"] .phm-ecosystem-header .header-editorial-nav.open a.active,
  [data-theme="dark"] .phm-ecosystem-header .main-nav.open a.active,
  [data-theme="dark"] .header-editorial-nav.open a.active,
  [data-theme="dark"] .main-nav.open a.active {
    background: rgba(45, 212, 191, 0.12) !important;
    color: #2dd4bf !important;
  }

  [data-theme="sepia"] .phm-ecosystem-header .header-editorial-nav.open,
  [data-theme="sepia"] .phm-ecosystem-header .main-nav.open,
  [data-theme="sepia"] .header-editorial-nav.open,
  [data-theme="sepia"] .main-nav.open {
    background: #fbf7ee !important;
    border-top-color: #e8e0d0 !important;
    border-bottom-color: #dfd6c3 !important;
    box-shadow: 0 14px 36px rgba(67, 52, 34, 0.16) !important;
  }

  [data-theme="sepia"] .phm-ecosystem-header .header-editorial-nav.open a,
  [data-theme="sepia"] .phm-ecosystem-header .main-nav.open a,
  [data-theme="sepia"] .header-editorial-nav.open a,
  [data-theme="sepia"] .main-nav.open a {
    color: #715842 !important;
  }

  [data-theme="sepia"] .phm-ecosystem-header .header-editorial-nav.open a:hover,
  [data-theme="sepia"] .phm-ecosystem-header .main-nav.open a:hover,
  [data-theme="sepia"] .header-editorial-nav.open a:hover,
  [data-theme="sepia"] .main-nav.open a:hover {
    background: rgba(67, 52, 34, 0.08) !important;
    color: #2c1810 !important;
  }

  [data-theme="sepia"] .phm-ecosystem-header .header-editorial-nav.open a.active,
  [data-theme="sepia"] .phm-ecosystem-header .main-nav.open a.active,
  [data-theme="sepia"] .header-editorial-nav.open a.active,
  [data-theme="sepia"] .main-nav.open a.active {
    background: rgba(120, 53, 15, 0.12) !important;
    color: #78350f !important;
  }
}

@keyframes phmMenuFadeDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Oculta rótulo de texto redundante quando a marca SVG/wordmark é exibida */
.phm-ecosystem-header .logo-title,
span.logo-title {
  display: none !important;
}

/* Salvaguarda de Acessibilidade: Skip Link fora do fluxo visual quando não focado */
.phm-skip-link {
  position: absolute !important;
  top: -9999px !important;
  left: 1rem !important;
  z-index: 999999 !important;
  padding: 0.5rem 1rem !important;
  background: #0f172a !important;
  color: #2dd4bf !important;
  border: 1px solid #2dd4bf !important;
  border-radius: 4px !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.phm-skip-link:focus,
.phm-skip-link:focus-visible {
  top: 1rem !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  outline: 2px solid #2dd4bf !important;
}

/* ==========================================================================
   ESCALA TIPOGRÁFICA UNIVERSAL DO ECOSSISTEMA PHM TECH
   ========================================================================== */
html[data-font-size="sm"],
html[data-font-size="small"] {
  font-size: 92% !important;
}

html[data-font-size="normal"] {
  font-size: 100% !important;
}

html[data-font-size="lg"],
html[data-font-size="large"] {
  font-size: 112% !important;
}

html[data-font-size="xl"] {
  font-size: 122% !important;
}