/* =====================================================================
   AZTV v2 — SITE PÚBLICO · design system (extraído do header/footer globais).
   As vars de MARCA (--brand & derivados, --font-sans, --on-brand) são só
   FALLBACK aqui: o layout injeta <style id="tema-wl"> DEPOIS (Tema::cssVars),
   lendo do az_tema — trocar a cor no painel muda o site inteiro (white-label).
   Dark-only (o site não tem toggle de tema). Zero dependência de WordPress.
   ===================================================================== */
:root{
  --bg:#050505;
  --surface-1:rgba(255,255,255,.06);      /* F2: 2,2% -> 6%. Resolve #0A0A0A -> #141414 sobre o --bg. Figma core/color/surface-1. */
  --surface-2:rgba(255,255,255,.08);      /* F2: 3,5% -> 8%. Resolve #0F0F0F -> #191919. */
  --surface-hover:rgba(255,255,255,.10);  /* F2: 4,5% -> 10%. Resolve #121212 -> #1E1E1E. */
  --surface-3:rgba(255,255,255,.10);      /* DIVISORIA. Mesmo valor do --surface-hover e token SEPARADO, como no Figma: la sao 604 nos "divisoria" com core/color/surface-3 e ZERO com border-2. Peso de regua e intensidade de hover sao decisoes independentes — alias faria uma mexer a outra. */
  --surface-alt:#0C0C0C;   /* fundo de seção. A3: era #080808 (3 níveis acima do --bg); o Figma dá #0C0C0C (7). Só o campeonatos usa na home (A2) — o ritmo entre seções vem da hairline (border-1 / surface-3), NÃO de clarear. */
  --border-1:rgba(255,255,255,.055);
  --border-2:rgba(255,255,255,.14);       /* F2: 8,5% -> 14%. Figma core/color/border-2; o SITE-DESIGN-SYSTEM ja declarava 14% no molde 3 (divisoria). */
  --border-hover:rgba(255,255,255,.12);
  --text-1:rgba(255,255,255,.96);
  --text-2:rgba(255,255,255,.55);
  --text-3:rgba(255,255,255,.46);
  --text-4:rgba(255,255,255,.40);

  /* MARCA — fallback; o az_tema sobrescreve via <style id="tema-wl"> */
  --brand:#FF4D00;
  --brand-hover:#FF7C1F;
  --brand-soft:rgba(255,77,0,.10);
  --brand-border:rgba(255,77,0,.25);
  --brand-ink:#FF4D00;
  --on-brand:#000000;
  /* ⭐⭐ C166 · ANEL DE FOCO. A descricao do Botao (54:162) e explicita: o anel e BRANCO
     (`color/focus-ring`), nao a marca — vale nos 5 kinds, inclusive whatsapp. "Foco e affordance
     de sistema: mesma cor em toda parte e o que faz o indicador ser aprendido, e num site usado
     com controle remoto isso e navegacao. O anel laranja anterior dava 1,68:1 contra o verde."
     ⛔⛔ O TOKEN NAO EXISTIA e 4 seletores usavam `var(--focus-ring, #fff)` — o fallback pintava
        branco EM SILENCIO: certo no AZTV (fundo escuro) e uma bomba no clone de marca clara,
        onde branco sobre branco some. E a MESMA falha que a descricao do Botao usa para exigir
        `--on-brand` no rotulo, com outro nome. Agora o token existe e o clone pode troca-lo.
     ⚠️ Hoje ele NAO e injetado pelo Tema (tema.php:126) — esta no relatorio como decisao. */
  /* ⛔⛔ C167 · #ffffffe5, NAO #ffffff. O no `961:12 focus-ring` da pagina 00 · Tokens traz a
     legenda escrita: "#FFFFFF · 90%" (e5 = 229/255 = 89,8%). Eu tinha declarado branco PURO no
     C166 — li a palavra "branco" na descricao em vez de ler o token, que e o erro que esta serie
     ja me custou tres vezes. Medido agora no no. */
  --focus-ring:#ffffffe5;
  --brand-selection:rgba(255,77,0,.30);   /* fallback; o tema-wl injeta rgba(marca,.30) — seleção de texto */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --green:#4ade80; --green-soft:rgba(74,222,128,.10); --green-border:rgba(74,222,128,.25);
  --wpp:#25d366; --wpp-hover:#1fb955; --on-wpp:#000000;   /* texto SOBRE o verde do WhatsApp (nao e white-label: o verde e fixo). Medido: #000 = 10,59:1 (AAA); o #fff chumbado no conta.php dava 1,98:1 e reprovava AA e AAA. Mesma regra do --on-brand (Tema::textoSobreMarca). */
  --red:#f87171; --red-soft:rgba(248,113,113,.10);
  --amber:#fbbf24; --amber-soft:rgba(251,191,36,.10); --amber-border:rgba(251,191,36,.25); --amber-ghost:rgba(251,191,36,.16);
  --blue:#60a5fa; --blue-soft:rgba(96,165,250,.10);

  --radius-card:12px; --radius-pill:6px; --radius-input:8px;
  /* ⭐ C184 · A FAMILIA DE RAIO DO DESENHO, que nunca tinha sido declarada.
     Ate aqui os 26 usos de `var(--r-*)` viviam do FALLBACK: os lotes foram escrevendo
     `var(--r-16,16px)` e o token nunca existiu no :root.
     ⭐ Cada valor abaixo e EXATAMENTE o fallback que ja pintava, entao o delta e ZERO por
     construcao — `var(--x, F)` com `--x` declarado como `F` resolve em `F`. Medido em 8 elementos
     x 3 bandas, antes e depois: raio identico.
     Levantamento no C184: --r-16 em 23 usos, --r-8 em 2 (8px), --r-4 em 1 (4px), zero conflito.
     ⭐ C185 ATUALIZOU: os 18 literais viraram token, entao --r-16 esta hoje em 41 usos em codigo
     (38 raios diretos + 3 indirecoes via `--mdl-raio:var(--r-16,16px)` em auth-modal, epg-modal e
     o .popup daqui, consumidas depois pela base `.mdl`).
     ⛔⛔ O QUE ESTA LINHA NAO FAZ, e a versao anterior deste comentario afirmava que fazia:
     ela NAO destrava o white-label. O fallback de `var(--x,F)` so entra enquanto `--x` esta
     INDEFINIDO — um clone que declarasse `--r-16` no <style id="tema-wl"> (tema.php:148, injetado
     em layout.php:24, DEPOIS do site.css da :22) ja sobrescrevia tudo. MEDIDO nos dois bracos:
     sem a declaracao, injetar `--r-16:2px` levava o `.ct-card` de 16 para 2 do mesmo jeito.
     ⭐ O ganho real e outro, e menor: descobribilidade. O token passa a existir ao lado dos
     --radius-*, entao quem for fazer white-label o ENCONTRA em vez de ter de adivinhar o nome.
     ⭐⭐ C185 FECHOU a alavanca: os 18 `border-radius:16px` literais que ficavam de fora viraram
     `var(--r-16,16px)`, a mesma forma dos outros. MEDIDO nos dois bracos, injetando `--r-16:2px`
     pelo caminho do tema: ANTES 5 elementos iam a 2px e 9 ficavam em 16 (render MISTO);
     DEPOIS os 14 vao a 2px. Zero literal 16px de raio resta em codigo no repo.
     ⚠️ Isso NAO reconcilia --r-16 com --radius-card (16 vs 12) — segue parado com o Matheus.
     ⚠️ --r-pill e --r-12 NAO sao declarados: tem ZERO usos em codigo (so em comentario).
     ⚠️ ESTA FAMILIA NAO E A DOS --radius-*: --r-16=16 vs --radius-card=12, e --r-pill(999) vs
     --radius-pill(6). Unificar e decisao VISUAL, reportada e NAO tomada aqui. */
  --r-4:4px; --r-8:8px; --r-16:16px;
  --ease:cubic-bezier(0.2, 0, 0, 1);
  --surface-solid:#1a1a1a; --surface-solid-2:#1f1f1f; --border-solid:#363636;   /* superfícies SÓLIDAS (sobre a imagem do hero, onde as surfaces rgba vazariam) */
  /* B2: --surface-solid era #161616; a prancha dá color/surface-solid-1 = #1a1a1a (pixel da pílula do eyebrow = (26,26,26)). */
  /* ⭐⭐ C114 §2 · MEDIDO no render, em 3 paginas x 3 faixas: a barra de avisos mede 37 e a nav 71,
     somando 108 — e o valor NAO muda entre 1440, 768 e 390, entao um numero so serve (nao precisa
     de breakpoint). Os tres declaravam 36 + 60 = 96, defasados em 12.
     ⚠️ Consequencia viva que isto conserta: o `.legal-card` do termos.php:59 usa
     `calc(var(--total-top) + 16px)` e vinha entregando 112 contra um chrome de 108 — folga real de
     4px, nao 16. Com o token certo ele recupera os 16 sem ser tocado. */
  --header-h:37px; --nav-h:71px; --total-top:108px;
}
/* ⭐ C123 · ÂNCORA NÃO FICA ATRÁS DO CHROME. O chrome é sticky e soma 108 (avisos 37 + nav 71) nas
   TRÊS faixas, então `#id` na URL levava o alvo para debaixo dele. A /ajuda já resolvia isso desde o
   C113 com `scroll-margin-top` no `.aj-tut`; aqui a regra vira GERAL.
   ⭐ UMA regra em vez de 14: `section[id]` pega as 12 seções âncora (7 da home, 4 da /esportes, 1 da
      /planos) e os dois `h2[id]` nomeados completam as 14. ⛔ Deixa de fora, por construção, todo id
      de infraestrutura — eles são `div#`/`button#` (ana-*, au*, cn*, foot-*, avisosTrack, navOverlay)
      e o `h2#auTitulo` do modal de login, que não é âncora de conteúdo.
   ⛔ NÃO é padding-top com margin negativa: `scroll-margin-top` é a propriedade feita para isto. */
section[id],
h2#epg-live-h2,
h2#esp-noar-h2 {
  scroll-margin-top: calc(var(--total-top) + 16px);
}
:root {
  /* escala tipográfica — desktop; os dois @media logo abaixo do :root redeclaram tablet e mobile */
  --fs-50:11px; --fs-100:13px; --fs-200:15px; --fs-300:16px; --fs-400:18px;
  --fs-500:21px; --fs-600:26px;
  --fs-display-sm:38px; --fs-titulo:52px; --fs-display:52px; --fs-display-lg:72px;
  /* ⭐ C26 · o par do `Depoimento` — NAO escala. Nome SEMANTICO (papel), como --fs-titulo, e nao
     degrau da rampa: a medicao diz que e peca que escapou da escala NA PRANCHA, nao degrau do
     sistema. Os dois nos do componente `Depoimento` (180:2101 e 180:2120) sao os UNICOS do arquivo
     do Figma sem estilo de texto nomeado — o `faq`, ao lado, tem seis. E os valores sao iguais nas
     tres larguras la, entao sao iguais nas tres aqui: declarados nos tres blocos de proposito, como
     --fs-50 e --fs-100 ja fazem, para a constancia ser afirmacao e nao esquecimento.
     ⚠️ NAO virou alias de degrau existente: --fs-500 vale 20px so no patamar de 768, e --fs-titulo
     vale 30px so no de 480. Aliasar acertaria uma largura e erraria as outras duas. */
  --fs-citacao:30px; --fs-citacao-autor:20px;
  /* layout — sec-y e sec-x respondem ao viewport (coleção `viewport` do Figma, 3 modos);
     os três `wrap*` NÃO respondem: vivem na coleção `core`, que tem modo único. */
  --sec-y:96px; --sec-x:24px;
  /* ⭐ C180 · `--card-p` — o padding interno de card/KPI, que o Figma JÁ tinha como token
     RESPONSIVO (32 / 20 / 20, registrado no C177) e o CSS não declarava: os nós escrevem
     `var(--card-p, 32px)` e, sem a declaração, o fallback cravava 32 nas três bandas.
     ⚠️ MEDIDO: com 32 fixo, os 3 KPIs da Visão geral estouravam o shell em 32px a 768 e
     cortavam "Sem assinatura" em 44px — a coluna dá 473 e sobravam 77,67 úteis por KPI.
     Mesmos degraus e mesmos breakpoints dos `--sec-*` logo acima. */
  --card-p:32px;
  --wrap:1100px; --wrap-narrow:680px; --wrap-wide:1320px;

  /* chevron do <select> — o MESMO SVG do painel (app.css). O site nao compartilha :root com o painel,
     entao a var e redeclarada aqui. Site e dark-only: uma cor so. Ver §12.5 do MAPA. */
  --sel-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ========== ESCALA TIPOGRÁFICA (F2) ==========
   Os 11 degraus do design system, em três patamares DISCRETOS — é @media e não clamp() porque o
   Figma tem três modos de viewport (desktop/tablet/mobile) com números fechados, e clamp() interpola:
   nunca pousa exatamente em 44 nem em 30. Cortes 768 e 480: são dois dos três breakpoints que o
   §2.2 do SITE-DESIGN-SYSTEM já declara como convenção (1024 · 768 · 480). Não se usa 390 aqui —
   o item 26 do mesmo documento mediu que descer o corte para 390 joga a faixa 390–479 no layout
   errado. A ordem dos dois blocos importa: o de 480 vem depois para vencer o de 768. */
@media (max-width:768px){
  :root{
    --fs-50:11px; --fs-100:13px; --fs-200:15px; --fs-300:16px; --fs-400:17px;
    --fs-500:20px; --fs-600:24px;
    --fs-display-sm:32px; --fs-titulo:44px; --fs-display:44px; --fs-display-lg:58px;
    --fs-citacao:30px; --fs-citacao-autor:20px;
    --sec-y:72px; --sec-x:24px; --card-p:20px;   /* C180 · degrau do Figma */
  }
}
@media (max-width:480px){
  :root{
    --fs-50:11px; --fs-100:13px; --fs-200:14px; --fs-300:15px; --fs-400:17px;
    --fs-500:19px; --fs-600:22px;
    --fs-display-sm:26px; --fs-titulo:30px; --fs-display:38px; --fs-display-lg:46px;
    --fs-citacao:30px; --fs-citacao-autor:20px;
    --sec-y:56px; --sec-x:20px; --card-p:20px;   /* C180 · degrau do Figma */
  }
}
*{margin:0;padding:0;box-sizing:border-box}
/* scrollbar-gutter: a barra de rolagem deixa de EMPURRAR o layout. Sem isto, uma página curta (sem scroll)
   e uma longa (com scroll) centralizam em x diferentes — na /conta dava um pulo de 7px ao trocar de aba.
   'stable' reserva a calha só onde a barra é clássica (Windows/Linux); em barra sobreposta (macOS/mobile)
   e em navegador que não suporta, o comportamento é exatamente o de hoje — não regride nada. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
/* ⭐⭐ C169 · BARRA DE ROLAGEM — o padrao da casa, que o SITE nao tinha.
   ⛔ Nao inventei estilo: este bloco e o do PAINEL (app.css:167-170), copiado verbatim com os
      tokens equivalentes do site (--border-2 14% e --border-hover 12%, os dois ja declarados aqui).
      O site vinha servindo a barra NATIVA do navegador — larga, cinza e fora do sistema — e ela
      aparecia em qualquer superficie rolante, inclusive dentro dos modais.
   ⭐ `background-clip:content-box` + borda transparente de 2px e o que da o respiro: o polegar
      fica com 6px visiveis numa pista de 10, em vez de encostar nas bordas.
   ⚠️ `scrollbar-color`/`scrollbar-width` sao o caminho padrao (Firefox e Chrome novo); o
      `::-webkit-scrollbar` cobre o WebKit antigo. Os dois juntos, como no painel. */
*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}
body{background:var(--bg);color:var(--text-1);font-family:var(--font-sans);min-height:100vh;-webkit-font-smoothing:antialiased;font-feature-settings:'tnum';font-weight:400;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:color 200ms var(--ease)}
button{font-family:inherit;border:none;cursor:pointer;background:none;color:inherit}
img{max-width:100%;display:block;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
::selection{background:var(--brand-selection);color:var(--text-1)}
/* ⭐⭐ C166 · o anel global passa a ser `--focus-ring`, e nao `--brand-ink`. TRES motivos, e os
   tres estao no lote ou medidos:
   · a descricao do Botao manda o anel branco NOS 5 KINDS — nao daria para faze-lo em 4 CTAs e
     deixar o resto do site com outro anel;
   · "mesma cor em toda parte e o que faz o indicador ser aprendido": dois aneis diferentes no
     mesmo site e exatamente o que a frase proibe, e era o estado ANTERIOR (4 CTAs em branco fixo,
     todo o resto em laranja);
   · o motivo tecnico que a propria descricao da: "o anel laranja dava 1,68:1 contra o verde" — o
     botao de whatsapp e verde, e o anel precisa ser visivel LA tambem.
   ⚠️ Isto muda o anel de TODO o site, campos inclusive. O C165 tinha acabado de unificar os 3
      campos entre si; eles continuam identicos entre si — e agora identicos ao resto tambem. */
/* ⭐⭐ C168 · O ANEL DE FOCO — e por que o codigo DIVERGE do Figma DE PROPOSITO.
   ⛔ Quem comparar codigo e prancha vai ver diferenca. Nao "conserte" de volta: leia isto.

   1) O TOKEN. No 961:12 da pagina 00 · Tokens, `focus-ring`, legenda escrita: "#FFFFFF · 90%"
      = #ffffffe5. E UM SO token — nao ha variante por componente. Medido em 4 nos (Botao
      primary 51:98, Botao ghost 53:241, Campo 50:29, Chip 49:32): todos usam este mesmo anel, e
      o --brand nao aparece em nenhum. A regra do sistema esta no cabecalho 55:21: "Todo
      componente tem estado de foco visivel (R8): o site roda em TV box com controle remoto,
      entao foco e navegacao, nao detalhe."

   2) O QUE O DS DESENHA. O no 51:98 traz `foco/anel` como DUAS sombras:
        Effect(DROP_SHADOW, color: var(--bg),         spread 2)
        Effect(DROP_SHADOW, color: var(--focus-ring), spread 4)
      Em CSS seria `box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring)`.

   3) ⭐⭐ POR QUE AQUI E `outline` + `outline-offset`, E NAO AQUELAS SOMBRAS.
      A intencao do desenho e UM ANEL COM 2px DE RESPIRO. O DS usa a sombra de --bg porque o
      FIGMA NAO TEM `outline-offset`: aquela segunda sombra e um SUBSTITUTO do respiro, nao um
      elemento do desenho. E o proprio DS admite o remendo — a excecao do ghost existe porque
      "a sombra do Figma segue a silhueta do conteudo, entao num botao transparente ela grudava
      nas letras em vez de contornar a caixa".
      ⛔ MEDIDO por pixel (C168), tres fundos, amostrando o VAO a 1px da borda — o vao ocupa
         0..2px e o anel 2..4px, nas duas tecnicas:
        · sobre o proprio --bg rgb(5,5,5)  → sombra rgb(5,5,5) · outline rgb(5,5,5): EMPATE.
        · sobre --surface-1 rgb(20,20,20) → sombra rgb(5,5,5), Δ 26 do entorno: a sombra abre
          um HALO MAIS ESCURO que a superficie. ⭐⭐ E este o fundo efetivo dos 3 cards, entao
          a sombra ja erra no caso COMUM, nao so sobre foto.
        · sobre foto                      → sombra rgb(5,5,5) contra rgb(40,40,60) da imagem,
          Δ 74: apaga a foto. O outline devolve rgb(40,40,60), Δ 0 — o vao MOSTRA a imagem,
          que e o que um respiro E.
        ⛔ O empate so existe quando o fundo E exatamente o --bg. Fora disso a sombra perde,
           e nao ha caso em que ela ganhe.
      ⭐ Mesma familia do C155b: la o no desenhava um traco que NAO empurra e a primitiva certa
        era `box-shadow: inset`, nao `border`. A regra e uma so — reproduza o que o no FAZ, nao a
        declaracao que o Figma teve de usar.

   4) O NUMERO, para nao voltar ao laranja: sobre o fundo efetivo dos cards, rgb(20,20,20),
      o branco da 18,42:1 e o --brand da 4,09:1 (WCAG 1.4.11 pede >= 3:1 para indicador
      nao-textual). Os dois passariam no escuro; so o branco sobrevive sobre poster claro e
      sobre o verde do whatsapp — o caso de 1,68:1 que motivou a troca no botao. */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ========== SUPERFICIE DE SECAO ==========
   FONTE UNICA do fundo de secao. O Figma tem UMA secao de conteudo com fundo proprio na home
   (campeonatos); as outras 12 herdam o --bg. Antes disto havia 3 mecanismos (style= inline no
   home.php, regra no home.php e regra no site.css) e 3 superficies (bg/surface-alt/surface-1).
   Ver F2-DIVERGENCIAS §15.8. O ritmo entre secoes vem da hairline (border-1/surface-3), nao de
   clarear o fundo — e o que o comentario do --surface-alt ja dizia. */
.sec--alt{background:var(--surface-alt)}

/* ========== BARRA DE AVISOS (rotador; conteúdo vem de az_avisos) ========== */
/* C88 · 36 -> 37: a prancha (845:1961) poe a barra de avisos em y=0 com altura 37. */
.avisos{position:sticky;top:0;z-index:10000;height:37px;background:var(--brand);color:var(--on-brand);overflow:hidden}
/* ⭐⭐ C133 §2 · texto e indicador são UM GRUPO centralizado junto, não dois elementos soltos.
   A conta do nó: 278 (texto) + 8 (gap) + 20 (indicador) = 306, e 567 + 306/2 = 720 = o centro exato
   da barra. Antes o texto se centrava sozinho em `inset:0` e os pontos ficavam presos em
   `right:16px` — um no meio, outro no canto.
   ⭐ Os itens continuam empilhados para o cross-fade, mas agora por GRID na mesma célula (todos em
      1/1) em vez de `position:absolute`: assim o grupo TEM largura e pode ser centralizado, e a
      transição de opacidade segue idêntica. A largura passa a ser a do MAIOR aviso — estável, sem
      o indicador pulando de lugar a cada 5s. */
.avisos-track{height:100%;max-width:1100px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:8px}
.avisos-vp{display:grid;min-width:0}
.avisos-vp > .avisos-item{grid-area:1/1}
.avisos-item{line-height:37px;text-align:center;font-size:var(--fs-100);font-weight:500;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:opacity 400ms var(--ease),visibility 400ms var(--ease)}
.avisos-item.is-on{opacity:1;visibility:visible}
.avisos-item a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.avisos-item a:hover{opacity:.85}
/* ⭐ C131 · os PONTOS do indicador (prancha 104:106, variante `avisos=2+ · rotativa`). Só existem
   com 2+ avisos — a variante de 1 aviso não desenha ponto nenhum, e o PHP nem emite o container.
   ⛔ Dentro da faixa de 37: `position:absolute` à direita do texto, que é centralizado e absoluto
      também. Não muda altura, cor de fundo, sticky, top nem z-index. */
.avisos-dots{display:flex;align-items:center;gap:4px;flex:none}   /* ⭐ C133 · gap 4 (era 6) */
.avisos-dot{width:4px;height:4px;border-radius:50%;background:var(--on-brand);opacity:.35;transition:opacity 200ms var(--ease)}
.avisos-dot.is-on{opacity:1}

/* ========== HEADER NAV ========== */
/* C88 · top 36->37 e height 60->71. A nav da prancha (845:1967) esta em y=37 com altura 71, e os
   71 nao sao arbitrarios: o `wrap · container 1100` fica em y=12 com altura 47, entao
   12 + 47 + 12 = 71. Os 47 sao a altura dos BOTOES — cromo e botao sao a mesma medida.
   A faixa inteira passa a medir 37 + 71 = 108, que e onde a 1a secao de cada pagina comeca.
   ⛔⛔ ADENDO C133 · a linha que estava aqui dizia "NAO mexer no background rgba(5,5,5,.85) nem no
   border-bottom, a prancha nomeia `nav-fundo · color/bg @ 85% + blur 20`". Essa guarda CAIU, e a
   razão dela foi verificada e vencida por medição: amostrando o PIXEL do render do nó `113:194`,
   a faixa da nav dá #0B0B0B sobre uma página #050505 — ela É mais clara, sempre foi. E
   `rgba(5,5,5,.85)` sobre `#050505` resolve para `#050505`: era invisível por aritmética.
   ⭐ O nome do nó descreve a INTENÇÃO de implementação (translucidez), não a cor. Nome de nó é
      pista; prova é `get_variable_defs` (que devolveu `--surface-alt`) ou o pixel. O nome perde. */
/* ⭐⭐ C133 §1 · A FAIXA continua cheia (fundo, sticky, blur, régua); quem ganha banda é o MIOLO.
   O nó `113:168` é explícito: o `nav-fundo` mede 1440×71 e o `wrap · container 1100` mede 1148 em
   x=146 — 146 + 1148 + 146 = 1440. Sem esse miolo o logo colava em x=24 e o botão terminava em
   x=1416, enquanto TODO o resto do site vive num miolo de 1100: em tela larga o header abria as
   pernas e o corpo ficava estreito no meio. O `justify-content` desceu para o miolo.
   ⛔ `position`, `top`, `z-index` e altura INTOCADOS.
   ⚠️ O FUNDO mudou no adendo C133 (ver acima): saiu `rgba(5,5,5,.85)`, entrou `--surface-alt`, e o
      `border-bottom` foi removido — a separação passa a vir da diferença de cor, como na prancha.
   ⚠️ O `backdrop-filter` FICA por ordem do adendo, mas com fundo OPACO ele não pinta nada: hoje é
      custo de GPU sem efeito visível. Decisão de removê-lo é à parte. */
.nav{position:sticky;top:37px;z-index:9999;height:71px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--surface-alt);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* o miolo: 1148 de caixa com 24 de padding = 1100 úteis, o mesmo contrato do resto da casa */
.nav-wrap{width:100%;max-width:1148px;margin:0 auto;padding:0 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* ⭐ C133 §3 #4 · o nó dá `logo · az_tema` em 123×24 — o `--logo-size` (30) vinha do backoffice e
   estourava 6px dentro de uma faixa de 71. O slider da tela de Identidade continua valendo para o
   footer; aqui a nav segue o desenho. */
.nav-logo{height:24px;width:auto}
/* wordmark: texto da marca quando NÃO há logo no backoffice (az_tema.logo_path vazio) */
.wordmark{font-weight:700;letter-spacing:-.4px;color:var(--text-1);line-height:1;white-space:nowrap;display:inline-block}
.nav .wordmark{font-size:var(--fs-500)}
/* ⭐ C131 · `title/card` = `--fs-500` (21 em 1440), não `--fs-400`. A altura vai travada em 28px
   pela mesma razão do item da lista: a escala encolhe o token a 390 (19px) e a prancha desenha o
   título com h28 nessa mesma faixa. 21 × 1,35 = 28,35 — o 28 é o número do nó. */
.nav-ov-head .wordmark{font-size:var(--fs-500);line-height:28px;font-weight:600}
.foot .wordmark{font-size:var(--fs-400);opacity:.92}
.nav-links{display:flex;align-items:center;gap:24px}   /* ⭐ C133 §3 #3 · o nó mede 24 entre os quatro itens */
/* ⭐ C133 §3 #2 · `body/small` 15, não 13: o item do nó mede 24 de altura = 15 × 1,6. A altura vai
   travada em px porque a escala encolhe `--fs-200` nas faixas estreitas e o ponto do ativo se
   posiciona a partir dela. */
.nav-links a{font-size:var(--fs-200);line-height:24px;font-weight:500;color:var(--text-2)}
.nav-links a:hover{color:var(--text-1)}
/* ⭐ RESGATE — idêntico aos outros itens do menu; a ÚNICA diferença é a cor da marca.
   Tamanho, peso e line-height continuam vindo do `.nav-links a` acima. */
.nav-links a.nav-resgate{color:var(--brand-ink)}
.nav-links a.nav-resgate:hover{color:var(--brand-hover)}
/* ⭐ C299 · o MESMO item no drawer (mobile). O `.nav-ov-list a` trava a cor com !important,
   entao a excecao tambem precisa dele — nao e capricho, e a unica forma de vencer ali. */
.nav-ov-list a.nav-ov-resgate{color:var(--brand-ink)!important}
.nav-ov-list a.nav-ov-resgate:hover{color:var(--brand-hover)!important}
.nav-cta{font-size:var(--fs-100);font-weight:500;color:var(--on-brand)!important;background:var(--brand);padding:9px 18px;border-radius:var(--radius-input);margin-left:12px;transition:background 200ms var(--ease),transform 200ms var(--ease)}
.nav-cta:hover{background:var(--brand-hover)}

.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta).is-active{color:var(--text-1)}
/* ⭐ C133 §3 #5 · o ponto fica 4 abaixo do texto (item 24 de altura, ponto em y=28 → 28−24 = 4).
   Com o `<a>` medindo os mesmos 24 do texto, `bottom:-8px` põe o topo do ponto exatamente 4 abaixo
   da base — o ponto tem 4 de altura. */
.nav-links a:not(.nav-cta).is-active::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--brand)}
.menu-btn{display:none;padding:8px;-webkit-tap-highlight-color:transparent}
.menu-btn span{display:block;width:20px;height:2px;background:var(--text-1);margin:4px 0;transition:all 250ms var(--ease);border-radius:2px}
.menu-btn.on span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.menu-btn.on span:nth-child(2){opacity:0}
.menu-btn.on span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* ========== DRAWER MOBILE ========== */
/* ⭐ C175 · FUNDO CHAPADO, por decisão do Matheus durante o lote. Era `rgba(5,5,5,.98)` + blur(24px)
   — 2% do que estava atrás vazava e o blur o borrava. Agora é `var(--bg)`, o MESMO fundo do site,
   opaco: o drawer substitui a página, não flutua sobre ela (é o que a descrição do nó `118:399` já
   dizia ao excluir o Drawer da regra de sombra). ⛔ `var(--bg)` e não `#050505` porque o fundo é
   white-label — o CH Fire troca o token e o drawer acompanha sozinho.
   ⚠️ Só a PINTURA mudou: nem uma medida, nem um espaçamento. */
.nav-overlay{display:flex;position:fixed!important;inset:0!important;background:var(--bg)!important;z-index:10001!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:0!important;margin:0!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* ⛔⛔ C175 · A REGRA QUE FAZ O `hidden` VALER. A base (`modal.js`) lê o atributo `hidden`, mas
   `display:flex` acima venceria o `[hidden]` do user-agent — é a QUINTA vez desta mesma família
   (C148, C155 `.co-line`, C157 na base, C164 por ID). Precisa de `!important` porque o vizinho tem.
   Sem esta linha o drawer fica NA TELA marcado como escondido. */
.nav-overlay[hidden]{display:none!important}
/* ⭐ C131 · o head fecha em 60, o número da prancha (114:205): 16 (pad-top) + 28 (título, y16 h28)
   + 15 (pad-bottom) + 1 (a régua que o nó desenha em y59). Antes eram 18/18 e dava 75 — e esses 15
   de sobra eram TODO o desvio do G1: o corpo já media 906 exatos (483 + 203 + 120 + 100). */
.nav-ov-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:16px 20px 15px!important;box-sizing:border-box!important;border-bottom:1px solid var(--surface-3)!important;position:sticky!important;top:0!important;background:rgba(5,5,5,.98)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:1!important;flex-shrink:0!important;width:100%!important;margin:0!important}
/* ⭐ C175 · o logo VOLTA ao head do drawer, por decisão do Matheus: era a marca em TEXTO
   (a prancha do C131 pedia texto). A regra abaixo foi removida no início deste lote por estar
   órfã — e voltou porque agora tem dono. ⚠️ Mantida idêntica à que existia, byte a byte. */
.nav-ov-logo{height:24px!important;width:auto!important;max-height:24px!important;max-width:170px!important;object-fit:contain!important;display:block!important;flex-shrink:0!important}
.nav-close{padding:8px!important;-webkit-tap-highlight-color:transparent;background:none!important;border:none!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}
/* ⭐ C131 · o nó desenha o fechar em 20×20 (x350 y20). Com 22 + padding 8 o botão media 38 e
   dominava os 28 do título, empurrando o head para 70 — era o resto do desvio do G1. */
.nav-close{padding:4px!important}
.nav-close svg{width:20px!important;height:20px!important;stroke:var(--text-2)!important;display:block!important}
/* ⭐ C131 · a prancha empilha as seções SEM gap entre elas: cada uma traz o próprio `padding-top:20`
   e não tem padding-bottom — é o padding da seguinte que faz o respiro. Confere na soma medida:
   Aplicativo = 20 (pad) + 15 (título) + 10 (gap) + 158 (cards) = 203, exato.
   ⭐ Os 100 do fim são o "espaço" que a prancha desenha abaixo da última seção (y866 390×100). */
.nav-ov-body{flex:1 1 auto!important;padding:0 20px 100px!important;display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;margin:0!important;box-sizing:border-box!important}
.nav-ov-section{display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important;padding-top:20px!important}
.nav-ov-title{font-size:var(--fs-50)!important;font-weight:500!important;color:var(--text-3)!important;text-transform:uppercase!important;letter-spacing:.08em!important;padding:0 4px!important;margin:0!important}
/* ⭐⭐ C131 · a lista pela prancha (114:205): item de 58 com GAP 4 entre itens, SEM divisória e
   SEM chevron. 58 = 16 (pad) + 26 (texto `body/default` 16 × 1,6) + 16, e a lista de 5 itens fecha
   em 306 = 5×58 + 4×4 — exatamente o que o nó mede.
   ⛔ A divisória saiu: a prancha separa por espaço, não por linha. O chevron saiu do markup, e com
      ele a regra que o pintava.
   ⭐ O ATIVO virou card preenchido (raio 8 = `--radius-input`; `--r-8` é o nome no Figma, aqui o
      token é este), com o texto subindo para `--text-1` enquanto os inativos ficam em `--text-2`. */
.nav-ov-list{display:flex!important;flex-direction:column!important;gap:4px!important;margin:0!important}
/* ⭐⭐ C131 · line-height em PX, não em razão — e não é preciosismo: a escala do site ENCOLHE os
   tokens abaixo de 480 (`--fs-300` vira 15, `--fs-200` vira 14; site.css:106-107), enquanto a
   prancha foi desenhada a 390 com os tamanhos de 1440. Medido antes desta trava: item 56 (a
   prancha pede 58) e lista 296 (pede 306). Com a razão 1,6 sobre 15px dá 24; travando em 26px o
   item fecha 16+26+16=58 e a lista 5×58+4×4=306, exatos.
   ⭐ O precedente é do C102, no `.cn-now`: "a casa já tem precedente de valor absoluto exatamente
      para travar altura". Mesma razão aqui — a altura do item é o que faz a soma da seção fechar. */
.nav-ov-list a{display:flex!important;align-items:center!important;font-size:var(--fs-300)!important;font-weight:400!important;line-height:26px!important;color:var(--text-2)!important;padding:16px 12px!important;border:0!important;border-radius:var(--radius-input)!important;transition:color 200ms var(--ease),background 200ms var(--ease);text-decoration:none!important;margin:0!important}
.nav-ov-list a:hover{color:var(--text-1)!important;background:var(--surface-hover)!important}
.nav-ov-list a.is-active{color:var(--text-1)!important;background:var(--surface-2)!important}
/* ⛔ C170 · SAÍRAM DAQUI 8 regras — `.nav-ov-btns`, `.nav-ov-btn` (+ `:hover`, ` svg`),
   `.nav-ov-btn-info` (+ ` strong`, ` small`) e `.nav-ov-btn.is-support svg` — junto com as seções
   Aplicativo e Suporte do drawer (ver o comentário em header.php, onde elas estavam).
   ⭐ PROVADO MORTO antes de remover, e não presumido: `grep` de cada seletor em todo `app/` e
      `public/` (php e js, fora do próprio site.css) voltou ZERO uso para os quatro.
   ⚠️ O que FICOU, porque tem uso: `.nav-ov-section` (Navegação e Sair), `.nav-ov-title`,
      `.nav-ov-list`, `.nav-ov-acoes`, `.nav-ov-conta`, `.nav-ov-sair`, `.nav-ov-head`, `.nav-ov-body`. */
/* ⭐ C131 · blocos que a prancha tem e o código não tinha. */
/* o "Olá, Fernanda" do topo (logado): 56 = 14 + 28 (avatar) + 14, gap avatar→texto 10 */
/* ⭐ adendo C131 §2.1 · a ALTURA ja estava certa (56); a DISTRIBUICAO nao. O no 114:266 poe o
   avatar em y24 dentro de um bloco de 56 — 24 acima, 4 abaixo. Com 14/14 ele subia demais e
   descolava do titulo NAVEGACAO, que ja traz padding-top 20. Total segue 24+28+4 = 56. */
.nav-ov-conta{display:flex!important;align-items:center!important;gap:10px!important;padding:24px 0 4px!important;margin:0!important;text-decoration:none!important}
.nav-ov-conta i{width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-size:var(--fs-50);font-weight:600;font-style:normal;flex:none}
.nav-ov-conta span{font-size:var(--fs-300);line-height:26px;color:var(--text-1);font-weight:400}
.nav-ov-conta strong{font-weight:600}
/* as duas ações de conta (deslogado): 122 = 16 (pad) + 47 + 12 + 47 */
.nav-ov-acoes{display:flex!important;flex-direction:column!important;gap:12px!important;padding-top:16px!important;margin:0!important}
.nav-ov-acoes > *{width:100%!important;height:47px!important;justify-content:center!important}
/* o "Sair da minha conta" (logado): 99 = 20 (pad da seção) + 1 (régua) + 20 (gap) + 58 (item) */
/* ⭐ adendo C131 §2.2 · faltavam 20px: o no poe a REGUA em y20, ou seja ha respiro ANTES dela.
   Gravado antes: 1 (regua) + 20 + 58 = 79. Com a margem: 20 + 1 + 20 + 58 = 99, o numero do no.
   ⚠️ `margin` NAO entra em getBoundingClientRect().height — a caixa segue medindo 79 e os 20
      aparecem no TOTAL do drawer. O relatorio reporta os dois numeros. */
.nav-ov-sair{border-top:1px solid var(--surface-3)!important;padding-top:20px!important;margin-top:20px!important}
.nav-ov-sair button{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;padding:16px 12px!important;background:0!important;border:0!important;border-radius:var(--radius-input)!important;color:var(--text-2)!important;font-size:var(--fs-300)!important;line-height:26px!important;font-family:inherit!important;cursor:pointer!important;text-align:left!important;transition:color 200ms var(--ease),background 200ms var(--ease)}
.nav-ov-sair button:hover{color:var(--text-1)!important;background:var(--surface-hover)!important}
.nav-ov-sair svg{width:20px!important;height:20px!important;flex:none!important}
.nav-ov-cta{display:block!important;text-align:center!important;background:var(--brand)!important;color:var(--on-brand)!important;font-size:var(--fs-200)!important;font-weight:500!important;padding:16px 24px!important;border-radius:var(--radius-input)!important;margin:0 20px 32px!important;transition:background 200ms var(--ease);text-decoration:none!important;flex-shrink:0!important}
.nav-ov-cta:hover{background:var(--brand-hover)!important;color:var(--on-brand)!important}
@media (max-width:768px){
  .nav{padding:0 16px}
  /* logo no mobile: altura menor + trava de LARGURA (max-width) pra um logo largo (wordmark) não dominar/estourar
     a barra nem o drawer; object-fit:contain mantém a proporção quando a largura clampa. */
  .nav-logo{height:24px;max-width:150px;object-fit:contain}
  .nav-links{display:none}
  .menu-btn{display:block}
}

/* ========== FOOTER ========== */
/* ⭐⭐ C134 · `--surface-alt`, o MESMO token da nav — nav e footer são o chrome, e a prancha se
   chama "04 · Chrome". Antes era `--surface-1` (rgba branco .06), que sobre a página #050505
   resolve para #141414: o footer inteiro estava 8 pontos MAIS CLARO que o desenho, medido no
   pixel do nó 116:249 (#0C0C0C).
   ⭐ E trocar o fundo conserta TRÊS coisas: os tokens de superfície são alfa sobre o que está
      atrás, então a régua e a pílula do status compunham sobre a base errada —
      régua  12 + 243×0,10 = 37 (era 43) · pílula 12 + 243×0,08 = 31 (era 39). Nenhuma das duas
      foi tocada: elas já apontavam para o token certo, só estavam sentadas no fundo errado.
   ⛔ A `border-top` FICA — diferente da nav, aqui o Figma DESENHA régua no topo (y=0, medida em
      37,37,37). Nav não tem, footer tem. Não uniformizar. */
.foot{background:var(--surface-alt);border-top:1px solid var(--surface-3);margin-top:96px;font-family:var(--font-sans);color:var(--text-2)}
/* Home: a última seção (autenticidade) é uma faixa clara (surface-1); os 96px de respiro viravam um
   buraco escuro entre ela e o rodapé (também claro). Na home o rodapé COLA na última seção. Específico
   da home (via .pg-home no <body>) — as outras páginas mantêm o respiro de 96px. */
.pg-home .foot{margin-top:0}
.pg-home .auth{border-bottom:0}
/* /conta: mesma exceção, outro motivo. Ali a área logada já tem respiro próprio (padding-block do main
   + do .ct); os 96px viravam um terceiro vão empilhado e o espaço embaixo do conteúdo ficava ~4x o de
   cima. Zerado, o respiro fica 48px em cima e 48px embaixo. O rodapé ainda tem 56px internos. */
.pg-conta .foot{margin-top:0}
.foot *{box-sizing:border-box}
/* ⭐ C133 §1.1 · 1148, não 1100. Com `box-sizing:border-box` (`.foot *`) o padding de 24 entrava
   DENTRO dos 1100 e sobravam 1052 de conteúdo — a borda do footer ficava 24px mais para dentro que
   a de qualquer outra seção da mesma página. O padrão da casa é 1100 de CONTEÚDO (os outros wraps
   não têm padding próprio; o 24 mora na seção pai). Corrigir ALINHA, não desalinha — e devolve os
   239 por coluna: (1100 − 3×48) / 4 = 239. */
.foot-brand-row{max-width:1148px;margin:0 auto;padding:56px 24px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-brand-area{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* ⭐⭐ C135 §2 · 28 fixo, o número do nó (`logo · az_tema` 143×28). Estava em `--logo-size` = 32, e
   esses 4px sozinhos explicavam o desalinhamento da faixa 1 inteira: 56 + 32 + 32 = 120 no site
   contra 56 + 29 + 32 = 117 no Figma (29 = a pílula, o item mais alto quando o logo é 28).
   ⚠️ SAI do `--logo-size`, que é variável de tema — o tamanho do logo deixou de ser white-label
      aqui, como o C133 já fez no `.nav-logo` (24). Registrado; voltar atrás é frente própria. */
.foot-logo{height:28px;width:auto;opacity:.92;display:block}
/* ⭐ C135 §3 · `caption` é 13 × 1,6 = 20,8 ≈ 21, a altura do nó. Estava em 1.4 (18,2).
   ⛔ `padding-left` e `border-left` FICAM — a divisória de 1×20 do Figma está certa. */
.foot-tagline{font-size:var(--fs-100);color:var(--text-3);font-weight:400;padding-left:18px;border-left:1px solid var(--surface-3);line-height:1.6}
/* ⛔ C132 · o nó desenha o ícone SOLTO em 20×20 — o retângulo arredondado que se vê é a própria
   marca do YouTube, não um botão. Saem largura/altura fixas, fundo, borda e `border-radius:50%`.
   ⭐ O hover perde o alvo de borda junto: vira SÓ cor, que é a regra única do C82. */
.foot-social{display:inline-flex;align-items:center;justify-content:center;border:0;background:0;color:var(--text-2)!important;transition:color 150ms var(--ease),border-color 150ms var(--ease),background 150ms var(--ease);text-decoration:none!important}
.foot-social:hover{color:var(--brand-ink)!important}
.foot-social svg{width:20px;height:20px}
.foot-social-group{display:inline-flex;align-items:center;gap:10px}
/* ⭐ C132 · o status CONTINUA pílula — 158×29 medidos no nó —, mas SEM borda: 29 = 4 + 21 (texto
   caption) + 4, com padding lateral 12 e gap 8 até o ponto de 6. ⛔ Não uniformizar com o selo de
   autenticidade logo abaixo: os dois são ponto+texto e diferem DE PROPÓSITO (o selo mede 15). */
.foot-status{display:inline-flex;align-items:center;gap:8px;height:29px;font-size:var(--fs-100);line-height:21px;color:var(--text-2);font-weight:500;padding:0 12px;background:var(--surface-2);border:0;border-radius:99px}
.foot-status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);flex-shrink:0;transition:background 200ms var(--ease)}
.foot-status-dot.is-open{background:var(--green);box-shadow:0 0 8px var(--green);animation:footStatusPulse 2.5s ease infinite}
.foot-status-dot.is-closed{background:var(--red)}
@keyframes footStatusPulse{0%,100%{opacity:1}50%{opacity:.55}}
/* ⭐ C132 §3 #9 · faltava o respiro de 56 ENTRE a régua e o topo das colunas. A conta do nó fecha
   assim: wrap 199 = 56 (esse respiro) + 143 (a coluna Produto, que é a mais alta), e a faixa
   287 = 32 (pad da prancha) + 199 + 56. Somando os dois de cima: padding-top 88, que é exatamente
   os "88 da régua até o topo da coluna" que o nó anota. Medido antes: 254, faltando 33. */
/* ⭐⭐ C136 · `padding:32px 24px`, o que o `get_design_context` declara (`pt-32 pb-32`). Os 88/56
   de antes eram DERIVAÇÃO minha de coordenadas do `get_metadata` — e o auto-layout é a fonte de
   implementação, não o símbolo isolado.
   ⭐ A régua saiu daqui: as três internas medem 1100 no nó, não largura cheia (ver `::before`). */
.foot-cols{position:relative;max-width:1148px;margin:0 auto;padding:32px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
/* ⭐⭐ C238 · as peças que o construtor pode pôr numa coluna do rodapé. ⛔ `max-width:100%` e
   `height:auto` no banner: a coluna tem 239px em 1440 e a imagem escolhida pelo operador pode ter
   qualquer largura — sem isso ela estouraria a grade, que é o defeito que o §4 do C236 mede. */
.foot-col-texto{font-size:13px;line-height:1.6;color:var(--text-2);margin:0 0 8px}
.foot-col-banner{margin:0 0 10px}
.foot-col-img{display:block;width:100%;max-width:100%;height:auto;border-radius:8px}
/* ⭐⭐ C136 §3 · a régua de 1100 CENTRADA. Meio escolhido: `::before` ABSOLUTO — as três faixas têm
   layout próprio (`.foot-cols` é grid), e um `::before` em fluxo viraria item da grade/flex e
   quebraria a contagem de colunas. Absoluto sai do fluxo e não interfere em nada.
   ⚠️ `left:0;right:0` NÃO serve: o containing block de um absoluto é o padding box, que INCLUI o
      padding — medido, a régua saía com a largura cheia da faixa (753 a 768, 375 a 390).
      `left/right` explícitos, iguais ao padding lateral de cada breakpoint, é o que acompanha o
      conteúdo. `max-width:1100px` + `margin-inline:auto` dá os 1100 centrados onde há espaço. */
.foot-cols::before,.foot-mid::before,.foot-bot::before{content:'';position:absolute;top:0;left:24px;right:24px;width:auto;max-width:1100px;margin-inline:auto;height:1px;background:var(--surface-3)}
/* ⭐ C132 · `15 + 4×32 = 143` é a conta do nó para a coluna Produto, e ela não tem margem entre o
   título e o primeiro item: o respiro vem do `padding:7px` do próprio link. Com os 22 de margem a
   coluna media 165. Altura do título travada em 15 (uma linha de `micro`). */
/* ⭐⭐ C136 §1 · a coluna é FLEX COM GAP 12 — o `get_design_context` dá
   `flex flex-col gap-[12px] items-start`, com título e links como TEXTO PURO, zero padding.
   O "passo 32" dos meus lotes anteriores era derivação de coordenadas; o layout real dá
   24 (linha do link) + 12 (gap) = 36. */
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot-col h4{font-size:var(--fs-50);line-height:15px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:0}
/* ⭐ C132 §3 #7 · passo 32, o número do nó (título 15 + 4×32 = 143 na coluna Produto, e 15 + 2×32 = 79
   em Suporte — as duas fecham).
   ⭐ ADENDO C133 · o texto subiu para `--fs-200` (15), que é o que o nó `512:100` desenha — links em
      y 23/55/87/119, cada um com 24 de altura = 15 × 1,6. E o passo NÃO entrou em conflito com isso:
      era 7 + 18 + 7 = 32, virou 4 + 24 + 4 = 32. Mesmo passo, com a fonte certa.
   O `line-height` segue em PX porque a escala encolhe o token nas faixas estreitas e o passo fica. */
.foot-col a,.foot-col a:link,.foot-col a:visited{display:block;width:fit-content;max-width:100%;font-size:var(--fs-200);line-height:24px;font-weight:400;color:var(--text-2)!important;padding:0;text-decoration:none!important;position:relative;transition:color 150ms var(--ease);overflow-wrap:anywhere}
/* ⭐ C136 · o sublinhado estava em `bottom:5px`, medida que só fazia sentido com o padding de 7/8
   que existia embaixo. Sem padding ele cairia DENTRO do texto; `-2px` o põe logo abaixo da linha. */
.foot-col a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--brand);transition:width 250ms var(--ease)}
.foot-col a:hover{color:var(--brand-ink)!important}
.foot-col a:hover::after{width:100%}
/* ⭐ C136 §1 · item do mesmo flex — o gap 12 da coluna cuida do espaço, o padding sai.
   ⭐ §2 · `align-items:center` porque agora os dois lados têm TAMANHOS DIFERENTES (dia 15, hora 13)
      e precisam alinhar pelo meio. */
.foot-hours-row{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:var(--fs-100);line-height:24px;font-feature-settings:'tnum';gap:12px}
/* ⭐ C134 · medidos no pixel: o DIA em (145,145,145) = 55% = `--text-2`, e a HORA em (245,245,245)
   = 96% = `--text-1`. O contraste entre os dois é grande e proposital — é ele que faz a hora
   saltar do dia. Os dois estavam um degrau abaixo. */
/* ⭐ C136 §2 · o dia é `--fs-200` (15) e a hora `--fs-100` (13) — tamanhos diferentes DE PROPÓSITO:
   o dia acompanha os links da coluna, a hora é o dado compacto. O C134 acertou as cores e nunca
   mandou o tamanho; o dia estava herdando os 13 da regra da linha. */
.foot-hours-row span:first-child{font-size:var(--fs-200);color:var(--text-2)}
.foot-hours-row span:last-child{color:var(--text-1);font-weight:500}
.foot-mid{position:relative;padding:24px}
/* ⭐⭐ C135 §1 · EMPILHADO, não lado a lado. O nó 116:236 põe selo e parágrafo no MESMO x=24, em
   linhas diferentes (y0 e y23), e a conta fecha sozinha: 15 (selo) + 8 (respiro) + 21 (parágrafo)
   = 44, a altura exata do wrap. Em linha o parágrafo ficava espremido em 917,8 em vez dos 1100. */
.foot-auth{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* ⛔⛔ C132 · o selo NÃO é pílula. O nó mede 162×15, e 15 é EXATAMENTE uma linha de `micro`
   (11 × 1,35 = 14,85). Com `padding:7px 14px` + borda dava ~31 — não cabia ali de jeito nenhum.
   Saem `background`, `border`, `padding` e `border-radius`; ficam `letter-spacing` e `uppercase`.
   ⭐ O ponto do `::before` vira `--brand` (era `--green` com glow): a prancha desenha o ponto do
      selo na cor da marca; o verde com pulso é do `foot-status`, que é outro componente. */
.foot-auth-badge{display:inline-flex;align-items:center;gap:8px;background:0;border:0;padding:0;line-height:15px;font-size:var(--fs-50);font-weight:500;color:var(--text-2)!important;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0;text-decoration:none!important}
/* ⭐⭐ C134 · o ponto é `--red` (#F87171), medido em (248,113,113) — NÃO a marca. Eu tinha posto
   `--brand` no C132 por suposição. E o vermelho faz sentido semântico: o parágrafo ao lado fala de
   GOLPE e de vendedor não autorizado. É alerta, não identidade. */
.foot-auth-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
/* ⭐ C135 §1 · `flex:1` e `min-width:240px` existiam para o layout EM LINHA (dividir espaço com o
   selo). Em coluna eles não ajudam e o `flex:1` chega a atrapalhar — o item passaria a disputar
   ALTURA, não largura. Saem os dois; `width:100%` garante os 1100 do nó. */
.foot-auth-text{font-size:var(--fs-100);color:var(--text-3);line-height:1.6;width:100%;font-weight:400}
/* ⭐ C132 · o nó dá 65 = 20 (pad-top) + 21 (conteúdo) + 24 (pad-bottom) — os dois paddings são
   DIFERENTES. Com 20/20 e linha de 19 media 59. */
.foot-bot{position:relative;padding:20px 24px 24px}
.foot-bot-inner{line-height:21px}
.foot-bot-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.foot-bot-left{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-copy{font-size:var(--fs-100);color:var(--text-3);font-weight:400}
.foot-legal{font-size:var(--fs-100);color:var(--text-3)!important;font-weight:400;text-decoration:none!important;transition:color 150ms var(--ease);padding-left:14px;border-left:1px solid var(--surface-3)}
.foot-legal:hover{color:var(--brand-ink)!important}
/* ⭐ C135 §4 · `--fs-100` (13), não `--fs-50` (11): o nó 116:248 mede o texto em 209×21, e 21 é
   13 × 1,6. Mesmo token do `.foot-copy`, que já estava certo ao lado.
   ⚠️ O ÍCONE segue 13×13 e o gap segue 6 — o nó pede 16×16 e gap 8. Medido e REPORTADO, não
      trocado: o §4 mandou reportar o que achei, não alinhar. */
.foot-android{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-100);color:var(--text-3);font-weight:400}
.foot-android svg{width:16px;height:16px;fill:#a4c639;flex-shrink:0}
@media (max-width:1024px){ .foot-cols{gap:32px} }
@media (max-width:768px){
  /* ⭐ C132 §4 · a prancha de 768 (531:144) e a de 390 (531:201) CENTRALIZAM a faixa da marca —
     logo + fio + tagline numa linha, e abaixo o YouTube + a pílula. */
  .foot-brand-row{padding:48px 20px 28px;flex-direction:column;align-items:center;text-align:center;gap:18px}
  .foot-brand-area{justify-content:center}
  .foot-brand-area{gap:14px}
  .foot-tagline{padding-left:14px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:32px;padding:28px 20px 40px}
  .foot-mid{padding:20px}
  /* ⭐ C136 · a régua acompanha o padding menor destas faixas */
  .foot-cols::before,.foot-mid::before,.foot-bot::before{left:20px;right:20px}
  .foot-bot{padding:18px 20px}
  .foot-bot-inner{flex-direction:column;text-align:center;gap:12px}
}
@media (max-width:480px){
  .foot-cols{grid-template-columns:1fr;gap:32px}
  .foot-brand-area{flex-direction:column;align-items:center;gap:10px}
  /* ⛔ a 390 o FIO vertical some — o nó separa logo e tagline por quebra de linha, não por régua */
  .foot-tagline{text-align:center}
  /* ⭐ faixa 4 em três linhas centralizadas, e o fio entre copy e link também some */
  .foot-bot-left{flex-direction:column;align-items:center;gap:10px}
  .foot-legal{padding-left:0;border-left:0}
  .foot-tagline{padding-left:0;border-left:0;padding-top:6px;border-top:1px solid var(--surface-3);width:100%}
}

/* ========================================================================================
   BASE DE MODAL (C157) — o mecanismo compartilhado das sobreposições do site.
   ⭐ NÃO é invenção: cada peça saiu do que o `docs/MODAIS-INVENTARIO.md` (C156) mediu que as
      cinco superfícies já fazem, cada uma por um caminho diferente. A base pega o MELHOR de
      cada, não a média.
   ⛔ O VALOR DO BACKDROP NÃO MORA AQUI. São três valores distintos em escopo e os três batem
      com a prancha — são decisões, não deriva. Cada superfície traz o seu por modificador.
   ⭐ Ordem de migração combinada: Popup → Auth → EPG → Drawer → checkout. O checkout é o
      último porque é o que fatura: quando ele migrar, a base já terá sido provada 4 vezes.
   ⚠️ Só o POPUP usa isto hoje. Auth, EPG, Drawer e checkout seguem byte-idênticos. */
.mdl{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
     padding:var(--mdl-pad,24px);z-index:var(--mdl-z,10050)}
/* ⛔⛔ ESTA LINHA É OBRIGATÓRIA e não é redundante com o [hidden] do navegador: o `[hidden]`
   do user-agent é seletor de ATRIBUTO e perde para `.mdl{display:flex}` (classe). Sem ela a
   sobreposição fica na tela com `hidden` marcado — o defeito exato que o C155 levou a produção
   e que `.co-ov [hidden]` e `.co-line[hidden]` já corrigiram em dois outros lugares. */
.mdl[hidden]{display:none}
/* o backdrop: só posição. A COR e o blur vêm do modificador de cada superfície. */
.mdl__bg{position:absolute;inset:0}
/* o card: a casca. `max-height` desconta o padding do overlay pelos DOIS lados, então mudar o
   --mdl-pad não deixa o card estourar a viewport — foi o acoplamento que o `calc(100vh - 48px)`
   escondia quando o padding era 24. */
.mdl__card{position:relative;z-index:1;width:100%;
           max-height:calc(100vh - var(--mdl-pad,24px) * 2);overflow:auto;
           background:linear-gradient(0deg,var(--surface-1),var(--surface-1)),var(--bg);
           border-radius:var(--mdl-raio,var(--radius-card))}
/* ⭐ o BOTÃO DE FECHAR da base — decisão do Matheus (C157): "o botão de fechar deve seguir o
   mesmo padrão do checkout". Copiado do `.co-close` (checkout.php:275) ao valor: 30×30 em 14/14,
   fundo transparente, `--text-3` que vira `--text-1` no hover, e o glifo `&times;` como TEXTO em
   `--fs-400` — não um SVG.
   ⛔ Isto VENCE a especificação do §2 do lote (32×32, círculo `rgba(0,0,0,.45)`, ícone 16×16): a
      palavra do dono vence a prancha. ⚠️ O risco fica dito: no Popup este × pode cair SOBRE o
      banner, e um glifo `--text-3` transparente sobre foto clara tem menos contraste que o círculo
      escuro tinha. O checkout não tem imagem atrás; o Popup pode ter. Medido e reportado. */
.mdl__x{position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border:none;
        background:transparent;color:var(--text-3);font-size:var(--fs-400);cursor:pointer;
        line-height:1;transition:color 160ms var(--ease)}
.mdl__x:hover{color:var(--text-1)}
/* ⭐ UMA técnica de trava, e a escolha é medida: das quatro que existiam (2× inline no JS via
   body.style.overflow, 1× classe, 1× nenhuma), a CLASSE é a única que não destrói o valor
   anterior de `overflow` do body ao restaurar — o inline grava '' e perde qualquer valor que a
   página tivesse posto. É também a que Drawer e Popup já usavam. */
body.mdl-aberto{overflow:hidden}

/* ========== POP-UP DA HOME ========== */
/* ⭐ C157: o Popup é a PRIMEIRA superfície na base — e foi escolhido por estar DESLIGADO
   (az_popup.ativo = 0): nada que o cliente vê hoje podia quebrar. O que sobrou aqui é só o que
   é DELE (backdrop, geometria da prancha 1595:6913, tipografia); o mecanismo mora no .mdl. */
.popup{--mdl-pad:48px;--mdl-z:10050;--mdl-raio:var(--r-16,16px)}   /* padding 48 e raio 16: nó 1595:254/255 */
.popup-backdrop{background:rgba(5,5,5,.7);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* fundo SÓLIDO: superfície do tema (--surface-1) COMPOSTA sobre o --bg opaco, pra o card não deixar
   o conteúdo do site vazar por trás. Fica igual a um card sólido do site (surface sobre o #050505). */
/* ⭐ só o que é DO POPUP: a largura da prancha e a entrada. Posição, superfície, raio, altura
   máxima e rolagem interna vieram para o .mdl__card — não se redeclara aqui (G5). */
.popup-card{max-width:420px;animation:popup-in 250ms var(--ease)}
/* ⛔ `.popup-x` SAIU: o botão de fechar agora é `.mdl__x` da base, no padrão do checkout
   (decisão do Matheus, C157). Eram 3 regras próprias — círculo escuro 32×32 com SVG. */
@keyframes popup-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
/* proporção FIXA (16:9): qualquer imagem preenche a área com object-fit:cover — sem distorcer nem
   quebrar o card. Recomendado subir em 880×495 px (2× retina do card de 420px). */
.popup-banner{width:100%;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.popup-banner img{width:100%;height:100%;object-fit:cover;display:block}
.popup-body{padding:24px;text-align:center}
.popup-titulo{font-size:var(--fs-500);font-weight:600;color:var(--text-1);margin-bottom:10px}
.popup-texto{font-size:var(--fs-200);color:var(--text-2);line-height:1.6;margin-bottom:18px}
/* padding 12/24: o nó 1595:365 diz 24 horizontal e 12 vertical (era 13/20). */
.popup-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:12px 24px;background:var(--brand);color:var(--on-brand)!important;font-size:var(--fs-200);font-weight:600;line-height:1.5;border-radius:999px;text-decoration:none!important;transition:background 200ms var(--ease),transform 200ms var(--ease)}
.popup-cta:hover{background:var(--brand-hover)}
/* ⛔ `body.popup-open` SAIU: a trava agora é a da base (`body.mdl-aberto`), uma só para todas as
   superfícies. Era uma das quatro técnicas que o censo encontrou para o mesmo problema. */
@media (max-width:480px){ .popup{--mdl-pad:16px} .popup-body{padding:20px} }

/* ========== INDIQUE E GANHE (seção da home · F6) ========== */
/* C5 tirou .ind-inner / .ind-eyebrow / ".ind-sec h2" / .ind-sub e o padding do .ind-sec.
   C6 tirou a regra .ind-sec inteira (só tinha as duas hairlines, que a prancha não tem).
   C8: saiu o RESTO — .ind-passos, ".ind-passos li", .ind-num e o @media(max-width:760px).
   Elas descreviam a composição ANTIGA (grade de 3 colunas, card com moldura, marca de 24px), e a
   prancha (168:1666) tem outra: pilha vertical gap 12, passo sem fill nem stroke, marca de 28px.
   O chrome novo da seção vive no <style> do home.php, que é onde mora o CSS das outras seções —
   este bloco era chrome privado da home guardado no arquivo compartilhado. Nada de .ind-* aqui. */