/* ==========================================================================
   Home v2 · protótipo animado · base
   Tokens, tipografia, elementos globais (G-01 a G-07) e painel do protótipo.
   Os tokens de movimento seguem 06-estrutura/direcao-criativa-home.md, seção 4.
   ========================================================================== */

:root {
  /* Superfícies */
  --ink: #060709;
  --ink-1: #0a0c10;
  --ink-2: #0f1218;
  --ink-3: #151922;
  --linha: rgba(236, 238, 241, .08);
  --linha-2: rgba(236, 238, 241, .14);
  --linha-3: rgba(236, 238, 241, .26);

  /* Texto */
  --txt: #eceef1;
  /* títulos em branco puro; o corpo segue no --txt */
  --txt-tit: #ffffff;
  /* rótulos em caixa alta: Montserrat (a Michroma foi testada e saiu) */
  --f-rot: var(--f-txt);
  /* títulos principais da home: a fonte da landing da ShieldWP */
  --f-shield: "Familjen Grotesk", var(--f-disp);
  --txt-2: #aab1bd;
  --txt-3: #858d9b;

  /* Marca e semântica dos nós (a mesma em todas as cenas) */
  /* desde 20/10/2026 tudo que era azul é o laranja da ShieldWP. O nome
     --azul fica para não mexer nas centenas de regras que o usam; os tons
     claro e escuro também viraram laranja (texto claro a 7,75:1 no escuro) */
  --azul: #e85002;      /* automação, integração e CTA principal */
  --azul-claro: #ff7a33;
  --azul-ink: #070709;
  /* ação (CTAs, hovers, sublinhado do menu, foco): o laranja da landing da
     ShieldWP. O azul segue como cor semântica de automação nas cenas.
     Texto quase preto sobre o laranja dá 4,56:1; branco daria só 4,4:1. */
  --acao: #e85002;
  --acao-hi: #f16001;
  --acao-ink: #070709;
  --teal: #17bfb0;      /* IA e agente */
  --ambar: #ffb547;     /* aprovação humana */
  --ambar-ink: #1a1206;
  --sinal: #ff6b57;     /* espera e troca de responsável */
  --areia: #e8dcc2;     /* pessoa */
  --aco: #8e99ab;       /* sistemas e canais */
  /* cards de papel (mapas, fichas, bilhetes): no sálvia da marca, não no bege */
  --papel: #dbdecd;
  --papel-txt: #182113;
  --papel-txt-2: #4f5a46;   /* texto secundário no papel: 5,3:1 */
  --papel-faixa: #c8ccb7;   /* faixa de título sobre o papel */

  /* Creme do CTA do header, medido na landing da PixelCare */
  --creme: #ffffff;   /* era #eceae2; branco puro a pedido do Cláudio */
  --creme-ink: #0a0a0a;

  /* Anotações do protótipo (fora da paleta do site) */
  --proto: #b79cff;

  /* Tipografia da landing da PixelCare (homologa.digital/landingdigital):
     Funnel Display nos títulos, Inter no corpo. */
  --f-txt: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /* Nome herdado: desde 20 de outubro de 2026 os rótulos são Montserrat, não
     mono. O token continua se chamando --f-mono para não mexer nas 186 regras
     que o chamam, nos 19 arquivos de CSS. */
  --f-mono: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --f-disp: "Funnel Display", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /* Palavra de destaque dentro do título, em itálico, como o "WordPress" do H1 da referência */
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Movimento */
  --motion: 1;
  --dur-micro: 160ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
  --dur-intro: 1200ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snappy: cubic-bezier(.19, 1, .22, 1);
  --ease-state: cubic-bezier(.4, 0, .2, 1);
  /* a curva do header da landing da PixelCare */
  --ease-ref: cubic-bezier(.2, .7, .2, 1);

  /* Escada do grid: o conteúdo e o header dividem o mesmo --wrap, então o
     logo sempre nasce na mesma vertical do texto. Os degraus ficam logo
     abaixo do :root, em media queries, para serem fáceis de ajustar. */
  --wrap: 1400px;
  --gut: clamp(20px, 4vw, 40px);
  /* distância da borda do bloco até o grid: use em elementos posicionados dentro de blocos de largura total */
  --borda: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  /* 1.1rem de respiro em cima e embaixo mais a pílula de 48px, como lá.
     A referência não encolhe ao rolar, então os dois valores são iguais. */
  --topo-h: 84px;
  --topo-min: 84px;
  --raio: 14px;
  /* Respiro vertical de toda dobra, em cima e embaixo. Era clamp(96px, 11vw,
     172px), 168px em 1530 de largura, e o vão entre dobras variava de 337 a
     590px. Agora é um valor só, um pouco menor. */
  --secao-y: clamp(72px, 8vw, 128px);
  /* Folga sob o header dentro dos palcos fixos (HOME-04 e HOME-08) */
  --palco-y: clamp(24px, 6vh, 64px);
}

/* Degraus do grid, do monitor grande para o pequeno */
@media (min-width: 2100px) { :root { --wrap: 1760px; } }
@media (min-width: 1700px) and (max-width: 2099px) { :root { --wrap: 1600px; } }
/* abaixo de 1440 o grid é fluido: quem manda é o respiro lateral --gut */
@media (max-width: 1439px) { :root { --wrap: 100%; } }

html.movimento-reduzido,
html[data-pausa="1"] { --motion: 0; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font: 450 1rem/1.6 var(--f-txt);   /* piso de peso: nada abaixo de 400 no site */
  color: var(--txt);
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; }
/* A Funnel Display cobre a camada de título. As regras de cada seção que
   declaram o atalho `font:` trazem --f-disp; esta pega os títulos que só
   herdavam a fonte do corpo. O texto corrido segue em Montserrat. */
h1, h2, h3, h4 { font-family: var(--f-disp); color: var(--txt-tit); }
table { border-collapse: collapse; }
::selection { background: rgba(232, 80, 2, .35); color: #fff; }

:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--acao); color: var(--acao-ink); padding: 10px 14px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------- Tipografia ---------- */

.h2 {
  font: 600 clamp(1.95rem, 1.05rem + 2.5vw, 3.25rem)/1.07 var(--f-disp);
  letter-spacing: -.034em;
  text-wrap: balance;
  max-width: 22ch;
}
.mono {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tag {
  display: inline-flex; align-items: center;
  font: 500 .62rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt-2); border: 1px solid var(--linha-2); border-radius: 999px; padding: 5px 8px;
  vertical-align: middle;
}
.tag--gratis { color: var(--azul-claro); border-color: rgba(232, 80, 2, .45); background: rgba(232, 80, 2, .08); }

.link-seta { margin-top: 32px; }
.link-seta a {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--txt); text-decoration: none;
  border-bottom: 1px solid var(--linha-3); padding-bottom: 4px;
  transition: border-color calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), color calc(var(--dur-micro) * var(--motion));
}
.link-seta a:hover { border-color: var(--acao); color: #fff; }
.link-seta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy); }
.link-seta a:hover svg { transform: translateX(3px); }

/* ---------- Botões ---------- */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 600 .95rem/1.1 var(--f-txt); letter-spacing: -.005em;
  padding: 15px 22px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition:
    background-color calc(var(--dur-micro) * var(--motion)) var(--ease-snappy),
    border-color calc(var(--dur-micro) * var(--motion)) var(--ease-snappy),
    color calc(var(--dur-micro) * var(--motion)) var(--ease-snappy),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out),
    box-shadow calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.btn--pri { background: var(--acao); color: var(--acao-ink); }
.btn--pri:hover, .btn--pri:focus-visible { background: var(--acao-hi); }
.btn--sec { background: rgba(236, 238, 241, .02); border-color: var(--linha-3); color: var(--txt); }
.btn--sec:hover, .btn--sec:focus-visible { border-color: rgba(232, 80, 2, .6); color: #fff; background: rgba(232, 80, 2, .07); }
.btn--sm { padding: 10px 16px; font-size: .84rem; border-radius: 8px; }
.btn--grande { padding: 19px 30px; font-size: 1.05rem; }
.btn--bloco { width: 100%; }
.btn-seta { position: relative; z-index: 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }

/* Microinteração dos CTAs (G-11 e direção criativa): discreta, sem repetição.
   Hover e foco: o rótulo rola letra a letra (sai para cima e entra uma cópia por baixo), a seta sai
   pela direita e volta pela esquerda. No principal, um reflexo diagonal passa uma vez, o botão sobe
   1 px e ganha um halo azul; no secundário, uma luz percorre a borda uma vez. Clique: 0,97.
   O JS (globais.js) monta as duas linhas do rótulo; com pausa ou movimento reduzido, só a cor muda. */
.btn-rot { position: relative; z-index: 1; display: inline-grid; overflow: hidden; padding: .14em 0; margin: -.14em 0; }
.btn-rot-a, .btn-rot-b { grid-area: 1 / 1; display: inline-flex; }
.btn-c { display: inline-block; transition: transform calc(.42s * var(--motion)) var(--ease-out); transition-delay: calc(var(--d, 0ms) * var(--motion)); }
.btn-rot-b .btn-c { transform: translateY(115%); }
.btn:hover .btn-rot-a .btn-c, .btn:focus-visible .btn-rot-a .btn-c { transform: translateY(-115%); }
.btn:hover .btn-rot-b .btn-c, .btn:focus-visible .btn-rot-b .btn-c { transform: none; }
.btn:hover .btn-seta, .btn:focus-visible .btn-seta { animation: btn-seta calc(.52s * var(--motion)) var(--ease-out) both; }
@keyframes btn-seta {
  0% { transform: translateX(0); opacity: 1; }
  42% { transform: translateX(12px); opacity: 0; }
  43% { transform: translateX(-12px); opacity: 0; }
  100% { transform: translateX(2px); opacity: 1; }
}
/* reflexo do principal: passa uma vez no hover e quando o botão entra na tela (classe .brilha) */
.btn--pri::after {
  content: ""; position: absolute; inset: -1px; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  transform: translateX(-130%);
}
.btn--pri:hover::after, .btn--pri:focus-visible::after, .btn--pri.brilha::after {
  transform: translateX(130%); transition: transform calc(.75s * var(--motion)) var(--ease-state);
}
.btn--pri:hover, .btn--pri:focus-visible {
  transform: translateY(calc(-1px * var(--motion)));
  box-shadow: 0 12px 30px -12px rgba(232, 80, 2, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* luz na borda do secundário: um arco claro dá uma volta e some */
@property --btn-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn--sec::before {
  content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--btn-ang), transparent 0deg, rgba(241, 96, 1, .95) 50deg, transparent 110deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}
.btn--sec:hover::before, .btn--sec:focus-visible::before { animation: btn-borda calc(.95s * var(--motion)) var(--ease-state) both; }
@keyframes btn-borda { 0% { --btn-ang: 0deg; opacity: 1; } 80% { opacity: 1; } 100% { --btn-ang: 360deg; opacity: 0; } }
.btn:active { transform: scale(.97); transition-duration: 90ms; }

/* ==========================================================================
   G-01 Header
   Desenho copiado do header de homologa.digital/landingdigital, com os
   valores lidos da folha de lá (css/styles.css): largura cheia, respiro
   clamp(1.25rem, 3vw, 3rem), sublinhado que cresce de 0 a 100% no hover,
   pílula creme com a seta em círculo e o botão de 6 pontos.
   Uma troca de propósito: lá o realce é o laranja #E85002; aqui é o azul da
   marca, porque o laranja foi recusado em 20 de outubro de 2026.
   ========================================================================== */

/* ---------- Header em box de vidro (referência: squared-media.nl) ----------
   O header é um box com a largura do conteúdo, solto do topo. Parado no
   começo da página, o box não aparece e o logo fica na linha do grid. Ao
   rolar (ou com um megamenu aberto), entram o vidro, a sombra e um recheio
   de 20px, na mesma curva de lá. O vidro tem refração nas bordas por um
   filtro SVG (js/vidro.js); só o Chrome aceita filtro SVG no
   backdrop-filter, e os outros navegadores ficam com o blur comum, porque
   descartam a declaração que não entendem. */
.topo {
  --topo-folga: 14px;
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  pointer-events: none;   /* fora do box, a página continua clicável */
}
.topo-in {
  position: relative; isolation: isolate; pointer-events: auto;
  width: calc(min(100%, var(--wrap)) - 2 * var(--gut));
  margin: var(--topo-folga) auto 0;
  height: calc(var(--topo-h) - var(--topo-folga));
  padding: 0;
  border-radius: 18px;
  display: flex; align-items: center;
  gap: clamp(.7rem, 1.2vw, 1.2rem);
  transition: padding calc(.6s * var(--motion)) cubic-bezier(.22, 1, .36, 1),
              box-shadow calc(.5s * var(--motion));
}
.topo-in::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: rgba(10, 10, 12, .42);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(255, 255, 255, .08),
              inset 1px 0 0 rgba(255, 255, 255, .08), inset -1px 0 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.04);
  backdrop-filter: blur(14px) saturate(1.8) brightness(1.04);
  opacity: 0;
  transition: opacity calc(.5s * var(--motion));
}
.topo--min .topo-in, .topo--aberto .topo-in {
  padding: 0 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.topo--min .topo-in::before, .topo--aberto .topo-in::before { opacity: 1; }
/* quem pede menos transparência no sistema recebe o box sólido */
/* refração nas bordas: só onde o vidro.js confirmou que ela é desenhada */
@media not (prefers-reduced-transparency: reduce) {
  html.vidro-svg .topo-in::before { backdrop-filter: url(#dp-vidro-barra) blur(1.5px) saturate(1.8) brightness(1.04); }
  html.vidro-svg .mega { backdrop-filter: url(#dp-vidro-menu) blur(6px) saturate(1.8) brightness(1.04); }
}
@media (prefers-reduced-transparency: reduce) {
  .topo-in::before, .mega { background: #0b0c0f; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.topo-logo { flex: none; display: block; }
/* Lá o logo tem 26px, mas é o monograma DPXL, de proporção 6,3:1. O nosso é a
   marca por extenso, 16,7:1: a 26px ela mediria 434px e não caberia na barra. */
.topo-logo img { height: 17px; width: auto; }

.menu { margin-left: clamp(1.5rem, 4vw, 4.5rem); }
.menu ul { list-style: none; display: flex; align-items: center; gap: clamp(1.2rem, 1.9vw, 2.1rem); }
.menu a, .menu-gatilho {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: none; padding-block: .3em;
  font: 500 .92rem/1.4 var(--f-txt); letter-spacing: .005em;
  color: var(--creme); opacity: .82;
  transition: opacity calc(.25s * var(--motion));
}
.menu a::after, .menu-gatilho::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0; background: var(--acao);
  transition: width calc(.3s * var(--motion)) var(--ease-ref);
}
.menu a:hover, .menu a:focus-visible,
.menu-gatilho:hover, .menu-gatilho:focus-visible,
.menu-gatilho[aria-expanded="true"] { opacity: 1; }
.menu a:hover::after, .menu a:focus-visible::after,
.menu-gatilho:hover::after, .menu-gatilho:focus-visible::after,
.menu-gatilho[aria-expanded="true"]::after { width: 100%; }
.menu-seta { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out); }
.menu-gatilho[aria-expanded="true"] .menu-seta { transform: rotate(180deg); }

/* Suporte e Contato voltaram ao header em 29/10/2026, a pedido do Erik, no
   lugar da busca, que saiu (não tinha função) */
.topo-util {
  margin-left: auto; display: flex; gap: 9px; align-items: center; white-space: nowrap;
  font-family: var(--f-disp); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: -.02em; color: var(--txt-3);
}
.topo-util a { text-decoration: none; color: var(--txt-3); transition: color calc(var(--dur-micro) * var(--motion)); }
.topo-util a:hover, .topo-util a:focus-visible { color: var(--creme); }

/* Botão redondo de 44px do menu no celular. Fio de 1px, como lá. */
.hicon {
  width: 44px; height: 44px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid var(--linha-2);
  background: transparent; color: var(--creme); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color calc(.3s * var(--motion)) var(--ease-ref),
              color calc(.3s * var(--motion)) var(--ease-ref);
}
.hicon:hover, .hicon:focus-visible { border-color: var(--acao); color: var(--acao); }
.hicon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* O menu de 6 pontos da referência saiu a pedido do Cláudio. O botão de menu
   volta a ser um hambúrguer, no mesmo círculo de 44px da busca, e só aparece
   abaixo de 1000px, onde é a única porta para o menu. */
.menu-mobile-btn { display: none; }

/* Pílula creme com a seta em círculo. Lá: 229x46, raio 100px, gap .85rem e
   padding .36rem .4rem .36rem 1.25rem. */
.topo-cta.btn--sm {
  gap: .85rem; padding: .36rem .4rem .36rem 1.25rem;
  font: 600 .9rem/1.1 var(--f-txt); letter-spacing: 0; border-radius: 100px;
}
.topo-cta.btn--pri { background: var(--creme); color: var(--creme-ink); }
/* hover laranja, como na ShieldWP, com a tinta quase preta: branco sobre o
   laranja dá 4,4:1 e não passa no contraste de texto */
.topo-cta.btn--pri:hover, .topo-cta.btn--pri:focus-visible {
  background: var(--acao); color: var(--acao-ink); box-shadow: none; transform: none;
}
/* lá o hover é só a troca de fundo: sem reflexo e sem o rótulo rolando */
.topo-cta.btn--pri::after { display: none; }
.topo-cta .btn-rot-b { display: none; }
.topo-cta:hover .btn-rot-a .btn-c,
.topo-cta:focus-visible .btn-rot-a .btn-c { transform: none; }
.cta-circ {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--creme-ink); color: var(--creme);
  display: grid; place-items: center; position: relative; z-index: 1;
  transition: background-color calc(.35s * var(--motion)) var(--ease-ref),
              color calc(.35s * var(--motion)) var(--ease-ref),
              transform calc(.35s * var(--motion)) var(--ease-ref);
}
.topo-cta:hover .cta-circ, .topo-cta:focus-visible .cta-circ {
  background: var(--acao-ink); color: var(--acao); transform: translateX(2px);
}
.cta-circ svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pausar animações: o botão saiu em 20/10/2026, quando o projeto
     passou a ser tratado como site. O movimento reduzido do sistema continua
     respeitado em todas as animações. ---------- */

/* abaixo de 1000px sobram o logo e o botão de menu */
@media (max-width: 1100px) {   /* era 1000px: a barra não cabia entre 1001 e 1100 */
  .menu { display: none; }
  .topo-cta { display: none; }
  .topo-util { display: none; }
  .menu-mobile-btn { display: grid; margin-left: auto; }
}
@media (max-width: 599px) {
  :root { --topo-h: 72px; --topo-min: 72px; }
  .topo-logo img { height: 14px; }
}
/* ---------- G-02 e G-03 Mega menus ---------- */

/* o megamenu abre num segundo box de vidro, 8px abaixo do header, com a
   mesma largura (lá ele cresce de dentro do mesmo vidro) */
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  width: calc(min(100%, var(--wrap)) - 2 * var(--gut)); margin-inline: auto;
  pointer-events: auto; overflow: hidden;
  border-radius: 18px;
  background: rgba(10, 10, 12, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 50px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.04);
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.04);
  animation: mega-entra calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.mega .mega-in { max-width: none; padding: 28px 28px 24px; }
@keyframes mega-entra { from { opacity: 0; transform: translateY(-8px); } }
.mega-in { padding-top: 30px; padding-bottom: 28px; }
.mega-abre { color: var(--txt-2); font-size: .95rem; margin-bottom: 24px; }
.mega-grade { display: grid; gap: 32px; }
/* G-02 com a coluna Casos de uso (decisão 28, 20/10/2026) */
.mega-grade--ia { grid-template-columns: 1fr 1fr 1fr 1.25fr; }
.mega-col a.mega-todos { color: var(--txt-3); font-size: .86rem; }
.mega-col a.mega-todos:hover { color: var(--acao-hi); }
.mega-grade--ss { grid-template-columns: repeat(3, 1fr); }
/* Rótulo de coluna em display 13px caixa alta, no lugar
   da mono de 10,24px, que ficava abaixo do piso de 11px de legibilidade. */
.mega-titulo { font: 500 13px/1 var(--f-disp); letter-spacing: -.02em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 14px; }
.mega-col ul { list-style: none; display: grid; gap: 4px; }
.mega-col a {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  text-decoration: none; color: var(--txt); font-size: .95rem; padding: 6px 0;
}
.mega-col a:hover { color: var(--acao-hi); }
.mega-destaque {
  position: relative; display: grid; gap: 10px; align-content: start;
  padding: 22px; border-radius: var(--raio); text-decoration: none;
  background: linear-gradient(160deg, rgba(23, 191, 176, .09), rgba(232, 80, 2, .05));
  border: 1px solid var(--linha-2); overflow: hidden;
}
.mega-destaque:hover { border-color: rgba(23, 191, 176, .5); }
.mega-destaque-tit { font-weight: 600; font-size: 1.05rem; }
.mega-destaque-txt { color: var(--txt-2); font-size: .88rem; max-width: 38ch; }
.mega-destaque-fluxo { width: 220px; margin-top: 8px; fill: none; stroke: var(--teal); stroke-width: 1.4; opacity: .7; }
.mega-destaque-fluxo rect { fill: var(--ink-2); }
.mega-destaque-fluxo rect:last-of-type { stroke: var(--ambar); }
.mega-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linha); }
.mega-rodape > a:not(.btn) { color: var(--txt-2); font-size: .86rem; text-decoration: none; }
.mega-rodape > a:not(.btn):hover { color: var(--txt); }
.mega-rodape .btn { margin-left: auto; }

/* G-01 · Submenu Cases (decisão 31, 20/10/2026): duas subpáginas em cartões */
.mega-grade--cases { grid-template-columns: repeat(2, minmax(0, 360px)); }
.mega-case {
  display: grid; gap: 8px; align-content: start; padding: 20px 22px;
  border-radius: var(--raio); text-decoration: none; color: var(--txt);
  border: 1px solid var(--linha-2);
  background: linear-gradient(160deg, rgba(232, 80, 2, .08), rgba(232, 80, 2, .02));
  transition: border-color calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.mega-case--ia { background: linear-gradient(160deg, rgba(23, 191, 176, .08), rgba(23, 191, 176, .02)); }
.mega-case:hover, .mega-case:focus-visible { border-color: rgba(232, 80, 2, .6); transform: translateY(-2px); }
.mega-case--ia:hover, .mega-case--ia:focus-visible { border-color: rgba(23, 191, 176, .55); }
.mega-case-tag { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-claro); }
.mega-case--ia .mega-case-tag { color: var(--teal); }
.mega-case-tit { font-weight: 600; font-size: 1.05rem; }
.mega-case-txt { color: var(--txt-2); font-size: .88rem; max-width: 38ch; }

/* ---------- G-04 Menu mobile ---------- */

.menu-mobile {
  position: fixed; z-index: 49;
  top: calc(var(--topo-h) + 8px); left: var(--gut); right: var(--gut);
  max-height: calc(100dvh - var(--topo-h) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 22px 22px;
  border-radius: 18px;
  background: rgba(10, 10, 12, .86);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 30px 80px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  opacity: 0; transform: translateY(-12px) scale(.98); transform-origin: 50% 0;
  transition: opacity calc(.32s * var(--motion)) var(--ease-out),
              transform calc(.5s * var(--motion)) cubic-bezier(.22, 1, .36, 1);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile.aberto { opacity: 1; transform: none; }
/* os blocos do menu chegam em cascata; ao fechar, saem juntos */
.menu-mobile nav > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity calc(.4s * var(--motion)) var(--ease-out),
              transform calc(.5s * var(--motion)) cubic-bezier(.22, 1, .36, 1);
}
.menu-mobile.aberto nav > * { opacity: 1; transform: none; transition-delay: calc((var(--i, 0) * 45ms + 90ms) * var(--motion)); }
.menu-mobile .mm-grupo:last-of-type { border-bottom: 0; }
/* véu atrás do menu: escurece a página e fecha o menu ao toque */
.menu-veu {
  position: fixed; inset: 0; z-index: 48;
  background: rgba(4, 5, 8, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity calc(.35s * var(--motion)) var(--ease-out);
}
.menu-veu.on { opacity: 1; pointer-events: auto; }
/* o ícone de duas linhas vira um X */
.menu-mobile-btn .mm-l { transform-box: fill-box; transform-origin: center; transition: transform calc(.4s * var(--motion)) cubic-bezier(.22, 1, .36, 1); }
.menu-mobile-btn[aria-expanded="true"] .mm-l1 { transform: translateY(4px) rotate(45deg); }
.menu-mobile-btn[aria-expanded="true"] .mm-l2 { transform: translateY(-4px) rotate(-45deg); }
@media (prefers-reduced-transparency: reduce) {
  .menu-mobile { background: #0b0c0f; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.mm-grupo { border-bottom: 1px solid var(--linha); }
.mm-gatilho {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: 0; padding: 18px 0; font-size: 1.15rem; font-weight: 600; cursor: pointer; text-align: left;
}
.mm-gatilho::after { content: "+"; font-weight: 400; color: var(--txt-3); font-size: 1.4rem; line-height: 1; }
.mm-gatilho[aria-expanded="true"]::after { content: "−"; }
.mm-painel { padding: 0 0 18px; }
.mm-painel .mega-titulo { margin: 14px 0 8px; }
.mm-painel ul, .mm-links { list-style: none; display: grid; gap: 2px; }
.mm-painel a { display: block; padding: 8px 0; text-decoration: none; color: var(--txt-2); }
.mm-links { margin: 18px 0 26px; }
.mm-links a { display: block; padding: 10px 0; text-decoration: none; font-size: 1.05rem; }

/* ==========================================================================
/* ==========================================================================
   G-07 Rodapé
   Desenho do rodapé de homologa.digital/landingdigital: marca d'água gigante
   cortada no topo, linha de marca com o lema à direita, faixa de contato em
   três células com fio vertical entre elas, a grade de links e a barra de
   baixo. Os fios horizontais se desenham da esquerda para a direita quando o
   rodapé entra na tela, em cascata, como lá.
   A marca d'água de lá é Six Caps; aqui é a Funnel Display, que já carrega.
   ========================================================================== */

.rodape { position: relative; z-index: 1; overflow: hidden; border-top: 1px solid var(--linha); background: var(--ink-1); padding: 0 0 40px; }

.rodape-marca {
  text-align: center; line-height: .72; margin-top: -.26em;
  pointer-events: none; user-select: none;
}
.rodape-marca span {
  display: block; white-space: nowrap;
  font: 600 clamp(3rem, 12.4vw, 14rem)/.72 var(--f-disp);
  letter-spacing: -.03em; text-transform: uppercase;
  color: var(--txt); opacity: .07;
}
html:not(.movimento-reduzido) .rodape-marca {
  opacity: 0; transform: translateY(48px);
  transition: opacity calc(1.1s * var(--motion)) var(--ease-ref), transform calc(1.1s * var(--motion)) var(--ease-ref);
}
html:not(.movimento-reduzido) .rodape.vis .rodape-marca { opacity: 1; transform: none; }

/* fios que se desenham, em cascata */
.rodape-linha, .rodape-grade { position: relative; }
.rodape-linha::after, .rodape-grade::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--linha-2); transform: scaleX(0); transform-origin: left;
  transition: transform calc(.9s * var(--motion)) var(--ease-ref);
}
.rodape-contato::after { transition-delay: calc(.12s * var(--motion)); }
.rodape-grade::after { transition-delay: calc(.24s * var(--motion)); }
.rodape.vis .rodape-linha::after, .rodape.vis .rodape-grade::after { transform: scaleX(1); }

/* linha da marca: logo à esquerda, lema à direita */
.rodape-apresenta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; padding: clamp(22px, 3vw, 38px) 0;
}
.rodape-logo { height: 26px; width: auto; opacity: .9; }
.rodape-lema {
  font: 500 clamp(1.05rem, .9rem + .7vw, 1.5rem)/1.22 var(--f-disp);
  letter-spacing: -.015em; color: var(--txt); text-align: right; max-width: 34ch;
}

/* faixa de contato: três células com fio vertical entre elas */
.rodape-contato { display: grid; grid-template-columns: repeat(3, 1fr); }
.rc { padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.4vw, 34px); position: relative; }
.rc:first-child { padding-left: 0; }
.rc:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--linha-2); transform: scaleY(0); transform-origin: top;
  transition: transform calc(.9s * var(--motion)) var(--ease-ref) calc(.3s * var(--motion));
}
.rodape.vis .rc:not(:first-child)::before { transform: scaleY(1); }
/* lá o valor do contato tem 27,2px; aqui ele subiu de 19,2 para perto disso */
.rc-chave { font: 600 clamp(1.25rem, 1rem + 1.1vw, 1.75rem)/1.22 var(--f-disp); letter-spacing: -.018em; color: var(--txt); }
.rc-chave a { color: inherit; text-decoration: none; }
.rc-chave a:hover { color: var(--acao-hi); }
.rc-apoio { margin-top: 10px; font-size: .9rem; line-height: 1.5; color: var(--txt-2); max-width: 34ch; }

/* Terceira célula: os atalhos de LLM do site atual, que abrem o chat já com a
   pergunta escrita. Lá os ícones têm 60px; aqui 44, porque a célula do rodapé
   é mais estreita que a seção de lá. */
.rc-chave--ia {
  font: 600 clamp(.92rem, .88rem + .2vw, 1.02rem)/1.35 var(--f-disp);
  letter-spacing: -.01em; color: var(--txt-2); max-width: 26ch;
}
.rc-llms { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rc-llms a {
  display: inline-flex; line-height: 0; border-radius: 10px; overflow: hidden;
  opacity: .72;
  transition: opacity calc(var(--dur-micro) * var(--motion)) var(--ease-out),
              transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.rc-llms a:hover, .rc-llms a:focus-visible { opacity: 1; transform: translateY(calc(-2px * var(--motion))); }
.rc-llms img { display: block; width: 44px; height: 44px; }

/* grade de links */
.rodape-grade {
  display: grid; grid-template-columns: 1fr 1.6fr .9fr 1.1fr; gap: 40px;
  padding: clamp(30px, 3.4vw, 46px) 0;
}
.rodape-tit { color: var(--txt-3); margin-bottom: 16px; }
.rodape ul { list-style: none; display: grid; gap: 8px; font-size: .9rem; }
.rodape-2col { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.rodape a { color: var(--txt-2); text-decoration: none; }
.rodape a:hover { color: var(--txt); }

/* barra de baixo */
.rodape-base {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px;
  padding-top: 26px; color: var(--txt-3); font-size: .84rem;
}
.rodape-legal { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.rodape-util { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.rodape-subir {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 600 .72rem/1 var(--f-disp); letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-3); text-decoration: none;
  transition: color calc(var(--dur-micro) * var(--motion));
}
.rodape-subir:hover { color: var(--acao-hi); }
.rodape-subir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1023px) {
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-contato { grid-template-columns: 1fr; }
  .rc { padding-left: 0; padding-right: 0; }
  .rc:not(:first-child)::before { display: none; }
  .rodape-lema { text-align: left; }
}
@media (max-width: 599px) {
  .rodape-grade { grid-template-columns: 1fr; }
  .rodape-2col { grid-template-columns: 1fr; }
  .rodape-util { margin-left: 0; width: 100%; justify-content: space-between; }
}
/* ==========================================================================
   G-05 Barra inferior no mobile
   ========================================================================== */

.barra-mobile { display: none; }
@media (max-width: 1023px) {
  .barra-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; gap: 10px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: rgba(6, 7, 9, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--linha);
    transform: translateY(110%);
    transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
  }
  .barra-mobile.on { transform: none; }
  .barra-mobile .btn { flex: 3; }
  .barra-wa {
    flex: 1; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--linha-3); border-radius: 10px; color: var(--txt);
  }
  .barra-wa svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
}

/* ==========================================================================
   G-06 Roteador
   ========================================================================== */

.roteador {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  background: var(--ink-2); color: var(--txt); border: 1px solid var(--linha-2); border-radius: 18px;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .8);
}
.roteador::backdrop { background: rgba(3, 4, 6, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.roteador[open] { animation: rot-entra calc(var(--dur-base) * var(--motion)) var(--ease-out); }
@keyframes rot-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.rot-in { position: relative; padding: 34px clamp(20px, 4vw, 40px) 36px; }
.rot-fechar { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--linha-2); background: none; cursor: pointer; display: grid; place-items: center; }
.rot-fechar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rot-eyebrow { color: var(--txt-3); margin-bottom: 10px; }
.rot-tit { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 600; letter-spacing: -.025em; margin-bottom: 22px; }
.rot-opcoes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rot-opcoes button {
  width: 100%; height: 100%; text-align: left; display: grid; gap: 6px; cursor: pointer;
  background: var(--ink-1); border: 1px solid var(--linha-2); border-radius: 12px; padding: 16px 18px;
  transition: border-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.rot-opcoes button:hover { border-color: var(--acao); transform: translateY(-2px); }
.rot-opcoes b { font-weight: 600; }
.rot-opcoes span { color: var(--txt-2); font-size: .86rem; line-height: 1.45; }
.rot-voltar { background: none; border: 0; color: var(--txt-3); cursor: pointer; padding: 0; margin-bottom: 14px; }
.rot-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.rot-campos label { display: grid; gap: 6px; font-size: .82rem; font-weight: 500; color: var(--txt-2); }
.rot-campos input:not([type="checkbox"]), .rot-campos textarea {
  font: inherit; font-size: .95rem; color: var(--txt); background: var(--ink); border: 1px solid var(--linha-2); border-radius: 8px; padding: 11px 12px;
}
.rot-campos input:focus, .rot-campos textarea:focus { outline: 2px solid var(--acao); outline-offset: 1px; }
.rot-largo { grid-column: 1 / -1; }
.rot-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.rot-check input { margin-top: 3px; accent-color: var(--acao); }
.rot-urg { background: rgba(255, 107, 87, .08); border: 1px solid rgba(255, 107, 87, .35); padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: .9rem; }
.rot-micro { margin-top: 12px; font-size: .84rem; color: var(--txt-3); }
.rot-proto { margin-top: 12px; color: var(--proto); font-size: .64rem; line-height: 1.6; }
@media (max-width: 599px) {
  .rot-opcoes, .rot-campos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Anotações e painel do protótipo (não fazem parte do site)
   ========================================================================== */

.nota {
  position: relative; margin-top: 44px; max-width: 600px;
  font: 500 .8rem/1.6 var(--f-txt); color: #ddd2ff;
  background: rgba(183, 156, 255, .06); border: 1px dashed rgba(183, 156, 255, .5); border-radius: 10px;
  padding: 14px 16px;
}
.nota-tag { display: block; font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--proto); margin-bottom: 9px; }
.marcador {
  display: inline-block; background: none; color: #cbb8ff;
  font: 500 .6rem/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
  border: 1px dashed rgba(183, 156, 255, .6); border-radius: 4px; padding: 2px 6px; margin: 2px 0 0 4px;
  vertical-align: middle;
}
html.sem-notas .nota, html.sem-notas .marcador { display: none !important; }
/* desde 20/10/2026 o protótipo abre como site: notas, marcadores, o selo
   "imagem de exemplo" e o botão flutuante do protótipo só aparecem com
   ?notas=1 (ou ligando de novo pelo painel, que vem junto) */
html.sem-notas .proto, html.sem-notas .case-img--ex::after { display: none !important; }
/* "Revisado em ... por": enquanto quem assina não estiver definido, o "por" some junto com o marcador */
html.sem-notas .revisado-por { display: none; }

.proto { position: fixed; right: 16px; bottom: 16px; z-index: 60; font-size: .8rem; }
.proto-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: rgba(16, 13, 26, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(183, 156, 255, .55); border-radius: 999px; padding: 8px 14px 8px 8px;
  color: #e7deff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7);
}
.proto-btn-tag { background: var(--proto); color: #140b2e; border-radius: 999px; padding: 4px 8px; font-size: .58rem; }
.proto-secao { font-weight: 500; font-size: .78rem; white-space: nowrap; }
.proto-painel {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: 340px; max-height: calc(100vh - 120px); overflow: auto;
  background: rgba(16, 13, 26, .97); border: 1px solid rgba(183, 156, 255, .45); border-radius: 14px; padding: 18px;
  color: #e7deff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.proto-tit { font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.proto-txt { color: #c7bbe8; font-size: .78rem; line-height: 1.5; margin-bottom: 14px; }
.proto-txt code { font-family: var(--f-mono); font-size: .66rem; color: #fff; }
.proto-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(183, 156, 255, .18); }
.proto-chave, .proto-seg button, .proto-seg a {
  font: 500 .72rem/1 var(--f-txt); color: #e7deff; text-decoration: none; cursor: pointer;
  background: none; border: 1px solid rgba(183, 156, 255, .4); border-radius: 999px; padding: 6px 10px;
}
.proto-chave[aria-pressed="true"], .proto-seg [aria-pressed="true"], .proto-seg [aria-current="true"] { background: var(--proto); color: #140b2e; border-color: var(--proto); }
.proto-seg { display: flex; gap: 6px; }
.proto-linha--paginas { flex-direction: column; align-items: flex-start; gap: 8px; }
.proto-linha--paginas .proto-seg { flex-wrap: wrap; }
.proto-sub { margin: 14px 0 8px; color: var(--proto); font-size: .6rem; }
.proto-ir { list-style: none; display: grid; gap: 2px; }
.proto-ir a { display: block; padding: 5px 6px; border-radius: 6px; text-decoration: none; color: #d8ccff; font-size: .76rem; }
.proto-ir a:hover, .proto-ir a[aria-current="true"] { background: rgba(183, 156, 255, .14); color: #fff; }
@media (max-width: 1023px) {
  .proto { right: 10px; bottom: 84px; }
  .proto-secao { display: none; }
  .proto-btn { padding: 6px; }
  .proto-painel { width: min(340px, calc(100vw - 20px)); }
}

.aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 70; max-width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: rgba(16, 13, 26, .96); border: 1px solid rgba(183, 156, 255, .55); color: #ece5ff;
  border-radius: 12px; padding: 12px 16px; font-size: .84rem; line-height: 1.5;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .8);
  transition: opacity 200ms, transform 200ms var(--ease-out);
}
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.aviso code { font-family: var(--f-mono); font-size: .7rem; color: #fff; }
.aviso b { color: var(--proto); font-weight: 600; }
@media (max-width: 1023px) { .aviso { bottom: 140px; } }

/* ---------- Rótulos editoriais curtos em caixa alta ----------
   Títulos de coluna do megamenu e do rodapé e o "Voltar para o topo". */
.mega-titulo, .rodape-tit, .rodape-subir {
  font-family: var(--f-rot); font-weight: 500;
  font-size: 11px; letter-spacing: .1em; line-height: 1.3;
}

/* rastro do ponteiro em pontos (js/ponteiro.js): ATRÁS do conteúdo (z 1), como no squared;
   receber clique; só existe com mouse e sem movimento reduzido */
.ponteiro-rastro { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ==========================================================================
   Tons de fundo (referência: squared-media.nl, 20/10/2026): além do
   escuro, um sálvia pálido (claro) e um sálvia médio (verde), com o texto
   em verde-musgo em vez de preto. Cada tom redefine os tokens, e as regras
   das seções se adaptam sozinhas. Todos os textos passam de 4,5:1.
   .tom-escuro devolve os tokens do escuro a ilhas dentro de um tom claro
   (painéis que funcionam como tela).
   ========================================================================== */
/* o sálvia médio (#b8c0a5) saiu em 20/10/2026: só o pálido é usado */
:root { --sage-claro: #dbdecd; --musgo: #182113; }
.tom-claro, .rodape {
  --txt-tit: var(--musgo);
  --linha: rgba(24, 33, 19, .13);
  --linha-2: rgba(24, 33, 19, .22);
  --linha-3: rgba(24, 33, 19, .36);
  color: var(--txt);
}
/* claro: título 12:1, corpo 9,6:1, terciário 5,3:1 sobre #dbdecd. O rodapé
   também, como no squared-media, que fecha a página no sálvia pálido */
.tom-claro, .rodape {
  --txt: #232c1d; --txt-2: #3e4a37; --txt-3: #4f5a46;   /* terciário 5,3:1 */
  --ink-1: #e7e9dd; --ink-2: #d2d6c3; --ink-3: #c8ccb7;
  --azul-claro: #9a3400;    /* laranja de texto: 5,3:1 */
  background: var(--sage-claro);
}
.rodape { background: var(--sage-claro); }
.tom-escuro {
  --txt-tit: #ffffff; --txt: #eceef1; --txt-2: #aab1bd; --txt-3: #858d9b;
  --linha: rgba(236, 238, 241, .08); --linha-2: rgba(236, 238, 241, .14); --linha-3: rgba(236, 238, 241, .26);
  --ink-1: #0a0c10; --ink-2: #0f1218; --ink-3: #151922;
  --azul-claro: #ff7a33; --sinal: #ff6b57;
  color: var(--txt);
}
/* hovers que iam para branco fixo */
:is(.tom-claro, .rodape) .btn--sec:hover,
:is(.tom-claro, .rodape) .btn--sec:focus-visible,
:is(.tom-claro, .rodape) .link-seta a:hover { color: var(--txt-tit); }
:is(.tom-claro, .rodape) a:not(.btn):hover { color: var(--azul-claro); }
:is(.tom-claro, .rodape) .btn--sec { background: rgba(255, 255, 255, .18); }
/* rodapé em sálvia pálido em todas as páginas; a marca d'água vira musgo */
.rodape { border-top-color: transparent; }
.rodape-marca span { color: var(--musgo); opacity: .09; }
/* o logo do rodapé é branco: no sálvia ele vira tinta escura */
.rodape-logo { filter: brightness(0); opacity: .85; }
/* o coral da espera não lê no sálvia: em texto, um vermelho escuro (6,1:1) */
.tom-claro { --sinal: #8a1f10; }

/* botão principal com o brilho do squared-media: o próprio laranja
   espalhado em volta, mais forte no hover */
.btn--pri:not(.topo-cta) { border-radius: 12px; box-shadow: 0 0 45px rgba(232, 80, 2, .35); }
.btn--pri:not(.topo-cta):hover, .btn--pri:not(.topo-cta):focus-visible {
  box-shadow: 0 0 60px rgba(232, 80, 2, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ---------- Rodapé encorpado (20/10/2026) ----------
   No sálvia pálido o texto fino sumia: tudo sobe um peso e o texto
   secundário passa ao tom de corpo. */
.rodape { font-weight: 500; }
.rodape-lema { font-weight: 600; }
.rc-chave { font-weight: 700; color: var(--txt-tit); }
.rc-chave--ia { font-weight: 700; color: var(--txt); }
.rc-apoio { font-weight: 500; color: var(--txt); }
.rodape-tit { font-weight: 700; color: var(--txt-2); }
.rodape ul { font-size: .95rem; }
.rodape a { font-weight: 500; color: var(--txt); }
.rodape a:hover { color: var(--azul-claro); }
.rodape-base { font-weight: 500; color: var(--txt-2); }
.rodape-subir { font-weight: 700; color: var(--txt-2); }

/* no claro o texto parece mais fino que no escuro: o corpo sobe para 500 */
.tom-claro, .rodape { font-weight: 500; }

/* ==========================================================================
   Títulos em todas as páginas (20/10/2026): a Familjen 400 da ShieldWP,
   que estava só na home. :root dá a especificidade para vencer o atalho
   font: das folhas de cada página sem tirar delas os tamanhos próprios.
   ========================================================================== */
:root :where(main) :is(h1, h2, .h2, .ia-h1, .post-h1, .ini-h1, .ini-h2) {
  font-family: var(--f-shield); font-weight: 400; font-synthesis: none; letter-spacing: -.045em;
}
:root :where(main) :is(.ia-h1, .post-h1, .ini-h1) { line-height: .96; letter-spacing: -.055em; }
:root :where(main) .h2:not(.final-h2) { font-size: clamp(34px, 4.6vw, 66px); line-height: .96; }
:root :where(main) .final-h2 { line-height: .94; }
:root :where(main) h3 { font-family: var(--f-shield); font-weight: 500; font-synthesis: none; letter-spacing: -.025em; }
/* H1 das internas acima dos H2 (que vão a 66px): de 46 a 92px, com a
   medida em ch soltada para a Familjen, que é mais estreita */
:root :where(main) :is(.ia-h1, .post-h1) { font-size: clamp(46px, 5.8vw, 92px); max-width: 17ch; }
/* títulos longos (mais de 40 caracteres, marcados pelo js/titulos-desfoque.js)
   e títulos de post: escala menor, para não passar de 3 linhas */
:root :where(main) :is(.ia-h1[data-longo], .post-h1) { font-size: clamp(40px, 4.4vw, 70px); max-width: 20ch; }

/* a marca d'água "DIGITAL PIXEL" saiu do rodapé em 20/10/2026; sem ela,
   o rodapé ganha o respiro de cima que a home já tinha */
.rodape { padding-top: clamp(48px, 6vw, 96px); }
/* painéis desenhados para o escuro que ficam dentro de uma dobra pálida:
   viram uma tela escura com os tokens do escuro (como a cena da HOME-05) */
.tela-escura {
  background: #0a0c10; border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px; padding: clamp(16px, 2.2vw, 32px);
  box-shadow: 0 24px 60px -30px rgba(24, 33, 19, .45);
}

/* Lenis (js/rolagem.js): o CSS recomendado pela biblioteca */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ==========================================================================
   Megamenus no desenho do squared-media.nl (20/10/2026): colunas com rótulo
   pequeno em caixa alta e itens de título com linha de apoio, fio entre as
   colunas, e um cartão de destaque à direita (imagem e texto com botão).
   O de cases tem duas frentes só em texto: "Sites e sistemas", com seis cases
   em duas colunas, e "Transformação Operacional com IA"; a visão geral fica embaixo.
   ========================================================================== */
.mm { display: grid; gap: 0; align-items: stretch; }
.mm--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(380px, 1.45fr); }
.mm--cases { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mm-col { padding: 6px 22px 10px; border-left: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.mm > .mm-col:first-child { border-left: 0; padding-left: 6px; }
.mm-rot {
  margin: 0 0 14px; font: 600 11px/1 var(--f-txt); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(238, 236, 231, .55);
}
.mm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-i, .mm-todos {
  display: block; margin-left: -10px; padding: 8px 10px; border-radius: 10px;
  text-decoration: none; transition: background-color calc(.2s * var(--motion));
}
.mm-i:hover, .mm-i:focus-visible, .mm-todos:hover, .mm-todos:focus-visible { background: rgba(255, 255, 255, .06); }
.mm-t { display: flex; align-items: center; gap: 8px; font: 500 15px/1.3 var(--f-txt); color: #eeece7; }
.mm-s { display: block; margin-top: 3px; font: 450 13px/1.4 var(--f-txt); color: rgba(238, 236, 231, .62); }
.mm-todos { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 14px/1 var(--f-txt); color: #eeece7; }
.mm-todos svg, .mm-sec svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform calc(.2s * var(--motion)); }
.mm-todos:hover svg, .mm-sec:hover svg { transform: translateX(3px); }
.mm .tag { font-size: 10px; }

/* cartão de destaque */
.mm-dest {
  display: grid; grid-template-columns: 172px minmax(0, 1fr); margin-left: 14px; min-height: 236px;
  border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06);
}
.mm-dest-vis { position: relative; background: #0b0c0f; overflow: hidden; }
.mm-dest-vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-dest-vis--fluxo { display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 80%, rgba(232, 80, 2, .18), transparent 60%), #0b0c0f; }
.mm-dest-vis--fluxo svg { width: 78%; height: auto; fill: none; stroke: rgba(238, 236, 231, .5); stroke-width: 1.4; }
.mm-dest-vis--fluxo rect { fill: #14161b; stroke: var(--acao); }
.mm-dest-vis--fluxo rect.mm-ia { stroke: var(--teal); }
.mm-dest-vis--fluxo rect.mm-ap { stroke: var(--ambar); }
.mm-dest-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 20px 18px; }
.mm-dest-t { margin: 0; font: 500 15px/1.3 var(--f-txt); color: #eeece7; }
.mm-dest-s { margin: 0 0 auto; font: 450 13px/1.45 var(--f-txt); color: rgba(238, 236, 231, .62); }
.mm-dest .btn { margin-top: 14px; }
.mm-sec { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 13px/1 var(--f-txt); color: rgba(238, 236, 231, .8); text-decoration: none; }
.mm-sec:hover { color: #fff; }

/* cases: as duas frentes só em texto, com o mesmo peso (28/10/2026) */
.mm ul.mm-lista2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
/* visão geral dos cases: linha inteira embaixo das duas frentes (28/10/2026) */
.mm-geral { grid-column: 1 / -1; margin-top: 16px; padding: 12px 6px 0; border-top: 1px solid rgba(255, 255, 255, .08); }

/* entrada: os blocos sobem e aparecem em cascata */
.mega:not([hidden]) .mm > * { animation: mm-entra calc(.45s * var(--motion)) var(--ease-out) both; }
.mega:not([hidden]) .mm > :nth-child(2) { animation-delay: calc(.04s * var(--motion)); }
.mega:not([hidden]) .mm > :nth-child(3) { animation-delay: calc(.08s * var(--motion)); }
.mega:not([hidden]) .mm > :nth-child(4) { animation-delay: calc(.12s * var(--motion)); }
@keyframes mm-entra { from { opacity: 0; transform: translateY(8px); } }

/* gatilho ativo: pílula de fundo, como no squared */
.menu-gatilho[aria-expanded="true"]::before {
  content: ""; position: absolute; inset: -7px -12px; z-index: -1; border-radius: 10px;
  background: rgba(255, 255, 255, .09);
}
.menu-gatilho[aria-expanded="true"]::after { width: 0 !important; }

/* telas médias: o destaque desce para uma linha própria */
@media (max-width: 1399px) {
  .mm--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .mm--3 .mm-dest { grid-column: 1 / -1; margin-left: 0; min-height: 0; grid-template-columns: 200px minmax(0, 1fr); }
}

/* barra do header entre 1101 e 1365px: com o vidro e o recheio de 20px o
   botão encolhia até sumir; o menu aperta, Suporte e Contato saem (seguem no
   rodapé) e o botão nunca encolhe */
.topo-cta { flex-shrink: 0; }
@media (min-width: 1101px) and (max-width: 1365px) {
  .menu { margin-left: clamp(.75rem, 2vw, 1.5rem); }
  .menu ul { gap: clamp(.75rem, 1.4vw, 1.2rem); }
  .topo-util { display: none; }
  .topo-cta.btn--sm { margin-left: auto; }
}
/* de 1366px para cima Suporte e Contato cabem, com o menu um pouco mais junto */
@media (min-width: 1366px) and (max-width: 1799px) {
  .menu { margin-left: 1.5rem; }
  .menu ul { gap: 1.5rem; }
}
@media (min-width: 1101px) and (max-width: 1199px) {
  .topo-logo img { height: 14px; }
  .menu a, .menu-gatilho { font-size: .86rem; }
}