/* =============================================================================
 * Se Liga Run — Paleta oficial (MANUAL I, pág. 09 "PALETA DE CORES")
 * -----------------------------------------------------------------------------
 * Este arquivo é carregado DEPOIS de style.css (ver nuxt.config.ts) e reescreve
 * os tokens do tema Fitkit para a identidade da marca. O tema é praticamente
 * todo baseado em variáveis CSS (489 usos de --theme-color, 401 de
 * --white-color), então redefinir :root propaga para o site inteiro.
 *
 * Regra de contraste herdada do próprio manual:
 *   fundo claro  -> destaque em Carga Violeta   (11.7:1 sobre branco)
 *   fundo escuro -> destaque em Explosão Térmica (5.4:1 sobre Gravidade Noturna)
 * O bloco "contexto escuro" mais abaixo troca --theme-color por seção.
 *
 * Papel de cada cor (para as cinco não competirem pelo mesmo espaço):
 *   Gravidade Noturna — base escura e texto sobre campo de cor
 *   Carga Violeta     — destaque e botão em fundo claro
 *   Explosão Térmica  — ação e destaque em fundo escuro; marca sobre escuro
 *   Alerta Neon       — números e estado de hover
 *   Fluxo Elétrico    — metadados (data, local, distância) em fundo escuro.
 *                       Só existe no escuro: sobre branco dá 1.6:1.
 * ========================================================================== */

:root {
  /* ---- Cores oficiais do manual ---------------------------------------- */
  --sl-noturna: #0A0736;   /* Gravidade Noturna — base escura, texto sobre cor */
  --sl-violeta: #4A00C9;   /* Carga Violeta     — destaque em fundo claro      */
  --sl-neon: #EEF51E;      /* Alerta Neon       — números e hover              */
  --sl-termica: #EC4F00;   /* Explosão Térmica  — ação e destaque no escuro    */
  --sl-eletrico: #46EDD1;  /* Fluxo Elétrico    — metadados no escuro          */

  /* Mesmas cores em triplet, para uso dentro de rgba(). Sem isto os valores
     ficam duplicados literalmente e trocar uma cor da marca não propaga. */
  --sl-noturna-rgb: 10, 7, 54;
  --sl-violeta-rgb: 74, 0, 201;
  --sl-neon-rgb: 238, 245, 30;
  --sl-termica-rgb: 236, 79, 0;
  --sl-eletrico-rgb: 70, 237, 209;
  --sl-on-dark-rgb: 243, 240, 255;

  /* Gradient oficial (Explosão Térmica -> Carga Violeta) */
  --sl-gradient: linear-gradient(135deg, var(--sl-termica) 0%, var(--sl-violeta) 100%);
  --sl-gradient-h: linear-gradient(90deg, var(--sl-termica) 0%, var(--sl-violeta) 100%);

  /* ---- Escala derivada de Gravidade Noturna (mesmo matiz, 244°) --------- */
  --sl-noturna-950: #040317; /* rodapé / copyright  */
  --sl-noturna-900: #070524; /* seções escuras      */
  --sl-noturna-800: #0A0736; /* base do manual      */
  --sl-noturna-700: #120E4A; /* superfície elevada  */
  --sl-noturna-600: #1B1560; /* divisórias no escuro*/
  --sl-noturna-500: #2A2178; /* bordas em hover     */

  /* ---- Neutros claros com leve tinta violeta (substituem o branco puro) - */
  --sl-paper: #FBFAFE;  /* fundo do site        */
  --sl-surface: #FFFFFF;/* cartões              */
  --sl-smoke: #F4F1F9;  /* seções alternadas    */
  --sl-smoke-2: #EFEAF5;
  --sl-line: #E3DEF0;   /* bordas no claro      */
  --sl-ink: #0A0736;    /* títulos              */
  --sl-ink-soft: #5C5473; /* texto corrido      */
  --sl-ink-muted: #736C88; /* 4.97:1 no branco; #8A82A6 dava 3.61:1 */

  /* Tinta clara para bolhas de ícone em cartão branco */
  --sl-tint-violeta: #EFE5FF;

  /* Texto sobre fundo escuro */
  --sl-on-dark: #F3F0FF;
  --sl-on-dark-soft: #B7AEDA;

  /* ======================================================================
   * Remapeamento dos tokens do tema Fitkit
   * ==================================================================== */
  --theme-color: var(--sl-violeta);
  --theme-color2: var(--sl-termica);

  --title-color: var(--sl-ink);
  --body-color: var(--sl-ink-soft);
  --light-color: var(--sl-on-dark-soft);
  --gray-color: var(--sl-ink-muted);

  --white-color: #FBFAFE;          /* branco suavizado, sem glare */
  --th-body-background: var(--sl-paper);

  --smoke-color: var(--sl-smoke);
  --smoke-color2: var(--sl-smoke-2);
  --smoke-color3: #E9E4F2;
  --smoke-color4: var(--sl-tint-violeta);

  /* Todos os "pretos" do tema passam a ser Gravidade Noturna */
  --black-color: var(--sl-noturna-800);
  --black-color2: var(--sl-noturna-800);
  --black-color3: var(--sl-noturna-900);
  --black-color4: var(--sl-noturna-600);
  --black-color5: var(--sl-noturna-950);
  --black-color6: var(--sl-noturna-700);
  --black-color7: var(--sl-noturna-950);

  --th-border-color: var(--sl-line);
  --th-border-color2: var(--sl-noturna-600);
  --th-border-color3: var(--sl-noturna-700);
  --th-border-color4: var(--sl-noturna-600);
  --th-border-color5: var(--sl-noturna-500);
  --th-border-color6: var(--sl-noturna-600);

  --yellow-color: var(--sl-neon);

  /* Botões — pares bg/texto trocados por contexto (ver bloco abaixo) */
  --sl-btn-bg: var(--sl-violeta);
  --sl-btn-fg: #FFFFFF;
  --sl-btn-bg-hover: var(--sl-neon);
  --sl-btn-fg-hover: var(--sl-noturna-800);
  --sl-btn-shadow: rgba(var(--sl-violeta-rgb), .22);

  /* Fundo das seções claras: tinta de Explosão Térmica.
     O tom cheio (#EC4F00) é de impacto — o manual só o usa em página inteira
     isolada (pág. 20). Como fundo corrido ele pesa, então o campo usa uma
     tinta e o tom cheio fica reservado aos acentos.
     A tinta puxa para H 28° em vez dos 20° do swatch: é o laranja quente da
     arte oficial das etapas (que vai até #F08800), e evita que o campo claro
     leia como salmão. Trocar só esta linha muda todos os campos de uma vez —
     mais forte: #FACEA8 · bem mais forte: #F9C394 · tom cheio: #EC4F00. */
  --sl-field-bg: #FFF7F0;
}

/* =============================================================================
 * Contexto escuro — inverte o destaque para Explosão Térmica (legível sobre
 * Gravidade Noturna) e libera o Alerta Neon como segundo acento.
 * ========================================================================== */
#hero,
.th-hero-wrapper,
.etapa-hero,
.cta-area-1,
.video-2-bg-wrap,
.festa-area,
.cronometro-area,
.contato-header,
.footer-wrapper.footer-layout2,
.header-top,
.bg-title,
.bg-black,
.sl-dark {
  --theme-color: var(--sl-termica);
  --theme-color2: var(--sl-neon);
  --title-color: var(--sl-on-dark);
  --body-color: var(--sl-on-dark-soft);
  /* branco sobre laranja daria 3.1:1 — o texto vira Gravidade Noturna (6.4:1) */
  --sl-btn-bg: var(--sl-termica);
  --sl-btn-fg: var(--sl-noturna-800);
  --sl-btn-shadow: rgba(var(--sl-termica-rgb), .30);
}

/* =============================================================================
 * Base
 * ========================================================================== */
body {
  background: var(--sl-paper);
  color: var(--sl-ink-soft);
}

::selection { background: var(--sl-violeta); color: #fff; }
::-moz-selection { background: var(--sl-violeta); color: #fff; }

body::-webkit-scrollbar-track { background: var(--sl-smoke); box-shadow: none; }
body::-webkit-scrollbar-thumb {
  background: var(--sl-gradient);
  background-image: var(--sl-gradient);
  border-radius: 0;
}

.preloader { background-color: var(--sl-noturna-800); }

/* Sublinhados/blocos genéricos que o tema pinta de "preto" */
hr { border-color: var(--sl-line); }

/* =============================================================================
 * Cabeçalho
 * ========================================================================== */
/* Faixa superior em Gravidade Noturna com fio do gradient oficial */
.header-top {
  background-color: var(--sl-noturna-800);
  border-bottom: 1px solid var(--sl-noturna-600);
  position: relative;
}
.header-top::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sl-gradient-h);
}
.header-top a:hover,
.header-top .header-links li:hover > a { color: var(--sl-neon); }

/* A barra inteira do header é campo de cor — Gravidade Noturna, o mesmo do
   .header-top acima. É o campo para o qual a logo foi desenhada: o "SE LIGA!"
   em Alerta Neon dá 1.1:1 sobre branco (some) e 14.8:1 sobre a noturna. Com o
   header claro anterior, metade da marca ficava ilegível. */
.th-header { background-color: var(--sl-noturna-800); }

/* O tema fixa #fff no painel do menu mobile — alinha com o branco suavizado */
.th-menu-wrapper .th-menu-area { background-color: var(--sl-paper); }

/* Espaçamento, não paleta: o tema aplica padding-right de 80px (50px no
   breakpoint intermediário) em .header-default .header-logo. */
.header-default .header-logo { padding-right: 0; }

/* Divisórias do tema em cinza-azulado (#383D46) — sobre a noturna elas ficam
   com matiz alheio à paleta; vão para a escala da própria Gravidade Noturna. */
.th-header.header-default .header-logo,
.th-header.header-default .header-button { border-color: var(--sl-noturna-600); }

/* Menu sobre campo escuro: texto em Branco Elétrico, destaque em Explosão
   Térmica (5.4:1 sobre a noturna) — Carga Violeta não tem contraste aqui. */
.th-header.header-default .main-menu > ul > li > a,
.th-header.header-default .main-menu > ul > li:has(.mega-menu) > a::after,
.th-header.header-default .main-menu > ul > li.menu-item-has-children > a::after {
  color: var(--sl-on-dark);
}
.th-header.header-default .main-menu > ul > li > a:hover,
.th-header.header-default .main-menu > ul > li.menu-item-has-children > a:hover::after,
.th-header.header-default .main-menu > ul > li.active > a {
  color: var(--sl-termica);
}
/* O submenu continua sendo um cartão claro sobre o header escuro. */
.main-menu ul.sub-menu li a { color: var(--sl-ink-soft); }
.main-menu ul.sub-menu li a:hover { color: var(--sl-violeta); }
.main-menu ul li .sub-menu {
  background-color: var(--sl-surface);
  border-top: 3px solid transparent;
  border-image: var(--sl-gradient-h) 1;
  box-shadow: 0 20px 50px rgba(var(--sl-noturna-rgb), .12);
}

.th-header .icon-btn {
  --icon-bg: rgba(var(--sl-on-dark-rgb), .08);
  border-color: var(--sl-noturna-500);
  color: var(--sl-on-dark);
}
.th-header .icon-btn:hover {
  background-color: var(--sl-termica);
  border-color: var(--sl-termica);
  color: var(--sl-noturna-800);
}
.th-header .header-button .th-btn {
  background-color: var(--sl-termica);
  color: var(--sl-noturna-800);
}
.th-header .header-button .th-btn:hover {
  background-color: var(--sl-neon);
  color: var(--sl-noturna-800);
}

/* =============================================================================
 * Botões
 * -----------------------------------------------------------------------------
 * O par bg/texto vem das variáveis --sl-btn-* , que o bloco "contexto escuro"
 * acima já trocou por seção. As variantes de contorno usam --theme-color, que
 * também é contextual (Carga Violeta no claro, Explosão Térmica no escuro).
 * ========================================================================== */
.th-btn {
  background-color: var(--sl-btn-bg);
  color: var(--sl-btn-fg);
  box-shadow: 0 10px 26px var(--sl-btn-shadow);
}
.th-btn:hover,
.th-btn:focus-visible {
  background-color: var(--sl-btn-bg-hover);
  color: var(--sl-btn-fg-hover);
  box-shadow: 0 12px 30px rgba(var(--sl-neon-rgb), .32);
}

.th-btn.style3 { background: var(--sl-noturna-800); color: #FFFFFF; }
.th-btn.style3:hover { background: var(--sl-termica); color: var(--sl-noturna-800); }

.th-btn.style4 { background: var(--sl-surface); color: var(--sl-violeta); }
.th-btn.style4:hover { background: var(--sl-neon); color: var(--sl-noturna-800); }

/* Contorno: herda a cor de destaque do contexto, então funciona sobre fundo
   claro (violeta) e sobre fundo escuro (laranja) sem markup extra. */
.th-btn.style-border,
.th-btn.style-border2,
.th-btn.style-border3 {
  background: transparent;
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
  box-shadow: none;
}
.th-btn.style-border:hover,
.th-btn.style-border2:hover,
.th-btn.style-border3:hover {
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: var(--sl-btn-fg);
  box-shadow: 0 10px 26px var(--sl-btn-shadow);
}

.link-btn { color: var(--title-color); }
.link-btn:hover, .link-btn.active { color: var(--theme-color); }
.link-btn:before { background-color: var(--theme-color); }

.play-btn > i { background-color: #FFFFFF; color: var(--theme-color); }
.play-btn:hover > i { background-color: var(--sl-neon); color: var(--sl-noturna-800); }
.play-btn:hover:after,
.play-btn:hover::before { background-color: var(--sl-neon); }

/* =============================================================================
 * Títulos de seção
 * ========================================================================== */
.sub-title { color: var(--theme-color); font-weight: 600; letter-spacing: .06em; }
.sub-title:before,
.sub-title:after {
  background: var(--sl-gradient-h);
  height: 3px;
  border-radius: 3px;
}
.sub-title:after { background: linear-gradient(270deg, var(--sl-termica) 0%, var(--sl-violeta) 100%); }

.sec-title, .box-title, .widget_title, h1, h2, h3, h4, h5, h6 { color: var(--title-color); }
.text-theme { color: var(--theme-color) !important; }
.text-title { color: var(--title-color) !important; }

.widget_title:after { background: var(--sl-gradient-h) !important; }

/* =============================================================================
 * Superfícies claras — cartões, listas, ícones
 * ========================================================================== */
.bg-smoke { background-color: var(--sl-smoke) !important; }
.bg-title { background-color: var(--sl-noturna-800) !important; }
.bg-black { background-color: var(--sl-noturna-950) !important; }

.accordion-card {
  background-color: var(--sl-surface);
  border: 1px solid var(--sl-line);
  box-shadow: 0 10px 30px rgba(var(--sl-noturna-rgb), .05);
}
.accordion-card:hover { border-color: rgba(var(--sl-violeta-rgb), .25); }
.accordion-card .accordion-button { color: var(--sl-ink); }
.accordion-card .accordion-button:not(.collapsed) { color: var(--sl-violeta); }
.accordion-card .accordion-button:after { color: var(--sl-termica); }
.accordion-card .accordion-button:not(.collapsed):after { color: var(--sl-violeta); }
.accordion-card.style2 .accordion-button,
.accordion-card.style2 .accordion-body {
  background: var(--sl-smoke);
  border-color: var(--sl-line);
}
.accordion-card.style-4.active { background: var(--sl-noturna-800); }
.accordion-card.style-4 .accordion-button { border-color: rgba(var(--sl-noturna-rgb), .14); }

.checklist li { color: var(--sl-ink); }
.checklist li > i { color: var(--theme-color); }
.checklist.style-line li::before { background: var(--sl-gradient-h); }

.icon-btn { --icon-bg: var(--sl-smoke); border-color: var(--sl-line); color: var(--sl-ink); }

.th-social a {
  background-color: var(--sl-noturna-800);
  border: 1px solid var(--sl-noturna-500);
  color: var(--sl-on-dark-soft);
}
.th-social a:hover {
  background-color: var(--sl-termica);
  border-color: var(--sl-termica);
  color: var(--sl-noturna-800);
}
.th-social.style2 a { background: var(--sl-smoke); border: 0; color: var(--sl-ink); }
.th-social.style2 a:hover { background: var(--sl-violeta); color: #fff; }

/* Paginações e setas dos sliders */
.slider-pagination .swiper-pagination-bullet-active { background: var(--theme-color); }
.slider-arrow { background-color: var(--sl-violeta); color: #fff; border-color: var(--sl-violeta); }
.slider-arrow:hover { background-color: var(--sl-neon); color: var(--sl-noturna-800); border-color: var(--sl-neon); }

/* =============================================================================
 * Hero — a arte de fundo original não veio no export, então o próprio gradient
 * oficial faz o papel de plano de fundo (antes era um bloco #101010 chapado).
 * ========================================================================== */
#hero,
.th-hero-wrapper.hero-8 {
  background-color: var(--sl-noturna-900);
  background-image:
    radial-gradient(62% 62% at 97% 2%, rgba(var(--sl-termica-rgb), .48) 0%, rgba(var(--sl-termica-rgb), 0) 62%),
    radial-gradient(70% 80% at 0% 104%, rgba(var(--sl-violeta-rgb), .78) 0%, rgba(var(--sl-violeta-rgb), 0) 64%),
    radial-gradient(45% 45% at 58% -12%, rgba(var(--sl-eletrico-rgb), .16) 0%, rgba(var(--sl-eletrico-rgb), 0) 64%),
    linear-gradient(160deg, var(--sl-noturna-800) 0%, var(--sl-noturna-950) 100%);
  background-size: cover;
  position: relative;
}
/* Fio do gradient oficial fechando o hero */
#hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--sl-gradient-h);
  z-index: 3;
}
#hero .hero-title { color: #FFFFFF; }
#hero .hero-text { color: var(--sl-on-dark); opacity: .92; }
#hero .sub-title { color: var(--sl-neon); }
.hero-counter-wrap .counter-number-wrap { color: var(--sl-neon); }
.hero-counter-wrap .counter-title { color: var(--sl-on-dark); }

.etapa-hero { background-color: var(--sl-noturna-900); }

/* =============================================================================
 * Seções escuras (vídeo, CTA, festa, cronômetro, contato)
 * ========================================================================== */
.cta-area-1,
.video-2-bg-wrap {
  background-color: var(--sl-noturna-800);
  background-image:
    radial-gradient(78% 120% at 4% 0%, rgba(var(--sl-violeta-rgb), .88) 0%, rgba(var(--sl-violeta-rgb), 0) 62%),
    radial-gradient(62% 95% at 100% 100%, rgba(var(--sl-termica-rgb), .48) 0%, rgba(var(--sl-termica-rgb), 0) 62%),
    radial-gradient(45% 60% at 62% 0%, rgba(var(--sl-eletrico-rgb), .12) 0%, rgba(var(--sl-eletrico-rgb), 0) 62%);
}

/* =============================================================================
 * Fluxo Elétrico — metadados sobre fundo escuro
 * -----------------------------------------------------------------------------
 * Era a única cor do manual sem uso no site. Recebe um papel próprio: data,
 * local e distância nas superfícies escuras (13:1 sobre Gravidade Noturna).
 * Não tem versão clara — sobre branco dá 1.6:1 e não serve para texto.
 * ========================================================================== */
.etapa-hero-meta i,
.footer-widget .recent-post .recent-post-meta i,
.footer-widget .recent-post .recent-post-meta a:hover i {
  color: var(--sl-eletrico);
}

/* =============================================================================
 * Rodapé
 * ========================================================================== */
.footer-wrapper.footer-layout2 {
  --body-color: var(--sl-on-dark-soft);
  background-color: var(--sl-noturna-900);
  background-image:
    radial-gradient(80% 100% at 10% 0%, rgba(var(--sl-violeta-rgb), .40) 0%, rgba(var(--sl-violeta-rgb), 0) 60%),
    radial-gradient(70% 90% at 95% 10%, rgba(var(--sl-termica-rgb), .18) 0%, rgba(var(--sl-termica-rgb), 0) 60%);
  border-top: 4px solid transparent;
  border-image: var(--sl-gradient-h) 1;
}
/* Mesma regra do header sticky: fundo escuro -> marca em Explosão Térmica.
   Antes o rodapé usava a versão branca, o que deixava as duas aparições da
   marca sobre escuro em cores diferentes. */
.footer-widget .widget_title { color: #FFFFFF; }
.footer-widget .footer-text,
.footer-widget .widget_nav_menu a { color: var(--sl-on-dark-soft); }
.footer-widget .widget_nav_menu a:hover { color: var(--sl-neon); }
.copyright-wrap { background-color: var(--sl-noturna-950); }
.copyright-wrap .copyright-text { color: var(--sl-on-dark-soft); }
.copyright-wrap .copyright-text a { color: var(--sl-termica); }
.copyright-wrap .copyright-text a:hover { color: var(--sl-neon); }

/* =============================================================================
 * Voltar ao topo
 * ========================================================================== */
.scroll-top:after { color: var(--sl-violeta); border-color: var(--sl-line); }
.scroll-top .progress-circle path { stroke: var(--sl-termica); }
.scroll-top:hover:after { color: var(--sl-termica); }

/* =============================================================================
 * Campo Explosão Térmica — seções que antes eram brancas/papel
 * -----------------------------------------------------------------------------
 * O campo é uma tinta clara de #EC4F00 (--sl-field-bg), então a paleta de texto
 * segue a do contexto claro: título Gravidade Noturna, acento Carga Violeta,
 * botão violeta com texto branco. O laranja cheio aparece nos fios de acento e
 * nas seções escuras, onde ele é legível e não vira um bloco pesado.
 * ========================================================================== */
.sl-field-termica {
  position: relative;
  background-color: var(--sl-field-bg);
  /* O campo é quase branco, então o texto corrido volta ao padrão do site
     (#5C5473 dá 6.67:1 aqui) — sem exceção local. */
  --smoke-color: rgba(var(--sl-termica-rgb), .10);
  --th-border-color: rgba(var(--sl-noturna-rgb), .14);
}
/* Subida discreta na direção do tom cheio, alternando o lado entre campos
   consecutivos para eles não lerem como um retângulo único. */
.sl-field-termica::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgba(var(--sl-termica-rgb), .20) 0%,
    rgba(var(--sl-termica-rgb), 0) 46%);
}
.sl-field-termica--alt::before {
  background-image: linear-gradient(0deg,
    rgba(var(--sl-termica-rgb), .17) 0%,
    rgba(var(--sl-termica-rgb), 0) 42%);
}
.sl-field-termica > * { position: relative; z-index: 1; }

/* Com o campo quase branco o laranja cheio volta a alcançar os 3:1 de elemento
   gráfico (3.49:1), então os fios do sub-título devolvem a marca à seção — que
   perdeu o laranja ao clarear o fundo. */
.sl-field-termica .sub-title:before,
.sl-field-termica .sub-title:after { background: var(--sl-termica); opacity: 1; }

/* Cartão branco sobre o campo claro dá 1.06:1 — praticamente o mesmo tom.
   Quem recorta é a sombra, reforçada, mais uma hairline morna. Uma borda que
   atingisse os 3:1 formais contra o branco precisaria ser #B5836B, uma linha
   marrom pesada demais para uma página quase branca. */
.sl-field-termica .doc-card,
.sl-field-termica .accordion-card,
.sl-field-termica .patro-tiers {
  border: 1px solid #EAD5C6;
  box-shadow: 0 16px 40px rgba(var(--sl-noturna-rgb), .10),
              0 2px 6px rgba(var(--sl-noturna-rgb), .06);
}
.sl-field-termica .doc-card:hover {
  border-color: var(--sl-violeta);
  box-shadow: 0 22px 50px rgba(var(--sl-violeta-rgb), .18);
}

/* =============================================================================
 * Header: estado de rolagem
 * -----------------------------------------------------------------------------
 * A barra já nasce em Gravidade Noturna (bloco "Cabeçalho" acima), então o
 * scroll não troca campo de cor — ele aprofunda o campo: o tom desce para
 * noturna-950, entra a sombra e o fio do gradient oficial fecha a barra por
 * baixo, destacando-a do conteúdo que passa por trás.
 *
 * Dois gatilhos convivem: `.sl-sticky` vem do SiteHeader.vue já aos 40px e
 * cuida só das cores; `.sticky` é do main.js do tema, entra aos 500px e é
 * quem passa o wrapper para position:fixed. Separar os dois evita o salto de
 * layout que o fixed causaria logo no primeiro pixel de rolagem.
 * ========================================================================== */
.header-logo .logo-escuro { display: none; }

.th-header.header-default .sticky-wrapper.sl-sticky,
.th-header.header-default .sticky-wrapper.sticky {
  background: var(--sl-noturna-950);
  box-shadow: 0 10px 34px rgba(var(--sl-noturna-rgb), .38);
  border-bottom: 2px solid transparent;
  border-image: var(--sl-gradient-h) 1;
}

.sticky-wrapper.sl-sticky .header-logo .logo-claro,
.sticky-wrapper.sticky .header-logo .logo-claro { display: none; }
.sticky-wrapper.sl-sticky .header-logo .logo-escuro,
.sticky-wrapper.sticky .header-logo .logo-escuro { display: block; }

/* =============================================================================
 * Mobile: ênfase na marca no topo. Abaixo de 576px o .header-top some e o menu
 * vira hambúrguer, então a logo é o único elemento de identidade visível — mas
 * o tema a encolhe de 370px (desktop, tamanho natural) para 160px, e para
 * 130px em telas ≤360px, o que a deixa quase do tamanho do botão do menu.
 * Aqui ela volta a ter peso, com respiro vertical proporcional.
 * ========================================================================== */
@media (max-width: 991px) {
  .th-header.header-default .header-logo img { max-width: 240px; }
  .th-header.header-default .header-logo { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 575px) {
  .th-header.header-default .header-logo img { max-width: 210px; }
  .th-header.header-default .header-logo { padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 400px) {
  .th-header.header-default .header-logo img { max-width: 170px; }
  .th-header.header-default .header-logo { padding-top: 12px; padding-bottom: 12px; }
}

/* Abaixo de 992px o menu vira hambúrguer e sobra uma faixa vazia no meio do
 * header. A marca assume esse centro: a coluna dela ocupa a linha inteira e o
 * botão do menu sai do fluxo, ancorado à direita. Acima disso nada muda — o
 * menu desktop volta a dividir a linha com a logo à esquerda. */
@media (max-width: 991px) {
  .th-header .menu-area .row { position: relative; }
  .th-header .sl-brand-col {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
  }
  .th-header .sl-nav-col {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
  }
}