/* SOS Profissionais — Tema institucional
   Paleta oficial do Design System: grafite + gradiente amarelo->laranja->vermelho.
   Este tema não é customizável por cliente (só o próprio SOS Profissionais o usa),
   por isso as cores/fontes ficam fixas aqui, sem depender do motor corThema. */
:root{
  --bg: #1A1614; --paper: #241F1C; --ink: #FDF3E7; --ink-soft: #CBB89E; --muted: #8B7E70; --line: #3A322C;
  --amarelo: #FFC531; --laranja: #F2711C; --vermelho: #E0261C;
  --grad: linear-gradient(135deg, var(--amarelo), var(--laranja), var(--vermelho));
  --shadow: 0 24px 48px -24px rgba(0,0,0,0.5);
}
*{ box-sizing:border-box; }

/* Barra de rolagem horizontal fantasma entre ~992px e ~1300px (Medium
   Screen 1024x800, MacBook 1200x800) — o menu desktop tinha um overflow
   de largura que não aparecia visualmente (sem item cortado), mas
   inflava o scrollWidth da página inteira. Contido na origem, sem afetar
   layout visível.
   ATENÇÃO: NÃO colocar overflow-x:hidden em html/body — isso quebra o
   position:sticky do scroll video da hero (testado e revertido em
   15/09/2026, travava o scroll da página inteira). */
.cinkes_main_menu{ overflow-x:hidden; }

/* .cinkes_about_title (e títulos equivalentes do template) não tem cor
   própria — herda o cinza-quase-preto (#1a1a1a) que o Cinkes usa nas
   seções de fundo claro. Nosso tema é sempre fundo escuro (marca fixa,
   sem motor de cor por cliente), então esses títulos ficavam escuro
   sobre escuro (contraste ~1:1, invisível). O template só clareava via
   utilitário ".text-sm-white", que só age até 1199px — em telas maiores
   voltava a ficar invisível. Forçamos claro sempre, em qualquer largura. */
.cinkes_about_title{ color:#fff !important; }

/* Scrim escuro sobre a foto do hero — legibilidade do texto + evita
   distração de elementos coloridos da foto (mesmo padrão já usado em
   clip-and-cut/secao/hero.php, .cc-hero-scrim). */
.cinkes_slide-2::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(26,22,20,0.88) 0%, rgba(26,22,20,0.55) 55%, rgba(26,22,20,0.25) 100%);
}
.cinkes_slide-2 .cinkes_slide_wrapper{ position:relative; z-index:2; }

/* Fix definitivo do header — garante fundo escuro da marca independente
   de qualquer estilo herdado/injetado por JS do template. Opacidade
   ajustada pra ficar transparente o suficiente pra deixar o vídeo da
   hero aparecer por trás, mas sem perder legibilidade do menu. */
.cinkes_header_area, .cinkes_header_main_area{ background-color:rgba(26,22,20,0.55) !important; }

/* Linha divisória do rodapé do header — o template usa uma linha branca
   (.header-transparent{ border-bottom:1px solid rgba(255,255,255,0.3) }),
   trocada pela mesma linguagem neon laranja usada no botão do menu mobile. */
.header-transparent{
  border-bottom:1.5px solid var(--laranja) !important;
  box-shadow:0 1px 8px rgba(242,113,28,0.5) !important;
}

/* O template original troca o fundo do header pra BRANCO quando fica fixo
   (.header-sticky.sticky) e, junto, escurece o texto do menu (#1a1a1a) pra
   continuar legível sobre esse branco. Como forçamos o header a ficar
   sempre escuro (regra acima), esse texto escurecido ficava invisível
   (escuro sobre escuro) assim que o menu virava fixo — aqui mantemos os
   links/ícones claros também no estado .sticky. */
.header-transparent.sticky .cinkes_menu > ul > li > a,
.header-transparent.sticky .cinkes_menu li.has-menu-children::before,
.header-transparent.sticky .cinkes_quick_text a,
.header-transparent.sticky .cinkes_quick_icon{
  color:#fff !important;
}
.header-transparent.sticky .cinkes_quick_text span{
  color:var(--ink-soft) !important;
}
.header-transparent.sticky .cinkes_border_right-2{
  border-color:rgba(255,255,255,0.3) !important;
}

/* Fix do menu mobile — o CSS do template força display:block no <ul> do
   meanmenu por cima do inline style dele; controlamos manualmente com
   uma classe própria em vez de brigar com a especificidade original. */
.mean-container .mean-nav > ul{ display:none !important; }
.mean-container.sos-menu-open .mean-nav > ul{ display:block !important; }

/* Remove os blocos decorativos laranja atrás do logo (dois elementos
   diferentes do template original: .cinkes_logo_bg_before:before é a faixa
   larga atrás de todo o menu, só visível acima de ~1400px; .cinkes_logo::before
   é o quadrado menor atrás só da logo, sempre visível). Removendo os dois,
   a área da logo fica transparente igual ao resto do menu, sem cor
   competindo com a logo, que já é colorida por si só. */
.cinkes_logo_bg_before:before{ display:none !important; }
.cinkes_logo::before{ display:none !important; }

/* Logo maior, preenchendo melhor a altura do header — um pouco mais
   generosa em telas desktop, mais compacta no mobile. Também reduz o
   padding vertical original do template (38px) que sobrava demais em
   qualquer tamanho de tela, deixando um vão grande acima/abaixo da logo.
   Padding reduzido ainda mais (15/09) — o header ficava mais alto do que
   precisava, sobrando espaço morto acima/abaixo mesmo com a logo no
   tamanho certo. */
.cinkes_logo img{ max-height:64px !important; max-width:140px !important; width:auto !important; }
.cinkes_logo{ padding:5px 0 !important; }
@media (min-width:992px){
  .cinkes_logo img{ max-height:88px !important; max-width:194px !important; }
  .cinkes_logo{ padding:8px 0 !important; }
}

/* Botão do menu mobile (#nav-expander) — trocado o ícone branco liso por
   um contorno "neon" laranja da marca, mais na cara da identidade visual
   do que a linha branca padrão do template. */
#nav-expander{
  color:var(--laranja) !important;
  border:1.5px solid var(--laranja) !important;
  border-radius:8px !important;
  padding:4px 9px !important;
  box-shadow:0 0 6px rgba(242,113,28,0.7), 0 0 14px rgba(242,113,28,0.35) !important;
  transition:box-shadow .25s ease, color .25s ease !important;
}
#nav-expander:hover{
  box-shadow:0 0 10px rgba(242,113,28,0.9), 0 0 22px rgba(242,113,28,0.55) !important;
}
.header-transparent #nav-expander,
.header-transparent:is(.sticky) #nav-expander{
  color:var(--laranja) !important; /* sobrescreve o branco/laranja condicional original do template */
}

body{ margin:0; background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans', sans-serif; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
.wrap{ max-width:640px; margin:0 auto; padding:0 24px; }

nav.topnav{ padding:20px 0; display:flex; justify-content:space-between; align-items:center; max-width:640px; margin:0 auto; padding-left:24px; padding-right:24px; }
nav.topnav a{ color:var(--ink-soft); text-decoration:none; font-size:13px; font-weight:600; }
nav.topnav a:hover{ color:var(--laranja); }
.brand-mini{
  width:32px; height:32px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center; color:#241F1C;
  font-family:'Fraunces', serif; font-weight:700; font-size:14px;
}
.brand-link{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-weight:600; font-size:13px; }

header.hero{ padding:32px 0; text-align:center; }
.brand{
  width:60px; height:60px; border-radius:50%; margin:0 auto 20px;
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  color:#241F1C; font-family:'Fraunces', serif; font-weight:700; font-size:24px;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--laranja); display:inline-flex; align-items:center; gap:8px;
  background:rgba(242,113,28,0.12); padding:6px 12px 6px 10px; border-radius:100px; margin-bottom:18px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--laranja); flex:none; }
h1{
  font-family:'Fraunces', serif; font-weight:600; font-size:clamp(28px, 6vw, 38px); line-height:1.15;
  letter-spacing:-0.01em; margin:0 0 14px; color:#fff;
}
.lede{ font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:42ch; margin:0 auto; }

/* Hero rico (inspirado na estrutura do Cinkes) — foto real + tipografia grande */
.hero-rich{
  max-width:none; padding:0; margin:0 0 40px; position:relative; overflow:hidden;
  background:var(--bg);
}
.hero-rich-inner{
  max-width:1100px; margin:0 auto; padding:64px 24px 56px;
  display:grid; grid-template-columns:1fr; gap:36px; align-items:center; text-align:center;
  position:relative; z-index:2;
}
@media (min-width:900px){
  .hero-rich-inner{ grid-template-columns:1.1fr .9fr; text-align:left; padding:96px 40px 80px; gap:48px; }
}
.hero-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(480px 320px at 15% 20%, rgba(255,197,49,0.14), transparent 70%),
    radial-gradient(560px 380px at 85% 80%, rgba(224,38,28,0.14), transparent 70%);
}
.hero-rich h1{
  font-size:clamp(34px, 5.2vw, 56px); line-height:1.08; margin:0 0 18px;
}
.hero-rich .lede{ max-width:48ch; margin:0; font-size:16.5px; }
@media (min-width:900px){ .hero-rich .lede{ margin:0; } }
.hero-rich .eyebrow{ margin-bottom:22px; }
.hero-cta-row{ margin-top:30px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
@media (min-width:900px){ .hero-cta-row{ justify-content:flex-start; } }
.hero-photo-wrap{
  position:relative; width:100%; max-width:340px; margin:0 auto;
  aspect-ratio:1/1.05; border-radius:28px; overflow:hidden;
  background:var(--grad); padding:4px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.hero-photo-wrap img{
  width:100%; height:100%; object-fit:cover; border-radius:24px; display:block;
}
.hero-photo-badge{
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  background:var(--paper); border:1px solid var(--line); border-radius:100px;
  padding:8px 18px; font-size:12px; font-weight:700; color:#fff; white-space:nowrap;
  box-shadow:0 12px 24px -12px rgba(0,0,0,0.5);
}
@media (min-width:900px){
  .hero-photo-badge{ left:24px; transform:none; }
}

main{ padding-bottom:56px; }
section{ margin-top:40px; }
.section-title{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}

.manifesto{
  background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px 24px;
  border-left:3px solid var(--laranja);
}
.manifesto p{ margin:0 0 14px; font-size:15px; line-height:1.65; color:var(--ink-soft); }
.manifesto p:last-child{ margin-bottom:0; }
.manifesto strong{ color:#fff; }

.steps{ display:flex; flex-direction:column; gap:12px; }
.step-card{
  display:flex; align-items:flex-start; gap:14px; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.step-num{
  flex:none; width:32px; height:32px; border-radius:10px; background:rgba(242,113,28,0.15); color:var(--laranja);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:700; font-size:15px;
}
.step-title{ font-size:15px; font-weight:700; margin-bottom:3px; color:#fff; }
.step-desc{ font-size:13px; color:var(--ink-soft); line-height:1.5; }

/* "3 passos" — destaque visual pra frase "pra quem fala, o que prioriza
   e pra onde vai" (seção Sobre a Bússola SOS), que antes só existia
   corrida dentro do parágrafo, sem chamar atenção como os 3 pilares que
   realmente são. */
.sos-tres-passos{ display:flex; flex-wrap:wrap; gap:12px; }
.sos-passo-item{
  display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line);
  border-radius:100px; padding:8px 20px 8px 8px;
}
.sos-passo-num{
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--laranja); color:#241F1C;
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:700; font-size:14px;
}
.sos-passo-text{ font-size:14px; font-weight:700; color:#fff; white-space:nowrap; }

.tool-card, .video-card{
  display:flex; align-items:center; gap:14px; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:16px 18px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow);
  transition:border-color .15s ease, transform .1s ease;
}
.tool-card:hover, .video-card:hover{ border-color:var(--laranja); transform:translateY(-1px); }
.tool-icon{
  flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:19px; background:rgba(242,113,28,0.15); color:var(--laranja);
}
.video-icon{
  flex:none; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:19px; background:rgba(224,38,28,0.15); color:var(--vermelho);
}
.tool-text{ min-width:0; flex:1; }
.tool-title{ font-size:15px; font-weight:700; margin-bottom:3px; color:#fff; }
.tool-desc{ font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.4; }
.tool-arrow{ flex:none; color:var(--muted); font-size:18px; }

.testimonial-placeholder{
  background:var(--paper); border:1px dashed var(--line); border-radius:16px; padding:24px; text-align:center;
}
.testimonial-placeholder p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.6; }

.divider{
  display:flex; align-items:center; gap:10px; margin:36px 0 4px;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line); }

.cta{
  margin-top:32px; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:24px; text-align:center;
}
.cta h3{ font-family:'Fraunces', serif; font-weight:600; color:#fff; font-size:17px; margin:0 0 6px; }
.cta p{ color:var(--ink-soft); font-size:13px; margin:0 0 16px; }
.cta-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--laranja); color:#fff; text-decoration:none;
  font-weight:600; font-size:13.5px; padding:12px 22px; border-radius:50px; transition:background .15s ease;
}
.cta-btn:hover{ background:var(--vermelho); }

footer.site-footer{ padding:24px 0 40px; text-align:center; font-size:12px; color:var(--muted); }
footer.site-footer a{ color:var(--laranja); text-decoration:none; font-weight:600; }

.prose p{ font-size:15px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; }
.prose strong{ color:#fff; }
.prose p:last-child{ margin-bottom:0; }

.valores{ display:flex; flex-direction:column; gap:10px; }
.valor-item{
  display:flex; align-items:flex-start; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px;
}
.valor-marca{ flex:none; width:20px; height:20px; border-radius:6px; background:var(--grad); margin-top:2px; }
.valor-text{ font-size:14px; line-height:1.55; color:var(--ink-soft); }
.valor-text strong{ color:#fff; }

/* Scroll video da hero (bússola desnorteada -> aperto de mão), ativo só
   quando não há campanha nem foto do cliente configuradas (ver
   $usaScrollVideoHero em paginas/home.php). */
.sos-scrollvideo-hero{ position:relative; height:280vh; background:var(--bg); }
.sos-scrollvideo-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden; background:var(--bg);
}
/* Vídeo-fonte é 16:9. Em telas estreitas e muito altas (celular),
   manter o sticky em 100vh força o canvas a ampliar demais pra cobrir
   a altura toda, cortando as bordas do balão de texto da hero (achado
   16/09/2026, testado em device real). Reduzir a altura aqui deixa o
   "cover" do canvas (sos-hero-scroll-video.js) bem mais suave, sem
   precisar recortar o conteúdo importante do vídeo. */
@media (max-width:480px){
  .sos-scrollvideo-sticky{ height:78vh; }
}
.sos-scrollvideo-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0;
}
.sos-scrollvideo-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* O vídeo já traz o próprio texto embutido no balão (legível por si só)
     — não escurecemos mais a tela toda. Um gradiente colado no rodapé dá
     contraste pro subtítulo + botão "Comece Grátis" (único texto em HTML
     restante) E, chegando a 100% opaco exatamente na cor de fundo do
     resto do site (--bg, mesmo rgb 26,22,20), cria a fusão/dissolve com
     a próxima seção em vez de um corte seco. O resto do vídeo, acima
     dessa faixa, aparece limpo. */
  background:linear-gradient(to top, rgba(26,22,20,1) 0%, rgba(26,22,20,0) 20%);
}
/* Conteúdo em coluna ocupando a tela toda — título no TOPO (livre do
   rosto/balão do personagem, que fica na área central do vídeo) e
   subtítulo+CTA perto do rodapé (perto dos "pés" do personagem), a pedido
   explícito: o texto centralizado competia com o personagem no meio da
   tela, um dos dois se perdia. */
.sos-scrollvideo-content{
  position:absolute; inset:0; z-index:2; height:100% !important;
  /* .cinkes_slider_section (classe herdada do template) trava height em
     798px/670px em telas pequenas — sobrescrevemos pra ocupar 100% da
     tela de verdade, senão o bloco de baixo (subtítulo+CTA) fica preso
     bem acima do rodapé real da tela. Só sobra o bloco de baixo agora (o
     título foi removido — o vídeo já traz o texto no balão), por isso
     flex-end em vez de space-between: um único filho, empurrado pro
     rodapé, perto dos "pés" do personagem. */
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:10px;
}
@media (min-width:992px){
  .sos-scrollvideo-content{ padding-bottom:16px; }
}
.sos-scrollvideo-bottom{ width:100%; }

/* Indicador de scroll — sem isso, nada na tela sugere que dá pra rolar
   pra ver o resto da história (o "Enquanto isso..." é um gatilho de
   curiosidade, mas só funciona se a pessoa perceber que tem continuação).
   Some assim que o usuário começa a rolar (JS troca .is-hidden). */
.sos-scroll-hint{
  position:absolute; left:50%; bottom:220px; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:rgba(255,255,255,0.85); font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  opacity:1; transition:opacity .4s ease; pointer-events:none; text-shadow:0 1px 6px rgba(0,0,0,0.7);
}
.sos-scroll-hint.is-hidden{ opacity:0; }
.sos-scroll-hint-arrow{ font-size:20px; line-height:1; animation:sos-scroll-bounce 1.6s ease-in-out infinite; }
@keyframes sos-scroll-bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(7px); }
}
@media (min-width:992px){
  .sos-scroll-hint{ bottom:260px; }
}
@media (prefers-reduced-motion: reduce){
  .sos-scroll-hint-arrow{ animation:none; }
}

/* CTA reage no momento da resolução ("...para o seu negócio" termina de
   pintar) — um pulso de destaque bem na hora que a curiosidade se
   resolve, em vez de ficar estático a jornada toda. JS liga/desliga
   .is-resolved perto do fim do scroll. */
.sos-scroll-cta.is-resolved{
  animation:sos-cta-pulse 1.3s ease-out 1;
}
@keyframes sos-cta-pulse{
  0%{ box-shadow:0 0 0 0 rgba(242,113,28,0.75); transform:scale(1); }
  40%{ transform:scale(1.06); }
  70%{ box-shadow:0 0 0 20px rgba(242,113,28,0); transform:scale(1); }
  100%{ box-shadow:0 0 0 0 rgba(242,113,28,0); transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .sos-scroll-cta.is-resolved{ animation:none; }
}

/* Subtítulo sempre inteiro e legível (nunca some) — a frase toda fica
   visível o tempo todo, num tom apagado, e cada parte "pinta" de laranja
   conforme o scroll passa por ela (efeito de destaque progressivo, tipo
   pincelada). Uma vez pintada, continua laranja — não volta a apagar
   (cumulativo), resolvendo a crítica de que a frase de valor nunca
   aparecia inteira pra quem não rolasse a página. No desktop, a largura
   é limitada pra não invadir a área do personagem no vídeo (que fica
   mais ao centro/direita do quadro). */
.sos-scroll-subtitle{ display:block; line-height:1.5; }
@media (min-width:992px){
  .sos-scroll-subtitle{ max-width:560px; }
}
.sos-scroll-subtitle .sos-subtitle-seg{
  /* --muted (#8B7E70) ficava sem contraste suficiente contra o vídeo —
     precisava de esforço pra ler. Trocado por branco quase puro com
     sombra, que garante leitura em qualquer trecho do vídeo por trás. */
  color:rgba(255,255,255,0.92); font-weight:700; font-size:18px;
  text-shadow:0 1px 8px rgba(0,0,0,0.7);
  transition:color .4s ease;
}
@media (min-width:992px){
  .sos-scroll-subtitle .sos-subtitle-seg{ font-size:26px; }
}
.sos-scroll-subtitle .sos-subtitle-seg.is-active{
  color:var(--laranja);
}

/* Faixa "Assistir Jornada" — antes era a 2ª slide do Swiper; com o scroll
   video ativo vira uma faixa própria logo abaixo da hero, preservando a
   funcionalidade quando heroVideo estiver configurado sem foto/campanha. */
.sos-hero-video-banner{ padding:64px 0; text-align:center; background:var(--paper); }
.sos-hero-video-banner-title{
  font-family:'Fraunces', serif; font-weight:600; color:#fff;
  font-size:clamp(28px, 4vw, 42px); line-height:1.2; margin-bottom:14px;
}

/* Vitrine de clientes ("Our New Case Studies") — carrossel maior de
   cases reais, substituiu a versão anterior em selos pequenos
   (.cinkes_brand_area). Overflow de segurança no wrapper do Swiper pra
   evitar o mesmo "flash" de barra horizontal que tivemos na versão
   anterior enquanto o JS ainda está inicializando. */
.out-project-area .recent-project-active-1{ overflow-x:hidden; }