/* ══════════════════════════════════════════════════════════════════
   Barra global Edenware na página do SnapAway
   (adotada por /snapaway/{ar,de,en,es,fr,ja,ko,pt,zh}/index.html)

   A página é um dump de WordPress (ucraft) de tema CLARO, e a barra própria
   dela é transparente por cima da imagem do herói — `header-overlapped` é
   `position: absolute; top: 0`. A barra global entra como primeiro elemento do
   <body> (sticky, 56px), e sem ajuste a barra própria continuaria a `top: 0` do
   DOCUMENTO, ficando escondida atrás dela.

   Três ajustes, e nada mais: o bloco de contenção da barra própria, o que sai
   da barra (o logo duplicado, e a barra inteira no celular) e os tokens de cor.
   O resto da página (grade, animações, herói) não é tocado.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. A barra própria passa a começar DEPOIS da barra global ──────
   O conserto não é somar 56px a `top`: é dar à barra própria um bloco de
   contenção que comece depois da barra global. Com `position: relative` no
   wrapper, o `top: 0` do header absoluto passa a significar "logo abaixo da
   barra global", em qualquer largura e sem número mágico repetido em 9
   arquivos (e se a barra mudar de altura, isto continua certo).

   O wrapper é `body > .main-body > .main-layout > .header-and-main-rows` e
   contém o header E o `<main>`: por isso o `top: 0` dele é exatamente a borda
   de baixo da barra global, e o header continua flutuando sobre o herói, como
   o desenho original queria. */
.header-and-main-rows {
  position: relative;
}

/* ── 2. O logo duplicado sai ────────────────────────────────────────
   A barra global já mostra o ícone do SnapAway e o nome; logo abaixo dela, a
   barra própria repetia o mesmo logo (dois logos em sequência, o defeito que
   fez a barra própria sair do SonicAura). O MENU fica: são os atalhos da
   página ("Obter", "Por quê?", "Perguntas frequentes", "Contato") e tirá-los
   de uma página de vendas longa custaria navegação ao visitante.

   Escopo no header de propósito: `.ModuleLogo` também nomeia o módulo do
   rodapé em alguns templates do ucraft, e lá o logo é conteúdo. */
.header-rows.header-overlapped .ModuleLogo {
  display: none !important;
}

/* ── 3. No celular, a barra própria sai ─────────────────────────────
   Abaixo de ~768px o ucraft colapsa o menu da barra própria num hambúrguer e
   esconde os quatro links. Esse hambúrguer é um BOTÃO MORTO nesta cópia: o JS
   que abre o painel não veio no dump (o cloner trouxe só o HTML/CSS) e a
   página PUBLICADA também não o tem — conferido em 2026-09-30, o
   https://edenware.app/snapaway/pt/ serve dois scripts, nenhum deles do site.
   Ou seja: no celular a barra própria não faz nada além de mostrar (logo
   escondido + hambúrguer que não abre) por cima do herói.

   Em vez de deixar a promessa ali, a barra inteira sai da tela pequena: o menu
   do celular é a barra global logo acima (que tem o hambúrguer de verdade, com
   os serviços e o idioma). No desktop a barra fica — lá os quatro links
   aparecem e funcionam, porque são âncoras comuns.

   Nada de z-index aqui: a regra anterior tentava pôr o painel lateral acima da
   barra global, mas (a) o painel não abre nesta cópia e (b) quem define o
   z-index dele é uma regra mais específica do all.css, que ganharia da que eu
   escrevesse. Fica registrado para não ser "consertado" de novo às cegas. */
@media (max-width: 768px) {
  .header-rows.header-overlapped {
    display: none !important;
  }
}

/* ── 4. Tokens do shell ─────────────────────────────────────────────
   A regra do shell é que quem adota re-declara os tokens no PRÓPRIO CSS,
   nunca no arquivo compartilhado. Esta página é clara (fundo branco), então a
   barra segue a página: sem isto ela viria no azul escuro padrão do site e
   pareceria um bloco colado por cima de uma página de outra cor.

   A rampa é a do ícone do app (escudo lilás → ciano). O lilás do ícone
   (#7B2CF0) tem 6,07:1 com branco — passa, mas o token `--ew-primary` serve
   DOIS papéis (fundo de botão com texto branco por cima E cor de texto no
   rodapé), e para o papel de texto vale a parada um pouco mais fechada
   (#6D28D9, 7,10:1 contra o branco). O gradiente fica com a rampa inteira.

   O bloco vale para `:root` E para `[data-theme="light"]`: as páginas declaram
   `data-theme="light"` no <html> (é o que faz a barra buscar `/snapaway/icon.png`,
   o escudo colorido, em vez de `icon-white.png`, que sumiria no branco), e este
   arquivo é carregado DEPOIS do /edenware-theme.css — a ordem é o que faz
   estes valores vencerem os padrões do shell. */
:root,
[data-theme="light"] {
  --ew-bg: #FFFFFF;
  --ew-border: #E6E3EC;
  --ew-text: #1B1524;
  --ew-text-secondary: #5A5266;
  --ew-text-muted: #7A7288;
  --ew-primary: #6D28D9;          /* papel de FUNDO: botão ativo, avatar (texto branco por cima) */
  --ew-primary-light: #6D28D9;    /* papel de TEXTO: nome do serviço, link de entrar */
  --ew-primary-bg: rgba(123, 44, 240, .10);
  --ew-primary-gradient: linear-gradient(135deg, #7B2CF0, #20C0F0);
  --ew-nav-shadow: 0 1px 0 rgba(0, 0, 0, .10);
}

/* ── 5. Tema escuro da página ───────────────────────────────────────
   A página é um dump de tema CLARO: as cores estão escritas à mão em dois
   lugares — atributos `style=` no HTML e um bloco <style> no topo — e o
   `data-theme` do <html> só decidia o ícone da barra global. Para a página
   inteira ficar escura sem tocar em 9 arquivos de 500 KB (e sem perder o que
   já funciona em cada idioma), o escuro entra AQUI: `[data-theme="dark"]`
   re-declara os tokens e remapeia as cores claras, e cada página só troca o
   atributo do <html>.

   Por que isso vence o `style=` inline: declaração de autor com `!important`
   ganha de estilo inline sem `!important`. É o que permite trocar as cores sem
   reescrever o HTML. O casamento é pelo VALOR da cor (`[style*="#fff" i]`),
   que é o único dado estável nesses atributos.

   Paleta = a do SonicAura (a página irmã), para os dois apps ficarem na mesma
   família visual. A página de privacidade pede discrição: fundo quase preto
   azulado, texto claro, um lilás de destaque.

   Duas exceções deliberadas, documentadas no ponto onde aparecem: o botão do
   GitHub em `#trust` (fundo branco é a identidade do botão, e o texto escuro
   por cima continua legível) e o lightbox (já era escuro). */
[data-theme="dark"] {
  /* tokens do shell — a barra global segue a página */
  --ew-bg: #10121A;
  --ew-border: #2A3050;
  --ew-text: #EEF1F8;
  --ew-text-secondary: #9AA4C0;
  --ew-text-muted: #7B85A3;
  --ew-primary: #6D28D9;          /* papel de FUNDO: texto branco por cima */
  --ew-primary-light: #C4B5FD;    /* papel de TEXTO sobre fundo escuro */
  --ew-primary-bg: rgba(123, 44, 240, .22);
  --ew-nav-shadow: 0 1px 0 rgba(255, 255, 255, .08);

  /* tokens da página */
  --sa-bg: #10121A;
  --sa-bg-soft: #151827;
  --sa-surface: #181C2E;
  --sa-footer: #171A2B;
  --sa-border: #2A3050;
  --sa-text: #EEF1F8;
  --sa-body: #C3CADD;
  --sa-muted: #9AA4C0;
  --sa-muted-dim: #7B85A3;
  --sa-accent: #C4B5FD;
  --sa-warn-bg: #2A1618;
  --sa-ok-bg: #10261F;
}

/* Tokens do PRÓPRIO builder (files/all.css): os títulos e parágrafos das seções
   que não têm `style=` nem classe de cor caem em `--h*-color`/`--p-color`, que
   apontam para `--primary-color` (#353535, quase invisível no escuro). Mexer no
   token cobre todas as seções de uma vez — e só essas três variáveis, porque em
   all.css `--primary-color` é usada exclusivamente em papéis de TEXTO (título,
   parágrafo, link, rótulo de formulário). O seletor com `html` na frente é
   deliberado: `:root` e `[data-theme="dark"]` empatam em especificidade e o
   desempate passaria a depender da ordem de carregamento. */
html[data-theme="dark"] {
  --primary-color: #EEF1F8;
  --link-color: #C4B5FD;
  --link-color-hover: #EEF1F8;
}

/* A página em si. O `body` tem `background:#FFFFFF` inline; sem esta regra ele
   seria remapeado para `--sa-surface` junto com os cartões e a hierarquia
   fundo/cartão desapareceria. Por isso o seletor com `body[style]`: sem ele a
   regra de `[style*="background:#fff"]` (dois atributos) ganharia desta e o
   fundo da página sairia igual ao dos cartões. */
html[data-theme="dark"] body,
html[data-theme="dark"] body[style] {
  background: var(--sa-bg) !important;
  color: var(--sa-body) !important;
}

/* ── 5.1 Superfícies (estilo inline) ────────────────────────────────
   `background:#fff` casa também `#ffffff` e `#FFFFFF` (o prefixo é comum), por
   isso uma regra só cobre as três grafias. */
html[data-theme="dark"] [style*="background:#fff" i],
html[data-theme="dark"] [style*="background: #fff" i] {
  background: var(--sa-surface) !important;
}
/* As duas grafias, `background:#f8fafc` e `background: #f8fafc`, aparecem: os
   atributos `style=` foram escritos em sessões diferentes do builder. Por isso
   cada valor leva dois seletores, um com espaço e um sem. */
html[data-theme="dark"] [style*="background:#f8fafc" i],
html[data-theme="dark"] [style*="background: #f8fafc" i] {
  background: var(--sa-bg-soft) !important;
}
html[data-theme="dark"] [style*="background:#fef2f2" i],
html[data-theme="dark"] [style*="background: #fef2f2" i] {
  background: var(--sa-warn-bg) !important;
}
html[data-theme="dark"] [style*="background:#ecfdf5" i],
html[data-theme="dark"] [style*="background: #ecfdf5" i] {
  background: var(--sa-ok-bg) !important;
}
/* `#1f193b` é o rodapé (escuro de propósito); só um tom acima do fundo para
   não colar na página. `#320315` e `#fb7400` são faixas escuras/laranja que já
   funcionam no escuro. */
html[data-theme="dark"] [style*="background:#1f193b" i],
html[data-theme="dark"] [style*="background: #1f193b" i],
html[data-theme="dark"] [style*="background-color:#1f193b" i],
html[data-theme="dark"] [style*="background-color: #1f193b" i] {
  background: var(--sa-footer) !important;
}
html[data-theme="dark"] [style*="e2e8f0" i],
html[data-theme="dark"] [style*="#000000" i][style*="border" i] {
  border-color: var(--sa-border) !important;
}

/* ── 5.2 Texto (estilo inline) ──────────────────────────────────────
   Aqui o casamento é pelo VALOR puro (`[style*="#334155"]`), sem o nome da
   propriedade. É seguro porque, no inventário das 9 páginas, cada um destes
   tons escuros só aparece como cor de TEXTO — com uma exceção conhecida,
   `background:#0f172a`, em faixas de seção: nessas o texto é claro e continua
   claro depois do remapeamento, então a regra acerta nos dois casos. Já o
   contrário não vale: `#fff` é fundo E texto, e por isso os FUNDOS acima são
   casados com o nome da propriedade.
   As cores que já são claras (`#fff`, `#cbd5e1`, `#94a3b8`, `#f87171`,
   `#8d85af`, `#fb7400`) ficam como estão: continuam legíveis no escuro. */
html[data-theme="dark"] [style*="#060606" i],
html[data-theme="dark"] [style*="#000000" i],
html[data-theme="dark"] [style*="#0f172a" i],
html[data-theme="dark"] [style*="#291056" i],
html[data-theme="dark"] [style*="#1f1f1f" i] {
  color: var(--sa-text) !important;
}
html[data-theme="dark"] [style*="#334155" i] {
  color: var(--sa-body) !important;
}
html[data-theme="dark"] [style*="#475569" i] {
  color: var(--sa-muted) !important;
}
html[data-theme="dark"] [style*="#065f46" i] {
  color: #6EE7B7 !important;
}
/* `#6D28D9` é o lilás do app nos números de passo e em destaques; sobre o
   cartão escuro ele mede 2,38:1, então sobe para o lilás claro. */
html[data-theme="dark"] .step-number,
html[data-theme="dark"] [style*="#6D28D9" i] {
  color: var(--sa-accent) !important;
}
/* o `#291056` também aparece como `fill` dos ícones (checklists); trocar a cor
   sem trocar o fill deixaria um ícone quase invisível */
html[data-theme="dark"] [style*="fill:#291056" i],
html[data-theme="dark"] [style*="fill: #291056" i] {
  fill: var(--sa-accent) !important;
}

/* ── 5.3 Componentes do bloco <style> da página ─────────────────────
   Estes não vêm de `style=`, vêm de classe, então o remapeamento por valor não
   os alcança. */
html[data-theme="dark"] .usecase-card,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .popleave-card,
html[data-theme="dark"] #accordion64 .accordion-item-content,
html[data-theme="dark"] #accordion65 .accordion-item-content {
  background: var(--sa-surface) !important;
  border-color: var(--sa-border) !important;
}
html[data-theme="dark"] .popleave-secondary {
  background: var(--sa-bg-soft) !important;
  border-color: var(--sa-border) !important;
}
html[data-theme="dark"] .popleave-primary {
  background: var(--sa-bg-soft) !important;
  border: 1px solid var(--sa-border) !important;
}
html[data-theme="dark"] .usecase-title,
html[data-theme="dark"] .usecase-roles-title,
html[data-theme="dark"] .role-title,
html[data-theme="dark"] .step-title,
html[data-theme="dark"] .popleave-title,
html[data-theme="dark"] .pricing-amount,
html[data-theme="dark"] #accordion64 .accordion-item-title,
html[data-theme="dark"] #accordion65 .accordion-item-title {
  color: var(--sa-text) !important;
}
html[data-theme="dark"] .usecase-text,
html[data-theme="dark"] .usecase-roles-sub,
html[data-theme="dark"] .role-text,
html[data-theme="dark"] .step-text,
html[data-theme="dark"] .popleave-sub,
html[data-theme="dark"] .pricing-list li {
  color: var(--sa-body) !important;
}
html[data-theme="dark"] .role-benefit {
  background: rgba(196, 181, 253, 0.14) !important;
  color: var(--sa-accent) !important;
}
html[data-theme="dark"] #accordion64 .accordion-item .icon-container,
html[data-theme="dark"] #accordion65 .accordion-item .icon-container,
html[data-theme="dark"] #navigation-40 li.page > a:hover {
  color: var(--sa-accent) !important;
}
html[data-theme="dark"] #accordion64 .accordion-item,
html[data-theme="dark"] #accordion64 .accordion-item-content,
html[data-theme="dark"] #accordion65 .accordion-item,
html[data-theme="dark"] #accordion65 .accordion-item-content {
  border-color: var(--sa-border) !important;
}
html[data-theme="dark"] div.download-button {
  border-color: var(--sa-border) !important;
}

/* A única superfície que continua branca: o botão do GitHub em `#trust` não é
   um cartão, é a marca do botão. Precisa vir DEPOIS da regra de `background:#fff`
   e ser mais específica, senão o rótulo escuro ficaria escuro sobre escuro. */
html[data-theme="dark"] #trust a[style*="background:#fff" i] {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* O rodapé cruzado (outros apps) é injetado por script e herda `#353535` de uma
   regra do all.css que não está no inventário acima. */
html[data-theme="dark"] .ew-cross-inner p {
  color: var(--sa-muted) !important;
}

/* ── 6. Galeria de capturas centralizada ────────────────────────────
   O módulo (`ModuleImage`) tem `display:block; max-width:514px` inline e vive
   dentro de um `.column-container` que é flex; sem margem automática ele cola
   na esquerda da coluna (medido: x=0 em viewport de 878px). O `align-center`
   do all.css perde porque depende de `.module-container` — e o `pt` nem tem
   esse wrapper. Margem automática resolve nas 9 línguas, sem tocar no HTML. */
.module.ModuleImage {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 7. Botão do chat mais discreto ──────────────────────────────────────────
   O padrão do widget para o SnapAway é `linear-gradient(135deg,#4299d9,#48038a)`:
   azul saturado virando roxo. Numa página #10121A ele vira o objeto mais colorido
   da tela e puxa o olho do herói para o canto. O azul continua — é a cor do app —
   mas desce até o próprio fundo da página.

   Efeito colateral bom: branco sobre #4299d9 dava 3.09:1, abaixo de AA para o
   rótulo de 13px e para o título do chat. Sobre #2f6f9e (mesmo matiz, mais
   fundo) dá 5.40:1. A variável alimenta o botão, o cabeçalho, a bolha do usuário
   e o botão de enviar, então o ajuste resolve os quatro de uma vez. */
chat.edenware-widget {
  --edenware-chat-bg: linear-gradient(135deg, #2f6f9e 0%, #10121a 100%);
}

/* Onde o gradiente encontra o fundo da página o anel de 1px é o que resta para o
   círculo não se dissolver no conteúdo. `box-shadow` não mexe no layout, então
   os 88px do widget ficam intactos. */
chat.edenware-widget .edenware-chat-button {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 28px rgba(0, 0, 0, 0.55) !important;
}