@charset "UTF-8";
/* ==========================================================================
   Judan — folha de estilo única
   Mobile-first. Fundo escuro, um dourado de destaque, títulos em Anton.
   Sumário:
     01 Tokens            07 Problema          13 Chamada final
     02 Base              08 Serviços          14 Rodapé
     03 Tipografia        09 Diferencial       15 WhatsApp fixo
     04 Botões            10 Como funciona     16 Aviso de cookies
     05 Cabeçalho         11 Resultados        17 Movimento reduzido
     06 Hero              12 Dúvidas
   ========================================================================== */

/* 01 — TOKENS ============================================================= */

:root {
  /* Paleta bruta */
  --preto-900: #0a0b09;
  --preto-800: #10120e;
  --preto-700: #161913;
  --ouro-500: #e2b13c;
  --ouro-700: #7a5512;
  --creme-100: #f2f3ec;
  --branco: #ffffff;
  --cinza-300: #a4a89c;
  --cinza-500: #74786d;
  --tinta-900: #0d0f0b;
  --tinta-600: #575b52;

  /* Papéis — seções escuras */
  --fundo-escuro: var(--preto-900);
  --superficie-escura: var(--preto-700);
  --texto-escuro-forte: #f4f6ef;
  --texto-escuro-suave: var(--cinza-300);
  --texto-escuro-mudo: var(--cinza-500);
  --borda-escura: rgba(255, 255, 255, 0.09);
  --borda-escura-forte: rgba(255, 255, 255, 0.17);

  /* Papéis — seções claras */
  --fundo-claro: var(--creme-100);
  --superficie-clara: var(--branco);
  --texto-claro-forte: var(--tinta-900);
  --texto-claro-suave: var(--tinta-600);
  --borda-clara: rgba(13, 15, 11, 0.08);

  /* Destaque — trocar só aqui muda o site inteiro */
  --destaque: var(--ouro-500);
  --destaque-hover: #ecc25e;
  --destaque-suave: rgba(226, 177, 60, 0.13);
  --destaque-brilho: rgba(200, 145, 35, 0.32);
  --destaque-brilho-fraco: rgba(170, 120, 30, 0.2);
  --sobre-destaque: var(--tinta-900);

  /* Tipografia */
  --fonte-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --fonte-ui: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --t-h2: clamp(2.625rem, 1.9rem + 3vw, 4.5rem);
  --t-h1: clamp(3.5rem, 1.6rem + 7.6vw, 6.875rem);

  /* Ritmo */
  --largura-max: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --secao-y: clamp(4.5rem, 2.8rem + 6vw, 8rem);
  --raio: 20px;
  --raio-cheio: 999px;

  --transicao: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --altura-cabecalho: 76px;
}

/* 02 — BASE =============================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--altura-cabecalho); -webkit-text-size-adjust: 100%; }
body {
  background: var(--fundo-escuro); color: var(--texto-escuro-forte);
  font-family: var(--fonte-ui); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Rede de segurança contra rolagem lateral: o clip corta o que passar da
   tela sem criar rolagem (o overflow-x do body sozinho não segura o iOS). */
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; border-radius: 6px; }
/* Sobre fundo dourado ou claro o contorno dourado some; lá ele fica escuro. */
.cta :focus-visible, .secao--clara :focus-visible { outline-color: var(--tinta-900); }
.secao--clara .dor-card--virada :focus-visible { outline-color: var(--destaque); }

.container { width: 100%; max-width: calc(var(--largura-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.secao { padding: var(--secao-y) 0; --onda-cor: var(--fundo-escuro); --onda-h: clamp(28px, 5.6vw, 80px); }
.secao--clara { background: var(--fundo-claro); color: var(--texto-claro-forte); --onda-cor: var(--fundo-claro); }
/* Passagem curva entre as seções (o rodapé continua reto): cada seção desenha a
   onda acima de si, na própria cor, por cima do fim da seção anterior. Uma
   seção escondida não desenha nada; seções da mesma cor ficam sem curva visível. */
main > .secao { position: relative; }
main > .secao::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; height: var(--onda-h); margin-bottom: -1px;
  background: var(--onda-cor); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C250,78 460,6 760,28 C1050,50 1240,74 1440,34 L1440,80 L0,80 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C250,78 460,6 760,28 C1050,50 1240,74 1440,34 L1440,80 L0,80 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Alterna o desenho da onda para não repetir igual em toda passagem. */
main > .secao:nth-of-type(odd)::after { transform: scaleX(-1); }
/* Passagens animadas (ondas.js): cada seção com data-onda ganha a sua e a onda fixa sai. */
.tem-onda-viva::after { display: none; }
.onda-viva {
  position: absolute; left: 0; bottom: 100%; z-index: 1; display: block; width: 100%;
  height: clamp(40px, 7vw, 110px); margin-bottom: -1px; overflow: visible; pointer-events: none;
}
.onda-viva .preenche { fill: var(--onda-cor); }
.onda-viva .preenche-ouro { fill: var(--destaque); }
.onda-borda { stroke: var(--destaque); stroke-width: 1.5; stroke-opacity: 0.45; }
.onda-luz { stroke: #f7df92; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 220 1600; }
.onda-fio { stroke: rgba(226, 177, 60, 0.5); stroke-width: 1.2; }
/* O pulso fica em cima da divisa entre duas seções claras, metade para cada lado. */
.onda-viva--pulso {
  height: clamp(44px, 5vw, 72px); margin-bottom: calc(clamp(44px, 5vw, 72px) / -2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.onda-linha { stroke: var(--destaque); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.onda-linha--brilho { stroke-width: 7; stroke-opacity: 0.18; }
.onda-ponto { fill: #f7df92; }
.onda-ponto-halo { fill: rgba(226, 177, 60, 0.3); }
.pilha { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: var(--destaque); color: var(--sobre-destaque); font-weight: 600;
}
.pular:focus { top: 12px; }
.sentinela-topo { position: absolute; top: 0; left: 0; width: 1px; height: 80px; }

/* 03 — TIPOGRAFIA ========================================================= */

/* A entrelinha 1.04 é o mínimo para o til e o circunflexo em caixa alta não
   encostarem na linha de cima. Só o h1, que não tem acento, usa menos. */
.titulo { font-family: var(--fonte-display); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: 0.005em; }
.h2 { font-size: var(--t-h2); }
.ouro { color: var(--destaque); }
.lead { font-size: var(--t-lead); color: var(--texto-escuro-suave); max-width: 58ch; }
.secao--clara .lead { color: var(--texto-claro-suave); }
.marca-texto {
  background: linear-gradient(transparent 12%, var(--destaque) 12% 92%, transparent 92%);
  padding: 0 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.selo {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px;
  border: 1px solid var(--borda-escura-forte); border-radius: var(--raio-cheio);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 12px var(--destaque); }
.selo--claro { border-color: rgba(13, 15, 11, 0.18); }
.selo--claro i { background: var(--texto-claro-forte); box-shadow: none; }

/* 04 — BOTÕES ============================================================= */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 0 9px 0 26px;
  border-radius: var(--raio-cheio); font-weight: 600; font-size: 1rem; white-space: nowrap;
  transition: transform var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(0.98); }
.botao .seta { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: transform var(--transicao); }
.botao:hover .seta { transform: rotate(45deg); }
.botao--ouro { background: var(--destaque); color: var(--sobre-destaque); box-shadow: 0 12px 40px -12px rgba(226, 177, 60, 0.55); }
.botao--ouro:hover { background: var(--destaque-hover); }
.botao--ouro .seta { background: var(--sobre-destaque); color: var(--destaque); }
.botao--fantasma { padding: 0 28px; border: 1px solid var(--borda-escura-forte); }
.botao--fantasma:hover { background: rgba(255, 255, 255, 0.05); }
.botao--escuro { background: var(--tinta-900); color: var(--texto-escuro-forte); }
.botao--escuro:hover { background: #22271d; }
.botao--escuro .seta { background: var(--destaque); color: var(--sobre-destaque); }
.botao--claro { background: var(--texto-escuro-forte); color: var(--tinta-900); }
.botao--claro:hover { background: var(--branco); }
.botao--claro .seta { background: var(--tinta-900); color: var(--texto-escuro-forte); }
.botao--contorno { padding: 0 28px; border: 1.5px solid var(--tinta-900); color: var(--tinta-900); }
.botao--contorno:hover { background: rgba(13, 15, 11, 0.06); }
.acoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* No celular os botões empilhados ficam com a mesma largura, e um texto
   longo quebra em duas linhas em vez de sair da tela. */
@media (max-width: 479px) {
  .acoes .botao { width: 100%; white-space: normal; text-align: center; }
}

/* 05 — CABEÇALHO ========================================================== */

.cabecalho { position: absolute; inset: 0 0 auto; z-index: 50; padding: 18px 0; transition: background-color var(--transicao), padding var(--transicao); }
.cabecalho-interno { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cabecalho--fixado {
  position: fixed; padding: 10px 0; background: rgba(10, 11, 9, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borda-escura);
  animation: descer 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes descer { from { transform: translateY(-100%); } }

.marca { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; font-family: var(--fonte-display); font-size: 1.75rem; letter-spacing: 0.05em; line-height: 1; }
.marca-icone {
  width: 38px; height: 38px; border-radius: 10px; background: var(--destaque); color: var(--sobre-destaque);
  display: grid; place-items: center; font-size: 1.5625rem; line-height: 1; letter-spacing: 0; transform: skewX(-8deg);
}
.marca-pilha { display: flex; flex-direction: column; align-items: flex-start; }
.marca-sub {
  margin-top: 4px; font-family: var(--fonte-ui); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.2em; line-height: 1; text-transform: uppercase; color: var(--destaque);
}
.marca-icone--peq { width: 34px; height: 34px; font-size: 1.375rem; }

/* Celular: o menu vira painel em tela cheia, aberto pelo botão. */
.menu {
  position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 96px var(--gutter) 40px; background: var(--fundo-escuro);
  opacity: 0; visibility: hidden; transition: opacity var(--transicao), visibility var(--transicao);
}
.menu a:not(.botao) { font-family: var(--fonte-display); font-size: 2.5rem; text-transform: uppercase; line-height: 1.25; color: var(--texto-escuro-forte); }
.menu a[aria-current="true"] { color: var(--destaque); }
.menu-cta { margin-top: 24px; align-self: flex-start; padding: 0 28px; }
.cabecalho--menu-aberto .menu { opacity: 1; visibility: visible; transition: opacity var(--transicao), visibility 0s; }
/* O backdrop-filter do cabeçalho fixado prenderia o painel (position: fixed)
   dentro da altura do cabeçalho; com o menu aberto ele sai. */
.cabecalho--menu-aberto { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; border-color: transparent; }
.menu-travado { overflow: hidden; }
.cabecalho-botoes { display: flex; align-items: center; gap: 10px; }
.cabecalho-cta { display: none; min-height: 48px; font-size: 0.875rem; padding: 0 6px 0 20px; }
.cabecalho-cta .seta { width: 36px; height: 36px; }
/* Sem a bolinha da seta, o respiro precisa ser igual dos dois lados. */
.cabecalho-cta--secundaria { padding: 0 20px; }

.botao-menu { position: relative; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--borda-escura-forte); display: grid; place-items: center; }
.botao-menu path { transition: transform var(--transicao), opacity var(--transicao); transform-origin: 12px 12px; }
.cabecalho--menu-aberto .traco-1 { transform: translateY(5px) rotate(45deg); }
.cabecalho--menu-aberto .traco-2 { opacity: 0; }
.cabecalho--menu-aberto .traco-3 { transform: translate(0, -5px) rotate(-45deg); d: path('M4 17h16'); }
.sem-js .botao-menu { display: none; }

/* 06 — HERO E FAIXA ======================================================= */

.hero {
  position: relative; overflow: hidden; padding: 140px 0 130px;
  background:
    radial-gradient(55% 50% at 50% 4%, var(--destaque-brilho), transparent 72%),
    radial-gradient(38% 42% at 8% 34%, var(--destaque-brilho-fraco), transparent 70%),
    radial-gradient(34% 46% at 94% 62%, rgba(170, 120, 30, 0.16), transparent 70%),
    var(--fundo-escuro);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 130px, rgba(255, 255, 255, 0.03) 130px 131px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
/* Vídeo de fundo: um só, em loop (app.js); entra suave e fica com opacidade total atrás do conteúdo. */
.hero-videos { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
}
.hero-video--pronto { opacity: 1; }
/* Com o vídeo em opacidade total, as linhas claras dele passam atrás das letras.
   Uma sombra escura em volta do texto (da hero e do cabeçalho, que fica por cima
   dela) separa uma coisa da outra sem mudar nenhuma cor. O título, maior, leva
   uma sombra mais larga. Botões de fundo sólido e o ícone do logo ficam sem. */
.hero-conteudo, .cabecalho { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 0, 0, 0.7); }
.hero-conteudo h1 { text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9), 0 4px 22px rgba(0, 0, 0, 0.85), 0 0 46px rgba(0, 0, 0, 0.65); }
.botao--ouro, .botao--claro, .marca-icone { text-shadow: none; }
.hero-conteudo { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.hero h1 { font-size: var(--t-h1); line-height: 0.94; }
/* Frase mais longa que o título original: fonte menor para caber em poucas
   linhas. No celular o título cresce com a tela até 36px (o teto é a linha
   "que geram resultados." caber inteira em 320px); a partir de ~580px vale a
   fórmula do desktop. */
.hero h1.titulo--longo {
  width: 100%; max-width: none; margin-inline: auto;
  font-size: clamp(1.75rem, max(0.8rem + 4vw, min(0.25rem + 7.5vw, 2.25rem)), 5.25rem); line-height: 0.98;
  text-wrap: balance; overflow-wrap: normal;
}
.hero-titulo-principal { display: block; }
.hero h1 .hero-titulo-linha { display: inline-block; white-space: nowrap; }
/* A frase de baixo tem a mesma largura da linha mais longa do título. Como a fonte
   é a mesma, a proporção em "em" vale em qualquer tela (medida: título 9,28em,
   frase 27,03em). No celular ela quebra em duas linhas e a mais longa acompanha o título. */
.hero h1 .titulo-menor { display: block; font-size: 0.595em; line-height: 1.15; margin-top: 0.6em; letter-spacing: 0.04em; }
.hero h1 .titulo-menor .ouro { display: block; }
.hero .lead { max-width: 600px; }
.plataformas { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.plataformas .rotulo { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-escuro-mudo); font-weight: 600; }
.plataformas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-weight: 600; color: var(--texto-escuro-suave); font-size: 0.9375rem; }
/* A estrela só aparece quando a lista cabe numa linha; quebrando, ela ficaria
   pendurada no fim da linha de cima. */
.plataformas .sep { display: none; color: var(--destaque); opacity: 0.6; }

/* Cartões ilustrativos do hero. Até 1279px os quatro ficam embaixo dos botões,
   em duas colunas (Meta Ads e Instagram de um lado, Google e WhatsApp do
   outro, como nas laterais do computador). De 1280px a 1439px os dois de cima
   flutuam nas laterais; os dois de baixo só entram a partir de 1440px, porque
   antes disso encostariam nos botões e na lista de plataformas. */
.flutuantes {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto;
  grid-auto-flow: column; gap: 14px; max-width: 560px; margin: 48px auto 0; padding: 0 var(--gutter);
}
.card-ui {
  display: block; padding: 16px; border-radius: 16px; text-align: left;
  background: rgba(24, 27, 21, 0.82); border: 1px solid var(--borda-escura-forte);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75); font-size: 0.8125rem; line-height: 1.45;
}
.card-ui .topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 600; }
.card-ui .mudo { color: var(--texto-escuro-mudo); font-size: 0.72rem; font-weight: 500; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--destaque); font-weight: 600; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 8px var(--destaque); }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 66px; }
.barras span { flex: 1; border-radius: 4px 4px 2px 2px; background: rgba(255, 255, 255, 0.13); }
.rodape-card { display: flex; justify-content: space-between; margin-top: 12px; color: var(--texto-escuro-suave); font-size: 0.75rem; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 0.66rem; color: var(--texto-escuro-mudo); }
.dias b { display: block; height: 26px; margin-top: 5px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
/* Temperatura (cards Meta Ads e Redes sociais): t1 é a mais fria e t8 a mais quente. */
:is(.dias b, .barras span).t1 { background: rgba(255, 255, 255, 0.07); }
:is(.dias b, .barras span).t2 { background: rgba(226, 177, 60, 0.14); }
:is(.dias b, .barras span).t3 { background: rgba(226, 177, 60, 0.26); }
:is(.dias b, .barras span).t4 { background: rgba(226, 177, 60, 0.42); }
:is(.dias b, .barras span).t5 { background: rgba(226, 177, 60, 0.66); }
:is(.dias b, .barras span).t6 { background: var(--destaque); }
:is(.dias b, .barras span).t7 { background: linear-gradient(180deg, #f5b13a, #ef6a1a); box-shadow: 0 0 14px rgba(239, 106, 26, 0.7); }
:is(.dias b, .barras span).t8 { background: linear-gradient(180deg, #ff8a2a, #e8361b); box-shadow: 0 0 18px 2px rgba(232, 54, 27, 0.75); }
.canais { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.canais span { padding: 2px 7px; border-radius: var(--raio-cheio); border: 1px solid var(--borda-escura-forte); color: var(--texto-escuro-suave); font-size: 0.62rem; }
.bolha .via { text-align: left; color: var(--texto-escuro-mudo); margin: 0 0 2px; }
.busca { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--raio-cheio); background: rgba(255, 255, 255, 0.07); color: var(--texto-escuro-suave); font-size: 0.75rem; margin-bottom: 12px; }
.resultado small { color: var(--destaque); font-size: 0.69rem; }
.resultado strong { display: block; font-size: 0.84rem; margin: 2px 0 6px; }
.linha { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); margin-top: 6px; }
.linha.curta { width: 64%; }
.resultado { display: flex; gap: 8px; align-items: flex-start; }
.resultado > div { flex: 1; min-width: 0; }
.posicao { flex: none; margin-top: 1px; padding: 2px 6px; border-radius: var(--raio-cheio); background: var(--destaque); color: var(--sobre-destaque); font-size: 0.66rem; font-weight: 700; }
.resultado--borrado { margin-top: 10px; filter: blur(2.5px); opacity: 0.55; }
.resultado--borrado .posicao { background: rgba(255, 255, 255, 0.15); color: var(--texto-escuro-suave); }
.bolha { padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.08); margin-bottom: 8px; }
.bolha--resposta { border-radius: 14px 14px 4px 14px; background: var(--destaque-suave); margin-left: 28px; }
.bolha small { display: block; text-align: right; color: var(--destaque); font-size: 0.66rem; margin-top: 4px; }
/* Celular: cartões mais compactos para caberem dois lado a lado. */
@media (max-width: 479px) {
  .flutuantes { gap: 10px; margin-top: 40px; }
  .card-ui { padding: 12px; border-radius: 14px; font-size: 0.6875rem; }
  .card-ui .topo { margin-bottom: 8px; flex-wrap: wrap; gap: 2px 6px; }
  .barras { height: 44px; gap: 4px; }
  .rodape-card { flex-wrap: wrap; gap: 2px 8px; font-size: 0.625rem; }
  .dias { gap: 3px; font-size: 0.6rem; }
  .dias b { height: 18px; }
  .busca { padding: 6px 9px; font-size: 0.625rem; min-width: 0; overflow: hidden; white-space: nowrap; }
  .resultado strong { font-size: 0.72rem; }
  .bolha { padding: 7px 9px; }
  .bolha--resposta { margin-left: 10px; }
}

/* 07 — PROBLEMA =========================================================== */

.dor { padding-top: calc(var(--secao-y) + 30px); }
.dor .container { display: grid; gap: 48px; }
.dores { display: grid; gap: 16px; }
.dor-card { background: var(--superficie-clara); border-radius: var(--raio); padding: 26px; border: 1px solid var(--borda-clara); }
.dor-card .num { font-family: var(--fonte-display); font-size: 0.9375rem; letter-spacing: 0.08em; color: var(--texto-claro-suave); text-transform: uppercase; }
.dor-card h3 { font-size: 1.25rem; font-weight: 700; margin: 12px 0 8px; line-height: 1.25; letter-spacing: -0.01em; }
.dor-card p { font-size: 0.97rem; color: var(--texto-claro-suave); line-height: 1.55; }
.dor-card--virada { background: var(--tinta-900); color: var(--texto-escuro-forte); display: flex; flex-direction: column; }
.dor-card--virada .num { color: var(--destaque); }
.dor-card--virada h3 { font-size: 1.4375rem; }
.link-seta { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--destaque); font-weight: 600; font-size: 0.9375rem; }

/* 08 — SERVIÇOS =========================================================== */

.cabeca-secao { display: grid; gap: 24px; margin-bottom: 56px; }
.grade-servicos { display: grid; gap: 18px; }
.servico {
  background: var(--superficie-escura); border: 1px solid rgba(226, 177, 60, 0.22); border-radius: var(--raio);
  padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 310px;
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.servico:hover { border-color: rgba(226, 177, 60, 0.6); transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgba(226, 177, 60, 0.45); }
.servico .topo { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.icone { width: 54px; height: 54px; border-radius: 15px; background: var(--destaque-suave); color: var(--destaque); display: grid; place-items: center; }
.servico .num { font-family: var(--fonte-display); color: var(--texto-escuro-mudo); font-size: 1.0625rem; letter-spacing: 0.06em; }
.servico h3 { font-size: 1.4375rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.servico p { color: var(--texto-escuro-suave); font-size: 0.97rem; line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.tags li { font-size: 0.78rem; font-weight: 500; padding: 6px 12px; border-radius: var(--raio-cheio); border: 1px solid var(--borda-escura-forte); color: var(--texto-escuro-suave); }
/* Todos os cards de serviço são de ouro metálico (servico--destaque). */
.servico .icone { background: rgba(226, 177, 60, 0.1); border: 1px solid rgba(226, 177, 60, 0.3); }
.servico .num { color: rgba(226, 177, 60, 0.6); }
.servico .tags li { border-color: rgba(226, 177, 60, 0.25); }
.servico--destaque {
  background: linear-gradient(135deg, #f7df92 0%, #e2b13c 38%, #b5832a 72%, #ebc86c 100%);
  color: var(--sobre-destaque); border-color: rgba(255, 236, 170, 0.6);
}
.servico--destaque p { color: rgba(13, 15, 11, 0.74); }
.servico--destaque .icone { background: var(--sobre-destaque); color: var(--destaque); border-color: transparent; }
.servico--destaque .num { color: rgba(13, 15, 11, 0.5); }
.servico--destaque .tags li { border-color: rgba(13, 15, 11, 0.25); color: var(--sobre-destaque); }
/* Celular: dois cards por linha, numa versão compacta para caber até em 320px. */
@media (max-width: 699px) {
  .grade-servicos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .servico { padding: 16px 14px; gap: 8px; min-height: 0; border-radius: 16px; }
  .servico .topo { margin-bottom: 2px; }
  .servico .icone { width: 40px; height: 40px; border-radius: 11px; }
  .servico .icone svg { width: 20px; height: 20px; }
  .servico .num { font-size: 0.875rem; }
  .servico h3 { font-size: 1.0625rem; }
  .servico p { font-size: 0.8125rem; line-height: 1.45; }
  .servico .tags { gap: 5px; padding-top: 6px; }
  .servico .tags li { font-size: 0.6875rem; padding: 4px 8px; }
}

/* 09 — DIFERENCIAL ======================================================== */

.diferencial {
  --onda-cor: var(--preto-800);
  background: radial-gradient(50% 60% at 50% 0%, rgba(200, 145, 35, 0.15), transparent 70%), var(--preto-800);
}
.cabeca-centro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; margin-bottom: 56px; }
.comparacao { display: grid; gap: 18px; max-width: 1020px; margin: 0 auto; }
.lado { border-radius: 24px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--borda-escura); background: var(--superficie-escura); }
.lado h3 { font-family: var(--fonte-display); font-weight: 400; font-size: 2rem; text-transform: uppercase; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; line-height: 1.04; }
.lado ul { display: grid; gap: 16px; }
.lado li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.5; }
.marcador { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.lado--judan {
  border-color: rgba(226, 177, 60, 0.45);
  background: linear-gradient(180deg, rgba(226, 177, 60, 0.09), rgba(226, 177, 60, 0) 60%), var(--superficie-escura);
  box-shadow: 0 30px 90px -30px rgba(226, 177, 60, 0.28);
}
.lado--judan .marcador { background: var(--destaque); color: var(--sobre-destaque); }
.lado--outras { color: var(--texto-escuro-suave); }
.lado--outras .marcador { background: rgba(255, 255, 255, 0.08); color: var(--texto-escuro-mudo); }

/* 10 — COMO FUNCIONA ====================================================== */

.passos { display: grid; gap: 18px; }
.passo { position: relative; background: var(--superficie-clara); border-radius: var(--raio); padding: 28px; border: 1px solid var(--borda-clara); }
.passo .n { display: block; font-family: var(--fonte-display); font-size: 4.25rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--tinta-900); }
.passo--atual .n { color: var(--tinta-900); }
.passo .prazo { position: absolute; top: 30px; right: 26px; font-size: 0.75rem; font-weight: 600; padding: 6px 11px; border-radius: var(--raio-cheio); background: var(--tinta-900); color: var(--destaque); }
.passo h3 { font-size: 1.3125rem; font-weight: 700; margin: 22px 0 8px; letter-spacing: -0.01em; }
.passo p { color: var(--texto-claro-suave); font-size: 0.97rem; line-height: 1.55; }

/* 11 — RESULTADOS ========================================================= */

.resultados .container { display: grid; gap: 44px; }
.painel { background: var(--destaque); color: var(--sobre-destaque); border-radius: 28px; padding: clamp(24px, 3vw, 34px); display: grid; gap: 30px; }
.painel .cabeca { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.painel .cabeca span:last-child { padding: 6px 12px; border-radius: var(--raio-cheio); background: rgba(13, 15, 11, 0.1); letter-spacing: 0.04em; text-transform: none; }
.numeros { display: grid; gap: 18px; }
/* No HTML o rótulo (dt) vem antes do número (dd), como pede a semântica;
   aqui o número vai para a frente. */
.numero { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 16px; }
.numero dd { font-family: var(--fonte-display); font-size: clamp(2.25rem, 1.6rem + 1.9vw, 3.125rem); line-height: 1; white-space: nowrap; }
.numero dt { font-size: 0.84rem; font-weight: 500; color: rgba(13, 15, 11, 0.72); line-height: 1.35; }
.depoimento { background: var(--tinta-900); color: var(--texto-escuro-forte); border-radius: 20px; padding: 26px; display: grid; gap: 18px; }
.depoimento blockquote { font-size: 1.0625rem; line-height: 1.55; color: var(--texto-escuro-suave); font-style: italic; }
.quem { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; }
.quem small { display: block; color: var(--texto-escuro-mudo); font-size: 0.8125rem; }
.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--destaque), var(--ouro-700)); }

/* 12 — DÚVIDAS ============================================================ */

.faq .container { display: grid; gap: 40px; }
.perguntas { display: grid; gap: 12px; }
.pergunta { background: var(--superficie-clara); border-radius: 18px; border: 1px solid var(--borda-clara); transition: box-shadow var(--transicao); }
.pergunta[open] { box-shadow: 0 18px 40px -24px rgba(13, 15, 11, 0.35); }
.pergunta summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px;
  font-weight: 600; font-size: 1.09rem; line-height: 1.35; cursor: pointer; list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.mais { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid rgba(13, 15, 11, 0.15); transition: background-color var(--transicao); }
.mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2.4px; border-radius: 2px; background: currentColor; translate: -50% -50%; transition: rotate var(--transicao); }
.mais::after { rotate: 90deg; }
.pergunta[open] .mais { background: var(--destaque); border-color: var(--destaque); }
.pergunta[open] .mais::after { rotate: 0deg; }
.pergunta p { padding: 0 24px 22px; color: var(--texto-claro-suave); font-size: 0.97rem; max-width: 62ch; }
/* As primeiras perguntas aparecem sempre; as marcadas com data-faq-extra ficam
   atrás do botão. Sem JavaScript o atributo data-faq-expanded não existe:
   aparece tudo e o botão some. */
.perguntas[data-faq-expanded="false"] [data-faq-extra] { display: none; }
.botao-mostrar {
  display: none; width: fit-content; min-height: 50px; padding: 0 22px; border-color: rgba(13, 15, 11, 0.2);
  background: transparent; color: var(--texto-claro-forte); font-size: 0.96rem; margin-top: 8px;
}
.perguntas[data-faq-expanded] .botao-mostrar { display: inline-flex; }

/* 13 — CHAMADA FINAL ====================================================== */

/* clip-path no lugar de overflow: hidden para a onda de cima poder aparecer. */
.cta { --onda-cor: var(--destaque); clip-path: inset(-160px 0 0 0); background: var(--destaque); color: var(--sobre-destaque); }
.cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 64px, rgba(13, 15, 11, 0.05) 64px 65px); }
/* Vídeos da chamada final (dois se revezam, app.js): em "screen" só as partes
   claras clareiam o dourado; as escuras somem. Sem z-index no contêiner nem nos
   vídeos, para a mistura ser com o fundo da seção. */
.cta-videos { position: absolute; inset: 0; pointer-events: none; }
.cta-videos video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen;
  opacity: 0; transition: opacity 1.4s ease;
  /* Entra aos poucos no topo, para não marcar uma linha reta embaixo da passagem roxa. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 160px);
          mask-image: linear-gradient(to bottom, transparent, #000 160px);
}
.cta-videos .cta-video--pronto { opacity: 0.8; }
.cta .container { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.cta h2 { font-size: clamp(3.125rem, 1.6rem + 6vw, 6.875rem); max-width: 18ch; text-wrap: balance; }
.cta-texto { font-size: var(--t-lead); max-width: 52ch; color: rgba(13, 15, 11, 0.76); }
.cta .selo { border-color: rgba(13, 15, 11, 0.25); }
.cta .selo i { background: var(--sobre-destaque); box-shadow: none; }

/* 14 — RODAPÉ ============================================================= */

/* z-index 0 cria a camada onde a borda de luz do card (z-index negativo) fica
   acima do fundo do rodapé e atrás do card. */
.rodape { position: relative; z-index: 0; background: var(--fundo-escuro); padding: 76px 0 32px; overflow: hidden; }
.rodape-caixa {
  position: relative; border: 1px solid rgba(226, 177, 60, 0.35); border-radius: var(--raio); padding: clamp(24px, 4vw, 48px);
  /* Fundo opaco: esconde o miolo da luz que gira atrás do card. */
  background: radial-gradient(560px 360px at 0% 0%, rgba(226, 177, 60, 0.07), transparent 70%), #101110;
  /* Brilho externo dourado. */
  box-shadow: 0 0 34px -4px rgba(226, 177, 60, 0.35), 0 0 90px -20px rgba(226, 177, 60, 0.3);
}
/* Borda de luz: dois cometas dourados giram atrás do card. ::before é o filete
   nítido em volta; ::after, o mesmo desenho desfocado, é o rastro de brilho. */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rodape-giro { to { --giro: 360deg; } }
.rodape-caixa::before, .rodape-caixa::after {
  content: ""; position: absolute; inset: -3px; border-radius: calc(var(--raio) + 3px); pointer-events: none;
  background: conic-gradient(from var(--giro),
    transparent 0deg 110deg, rgba(226, 177, 60, 0.25) 150deg, #e2b13c 172deg, #fff3c4 179deg, transparent 180deg 290deg,
    rgba(226, 177, 60, 0.25) 330deg, #e2b13c 352deg, #fff3c4 359deg, transparent 360deg);
  animation: rodape-giro 7s linear infinite;
}
.rodape-caixa::before { z-index: -1; }
/* O rastro desfocado ocupa uma caixa 40px maior que o card, com o desenho só no
   miolo (borda transparente + background-clip). Sem essa folga, o Safari e alguns
   celulares cortam o desfoque no limite da caixa e o brilho aparece quadrado. */
.rodape-caixa::after {
  inset: -40px; border: 37px solid transparent; border-radius: calc(var(--raio) + 40px);
  background-clip: padding-box; background-origin: padding-box;
}
.rodape-caixa::after { z-index: -2; filter: blur(18px); opacity: 0.7; transition: opacity var(--transicao), filter var(--transicao); }
.rodape-caixa:hover::after { opacity: 1; filter: blur(22px) brightness(1.25); }
.rodape-grade { display: grid; gap: 36px; }
.rodape-titulo { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-escuro-mudo); margin-bottom: 16px; font-weight: 600; }
.rodape ul { display: grid; gap: 10px; color: var(--texto-escuro-suave); font-size: 0.9375rem; }
.rodape a:hover, .link-cookies:hover { color: var(--destaque); }
.link-cookies { color: inherit; font-size: inherit; text-align: left; }
.sobre p { color: var(--texto-escuro-suave); font-size: 0.9375rem; margin: 16px 0 22px; max-width: 34ch; }
/* Selos do que a Judan entrega nos projetos dos clientes (não são certificações da Judan). */
.padroes-titulo { margin-bottom: 12px; }
.rodape .padroes-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.padrao {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 78px; padding: 12px 6px; border: 1px solid var(--borda-escura-forte); border-radius: 16px;
  background: rgba(255, 255, 255, 0.03); text-align: center; text-wrap: balance;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; color: var(--texto-escuro-forte);
}
.padrao svg { width: 22px; height: 22px; flex: none; color: var(--destaque); }
.marca-gigante {
  font-family: var(--fonte-display); font-size: clamp(6.875rem, 25vw, 22.5rem); line-height: 0.8; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15); margin: 56px 0 0; letter-spacing: 0.03em; user-select: none;
}
.rodape-base { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--borda-escura); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: var(--texto-escuro-mudo); }

/* 15 — CHAT DE CAPTAÇÃO =================================================== */
/* Criado pelo chat.js. No celular abre em tela cheia; a partir de 640px, num card acima do botão. */

.chat-botao {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 50;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--destaque); color: var(--sobre-destaque); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6);
  transition: transform var(--transicao), background-color var(--transicao);
}
.chat-botao:hover { background: var(--destaque-hover); transform: translateY(-2px); }
.menu-travado .chat-botao { visibility: hidden; }
@keyframes chat-entrar { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes chat-pontos { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: var(--preto-800); color: var(--texto-escuro-forte);
  animation: chat-entrar 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.chat[hidden] { display: none; }
.chat-topo { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--borda-escura); }
.chat-topo div { flex: 1; display: grid; line-height: 1.3; }
.chat-topo strong { font-size: 0.9375rem; }
.chat-topo small { font-size: 0.75rem; color: var(--texto-escuro-mudo); }
.chat-fechar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--texto-escuro-suave); }
.chat-fechar:hover { color: var(--texto-escuro-forte); background: rgba(255, 255, 255, 0.06); }
.chat-mensagens { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 0.9375rem; line-height: 1.45; animation: chat-entrar 0.25s ease-out both; }
.chat-msg--bot { align-self: flex-start; background: rgba(255, 255, 255, 0.07); border-top-left-radius: 6px; }
.chat-msg--pessoa { align-self: flex-end; background: var(--destaque); color: var(--sobre-destaque); border-top-right-radius: 6px; font-weight: 500; overflow-wrap: anywhere; }
.chat-msg a { color: var(--destaque); text-decoration: underline; }
.chat-digitando { display: flex; gap: 4px; padding: 15px 14px; }
.chat-digitando span { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-escuro-mudo); animation: chat-pontos 1s infinite ease-in-out; }
.chat-digitando span:nth-child(2) { animation-delay: 0.15s; }
.chat-digitando span:nth-child(3) { animation-delay: 0.3s; }
.chat-opcoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.chat-opcao { min-height: 40px; padding: 0 16px; border-radius: var(--raio-cheio); border: 1px solid var(--destaque); color: var(--destaque); font-weight: 600; font-size: 0.875rem; }
.chat-opcao:hover { background: var(--destaque-suave); }
.chat-campo { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda-escura); }
.chat-campo[hidden] { display: none; }
.chat-campo input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 16px; border-radius: var(--raio-cheio);
  border: 1px solid var(--borda-escura-forte); background: rgba(255, 255, 255, 0.04); color: var(--texto-escuro-forte); font: inherit; font-size: 1rem;
}
.chat-campo input:focus { outline: none; border-color: var(--destaque); }
.chat-campo button { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--destaque); color: var(--sobre-destaque); }
.chat-campo .chat-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 639px) { .chat-aberto { overflow: hidden; } }
@media (min-width: 640px) {
  .chat {
    inset: auto 18px 92px auto; width: 380px; height: min(580px, calc(100vh - 120px)); overflow: hidden;
    border: 1px solid var(--borda-escura-forte); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
  }
}

/* 16 — AVISO DE COOKIES =================================================== */

.cookies {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 360px;
  padding: 12px 14px; border-radius: 16px; background: var(--preto-700); border: 1px solid var(--borda-escura-forte);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8); font-size: 0.8125rem; line-height: 1.5; color: var(--texto-escuro-suave);
}
.cookies[hidden] { display: none; }
/* Com o menu do celular aberto o aviso sai da frente; volta ao fechar. */
.menu-travado .cookies { visibility: hidden; }
.cookies a { color: var(--destaque); text-decoration: underline; }
.cookies-opcoes { display: grid; gap: 10px; margin: 14px 0 0; }
.cookies-opcoes[hidden] { display: none; }
.cookies-opcoes label { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-escuro-forte); }
.cookies-opcoes input { margin-top: 4px; accent-color: var(--destaque); }
.cookies-opcoes small { display: block; color: var(--texto-escuro-mudo); }
.cookies-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cookies-acoes button { min-height: 34px; padding: 0 12px; border-radius: var(--raio-cheio); font-weight: 600; font-size: 0.8125rem; border: 1px solid var(--borda-escura-forte); color: var(--texto-escuro-forte); }
.cookies-acoes .aceitar { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }
/* Entra com animação; sem escolha em 5 s vira o ícone (cookies.js). Sumir não é aceitar. */
@keyframes cookies-entrar { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes cookies-sair { to { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes cookies-tempo { to { transform: scaleX(0); } }
@keyframes cookies-icone-entrar { from { opacity: 0; transform: scale(0.6); } }
.cookies { animation: cookies-entrar 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.cookies--saindo { animation: cookies-sair 0.3s ease-in forwards; }
.cookies-tempo { display: none; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 2px; background: var(--destaque); transform-origin: left; }
.cookies--contando .cookies-tempo { display: block; animation: cookies-tempo 5s linear forwards; }
.cookies--pausado .cookies-tempo { animation-play-state: paused; }
.cookies-icone {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--preto-700); border: 1px solid var(--borda-escura-forte); color: var(--destaque);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6); transition: border-color var(--transicao);
  animation: cookies-icone-entrar 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.cookies-icone:hover { border-color: var(--destaque); }
.cookies-icone[hidden] { display: none; }
.menu-travado .cookies-icone { visibility: hidden; }

/* ---- Telas maiores ---- */

@media (min-width: 640px) {
  .hero h1 .titulo-menor { font-size: 0.3435em; }
  .hero h1 .titulo-menor .ouro { display: inline; }
  .dores { grid-template-columns: 1fr 1fr; }
  .dor-card--virada { grid-column: 1 / -1; }
  .numeros { grid-template-columns: repeat(3, 1fr); }
  .numero { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 8px; }
  .cookies { left: 20px; bottom: 20px; }
  .cookies-icone { left: 20px; bottom: 20px; }
  .rodape-grade { grid-template-columns: repeat(2, 1fr); }
  .rodape-grade .sobre { grid-column: 1 / -1; }
}
@media (min-width: 700px) {
  .grade-servicos { grid-template-columns: 1fr 1fr; }
  .passos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .comparacao { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .plataformas .sep { display: block; }
}
@media (min-width: 960px) {
  .dor .container { grid-template-columns: 1fr 1.15fr; align-items: center; gap: 72px; }
  .cabeca-secao { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 64px; }
  .faq .container { grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
}
@media (min-width: 1024px) {
  .grade-servicos { grid-template-columns: repeat(3, 1fr); }
  .passos { grid-template-columns: repeat(4, 1fr); }
  .resultados .container { grid-template-columns: 0.9fr 1.2fr; gap: 64px; align-items: center; }
}
/* O menu completo (com o item Resultados) só cabe numa linha a partir de
   1100px; abaixo disso fica o botão de menu. O "Conheça nosso ecossistema"
   entra a partir de 1320px, quando sobra espaço para os dois botões. Se mudar
   o breakpoint, troque também o matchMedia do app.js. */
@media (min-width: 1100px) {
  .menu {
    position: static; inset: auto; flex-direction: row; gap: 4px; padding: 5px; opacity: 1; visibility: visible;
    border: 1px solid var(--borda-escura); border-radius: var(--raio-cheio); background: rgba(255, 255, 255, 0.03);
  }
  .menu a:not(.botao) { font-family: var(--fonte-ui); font-size: 0.875rem; font-weight: 500; text-transform: none; line-height: 1.4; padding: 9px 18px; border-radius: var(--raio-cheio); color: var(--texto-escuro-suave); white-space: nowrap; transition: color var(--transicao), background-color var(--transicao); }
  .menu a:not(.botao):hover { color: var(--texto-escuro-forte); }
  .menu a[aria-current="true"] { background: rgba(255, 255, 255, 0.09); color: var(--texto-escuro-forte); }
  .menu-cta { display: none; }
  .cabecalho-cta { display: inline-flex; }
  .cabecalho-cta--secundaria { display: none; }
  .botao-menu { display: none; }
  /* O rodapé só vira 4 colunas aqui: a primeira precisa de 340px para os selos. */
  .rodape-grade { grid-template-columns: minmax(340px, 1.5fr) 1fr 1fr; gap: 32px; }
  .rodape-grade .sobre { grid-column: auto; }
}
@media (min-width: 1280px) {
  .flutuantes { position: absolute; inset: 0; max-width: 1440px; margin: 0 auto; padding: 0; display: block; z-index: 1; pointer-events: none; }
  .card-ui { display: block; position: absolute; width: 244px; }
  .ui-1 { left: 44px; top: 200px; transform: rotate(-7deg); }
  .ui-3 { right: 44px; top: 210px; transform: rotate(6deg); }
  .ui-2, .ui-4 { display: none; }
}
@media (min-width: 1320px) {
  .cabecalho-cta--secundaria { display: inline-flex; }
}
@media (min-width: 1440px) {
  .ui-2 { display: block; left: 84px; top: 480px; transform: rotate(5deg); }
  .ui-4 { display: block; right: 76px; top: 440px; transform: rotate(-5deg); }
}

/* 17 — MOVIMENTO REDUZIDO ================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  /* A barra do aviso de cookies mostra o tempo, então continua contando 5 s. */
  .cookies--contando .cookies-tempo { animation-duration: 5s !important; }
  /* Animações infinitas ficam paradas (com 0,01 ms elas piscariam). */
  .chat-digitando span, .rodape-caixa::before, .rodape-caixa::after { animation: none !important; }
}

/* 18 — PÁGINAS SIMPLES (404 e política) =================================== */

.pagina-simples h1 { line-height: 1.04; }
.pagina-simples { min-height: 100svh; display: grid; place-items: center; padding: 96px 0; }
.texto-legal { max-width: 72ch; }
.texto-legal h1 { font-size: var(--t-h2); margin: 18px 0 12px; }
.texto-legal h2 { font-size: 1.25rem; margin: 40px 0 10px; color: var(--texto-claro-forte); }
.texto-legal p, .texto-legal li { color: var(--texto-claro-suave); margin-bottom: 12px; }
.texto-legal ul { list-style: disc; padding-left: 1.25rem; }
.texto-legal a, .texto-legal .link-cookies { color: var(--texto-claro-forte); text-decoration: underline; }
.voltar { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }