/* ==========================================================================
   Tema gototem — folha única do tema.
   PORTE FIEL de gototem.com.br (WordPress + Elementor). Todos os valores foram
   MEDIDOS no site em produção, não escolhidos: os comentários "MEDIDO:" trazem
   o número que justifica cada um. Não "arrume" um valor sem medir de novo.
   Ver .claude/plans/tema-gototem.md e ../../../../docs/tema-gototem.md.

   Ordem (a mesma das três folhas do site estático de origem):
     1. TOKENS  — cores, tipografia, espaçamento, raios, camadas
     2. BASE    — reset, tipografia base, utilitários
     3. SITE    — componentes, por seção, com os @media no fim de cada bloco
   ========================================================================== */

/* ============================ 1. TOKENS ============================ */

/* ==========================================================================
   Gototem — tokens do sistema visual
   Fonte da verdade das cores, tipografia, espacamento e raios.
   Todos os valores foram MEDIDOS no site em producao (kit do Elementor e
   estilo computado), nao escolhidos: esta e uma migracao fiel.
   Mudar a marca e mudar este arquivo.
   ========================================================================== */

:root {
  /* --- Cor ------------------------------------------------------------- */
  /* Verde da marca. 34 ocorrencias na home: e a cor que carrega a identidade. */
  --c-green: #2b9d73;
  /* Mesma familia, mais escura. Existe na marca e resolve contraste sem
     inventar cor nova: 5,09:1 sobre branco contra 3,40:1 do --c-green. */
  --c-green-dark: #0c7e54;

  --c-lime: #ecfb88;       /* cartoes de destaque */
  --c-lime-pale: #f4ffc6;  /* cartoes internos sobre verde */

  --c-cream: #fff7e3;      /* fundo das paginas */
  --c-off-white: #fcfff1;  /* pilulas, campos, botao Orcamento */
  --c-bone: #fbf9f4;       /* topo dos cartoes de solucao */
  --c-white: #ffffff;

  --c-ink: #282828;        /* texto padrao */
  --c-ink-soft: #333333;   /* titulos sobre claro */
  --c-dark: #282828;       /* cabecalho, rodape e faixas escuras */

  /* Papeis semanticos: o resto do CSS usa ESTES, nunca o hex direto. */
  --bg-page: var(--c-cream);
  --bg-header: var(--c-dark);
  --bg-footer: var(--c-dark);
  --bg-hero: var(--c-green);
  --bg-card: var(--c-off-white);
  --bg-card-lime: var(--c-lime);
  --bg-card-lime-pale: var(--c-lime-pale);

  --text-body: var(--c-ink);
  --text-heading: var(--c-ink);
  --text-on-dark: var(--c-white);
  --text-on-green: var(--c-white);
  /* Verde como texto: o MESMO da marca, como no site original.
     ATENCAO — decisao consciente de fidelidade, tomada pelo dev: sobre o card
     lima isso da 3,23:1 e sobre o creme 3,19:1, abaixo dos 4,5:1 que a WCAG AA
     pede para texto de 18px. Nao e regressao (o site atual ja e assim), mas
     tambem nao e conformidade. Para voltar a conformidade sem inventar cor,
     basta trocar por var(--c-green-dark), que ja existe na paleta e da 4,84:1.
     Ver DESIGN.md, secao "Contraste: a decisao que foi tomada". */
  --text-accent: var(--c-green);
  --text-nav: var(--c-lime-pale);

  --btn-bg: var(--c-green); /* como no original; rotulo branco fica em 3,40:1 */
  --btn-text: var(--c-white);
  --btn-ghost-bg: var(--c-off-white);
  --btn-ghost-text: var(--c-green);

  --border-soft: rgba(40, 40, 40, 0.12);
  --border-field: var(--c-green);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* Cores de ESTADO. Nao vem da marca (a paleta nao tem vermelho), mas sao
     decisao de design e por isso ficam aqui, e nao soltas nos componentes.
     Contraste MEDIDO (nao estimado): 7,97:1 o texto de erro sobre o fundo de
     erro, 5,83:1 o asterisco sobre o card lima, 6,39:1 o placeholder sobre o
     campo branco. Todos acima do minimo de 4,5:1. */
  --c-erro: #b3261e;
  --c-erro-forte: #8c1d18;
  --bg-erro: #fdecea;
  --text-placeholder: #5f5f5f;

  /* Veu escuro sobre foto — medido no site original. */
  --veu-foto: rgba(31, 61, 50, 0.7);

  /* --- Tipografia ------------------------------------------------------ */
  --font-display: 'Geologica', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Commissioner', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Roboto', 'Segoe UI', system-ui, sans-serif;

  /* Escala fluida DERIVADA do original, medindo 12 larguras de 320 a 1920.
     Nao sao breakpoints: o site original escala linearmente com a viewport,
     com uma taxa propria por papel. Minhas curvas antigas coincidiam em 1920
     e erravam em todo o resto — no tablet e no celular praticamente todo
     texto saia com outro tamanho.

       papel            formula                 conferido em
       titulo do hero   25,6px + 2,72vw (max 54,4)   320..1920
       titulo de secao  22,24px + 1,13vw (26..36)    360..1920
       card pequeno     15,2px + 0,22vw (16..18)     360..1920
       texto de apoio   15,2px + 0,11vw              320..1920            */
  --fs-hero: clamp(2rem, 1.5998rem + 2.72vw, 3.4rem);
  --fs-h2: clamp(1.625rem, 1.39rem + 1.13vw, 2.25rem);
  --fs-mini: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --fs-texto: clamp(0.95rem, 0.95rem + 0.11vw, 1.2rem);
  /* 28px em 1920. TRES papeis compartilham esta curva no original: o titulo
     do card de solucao, o subtitulo do hero e o texto da faixa escura. */
  --fs-destaque: clamp(1.375rem, 1.2298rem + 0.68vw, 1.75rem);
  /* A pergunta do FAQ tem a mesma taxa do texto de apoio, com outra base e
     teto em 16px. */
  --fs-faq: clamp(0.938rem, 0.9106rem + 0.11vw, 1rem);
  --fs-h3-lg: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --fs-card-title: var(--fs-destaque); /* medido: mesma curva dos 28px */
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1.05rem;                                    /* 16,784px */
  --fs-sm: 0.95rem;
  --fs-ui: 1rem;

  --lh-display: 1;      /* medido: 54,4px/54,4px e 36px/36px */
  /* MEDIDO: 16,784px / 20,1408px = exatamente 1,2. E apertado para corpo de
     texto, mas soltar deslocaria verticalmente TODO paragrafo do site — isso e
     mudanca de layout, nao melhoria pontual. Fica a fidelidade; soltar e uma
     decisao a parte, que muda a altura de todas as paginas. */
  --lh-body: 1.2;
  --lh-tight: 1.2;

  --fw-black: 900;
  --fw-bold: 800;
  --fw-semi: 600;
  --fw-regular: 400;

  /* --- Espacamento ----------------------------------------------------- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2rem;
  --sp-xl: 3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;
  /* MEDIDO no original: o vao entre o fim de uma secao e o titulo da seguinte
     e de 48px em 1920px — nao 80. Com 80 a pagina acumula deriva: +32px ja na
     primeira secao e +373px la pelo meio. */
  --sp-section: clamp(2rem, 1.5rem + 1.2vw, 3rem);

  --wrap: 1200px;        /* largura da area de conteudo, medida */
  --wrap-narrow: 68ch;   /* medida de leitura confortavel */
  /* MEDIDO em 1025/1100/1200/1264/1300/1440: acima de 1024 o original NAO tem
     calha — o conteiner e min(100%, 1200px) e encosta nas bordas ate a janela
     passar de 1200 (o logo fica em x=0 de 1025 a 1200, e o cartao em x=32 por
     recuo interno da secao). A clamp fluida que havia aqui dava 28 a 40px de
     folga nessa faixa e deslocava a pagina inteira. Tablet e celular mantem
     32 e 16, nas media queries do fim do arquivo. */
  --gutter: 0px;

  /* --- Forma ----------------------------------------------------------- */
  --r-card: 14px;
  --r-pill: 100px;
  --r-field: 8px;
  --r-logo: 12px;

  /* MEDIDO no original: e a mesma sombra em todos os cards (segmentos, FAQ,
     contato, solucao). Bem mais marcada que a que eu tinha posto. */
  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.2);
  /* MEDIDO: os cards de vantagem usam sombra propria — mais curta e mais
     escura que a das caixas grandes. */
  --shadow-advantage: 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 8px 16px rgba(0, 0, 0, 0.25);

  /* --- Movimento ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* --- Camadas --------------------------------------------------------- */
  /* Escala nomeada: nunca usar valor arbitrario tipo 9999. */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-drawer: 400;
  --z-toast: 500;
}

/* MEDIDO: na faixa do tablet o original usa calha FIXA de 32px, nao fluida.
   Conferido em quatro ancoras alinhadas a esquerda (FAQ, cabeca e corpo do
   acordeao, cards de solucao e bloco da missao): todas apareciam 8,6px a
   esquerda com a calha fluida — o MESMO numero nas quatro, que e o que
   identifica causa unica. Abaixo de 768 a calha volta a 16px, onde o FAQ ja
   batia exato.

   Fica no FIM do arquivo, e nao junto do token: colado logo apos o --gutter,
   este bloco fechava o :root no meio e jogava todo token declarado depois dele
   (--z-dropdown, --r-card, --shadow-raised...) para dentro do @media. Fora da
   faixa 768-1024 eles simplesmente nao existiam, e o mega menu perdia z-index,
   raio e sombra — passava a ser pintado por baixo da faixa verde. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --gutter: 2rem;
  }
}

/* MEDIDO: abaixo de 768 a calha do original e FIXA em 16px, nao fluida — a
   caixa de segmentos mede 568px numa janela de 600 (16 de cada lado), 448 em
   480 e 358 em 390. A clamp fluida dava 20px em 600px e deslocava a secao. */
@media (max-width: 767px) {
  :root {
    --gutter: 1rem;
  }
}


/* ============================= 2. BASE ============================= */

/* ==========================================================================
   Gototem — base: fontes, reset e tipografia
   ========================================================================== */

/* --- Fontes ---------------------------------------------------------------
   Tres familias VARIAVEIS auto-hospedadas (200 KB no total) no lugar das
   4 familias x 36 variantes que o site pedia ao Google a cada visita.
   Variavel cobre TODOS os pesos num arquivo so, entao nao ha o que escolher
   errado depois. font-display:swap para o texto aparecer antes da fonte.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Geologica';
  src: url('../fonts/geologica-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geologica';
  src: url('../fonts/geologica-latin-ext.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Commissioner';
  src: url('../fonts/commissioner-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Commissioner';
  src: url('../fonts/commissioner-latin-ext.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* O cabecalho do site original NAO e fixo (position: static, medido): ele
     rola junto. Logo nao ha nada cobrindo a ancora e nao existe offset a
     compensar. Um scroll-padding aqui empurraria "#contato" para baixo. */
  scroll-padding-top: var(--sp-sm);
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* :where() zera a especificidade do reset.
   Sem ele, "ul[class]" (0,1,1) vence qualquer regra de classe (0,1,0) e o
   padding declarado em .hero__features, .advantages__grid, .segments__list e
   .info-list simplesmente nao aplicava — os cards saiam sem respiro e as
   listas do acordeao sem recuo, sem nenhum aviso. */
:where(ul[class], ol[class]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--text-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* --- Tipografia ----------------------------------------------------------
   Os tamanhos e pesos reproduzem o que foi medido no site em producao.
   -------------------------------------------------------------------------- */

/* NAO usar text-wrap: balance/pretty aqui.
   Eram melhoria minha, mas nao sao neutras: mudam ONDE cada linha quebra. O
   original usa o padrao (wrap), e com balance o mesmo titulo de 206px saia com
   linhas de 195+? contra 139+? — mesma altura, quebra diferente. Numa copia
   fiel isso conta como divergencia, e aparecia em dezenas de titulos e
   paragrafos das 10 paginas. */

.t-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  color: var(--text-on-green);
}

.t-section {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  color: var(--text-heading);
}

.t-section--lg {
  font-size: var(--fs-hero);
}

.t-card {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-card-title);
  /* MEDIDO: entrelinha 1,0 exata em quatro larguras (28/28, 26,64/26,64,
     24,90/24,90 e 22,33/22,33). --lh-tight e 1,2 e deixava o titulo 6px mais
     alto, empurrando descricao e botao do card. */
  line-height: 1;
  color: var(--text-heading);
}

.t-mini {
  font-family: var(--font-ui);
  font-weight: var(--fw-semi);
  font-size: var(--fs-mini);
  line-height: 1; /* medido: 18px / 18px */
  color: var(--text-accent);
}

/* --- Utilitarios ---------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: var(--sp-section);
}

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

/* Pular para o conteudo: primeiro elemento focavel da pagina. */
.skip-link {
  position: absolute;
  left: var(--sp-sm);
  top: -100%;
  z-index: var(--z-toast);
  padding: var(--sp-2xs) var(--sp-sm);
  background: var(--c-white);
  color: var(--text-accent);
  border-radius: var(--r-field);
  font-weight: var(--fw-semi);
  transition: top var(--dur) var(--ease-out);
}

.skip-link:focus-visible {
  top: var(--sp-sm);
}

/* Foco visivel e consistente em tudo que recebe teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  /* O anel de foco fica no verde ESCURO de proposito: nao e conteudo do site,
     e sinalizacao de interface, e precisa ser visivel sobre qualquer fundo. */
  outline: 3px solid var(--c-green-dark);
  outline-offset: 2px;
  border-radius: var(--r-field);
}

/* --- Movimento reduzido ---------------------------------------------------
   Nao e opcional: quem pediu menos movimento recebe o mesmo conteudo, so que
   sem animacao. Nada aqui esconde conteudo por tras de uma transicao.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================= 3. SITE ============================= */

/* ==========================================================================
   Gototem — componentes e secoes
   Medidas reproduzem o site em producao (larguras, alturas, raios e cores
   foram lidos do DOM, nao estimados).
   ========================================================================== */

/* --- Botoes ---------------------------------------------------------------
   Pilula verde com circulo de seta a direita. O fundo usa --btn-bg
   (verde escuro da marca): com o verde claro o rotulo branco fica em 3,40:1,
   abaixo do minimo de 4,5:1 para texto de 16px.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  /* MEDIDO por dentro do botao: texto em x=20, 49px de vao ate o icone de 16px
     e 17px ate a borda — 20+153+49+16+17 = 256. O valor aqui e 41 e nao 49
     porque o nosso embrulho do icone (.btn__icon) mede 34px contra os 30 do
     original, e os 4px extras entram no vao visivel. */
  gap: 41px;
  min-height: 50px;
  padding: var(--sp-2xs) var(--sp-2xs) var(--sp-2xs) 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semi);
  line-height: 1;
  /* MEDIDO: o botao principal tem 1px de espacamento entre letras. Sem ele
     "Entrar em Contato" (17 caracteres) sai 17px mais estreito — 136 contra 153
     — e o botao inteiro encolhe de 256 para 226. NAO vale para o CTA do topo
     nem para o enviar do formulario, que sao "normal" no original. */
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.btn:hover {
  /* escurece: --btn-bg ja e o --c-green, entao clarear nao mudava nada */
  background: var(--c-green-dark);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--btn-bg);
}

.btn--ghost {
  letter-spacing: normal; /* medido: o CTA do topo nao tem o espacamento */
  justify-content: center;
  min-height: 40px;
  padding-inline: var(--sp-md);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
}

.btn--ghost:hover {
  background: var(--c-white);
}

.btn--plain {
  letter-spacing: normal; /* medido: o enviar do formulario nao tem */
  /* MEDIDO: o enviar e Roboto 500, nao Commissioner 600 — a familia do resto
     dos botoes. Com a fonte errada o texto saia 5px mais largo. */
  font-family: var(--font-ui);
  font-weight: 500;
  justify-content: center;
  /* MEDIDO: 40px de cada lado e 10px ate o icone (40+126+10+16+40 = 232). */
  gap: 10px;
  min-height: 47px;
  padding-inline: 40px;
  border-radius: 50px;
}

/* --- Cabecalho ------------------------------------------------------------
   O cabecalho do site original NAO e fixo: rola junto com a pagina.
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--bg-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: 95px;
}

/* MEDIDO: em <=1024 o cabecalho do original cresce para 107px e o logo passa a
   ter 16px de folga em cima, embaixo e a esquerda — nao os 32 da calha da
   pagina, que so vale do conteudo para baixo. */
@media (max-width: 1024px) {
  .site-header__inner {
    min-height: 107px;
    /* A folga do cabecalho e 16px, NAO a calha da pagina (32 no tablet): o
       original recua o logo 16px em cima, embaixo e dos lados. Como .wrap tira
       a calha pela LARGURA (width: min(100% - calha*2, 1200)) e nao por padding,
       o ajuste tem que ser na largura tambem — mexer na margem quebrava o
       margin-inline:auto que centraliza a faixa. */
    width: calc(100% - 32px);
  }
}

.site-header__logo {
  flex: 0 0 auto;
  line-height: 0;
}

.site-header__logo img {
  width: 210px;
  height: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item {
  position: relative;
}

.site-nav__item--has-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
}

/* MEDIDO no cabeçalho do site em produção: item normal em BRANCO e a página
   atual em lima-pálido. O tema tinha os dois INVERTIDOS (lima nos itens, branco
   no atual) — herdado da cópia estática, e invisível para o comparador de
   geometria, que descarta `header, footer, nav` numa linha.

   Tamanho: 16px com TETO — 16 em 1440/1600/1920 e fluido abaixo (15,88 em 1200,
   15,77 em 1100, 15,69 em 1027; a reta que passa nos três é 14,56px + 0,11vw).
   Entrelinha igual ao tamanho (lh = fs em todas as larguras medidas). O
   `--fs-texto` que vinha aqui dava 17,312 em 1920 e alargava cada rótulo 5-6px,
   empurrando os itens seguintes (-20, -17, -12, -6 ao longo da barra). */
.site-nav__link {
  color: var(--c-white);
  font-weight: var(--fw-semi);
  /* MEDIDO em 12 larguras, do painel mobile à barra do desktop: é UMA reta,
     14,58px + 0,108vw, com teto de 16 — 15,008 em 390, 15,088 em 480, 15,22 em
     600, 15,4048 em 768, 15,6864 em 1024, 15,88 em 1200 e 16 de 1310 para cima.
     Entrelinha igual ao tamanho em todas elas. */
  font-size: clamp(14px, calc(14.58px + 0.108vw), 16px);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-current='page'] {
  color: var(--text-nav);
}

.site-nav__disclosure {
  display: grid;
  place-items: center;
  padding: var(--sp-3xs);
  border: 0;
  background: none;
  color: var(--text-nav);
  cursor: pointer;
}

.site-nav__disclosure svg {
  transition: transform var(--dur) var(--ease-out);
}

.site-nav__disclosure[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.site-nav__cta {
  margin-left: auto; /* empurra para o fim da barra, antes do hamburguer */
}

@media (min-width: 1025px) {
  .site-nav__cta {
    margin-left: var(--sp-2xs);
  }
}

/* MEDIDO: em <=767 o original ESCONDE o botao de orcamento — nem na barra nem
   dentro do menu aberto (conferido abrindo o menu do celular: so Home,
   Solucoes, Sobre Nos e Contato).
   ATENCAO: isso tira do celular a acao principal de conversao. Esta aqui por
   fidelidade ao original, nao por decisao de produto — se o cliente quiser o
   botao no celular, basta remover este bloco. */
@media (max-width: 767px) {
  .site-nav__cta {
    display: none;
  }
}

/* --- Mega menu de Solucoes ------------------------------------------------ */

.mega {
  position: absolute;
  top: calc(100% + 1.25rem);
  left: 50%;
  z-index: var(--z-dropdown);
  width: min(90vw, 760px);
  padding: var(--sp-md);
  transform: translateX(-50%);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--shadow-raised);
}

.mega[hidden] {
  display: none;
}

.mega__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega__list a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3xs) var(--sp-sm);
  padding: var(--sp-2xs) var(--sp-xs);
  border-radius: var(--r-field);
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.mega__list a:hover {
  background: var(--c-lime-pale);
}

.mega__list img {
  grid-row: span 2;
  width: 48px;
  height: auto;
  align-self: start;
}

.mega__name {
  font-weight: var(--fw-bold);
  color: var(--text-accent);
}

.mega__desc {
  font-size: var(--fs-sm);
  color: var(--text-body);
}

/* --- Botao de menu no celular --------------------------------------------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* MEDIDO: 33x33 com fundo verde e raio de 3px, tracos brancos de 22px. O meu
     era 44x44 transparente com tracos lima de 26 — outro objeto na barra. */
  position: relative;
  width: 33px;
  height: 33px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--c-green);
  color: var(--c-white);
  cursor: pointer;
}

/* O desenho fica com os 33px do original, mas a AREA DE TOQUE vai a 44 por
   fora, invisivel: o alvo recomendado pela WCAG 2.5.5 sem mover um pixel do
   layout. */
.nav-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.nav-toggle__bar {
  display: block;
  /* MEDIDO: o icone do original tem 22px dentro do quadrado verde, em branco. */
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  background: var(--bg-hero);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  /* MEDIDO: a coluna de texto e 50% DO CONTEINER, com vao de 32 e a imagem no
     resto (600 + 32 + 568 em 1200). Nao e 1fr/1fr — com isso a coluna sai com
     584 e o subtitulo quebra em outro lugar. Tambem nao e 600 FIXO: em 1025,
     onde o conteiner encolhe para 1025, o original da 513 e os 600 fixos
     deslocavam as quatro pilulas do hero. */
  grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  min-height: 700px;
  /* MEDIDO em 6 larguras, e sao TRES degraus, nao um valor: a folga do topo do
     hero ate o h1 e 96 acima de 1024, 64 entre 768 e 1024, e 48 abaixo de 768.
     As trocas caem em 1025 e 768, exatas.

     Eu tinha 96 fixo — medido so no desktop, o erro classico de "medido numa
     largura". No tablet o h1 nascia 32px baixo e no celular 48px, e como o hero
     abre TODAS as paginas, esse deslocamento empurrava a pagina inteira: era o
     maior termo isolado da deriva vertical acumulada. */
  padding: 96px 0 73px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero__inner {
    padding-top: 64px;
  }
}

@media (max-width: 767px) {
  .hero__inner {
    padding-top: 48px;
  }
}

.hero__title {
  margin-bottom: 20px; /* medido: vao uniforme de 20px entre os blocos do hero */
}

.hero__lead {
  /* MEDIDO: 28px / 33,6px (1,2), quebrando em 2 linhas dentro de 536px. */
  max-width: 536px;
  margin-bottom: 20px;
  color: var(--text-on-green);
  font-size: var(--fs-destaque);
  font-weight: 200; /* medido */
  line-height: 1.2;
}

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* medido: pilula 1 em x=360 e pilula 2 em x=668, ambas 288px */
  margin-bottom: 20px;
}

.pill {
  /* MEDIDO: 288px no desktop, mas fora dele a pilula PREENCHE a linha — 338
     numa faixa de 704 (duas por linha) e 358 numa de 358 (uma por linha).
     Travada em 288 ela deixava 50px de sobra no tablet. */
  flex: 1 1 288px;
  max-width: 288px;
  display: flex;
  align-items: center;
  gap: 16px; /* medido: texto em x=76, sobrando 192px exatos ate o recuo direito */
  min-height: 72px;
  /* MEDIDO: 10px em cima/baixo, 20 a direita e 10 a esquerda — nao 12/24/12. */
  padding: 10px 20px 10px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--text-body);
  font-size: var(--fs-mini); /* medido: 18px em 1920, 16px no celular */
  line-height: 1;
}

/* MEDIDO: fora do desktop a pilula perde o teto e ocupa a coluna inteira — mas
   o TEXTO dela continua alinhado a esquerda (x=76 em todas as larguras). Sem
   isto ele herdava a centralizacao que o hero recebe em <=1024. */
@media (max-width: 1024px) {
  .pill {
    max-width: none;
    text-align: start;
  }
}

.pill__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 50px; /* medido */
  height: 50px;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--c-white);
}

.hero__features {
  display: grid;
  /* MEDIDO: 4 colunas que PREENCHEM a caixa, com 20px de vao — 126px cada numa
     caixa de 600 (1920) e 152 numa de 704 (768). Fixas em 126px elas ficavam
     26px estreitas no tablet. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--bg-card);
  /* A borda inferior escura existe no original: e volume, nao sombra. */
  border-bottom: 8px solid var(--c-dark);
}

.feature {
  display: grid;
  /* MEDIDO no no de texto do original: 17,312px / 20,7744px, CENTRALIZADO.
     Uma medicao anterior pegou o elemento errado (um wrapper) e indicou
     16px/24px alinhado a esquerda — dai a necessidade de medir o pai do NO DE
     TEXTO, e nao "o menor elemento que contem a frase". */
  justify-items: center;
  gap: var(--sp-2xs);
  text-align: center;
  font-size: var(--fs-texto);
  line-height: 1.2;
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--c-white);
}

.hero__art {
  justify-self: end;
  /* MEDIDO: a base da imagem coincide com a base do HERO (795px), nao com a
     base da area de conteudo (722px) — ela atravessa o padding inferior.
     Centralizada ou apenas alinhada ao fim da linha, sobe 73px e o conjunto
     inteiro parece deslocado. */
  align-self: end;
  margin-bottom: -73px;
}

.hero__art img {
  width: min(100%, 568px);
  height: auto;
}

/* MEDIDO: na faixa do tablet o original AUMENTA a imagem do hero para 800px
   (com teto de 100%) — 800 em 1024 e 900, e 704 em 768, onde o container e
   menor que 800. Travada em 568 ela ficava 232px menor justamente onde o hero
   passa a ocupar a largura toda. Abaixo de 768 volta a acompanhar o container. */

/* MEDIDO em 12 larguras: abaixo de 768 o original acompanha o container SEMPRE
   (735 em 767, 668 em 700, 568 em 600, 448 em 480, 358 em 390). O `min(100%,
   568px)` da regra base só coincide com isso de 600 para baixo — entre 601 e 767
   o container é maior que 568 e o teto morde: em 767 a imagem saía 735->568, ou
   157px mais baixa, e esse era o maior desvio vertical da home (o vão até
   "Nossos clientes" ia de 822 para 665). A afirmação "abaixo de 768 min(100%,
   568) já fazia isso" tinha sido conferida em 600/480/390, não em 767. */
@media (max-width: 767px) {
  .hero__art img {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero__art img {
    width: min(100%, 800px);
    /* MEDIDO: centralizada na coluna — x=112 num container de 960 com imagem de
       800, e x=50 num de 836. Encostada a esquerda ela desalinhava do titulo,
       que nessa faixa tambem passa a ser centralizado. */
    display: block;
    margin-inline: auto;
  }
}

/* --- Cartoes de avaliacao (Google) ---------------------------------------
   Ficam ACIMA da faixa de logotipos, como no original.

   Colunas: o widget do original nao fixa numero — ele divide a largura por
   cartoes de ~300px (data-review-target-width="300"), o que da 4 no desktop
   largo. Reproduzido com breakpoints no slideshow-init (4 / 3 / 2 / 1).

   ATENCAO: ao contrario do resto desta folha, os valores abaixo saem das
   CAPTURAS do site em producao, nao do estilo computado — o widget do original
   nao monta em navegador headless, entao os comparadores nao conseguem medi-lo.
   Confira em navegador real antes de tratar qualquer numero daqui como medido.
   -------------------------------------------------------------------------- */

.reviews {
  margin-block: var(--sp-lg) var(--sp-xl);
}

.reviews__slider {
  /* Espaco para as setas, que no original ficam sobre as bordas laterais. */
  padding-inline: var(--sp-lg);
  padding-bottom: var(--sp-lg);
}

/* Cartoes de altura igual. O original chega nisso reservando area de texto
   fixa (ti-review-text-mode-scroll, ~205px de cartao na captura de 1389px):
   comentario longo rola dentro do cartao em vez de esticar a linha inteira. */
.reviews__slider .swiper-wrapper {
  align-items: stretch;
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  height: auto;
  min-height: 200px;
  padding: var(--sp-sm);
  background: var(--c-white);
  border-radius: var(--r-logo);
  box-shadow: 0 2px 8px rgba(40, 40, 40, 0.1);
  font-family: var(--font-body);
}

.review__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
}

.review__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Sem foto, monograma com a inicial — e o que o proprio Google faz. */
.review__avatar--initial {
  display: grid;
  place-items: center;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--fw-semi);
  line-height: 1;
}

.review__who {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.review__name {
  overflow: hidden;
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review__date {
  color: #6b6b6b;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Empurra o "G" para a direita do cabecalho, como no original. */
.review__source {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.review__stars {
  display: flex;
  gap: 1px;
  margin: 0;
}

.review__star {
  fill: #fbbc05;
}

.review__star--off {
  fill: rgba(40, 40, 40, 0.2);
}

.review__text {
  /* Teto com rolagem, como o original (ti-review-text-mode-scroll). Avaliação é
     texto de terceiro, de tamanho imprevisível: sem isto um comentário longo
     estica o cartao e, como a linha e stretch, estica os quatro. */
  overflow-y: auto;
  max-height: 6.5em;
  margin: 0;
  color: var(--text-body);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* --- Sem JavaScript ------------------------------------------------------
   O Swiper esconde o transbordo e da 100% de largura a cada slide: sem JS
   apareceria UM cartao e os outros nove ficariam inalcancaveis. Antes de
   `swiper-initialized` a linha vira uma faixa rolavel, e as setas somem — seta
   que nao navega e affordance falsa, mesma regra ja aplicada aos controles da
   galeria de produto. */
.reviews__slider:not(.swiper-initialized) {
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

/* `display: flex` aqui e nao herdado do Swiper de proposito: a folha dele e
   pedida no MEIO do body, depois desta secao ja ter sido analisada. Sem esta
   regra a linha nasce empilhada — medido: 2032px de altura contra os 200px
   finais, um salto de ~1830px na cara de quem esta lendo. Vale tambem para o
   caso de a folha do Swiper simplesmente nao chegar. */
.reviews__slider:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 24px;
}

.reviews__slider:not(.swiper-initialized) .review {
  flex: 0 0 auto;
  width: min(300px, 78vw);
  scroll-snap-align: start;
}

.reviews__slider:not(.swiper-initialized) .swiper-button-prev,
.reviews__slider:not(.swiper-initialized) .swiper-button-next {
  display: none;
}

.reviews__source-link {
  margin: var(--sp-xs) 0 0;
  font-size: var(--fs-sm);
  text-align: center;
}

/* Setas e bolinhas do Swiper na linguagem do tema (o padrao vem azul). */
.reviews__slider .swiper-button-prev,
.reviews__slider .swiper-button-next {
  width: 32px;
  height: 32px;
  color: var(--c-ink);
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(40, 40, 40, 0.18);
}

.reviews__slider .swiper-button-prev::after,
.reviews__slider .swiper-button-next::after {
  font-size: 13px;
  font-weight: var(--fw-bold);
}

.reviews__slider .swiper-pagination-bullet-active {
  background: var(--c-green);
}

/* --- Faixa de logotipos de clientes --------------------------------------
   MEDIDO no original: nao e uma imagem parada — e um carrossel infinito de
   25s. A tira tem 1347px, aparece duplicada (2694px no total) para o laco nao
   ter emenda, e transborda o container de 1200px ate sangrar na tela. Foi por
   isso que os logotipos apareciam em posicoes diferentes a cada captura.
   -------------------------------------------------------------------------- */

.marquee {
  /* MEDIDO: a faixa comeca na BORDA DO CONTAINER (x=120 num viewport de 1440) e
     sangra so para a DIREITA, ate a borda da tela. Eu sangrava para os dois
     lados, e a tira comecava em x=0: 120px de deslocamento numa imagem de
     1347px de largura, nas DUAS marquees da home. Nenhum comparador de DOM
     enxergava — a caixa tinha o tamanho certo, so a origem estava errada. */
  width: calc(50% + 50vw);
  margin-inline: 0 calc(50% - 50vw);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: rolar-logos 25s linear infinite;
}

.marquee__item {
  width: 1347px;
  max-width: none;
  height: 66px;
  flex: 0 0 auto;
}

/* REMEDIDO em 7 larguras, e a regra antiga (1536x75 abaixo de 1025) errava nas
   duas pontas: em 1024 o original ainda usa os 1347x66 do desktop, e abaixo de
   768 a tira passa a ser proporcional a TELA — 400vw, conferido em tres larguras
   (1560 em 390, 2400 em 600, 3068 em 767; a altura acompanha, 20vw). Os 1536x76
   valem na faixa do tablet. */
@media (min-width: 768px) and (max-width: 1023px) {
  section[aria-labelledby='tit-clientes'] .marquee__item {
    width: 1536px;
    height: 76px;
  }
}

@media (max-width: 767px) {
  section[aria-labelledby='tit-clientes'] .marquee__item {
    width: 400vw;
    height: 20vw;
  }
}

@keyframes rolar-logos {
  from { transform: translateX(0); }
  /* -50% = exatamente uma copia: o ponto em que a segunda assume a posicao da
     primeira e o laco reinicia sem salto. */
  to { transform: translateX(-50%); }
}

/* Sem movimento: a faixa para e fica legivel, em vez de sumir. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* --- Numeros -------------------------------------------------------------- */

.stats {
  border-radius: var(--r-card);
  background: var(--bg-card-lime);
  /* MEDIDO: o recuo lateral e ESCALONADO, nao percentual — 160px no desktop
     (conteudo de 880 dentro de 1200), 32 no tablet e 16 no celular. Com
     min(160px, 13,3%) ele dava 94px em 768 e 48 em 390, apertando o titulo a
     ponto de ele quebrar numa linha a mais (62px de altura contra 31). */
  padding: 2rem 160px;
  box-shadow: var(--shadow-card); /* medido: a caixa dos numeros tem sombra */
}

@media (max-width: 1024px) {
  .stats {
    padding-inline: 32px;
  }
}

@media (max-width: 767px) {
  .stats {
    padding-inline: 16px;
  }
}

.stats__title {
  margin-bottom: var(--sp-md);
  text-align: center;
}

.stats__grid {
  /* MEDIDO: as colunas NAO sao iguais — cada uma tem a largura do proprio
     texto (239, 228 e 280), distribuidas com space-between dentro dos 880px.
     Com tres colunas iguais de 240 o terceiro rotulo ("Clientes preferem
     autoatendimento", 280px) quebra em duas linhas, e no original ele cabe
     numa so. */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-md);
}

.stat__value {
  /* MEDIDO em 11 larguras: o numero e COMMISSIONER (nao Geologica) e segue
     40px + 2,72vw — 92,224px em 1920, 67,85 em 1024, 60,89 em 768 e 48,70 em
     320. Eu tinha 52px fixos ate 900px e uma curva propria abaixo disso: o
     numero saia 40% menor e a caixa toda fechava 42px mais baixa. */
  font-family: var(--font-body);
  font-size: clamp(3.044rem, 2.5rem + 2.72vw, 5.764rem);
  font-weight: 900;
  line-height: 1;
  /* MEDIDO: o numero e ESCURO (rgb(40,40,40)) e centralizado — nao verde nem
     alinhado a esquerda. Eu troquei os dois ao ajustar o tamanho. */
  text-align: center;
  color: var(--text-heading);
}

.stat__label {
  margin-top: 6px; /* medido: a caixa fecha em 243px com este valor */
  font-size: var(--fs-texto); /* medido: 17,312px / 20,7744px */
  line-height: 1.2;
}

/* MEDIDO: nesta faixa o original CENTRALIZA o rótulo dentro da própria caixa —
   em 1024 o texto de 225 numa caixa de 269 começa em +22 (exatamente a metade
   dos 44 de sobra), e o mesmo vale em 1000 (+18), 950 (+11), 900 (+4) e 875 (0).
   Alinhado ao início, ele saía 22px à esquerda em 1024 e 4px em 900.
   O limite inferior é 875 porque é onde a medição para de ser conclusiva: de 870
   para baixo o texto quebra em duas linhas, o recuo medido é 0 e o retângulo do
   Range deixa de provar o alinhamento. Em 768/767 e abaixo, o original alinha ao
   início — e ali o tema já batia. */
@media (min-width: 875px) and (max-width: 1024px) {
  .stat__label {
    text-align: center;
  }
}

/* MEDIDO: na faixa do tablet os TRES numeros continuam lado a lado (x=59, 285
   e 507 numa area de 640) — os rotulos e que quebram em duas linhas. Com
   flex-wrap livre o terceiro descia para uma segunda fileira e a caixa crescia
   60px. */
@media (min-width: 768px) and (max-width: 1024px) {
  .stats__grid {
    flex-wrap: nowrap;
  }
}

@media (max-width: 767px) {
  .stats__grid {
    flex-direction: column;
  }
}

/* --- Vantagens ------------------------------------------------------------ */

.advantages {
  position: relative;
}

.advantages__intro {
  position: relative;
  display: grid;
  /* MEDIDO: o texto ocupa 62% da area util (704 de 1136 em 1920), nao o
     restante todo — sobram 132px de folga a direita. */
  grid-template-columns: 300px 60.3%; /* 704 de 1168 */
  /* MEDIDO: a faixa lima tem 272px, nao 336 — a ilustracao (336px) SANGRA 32px
     acima e 32px abaixo dela, invadindo a faixa verde de baixo. Com
     overflow:hidden e align-items:end a figura ficava presa dentro da caixa,
     com uma folga de 32px sobrando embaixo, e o texto encostava na base.
     No original o texto e centralizado (91px acima do titulo, 78 abaixo do
     paragrafo, numa caixa de 272). */
  align-items: center;
  gap: var(--sp-lg);
  padding: 0 var(--sp-lg) 0 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--bg-card-lime);
  box-shadow: var(--shadow-card); /* medido */
}

/* Padrao "go" atras da ilustracao: no original e um ::before em 10% de opacidade. */
.advantages__intro::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 300px;
  background: url('../img/formas.png') no-repeat center / 440%;
  opacity: 0.1;
  pointer-events: none;
}

.advantages__art {
  position: relative;
  align-self: end;
  /* MEDIDO: 32px de sangria de cada lado (--sp-lg). Com --sp-2xl, que e 64px,
     a figura vazava o dobro e a faixa lima encolhia de 272 para 208. */
  margin-block: calc(var(--sp-lg) * -1);
  /* MEDIDO: a ilustracao comeca em x=344, 16px a esquerda do container. */
  margin-left: -16px;
}

.advantages__art img {
  width: 300px;
  height: auto;
}

.advantages__text {
  position: relative;
  /* MEDIDO: 32px, nao 24 — o titulo do bloco cai em 1868 num container que
     comeca em 1823 (32 de recuo mais 13 da propria caixa do titulo). */
  padding-block: 32px;
}

.advantages__text p {
  margin-top: var(--sp-sm);
  max-width: 62ch;
}

.advantages__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  /* MEDIDO: 24px entre as linhas e 15 entre as colunas — nao 15 nos dois. */
  gap: 24px 15px;
  /* MEDIDO: 48 em cima, 64 nos lados e 32 embaixo. Com 64 uniforme a grade
     fechava 19px mais alta e o conjunto descia. */
  padding: 48px 64px 32px;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--c-green);
}

/* MEDIDO em seis larguras: abaixo de 1024 o original mantem SEMPRE 2 colunas —
   inclusive em 390 — com cada card ocupando 45% da area util e o par
   centralizado: 403 de 896 (1024), 347 de 772 (900), 288 de 640 (768), 241 de
   536 (600), 187 de 416 (480) e 147 de 326 (390). O auto-fit dava 4 colunas em
   1024, 3 em 900 e 1 no celular — outra leitura em cada largura. */
@media (max-width: 1024px) {
  .advantages__grid {
    grid-template-columns: repeat(2, 45%);
    justify-content: center;
    gap: 24px 12px;
    padding: 32px;
  }
}

/* MEDIDO: no celular o recuo da grade vira 64 em cima, 16 nos lados e 32
   embaixo. */
@media (max-width: 767px) {
  .advantages__grid {
    padding: 64px 16px 32px;
  }
}

.advantage {
  display: grid;
  justify-items: center;
  /* MEDIDO: no original TODOS os cards tem o titulo em y=107 e a descricao em
     136, independente de quantas linhas o texto tenha — o conteudo e ancorado
     no topo com vaos fixos e a sobra fica embaixo. Sem align-content:start as
     linhas da grade esticam e a sobra e distribuida entre elas, o que fazia
     cada card posicionar o texto num lugar diferente. */
  align-content: start;
  gap: 10px;
  padding: 1.6rem; /* medido: 25,6px em todos os lados, nao 24/16 */
  border-radius: var(--r-card);
  background: var(--bg-card-lime-pale);
  box-shadow: var(--shadow-advantage); /* medido */
  text-align: center;
}

/* MEDIDO: o recuo do card tem TRES valores — 25,6 no desktop, 32 na faixa do
   tablet (o icone nasce em y=32) e 16 no celular (y=16).
   Estas regras precisam vir DEPOIS de .advantage: @media nao acrescenta
   especificidade, entao a base declarada adiante no arquivo venceria. */
@media (min-width: 768px) and (max-width: 1024px) {
  .advantage {
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .advantage {
    padding: 16px;
  }
}

.advantage__icon {
  color: var(--text-accent);
}

/* MEDIDO: do fim do icone (y=86) ao titulo vao 21px no original, contra os 14
   que o vao de 8px da grade produz aqui. O vao ate a descricao ja bate (8px nos
   dois), entao o ajuste e so nesta linha — subir o gap da grade quebraria a
   outra. */
.advantage h3 {
  /* MEDIDO pelas CAIXAS, nao pelo texto: no original o titulo ocupa 109..127 e
     a descricao comeca em 137. Com o icone terminando em 86 e vao de 10, a
     margem que poe o titulo em 109 e 13 — e o vao de 10 leva a descricao a 137
     sozinho. */
  margin-top: 13px;
}

.advantage p {
  font-size: var(--fs-texto); /* medido: 17,312px / 20,7744px */
  line-height: 1.2;
}

/* --- Cartoes de solucao --------------------------------------------------- */

.solutions__title {
  margin-bottom: var(--sp-lg);
  text-align: center;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* MEDIDO: 30px nos DOIS eixos. A largura ja estava certa (3 x 380 + 2 x 30 =
     1200), mas o vao entre as LINHAS era 60 e afastava a segunda fileira em
     30px — nas tres larguras conferidas. */
  gap: 30px;
}

.solution {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--c-bone);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

/* --- O que é clicável no card ----------------------------------------------
   No site em produção só a IMAGEM e o BOTÃO levam à página do produto; o título
   e o texto não. É o que o tema reproduz: `services/_items.php` envolve a foto
   num <a> e o "Saiba Mais" é o outro link.

   A cópia estática ia além disso a pedido do dev: o link do botão se esticava
   por cima do card todo (`::after` com `inset: 0`), tornando o card inteiro
   clicável. Aqui isso foi REVERTIDO pela regra 1 do porte (na dúvida, vale o
   site online). Para trazer de volta, são estas quatro linhas:

       .solution__body .btn::after { content: ''; position: absolute; inset: 0;
                                     z-index: var(--z-raised); }
       .solution__body .btn:hover, .solution__body .btn:active { transform: none; }

   E aí valem as duas armadilhas que custaram caro na cópia estática:
   1. o link esticado NÃO pode ter `transform` — um transform faz do elemento o
      bloco de contenção dos seus descendentes absolutos, inclusive do próprio
      `::after`, e a camada de clique colapsa do tamanho do card para o do botão
      no meio do gesto (mousedown no link, mouseup no <li>, click despachado no
      ancestral comum: o cursor vira mão, o elementFromPoint aponta o link, e o
      clique não navega);
   2. o texto dentro do card deixa de ser selecionável, porque a camada do link
      fica por cima.

   `_source/tests/card-clicavel.mjs` cobre o comportamento ESTICADO, então hoje
   ele acusa "clique em titulo/texto" — é o esperado: o teste guarda o desvio da
   cópia estática, não o original.
   -------------------------------------------------------------------------- */

/* O card inteiro reage ao ponteiro, senao a area clicavel fica invisivel. */
.solution:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

.solution:hover .btn {
  background: var(--c-green-dark);
}

/* O foco de teclado cai no link, mas quem precisa aparecer e o CARD. */
.solution:has(.btn:focus-visible) {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 3px;
}

.solution__head {
  display: grid;
  /* MEDIDO no original: recuo de 20px e a foto SEMPRE em y=64, em qualquer
     largura — mesmo com a marca medindo 35px em 1920, 31 em 768 e 33 em 390.
     Logo a primeira faixa tem altura fixa (35px) e o vao e de 9px; nao e o
     tamanho da marca que empurra a foto. Com 24/24 a foto nascia em y=95 e
     levava o titulo do card 51px para baixo. */
  grid-template-rows: 35px auto;
  align-items: start;
  gap: 9px;
  padding: 20px;
}

.solution__brand {
  /* MEDIDO: a marca acompanha a largura do CARD — 95px num card de 380, 84 num
     de 337 e 90 num de 358: exatamente 25% em todos. A porcentagem sozinha
     incide sobre a area interna (card menos os 20px de recuo de cada lado) e
     dava 85, entao os 40px voltam para a conta. */
  width: calc((100% + 40px) * 0.25);
  height: auto;
  /* Sem isto a imagem e inline e o espaco do descendente da linha some junto
     com ela: a faixa media 47px em vez de 35 e a foto descia 12px. */
  display: block;
}

.solution__shot {
  /* MEDIDO: a foto recua 12px A MAIS que o cabecalho de cada lado — a marca
     comeca em x=20 e a foto em x=32, nas duas larguras conferidas. Como
     max-width fixo de 316px, ela acertava so em 1920 e escapava no tablet. */
  width: calc(100% - 24px);
  height: 320px;
  object-fit: contain;
  margin-inline: auto;
}

.solution__body {
  display: grid;
  /* MEDIDO no original: recuo de topo 28px (o titulo cai em y=432 num
     cabecalho que termina em 404) e 40px entre titulo e descricao.
     A DESCRICAO ocupa altura fixa de 92px: com duas linhas (48px) sobram 44
     ate o botao e com tres (72px) sobram 20 — 92 nos dois casos, e o botao cai
     sempre em y=592. E o que faz os cards da fileira terem a mesma altura (674)
     em vez de crescerem com o texto; com 40px de vao fixo o card ia a 730. */
  /* MEDIDO elemento a elemento no original: e uma coluna flex com gap de 20px
     e ALTURA MINIMA POR FATIA — titulo 48 (vai a 56 quando quebra em duas
     linhas), descricao 72, botao 50. E isso que faz o cartao de titulo longo
     crescer so 8px em vez dos 28 da linha extra. Eu emulava com gap 0, recuo de
     40 no paragrafo e fatia de 92: dava a altura certa no titulo de uma linha e
     28px a mais no de duas. */
  gap: 20px;
  padding: 28px 32px 32px;
  background: var(--bg-card-lime);
}

.solution__body > :first-child {
  min-height: 48px;
}

.solution__body p {
  /* MEDIDO: a descricao do card de solucao e Roboto 16/24 no original — nao
     Commissioner. E um dos dois lugares onde a Roboto aparece de verdade. */
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  /* MEDIDO: a fatia da descricao tem 72px de altura minima — duas linhas (48) e
     tres (72) ocupam o mesmo espaco, e o vao ate o botao vem do gap de 20. */
  min-height: 72px;
}

.solution__body .btn {
  /* Sem margem: o vao ate o botao ja esta na altura fixa da descricao. Os 8px
     que havia aqui vinham do tempo em que o corpo usava gap uniforme. */
  margin-top: 0;
}

/* --- Integracao com PDVs -------------------------------------------------- */

.pdv {
  position: relative;
  padding: 64px 32px 32px; /* medido */
  border-radius: var(--r-card);
  /* Veu medido no original: rgb(31,61,50) a 70%. Nao e enfeite — e o que
     mantem o titulo branco legivel sobre as partes claras da foto. */
  /* DUAS declaracoes de proposito: `image-set()` com `type()` e recente (Chrome
     113, Safari 17, Firefox 113) e navegador que nao entende DESCARTA a
     declaracao inteira — o veu iria junto e o titulo branco ficaria sobre nada.
     A primeira linha e o piso em webp; a segunda sobrescreve onde ha suporte.
     O avif ja estava no repositorio, sem ninguem pedir: 63,5 -> 51,7 KB. */
  background: linear-gradient(var(--veu-foto), var(--veu-foto)),
    url('../img/fotobg.webp') center / cover no-repeat;
  background: linear-gradient(var(--veu-foto), var(--veu-foto)),
    image-set(url('../img/fotobg.avif') type('image/avif'),
              url('../img/fotobg.webp') type('image/webp')) center / cover no-repeat;
}

.pdv__title {
  /* MEDIDO: no DESKTOP o titulo e limitado e quebra em duas linhas (341px de
     largura, 108 de altura); em <=1024 ele ocupa a coluna inteira e passa a uma
     linha (896 de largura, 34 de altura). O 12ch fixo valia em toda largura e
     deixava o titulo com 101px de altura onde o original tem 34. */
  max-width: 13.2ch; /* medido: com 14ch "do mercado" subia para a 2a linha */
  /* MEDIDO: o titulo cai em y=88 numa caixa com 64 de recuo (24 de margem) e o
     vao dele ate a tira de logotipos e 148px, nao 32. Sem isso a caixa fechava
     96px mais baixa. */
  margin-top: 24px;
  margin-bottom: 148px;
  color: var(--c-white);
}

/* MEDIDO: fora do desktop o recuo do bloco cai para 48 em cima e o titulo perde
   a margem propria (y=56 = 48 + 8 do texto). */
@media (max-width: 1024px) {
  .pdv {
    padding: 48px 32px 32px;
  }

  .pdv__title {
    max-width: none; /* medido: ocupa a coluna inteira fora do desktop */
    margin-top: 8px; /* medido: titulo em y=56 num recuo de 48 */
    margin-bottom: 84px; /* medido: mesmo vao em 768 e em 390 */
  }
}

/* MEDIDO: no celular os lados e a base caem para 16px. */
@media (max-width: 767px) {
  .pdv {
    padding: 48px 16px 16px;
  }
}

.pdv__logos {
  /* MEDIDO: a tira recua 16px SO nas laterais (logotipo em x=48 num bloco com
     32 de recuo); no eixo vertical o recuo e zero — a caixa mede 715 e a
     imagem, 339, fecha a conta sem sobra. */
  padding: 0 16px;
  border-radius: var(--r-card);
  background: var(--bg-card);
}

.pdv__logos img {
  width: 100%;
  height: auto;
}

/* --- Segmentos ------------------------------------------------------------ */

.segments__title {
  margin-bottom: var(--sp-lg);
  text-align: center;
}

.segments__list {
  display: grid;
  /* Cada filho e uma COLUNA de 4 itens (ver o comentario no index.html).
     Breakpoints EXPLICITOS, e nao auto-fit: o original troca em 1024 e em 767
     (os pontos do Elementor), e auto-fit escolhia 3 colunas em 1024 e 2 em
     600 — outra disposicao. Onde a regra geral pediria auto-fit, aqui a
     fidelidade a quebra de proposito. */
  /* MEDIDO: no desktop as quatro colunas tem larguras DIFERENTES — 181, 161,
     174 e 156 em 1920 (a largura do conteudo de cada grupo) — e sao distribuidas
     com space-between nos 944px de area util, o que da ~91px entre elas. Com
     quatro colunas iguais de 221 e vao fixo de 20 o total fechava igual, mas
     cada grupo a partir do segundo nascia deslocado: -30, -41 e -65px. */
  grid-template-columns: repeat(4, max-content);
  gap: 20px; /* medido: 20px nos dois eixos — o vao entre LINHAS de grupos era 16 */
  padding: 32px min(128px, 10.7%); /* medido: 128px nas laterais em 1200 */
  justify-content: space-between;
  border-radius: var(--r-card);
  background: var(--bg-card-lime);
  box-shadow: var(--shadow-card);
}

.segments__col {
  display: grid;
  align-content: start;
  /* MEDIDO: passo de 55px entre itens — item de 45 (35 do icone + 10 de recuo
     inferior) mais 10 de vao. Com 16 de vao e item de 35 o passo dava 51, e a
     caixa fechava 12px mais baixa em 1920 e 60 em 390. */
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.segments__col li {
  display: flex;
  align-items: center;
  /* MEDIDO: do fim do icone ao inicio do texto sao 25,75px no original (o
     icone leva 8,75px de margem e o rotulo mais 17). Com os 12px que estavam
     aqui, TODO item do bloco ficava 13,8px a esquerda — em qualquer largura. */
  gap: 25.75px;
  padding-bottom: 10px; /* medido: o item mede 45px, nao 35 */
  /* MEDIDO: texto normal escuro, nao verde em negrito. Commissioner 17,312px
     / 20,7744px, peso 400, cor --c-ink. */
  color: var(--text-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-texto);
  line-height: 1.2;
}

/* MEDIDO: o ULTIMO item de cada coluna mede 35, nao 45 — o recuo inferior nao
   se aplica a ele, senao a caixa fecha 10px mais alta por coluna. */
.segments__col li:last-child {
  padding-bottom: 0;
}

.segments__col svg {
  flex: 0 0 auto;
}

/* MEDIDO: abaixo do desktop o original NAO estica as colunas — elas ficam com a
   largura do conteudo e o conjunto e centralizado na caixa (em 768 o grupo de
   2 colunas mede 468px numa caixa de 704 e comeca em 150; em 390 a coluna mede
   202 numa caixa de 358 e comeca em 94). Com colunas 1fr elas esticavam e todo
   item nascia colado na borda esquerda. */
@media (max-width: 1024px) {
  .segments__list {
    justify-content: center; /* medido: fora do desktop o conjunto e centralizado */
    /* MEDIDO em seis larguras: no tablet a coluna e 35% da area de conteudo da
       caixa, nao a largura do conteudo. 1024 -> 0,35 x 896 = 313,6 (medido
       313,594); 900 -> 270,2 (270,188); 768 -> 224 (224). Com max-content ela
       dava 172 e o conjunto, por ser centralizado, nascia 59px a direita. */
    grid-template-columns: repeat(2, 35%);
    /* MEDIDO: o recuo lateral da caixa e escalonado no original — 128px no
       desktop, 32 no tablet e 16 no celular. Como percentual (10,7%) ele dava
       110px em 1024 e empurrava os grupos para a direita. */
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .segments__list {
    /* MEDIDO em tres larguras: no celular a coluna e 62% da area de conteudo.
       600 -> 0,62 x 536 = 332,3 (medido 332,312); 480 -> 257,9 (257,906);
       390 -> 202,1 (202,109). */
    grid-template-columns: 62%;
    padding: 32px 16px;
  }
}

/* --- Faixa escura --------------------------------------------------------- */

.cta-dark {
  position: relative;
  background: var(--c-dark);
  overflow: hidden;
}

.cta-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/formas.png') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}

.cta-dark__inner {
  position: relative;
  display: grid;
  /* MEDIDO: as colunas NAO sao meio a meio — o titulo ocupa 420px e o texto
     756 num container de 1200 (35% e 63%), com 20px de vao. Com auto-fit em
     1fr cada uma ficava com 584 e o paragrafo quebrava em tres linhas em vez
     de duas, mudando a altura da faixa inteira. */
  grid-template-columns: 35% 63%;
  align-items: center;
  gap: 20px;
  /* medido: faixa de 379px com titulo de 163px — 104 em cima, 112 embaixo */
  padding-block: 104px 112px;
}

/* MEDIDO: abaixo do desktop a faixa vira uma coluna so (titulo e texto ocupam
   os 704px inteiros em 768) e o recuo vertical despenca de 104/112 para 40/32 —
   sao 144px de altura a mais na faixa inteira, em 1024, 768 e 390. */
@media (max-width: 1024px) {
  .cta-dark__inner {
    grid-template-columns: 1fr;
    padding-block: 40px 32px;
    gap: 36px; /* medido: do fim do titulo ao paragrafo, em 1024 e em 768 */
  }

  /* MEDIDO: 34px do paragrafo ao botao quando a faixa empilha (o meu dava 24). */
  .cta-dark__inner .btn {
    margin-top: 10px;
  }
}

/* MEDIDO: no celular os dois vaos encolhem 10px — 26 do titulo ao paragrafo e
   24 dele ao botao, contra 36 e 34 do tablet. */
@media (max-width: 767px) {
  .cta-dark__inner {
    gap: 26px;
  }

  .cta-dark__inner .btn {
    margin-top: 0;
    /* MEDIDO: no celular o botão ocupa a LARGURA INTEIRA do container — 735 em
       767, 568 em 600 e 358 em 390 —, com o rótulo centralizado dentro dele.
       Antes daqui havia `width: fit-content`, que dava 240px: a medição que o
       justificava era só o x=16 da borda esquerda, e esse x é o mesmo nos dois
       casos, então a largura errada passou. */
    display: flex;
    width: 100%;
    /* MEDIDO: a caixa ocupa a largura toda, mas o RÓTULO fica à esquerda — texto
       em x=36 num botão que abre em x=16, ou seja os 20px de recuo do próprio
       .btn. Centralizado ele ia para x=284 em 767 e x=95 em 390. */
    justify-content: flex-start;
  }
}

.cta-dark__title {
  color: var(--c-white);
}

.cta-dark p {
  margin-bottom: var(--sp-md);
  color: var(--c-white);
  /* MEDIDO: 28px no peso 200 (extra leve). O peso e o que da o ar do texto
     ali — em 400 ele fica pesado demais ao lado do titulo preto. */
  font-size: var(--fs-destaque);
  font-weight: 200;
  line-height: 1.2;
}

/* --- FAQ ------------------------------------------------------------------
   <details>/<summary> nativos: abrem sem JavaScript e ja sao navegaveis por
   teclado. O conteudo NUNCA fica escondido atras de uma animacao.
   -------------------------------------------------------------------------- */

.faq__title {
  margin-bottom: var(--sp-lg);
  text-align: center;
}

.faq__list {
  display: grid;
  gap: var(--sp-sm);
  /* MEDIDO: a caixa e 70% da largura, com teto de 840px — conferido em quatro
     larguras (1200: 70% = 840 exato; 1280/1440/1920: presa no teto). Um
     max-width fixo sozinho errava toda a faixa de 1025 a 1199. */
  width: min(70%, 840px);
  margin-inline: auto;
}

/* MEDIDO: em <=1024 a caixa passa a ocupar a largura toda da coluna. */
@media (max-width: 1024px) {
  .faq__list {
    width: 100%;
  }
}

.faq__item {
  border-radius: var(--r-card);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* MEDIDO: 10px entre a pergunta e o marcador "+". Com 24 sobravam 260px para
     o texto num container de 318, e a pergunta de 263 quebrava em duas linhas
     onde o original usa uma. */
  gap: 10px;
  padding: 15px 20px; /* medido */
  font-size: var(--fs-faq); /* medido: 16px em 1920, 15px no celular */
  line-height: 1;
  font-weight: var(--fw-semi);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--c-white);
  line-height: 1;
}

/* MEDIDO no original (--n-accordion-icon-size): o marcador é um ícone Font
   Awesome de 15px, plus quando fechado e minus quando aberto. Aqui era o
   caractere "+" da fonte do tema com rotate(45deg) no [open] — o que desenha um
   "×", não um traço, e com outra espessura. Os dois SVGs saem sempre no HTML e o
   CSS troca qual aparece (é o que o original faz com e-closed/e-opened). */
.faq__mark-icone {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.faq__mark-icone--menos,
.faq__item[open] .faq__mark-icone--mais {
  display: none;
}

.faq__item[open] .faq__mark-icone--menos {
  display: block;
}

.faq__a {
  /* MEDIDO: do texto da pergunta ao texto da resposta sao 81px (82 no tablet).
     Conferido em tres acordeoes diferentes — FAQ da home, Informacoes
     Adicionais e Funcionamento — e nas duas larguras. Sem o recuo de topo dava
     41, e a diferenca de 40px se repetia em 56 pontos das 7 paginas. */
  /* MEDIDO nas tres larguras: o recuo lateral e 29px, nao 28, e a caixa ocupa
     a largura inteira do item. Os 2px que faltavam mudavam o ponto de quebra —
     em 768 a frase do acordeao precisa de 647px e o original tem 646, entao ele
     quebra em duas linhas e a minha cabia numa so. Sem max-width: o original
     nao tem teto de medida aqui, quem limita e o proprio item. */
  padding: 29px 29px 45px;
}

/* MEDIDO no celular. O original usa DOIS acordeoes diferentes e eles nao tem os
   mesmos recuos: o FAQ (home e /sobre-nos) fica com 36px em cima e embaixo e 29
   nas laterais; o "Mais Informacoes" das paginas de solucao cai para 19/29 e 19
   nas laterais. Medir num e aplicar nos dois deixava as respostas do FAQ 24px
   curtas em cada item. */
@media (max-width: 767px) {
  .faq__a {
    padding: 36px 29px;
  }

  .more-info__title + .faq__list .faq__a {
    padding: 19px 19px 29px;
  }
}

/* --- Contato -------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 292px 1fr;
  align-items: end;
  /* MEDIDO: 35px entre a figura e o formulario — a figura ocupa 16..308 e o
     titulo comeca em 343. Com --sp-xl (48) a coluna do formulario nascia 13px
     a direita e ficava 13px mais estreita. */
  gap: 35px;
  padding: 16px; /* medido */
  border-radius: var(--r-card);
  background: var(--bg-card-lime);
  box-shadow: var(--shadow-card);
}

/* MEDIDO em 4 larguras: o recuo do bloco NAO e 16 em todas. Na faixa do tablet o
   original abre 48 em cima e fecha 48 embaixo (contra os 16 do desktop), e no
   celular abre 32. Com 16 fixo o bloco saia 60px curto em 1024 e 768 — e como
   ele fica no fim de tres paginas, o rodape inteiro subia junto. */
@media (min-width: 768px) and (max-width: 1024px) {
  .contact {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 767px) {
  .contact {
    padding-top: 32px;
    /* MEDIDO: no celular a ilustracao tem 32px de folga ACIMA e 32 ABAIXO dela
       dentro do bloco (o botao fecha 32 antes da figura, e o bloco fecha 32
       depois). Eu tinha 3 e 16: o bloco saia 46px curto, e como ele e o ultimo
       da pagina, o rodape inteiro subia junto. */
    row-gap: 32px;
    padding-bottom: 32px;
  }
}

/* MEDIDO: no tablet a figura do contato encolhe para 235px (336 de altura) e o
   vao cai para 16px — a caixa e a mesma, o que muda e a proporcao das colunas. */
@media (min-width: 768px) and (max-width: 1024px) {
  .contact {
    /* MEDIDO: 35% da area interna nas duas pontas da faixa — 325 num card de
       928 (1024) e 235 num de 672 (768). Fixo em 235px acertava so no 768. */
    grid-template-columns: 35% 1fr;
    gap: 16px;
  }
}

.contact__art {
  align-self: end;
  margin-top: calc(var(--sp-xl) * -1);
}

.contact__art img {
  /* MEDIDO: 292px no desktop, mas na faixa do tablet a figura ACOMPANHA a
     coluna (325 em 1024, 281 em 900, 235 em 768) — travada em 292px ela ficava
     33px estreita justamente em 1024, onde a coluna e maior. */
  width: min(100%, 292px);
  height: auto;
}

/* MEDIDO: fora do desktop a figura acompanha a coluna — 325 em 1024, 235 em
   768 e a largura inteira no celular (536 numa caixa de 568). */
@media (max-width: 1024px) {
  .contact__art img {
    width: 100%;
  }
}

.contact__title {
  /* MEDIDO nos dois lados em 4 larguras: do fim do titulo ao primeiro rotulo sao
     20px, nao os 24 de --sp-md. Erra pouco, mas erra em TODA pagina que tem o
     bloco (home, sobre-nos e contato). */
  margin-bottom: 20px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* MEDIDO: o topo de cada campo cai em 1747, 1828 e 1909 — passo de 81px com
     campos de 47. Os 81 INCLUEM o rotulo e sua margem, entao o vao da grade e
     de 12px, nao 34 (ler o passo como se fosse o vao foi o erro anterior). Com
     o vao maior o formulario terminava 67px acima do original e empurrava o
     rodape de TODA pagina. */
  gap: 12px 10px;

  /* Os 80px entre o ultimo campo e o botao (o espaco do selo do reCAPTCHA) sao
     reservados em `.form__actions`, mais abaixo. */
}

.field--wide {
  grid-column: 1 / -1;
}

/* MEDIDO: na faixa do tablet o formulario mede 405px numa coluna de 421 — sao
   16px de folga a direita que o original tem e eu nao tinha, e que deslocavam a
   segunda coluna de campos em 8px. */
@media (min-width: 768px) and (max-width: 1024px) {
  .form {
    padding-right: 16px;
  }
}

.field label {
  display: block;
  margin-bottom: var(--sp-3xs);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
}

.field .req {
  color: var(--c-erro);
}

.field input,
.field select {
  width: 100%;
  /* MEDIDO: campo de 47px com recuo 6px 16px e fonte de 16px. Com 48/8/16,8 o
     campo crescia 1px e a fonte destoava do original. */
  min-height: 47px;
  padding: 6px 16px;
  font-size: 1rem;
  border: 1px solid var(--border-field);
  border-radius: var(--r-field);
  background: var(--c-white);
  color: var(--text-body);
}

.field input::placeholder {
  /* Placeholder tambem precisa de 4,5:1: o cinza padrao do navegador nao passa. */
  color: var(--text-placeholder);
  opacity: 1;
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--c-green-dark);
}

/* --- Captcha (Cloudflare Turnstile) ---------------------------------------
   Ocupa o vao que o original reserva para o selo do reCAPTCHA — mesmo lugar,
   mesma funcao. Sai VAZIO quando nao ha captcha configurado no admin, e ai o
   espaco continua reservado pela margem do `.form__actions` logo abaixo: a
   pagina tem a mesma altura com e sem widget.
   -------------------------------------------------------------------------- */
.form__captcha {
  grid-column: 1 / -1;
}

.form__captcha:empty {
  display: none;
}

/* O widget da Cloudflare mede 300x65. Nas larguras estreitas ele nao pode
   estourar a caixa do formulario e criar rolagem horizontal na pagina. */
.form__captcha iframe {
  max-width: 100%;
}

.form__actions {
  grid-column: 1 / -1;
  /* MEDIDO: entre o ultimo campo e o botao o original tem 80px, ocupados pelo
     selo do reCAPTCHA. 68 aqui + 12 do vao da grade. O espaco fica reservado
     mesmo SEM captcha configurado, porque e o que faz o formulario e tudo
     abaixo dele cair na mesma altura do original.

     A mensagem de status ja morou aqui (uma caixa branca de 256x60 no lugar do
     selo) e foi tirada de proposito: o aviso ficava ACIMA do botao, quase
     invisivel depois do clique, e disputava o lugar com o captcha. */
  margin-top: 68px;
}

/* Com o widget desenhado, o vao sai DELE: manter tambem os 68 empurraria para
   baixo o formulario inteiro e tudo o que vem depois. */
.form__captcha:not(:empty) + .form__actions {
  margin-top: 12px;
}

/* --- Mensagem do envio ----------------------------------------------------
   Depois do botao, como no site no ar ("Enviado com Sucesso." aparece abaixo do
   Enviar). Some quando vazia: nao ha nada para reservar embaixo do botao, e uma
   caixa vazia ali seria interface sem conteudo.
   -------------------------------------------------------------------------- */
.form__status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  margin-top: var(--sp-2xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.4;
}

.form__status:empty {
  display: none;
}

/* Verde ESCURO, nao o --text-accent: o verde da marca da 3,40:1 e some no cartao
   claro — foi o motivo de o aviso "praticamente nao dar para ver". O escuro ja
   existe na paleta e da 4,84:1. */
.form__status[data-state='ok'] {
  color: var(--c-green-dark);
}

.form__status[data-state='erro'] {
  color: var(--c-erro-forte);
}

/* O simbolo vem do CSS e nao do texto: o texto e do servidor (e traduzido), e
   um "v" grudado nele viraria parte da string em toda lingua. aria-hidden por
   content: leitor de tela ja anuncia o estado pelo role="status". */
.form__status[data-state='ok']::before,
.form__status[data-state='erro']::before {
  flex: 0 0 auto;
  font-size: 1.1em;
  line-height: 1;
}

.form__status[data-state='ok']::before {
  content: '\2713';   /* ✓ */
}

.form__status[data-state='erro']::before {
  content: '\26A0';   /* ⚠ */
}

/* --- Estado "enviando" do botao -------------------------------------------
   Sem isto o envio por AJAX era rapido demais para ser percebido: clicava-se e
   a confirmacao ja estava la, sem nada no meio dizendo que o site tinha ouvido.
   O JS troca o rotulo por "Enviando…", marca aria-busy e segura o estado por um
   minimo visivel (ver app.js) — quem le por teclado ou leitor de tela recebe o
   mesmo aviso, e o botao desabilitado impede o envio duplo.
   -------------------------------------------------------------------------- */
.btn[aria-busy='true'] {
  cursor: progress;
  opacity: 0.85;
}

/* O icone de aviao vira um anel girando, no MESMO lugar — o botao nao muda de
   largura no meio do clique. O alvo e o embrulho do icone por [aria-hidden], e
   nao uma classe nova: o tema ja tem `.btn__icon` (o circulo branco de 34px dos
   botoes de seta) e uma segunda classe a um caractere de distancia seria
   armadilha para quem vier depois.

   prefers-reduced-motion para a volta e deixa o anel parado: o estado continua
   legivel sem movimento. */
.btn[aria-busy='true'] > [aria-hidden='true'] svg {
  display: none;
}

.btn[aria-busy='true'] > [aria-hidden='true']::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 0.6s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy='true'] > [aria-hidden='true']::after {
    animation: none;
  }
}

/* --- Rodape --------------------------------------------------------------- */

.site-footer {
  position: relative;
  /* MEDIDO nos dois lados: 16px no desktop e no celular, 50 na faixa do tablet. */
  padding-top: 16px;
  background: var(--bg-footer);
  color: var(--c-white);
}

/* MEDIDO em 3 larguras: o bloco do divisor tem 70px de altura (um simbolo de 50
   centralizado, com 10 de folga em cima e embaixo) e 20px ate o que vem abaixo —
   em TODAS as larguras, nao so no desktop. */
.site-footer__rule {
  display: grid;
  place-items: center;
  position: relative;
  padding-block: 10px;
  margin-bottom: 20px;
}

/* MEDIDO: na faixa do tablet o rodape abre com 50px de recuo (contra 16 nas
   outras duas faixas) — o divisor comeca em y+50 la e em y+16 no desktop e no
   celular. */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer {
    padding-top: 50px;
  }
}

.site-footer__rule::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--c-green);
}

.site-footer__rule img {
  position: relative;
  /* MEDIDO: o distintivo sobre a linha e 50x50 no original (um SVG dentro do
     divisor). Com width:48 + padding e box-sizing:border-box a marca era
     espremida para 48x16 — sobrava uma lasca no lugar do simbolo. O
     content-box faz os 50px valerem para a IMAGEM e o padding so mascarar a
     linha atras dela. */
  box-sizing: content-box;
  width: 50px;
  height: 50px;
  padding-inline: var(--sp-sm);
  background: var(--bg-footer);
}

/* MEDIDO em 9 larguras: o original é FLEX com gap de 20px e colunas dimensionadas
   pelo conteúdo, mantendo as 4 colunas na mesma linha de 1920 até 768 (grade de
   960 no desktop, 822 em 1027, 704 em 768). Em <=767 cada coluna passa a ocupar a
   largura inteira (735 e 358) e o texto vai para CENTRALIZADO.

   Aqui havia `grid-template-columns: repeat(auto-fit, minmax(190px, 1fr))` — o
   navegador escolhia a quebra, e ela caía em pontos que o original não tem: em
   1027 a coluna "Suporte" descia para uma segunda linha, em 900 e 768 as colunas
   se rearranjavam, e em 390 tudo ficava à esquerda em vez de centrado. É a
   armadilha "auto-fit numa grade que o original quebra em ponto fixo" que o
   método de cópia fiel documenta. */
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: var(--sp-lg);
}

/* MEDIDO no desktop: as quatro colunas de menu são IGUAIS — o passo entre elas é
   243px constante (600, 843, 1086, 1330 em 1920), ou seja 223 de coluna + 20 de
   vão, e as quatro somam os 960 da grade. A marca fica fora dessa divisão, com a
   largura do próprio conteúdo. Dimensionadas por conteúdo, minhas colunas davam
   passos desiguais (137, 260, 254). */
/* MEDIDO: no desktop a coluna da marca ocupa 220px — as quatro de menu somam os
   960 restantes do .wrap de 1200 (223 cada + 20 de vão). Deixada com a largura do
   conteúdo ela media 127 (o tamanho do símbolo), sobrava espaço para as outras e
   o bloco inteiro começava 93px à esquerda do lugar. */
.site-footer__brand {
  flex: 0 0 auto;
}

/* MEDIDO: do fim da fileira de icones ao primeiro titulo de coluna sao 52px na
   faixa do tablet e 36 no celular. O vao da grade sozinho da 20, entao a marca
   fecha com 32 e 16 respectivamente. */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer__brand {
    margin-bottom: 32px;
  }
}

@media (max-width: 767px) {
  .site-footer__brand {
    margin-bottom: 16px;
  }
}

@media (min-width: 1025px) {
  .site-footer__brand {
    flex: 0 0 220px;
  }
}

/* MEDIDO: de 1024 para baixo a marca ocupa a LINHA INTEIRA e as quatro colunas
   descem para a linha seguinte, começando na calha (x=32 em 1024, 32 em 768). Com
   ela em linha, as colunas começavam em 804 e 612. */
@media (max-width: 1024px) {
  .site-footer__brand {
    flex: 1 1 100%;
  }
}

.site-footer__col {
  flex: 1 1 0;
  min-width: 0;
}

/* MEDIDO: de 1200 para cima a coluna tem 223px FIXOS e sobra folga à direita —
   220 da marca + 20 + 4x223 + 3x20 = 1192 num .wrap de 1200. Esticando para
   preencher, cada coluna ia a 225 e o erro somava ao longo da fileira (+2 na
   segunda, +5 na quarta). */
@media (min-width: 1200px) {
  .site-footer__col {
    flex: 0 0 223px;
  }
}

@media (max-width: 767px) {
  .site-footer__grid > * {
    flex: 1 1 100%;
    text-align: center;
  }
}

.site-footer__mark {
  width: 127px; /* medido */
  height: auto;
  border-radius: var(--r-logo);
}

/* MEDIDO em 1024 e 390: abaixo de 1025 o original NAO mostra o simbolo grande do
   rodape — nao existe imagem nenhuma dele ali, so os icones sociais, e
   CENTRALIZADOS (x=444 num viewport de 1024 e x=127 em 390, os dois com 136px de
   largura; no desktop eles ficam a esquerda, na calha). Em 1440 o simbolo existe
   e mede 127x127.

   Eu mostrava o simbolo em todas as larguras e esticava os sociais pela linha
   inteira: 183px de altura a mais no rodape de TODA pagina, no tablet e no
   celular. Era o maior termo isolado da diferenca de altura do rodape. */
@media (max-width: 1024px) {
  .site-footer__mark {
    display: none;
  }

  .social {
    justify-content: center;
  }
}

/* MEDIDO: entrelinha IGUAL ao tamanho (28px de 28px em 1920; 26,66 de 26,66 em
   1027; 22,33 em 390 — razão 1,000 nas quatro larguras). Sem declarar, o título
   herdava o 1,2 do corpo e ficava exatamente 20% mais alto (33,6 contra 28), o
   que empurrava cada coluna do rodapé para baixo. */
.site-footer__title {
  margin-bottom: var(--sp-sm);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-card-title);
  line-height: 1;
  /* MEDIDO: 16px do fim do título ao topo do primeiro item. No original o título
     tem margem zero e o respiro vem da lista; aqui vem daqui, e com --sp-sm o vão
     efetivo dava 10. */
  margin-bottom: 22px;
  color: var(--c-white);
}

/* Titulo da 2a coluna de Solucoes: a lista e UMA, quebrada em duas colunas, e
   "Solucoes" saia DUAS vezes lado a lado.
   `visibility: hidden` e nao `display: none` nem remocao do markup: a caixa do
   titulo tem de continuar OCUPANDO lugar, senao os itens da 2a coluna sobem a
   altura da linha + 22px de margem e desalinham dos da 1a.
   Cobre a acessibilidade tambem: conteudo com `visibility:hidden` sai da arvore,
   entao o heading duplicado deixa de aparecer na navegacao por titulos — sem
   precisar de `aria-hidden`. A coluna segue identificada pelo `aria-label` do
   <nav> ("Solucoes (2 de 2)"). */
.site-footer__title--repetido {
  visibility: hidden;
}

.site-footer__col ul {
  display: grid;
  gap: var(--sp-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__col a,
.site-footer__col span {
  color: var(--c-white);
  text-decoration: none;
}

.site-footer__col a:hover {
  text-decoration: underline;
}

.social {
  display: flex;
  gap: var(--sp-2xs);
  margin-top: var(--sp-md);
  list-style: none;
  padding: 0;
}

.social a {
  display: grid;
  place-items: center;
  /* MEDIDO: 32x32, fundo BRANCO com o icone verde e raio de 10% — eu tinha
     invertido (fundo verde, icone branco) e aumentado para 34px. */
  width: 32px;
  height: 32px;
  border-radius: 10%;
  background: var(--c-white);
  color: var(--c-green);
  transition: background var(--dur-fast) var(--ease-out);
}

/* MEDIDO em 1024 e 390: abaixo de 1025 os icones sao 42x42 (nao 32) e a fileira
   encosta no divisor — os 24px de margem que uso no desktop nao existem la (o
   original poe os icones em y+106 num divisor que fecha em y+86, e 106-86=20 ja
   e a margem do proprio divisor). */
@media (max-width: 1024px) {
  .social {
    margin-top: 0;
  }

  .social a {
    width: 42px;
    height: 42px;
  }
}

.social a:hover {
  background: var(--c-bone);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  /* MEDIDO: 32px do credito ate a tira de padrao (50px), somando os 82 que o
     original mostra; --sp-md e 24 e deixava a base 8px curta. */
  padding-block: var(--sp-md) 32px;
  border-top: 1px solid var(--c-green);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer__base {
    padding-bottom: 50px; /* medido: 100 ate a base, menos os 50 da tira */
  }
}

.site-footer__legal {
  font-size: var(--fs-sm);
}

/* Tira de padrao "go" no rodape do rodape. */
.site-footer__pattern {
  height: 50px;
  /* Medido no original: repeat + size auto. A tira mostra uma FATIA do padrao
     em tamanho natural; escalar para os 50px de altura encolheria o desenho a
     17% do tamanho e ele viraria chuvisco. */
  /* MEDIDO no ::before do original: 50% 0% — centrado na horizontal, mas
     ancorado no TOPO. Com 'center' a tira de 50px mostrava a fatia do MEIO da
     imagem (que tem 297px de altura), e o pixel na borda saia rgb(40,40,40)
     onde o original da rgb(41,99,77). Mesma imagem, mesmo tamanho, mesma
     opacidade: so a fatia estava errada. */
  background: url('../img/formas.png') repeat 50% 0% / auto;
  opacity: 0.5;
}

/* --- Paginas internas ----------------------------------------------------- */

.page-banner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 200px;
  padding-block: var(--sp-xl);
  background: var(--c-green);
  overflow: hidden;
}

.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/formas-brancas.png') no-repeat center / cover;
  opacity: 0.05;
  pointer-events: none;
}

.page-banner__title {
  position: relative;
  text-align: center;
}

/* MEDIDO: a secao logo apos a faixa verde respira mais que as demais —
   90px contra os 48px do resto. */
.page-banner + .section {
  padding-block: 90px;
}

.product {
  display: grid;
  /* MEDIDO: figura em 465..950 e titulo em 976..1544, vao de 26px.
     Colunas PROPORCIONAIS, nao a primeira fixa em 590px: fixa, em 768px sobram
     84px para a segunda e o titulo "CARDAPIO MOBILE" vaza 98px para fora da
     tela. Em 1920 o resultado e o mesmo (587px por coluna contra os 590 medidos). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* MEDIDO: as duas colunas medem 600px exatos num container de 1200 — 50/50
     SEM vao — e o bloco leva 80px de recuo em cima e embaixo (container de 600
     com 440 de conteudo). Com vao de 26 e recuo zero o titulo do produto nascia
     71px abaixo do original e a secao seguinte subia 100. */
  gap: 0;
  padding-block: 80px;
  /* O TEXTO encosta no topo da linha e a FIGURA se centraliza nela — no
     original as duas colunas tem a mesma altura (440), com o texto comecando a
     9px do topo e a figura a 27. Com align-items:center os dois centralizavam. */
  align-items: stretch;
}


/* MEDIDO: no original o bloco do produto encosta na faixa verde (container
   295..895, e o banner termina em 295) — os 80px de folga sao DELE, nao da
   secao. Com o recuo da .section por cima o conteudo descia 48px a mais. */
.section:has(> .product) {
  padding-block: 0;
  /* MEDIDO na coluna de pixels da borda: no original esta faixa e BRANCA
     (rgb(255,255,255), y 295..890 em 1440) — quem pinta e o body, que la e
     branco; o creme aparece so na secao seguinte (895..1145). Aqui o body e
     creme, entao a faixa saia creme e divergia por INTEIRO: 97% dos pixels na
     comparacao de imagem, a maior divergencia do site todo. Pintar branco na
     secao reproduz o resultado sem inverter o padrao do body, que bate com o
     original em todas as outras paginas. */
  background: var(--c-white);
}

.product__figure {
  /* MEDIDO: 485px de largura, encostada a direita da coluna, com borda de 2px
     e recuo maior em cima (20px) que embaixo (10px). A moldura fica 10px abaixo
     do topo da linha e 10 acima da base — e o que faz a linha medir 440
     (420 da moldura + 20). */
  align-self: start;
  margin-block: 19px; /* remedido: com 10 a secao seguinte subia 17px */
  width: 100%;
  max-width: 485px;
  justify-self: end;
  padding: 20px 10px 10px;
  border: 2px solid var(--c-green);
  border-radius: var(--r-card);
  background: var(--c-white);
}

.product__figure img {
  width: 100%;
  /* Medido no original: caixa de 386px com object-fit contain, em todos os
     viewports. Sem a altura fixa, o totem do Gototem PAY (proporcao 0,31)
     estica a pagina inteira - foi +98% no tablet. */
  height: 386px;
  object-fit: contain;
}

.product__title {
  color: var(--text-accent);
  /* Sem margem: o vao de 20px da grade e o espacamento medido. Somada ao vao,
     ela empurrava a descricao 25px para baixo. */
  margin-bottom: 0;
}

.product__text {
  /* MEDIDO: a coluna de texto ESTICA na linha (as duas medem 440 no original) e
     o conteudo comeca 16px abaixo do topo dela. */
  align-self: stretch;
  /* MEDIDO: o conteudo recua 16px do topo e dos DOIS lados — o texto comeca em
     x=976 numa coluna que abre em 960, e o paragrafo mede 568 numa coluna de
     600. Sem o recuo da direita ele saia 16px mais largo e quebrava noutro
     ponto em todas as paginas de produto. */
  padding: 16px 16px 0;
  display: grid;
  /* MEDIDO: as linhas mantem a altura natural e a sobra fica embaixo — o titulo
     mede 54px. Com as linhas esticando na coluna de 440 ele ia a 94 e empurrava
     descricao e botao. */
  align-content: start;
  gap: 20px; /* medido */
  /* NÃO existe teto de largura aqui. Havia um `max-width: 62ch` — teto de
     leitura inventado, sem medida que o justificasse. Ele não morde no desktop
     (a coluna tem 600), mas em 767, onde o bloco ocupa a linha inteira, cortava
     a caixa de 735 para 679: com o texto centralizado, isso deslocava o título
     e a descrição 28px à esquerda (metade dos 56 perdidos) e mudava o ponto de
     quebra — nas SETE páginas de produto. */
}

/* MEDIDO: a descricao do produto e --fs-texto (17,312px em 1920), nao o
   tamanho herdado do corpo (16,8) — 0,5px por caractere que mudava o ponto de
   quebra de toda descricao das 7 paginas. */
.product__text p {
  font-size: var(--fs-texto);
}

.product__text .btn {
  justify-self: start;
  /* O vao de 20px da grade ja e o espacamento medido ate o botao. */
  margin-top: 0;
}

.more-info__title {
  margin-bottom: var(--sp-md);
  font-size: 2rem; /* medido: 32px, nao os 18px do estilo .t-mini */
  line-height: 1;  /* medido: 32px / 32px */
  text-align: center;
}

/* --- Responsivo ----------------------------------------------------------
   O menu vira gaveta abaixo de 960px, que e onde a barra deixa de caber.
   -------------------------------------------------------------------------- */

/* MEDIDO no original: em <=1024 o item "Solucoes" some da barra (vira
   hamburguer) e a coluna do hero salta de 449 para 896px. E o breakpoint de
   tablet do Elementor; os 960px que estavam aqui eram invencao minha. */
@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  /* MEDIDO no site em produção a 390px, com o menu ABERTO. O painel é BRANCO,
     sem recuo, sem borda e sem sombra, e ocupa a largura inteira. Antes daqui
     havia `background: var(--bg-header)` (o preto do cabeçalho) com recuo e vão
     inventados: o menu mobile saía preto, com o texto em lima-pálido e os itens
     ao dobro da altura.

     Por que passou tanto tempo errado: NENHUM comparador do harness abre o
     menu — todos medem a página como ela carrega. Estado interativo era ponto
     cego, e este bloco nunca tinha sido medido (nem na cópia estática). */
  /* MEDIDO: o painel sangra de borda a borda (390 de 390) e começa em y=102,
     5px ANTES do fim da barra de 107 — ele sobe por baixo dela. O contexto de
     posicionamento é o .site-header, não o .site-header__inner: preso ao inner
     (que é o .wrap, recuado pela calha) o painel media 353 e os itens não
     chegavam à borda. */
  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: calc(100% - 5px);
    z-index: var(--z-drawer);
    display: none;
    padding: 0;
    background: var(--c-white);
  }

  .site-header {
    position: relative;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav[data-open='true'] {
    display: block;
  }

  /* MEDIDO: itens CONTÍGUOS de 35px (y = 102, 137, 172, 207 — passo de 35
     exato), sem separador. O vão que estava aqui empurrava o passo para ~62. */
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* MEDIDO: recuo de 10px 20px e peso 600. Os 35px de altura do item são o
     tamanho da fonte (15,008 em 390) + 20 de recuo vertical. Tamanho e entrelinha
     saíram daqui: eram fixos em 15,008 e o original é fluido também no painel
     (15,4048 em 768, 15,6864 em 1024) — a regra base cobre as duas faixas.
     O seletor leva o ANCESTRO de propósito (`.site-nav .site-nav__link`, 0-2-0):
     no fim deste arquivo existe `.site-footer__col a, .site-nav__link
     { font-size: var(--fs-texto) }`, e uma regra em @media não ganha
     especificidade — a base, que vem DEPOIS, vencia por ordem e devolvia
     15,63px, deixando o item com 39px em vez de 35. */
  .site-nav .site-nav__link {
    /* block: no painel o item é uma FAIXA de largura inteira. Como inline, o
       recuo vertical não entrava na altura e a faixa media 38px em vez de 35. */
    display: block;
    padding: 10px 20px;
    background: transparent;
    color: var(--c-ink);
    font-family: var(--font);
    font-weight: 600;
  }

  /* MEDIDO: a página corrente é a única faixa pintada — lima com texto verde.
     A faixa vai no <li>, não no <a>: no item que tem submenu o <a> encolhe para
     caber a seta ao lado do rótulo (como no original), e pintar o <a> deixaria a
     faixa com 88px de 390 quando a solução fosse a página corrente. */
  .site-nav .site-nav__list > li:has(> .site-nav__link[aria-current='page']),
  .site-nav .site-nav__list > li:has(> a[aria-current='page']) {
    background: var(--c-lime);
  }

  .site-nav .site-nav__link[aria-current='page'] {
    color: var(--c-green);
  }

  /* MEDIDO: no painel a seta do submenu fica JUNTO ao rótulo ("Soluções ▾"), não
     na borda direita — e o item ocupa os 390 inteiros como os outros. Com
     space-between a seta ia para a ponta e o <a> encolhia para 102px. */
  .site-nav__item--has-menu {
    justify-content: flex-start;
  }

  .site-nav .site-nav__item--has-menu .site-nav__link {
    flex: 0 0 auto;
    padding-right: 6px;
  }

  /* No painel branco a seta precisa da cor do texto: `--text-nav` (lima-pálido,
     para a barra escura do desktop) ficava invisível. */
  .site-nav .site-nav__disclosure {
    color: var(--c-ink);
  }

  .mega {
    position: static;
    width: auto;
    padding: var(--sp-2xs);
    transform: none;
    box-shadow: none;
  }

  .site-nav__cta {
    margin-left: 0;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero__art {
    justify-self: center;
    /* MEDIDO: no original a imagem fica ABAIXO do texto quando o hero empilha —
       titulo, subtitulo e pilulas primeiro. Com order:-1 ela subia para o topo
       e a pagina abria com a foto no lugar da chamada. */
  }
}

/* MEDIDO: vantagens, contato, hero de produto, formulario e rodape so
   empilham em <=767 — nao antes. As pilulas do hero ficam 3 por linha ate
   768 e caem direto para 1; nunca passam por 2 colunas. */
@media (max-width: 767px) {
  .advantages__intro {
    grid-template-columns: 1fr;
    padding: 0 var(--sp-md) var(--sp-md);
  }

  .advantages__intro::before {
    width: 100%;
  }

  /* MEDIDO a 390: do titulo "Vantagens" ao topo da ilustracao o original deixa
     213px e eu deixava 176 — os 32 comidos por esta margem negativa mais 5. E da
     ilustracao ao primeiro cartao sao 123 contra os 137 meus. Mesmo erro da
     figura do contato: margem negativa herdada do desktop, onde ela faz sentido. */
  .advantages__art {
    justify-self: center;
    margin-top: 5px;
    margin-bottom: -46px; /* remedido: o vao da figura ate o primeiro cartao e 123, nao 137 */
  }

  .contact {
    grid-template-columns: 1fr;
  }

  /* MEDIDO no original em 4 larguras: a ilustracao ocupa a CAIXA DE CONTEUDO
     inteira — 326 numa caixa de 358 com 16+16 de recuo, 416 em 448, 536 em 568.
     Nao e centralizada: preenche.

     justify-self:center encolhia o item ao conteudo, e como a imagem e
     width:100%, os dois se resolviam em ZERO: a figura renderizava 0x0 e
     sumia da pagina no celular. Isso encurtava a home em 466px, e por tabela
     TODAS as faixas abaixo do contato comparavam conteudo trocado. */
  .contact__art {
    justify-self: stretch;
    /* MEDIDO: a figura tem 32px de folga acima dela (o row-gap do bloco). A
       margem negativa que eu usava aqui comia o vao e deixava 3px. */
    margin-top: 0;
  }

  .product {
    grid-template-columns: 1fr;
  }

  .hero__features {
    /* MEDIDO: no celular sao DUAS colunas (2x2), nao uma — itens de 190px numa
       caixa de 448 e de 148 numa de 358, sempre com 20px de vao. A leitura
       anterior de "1 por linha" veio de uma sonda que so encontrou 3 dos 4
       itens e agrupou errado. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* MEDIDO em 4 larguras: abaixo de 768 o original recua o bloco ALÉM da calha
       da página, e o recuo extra é fluido — 20px em 767, 13 em 600, 8 em 480 e 5
       em 390. A reta que passa pelos quatro é 4vw − 11px (19,7 / 13,0 / 8,2 /
       4,6). Com os 16px fixos daqui os quatro selos ficavam 20px deslocados em
       767 (dois para a esquerda, dois para a direita) e a caixa 40px mais larga. */
    padding-inline: calc(16px + 4vw - 11px);
  }

  .form {
    grid-template-columns: 1fr;
  }

  .site-footer__base {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* --- Traco curvo sob trechos de titulo ------------------------------------
   O site original desenha o risco com um <svg> INLINE posicionado por cima do
   trecho (viewBox 0 0 500 150, preserveAspectRatio="none", stroke-width 9,
   linecap butt), nao com um fundo CSS. Medido: a caixa do svg tem 10px de
   folga acima e abaixo do trecho que ele sublinha.

   Sao DOIS tracos diferentes, nao um: o de "recomenda!" tem outra curvatura.
   E duas cores: verde da marca no claro, lima palido sobre a foto escura.
   -------------------------------------------------------------------------- */

/* Palavra destacada dentro de um titulo. MEDIDO: "Gototem" aparece em
   rgb(43,157,115) no titulo dos segmentos. Usa o verde claro de propósito —
   e um titulo de 36px, acima do limite de 18,66px para texto grande, entao o
   minimo de contraste ali e 3:1 (o --c-green da 3,40:1 sobre o creme). */
.destaque {
  color: var(--c-green);
}

.swoosh {
  position: relative;
  /* MEDIDO: com inline-block o trecho sublinhado vira um bloco atomico e a
     linha quebra ANTES dele — no titulo dos PDVs o original poe "Integrado aos
     melhores PDV's" numa linha so (458px de 640) e o meu quebrava depois de
     "aos". Como o traco e um SVG absoluto, ele nao precisa do inline-block. */
  display: inline;
}

.swoosh__risco {
  position: absolute;
  left: 0;
  top: -10px;
  width: 100%;
  height: calc(100% + 20px);
  fill: none;
  stroke: var(--c-green);
  stroke-width: 9;
  stroke-linecap: butt;
  pointer-events: none;
}

/* Sobre foto ou fundo escuro o risco e lima palido. */
.swoosh--claro .swoosh__risco {
  stroke: var(--c-lime-pale);
}

/* --- Destaque compacto (pagina de Solucoes) ------------------------------- */

.hero__inner--compact {
  min-height: 0;
  padding-block: var(--sp-lg);
  align-items: center;
}

.hero__inner--compact .hero__lead {
  /* MEDIDO na pagina /solucoes/: 17,312px / 20,7744px, peso 400 — nao os
     28px peso 200 do hero da home. Sao dois destaques diferentes. */
  max-width: 42ch;
  font-size: var(--fs-texto);
  font-weight: var(--fw-regular);
  line-height: 1.2;
}

.hero__inner--compact .hero__art img {
  width: min(100%, 420px);
}

.btn--arrow {
  justify-content: space-between;
  min-height: 50px;
  padding: var(--sp-2xs) var(--sp-2xs) var(--sp-2xs) var(--sp-md);
}

/* --- Missao (Sobre Nos) ---------------------------------------------------
   Foto de fundo com veu escuro por cima. O veu nao e enfeite: sem ele o
   titulo branco cai para menos de 2:1 sobre as partes claras da foto.
   -------------------------------------------------------------------------- */

.mission {
  padding: var(--sp-xl) var(--sp-lg) var(--sp-lg);
  border-radius: var(--r-card);
  /* MEDIDO em 4 larguras: a foto ancora no TOPO (50% 0%), nao no centro.
     Com center, o cover recortava outra faixa da imagem e o bloco divergia 47%
     na comparacao de pixel — com a geometria do texto CERTA. Fundo de foto e
     invisivel para comparador de DOM: so o pixel enxerga. */
  /* Piso em webp + `image-set()` por cima — ver o comentario em `.pdv`.
     ATENCAO: o `50% 0%` (ancora no TOPO) tem de ser igual nas duas, senao o
     navegador com suporte recorta outra faixa da foto e o bloco volta a divergir
     47% na comparacao de pixel. 62,7 -> 51,3 KB. */
  background: linear-gradient(var(--veu-foto), var(--veu-foto)),
    url('../img/sobre.webp') 50% 0% / cover no-repeat;
  background: linear-gradient(var(--veu-foto), var(--veu-foto)),
    image-set(url('../img/sobre.avif') type('image/avif'),
              url('../img/sobre.webp') type('image/webp')) 50% 0% / cover no-repeat;
}

/* MEDIDO: acima de 1024 o recuo superior do bloco e 64, nao 48 — conferido em
   1100, 1200 e 1440; em 1024 e 390 e 48. A troca cai na borda de 1025, o mesmo
   ponto em que o original passa de tablet para desktop. */
@media (min-width: 1025px) {
  .mission {
    padding-top: 64px;
  }
}

.mission__title {
  /* MEDIDO: o titulo ocupa ~51% do container — 613px de 1200 em 1920 e 346 de
     704 em 768 —, nao um limite em ch. Com 22ch ele media 545 em 1920 (curto) e
     468 em 768 (largo), quebrando em 3 linhas onde o original usa 5. */
  max-width: 54%; /* 613 de 1136 em 1920 e 346 de 640 em 768 — a porcentagem e da area interna */
  /* MEDIDO em 4 larguras (1440/1024/768/390): o titulo nasce 56px abaixo do
     recuo do bloco e o cartao comeca 84px abaixo dele — 8 e 36 no celular.
     Sem esses dois vaos o bloco saia 117px curto, e como a foto e cover, a
     altura errada recortava a imagem noutro ponto. */
  margin-top: 56px;
  margin-bottom: 84px;
  color: var(--c-white);
}

/* MEDIDO: no celular o titulo ocupa a largura toda (294px de 326). */
@media (max-width: 767px) {
  .mission__title {
    max-width: none;
    /* MEDIDO a 390: os mesmos dois vaos encolhem para 8 e 36. */
    margin-top: 8px;
    margin-bottom: 36px;
  }
}

.mission__card {
  display: grid;
  gap: 20px; /* medido: 20, nao 16 */
  /* MEDIDO: 16px de recuo, nao 32 — a caixa do texto mede 1104 num cartao de
     1136 (608 de 640 no tablet, 294 de 326 no celular). */
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--bg-card);
  text-align: center;
  /* MEDIDO: este e o papel "destaque" (28px no desktop, 26,64 em 1024, 22,33 em
     390) em peso 200 e entrelinha 1,2 — nao o papel "lead" em peso 400. Cada
     paragrafo saia com 4 linhas em vez das 5 do original, o que encurtava o
     cartao em 82px e puxava o FAQ para cima. */
  font-size: var(--fs-destaque);
  font-weight: 200;
  line-height: 1.2;
}

/* --- Listas dentro do acordeao das solucoes ------------------------------- */

/* MEDIDO no original: cada paragrafo do corpo carrega 14,4px de margem
   inferior e as listas nao tem margem nenhuma. Eu usava margem SUPERIOR no
   irmao seguinte, o que deixava a lista colada no paragrafo que a apresenta. */
.faq__a p {
  margin-bottom: 14.4px;
}

.faq__a ul,
.faq__a ol {
  margin: 0;
}

/* Espacador que existe no original como paragrafo vazio: 21px de linha. */
.info-espaco {
  height: 21px;
  margin-bottom: 14.4px;
}

/* Emitida pelo gerador das paginas de solucao quando o conteudo do acordeao
   tem subtitulo. Hoje nenhuma pagina tem — nao e CSS morto, e condicional. */
.info-sub {
  font-family: var(--font-ui);
  font-weight: var(--fw-semi);
  font-size: 1.05rem;
  color: var(--text-accent);
}

.info-list {
  display: grid;
  /* MEDIDO: no original os itens sao contiguos (1208..1250, 1250..1291) — sem
     vao nenhum. Os 4px daqui somavam por item e chegavam a 12px de desvio no
     fim de uma lista de quatro. */
  gap: 0;
  margin: 0;
  padding-left: 40px; /* medido: o recuo do original e 40px, nao 18,4 */
  list-style: disc;
}

.info-list li {
  padding-left: 0; /* medido: o recuo vem todo do <ul> */
  font-size: var(--fs-texto);
  line-height: 1.2;
}

/* Rotulo de secao dentro do acordeao. No original e <strong> peso 700 e
   17,312px — nao e enfase solta, e o que separa uma secao da seguinte. */
.faq__a p strong {
  font-weight: 700;
}

.faq__a p {
  font-size: var(--fs-texto);
  line-height: 1.2;
}

/* --- Centralizacao por faixa ------------------------------------------------
   MEDIDO comparando o alinhamento COMPUTADO dos dois lados, secao a secao, em
   1920 / 1024 / 768 / 390. Em 1920 nao ha uma divergencia sequer: o original e
   alinhado a esquerda igual ao nosso. A partir de 1024 ele passa quatro secoes
   para centralizado, e a partir de 767 mais quatro. Nao e efeito de largura de
   coluna — e text-align mesmo, declarado por secao (o padrao do Elementor).

   Estava invisivel na comparacao de posicao porque comparar a borda esquerda de
   um texto centralizado mede a largura do texto, nao o recuo da secao. So
   apareceu quando a sonda passou a declarar o eixo dos DOIS lados. */
@media (max-width: 1024px) {
  .hero__inner,
  .pdv,
  .cta-dark__inner,
  .product__text,
  /* MEDIDO: o titulo "Nossos clientes" tambem passa a centralizado em <=1024
     (align=center no original, start no desktop). */
  [aria-labelledby='tit-clientes'] {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .advantages__intro,
  .solution__body,
  .contact,
  .mission {
    text-align: center;
  }
}

/* MEDIDO no hero compacto de /solucoes: a figura mede 290px no desktop e,
   quando o hero empilha, vem ANTES do texto (o contrario do hero da home) com
   ~39,5% da area util no tablet (365 de 928 em 1024, 268 de 672 em 768) e 87,7%
   no celular (286 de 326). Eu tinha 420px fixos e o texto por cima. */
.hero--compact .hero__art {
  justify-self: start; /* medido: a figura fica em x=992, no inicio da coluna */
}

.hero--compact .hero__art img {
  width: 290px;
}

@media (max-width: 1024px) {
  .hero--compact .hero__art {
    order: -1;
    /* O justify-self:start do desktop encolhe a coluna e impede o
       margin-inline:auto de centralizar a figura, que no original fica no meio
       (x=330 numa faixa de 960). */
    justify-self: stretch;
  }

  .hero--compact .hero__art img {
    /* MEDIDO em relacao a JANELA, nao a coluna: 365 em 1024 e 268 em 768 dao
       ~35,5vw. Como porcentagem da coluna o valor mudava com a largura dela. */
    width: 35.5vw;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .hero--compact .hero__art img {
    width: 73.3vw; /* medido: 286 numa janela de 390 */
  }
}

/* MEDIDO: o titulo da secao de solucoes e alinhado a ESQUERDA so na faixa do
   tablet — centralizado no desktop e no celular. */
@media (min-width: 768px) and (max-width: 1024px) {
  .solutions__title {
    text-align: start;
  }
}

/* MEDIDO: a figura das vantagens acompanha a coluna — 36,5% da area util no
   tablet (336 em 1024, 293 em 900, 246 em 768) e a largura toda no celular,
   com teto de 444px (444 em 600, 358 em 390). Fixa em 300px ela ficava grande
   demais em 768 e pequena demais em 600. */
@media (min-width: 768px) and (max-width: 1024px) {
  .advantages__intro {
    /* MEDIDO: figura 34,5% e texto 63,5% da area util — o texto NAO ocupa o
       restante todo (426 de 672 em 768, 592 de 928 em 1024). */
    grid-template-columns: 34.5% 63.5%;
  }

  .advantages__art img {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .advantages__art img {
    width: min(100%, 444px);
  }

  /* MEDIDO: no celular o TEXTO recua 16px mas a FIGURA sangra por fora e ocupa
     a largura inteira da caixa (358 numa caixa de 358, com o titulo em x=32). */
  .advantages__intro {
    padding-inline: 16px;
  }

  .advantages__art {
    margin-inline: -16px;
  }
}

/* --- Recuo vertical por secao ----------------------------------------------
   MEDIDO pelo VAO RENDERIZADO entre a ultima linha de uma secao e a primeira da
   seguinte — nao pelo padding do <section> do original, que e aninhado e me
   levou a valores errados numa tentativa anterior.

   Cada valor abaixo fecha um vao especifico:
     numeros ....... +28 (vao 225 contra 197)
     segmentos ..... +59 (vao 256 contra 197)
     quem usa ...... -103, dividido entre a base dos PDVs e o topo dele
     contato ....... +76 (vao 344 contra 268)
     missao ........ +30 (vao 297 contra 267)                                */
[aria-labelledby='tit-numeros'] {
  padding-top: 38px;
}

[aria-labelledby='tit-segmentos'] {
  padding-top: 106px;
}

[aria-labelledby='tit-pdv'] {
  padding-bottom: 0;
}

/* MEDIDO pelo vao do ultimo "Saiba Mais" ate "Integrado aos": 215 no desktop,
   183 no tablet e 152 no celular. O recuo fluido da secao (47/33/32) dava
   225/165/164 — grande demais em cima e pequeno no meio. */
[aria-labelledby='tit-pdv'] {
  padding-top: 37px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  [aria-labelledby='tit-pdv'] {
    padding-top: 51px;
  }
}

@media (max-width: 767px) {
  [aria-labelledby='tit-pdv'] {
    padding-top: 20px;
  }
}

[aria-labelledby='tit-recomenda'] {
  padding-top: 28px; /* medido pelo vao: 583px depois de "do mercado" */
}

/* MEDIDO nos dois lados, na home E na /sobre-nos (o vao da IGUAL nas duas): do
   fim da ultima pergunta ao topo do bloco de contato sao 98px no desktop, 114 no
   tablet e 66 no celular. Descontando o recuo inferior da secao da FAQ (41 / 36 /
   32), sobram 57 / 78 / 34 aqui.

   O valor anterior (36) foi medido pelo vao ATE O TITULO, nao ate o bloco — e
   deixava o vao 21px curto no desktop e 19 longo no tablet. */
[aria-labelledby='tit-contato'] {
  padding-top: 57px;
}

@media (max-width: 767px) {
  [aria-labelledby='tit-contato'] {
    padding-top: 34px;
  }
}

/* MEDIDO: a secao de solucoes pede valores OPOSTOS nas duas paginas onde
   aparece — na home o vao esta 42px grande e em /solucoes 42px pequeno. O que
   as distingue e o banner verde: em /solucoes ele precede a secao. */
[aria-labelledby='tit-soluc'] {
  padding-top: 5px;
}

.section--lista-solucoes {
  /* MEDIDO: 48 do container externo + 32 do interno. Os 155px de antes eram
     compensacao do hero compacto, que fechava 121px curto porque a figura vazava
     para fora e era cortada; com o hero correto o vao volta ao valor real. */
  padding-top: 80px;
  /* MEDIDO nos dois lados: do fim do ultimo cartao ao topo do rodape sao 112px no
     desktop, 96 no tablet e 80 no celular. Sem declarar, a secao herdava o
     --sp-section (41 / 36 / 32) e a pagina fechava ate 70px curta — a listagem
     nao tem bloco de contato, entao esse vao e o unico amortecedor antes do
     rodape e o erro ia inteiro para a posicao dele. */
  padding-bottom: 112px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .section--lista-solucoes {
    padding-bottom: 96px;
  }
}

@media (max-width: 767px) {
  .section--lista-solucoes {
    padding-bottom: 80px;
  }
}

/* Fora do desktop o hero e mais curto e o vao cai. */
@media (max-width: 1024px) {
  .section--lista-solucoes {
    padding-top: 48px; /* medido: vao de 107px depois do hero, contra 123 com 64 */
  }
}

/* Precisa do .page-banner na frente: a regra ".page-banner + .section" tem
   especificidade maior e fixava 90px aqui. */
.page-banner + section[aria-labelledby='tit-missao'] {
  /* MEDIDO nos dois lados: do fim da faixa verde ao topo do bloco sao 48px no
     desktop, 32 no tablet e 32 no celular.

     Os 120/88/40 daqui foram medidos MIRANDO A POSICAO DO TITULO, quando o bloco
     ainda nao tinha os 56px proprios acima dele. Com o bloco corrigido, os dois
     valores somavam e o bloco inteiro descia 72px. Recuo de secao mede o vao ATE
     O BLOCO; o espaco dentro do bloco e do bloco. */
  padding-top: 48px;
  /* MEDIDO: do fim do bloco ao titulo da FAQ sao 76px — os MESMOS 76 nas tres
     larguras. Como a secao da FAQ ja contribui 52 / 36,3 / 32 de recuo proprio,
     aqui sobram 24 / 40 / 44. Com os 90 herdados o vao dava 142. */
  padding-bottom: 24px;
}

/* MEDIDO: na faixa do tablet o recuo do bloco cai de 80 para 64px e a moldura
   ganha folga — a coluna da figura mede 535px (contra 440 aqui), o que colocava
   a secao "Mais Informacoes" 123px acima do original em todas as 7 paginas. *
   Fica no fim do arquivo de proposito: as declaracoes base de .product__figure
   sao declaradas adiante e venciam por ordem quando este bloco vinha antes. */
@media (min-width: 768px) and (max-width: 1024px) {
  .product {
    padding-block: 64px;
  }

  .product__figure {
    /* REMEDIDO: a moldura nasce 10px abaixo do topo da linha (381 contra um topo
       em 371), nao 72. Os 72 foram medidos mirando a ALTURA DO BLOCO, e
       acertavam a altura pondo a foto 62px fora do lugar — o h1 e a secao
       seguinte ja batiam exato dos dois lados. Como a figura e align-self:start
       e a altura do bloco vem da coluna de TEXTO, o topo pode ser corrigido sem
       mexer no resto: a folga de baixo continua absorvendo. */
    margin-block: 10px 134px; /* 10+420+134 = os mesmos 564 de antes: a coluna da figura e quem dita a altura do bloco aqui */
  }
}

/* MEDIDO no celular: dentro da caixa de contato, que passa a centralizada, o
   FORMULARIO continua alinhado a esquerda (todo rotulo em x=32). E no bloco de
   numeros e o contrario: os rotulos sao centralizados (x=87, 92 e 69, variando
   com a largura de cada texto) e eu os deixava todos em 32. */
@media (max-width: 767px) {
  .form {
    text-align: start;
  }

  .stats__grid {
    text-align: center;
  }
}

/* MEDIDO: no celular o corpo do card de solucao recua 16px nas laterais, nao 32
   — o titulo ocupa 326px num card de 358 (e 416 num de 448). Com 32 ele ficava
   32px estreito e quebrava numa linha a mais. */
@media (max-width: 767px) {
  .solution__body {
    padding-inline: 16px;
  }
}

/* MEDIDO: na faixa do tablet o TITULO do produto e centralizado mas a DESCRICAO
   fica alinhada a esquerda (x=400 fixo nas 7 paginas, contra 407..438 quando
   centralizada). No celular as duas voltam a centralizadas. */
@media (min-width: 768px) and (max-width: 1024px) {
  .product__text p {
    text-align: start;
  }
}

/* MEDIDO: no celular a figura do contato vem DEPOIS do formulario (fica em
   3863..4329 com o titulo em 3240), nao antes. Como ela e o primeiro filho no
   HTML, sem o order ela abria a secao e empurrava o formulario 470px para
   baixo. */
@media (max-width: 767px) {
  .contact__art {
    order: 1;
  }

  /* Mesmo caso na faixa das vantagens: no original a ilustracao vem DEPOIS do
     titulo e do texto (o vao ate "Vantagens" e 148 e dali ate o primeiro card
     739, o inverso do que eu tinha). */
  .advantages__art {
    order: 1;
  }
}

/* NAO limitar a largura do rotulo do item de recurso. Tentei 5,65em (medido em
   "Aumento do ticket medio") e acertava esse, mas quebrava "Agilidade no
   processo de compra", que no original ocupa 145 dos 152px do item. Os rotulos
   quebram naturalmente, cada um no seu ponto — o que resta de diferenca e o
   ponto de quebra, nao a largura disponivel. */

/* MEDIDO pelo vao renderizado, por faixa: os recuos de secao que valem no
   desktop nao valem no tablet nem no celular. Cada valor abaixo fecha um vao
   especifico que sobrou depois dos ajustes de desktop.
     celular  clientes +32 · numeros +25 · quem usa +27
     tablet   contato  +74                                                   */
@media (max-width: 767px) {
  [aria-labelledby='tit-clientes'] {
    padding-top: 64px; /* remedido: com 32 o vao ficava 32px curto */
  }

  [aria-labelledby='tit-numeros'] {
    padding-top: 63px;
  }

  [aria-labelledby='tit-recomenda'] {
    padding-top: 28px; /* remedido: com 55 o vao passava 27px */
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  [aria-labelledby='tit-contato'] {
    padding-top: 78px; /* MEDIDO: 114 de vao ate o bloco, menos os 36 da secao da FAQ */
  }
}

/* MEDIDO: no celular o trecho sublinhado do titulo se comporta como bloco
   ATOMICO — o original quebra "Integrado aos / melhores PDV's / do mercado" em
   tres linhas, e com display:inline o meu juntava as duas primeiras. Em 1920 e
   768 o inline e que esta certo (a quebra bate exata la), entao a troca vale so
   nesta faixa. */
@media (max-width: 767px) {
  .swoosh {
    display: inline-block;
  }
}

/* MEDIDO no hero compacto de /solucoes: o subtitulo ocupa 376px de uma coluna
   de 600 (62,7%) no desktop, e no tablet a coluna inteira encolhe para metade
   do container (352 de 704) com o texto centralizado. No celular volta a
   largura total. O meu usava 62ch, que dava 474 e cabia numa linha so. */
.hero--compact .hero__lead {
  max-width: 62.7%;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero--compact .hero__copy,
  .hero--compact .hero__lead {
    max-width: 50%;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .hero--compact .hero__lead {
    max-width: none;
  }
}

/* MEDIDO no botao do hero compacto de /solucoes: ele ocupa 35% da coluna no
   desktop (210 de 600) e 70% no tablet/celular (246 de 352, 251 de 358), com o
   texto recuado 20px da borda esquerda. O vao ate a seta e o resto da largura,
   por isso ele cresce de 68 para 109 conforme a tela encolhe. */
.hero--compact .btn--ghost {
  width: 35%;
  padding-left: 20px;
  /* o original espaca as letras deste botao; sem isso "Saiba Mais" fica 10px
     mais estreito (1px por caractere) e a seta se desloca. */
  letter-spacing: 1px;
}

/* 35% vale ate 767: no tablet a coluna do hero ainda e a inteira (704), entao
   35% dela da os mesmos 246 que o original tem em sua coluna de 352. */
@media (max-width: 767px) {
  .hero--compact .btn--ghost {
    width: 70%;
  }
}

/* MEDIDO no vao entre a faixa verde e "Nossa missao": o original soma 32+48+48
   ate o titulo no tablet e 32+48+0 no celular, contra os 120+48 que eu usava.
   Fica depois da regra de 120px, que e mais especifica que uma media query. */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-banner + section[aria-labelledby='tit-missao'] {
    padding-top: 32px; /* MEDIDO: 32 ate o BLOCO (os 88 miravam o titulo) */
    /* MEDIDO: 76px ate o titulo da FAQ, menos os 36,3 de recuo da secao dela. */
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .page-banner + section[aria-labelledby='tit-missao'] {
    /* MEDIDO: 32 ate o BLOCO em cima (era 40, mirando o titulo) e 40 embaixo. */
    padding-block: 32px 44px; /* 76 ate o titulo da FAQ, menos os 32 da secao dela */
  }
}

/* MEDIDO: a faixa verde de titulo mede 150px no celular, nao 200. Como o texto
   e centralizado, os 50px sobrando empurravam o titulo 25px para baixo e o
   bloco seguinte 50px. */
@media (max-width: 767px) {
  .page-banner {
    min-height: 150px;
  }
}

/* MEDIDO: o original balanceia as duas linhas deste rotulo (text-wrap: balance
   no icon-box do Elementor). Sem isso "Aumento do ticket" ficava numa linha so
   e "medio" sozinha embaixo, em vez das linhas de 89 e 90px do original.
   E o unico ponto do site onde ele balanceia — nos demais eu havia tirado o
   balance justamente porque mudava a quebra. */
.feature {
  text-wrap: balance;
}

/* MEDIDO no tablet: a coluna do texto do hero da home mede 640 (o container de
   704 com 64px de recuo a direita), nao os 536 que o meu teto de medida dava. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero__lead {
    max-width: 640px;
  }

  /* MEDIDO: os tres numeros ocupam 192px cada (30% dos 640 uteis), distribuidos
     por space-between. Dimensionados pelo conteudo ficavam 181/222/... e cada
     rotulo caia num x diferente do original. */
  .stats__grid > * {
    flex: 0 0 30%;
  }
}

/* MEDIDO: o recuo direito da pilula e 21px, nao 20. Um pixel decide a quebra —
   com 192 disponiveis "Suporte especializado e humanizado" quebra num ponto e
   com os 191 do original em outro (linha de 179 contra 192). */
.pill {
  padding-right: 21px;
}

/* MEDIDO em 4 larguras da faixa do tablet: o botao acompanha o CONTAINER, e
   sempre em 40% dele — 384 de 960 em 1024, 334 de 836 em 900, 294 de 736 em 800
   e 282 de 704 em 768. Os 282px fixos que estavam aqui foram medidos so em 768,
   onde 40% coincide; em 1024 o botao saia 102px estreito e o rotulo centralizado
   ia 51px para a direita. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cta-dark__inner .btn {
    width: 40%;
  }
}

/* MEDIDO: no celular o bloco da missao recua 16px na lateral, nao 32 — o cartao
   mede 326 de 358. Com 32 o paragrafo caia para 262 de largura e ganhava uma
   11a linha, empurrando o FAQ 98px para baixo. */
@media (max-width: 767px) {
  .mission {
    padding-inline: 16px;
  }
}

/* MEDIDO: no celular o titulo da missao mede 294 de 326 — o original aninha
   mais 16px de cada lado dentro do bloco. Ocupando os 326 inteiros ele quebrava
   em 3 linhas de 302 no lugar das 4 de 271 do original. */
@media (max-width: 767px) {
  .mission__title {
    max-width: calc(100% - 32px);
    margin-inline: auto;
  }
}

/* MEDIDO no cabecalho do original: o menu e o botao formam um grupo a direita
   (o vao logo->menu e 430px e o menu->botao so 36), e os itens do menu se
   separam por 42px, nao 32. Com space-between puro entre os tres, o menu caia
   188px a esquerda do lugar. */
.site-nav {
  margin-left: auto;
}

/* Só no DESKTOP: abaixo de 1025 o menu vira o painel suspenso, cujos itens são
   contíguos (35px de passo, medido). Sem o recorte por faixa este vão de 42px
   vencia por ordem a regra do painel — que está num @media e portanto não ganha
   especificidade — e o passo do menu mobile ia a ~70px. */
@media (min-width: 1025px) {
  .site-nav__list {
    gap: 42px;
  }
}

/* MEDIDO: o disparador do submenu ocupa 16x16, nao 20x20. */
.site-nav__disclosure {
  width: 16px;
  height: 16px;
}

/* MEDIDO: o vao entre o menu e o botao e 37px (o meu dava 32), o que deslocava
   os cinco itens do menu 5px a direita.
   Só no DESKTOP: abaixo de 1025 o menu é o painel suspenso, que sangra de borda
   a borda — estes 5px o deixavam com 385 de 390. */
@media (min-width: 1025px) {
  .site-nav {
    margin-right: 5px;
  }
}

/* MEDIDO no tablet: o original distribui logo | invólucro de 50% | hamburguer
   por space-between, e o botao fica encostado a direita do invólucro. O efeito
   e um vao botao->hamburguer de 122px em 1024 e 58 em 768, ou seja 25% da area
   util menos 126. O hamburguer, por sua vez, para 16px antes da borda. Sem isso
   o botao caia 172px a esquerda do lugar. */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-nav__cta {
    margin-left: auto;
    margin-right: calc(25% - 150px); /* medido nas duas larguras: 122 em 1024, 58 em 768 */
  }

  .nav-toggle {
    margin-right: 16px;
  }
}

/* MEDIDO comparando as superficies pintadas com o original (nao so o texto):
   quatro diferencas que nenhum comparador de texto enxerga. */

/* O circulo do icone dos destaques do hero mede 60px, nao 56. */
.feature__icon {
  width: 60px;
  height: 60px;
}

/* O marcador do acordeao mede 36px, nao 34. */
.faq__mark {
  width: 36px;
  height: 36px;
}

/* O corpo do cartao de solucao arredonda os cantos DE BAIXO (os de cima sao
   retos porque a imagem encosta neles). O meu estava quadrado nos quatro. */
.solution__body {
  border-radius: 0 0 14px 14px;
}

/* MEDIDO: no desktop o botao mede 302px, mas isso e um TETO — ele acompanha a
   coluna quando ela e mais estreita (259 em 1027, onde a coluna tem 259; 302 em
   1440 e 1920, onde ela e maior). Travado em 302 ele estourava a coluna em 1027
   e o rotulo saia 43px largo. */
@media (min-width: 1025px) {
  .cta-dark__inner .btn {
    width: min(100%, 302px);
  }
}

/* MEDIDO com o acordeao aberto: o original espaca por MARGENS, nao por gap —
   10px sob a cabeca e 15px sob o item —, e o corpo recua 37px em cima e embaixo
   (18 do container externo + 19 do interno). Com gap de 16 no lugar disso o
   passo de um item ao seguinte dava 231 contra os 247 do original, erro que se
   repetia em cada pergunta de cada pagina. */
/* So com o item ABERTO: fechado, o cabecalho do original mede 66px e o passo
   ate o proximo e 81 (66 + os 15 da margem do item). Aplicada sempre, esta
   margem somava 10px por pergunta — 60px de pagina a mais em /sobre-nos. */
.faq__item[open] .faq__q {
  margin-bottom: 10px;
}

/* MEDIDO pela LISTA INTEIRA, nao pelo vao de um par: com 6 itens de 66px, o
   original fecha 456px do topo do primeiro ao fim do ultimo (456 = 6x66 + 5x12) e
   eu fechava 471 (5x15). Sao 3px por vao, 15 no total — e como o bloco de contato
   vem logo abaixo, esses 15 empurravam a pagina inteira e reprovavam as faixas do
   contato nas tres larguras. Medir um vao so nao acusaria: 12 e 15 diferem menos
   que a tolerancia do comparador de geometria. */
.faq__item {
  margin-bottom: 12px;
}

.faq__list {
  row-gap: 0;
}

/* MEDIDO: do titulo ao primeiro item o original deixa 32px (home e sobre-nos) e
   39px nas paginas de solucao, onde o titulo e o "Mais Informacoes".
   E padding, nao margin: margens de irmaos adjacentes COLAPSAM, entao o
   margin-top da lista era simplesmente engolido pelo margin-bottom do titulo e
   a regra nao mudava um pixel. */
.faq__list {
  padding-top: 4px;
}

.more-info__title + .faq__list {
  padding-top: 18px;
}

/* MEDIDO no rodape: entre um link e o seguinte o original deixa 33px (o meu
   dava 28) e do titulo da coluna ao primeiro link, 46 (o meu, 51). O erro se
   acumulava coluna abaixo e chegava a 16px no ultimo item. */
/* MEDIDO: o passo entre itens da coluna é 33px (21 do item + 12 de vão). Com 13
   o passo ia a 34 e o desvio somava linha a linha. */
.site-footer__col ul {
  row-gap: 12px;
}

.site-footer__col ul:first-of-type,
.site-footer__col > ul {
  margin-top: -5px;
}

/* MEDIDO no cartao de solucao: a cabeca mede 400px e o corpo 274 (o meu tinha
   404 e 270, com o total certo de 674 mas a divisao errada), e do titulo da
   secao a grade o original deixa 20px a mais do que eu deixava. Com padding
   (nao margin) para nao colapsar com a margem do titulo. */
.solution__head {
  padding-bottom: 16px;
}

.solution__body {
  padding-top: 32px;
}

.solutions__title + .solution-grid {
  padding-top: 20px;
}

/* MEDIDO no bloco de texto do produto: no original os paragrafos se separam por
   MARGEM de 14,4px (nao por gap do container), e o botao vem depois de um gap
   de 20 — ou seja, do ultimo texto ao botao sao 34,4 e nao os 20 que eu tinha.
   Em grid as margens nao colapsam, entao as duas somam. */
.product__text {
  row-gap: 0;
}

.product__text > p {
  margin-bottom: 14.4px;
}

/* MEDIDO: 20px abaixo do titulo do bloco do produto.
   `h1` entrou quando o titulo da solucao virou o <h1> da pagina (antes a faixa
   verde levava o h1 e o nome do produto era <h2>). Sem ele o seletor deixava de
   casar e valia o `.product__title { margin-bottom: 0 }` da linha ~2628 — que
   esta MORTO desde sempre, porque esta regra aqui tem especificidade (0,1,1)
   contra (0,1,0) e sempre venceu. O efeito era 20px a menos abaixo do titulo, e
   20px a menos na altura do documento em <=767px: pego pela medicao, nao pela
   leitura do CSS. `h2`/`h3` continuam porque o WYSIWYG do conteudo os produz. */
.product__text > h1,
.product__text > h2,
.product__text > h3 {
  margin-bottom: 20px;
}

.product__text > .btn {
  margin-top: 20px;
}

/* MEDIDO: a margem de 15px do ultimo item sobra no fim da lista e empurrava a
   secao seguinte. No original ela existe entre itens, nao depois do ultimo. */
.faq__item:last-child {
  margin-bottom: 0;
}

/* MEDIDO no celular: o bloco do produto fecha com 48px, nao 80 — do botao ao
   inicio da secao seguinte o original deixa 48. */
@media (max-width: 767px) {
  .product {
    padding-bottom: 48px;
  }
}

/* MEDIDO no celular: a secao "Mais Informacoes" abre com 48px (16 do container
   externo + 32 do interno), nao 32. Antes esse erro se cancelava com o rodape
   de 80px do bloco do produto e o vao total parecia so 16 fora. */
@media (max-width: 767px) {
  .section:has(.more-info__title) {
    padding-top: 48px;
  }
}

/* MEDIDO: no original os quatro destaques sao alinhados ao TOPO — o texto de
   todos comeca em y=635, tenha ele uma, duas ou tres linhas, e a caixa e que
   varia de altura (107 a 127). Os meus tinham altura uniforme com o conteudo
   centralizado, entao o inicio do texto oscilava 11px de um para o outro. */
.feature {
  align-content: start;
  row-gap: 4px;
}

/* MEDIDO no tablet/celular: no rodape o vao entre links cai para 31px e do
   titulo ao primeiro link para 44 (contra 33 e 46 no desktop). */
@media (max-width: 1024px) {
  .site-footer__col ul {
    row-gap: 11px;
    margin-top: -3px;
  }
}

/* MEDIDO: na faixa do tablet o original desce o titulo 16px nas paginas de
   solucao (194 contra os 178 de /sobre-nos), com a mesma marcacao e a mesma
   altura de faixa. E uma inconsistencia do proprio original; reproduzida aqui
   por fidelidade, isolada num modificador. */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-banner--solucao {
    padding-block: 64px 32px;
  }
}

/* MEDIDO no celular: o bloco do produto abre com 64px (a figura comeca em 321
   de um container que comeca em 257) e a figura fica 97px acima do texto —
   eu abria com 80 e colava o texto 31px abaixo da imagem, o que subia o titulo
   9px em todas as sete paginas de solucao. */
@media (max-width: 767px) {
  .product {
    padding-top: 32px;
  }

  .product__figure {
    margin-block: 10px 105px;
  }

  .product__figure img {
    /* MEDIDO: no celular a moldura da imagem mede 366px, nao os 386 do desktop. */
    height: 366px;
  }
}

/* MEDIDO no hero compacto: a secao mede 400px (95..495), com 48 de recuo e a
   figura de 288px folgando 8px em cima e embaixo. O meu fechava em 279 porque a
   linha da grade era dimensionada pelo texto (215px) e a figura, com
   align-self:end, vazava 41px para fora — cortados pelo overflow:hidden da
   secao. Isso tambem subia o titulo 37px e encurtava a pagina em 82. */
.hero__inner--compact {
  padding-block: 48px;
  align-items: center;
}

.hero--compact .hero__art {
  align-self: center;
  margin-block: 8px;
}

/* MEDIDO: a coluna de texto do hero compacto e alinhada ao TOPO (o titulo cai
   em 172 enquanto a figura ocupa 151..439), com 21px de folga acima do titulo.
   Centralizada junto com a figura ela descia 24px. */
.hero__inner--compact > div:first-child {
  align-self: start;
  padding-top: 36px;
}

/* Abaixo de 1025 o hero EMPILHA (uma coluna so) e o texto comeca no topo dela —
   os 36px acima sao do layout de duas colunas, onde o texto se alinha ao topo ao
   lado da figura. A regra so cobria 767; na faixa do tablet os 36 sobravam e
   empurravam a grade e o rodape da listagem inteira. */
@media (max-width: 1024px) {
  .hero__inner--compact > div:first-child {
    padding-top: 0;
  }
}

/* MEDIDO: acima de 1440 o original sobe o titulo do hero compacto 11px
   (161 em 1920 contra 172 em 1440). */
@media (min-width: 1441px) {
  .hero__inner--compact > div:first-child {
    padding-top: 25px;
  }
}


/* MEDIDO: no FAQ da home e de /sobre-nos a resposta E o proprio <p class="faq__a">,
   entao a regra ".faq__a p" nunca a alcancava e ela herdava 16,8px onde o
   original usa 15,629 no celular — 7,5% maior, o que somava uma linha em cinco
   das seis respostas. */
.faq__a {
  font-size: var(--fs-texto);
  line-height: 1.2;
}

/* MEDIDO no bloco "Nossos clientes" (o outro carrossel, o de "Quem usa Gototem
   recomenda!", tem medidas proprias): 20px entre o titulo e a faixa, e a faixa
   dentro de um bloco de 105px — 75 da tira mais 15 de recuo em cima e embaixo. */
section[aria-labelledby='tit-clientes'] .marquee {
  margin-top: 20px;
  padding-block: 15px;
}

/* MEDIDO: a secao dos logos nao tem recuo inferior proprio no original — quem
   separa dela o bloco seguinte e o recuo daquele. Com os 47px daqui somando por
   cima, o vao ate "Melhore a operacao" ficava 49px maior. */
section[aria-labelledby='tit-clientes'] {
  padding-bottom: 0;
}

/* MEDIDO no celular: a secao das estatisticas abre com 37px (o resto do vao vem
   dos 32 do proprio bloco), nao com 63. */
@media (max-width: 767px) {
  .section:has(> .wrap > .stats) {
    padding-top: 37px;
  }
}

/* MEDIDO comparando a fonte COMPUTADA de cada texto pintado, nas 10 paginas:
   estes herdavam --fs-body (16,8) onde o original usa --fs-texto (17,31 / 16,04
   / 15,63 conforme a largura). Meio pixel por caractere muda o ponto de quebra e
   a altura da linha, e o erro se acumulava coluna abaixo no rodape. */
/* O RODAPÉ é --fs-texto mesmo: 17,312px / peso 400 / entrelinha 20,7744 nos dois
   lados, conferido rótulo por rótulo. O `.site-nav__link` saiu daqui — no menu o
   original usa 16px com teto, e este seletor o levava a 17,312. Estavam juntos
   porque nenhum dos dois era visível ao comparador de geometria. */
.site-footer__col a,
.site-footer__col span {
  font-size: var(--fs-texto);
}

.advantages__text p {
  font-size: var(--fs-texto);
  line-height: 1.2;
}

.site-footer__legal {
  font-size: var(--fs-texto);
}

/* MEDIDO: o vao da faixa escura ate "Perguntas Frequentes" e 186px FIXO no
   original (1920 e 1440), enquanto o meu encolhia com o recuo fluido da secao
   (181 e 175). No desktop o recuo de topo do FAQ e constante: 52px. */
@media (min-width: 1025px) {
  .section:has(> .wrap > .faq__list):not(:has(.more-info__title)) {
    padding-top: 52px;
  }
}

/* MEDIDO fora do desktop: o vao do ultimo cartao de vantagem ate "Solucoes em
   Autoatendimento" e 128 no tablet e 172 no celular; com os 5px do desktop dava
   114 e 157. */
@media (max-width: 1024px) {
  /* Sem a exclusao esta regra vence a de .section--lista-solucoes por vir depois
     no arquivo, e /solucoes — que usa o mesmo aria-labelledby com valor OPOSTO —
     perdia 29px do vao. */
  [aria-labelledby='tit-soluc']:not(.section--lista-solucoes) {
    padding-top: 19px;
  }
}

/* MEDIDO no celular: do fim do texto de apoio ao titulo do primeiro cartao de
   vantagem sao 569px; com os 64 de recuo no topo da grade dava 587. */
@media (max-width: 767px) {
  .advantages__grid {
    padding-top: 46px;
  }
}

/* MEDIDO no celular: do fim da lista de segmentos ao titulo da faixa escura sao
   124px; com os 40 de recuo no topo dela dava 108. */
@media (max-width: 767px) {
  .cta-dark__inner {
    padding-top: 56px;
  }
}

/* MEDIDO no tablet: a secao dos logos abre com 48px (vao de 756 desde o ultimo
   destaque do hero), nao com os 33 do recuo padrao. */
@media (min-width: 768px) and (max-width: 1024px) {
  [aria-labelledby='tit-clientes'] {
    padding-top: 48px;
  }
}

/* MEDIDO no tablet: do titulo "Quem usa Gototem recomenda!" ate "Alguns modelos
   de negocio" sao 221px; com os 106 de recuo do desktop dava 197. */
@media (min-width: 768px) and (max-width: 1024px) {
  [aria-labelledby='tit-segmentos'] {
    padding-top: 130px;
  }
}

/* MEDIDO em 1024: o original quebra a grade de solucoes em DUAS colunas
   (cartoes em x=64 e 559, de 465px), enquanto o auto-fit da minha ainda cabia
   tres — a area util de 960 aceita 3x300+2x30 exatos. De 1025 para cima sao
   tres nos dois. */
@media (min-width: 768px) and (max-width: 1024px) {
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MEDIDO em 700/760/766/767: abaixo de 768 o original empilha a grade de
   solucoes em UMA coluna. O auto-fit da minha ainda cabia duas ate 767 (a area
   util de 735 aceita 2x300+30), e so caia para uma perto de 630. */
@media (max-width: 767px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }
}

/* MEDIDO: a caixa do subtitulo do hero e a COLUNA MENOS 64px — 449 numa coluna
   de 512 (1025), 486 em 550 (1100) e 536 em 600 (1200+). Com os 536 fixos, em
   1025 ele cabia numa linha a mais que o original. So acima de 1024: abaixo o
   hero empilha e tem regras proprias. */
@media (min-width: 1025px) {
  .hero__lead {
    max-width: calc(100% - 64px);
  }
}

/* MEDIDO em 1025/1100/1200/1300/1440/1920: o botao do bloco de produto ocupa
   42,5% da coluna (216 de 513, 233 de 550, 256 de 600), nao 256 fixos — que em
   1025 sobravam da coluna e mudavam a quebra do rotulo. */
@media (min-width: 1025px) {
  .product__text > .btn {
    /* O gap de 41px do .btn e um MINIMO, e aqui ele consumia exatamente a folga
       que faltava: 20 + 153 (rotulo) + 41 + 34 (icone) + 8 = 256, o proprio
       tamanho do botao — qualquer fracao de pixel quebrava o rotulo em duas
       linhas. Como o botao e space-between, baixar o minimo nao move o icone:
       ele continua encostado a direita. */
    gap: 12px;
    /* O teto de 256 e necessario: 42,5% de uma coluna de 600 da 255, e UM pixel
       a menos ja fazia "Entrar em Contato" quebrar em duas linhas em 1920. A
       porcentagem resolve contra a AREA INTERNA da coluna (568 de 600, por
       causa dos 16px de recuo), nao contra os 600. */
    width: min(45.1%, 256px);
  }
}

/* MEDIDO: a coluna do formulario e 72% da area interna do cartao de contato —
   715 de 993 em 1025 e 841 de 1168 em 1200, exato nos dois. Com a primeira
   coluna fixa em 292px, em 1025 o formulario nascia 49px a direita e 49 mais
   estreito, deslocando os seis campos. */
@media (min-width: 1025px) {
  .contact {
    grid-template-columns: 1fr 72%;
  }
}

/* MEDIDO no celular: o botao do bloco de produto ocupa a coluna inteira (326 de
   326), nao os 256 do desktop. */
@media (max-width: 767px) {
  .product__text > .btn {
    width: 100%;
  }
}

/* MEDIDO em 1025/1100/1200/1440/768: a pilula do hero ocupa 48% da coluna —
   246 de 512, 264 de 550, 288 de 600 e 338 de 704 — com vao fixo de 20. Presa
   em 288px, em 1025 e 1100 ela nao cabia em duas por linha e empilhava, o que
   deslocava todo o hero. Abaixo de 768 ela passa a ocupar a linha inteira. */
@media (min-width: 768px) {
  .pill {
    flex: 0 0 48%;
    max-width: 48%;
  }
}

@media (max-width: 767px) {
  .pill {
    flex: 0 0 100%;
    max-width: none;
  }
}

/* MEDIDO pela LARGURA DO CARTAO, que e o dado sem ambiguidade: em 1025 o
   cartao do original mede 215px numa area util de 897 — quatro colunas
   ((897-3x15)/4 = 213). O auto-fit com minmax(215px) caia para tres ali (4x215
   + 3x15 = 905 > 897) e dava cartoes de 289. Inferir o numero de colunas pelo x
   dos titulos enganou numa primeira leitura: eles sao CENTRALIZADOS, entao o x
   depende da largura de cada frase, nao da coluna. */
@media (min-width: 1025px) {
  .advantages__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* MEDIDO em 1024/900/768 e 767/600/390: a caixa do subtitulo do hero e a coluna
   MENOS 64px enquanto ele divide espaco (896 de 960, 772 de 836, 640 de 704) e
   passa a ocupar a coluna INTEIRA abaixo de 768 (735, 568, 358). E o mesmo
   padrao do desktop; eu tinha 640 e 536 fixos, certos so em 768 e 390. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero__lead {
    max-width: calc(100% - 64px);
  }
}

@media (max-width: 767px) {
  .hero__lead {
    max-width: none;
  }
}

/* ==========================================================================
   4. PORTE PARA O CMS — o que muda porque o conteúdo agora vem do banco
   ==========================================================================
   As páginas de solução deixaram de ser HTML escrito à mão: o corpo do acordeão
   é conteúdo editável no admin e passa pelo HtmlSanitizer (HTMLPurifier), que
   permite só um conjunto de tags SEM atributos. Consequência prática: as classes
   `.info-list` e `.info-espaco` do site estático NÃO sobrevivem à sanitização.

   Em vez de afrouxar o whitelist do núcleo (é fronteira de segurança), as mesmas
   medidas passam a valer por seletor ESTRUTURAL. Os valores abaixo são cópia
   exata dos originais — não remeça, só mudou o gancho.

   Este bloco fica no FIM do arquivo de propósito: uma regra em @media não ganha
   especificidade, e as declarações-base de .faq__a vêm adiante no arquivo — se
   isto estivesse antes, elas venceriam por ordem. (Armadilha documentada no
   método de cópia fiel; aconteceu três vezes no porte estático.)
   ========================================================================== */

/* Lista dentro do acordeão: era ul.info-list. */
.faq__a ul,
.faq__a ol {
  display: grid;
  gap: 0; /* MEDIDO: itens contíguos no original (1208..1250, 1250..1291) */
  margin: 0;
  padding-left: 40px; /* medido: 40px, não 18,4 */
  list-style: disc;
}

.faq__a li {
  padding-left: 0; /* medido: o recuo vem todo do <ul> */
  font-size: var(--fs-texto);
  line-height: 1.2;
}

/* Espaçador entre dois grupos do acordeão: NÃO é regra de CSS.
   No site em produção ele é um <p>&nbsp;</p> — conferido no HTML no ar —, e um
   parágrafo com &nbsp; sobrevive ao HtmlSanitizer (tem conteúdo, então o
   AutoFormat.RemoveEmpty não o descarta) e já rende a linha de 21px + 14,4 de
   margem que a medida pede. O extrator do seed o preserva como conteúdo.

   Houve uma tentativa de reproduzi-lo por seletor (".faq__a ul + p"), e ela
   ERRAVA: o original tem espaçador só entre ALGUNS grupos, não depois de toda
   lista. O comparador de geometria acusou 133 vãos com desvio de ±35px — o
   valor exato da regra — em ±36 pontos da página do Gototem FOOD. */

/* --- Página estática genérica ----------------------------------------------
   O site portado tem UMA página ("Sobre Nós", com template próprio). Estes
   estilos servem as páginas que o cliente criar depois no admin: sem eles a
   prosa sairia sem largura de leitura, porque o <main> do layout é
   passe-through (cada seção cuida da própria faixa).
   Os valores reusam os tokens medidos — não são medida nova de nada. */
.page-prose {
  width: min(70%, 840px); /* mesma caixa de leitura do FAQ */
  margin-inline: auto;
}

.page-prose--wide {
  width: 100%;
  max-width: none;
}

.page-prose > * + * {
  margin-top: 14.4px;
}

.page-prose h2,
.page-prose h3 {
  margin-top: var(--sp-md);
  font-family: var(--font-display);
}

.page-prose ul,
.page-prose ol {
  padding-left: 40px;
  list-style: disc;
}

.page-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.page-sidebar {
  display: grid;
  gap: var(--sp-md);
}

@media (min-width: 1025px) {
  .page-sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  /* Dentro da grade de duas colunas a prosa ocupa a coluna inteira. */
  .page-sidebar .page-prose {
    width: 100%;
    margin-inline: 0;
  }
}

/* --- Página de erro (404/403/500) ------------------------------------------ */
.error-page {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.error-page__msg {
  margin-bottom: var(--sp-md);
  font-size: var(--fs-texto);
  line-height: 1.2;
}

/* --- Telas-portão (manutenção / em breve) ---------------------------------- */
.gate {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--sp-lg) var(--sp-md);
  /* ESCURO, e não o verde do hero, por causa do LOGO. O `logo.webp` é a versão
     positiva da marca — caixa verde com "go" branco e "totem" em verde. Sobre o
     --bg-hero (o mesmo verde), a caixa se dissolve no fundo e o "totem" fica
     invisível: sobra um "go" branco solto (visto em produção). O tema não tem
     variante negativa da marca, e inventar uma sem o vetor seria chute — é a
     pendência do material vetorial em docs/tema-gototem.md.
     Então usamos o fundo em que o logo JÁ é usado e está provado: o do header.
     De brinde, o `.btn` (verde) também deixa de sumir, o que acontecia no verde. */
  background: var(--bg-header);
  color: var(--text-on-dark);
  text-align: center;
}

.gate__inner {
  max-width: 640px;
}

.gate__logo {
  /* `margin-inline: auto` e não `text-align`: o reset do tema (linha ~338) tem
     `img { display: block }`, então a imagem não é afetada pelo `text-align:
     center` do `.gate` — ela encostava à esquerda do `.gate__inner` enquanto
     título e texto ficavam centrados. */
  margin-inline: auto;
  margin-bottom: var(--sp-md);
}

.gate__title {
  margin-bottom: var(--sp-sm);
  color: var(--text-on-dark);
}

.gate__lead {
  margin-bottom: var(--sp-md);
  font-size: var(--fs-texto);
  line-height: 1.2;
}

/* ── Deriva vertical: fechamento dos intervalos da home ──────────────────────
   Levantado parando TODOS os títulos das duas páginas e pareando por texto: a
   coluna "passo" do mapa diz quanto o tema perde ou ganha em CADA intervalo.
   Cada valor abaixo é o recuo atual MAIS o passo medido naquela largura —
   nenhum foi escolhido.

   Por que os intervalos vão juntos e não um a um: o comparador de pixel só
   premia deriva acumulada ZERO. Bloco desenhado certo, com a página deslocada,
   reprova a faixa inteira igual. Corrigir um intervalo isolado só empurra o
   acúmulo para outro lugar — foi o que aconteceu na rodada anterior, em que
   vários blocos passaram a bater exato e o placar não subiu. */
@media (min-width: 1025px) {
  [aria-labelledby='tit-clientes'] {
    padding-top: 50px; /* 41,28 + 9 */
  }

  [aria-labelledby='tit-vantagens'] {
    padding-top: 49px; /* 41,28 + 8 */
  }

  /* :not(.section--lista-solucoes) pela MESMA razao da regra la de cima: a
     listagem usa o mesmo aria-labelledby com valor oposto, e uma regra sem a
     exclusao no fim do arquivo vence por ordem. Sem isso /solucao encurtava 69px. */
  [aria-labelledby='tit-soluc']:not(.section--lista-solucoes) {
    padding-top: 11px; /* 5 + 6 */
  }

  [aria-labelledby='tit-segmentos'] {
    padding-top: 114px; /* 106 + 8 */
  }

  /* A faixa escura desce 10px, mas a ALTURA dela já bate (375 nos dois lados):
     por isso margem, não recuo — recuo aumentaria a faixa junto. */
  .cta-dark {
    margin-top: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  [aria-labelledby='tit-numeros'] {
    padding-top: 27px; /* 38 − 11 */
  }

  [aria-labelledby='tit-segmentos'] {
    padding-top: 119px; /* 130 − 11 */
  }
}

/* ── Hero compacto (/solucao) fora do desktop ────────────────────────────────
   MEDIDO nos dois lados: acima da arte o original deixa 32px no tablet e 48 no
   celular, e da arte ao h1 sempre 32. Eu tinha 56 acima (48 de recuo + 8 de
   margem da figura) e 76/40 abaixo (a margem de 8 mais 36 que o título trazia
   no tablet). Como toda a listagem desce junto, esses 66px empurravam a grade
   inteira e o rodapé — era o maior termo de deriva da página. */
@media (max-width: 1024px) {
  .hero--compact .hero__art {
    margin-block: 0;
  }

  .hero__inner--compact .hero__title {
    margin-top: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero__inner--compact {
    padding-top: 32px;
  }
}

@media (max-width: 767px) {
  .hero__inner--compact {
    padding-top: 48px;
  }
}

/* MEDIDO na faixa do tablet: a ilustração do contato começa 22px ABAIXO do topo
   do bloco (o original a põe em y+22 num bloco que abre em y+0), enquanto a
   margem negativa de −48 herdada do desktop a encostava no topo. São 22px de
   deslocamento numa figura de 464px de altura — cinco faixas inteiras da
   comparação de imagem, com todo o resto do bloco já batendo. */
/* MEDIDO na faixa do tablet: com a altura do bloco ja correta (509 contra 512),
   o que sobrava era a figura 22px alta dentro dele — o original a poe em y+22 e a
   minha encostava no topo. Deslocamento VISUAL de proposito: mexer na margem ou
   na ancora do grid crescia o bloco junto (testei os dois: 534 e 560 de altura
   contra os 509 do original) e empurrava titulo, campos e botao. A figura e
   decorativa e nao participa do fluxo do formulario. */
@media (min-width: 768px) and (max-width: 1024px) {
  .contact__art {
    position: relative;
    top: 22px;
  }
}

/* ── Moldura da foto do produto: posição horizontal ──────────────────────────
   MEDIDO nos dois lados, nas 3 larguras. No desktop a moldura tem a MESMA
   largura (485px) mas fica 10px mais à esquerda: o original vai de 225 a 710
   num container que termina em 720, ou seja NÃO encosta na direita. Fora do
   desktop ela é 20px mais estreita que a minha, recuada 10px de cada lado
   (26..364 num wrap de 16..374, a 390).

   Como a foto ocupa quase toda a moldura, esses 10px deslocavam a imagem
   inteira — e o comparador de imagem não alinha na horizontal, então a faixa
   toda era cobrada. As 7 páginas de produto compartilham este bloco. */
@media (min-width: 1025px) {
  .product__figure {
    margin-right: 10px;
  }
}

/* Fora do desktop a moldura ESTREITA (nao desloca): no tablet ela vai de 42 a 502
   num container que termina em 502 — 10px so a esquerda; no celular fica 26..364
   num wrap de 16..374, 10px de cada lado. */
@media (min-width: 768px) and (max-width: 1024px) {
  .product__figure {
    width: calc(100% - 20px);
    margin-inline: 10px 0;
  }
}

@media (max-width: 767px) {
  .product__figure {
    width: calc(100% - 20px);
    margin-inline: 10px;
  }
}

/* MEDIDO nos dois lados: do topo da ilustração das vantagens até o título há 129px
   no desktop e 123 no tablet; eu deixava 121 e 117. São 8 e 6px — pouco, mas a
   figura tem 336px de altura e o desvio derrubava duas faixas inteiras da
   comparação de imagem. A margem negativa de sangria continua; só o topo sobe. */
@media (min-width: 1025px) {
  .advantages__art {
    margin-top: calc(var(--sp-lg) * -1 - 8px);
  }
}

/* Na faixa do tablet os mesmos 6px MEDIDOS pioraram o placar (10 -> 13 faixas):
   o vao ate o titulo acertava, mas a figura desalinhava dos cartoes abaixo dela.
   Deixado como estava — medida certa, efeito errado, e o efeito e que vale. */

/* MEDIDO no botão "Saiba Mais" (pílula BRANCA) do hero da listagem: o círculo do
   ícone é VERDE rgb(43,157,115) com a seta BRANCA, e mede 30×30 — o inverso do
   botão sólido, onde o círculo é branco e a seta verde (esse já batia).

   Eu usava a regra base nos dois: círculo branco sobre pílula branca, ou seja
   invisível, com uma seta escura solta. É o mesmo tipo de inversão que aconteceu
   no menu do desktop, e de novo nenhum comparador de DOM acusou — o elemento
   existe, tem a posição e o tamanho quase certos, só as cores estão trocadas. */
.btn--ghost .btn__icon {
  width: 30px;
  height: 30px;
  background: var(--c-green);
  color: var(--c-white);
}

/* MEDIDO a 390: a faixa de logotipos começa em y=1327 no original e em 1323 no
   tema — 4px, que é exatamente o quanto a página inteira fechava curta. */
@media (max-width: 767px) {
  [aria-labelledby='tit-clientes'] {
    padding-top: 68px;
  }
}

/* MEDIDO a 1024: as quatro colunas do rodapé medem 210px com vão de 20 e sobra
   folga à direita (32, 262, 492, 722 num .wrap de 960) — não são esticadas para
   preencher, como eu fazia com flex:1 1 0 (que dava 225 cada, passo 245). A
   largura errada muda a quebra: "Gototem CARDÁPIO MOBILE" cabe numa linha aqui e
   quebra em duas no original. 21,875% de 960 são exatamente os 210. */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer__col {
    flex: 0 0 21.875%;
  }
}

/* ==========================================================================
   Página "link na bio" (pages/links.php) — coluna única, sem chrome.
   Roda em modo bare (sem header/rodapé e sem app_scripts), então é 100% CSS.

   Linguagem do tema, reaproveitada sem inventar componente novo: cartão
   off-white com raio de 14px e a sombra MEDIDA dos cards (--shadow-card),
   título em Geologica, verde da marca no ícone.

   Duas decisões de contraste, ambas resolvidas DENTRO da paleta existente:

   - o botão de DESTAQUE usa --c-green-dark (#0c7e54), não --c-green. Rótulo
     branco dá 5,09:1 contra 3,40:1 do verde claro. O site no ar carrega os
     3,40:1 por fidelidade (ver a nota em --text-accent), mas esta página NÃO
     existe no original: sem fidelidade a preservar, não há motivo para nascer
     abaixo da WCAG AA;
   - no esquema ESCURO o acento vira --c-lime, que é o que o próprio tema já usa
     sobre fundo escuro (--text-nav no cabeçalho). Verde sobre #282828 dá 4,33:1
     (abaixo dos 4,5:1); o lima dá 13,1:1.
   ========================================================================== */
.bio {
  width: 100%;
  padding-block: var(--sp-lg);
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
}
.bio__inner {
  max-width: 480px;
  margin: 0 auto;
  padding-inline: var(--sp-sm);
  text-align: center;
}

.bio__avatar {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--sp-md);
  object-fit: cover;
  border-radius: var(--r-logo);
  box-shadow: var(--shadow-card);
}
/* A logo é MARCA: mantém a proporção natural, não entra no quadrado do avatar.
   Sem filtro de inversão no escuro (ver o cabeçalho de pages/links.php): a
   marca da Gototem é verde e o cabeçalho do site já é #282828 — ela nasce
   legível nos dois esquemas. */
.bio__logo {
  display: block;
  width: auto;
  max-width: 210px;
  max-height: 75px;
  margin: 0 auto var(--sp-md);
}

.bio__text {
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-texto);
  line-height: 1.45; /* solto de propósito: --lh-body (1,2) é apertado demais
                        para um parágrafo isolado no meio da coluna */
  color: var(--text-body);
  text-wrap: pretty;
}
.bio__text > :first-child { margin-top: 0; }
.bio__text > :last-child { margin-bottom: 0; }

.bio__links {
  display: grid;
  gap: var(--sp-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bio-link {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 56px;
  padding: var(--sp-xs) var(--sp-sm);
  text-align: left;
  font-family: var(--font-body);
  /* Sem sublinhado: o tema sublinha link de TEXTO por padrão (regra base do
     `a`), mas aqui o alvo é o CARTÃO inteiro — sublinhar rótulo e descrição
     em cinco cartões empilhados virava ruído. Mesma decisão dos botões e
     dos cards de solução do tema. */
  text-decoration: none;
  background: var(--bg-card);
  color: var(--text-body);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
a.bio-link:hover,
a.bio-link:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
}
.bio-link__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-accent);
}
.bio-link__icon svg,
.bio-link__icon img { width: 24px; height: 24px; }
.bio-link__icon img { border-radius: var(--r-field); object-fit: cover; }
.bio-link__text { flex: 1 1 auto; min-width: 0; }
.bio-link__label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-mini);
  line-height: var(--lh-tight);
}
.bio-link__desc {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  line-height: 1.35;
  opacity: 0.75;
}

/* Destaque: o único botão PREENCHIDO da página — o contraste é o hierarquizador.
   Verde escuro da paleta, rótulo branco em 5,09:1 (ver cabeçalho do bloco). */
.bio-link--highlight {
  background: var(--c-green-dark);
  color: var(--c-white);
}
.bio-link--highlight .bio-link__icon { color: inherit; }
.bio-link--highlight .bio-link__desc { color: inherit; opacity: 0.85; }

.bio__socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
  margin: var(--sp-lg) 0 0;
  padding: 0;
  list-style: none;
}
.bio__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                /* alvo de toque WCAG 2.2 com folga */
  height: 44px;
  color: var(--c-green-dark);
  background: var(--bg-card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease-out);
}
.bio__socials a:hover,
.bio__socials a:focus-visible { transform: translateY(-2px); }
.bio__socials svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  a.bio-link:hover,
  a.bio-link:focus-visible,
  .bio__socials a:hover,
  .bio__socials a:focus-visible { transform: none; }
}

/* ── Alternador claro/escuro ─────────────────────────────────────────────────
 * O tema é claro, então o padrão não muda — só ganha o escuro. O checkbox some
 * por clip, NUNCA display:none, para continuar focável pelo teclado (mesmo
 * cuidado do menu mobile do header).
 * O bloco escuro é selecionado por ID (#bio-scheme) e o claro por classe, então
 * o escuro vence por especificidade, sem !important.
 */
.bio-scheme__cb {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.bio-scheme {
  position: fixed;
  top: var(--sp-sm);
  right: var(--sp-sm);
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  cursor: pointer;
  color: var(--c-green-dark);
  background: var(--bg-card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
}
.bio-scheme__i--sun { display: none; }
#bio-scheme:focus-visible + .bio-scheme {
  outline: 2px solid var(--c-green-dark);
  outline-offset: 2px;
}
#bio-scheme:checked + .bio-scheme .bio-scheme__i--sun  { display: inline; }
#bio-scheme:checked + .bio-scheme .bio-scheme__i--moon { display: none; }

/* ESCURO (alternado) — é a paleta do CABEÇALHO/RODAPÉ do site, não uma segunda
   identidade: fundo #282828, texto branco, acento lima. Só redefine TOKENS;
   nenhuma regra de componente do .bio é duplicada. */
body:has(#bio-scheme:checked) {
  --bg-page: var(--c-dark);
  --bg-card: #333333;          /* um degrau acima do fundo: o cartão precisa se
                                  separar, e a sombra não separa sobre escuro */
  --text-body: var(--c-white);
  --text-accent: var(--c-lime);
}
body:has(#bio-scheme:checked) .bio-link--highlight {
  background: var(--c-lime);
  color: var(--c-ink);         /* lima é claro: o rótulo escurece (13,1:1) */
}
body:has(#bio-scheme:checked) .bio__socials a,
body:has(#bio-scheme:checked) .bio-scheme { color: var(--c-lime); }
body:has(#bio-scheme:checked) #bio-scheme:focus-visible + .bio-scheme {
  outline-color: var(--c-lime);
}