/* ============================================================
   BLUE POP sobre o v1 — camada de compatibilidade
   ------------------------------------------------------------
   O Blue Pop virou o DS principal da dyg em 20/08/2026. Este arquivo
   entra DEPOIS do colors_and_type.css e reescreve o valor dos tokens
   `--dyg-*` sem mexer no nome de nenhum: as 22 páginas continuam
   pedindo `var(--dyg-shadow-md)`, e o que muda é o que isso significa.

   O que o Blue Pop herda do v1 (não mexer): azul #1F7FFF, tinta #0A0A0A,
   paper #FAFAF7, prata, Geist + Geist Mono, e os banidos (verde,
   roxo/violeta/índigo, azul antigo #1279D9).

   O que ele TROCA, e é o que este arquivo faz:
     1. sombra com blur vira sombra dura, com offset sólido;
     2. glow do acento deixa de existir;
     3. gradiente deixa de existir;
     4. entra o Amarelo Sinal como destaque (bloco, texto em tinta dentro);
     5. os azuis de fora do sistema (sky, azure) voltam pro azul da marca.
   ============================================================ */

:root {
  /* --- cores do Blue Pop que o v1 não tinha --- */
  --pop-destaque:       #FFD60A;  /* amarelo sinal: SEMPRE bloco, texto em tinta */
  --pop-destaque-claro: #FFF1A8 !important;
  --pop-noite:          #062B66;  /* sombra dura sobre azul e sobre tinta */
  --pop-gelo:           #DCE9FF;  /* sombra dura sobre paper e sobre branco */
  --pop-areia:          #EDEAE2;
  /* Tinta e paper LITERAIS. A escala `--dyg-ink-*` do v1 se inverte por tema
     (no claro, `--dyg-ink-050` vira #FAFAF7), então ela não serve pra dizer
     "sempre preto": foi assim que o botão do topo sumiu na primeira passada. */
  --pop-tinta:          #0A0A0A;
  --pop-paper:          #FAFAF7;

  /* --- sombra: sólida, nunca blur --- */
  --dyg-shadow-sm: 2px 2px 0 var(--pop-gelo) !important;
  --dyg-shadow-md: 4px 4px 0 var(--pop-gelo);
  --dyg-shadow-lg: 6px 6px 0 var(--pop-gelo);
  --dyg-glow-accent: 4px 4px 0 var(--pop-noite);
  --dyg-accent-glow: var(--pop-noite);

  /* --- azuis de fora do sistema voltam pro azul da marca --- */
  --dyg-alt-sky:      #4A9CFF;
  --dyg-alt-azure:    #1F7FFF;
  --dyg-alt-deep:     #062B66;
  --dyg-accent-deeper: #062B66;
  --dyg-accent-soft:  #DCE9FF;   /* era um azul claro fora da paleta */

  /* --- o âmbar de aviso foi absorvido pelo amarelo sinal --- */
  --dyg-warning: var(--pop-destaque);
  /* positivo é azul: verde continua banido */
  --dyg-positive: var(--dyg-accent) !important;
}

/* No escuro a sombra dura é NOITE: gelo sobre tinta viraria um halo claro. */
[data-theme="dark"] {
  --dyg-shadow-sm: 2px 2px 0 var(--pop-noite);
  --dyg-shadow-md: 4px 4px 0 var(--pop-noite);
  --dyg-shadow-lg: 6px 6px 0 var(--pop-noite);
}

/* ============================================================
   MARCA
   O wordmark deixou de ser texto em Geist com um quadrado ao lado:
   agora é o desenho 01 módulo, em que nenhuma letra vem de fonte.
   O SVG herda a cor do contexto (`currentColor`) e o ponto fica azul.
   ============================================================ */
.logo svg { height: 26px !important; width: auto !important; display: block !important; }
.logo.lg svg { height: 30px !important; }
.logo .word, .logo .sq { display: none !important; }   /* resto do wordmark de texto */

/* ============================================================
   BANIDOS: gradiente e blur não existem no Blue Pop
   ============================================================ */
.depo .logo-mark { background: var(--dyg-accent) !important; }

/* ============================================================
   PELE BLUE POP — reformulação do desenho (21/08/2026)
   ------------------------------------------------------------
   A estrutura do site fica: mesmas páginas, mesmas seções, mesma copy.
   O que muda é a expressão, e ela tem regra:
     chapado (nada de gradiente) · sombra sólida (nada de blur) ·
     o azul é superfície · o destaque é bloco amarelo com texto em tinta ·
     número em Geist Mono · tilt no máximo 2°.
   Os seletores abaixo são os mesmos componentes repetidos nas 22 páginas,
   então uma regra aqui vale pro site inteiro.
   ============================================================ */

:root { --pop-sombra: var(--pop-gelo); }        /* cor da sombra dura sobre claro */
[data-theme="dark"], .manifesto, .cta-final, .footer { --pop-sombra: var(--pop-noite); }

/* ---------- BOTÕES: chapado, com sombra sólida e efeito de press ---------- */
.btn-primary, .btn-nav {
  background: var(--dyg-accent) !important;
  border: none !important;
  box-shadow: 4px 4px 0 var(--pop-noite) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease !important;
}
.btn-primary:hover, .btn-nav:hover {
  background: var(--dyg-accent-hi) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--pop-noite) !important;
}
.btn-primary:active, .btn-nav:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 0 0 0 var(--pop-noite) !important;
}
.btn-nav { box-shadow: 3px 3px 0 var(--pop-noite) !important; }

.btn-ink {
  background: var(--pop-tinta) !important;
  box-shadow: 4px 4px 0 var(--pop-sombra) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
.btn-ink:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--pop-sombra) !important;
}
.btn-ghost:hover { box-shadow: 3px 3px 0 var(--pop-sombra) !important; }

/* ---------- HERO ---------- */
.hero .halo { display: none !important; }                   /* o glow do acento não existe no Blue Pop */
.hero .grid-bg {                                 /* a grade vira PONTILHADA, que é a assinatura */
  background-image: radial-gradient(rgba(10,10,10,0.10) 1.4px, transparent 1.4px) !important;
  background-size: 22px 22px !important;
}
/* O destaque da página: UM bloco amarelo, com o texto em tinta por dentro (14:1). */
.hero .sub .strong, .hero .sub strong {
  background: var(--pop-destaque) !important;
  color: var(--pop-tinta) !important;
  padding: 0.04em 0.3em !important;
  font-weight: 800 !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}
.hero .trust {
  box-shadow: 3px 3px 0 var(--pop-sombra) !important;
  border: 2px solid var(--pop-tinta) !important;
}
.hero .trust .avatar.a1 { background: #1F7FFF !important; }   /* série de dados, ordem fixa */
.hero .trust .avatar.a2 { background: #FFD60A !important; }
.hero .trust .avatar.a3 { background: #DCE9FF !important; }
.hero .trust .avatar.a4 { background: #6A7280 !important; }

/* ---------- HALOS DE SEÇÃO: glow não existe ---------- */
.manifesto::before, .cta-final::before, .clients::before { background: none !important; }

/* ---------- CARTÕES: borda de 2px e sombra sólida ---------- */
.kpi.hero-kpi, .compare-col.us, .demo, .cta-form, .design-card {
  background: var(--pop-paper) !important;
  border: 2px solid var(--pop-tinta) !important;
  box-shadow: 5px 5px 0 var(--pop-sombra) !important;
}
.compare-col.us { background: var(--pop-gelo) !important; box-shadow: 5px 5px 0 var(--dyg-accent) !important; }
.compare-col.us .ico { background: var(--dyg-accent) !important; box-shadow: none !important; }
.kpi .kpi-bar > i { background: var(--dyg-accent) !important; }   /* progresso chapado */

.sqcard:hover, .result:hover, .site-card:hover, .depo:hover, .logo-slot:hover {
  box-shadow: 5px 5px 0 var(--pop-sombra) !important;
  transform: translate(-1px, -1px) !important;
}

/* ---------- ÍCONES E SELOS ---------- */
.icn { background: var(--pop-gelo) !important; border: 2px solid var(--pop-tinta) !important; }
.depo .who .av, .depo .logo-mark { background: var(--dyg-accent) !important; }
.pdot { box-shadow: 2px 2px 0 var(--pop-sombra) !important; }
.ptip { box-shadow: 3px 3px 0 var(--pop-noite) !important; }

/* As marcas de plataforma (Meta, Google, TikTok) são de terceiros e continuam
   com a cor delas. O marquee usa gradiente como MÁSCARA de borda, que é técnica
   e não decoração: também fica. */

/* ============================================================
   O AZUL COMO SUPERFÍCIE
   A tese do Blue Pop é essa: o azul deixa de ser acento e vira chão.
   A seção de fechamento é onde isso cabe sem competir com a leitura.
   Contraste medido do próprio DS: branco sobre azul dá 3,79:1 e só passa
   em manchete (24px+), então o parágrafo vai em TINTA (5,22:1).
   ============================================================ */
.cta-final {
  background: var(--dyg-accent) !important;
  --pop-sombra: var(--pop-noite);
}
.cta-final h2 { color: var(--pop-paper) !important; }
/* Amarelo em LETRA sobre azul dá 2,69:1 e o DS proíbe (é por isso que o
   destaque é bloco). Sobre azul, quem contrasta é a tinta: 5,22:1. A manchete
   fica em duas cores, paper e tinta, e o único bloco amarelo da página segue
   sendo o do hero. */
.cta-final h2 .accent { color: var(--pop-tinta) !important; }
.cta-final > .cta-inner > p { color: var(--pop-tinta) !important; }
.cta-final .eyebrow { color: var(--pop-tinta) !important; }
.cta-final .eyebrow .pulse { background: var(--pop-tinta) !important; }
/* O cartão do formulário é a superfície de leitura: branco, borda de tinta e
   sombra sólida em noite (gelo sumiria sobre o azul). */
.cta-final .cta-form {
  background: #FFFFFF !important;
  border: 2px solid var(--pop-tinta) !important;
  box-shadow: 6px 6px 0 var(--pop-noite) !important;
}