/* ═══════════════════════════════════════════════════════════════════════
   CONNEXFY — folha compartilhada do site.
   A arte da home (o aparelho da hero e as três demonstrações) mora em
   hero-home.css: quem abre a Política não baixa nada disso.

   ⚠️ A ESCALA, O ESPAÇO E OS BOTÕES SÃO OS DO SITE DA FATORMIX (Ronaldo,
   03/09/2026). Os dois são da mesma casa e da mesma família, e lá a
   experiência já está calibrada: seis degraus de tipo, grade de espaço de 4,
   botão de 52 px, miúdo de 42, barra de 84 px. Copiar a LÓGICA — e não os
   valores de cor — é o que faz os dois parecerem irmãos sem virarem o mesmo
   site.

   ⚠️ O QUE NÃO VEM DE LÁ É A COR. Este site é CLARO: o chão é o Base
   #F5F9FC, e as superfícies escuras são acento — o bloco de IA, o fecho e o
   rodapé. E nada de pink: ele é assinatura de origem da Fatormix, não do
   produto (ESTRATEGIA §0.6).

   ⚠️ NENHUMA COR DA PALETA ANTIGA. O site publicado usava a família Slate
   (#0F172A #64748B #94A3B8 #E7E9F2 #F7F8FC) e um navy próprio (#0A0E1A
   #141C30 #1F2942). A decisão de marca de 03/09/2026 substituiu as duas: os
   neutros passam a ser DERIVADOS do navy da casa, e é por isso que o cinza
   deste site é levemente azulado em vez de neutro.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fontes locais (invariante 3) ─────────────────────────────────────
   O site publicado baixava Inter e JetBrains Mono do Google Fonts remoto
   (INVENTARIO, achado 8). As duas famílias do manual moram aqui, e a mono
   SAIU: o manual declara duas famílias e ela não é uma delas. Onde o site
   antigo usava mono — os números da campanha, o "#100", o "R$ 248k" —, quem
   resolve é a Inter com numeral tabular (.num). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/jakarta-var-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* ── tokens ───────────────────────────────────────────────────────────
   Cor pelo PAPEL, não pelo nome do tom: quem for ajustar procura "borda",
   não "navy-100". Depois daqui, nenhum hex solto no corpo do CSS. */
:root {
  /* ⚠️ Habilita a interpolação até `auto` — é o que faz o acordeão e o drawer
     animarem a altura sem JavaScript. Onde não houver suporte, a propriedade
     é ignorada e a abertura volta a ser instantânea, que era o estado
     anterior: nada depende dela para aparecer. */
  interpolate-size: allow-keywords;

  /* marca */
  --primaria:     #6366F1;   /* Indigo 500 — a marca, e o miolo do botão
                                (4,47:1 com o branco: decisão de Ronaldo,
                                16/09/2026, ver ESTRATEGIA §0.43)             */
  --primaria-esc: #4F46E5;   /* Indigo 600 — o :hover, e o texto do
                                secundário no hover (5,94:1 sobre o Base)     */
  --ia:           #A855F7;   /* Violet 500 — SÓ onde o assunto é IA        */

  /* superfícies escuras — acento, nunca o tom do site */
  --canvas:      #0D1E2E;
  --superficie:  #132B42;
  --elevado:     #1A3A5C;

  /* neutros, derivados do navy (NÃO é a família Slate) */
  --base:        #F5F9FC;   /* fundo da página                            */
  --cartao:      #FFFFFF;
  --borda:       #D4E4EF;   /* Navy 100                                   */
  --suave:       #2A5680;   /* Navy 500 — texto secundário                */
  --texto:       #0D1E2E;   /* = Canvas                                   */
  --branco:      #FFFFFF;
  /* o par de leitura sobre escuro: o texto secundário do tema claro não tem
     contraste sobre o Canvas, e usá-lo lá é o erro que não dá erro nenhum */
  --suave-escuro:#9FC2DC;

  /* O ARO — a borda em degradê Indigo→Violet, e desde 16/09/2026 ele é o
     ÚNICO degradê do site: vive no painel do fecho e em mais nada. Saiu dos
     botões a pedido de Ronaldo (o `--degrade` que os preenchia foi removido
     junto — token sem dono ensina um padrão que não existe mais). O degradê
     de ORIGEM da Fatormix (#6366F1 → #E6007E) não entra aqui — ele é
     assinatura da casa, não do produto. */
  --aro: linear-gradient(-45deg, var(--primaria) 70%, var(--ia) 115%);
  /* o miolo do painel de ação, sobre superfície escura */
  --painel-escuro: linear-gradient(160deg,
      color-mix(in srgb, var(--superficie) 92%, #000),
      color-mix(in srgb, var(--canvas) 96%, #000));

  /* tipografia — duas famílias, e nada além delas */
  --fonte-titulo: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --fonte-corpo:  "Inter", system-ui, -apple-system, sans-serif;

  /* escala tipográfica — SEIS degraus, a mesma do site da Fatormix:
     14 · 16 · 18 · 26 · 40 · 60. A razão ~1,5 entre os três maiores é o que
     faz H1, H2 e H3 parecerem da mesma família; o clamp governa o celular,
     onde 60 px não caberiam em 375 px de largura. */
  --t1: .875rem;
  --t2: 1rem;
  --t3: 1.125rem;
  --t4: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);   /* 22 → 26 · H3 */
  --t5: clamp(1.875rem, 1.2rem + 2.6vw, 2.5rem);   /* 30 → 40 · H2 */
  --t6: clamp(2.25rem, 1.3rem + 4.2vw, 3.5rem);    /* 36 → 56 · H1 */

  /* espaço — grade única de 4 */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4rem;  --e9: 6rem;

  /* forma */
  --raio-1: 8px;
  --raio-2: 16px;
  --sombra-1: 0 1px 2px rgb(13 30 46 / .06), 0 10px 24px -20px rgb(13 30 46 / .45);
  --sombra-2: 0 24px 48px -32px rgb(13 30 46 / .55);
  --sombra-topo: 0 10px 30px -24px rgb(13 30 46 / .5);

  /* medida */
  --largura: 1140px;
  --leitura: 65ch;   /* 60–75 caracteres por linha */
  --barra: 84px;     /* altura do cabeçalho fixo — usada pelo hero e pelas âncoras */
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--base);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t2);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t6); font-weight: 800; }
h2 { font-size: var(--t5); }
h3 { font-size: var(--t4); line-height: 1.22; }
p  { margin: 0; }
a  { color: inherit; }
img, svg { display: block; max-width: 100%; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 3px;
  border-radius: var(--raio-1);
}
.escuro :where(a, button, summary):focus-visible {
  outline-color: color-mix(in srgb, var(--primaria) 45%, var(--branco));
}

/* Fora da tela, mas legível por leitor de tela. display:none sumiria também
   para ele, e o link de ícone ficaria sem nome. */
.ler-so {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e5);
}
@media (min-width: 640px) { .wrap { padding-inline: var(--e6); } }
.wrap--estreito { max-width: 46rem; }

/* O cabeçalho é FIXO, então quem chega por âncora precisa da folga — senão o
   título da seção para embaixo da barra e o clique parece não ter
   funcionado. */
:target, [id] { scroll-margin-top: calc(var(--barra) + var(--e4)); }

/* Numeral de coluna: é o que a mono fazia no site antigo, e é a única coisa
   que ela fazia. tabular-nums alinha as casas sem trocar de família. */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ── superfícies ───────────────────────────────────────────────────────
   `.escuro` é o INTERRUPTOR de superfície do site: ele troca o chão e, com
   ele, todo par de texto e de botão que estiver dentro. Sem um interruptor
   assim, um botão desenhado para fundo claro acaba dentro de um bloco escuro
   e ninguém tem régua para pegar. */
.escuro { background: var(--canvas); color: var(--branco); }
.escuro .lead, .escuro .olho,
.escuro .hero__sub, .escuro .legal__data { color: var(--suave-escuro); }
/* ⚠️ A seção do PROBLEMA nascia com o mesmo Base da hero e as duas colavam
   numa superfície só — Ronaldo apontou em 03/09/2026. O site alterna: hero
   Base · problema branco · plataforma Base · IA escuro · por dentro branco ·
   fecho e rodapé no Canvas. Duas seções vizinhas nunca repetem o chão. */
.secao--clara { background: var(--cartao); }

/* ── tipos de bloco ───────────────────────────────────────────────────── */
.secao { padding-block: var(--e8); }
@media (min-width: 1024px) { .secao { padding-block: var(--e9); } }
.secao__cabeca { display: grid; gap: var(--e4); max-width: 46rem; }

.olho {
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primaria);
  margin: 0;
}
/* A etiqueta de IA é o único lugar do topo em que o Violet aparece — e ele
   aparece porque ali o assunto É a IA (ESTRATEGIA §0.6). */
/* ⚠️ `justify-self: start` junto com o `inline-block`: a etiqueta é item de
   um contêiner grid (.hero__texto, .secao__cabeca) e por padrão ESTICA para a
   largura da coluna — a pílula virava uma faixa de ponta a ponta. O
   inline-block sozinho não resolve, porque quem estica é o grid, não o
   display do filho. */
.olho--ia {
  display: inline-block;
  justify-self: start;
  padding: var(--e2) var(--e4);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ia) 35%, transparent);
  background: color-mix(in srgb, var(--ia) 8%, transparent);
  color: color-mix(in srgb, var(--ia) 78%, var(--texto));
  text-transform: none;
  letter-spacing: .01em;
  font-size: var(--t1);
}
.escuro .olho--ia {
  color: color-mix(in srgb, var(--ia) 55%, var(--branco));
  background: color-mix(in srgb, var(--ia) 14%, transparent);
  border-color: color-mix(in srgb, var(--ia) 45%, transparent);
}

/* O realce do título: cor da marca na metade da frase que é a promessa —
   "num só lugar", "vazando venda". */
.realce { font-style: normal; color: var(--primaria); }
.escuro .realce { color: color-mix(in srgb, var(--primaria) 45%, var(--branco)); }

.lead { font-size: var(--t3); color: var(--suave); max-width: var(--leitura); }
.remate { font-weight: 600; }

.acao { display: grid; gap: var(--e3); justify-items: start; }
/* ⚠️ O respiro entre o texto e a ação é DAQUI, e não de uma margem no botão.
   O `.secao__cabeca` é um grid com gap próprio, mas a `.acao` é IRMÃ dele —
   o gap do cabeçalho não a alcança, e ela nascia colada na última linha do
   texto (Ronaldo, 03/09/2026). Um seletor de irmão adjacente resolve nos dois
   lugares em que isso acontece (o bloco de IA e a chamada intermediária) sem
   dar margem a botão nenhum, que quebraria os que vivem dentro de um grid. */
.secao__cabeca + .acao { margin-top: var(--e6); }
.acao--linha { grid-auto-flow: column; justify-content: start; align-items: center; }
@media (max-width: 479px) { .acao--linha { grid-auto-flow: row; justify-content: stretch; } }

/* ── botões ───────────────────────────────────────────────────────────
   A mesma anatomia do site da Fatormix — 52 px, seta que anda no hover —,
   com DUAS diferenças pedidas por Ronaldo em 16/09/2026:

     · PÍLULA, e não raio 8: `border-radius: 999px`. É a mesma forma do
       seletor de idioma, que já era pílula — os dois controles da barra
       passam a falar a mesma língua.
     · SEM DEGRADÊ: o primário é Indigo SÓLIDO, e o secundário tem borda
       sólida. O degradê Indigo→Violet saiu dos botões e fica onde ainda diz
       alguma coisa: o aro do painel do fecho, que não é botão.

   ⚠️ O MIOLO É O INDIGO 500 (#6366F1), POR DECISÃO DE RONALDO (16/09/2026),
   e a decisão foi tomada com o número na mão: branco sobre esse tom mede
   4,47:1 — três centésimos ABAIXO do piso de 4,5 do AG_BUILD para texto
   normal. Eu tinha posto o 600 (6,29:1) por causa disso; a marca manda o 500,
   e a cor do botão primário é a cor da marca. Fica registrado como exceção
   consciente, não como esquecimento (ESTRATEGIA §0.43).
   Três coisas seguram o piso onde dá: peso 600, corpo nunca abaixo de 14 px,
   e o hover ESCURECE para o Indigo 600 (6,29:1) em vez de clarear — clarear
   um botão que já está no limite o afastaria ainda mais. */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 52px;
  padding: var(--e3) var(--e6);
  border: 1px solid var(--primaria);
  border-radius: 999px;
  background: var(--primaria);
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-size: var(--t2);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .25s ease,
              border-color .18s ease, color .18s ease;
}
/* a seta acompanha o texto e anda um fio no hover — o movimento diz "vai para
   algum lugar", que é o que o botão faz */
.seta { width: 1.15em; height: 1.15em; flex: none; transition: transform .18s ease; }

/* Secundário: miolo transparente e a MESMA borda de 1 px do primário — só que
   visível, porque o miolo não a cobre. A borda existe nos dois de propósito:
   assim os dois medem exatamente a mesma altura lado a lado, sem o secundário
   ficar 2 px mais alto por ter borda e o primário não.
   A cor da borda é a primária a meia força: inteira, os dois botões da hero
   brigavam pela mesma atenção; no hover ela fecha para a cor cheia. */
.botao--contorno {
  background: transparent;
  border-color: color-mix(in srgb, var(--primaria) 55%, transparent);
  color: var(--texto);
  box-shadow: none;
}
.escuro .botao--contorno {
  border-color: color-mix(in srgb, var(--branco) 40%, transparent);
  color: var(--branco);
}
.botao--miudo { min-height: 42px; padding: var(--e2) var(--e4); font-size: var(--t1); }

@media (max-width: 479px) { .acao > .botao { width: 100%; padding-inline: var(--e4); } }

@media (hover: hover) {
  /* o hover ESCURECE, nunca clareia: o miolo já está no limite de contraste,
     e escurecer é o único sentido que o afasta dele (6,29:1 no tom abaixo) */
  .botao:hover {
    background-color: var(--primaria-esc);
    border-color: var(--primaria-esc);
    transform: translateY(-2px);
    box-shadow: var(--sombra-2);
  }
  /* ⚠️ O texto do secundário no hover vai para o Indigo 600, não para o 500:
     o 500 sobre o Base mede 4,22:1 e reprova; o 600 mede 5,94:1. */
  .botao--contorno:hover {
    background-color: transparent;
    border-color: var(--primaria-esc);
    color: var(--primaria-esc);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -22px rgb(99 102 241 / .8);
  }
  .escuro .botao--contorno:hover { border-color: var(--branco); color: var(--branco); }
  .botao:hover .seta { transform: translateX(3px); }
}

/* ── cabeçalho ────────────────────────────────────────────────────────
   FIXO e com 84 px, a mesma barra do site da Fatormix (Ronaldo, 03/09/2026).
   O vidro deixa a hero passar por baixo, desfocada.

   ⚠️ O fundo translúcido vale SEMPRE, e não só depois de rolar: se ele
   dependesse de uma classe que o JS põe, a página sem JS teria texto passando
   por trás de um cabeçalho transparente.
   ⚠️ E o backdrop-filter vai no PSEUDO-ELEMENTO, nunca no próprio cabeçalho:
   ele cria bloco de contenção, e um position:fixed dentro dele passaria a se
   medir pelo cabeçalho — foi assim que um drawer de tela inteira nasceu com
   140 px no site da casa. */
.topo {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--base) 92%, transparent);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
      transparent 0%, var(--borda) 18%, var(--borda) 82%, transparent 100%) 1;
  transition: box-shadow .25s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topo { background: transparent; }
  .topo::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--base) 78%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
  }
}
.topo.esta-rolado { box-shadow: var(--sombra-topo); }

.topo__grade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: var(--barra);
}
/* Mesma medida do site da Fatormix, inclusive o degrau em 419 px. */
.topo__marca { flex: 0 0 auto; display: inline-flex; align-items: center; padding-block: var(--e2); }
.topo__marca img { width: 156px; height: auto; }
@media (max-width: 419px) {
  .topo__grade { min-height: 76px; gap: var(--e4); }
  .topo__marca img { width: 140px; }
}

/* ── menu ──────────────────────────────────────────────────────────────
   Drawer com <details>: abre e fecha SEM JavaScript. O mesmo <summary> troca
   hambúrguer por ✕ conforme o estado — é um controle só, e a troca é CSS. Um
   segundo botão de fechar precisaria de script, e sem ele o drawer abriria
   sem ter como fechar. */
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: calc(var(--e2) * -1);
  border-radius: var(--raio-1);
  color: var(--texto);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 22px; height: 22px; }
.menu__x { display: none; }
.menu[open] > summary .menu__hamburguer { display: none; }
.menu[open] > summary .menu__x { display: block; }

.nav__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e2);
  font-size: var(--t3); font-weight: 500;
}
.nav__lista a {
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}

@media (max-width: 1023px) {
  /* ── DRAWER LATERAL, entrando pela esquerda ──────────────────────────
     O mesmo do site da Fatormix (Ronaldo, 03/09/2026). O <details> continua
     sendo o motor: sem JavaScript o menu abre e fecha do mesmo jeito. O que o
     CSS acrescenta é a FORMA — painel fixo na lateral — e o DESLIZAR.

     ⚠️ `::details-content` com `content-visibility: visible` mantém o painel
     RENDERIZADO com o menu fechado. Sem isso o navegador o esconde por
     completo e não existe estado de onde animar: o drawer apareceria pronto,
     do nada. É a peça que faz a transição existir. */
  .menu { margin-left: auto; }
  .menu::details-content { content-visibility: visible; block-size: auto; }

  /* ⚠️ Só o BOTÃO sobe de camada: o drawer passa POR CIMA da marca do
     cabeçalho, e o ✕ fica fora da largura dele, do lado direito — é por ele
     que se fecha. (z-index no .topo não resolveria: o drawer está dentro
     dele, e entre irmãos vale a ordem no mesmo contexto de empilhamento.) */
  .menu > summary { position: relative; z-index: 45; }

  /* a marca dentro do drawer: ele cobre a do cabeçalho, e quem aparece no
     lugar é esta, que entra deslizando junto */
  .menu__marca { width: 140px; height: auto; margin-bottom: var(--e2); }

  .menu__conteudo {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 40;
    width: min(84vw, 320px);
    padding: calc(var(--barra) + var(--e5)) var(--e5) var(--e6);
    display: grid;
    align-content: start;
    gap: var(--e5);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--cartao) 0%, var(--base) 100%);
    border-right: 1px solid var(--borda);
    box-shadow: 24px 0 60px -30px rgb(13 30 46 / .45);
    transform: translateX(-101%);   /* 101 para a sombra não vazar na borda */
    transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  }
  .menu[open] .menu__conteudo { transform: none; }

  /* o véu: escurece a página e é onde se toca para fechar */
  .menu::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgb(13 30 46 / .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .menu[open]::before { opacity: 1; visibility: visible; }

  @media (prefers-reduced-motion: reduce) {
    .menu__conteudo, .menu::before { transition: none; }
  }

  .nav__lista {
    gap: var(--e4);
    padding-bottom: var(--e5);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent,
        var(--borda) 14%, var(--borda) 86%, transparent) 1;
  }
  .nav__lista a { font-size: var(--t2); }
  /* o botão fecha o drawer: largura inteira, no pé do painel */
  .topo__cta { justify-content: center; margin: 0; }
}

/* ── seletor de idioma ────────────────────────────────────────────────
   Mesma mecânica e o MESMO desenho do site da Fatormix (Ronaldo,
   03/09/2026): a pílula com borda em volta e o painel nascendo na borda de
   baixo da barra. `display: none` + `:hover`/`:focus-within`: sem JavaScript
   o painel abre e os links são clicáveis (invariante 8). Nada de <select>
   com onchange, que só funciona com script e não é link para o rastreador. */
.idiomas { position: relative; }
.idiomas__rotulo {
  appearance: none;
  background: none;
  border: 1px solid color-mix(in srgb, var(--suave) 34%, transparent);
  border-radius: 99px;
  padding: var(--e2) var(--e3);
  cursor: pointer;
  color: var(--suave);
  font-family: var(--fonte-corpo);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  transition: color .16s ease, border-color .16s ease;
}
.idiomas__globo { width: 16px; height: 16px; flex: 0 0 auto; }
/* No DRAWER o gatilho não abre nada — a lista já está aberta embaixo dele.
   Então ele muda de papel em vez de sumir: deixa de mostrar a sigla (que
   apareceria duas vezes seguidas) e passa a nomear o grupo. E não recebe
   clique, porque botão que não faz nada ensina que o site está quebrado. */
.idiomas__rotulo { pointer-events: none; }
.idiomas__atual { display: none; }
.idiomas__rotulo::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.idiomas__painel { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; }
/* divisória que some antes de encostar nas laterais, para a lista não parecer
   tabela */
.idiomas__painel li + li {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg,
      transparent 0%, var(--borda) 16%, var(--borda) 84%, transparent 100%) 1;
}
.idiomas__painel a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); min-height: 44px;
  color: var(--texto); font-size: var(--t2); font-weight: 600;
  text-decoration: none;
  transition: color .16s ease;
}
.idiomas__nome { flex: 1 1 auto; }
.idiomas__sigla {
  flex: 0 0 auto;
  font-size: var(--t1); font-weight: 700; letter-spacing: .06em;
  color: var(--suave);
}
.idiomas__painel a[aria-current] .idiomas__sigla { color: var(--primaria); }

@media (min-width: 1024px) {
  /* No desktop o drawer se dissolve: o conteúdo volta para a barra e o
     <summary> some. Um link só no HTML, sem duplicação.

     ⚠️ `display: contents` no <details> E no painel, mais o
     `::details-content` — os três, e nenhum é supérfluo. Um <details> FECHADO
     esconde o conteúdo pelo NAVEGADOR, não por CSS do site: no Chrome atual
     é `content-visibility: hidden` no ::details-content, e nos motores mais
     antigos é uma regra de UA. Sem desligar as duas, o menu do desktop some e
     a barra fica só com a marca — e nada acusa. */
  .menu > summary, .menu__marca { display: none; }
  .menu::details-content { content-visibility: visible; display: contents; }
  .menu, .menu__conteudo { display: contents; }

  /* ⚠️ A BARRA VIRA GRADE DE ALTURA CHEIA (`align-items: stretch`): cada item
     vai da borda de cima à de baixo, e não sobra corredor sem hover entre o
     gatilho e o painel. É também o que faz o painel do idioma nascer NA LINHA
     do menu — `top: 100%` de um contêiner que ocupa a barra inteira. Antes
     ele abria por cima, colado ao botão. */
  .topo__grade { position: relative; align-items: stretch; }
  .nav { display: flex; align-items: stretch; gap: var(--e6); margin-left: auto; }
  .nav__lista { flex-direction: row; align-items: stretch; gap: var(--e6); font-size: var(--t1); }
  .nav__lista > li { display: flex; }
  .nav__lista a { color: var(--suave); }
  .nav__lista a:hover { color: var(--texto); }

  /* O contêiner é um item do flex que ESTICA para os 84 px da barra. Sem o
     `align-items: center` de dentro, a pílula — que tem 33 px — fica colada
     no topo, desalinhada do menu e do botão, que se centram sozinhos. */
  /* ⚠️ `align-self: center` no CTA. A barra é `align-items: stretch` — é o
     que faz cada alvo ir da borda de cima à de baixo e o painel de idioma
     nascer na linha do menu —, e por isso o botão TAMBÉM esticava: ele ficava
     com os 84 px da barra em vez dos 42 dele (Ronaldo, 03/09/2026). Quem
     estica é o item, então quem corrige é o item. */
  .topo__cta { align-self: center; }
  .idiomas { display: flex; align-items: center; margin-left: var(--e3); }
  .idiomas__rotulo { pointer-events: auto; padding: 6px var(--e3); }
  .idiomas__atual { display: inline; }
  .idiomas__grupo { display: none; }
  .idiomas:hover .idiomas__rotulo,
  .idiomas:focus-within .idiomas__rotulo {
    color: var(--texto);
    border-color: color-mix(in srgb, var(--suave) 60%, transparent);
  }
  .idiomas:hover .idiomas__rotulo::after,
  .idiomas:focus-within .idiomas__rotulo::after { transform: translateY(1px) rotate(-135deg); }

  /* O painel nasce na borda de baixo do cabeçalho e encosta nela com o -1px;
     só as quinas de baixo são arredondadas — em cima ele é a continuação da
     barra, não um cartão solto. Âncora à DIREITA do gatilho: este controle
     vive no canto, e um painel centrado sairia da tela.
     ⚠️ Sem ponte de hover, e não é esquecimento: quem recebe o :hover é o
     CONTÊINER, que ocupa a barra inteira — entre a pílula e o painel não há
     um pixel fora dele. */
  .idiomas__painel {
    display: none;
    position: absolute;
    top: 100%; right: 0;
    min-width: 12rem;
    margin-top: -1px;
    padding: var(--e2) var(--e4) var(--e3);
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-top: 2px solid var(--primaria);
    border-radius: 0 0 var(--raio-2) var(--raio-2);
    box-shadow: var(--sombra-2);
    z-index: 3;
  }
  .idiomas:hover .idiomas__painel,
  .idiomas:focus-within .idiomas__painel { display: block; }
}

/* ═══ HERO ══════════════════════════════════════════════════════════════
   ⚠️ ELE SE ADAPTA AO CONTEÚDO, e não à janela (Ronaldo, 03/09/2026, revendo
   a decisão de tela cheia da mesma manhã). O `min-height: 100svh` que estava
   aqui amarrava a altura do bloco à altura do monitor: numa janela de 900 px
   ele media 900 e o conteúdo ocupava 543 — os outros 357 eram vão. Numa tela
   alta o vão só cresce, e o visitante rola uma tela inteira de quase nada
   antes de chegar no primeiro argumento.
   Sem o mínimo, a altura passa a ser o que o conteúdo pede mais o respiro: a
   mesma em qualquer monitor, e o bloco seguinte fica sempre à mesma distância
   da dobra.

   ⚠️ O cabeçalho é `position: fixed`, então ele NÃO ocupa espaço no fluxo —
   quem o compensava era o min-height mais o `align-content: center`. Sem
   eles, quem segura o conteúdo abaixo da barra é só o padding de cima, e é
   por isso que ele soma `--barra`. Tirar essa soma faz o H1 nascer por baixo
   da barra, cortado. */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding-block: calc(var(--barra) + var(--e6)) var(--e6);
}
@media (max-width: 419px) { .hero { padding-block: calc(76px + var(--e6)) var(--e6); } }
@media (min-width: 1024px) { .hero { padding-block: calc(var(--barra) + var(--e8)) var(--e8); } }

.hero__grade { display: grid; gap: var(--e6); }
@media (min-width: 1024px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e8); align-items: center; }
}
.hero__texto {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--e5);
  align-content: center;
  max-width: 33rem;
}
@media (min-width: 1024px) { .hero__texto { max-width: 36rem; gap: var(--e6); } }
/* H1 do hero: o mesmo clamp do site da Fatormix, com o teto em 60 px. */
.hero__texto h1 { font-size: clamp(2.25rem, 1.1rem + 5vw, 3.75rem); line-height: 1.10; }
.hero__sub { font-size: var(--t3); color: var(--suave); max-width: 46ch; }

/* ── hero CURTA: as três legais e a página de erro ──────────────────────
   ⚠️ EXCEÇÃO declarada ao hero de tela inteira (§0.24). Aquela regra é de
   página que VENDE: a dobra inteira é o espaço da primeira impressão. Estas
   são para ser LIDAS, e uma tela cheia de título antes do texto é um degrau a
   mais entre quem chegou e o que ele veio ler.

   ⚠️⚠️ COMO O HERO DA HOME, ela limpa o cabeçalho pelo PADDING: o `.topo` é
   `position: fixed` e não ocupa espaço no fluxo, então o padding de cima soma
   `--barra`. É a mesma conta do `scroll-margin-top`, e é a linha que mais
   custa esquecer — sem ela o H1 nasce por baixo da barra, cortado. */
.hero--curta {
  overflow: visible;
  padding-block: calc(var(--barra) + var(--e6)) var(--e7);
}
@media (min-width: 1024px) {
  .hero--curta { padding-block: calc(var(--barra) + var(--e7)) var(--e8); }
}
.hero--curta h1 { font-size: var(--t5); }
/* ⚠️ `.hero__texto` é um GRID, e margem em item de grid SOMA com o gap: uma
   margem de 12 px entre o H1 e a data viraria 44 px de vão. Quem manda aqui é
   o row-gap, e a data e o subtítulo entram sem margem nenhuma. */
.hero--curta .hero__texto { row-gap: var(--e3); max-width: 46rem; }
.hero--centro .hero__texto { margin-inline: auto; text-align: center; justify-items: center; }
.legal__data { margin: 0; font-size: var(--t1); color: var(--suave); }
.legal__data + .hero__sub { margin-top: var(--e4); }

/* AS TARJAS — duas faixas do tom de apoio, uma antes e outra depois do texto
   legal. Elas dão a esta página o ritmo de alternância de superfície que o
   resto do site tem (§0.26) sem quebrar a leitura no meio.
   São decoração: `aria-hidden` no markup, nada dentro, e fora do `.wrap` para
   atravessarem a largura toda. */
.tarja { height: 88px; background: var(--base); }
/* ⚠️ A ALTURA DE 88 px NÃO É ARBITRÁRIA: ela é onde o "x" do rodapé começa.
   A moldura da marca sobe 96 px (`top: -6rem`) e a imagem entra 8 px depois
   dela — 96 − 8 = 88. O topo da faixa e o topo do "x" são o mesmo pixel,
   medido no site da Fatormix (os dois em y=4712). Mexer num número sem o
   outro descola os dois. */

/* ── seção 2 · o problema ──────────────────────────────────────────────
   O CAOS: cinco ferramentas soltas que se JUNTAM quando o ponteiro chega
   perto, endireitam e acendem na cor da marca. Restaurado do site publicado
   (Ronaldo, 03/09/2026) — a fileira de pílulas que estava aqui dizia o
   contrário do que a seção afirma.

   O desenho é o argumento: espalhado vira "num só lugar" sem uma palavra a
   mais. E é a única peça do site em que o movimento CARREGA sentido em vez de
   só dar vida — por isso ela vale a exceção de ter uma coreografia própria.

   ⚠️ Nada aqui é condição para ler nada (invariante 8): as cinco ferramentas
   já estão nomeadas na prosa ao lado, o bloco é `aria-hidden`, e sem hover,
   sem JavaScript ou com prefers-reduced-motion ele fica parado e legível. */
.problema { display: grid; gap: var(--e7); }
@media (min-width: 1024px) {
  .problema { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e8); align-items: center; }
}

.caos { display: flex; flex-wrap: wrap; gap: var(--e4); }
.ficha {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 11px 15px;
  border: 1px dashed var(--borda);
  border-radius: 12px;
  background: var(--cartao);
  box-shadow: 0 12px 26px -18px rgb(13 30 46 / .28);
  color: color-mix(in srgb, var(--suave) 62%, #FFFFFF);
  font-size: var(--t1);
  font-weight: 500;
  white-space: nowrap;
  transform: rotate(var(--rot, 0deg));
  transition: transform .6s cubic-bezier(.2, .75, .2, 1),
              border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.secao--clara .ficha { background: var(--cartao); }
.ficha svg {
  width: 16px; height: 16px; flex: none;
  color: color-mix(in srgb, var(--suave) 44%, #FFFFFF);
  transition: color .4s ease;
}

/* ⚠️ O PALCO ABSOLUTO SÓ EXISTE A PARTIR DE 1024 px. Abaixo disso as fichas
   voltam a ser uma fileira que quebra linha: num telefone não há ponteiro
   para chegar perto, e cinco cartões posicionados à mão numa tela de 360
   viram uma pilha ilegível. É o que o site publicado já fazia — só que lá o
   bloco inteiro SUMIA no celular, e aqui ele continua dizendo o que diz,
   parado. */
@media (min-width: 1024px) {
  .caos { display: block; position: relative; height: 380px; }
  .ficha { position: absolute; }
  /* a posição e o destino de cada uma. Os deslocamentos `--hx`/`--hy` levam
     todas ao MESMO ponto do palco: é a convergência que a seção promete. */
  .ficha:nth-child(1) { top: 14px;  left: 24px;  --rot: -6deg; --hx:  150px; --hy:  150px; }
  .ficha:nth-child(2) { top: 0;     right: 30px; --rot:  5deg; --hx: -140px; --hy:  165px; }
  .ficha:nth-child(3) { top: 150px; left: 70px;  --rot: -3deg; --hx:  120px; --hy:   25px; }
  .ficha:nth-child(4) { top: 186px; right: 12px; --rot:  6deg; --hx: -140px; --hy:   -5px; }
  .ficha:nth-child(5) { bottom: 22px; left: 120px; --rot: -2deg; --hx:  45px; --hy: -120px; }

  /* Quem recebe o hover é o PALCO, não cada ficha: o gesto é "chegar perto do
     conjunto", e não passar por cima de um cartão. Com o hover na ficha, cada
     uma se moveria sozinha e a convergência nunca aconteceria. */
  @media (hover: hover) {
    .caos:hover .ficha {
      transform: translate(var(--hx, 0), var(--hy, 0)) rotate(0deg);
      border-color: color-mix(in srgb, var(--primaria) 40%, transparent);
      color: var(--primaria);
      box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--primaria) 60%, transparent);
    }
    .caos:hover .ficha svg { color: var(--primaria); }
  }
}

/* Quem pediu menos movimento recebe as fichas onde elas estão, sem viagem. */
@media (prefers-reduced-motion: reduce) {
  .ficha { transition: none; }
  .caos:hover .ficha { transform: rotate(var(--rot, 0deg)); }
}

/* ── seção 3 · os cinco módulos ────────────────────────────────────────
   O cartão de Agentes de IA é o único com tratamento próprio: é a frente que
   a marca destaca, e o Violet vive nela. */
.modulos {
  list-style: none; margin: var(--e7) 0 0; padding: 0;
  display: grid; gap: var(--e4);
}
@media (min-width: 640px)  { .modulos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .modulos { grid-template-columns: repeat(3, 1fr); } }
.modulo {
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding: var(--e5);
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
}
.secao--clara .modulo { background: var(--base); }
.modulo p { margin: 0; color: var(--suave); font-size: var(--t1); }
.modulo__nome {
  font-size: var(--t1); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primaria);
}
.modulo__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--e2);
  border-radius: var(--raio-1);
  background: color-mix(in srgb, var(--primaria) 10%, transparent);
  color: var(--primaria);
}
.modulo__icone svg { width: 24px; height: 24px; }
.modulo--ia {
  border-color: color-mix(in srgb, var(--ia) 38%, transparent);
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--ia) 7%, var(--cartao)), var(--cartao));
}
.secao--clara .modulo--ia {
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--ia) 7%, var(--base)), var(--base));
}
.modulo--ia .modulo__nome { color: var(--ia); }
.modulo--ia .modulo__icone {
  background: color-mix(in srgb, var(--ia) 12%, transparent);
  color: var(--ia);
}

/* ── seções centradas: o bloco de IA e a chamada intermediária ────────
   Uma utilidade, não duas cópias. À terceira ocorrência a receita vira token
   ou classe — é a regra de higiene do AG_BUILD, e aqui ela já estava na
   segunda. */
.secao--centro { text-align: center; }
.secao--centro .secao__cabeca { justify-items: center; margin-inline: auto; }
.secao--centro .olho--ia { justify-self: center; }
.secao--centro .lead { margin-inline: auto; }
.secao--centro .acao { justify-items: center; }

/* ── seção 5 · as três demonstrações ───────────────────────────────────
   Texto e painel lado a lado, alternando o lado a cada bloco: sem isso o olho
   desce sempre pela mesma coluna e a página vira uma pilha. */
.dupla { display: grid; gap: var(--e5); margin-top: var(--e8); }
/* A primeira demonstração abre a seção — o padding da própria seção já dá a
   folga, e a margem em cima dela viraria um vão duplo. */
.dupla:first-of-type { margin-top: 0; }
.dupla__texto { display: grid; gap: var(--e3); align-content: start; }
.dupla__texto p:last-child { color: var(--suave); margin: 0; }
@media (min-width: 900px) {
  .dupla { grid-template-columns: 1fr 1.15fr; align-items: center; gap: var(--e8); }
  /* ⚠️ A inversão é de ORDEM VISUAL, e a ordem do HTML não muda: quem lê com
     leitor de tela continua recebendo o texto antes da figura. */
  .dupla--invertida .dupla__texto { order: 2; }
}

/* ── seção 7 · dúvidas ─────────────────────────────────────────────────
   ⚠️ <details>, e não botão com aria-expanded + altura animada por JS. No
   site publicado o acordeão era assim, e sem script nenhuma das seis
   respostas abria — a página respondia 200 com o conteúdo inacessível, que é
   exatamente a invariante 8. */
.faq { border-top: 1px solid var(--borda); margin-top: var(--e6); }
.faq__item { border-bottom: 1px solid var(--borda); }
.faq__item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e4) 0; min-height: 44px;
  font-weight: 600; font-size: var(--t3);
  font-family: var(--fonte-titulo);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__mais { width: 20px; height: 20px; flex: none; color: var(--suave); transition: transform .18s ease; }
.faq__item[open] .faq__mais { transform: rotate(180deg); }
.faq__item > p { color: var(--suave); margin: 0 0 var(--e4); max-width: var(--leitura); }
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .faq__item::details-content { transition: none; }
}

/* ═══ O FECHO — o mesmo painel do "Comece pelo diagnóstico" ══════════════
   Ronaldo, 03/09/2026: a seção "Comece a atender melhor ainda hoje" deixou de
   ser um bloco centrado solto sobre o fundo escuro e virou o PAINEL do site
   da Fatormix — texto de um lado, ação do outro, com o aro em degradê que
   diz "aqui se age".

   ⚠️ E o fundo da seção é o MESMO do rodapé, como lá. Não é preferência: é o
   que permite à marca-d'água do rodapé atravessar a fronteira entre os dois
   sem emenda visível. Com cores diferentes, a marca cortaria numa linha. */
.final { padding-block: var(--e8); background: var(--canvas); color: var(--branco); }
@media (min-width: 1024px) { .final { padding-block: var(--e9); } }
.convite {
  position: relative;
  display: grid;
  gap: var(--e5);
  padding: var(--e6);
  border-radius: var(--raio-2);
  background: var(--painel-escuro) padding-box, var(--aro) border-box;
  border: 1px solid transparent;
  box-shadow: 0 40px 80px -60px rgb(0 0 0 / .9);
}
/* vidro: o cartão deixa a marca-d'água do fundo passar desfocada por trás */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .convite {
    background:
      linear-gradient(160deg,
        color-mix(in srgb, var(--superficie) 84%, transparent),
        color-mix(in srgb, var(--canvas) 88%, transparent)) padding-box,
      var(--aro) border-box;
    -webkit-backdrop-filter: blur(8px) saturate(130%);
            backdrop-filter: blur(8px) saturate(130%);
  }
}
.convite__texto { display: grid; gap: var(--e3); }
.convite__texto h2 { font-size: var(--t5); }
.convite p.lead { color: var(--suave-escuro); margin: 0; }
.convite__acao { justify-items: start; }
@media (min-width: 900px) {
  .convite {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e6);
    padding: var(--e7);
  }
  .convite__acao { justify-items: end; text-align: right; }
}

/* ── o corpo legal ─────────────────────────────────────────────────────
   A mesma anatomia da Política de Privacidade do site da Fatormix (Ronaldo,
   03/09/2026).

   ⚠️ LARGURA TOTAL DO WRAP, e não a de leitura. Isso contraria o `--leitura`
   (65ch), que existe porque linha longa cansa — o preço está pago de
   propósito e fica escrito para não voltar por distração: um documento legal
   se PERCORRE procurando um item, e a coluna estreita multiplica a rolagem
   sem ajudar quem varre. */
.legal { display: grid; gap: var(--e3); }
/* Títulos numerados grandes, com filete embaixo: a numeração precisa se
   enxergar de longe numa página que se percorre, não que se lê do começo ao
   fim. */
.legal h3 {
  margin-top: var(--e8);
  font-size: var(--t5);
  line-height: 1.15;
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borda);
}
.legal h3:first-of-type { margin-top: 0; }
.legal h4 { margin-top: var(--e6); font-size: var(--t4); line-height: 1.22; }
.legal p, .legal li { color: var(--suave); }
.legal ul { display: grid; gap: var(--e2); padding-left: var(--e5); margin: 0; }
.legal a { color: var(--primaria); }
.legal table { width: 100%; max-width: 46rem; border-collapse: collapse; font-size: var(--t2); }
.legal th, .legal td {
  text-align: left;
  padding: var(--e3) var(--e2);
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.legal th { font-weight: 600; color: var(--texto); }

/* ── página de erro ────────────────────────────────────────────────── */
.erro__num {
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: clamp(4rem, 14vw, 8rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--borda);
}
/* sobre o Canvas o filete do tema claro quase some: ele precisa do tom que
   pertence àquela superfície */
.escuro .erro__num { -webkit-text-stroke-color: color-mix(in srgb, var(--suave-escuro) 45%, transparent); }

/* ── rodapé ────────────────────────────────────────────────────────────
   Mesmo fundo da seção de cima: as duas se leem como uma superfície só, e é
   o que permite à marca atravessar a fronteira sem emenda. */
.rodape {
  position: relative;
  background: var(--canvas);
  color: var(--branco);
  padding-block: var(--e8) var(--e6);
}
/* A MOLDURA da marca-d'água: absoluta, então não gera altura nenhuma; com
   overflow hidden, então recorta o "x" em todos os lados. Ela começa 6 rem
   ACIMA do rodapé, e é essa folga que deixa a marca subir para a seção de
   cima (Ronaldo, 03/09/2026 — igual ao site da Fatormix).

   ⚠️ Por que não resolver no próprio rodapé: `overflow` corta por EIXO, e
   liberar o vertical para a marca subir libera também a descida. E
   `clip-path` corta a PINTURA, não o ESPAÇO — a marca continuaria ocupando
   altura abaixo do rodapé, e a página ganharia uma faixa vazia no fim. */
.rodape__fundo {
  position: absolute;
  top: -6rem; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* ⚠️ AQUI É UMA IMAGEM, e no site da Fatormix é um SVG — a diferença é de
   matéria-prima, não de desenho: a marca do Connexfy chegou em WebP
   (ESTRATEGIA §12.1), e traçar um vetor a partir dela seria redesenhar o
   logotipo. A 8% de opacidade e sem borda visível, a diferença não aparece.
   `object-fit: contain` porque a caixa é maior que o arquivo. */
.rodape__marca-fundo {
  position: absolute;
  right: -9rem;
  top: .5rem;
  width: min(34rem, 72vw);
  height: auto;
  aspect-ratio: 268 / 272;
  object-fit: contain;
  /* ⚠️ 7%, o mesmo do site da Fatormix. A marca precisa se ver nas DUAS
     superfícies que ela atravessa — a faixa clara e o Canvas do rodapé — e é
     por isso que o tom dela é médio, e não branco nem navy. Mais opacidade
     aqui a faz competir com o texto do rodapé; menos, e ela some na faixa. */
  opacity: .07;
  pointer-events: none;
}
/* No celular o vão entre o painel do fecho e o rodapé é menor: subindo o
   mesmo tanto, a marca invadiria o cartão. */
@media (max-width: 1023px) { .rodape__marca-fundo { top: 2.5rem; right: -7rem; } }

.rodape > .wrap { position: relative; z-index: 1; }
.rodape__grade { display: grid; gap: var(--e7); }
@media (min-width: 768px) {
  /* TRÊS colunas: a marca, a navegação e o legal. A coluna "Contato" saiu
     (Ronaldo, 03/09/2026) — o WhatsApp virou ícone na coluna da marca, e o
     e-mail continua onde ele é exigência legal: nas páginas legais. */
  .rodape__grade { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--e8); }
}
/* Mesma medida da logo do cabeçalho, inclusive o degrau em 419 px: são a
   mesma marca na mesma página, e duas medidas diferentes para ela é o tipo de
   coisa que envelhece apartada. */
.rodape__marca img { width: 156px; height: auto; }
@media (max-width: 419px) { .rodape__marca img { width: 140px; } }
.rodape__sobre {
  margin-top: var(--e4);
  color: var(--suave-escuro);
  font-size: var(--t1);
  max-width: 40ch;
}
.rodape h2 {
  font-family: var(--fonte-corpo);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primaria) 45%, var(--branco));
}
/* ⚠️ AS MEDIDAS SÃO AS DO RODAPÉ DO SITE DA FATORMIX (Ronaldo, 03/09/2026),
   e foram COPIADAS DA MEDIÇÃO, não do olho: link em 16 px com entrelinha de
   26,4 px, 12 px entre uma linha e outra, e 16 px separando a lista do
   título. Os outros três tamanhos do rodapé já batiam — o título da coluna, a
   frase da marca e a linha do copyright são todos t1.

   ⚠️ O LINK NÃO É MIÚDO: ele herda o corpo do <body>. Aqui ele estava em t1
   (14 px), e num rodapé de três colunas isso fazia a navegação parecer nota
   de rodapé dentro do próprio rodapé.

   ⚠️ E ELE VOLTOU A SER UMA ÂNCORA COMUM. O `min-height: 44px` que estava
   aqui é o piso de alvo de toque do AG_BUILD, e ele muda a ALTURA da coluna —
   não dá para ter os dois. Entre cumprir o piso e ser igual ao site da casa,
   Ronaldo pediu igual ao site da casa, que é o que a família já pratica. A
   consequência está medida e dita no relatório: o alvo cai de 44 px para os
   26,4 px da caixa de linha. */
.rodape ul { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e3); }
.rodape a { color: var(--suave-escuro); text-decoration: none; }
@media (hover: hover) { .rodape a:hover { color: var(--branco); } }

/* Contato por ícone, na coluna da MARCA — mesma UX do site da Fatormix. O
   rótulo continua no HTML, em .ler-so: um link com só um desenho dentro não
   tem nome para quem navega por leitura de tela.
   ⚠️ O seletor é COMPOSTO de propósito: `.rodape ul` tem especificidade maior
   (0,1,1 contra 0,1,0) e imporia `display: grid` com uma coluna — os ícones
   ficariam empilhados. Simplificar este seletor devolve o defeito. */
.rodape ul.rodape__contatos {
  margin-top: var(--e5);
  grid-auto-flow: column;
  justify-content: start;
  gap: var(--e3);
}
.rodape__contatos a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;        /* alvo de toque, não só o desenho */
  border-radius: 12px;
  border: 1px solid rgb(255 255 255 / .12);
  background: rgb(255 255 255 / .04);
  color: var(--suave-escuro);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.rodape__contatos svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .rodape__contatos a:hover {
    color: var(--branco);
    border-color: color-mix(in srgb, var(--primaria) 55%, transparent);
    background: color-mix(in srgb, var(--primaria) 14%, transparent);
  }
}

/* ⚠️ A ASSINATURA DA CASA (AGENTS §5.2), na MESMA linha do copyright: só a
   palavra "fatormix" é link, em semibold e SEM sublinhado — nem no :hover,
   onde a cor clareia em vez de ganhar traço. O traço daria ao crédito mais
   peso visual que o nome do produto, e a página é do produto.
   ⚠️ Ele herda o t1 da linha do copyright, e não o corpo dos links de
   navegação: é uma frase, não um item de menu. */
.rodape__fim {
  margin-top: var(--e8);
  padding-top: var(--e5);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--elevado) 95%, transparent) 6%,
      color-mix(in srgb, var(--elevado) 95%, transparent) 94%,
      transparent 100%) 1;
  font-size: var(--t1);
  color: var(--suave-escuro);
}
.rodape__fim a { font-size: inherit; font-weight: 600; text-decoration: none; }
.rodape__fim a:hover { text-decoration: none; color: var(--branco); }

/* ═══ MOVIMENTO ═══════════════════════════════════════════════════════
   AG_MOTION §1 e §2. A regra que organiza tudo: nenhum conteúdo depende de
   movimento para ser visto.

   ⚠️ O estado inicial invisível de um reveal vive DENTRO de
   @supports (animation-timeline: view()). Escrito fora, uma home sem suporte
   ou sem JS responde 200 com o texto invisível e ninguém recebe erro. O
   validador reprova, e o motivo é grande. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
a, button, .botao { transition: color .15s ease, background-color .15s ease,
                                border-color .15s ease, filter .15s ease; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .modulo, .dupla, .faq__item, .convite, .secao__cabeca {
      animation: revela linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 26%;
    }
  }
}
@keyframes revela {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Cartão que responde ao ponteiro. @media (hover: hover) porque em telefone o
   "hover" fica grudado depois do toque, e o cartão volta a subir sozinho
   quando a pessoa rola. */
@media (hover: hover) {
  .modulo { transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; }
  .modulo:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-1);
    border-color: color-mix(in srgb, var(--primaria) 40%, var(--borda));
  }
}