/* Nutrifaz — Landing Comercial 2026 · folha única da versão publicada.
   GERADO por ferramentas/montar-publicacao.js: tokens.css + estilo.css,
   com os caminhos de fonte e imagem reescritos para esta pasta.
   Não editar aqui — editar na origem e montar de novo. */

/* =========================================================================
   Nutrifaz — Sistema Visual Comercial 2026
   Tokens do sistema-mãe, extraídos de DESIGN.md e de PROTOTIPOS-V12-3-R2.

   ESTE ARQUIVO É CONTRATO. Não acrescentar cor, fonte, raio ou sombra.
   Fontes e imagens são REFERENCIADAS do catálogo V12.3-R2, não duplicadas.
   ========================================================================= */

/* ---------- Fontes oficiais, arquivos licenciados (OFL) ---------- */

@font-face {
  font-family: 'K2D';
  src: url('assets/fonts/K2D-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'K2D';
  src: url('assets/fonts/K2D-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'K2D';
  src: url('assets/fonts/K2D-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'K2D';
  src: url('assets/fonts/K2D-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

/* ---------- Paleta fechada ---------- */

:root {
  /* Institucionais — as três, e mais nada */
  --verde:        #40833B;
  --limao:        #87B43D;
  --vermelho:     #C63426;

  /* Derivações de superfície e tinta */
  --papel:        #F7F5EF;
  --papel-2:      #EFEDE3;
  --tinta:        #22301F;
  --tinta-suave:  #5B6858;
  --branco:       #FFFFFF;
  --limao-claro:  #CFE49B;
  --limao-palido: #D9EABB;

  /* Alfas de grafismo — o alfa vai NA COR, nunca em opacity */
  --circulo-limao: rgba(135, 180, 61, .24);
  --circulo-verde: rgba(64, 131, 59, .13);
  --regua-fina:    rgba(64, 131, 59, .30);
  --regua-tenue:   rgba(64, 131, 59, .22);
  --regua-celula:  rgba(64, 131, 59, .18);

  /* Famílias */
  --fonte-display: 'K2D', system-ui, sans-serif;
  --fonte-corpo:   'Poppins', system-ui, sans-serif;

  /* Raio — zero. 50% existe só para os círculos de apoio. */
  --raio: 0;

  /* Mancha */
  --mancha-max: 1180px;
  --margem-desktop: 64px;
  --margem-mobile: 22px;
}

/* ---------- Reset mínimo ---------- */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 17px;
  line-height: 1.68;
  overflow-x: hidden;           /* nenhum vazamento horizontal */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 800;
  margin: 0;
  color: var(--tinta);
}

p { margin: 0; }

a { color: inherit; }

/* ---------- Foco visível — WCAG 2.2 AA (C2) ---------- */

:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
}

/* ---------- Utilitário de acessibilidade ---------- */

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

/* ---------- Respeito a preferência de movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* =========================================================================
   Nutrifaz — Landing Comercial 2026 · A3.1
   Rodada de DIREÇÃO DE ARTE — 23/09/2026

   O que esta rodada persegue: a presença comercial do Catálogo V12.3-R2
   traduzida para a tela. Quatro gestos do impresso que a landing ainda não
   usava e que passam a estruturar a página:

     1. FAIXA VERDE CHAPADA sangrando de margem a margem, com recorte
        diagonal e friso de dois tons (vermelho + limão) — o rodapé do
        catálogo. Aparece duas vezes, com a diagonal espelhada.
     2. DISPLAY EM DOIS TONS — título com a segunda linha em verde, como na
        capa, na institucional e nas aberturas de linha.
     3. NUMERAL EM ESCALA DE DISPLAY — o "1996" da página institucional e os
        numerais de escada das aberturas.
     4. OLHO EM VERSALETE VERMELHO sobre fio de 44 × 3 px — a pontuação de
        abertura de bloco do sistema.

   Arquitetura de A3 preservada: S00–S04, Hero assimétrico, círculos 2:1,
   S02 leve, quatro linhas em S04, personalização fora da numeração.
   Nenhuma cor, fonte, raio ou sombra nova. Importa ../comum/tokens.css antes.
   #000 aparece apenas como canal de máscara de fotografia.
   ========================================================================= */

/* ------------------------------------------------- derivações locais ---
   O contrato manda usar cor por variável. Estas duas derivam de tokens já
   existentes e valem só nesta variante — comum/tokens.css não foi tocado. */

:root {
  --fio-sobre-verde: rgba(255,255,255,.30);   /* fio de coluna dentro da faixa verde */
  --realce-faixa:    rgba(64,131,59,.045);    /* realce de hover da faixa de linha  */
}

/* ---------------------------------------------------------------- mancha */

.mancha {
  max-width: var(--mancha-max);
  margin: 0 auto;
  padding: 0 var(--margem-desktop);
}

/* ============================================ vocabulário compartilhado */

/* Régua do masthead: fio de 1 px a 30 % de verde com tique de 56 × 3 em
   limão à esquerda — a assinatura transportada do catálogo. */
.regua-masthead {
  position: relative;
  height: 3px;
}
.regua-masthead::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 1px;
  height: 1px;
  background: var(--regua-fina);
}
.regua-masthead::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 3px;
  background: var(--limao);
}

/* Tique de abertura de seção. */
.tique {
  width: 88px; height: 4px;
  background: var(--limao);
}

/* Marcador retangular de lista: 8 × 3 px em limão, sem ícone. */
.marcador {
  display: inline-block;
  width: 8px; height: 3px;
  background: var(--limao);
  vertical-align: middle;
  margin-right: 10px;
}

/* Olho de seção: versalete vermelho sobre fio de 44 × 3 px. É a pontuação
   de abertura do sistema (DESIGN.md · Typography · Olho). Vermelho sobre
   papel fica em ~4,9:1 — permitido inclusive em texto normal. */
.olho {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vermelho);
  line-height: 1.3;
}
.olho-data {
  letter-spacing: .14em;
  color: var(--tinta-suave);
}

/* Cabeçalho editorial de seção. */
.cabeca-secao h2 {
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -.020em;
  margin-top: 20px;
}
.cabeca-secao h2 em,
.institucional h2 em,
.hero h1 em {
  font-style: normal;
  color: var(--verde);            /* display grande: contraste permitido */
}
/* A segunda linha do display quebra por CSS, não por <br>. Com <br> o nome
   acessível da seção saía grudado ("A cesta certapara a sua equipe"): o
   espaço fica no HTML e a quebra fica na folha de estilo. */
.hero h1 em,
.institucional h2 em { display: block; }

/* ------------------------------------------------- faixa verde chapada */

/* O gesto que faltava. Retângulo verde sangrando de margem a margem, com
   uma ponta cortada em diagonal por clip-path e um friso de 6 px em dois
   tons sólidos (vermelho e limão, sem transição) seguindo a MESMA
   diagonal — a faixa do rodapé do catálogo, adaptada à largura da tela.
   Regra da Diagonal Única: o gesto é um só; o que muda é o lado. */
.faixa-verde {
  position: relative;
  background: var(--verde);
  color: var(--branco);
}
.faixa-verde::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Diagonal subindo da esquerda — fecha S03. */
.faixa-fatos {
  clip-path: polygon(0 48px, 470px 0, 100% 0, 100% 100%, 0 100%);
}
.faixa-fatos::before {
  background: linear-gradient(90deg, var(--vermelho) 0 26%, var(--limao) 26% 100%);
  clip-path: polygon(0 48px, 470px 0, 100% 0, 100% 6px, 470px 6px, 0 54px);
}

/* Diagonal espelhada, subindo da direita — fecha S04. */
.faixa-personalizada {
  clip-path: polygon(0 0, calc(100% - 470px) 0, 100% 48px, 100% 100%, 0 100%);
}
.faixa-personalizada::before {
  background: linear-gradient(270deg, var(--vermelho) 0 26%, var(--limao) 26% 100%);
  clip-path: polygon(0 0, calc(100% - 470px) 0, 100% 48px, 100% 54px, calc(100% - 470px) 6px, 0 6px);
}

/* =================================================== S00 · topo mínimo */

/* Faixa de contato: verde chapado, o mesmo par valor/rótulo da faixa de
   rodapé do catálogo. Tira o contato da primeira dobra como bloco de
   texto e devolve o masthead à assinatura. Branco sobre verde: ~4,7:1. */
.barra-contato {
  background: var(--verde);
  color: var(--branco);
}
.barra-contato-grade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
  min-height: 50px;
}
/* O rótulo diz a quem a página atende; o contato fica à direita. Dois
   níveis, não um parágrafo. Nenhum claim de prazo, cobertura ou rapidez. */
.barra-rotulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--branco);
}
/* Uma âncora só: rótulo de ação + número. Nada de separador solto — o
   que divide os dois é um fio, que desaparece junto quando quebra. */
.barra-acao {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Era var(--limao-claro). Medido no render, o limão claro sobre o verde
     dá 3,36:1 — abaixo do 4,5:1 que a decisão C2 (WCAG 2.2 AA) exige para
     texto de 12 px. Nenhum tom de limão da paleta chega lá: o mais claro,
     limao-palido, para em 3,63:1. Só o branco passa, com 4,64:1.
     O limão não foi embora, mudou de função — vira o fio sob a âncora, que
     é ornamento e não carrega informação. */
  color: var(--branco);
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid var(--fio-sobre-verde);
}
.barra-numero { white-space: nowrap; }
.barra-telefone {
  display: inline-flex;
  align-items: center;
  min-height: 46px;                /* alvo de toque, padrão interno */
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--branco);
  text-decoration: none;
  border-bottom: 2px solid var(--limao-claro);
  transition: border-color 160ms ease;
}
.barra-telefone:hover { border-bottom-color: var(--branco); }


/* Masthead: só a assinatura, em escala editorial. */
.masthead {
  padding-top: 24px;
  padding-bottom: 20px;
}

/* A assinatura oficial carrega folga interna no próprio SVG: o desenho
   ocupa 79,2 % da largura e 49,3 % da altura do viewBox 1171,06 × 480,53.
   Aumentar o `width` do <img> aumenta principalmente o ar. O quadro
   recorta essa folga por proporção — a marca VISÍVEL passa a ter a escala
   de masthead sem redesenho, sem deformação e sem cortar o traço.
   inset = 121,73 / 1171,06 = 10,395 % da largura do <img>, nos dois eixos. */
.marca-quadro {
  --marca: 340px;
  display: block;
  position: relative;
  overflow: hidden;
  width:  calc(var(--marca) * .79200);
  height: calc(var(--marca) * .20234);
}
.marca {
  position: absolute;
  top:  calc(var(--marca) * -.10395);
  left: calc(var(--marca) * -.10395);
  width: var(--marca);
  max-width: none;
}

/* ========================================================= S01 · Hero */

.hero {
  position: relative;             /* contexto do campo gráfico */
  overflow-x: clip;               /* os círculos são cortados pela borda da tela
                                     sem gerar rolagem horizontal. "clip" é o
                                     único valor que convive com overflow-y
                                     visível — o limão continua subindo livre
                                     por trás do masthead. */
}

/* Campo gráfico dos dois círculos.
   A altura é a ALTURA REAL DO HERO — nenhum valor calibrado por faixa.
   `clip-path: inset(-1600px 0 0 0)` corta nas bordas laterais e na base
   (é ali que o círculo verde encontra a régua que abre S02) e deixa o topo
   livre, para o limão subir por trás do masthead.
   `z-index: -1` mantém o grafismo atrás de TODO o conteúdo em fluxo —
   inclusive do <header>, que vem antes no DOM — sem precisar empilhar
   z-index em topo e main. */
.campo-superior {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inset(-1600px 0 0 0);
  pointer-events: none;
}
.circulo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.circulo-limao {
  width: 860px; height: 860px;
  right: -210px; top: -330px;
  background: var(--circulo-limao);
}
.circulo-verde {
  width: 430px; height: 430px;     /* razão 2:1, âncora oposta */
  right: 500px; bottom: -305px;    /* só a calota aparece: assinatura, não pedestal */
  background: var(--circulo-verde);
}

.hero-grade {
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
  gap: 0;
  align-items: center;
  padding-top: 54px;
  padding-bottom: 62px;
}

.hero-texto {
  padding-right: 26px;
}

.olho-hero {
  margin-bottom: 22px;
}

.hero h1 {
  /* Era 64 px. O título novo diz os três públicos por extenso e é mais
     longo que o anterior: medido na coluna real de 500 px, 64 px dava
     CINCO linhas de display — 330 px de altura, que empurravam a cesta
     para baixo e faziam do Hero uma página de manifesto. A 56 px ele
     volta às três linhas do título anterior, e o produto volta a dividir
     a dobra de igual para igual. A escala de display continua sendo a
     maior da página. */
  font-size: 56px;
  line-height: 1.03;
  letter-spacing: -.022em;
  color: var(--tinta);
}

.hero-linha {
  margin-top: 24px;
  max-width: 34ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.hero-ctas {
  margin-top: 36px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 34px;
}

/* Ressalva comercial preservada, em degrau de apoio: mesma seção, peso
   menor, aberta por régua. Não foi cortada — foi hierarquizada. */
.hero-apoio {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--regua-tenue);
  max-width: 48ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* CTA primário: botão de verdade — verde, branco, raio zero, sem sombra. */
.cta-primario {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 34px;
  background: var(--verde);
  color: var(--branco);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 4px solid var(--verde);   /* reserva o espaço do realce */
  transition: border-color 160ms ease;
}
.cta-primario:hover { border-bottom-color: var(--limao); }

/* CTA secundário: link tipográfico sobre régua de 3 px em vermelho. */
.cta-secundario {
  display: inline-flex;
  align-items: flex-start;
  min-height: 56px;                /* mesma altura do botão: o fio vermelho
                                      alinha com o topo do CTA primário */
  border-top: 3px solid var(--vermelho);
  padding: 16px 2px 0 0;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--tinta);
  text-decoration: none;
}
.cta-secundario:hover { color: var(--vermelho); }   /* 4,91:1 sobre papel */

/* Campo visual: a cesta é o protagonista. Nada é desenhado atrás dela
   além dos dois círculos aprovados — sem caixa, sem pedestal, sem campo. */
.hero-visual {
  position: relative;
  display: flex;
  align-self: stretch;             /* acompanha a altura da coluna de texto */
  align-items: flex-end;           /* e a cesta assenta pelo pé */
  justify-content: flex-end;
  min-height: 460px;
}
/* O produto avança sobre a margem da mancha, mas NUNCA sangra (D34). */
.hero-cesta {
  /* O avanço sobre a margem da mancha cresce quando a página tem margem
     externa para ceder, e nunca encosta na borda: o produto avança, não sangra. */
  --avanco: max(48px, calc((100vw - var(--mancha-max)) / 2 - 40px));
  position: relative;
  width: min(650px, calc(100% + var(--avanco)));
  max-width: none;                 /* sem isto o tokens.css prende a cesta na
                                      coluna e o avanço não acontece */

  /* height: auto NÃO É DETALHE — é o que impede o atributo de esticar.

     ┌ A REGRESSÃO QUE ISTO CORRIGE ──────────────────────────────────┐
     │ A rodada de otimização acrescentou width="980" height="596" ao │
     │ <img> do Hero, para reservar espaço e evitar deslocamento.     │
     │                                                                 │
     │ Só que width e height de <img> não são apenas metadados: o      │
     │ navegador os aplica como DICA DE APRESENTAÇÃO, equivalente a    │
     │ `width: 980px; height: 596px` numa camada que perde para o CSS  │
     │ do autor e ganha do padrão.                                     │
     │                                                                 │
     │ Esta regra declarava `width` — e vencia a dica de largura — mas │
     │ NUNCA declarou `height`. Nada sobrescrevia a dica de altura, e  │
     │ ela ficou valendo: 596 px fixos em qualquer largura de tela.    │
     │                                                                 │
     │ A 1440 px a cesta ficava 616×596 em vez de 616×375; a 360 px,   │
     │ 297×596 em vez de 297×181 — 3,3 vezes mais alta do que deve.    │
     │                                                                 │
     │ O ARQUIVO NUNCA ESTEVE DEFORMADO: o derivado é 980×596, razão   │
     │ 1,6443, idêntica à do PNG do catálogo. Quem esticava era a      │
     │ página, e é na página que se corrige — não com object-fit sobre │
     │ um arquivo que está certo.                                      │
     │                                                                 │
     │ As outras imagens não quebraram porque o CSS delas declara      │
     │ largura E altura (.composicao-foto, .linha-recorte): as duas    │
     │ dicas eram sobrescritas.                                        │
     └─────────────────────────────────────────────────────────────────┘

     Com `height: auto` a altura volta a sair da razão do arquivo, e a
     reserva de espaço continua funcionando: o navegador deriva
     `aspect-ratio: auto 980 / 596` dos mesmos atributos. */
  height: auto;
  margin-right: calc(-1 * var(--avanco));
  filter: drop-shadow(0 20px 28px rgba(34, 48, 31, .18)); /* única sombra do sistema */
}

/* ==================================================== S02 · roteador */

/* Camada tonal sangrada: S02 é barra de entrada, não seção de conteúdo.
   O peso vem da superfície, não do corpo do texto — continua o item mais
   leve da página e não disputa com o Hero nem com S04. */
.roteador {
  background: var(--papel-2);
  border-top: 1px solid var(--regua-fina);
}
.cabeca-roteador {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 34px;
}
.cabeca-roteador h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.006em;
  white-space: nowrap;
}
.cabeca-roteador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--regua-fina);
}
.roteador-colunas {
  list-style: none;
  margin: 22px 0 0;
  padding: 0 0 46px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.roteador-colunas li {
  padding: 4px 26px 6px;
  border-left: 1px solid var(--regua-tenue);
}
.roteador-colunas li:first-child {
  padding-left: 0;
  border-left: 0;
}
.roteador-entrada {
  display: inline-block;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.22;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--limao);
  padding: 12px 0 13px;            /* alvo de toque ≥ 44 px */
  transition: border-color 160ms ease, color 160ms ease;
}
.roteador-entrada:hover {
  border-bottom-color: var(--verde);   /* o realce vai para a régua: verde a
                                          17 px não passa em AA sobre papel */
}
.roteador-apoio {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* =============================================== S03 · institucional */

/* A página institucional do catálogo, traduzida: olho vermelho, ano em
   display, título em dois tons e a fotografia entrando pela borda direita
   e se dissolvendo no papel — não caixa de imagem. */
.institucional {
  position: relative;
  overflow: hidden;
  background: var(--papel);
  border-top: 4px solid var(--verde);
}

/* A única fotografia de pessoa autorizada nesta rodada (família à mesa).
   O quadro 900/620 corta a base da imagem original: a tábua com frase
   gravada, no canto inferior direito, fica FORA do recorte, e o fade
   inferior cobre a zona por segurança. #000 é canal da máscara.
   Enquadramento preservado da rodada anterior — fade esquerdo a 64 %
   (devolve o pai) e fade curto à direita a 94 % (a criança dissolve em
   vez de ser cortada em seco). Nesta rodada a imagem só ganhou escala. */
.institucional-foto {
  position: absolute;
  top: 0; right: 0;
  z-index: 0;
  /* Enquadramento primeiro, máscara depois.
     A área fotográfica cresceu (740 → 820 px) e o quadro 900/630 corta a
     base do arquivo — é ali que fica a tábua com frase gravada, que assim
     sai por RECORTE, não por transparência.
     A dissolução acontece só na direção do texto, e é longa: sólida nos
     74 % da direita, com a rampa distribuída pelos 26 % da esquerda. O pai
     fica na zona sólida; nenhuma pessoa é apagada para disfarçar corte.
     A borda direita não recebe fade — a fotografia encosta na margem da
     tela, como na página institucional do catálogo. */
  width: min(54vw, 820px);
  height: auto;
  /* CORRIGIDO EM 26/09. O quadro era o arquivo inteiro (1500/971) com
     âncora ao centro, e a rampa de 26 % da esquerda caía EM CIMA DO
     MENINO: sobrava meio rosto fantasma dissolvido no papel — que é
     exatamente o que a regra desta rodada proíbe. Pessoa sai de quadro
     por RECORTE LIMPO ou não sai.
     O quadro ficou mais fechado e a âncora foi para 70 %: o menino sai
     inteiro, a rampa passa a cair no fundo da cozinha e no ombro do pai,
     e a menina — que antes encostava na margem pela metade — entra com o
     rosto inteiro. A comida, que é o assunto da seção, cresce. */
  aspect-ratio: 1320 / 900;
  object-fit: cover;
  object-position: 70% 0;
  -webkit-mask-image:
    linear-gradient(to left, #000 0 74%, rgba(0,0,0,.55) 88%, transparent 100%),
    linear-gradient(to top, transparent 0%, #000 20%);
  mask-image:
    linear-gradient(to left, #000 0 74%, rgba(0,0,0,.55) 88%, transparent 100%),
    linear-gradient(to top, transparent 0%, #000 20%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.institucional-grade {
  position: relative;
  z-index: 1;
  padding-top: 62px;
  padding-bottom: 52px;
}
.institucional-texto {
  max-width: 520px;                /* o texto nunca corre sob a zona sólida */
}
/* O ano em escala de display — o gesto da página institucional do
   catálogo. Não é contagem de anos: é a data que o parágrafo já trazia. */
.institucional-ano {
  margin-top: 20px;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 124px;
  line-height: .86;
  letter-spacing: -.030em;
  color: var(--verde);
}
.institucional .tique {
  margin: 22px 0 26px;
}
.institucional h2 {
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -.020em;
}
.institucional-paragrafo {
  margin-top: 22px;
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--tinta-suave);
}
/* `.institucional-fecho` foi removido daqui e dos dois blocos de mobile:
   o elemento não existe no HTML desde a rodada editorial de 24/09, e as
   regras ficaram órfãs, ordenando um `order: 0` para um nada. */

/* Banda de fatos sobre a faixa verde: o bloco de indicadores do catálogo,
   invertido para dar ao verde institucional uma área de destaque no meio
   da página. Colunas divididas por fio — nunca card. */
.faixa-fatos .mancha {
  padding-top: 64px;
  padding-bottom: 50px;
}
.institucional-fatos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.institucional-fatos li {
  padding: 0 24px;
  border-left: 1px solid var(--fio-sobre-verde);
}
.institucional-fatos li:first-child {
  padding-left: 0;
  border-left: 0;
}
/* Sem `white-space: nowrap`: estes valores são FRASES, não numerais. */
.fato-valor {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -.014em;
  color: var(--branco);
  text-wrap: balance;
  min-height: 60px;                 /* duas linhas: os quatro rótulos partem
                                       de uma linha de base só */
}
.fato-valor::before {
  content: "";
  display: block;
  width: 26px; height: 3px;
  background: var(--limao-claro);
  margin-bottom: 14px;
}
.fato-rotulo {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.52;
  color: var(--branco);
}

/* ============================================ S04 · índice das linhas */

.linhas {
  background: var(--papel);
}
.linhas .cabeca-secao {
  padding-top: 76px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--verde);
}

/* Faixas editoriais altas: numeral em display, nome grande e o recorte do
   produto em escala de reconhecimento, atravessando as réguas. A escada de
   aberturas do catálogo em ritmo de rolagem — não uma tabela. */
.linhas-indice {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linha-item {
  display: grid;
  /* Respiro lateral de 28 px: o numeral e o link deixam de encostar na
     borda da faixa, e é essa mesma caixa que o realce de hover/foco pinta.
     O grid foi recalculado sobre a largura útil — a descrição não foi
     comprimida para preservar coluna fixa. */
  grid-template-columns: 112px minmax(0, 1fr) 272px 148px;
  grid-template-areas:
    "num nome img contagem"
    "num nome img link";
  align-items: center;
  gap: 0 20px;
  padding: 42px 28px;
  border-bottom: 1px solid var(--regua-celula);
  transition: background-color 180ms ease;
}
/* Mesma caixa e mesmo alinhamento nos três estados: só a cor muda, então
   não há deslocamento de layout ao passar o mouse ou tabular. */
/* .__hover-teste existe só para o QA medir deslocamento de layout. */
.linha-item.__hover-teste,
.linha-item:hover,
.linha-item:focus-within {
  background: var(--realce-faixa);
}
.linha-numeral {
  grid-area: num;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 92px;
  line-height: .80;                /* o topo do numeral encontra a altura de
                                      capitular do nome da linha */
  letter-spacing: -.022em;
  color: var(--verde);
  align-self: start;
}
.linha-item .linha-conteudo { grid-area: nome; align-self: start; }
.linha-item .linha-nome {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.014em;
  color: var(--tinta);
}
.linha-item .linha-descricao {
  margin-top: 10px;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinta-suave);
}
/* Caixa de proporção fixa com `object-fit: contain`: o recorte cresce até
   o tamanho de reconhecimento sem distorcer e sem ser cortado. As margens
   negativas fazem o produto cruzar a régua da faixa — profundidade sem
   caixa e sem sombra nova. */
.linha-recorte {
  grid-area: img;
  width: 272px;
  height: 216px;
  object-fit: contain;
  justify-self: center;
  align-self: center;
  margin: -10px 0;                 /* respiro de 32 px até cada régua — a
                                      profundidade fica com a sombra de
                                      silhueta, não com a sobreposição */
  filter: drop-shadow(0 13px 19px rgba(34, 48, 31, .18)); /* mesma sombra do
                                      sistema, proporcional ao tamanho do
                                      recorte — o Hero mantém 0 20px 28px */
}
.linha-contagem {
  grid-area: contagem;
  align-self: end;
  justify-self: end;
  text-align: right;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--tinta-suave);
}
.linha-link {
  grid-area: link;
  align-self: start;
  justify-self: end;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--limao);
  padding: 14px 0 12px;            /* alvo de toque ≥ 44 px */
  margin-top: 8px;
  transition: border-color 160ms ease, color 160ms ease;
}
.linha-link:hover {
  border-bottom-color: var(--verde);   /* idem: versalete de 12 px não recebe verde */
}
/* A linha sindical é tipográfica por decisão: a coluna do recorte sai. */
.linha-item-sem-recorte {
  grid-template-columns: 112px minmax(0, 1fr) 148px;
  grid-template-areas:
    "num nome contagem"
    "num nome link";
}

/* Fecho de S04: faixa verde com a diagonal espelhada. A personalização é
   serviço sobre o portfólio — fica fora da numeração e ganha contraste,
   sem virar a quinta linha. */
.faixa-personalizada .mancha {
  padding-top: 56px;
  padding-bottom: 58px;
}
.linha-personalizada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px 44px;
}
/* O rótulo interno "Fora da numeração" saiu da interface: era instrução de
   design. O que diz "isto não é a quinta linha" passa a ser a forma — fora
   do <ol>, sem numeral, aberto pelo marcador de limão. */
.marcador-claro { background: var(--limao-claro); }
.personal-texto .marcador-claro {
  display: block;
  width: 44px;
  margin: 0 0 18px;
}
.personal-nome {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.016em;
  color: var(--branco);
}
.personal-descricao {
  margin-top: 12px;
  max-width: 52ch;
  color: var(--branco);
  font-size: 17px;
  line-height: 1.55;
}
/* O CTA primário invertido: sobre verde ele não pode ser verde. Mesma
   forma — raio zero, sem sombra, sem borda fechada —, cor trocada. */
.cta-claro {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 34px;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 4px solid var(--limao);
  transition: border-color 160ms ease;
}
.cta-claro:hover { border-bottom-color: var(--vermelho); }

/* Foco visível sobre verde: o anel vermelho do sistema perde contraste
   contra a faixa. Sobre verde o anel vira branco — a regra continua
   sendo "foco sempre visível", não "foco sempre vermelho". */
.faixa-verde :focus-visible,
.barra-contato :focus-visible {
  outline: 3px solid var(--branco);
  outline-offset: 3px;
}

/* ======================================= S10 · do pedido à entrega ====

   Escada de etapas em numeral K2D, sem fotografia — o plano define este
   bloco assim, e os únicos ativos de operação do acervo estão bloqueados
   (logotipo fabricado em uniformes e caixas). Nenhum prazo publicado: os
   prazos de referência 5/10/20 dias úteis são P08, não homologados.
   ===================================================================== */

.processo {
  background: var(--papel);
  border-top: 4px solid var(--verde);
}
.processo .cabeca-secao {
  padding-top: 76px;
  padding-bottom: 24px;
}
.processo-intro {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--tinta-suave);
}

.etapas {
  list-style: none;
  margin: 0;
  padding: 0 0 66px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 2px solid var(--verde);
}
.etapa {
  padding: 30px 24px 0;
  border-left: 1px solid var(--regua-tenue);
}
.etapa:first-child {
  padding-left: 0;
  border-left: 0;
}
.etapa-numeral {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 62px;
  line-height: .80;
  letter-spacing: -.020em;
  color: var(--verde);
}
.etapa-nome {
  margin-top: 16px;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.16;
  letter-spacing: -.008em;
  color: var(--tinta);
}
.etapa-descricao {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.52;
  color: var(--tinta-suave);
}

/* Camada tonal com as ressalvas — o que o plano manda publicar no lugar
   da tabela de prazos. Régua vertical, nunca card. */
.processo-ressalvas {
  background: var(--papel-2);
  border-top: 1px solid var(--regua-fina);
}
.ressalvas {
  list-style: none;
  margin: 0;
  padding: 56px 0 60px;            /* a pausa tonal entre "operação" e
                                      "conversão" precisa de altura para
                                      valer como evento na rolagem */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 40px;
}
/* A redação do PAT é obrigatória e não pode ser encurtada: o equilíbrio da
   faixa vem da grade, não do corte de texto. */
.ressalvas li:nth-child(3) { grid-column: 1 / -1; }
.ressalvas li:nth-child(3) .ressalva-texto { max-width: 92ch; }
.ressalvas li {
  padding-left: 22px;
  border-left: 3px solid var(--limao);
}
.ressalva-rotulo {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.ressalva-texto {
  display: block;
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tinta);
}

/* ============================================ S12 · orçamento =========

   A conversão principal. Formulário à esquerda, o que informar e os canais
   à direita. Os dois círculos voltam atrás do bloco, fechando o arco que o
   Hero abriu — sem produto de fundo: a cesta é protagonista, não papel de
   parede de formulário.
   ===================================================================== */

.orcamento {
  position: relative;
  isolation: isolate;              /* o grafismo entra ENTRE o fundo da seção
                                      e o conteúdo, não atrás do fundo */
  overflow-x: clip;
  background: var(--papel);
  border-top: 4px solid var(--verde);
}
.campo-orcamento {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inset(0);
  pointer-events: none;
}
.circulo-orc-limao {
  width: 640px; height: 640px;
  left: -230px; top: -170px;
  background: var(--circulo-limao);
}
.circulo-orc-verde {
  width: 320px; height: 320px;      /* razão 2:1, âncora oposta */
  right: -90px; bottom: -120px;
  background: var(--circulo-verde);
}

.orcamento-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  column-gap: 60px;
  padding-top: 76px;
  padding-bottom: 78px;
  align-items: start;
}
.orcamento-cabeca {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 38px;
}
.formulario      { grid-column: 1; grid-row: 2 / span 2; }
.orcamento-apoio { grid-column: 2; grid-row: 2; }
.apoio-canais    { grid-column: 2; grid-row: 3; align-self: start; }
.orcamento-cabeca h2 {
  margin-top: 20px;
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -.020em;
}
.orcamento-cabeca h2 em {
  font-style: normal;
  color: var(--verde);
}

/* ------------------------------------------------------- formulário */

.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
  align-items: start;
  padding-top: 26px;
  border-top: 2px solid var(--verde);
}
.campo { display: flex; flex-direction: column; }
/* "display: flex" de autor vence o "[hidden] { display: none }" do
   navegador: sem esta regra o campo contextual nunca se esconde. */
.campo[hidden],
.formulario-retorno[hidden] { display: none; }
.campo-metade   { grid-column: span 1; }
.campo-inteiro,
.campo-contextual { grid-column: 1 / -1; }
.campo-cidade   { grid-column: span 1; }
.campo-uf       { grid-column: span 1; max-width: 140px; }
.campo-data {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "rotulo rotulo" "data caixa";
  column-gap: 18px;
  align-items: center;
}
.campo-data > label[for="f-data"] { grid-area: rotulo; }
.campo-data > input[type="date"]  { grid-area: data; }
.campo-data > .caixa              { grid-area: caixa; margin-top: 0; }

.campo label {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--tinta);
  margin-bottom: 8px;
}
.obrigatorio { color: var(--vermelho); }
.opcional {
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: normal;
  color: var(--tinta-suave);
}

/* Campo é linha sobre régua, não caixa arredondada: fundo papel, fio de
   1 px em cima e de 2 px embaixo. Raio zero, sem sombra. */
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="number"],
.campo input[type="date"],
.campo select,
.campo textarea {
  font-family: var(--fonte-corpo);
  font-size: 16px;                  /* 16 px evita zoom automático no iOS */
  line-height: 1.5;
  color: var(--tinta);
  background: var(--branco);
  border: 1px solid var(--regua-tenue);
  border-bottom: 2px solid var(--verde);
  border-radius: 0;
  padding: 13px 14px;
  min-height: 50px;
  width: 100%;
  appearance: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo select {
  background-image: linear-gradient(45deg, transparent 50%, var(--verde) 50%),
                    linear-gradient(135deg, var(--verde) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--regua-fina); border-bottom-color: var(--verde); }
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-bottom-color: var(--vermelho); }
.campo input:disabled { background: var(--papel-2); color: var(--tinta-suave); }

.ajuda {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.erro {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--vermelho);
  font-weight: 500;
}

/* Caixa de marcação: alvo de 44 px sem virar pill. */
.caixa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
  margin-top: 12px;
  min-height: 48px;
  padding: 11px 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  letter-spacing: normal;
  cursor: pointer;
}
.caixa input[type="checkbox"] {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin: 0;
  accent-color: var(--verde);
  border-radius: 0;
}

.formulario-acao {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 6px;
  padding-top: 26px;
  border-top: 1px solid var(--regua-tenue);
}
.formulario-acao .cta-primario {
  border: 0;
  border-bottom: 4px solid var(--verde);
  cursor: pointer;
}
.aviso-prototipo {
  flex: 1 1 260px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.formulario-retorno {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
  border-left: 4px solid var(--verde);
  background: var(--papel-2);
  color: var(--tinta);
}
.formulario-retorno.retorno-erro { border-left-color: var(--vermelho); }

/* ---------------------------------------------------- coluna de apoio */

.orcamento-apoio {
  padding-top: 26px;
  border-top: 2px solid var(--verde);
}
.apoio-titulo {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.16;
  letter-spacing: -.008em;
  color: var(--tinta);
}
.apoio-lista {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.apoio-lista li {
  padding: 10px 0;
  border-bottom: 1px solid var(--regua-celula);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--tinta);
}
.apoio-canais { margin-top: 34px; align-self: start; }
.apoio-canais .apoio-titulo { margin-bottom: 16px; }
.canal { margin-bottom: 16px; }
.canal-rotulo {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 4px;
}
.canal-valor {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 16px;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--limao);
  transition: border-color 160ms ease;
}
.canal-valor:hover { border-bottom-color: var(--verde); }
.canal-valor-texto {
  border-bottom: 0;
  font-weight: 400;
  color: var(--tinta-suave);
  min-height: 0;
}
.apoio-nota {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--regua-tenue);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* ============================================== S14 · rodapé =========

   Faixa verde chapada com o recorte diagonal e o friso de dois tons, o
   símbolo das duas mãos cortado pela margem esquerda a 11 % — o rodapé do
   catálogo, na largura da tela.
   ===================================================================== */

.rodape {
  position: relative;
  overflow: hidden;
  background: var(--verde);
  color: var(--branco);
  clip-path: polygon(0 48px, 470px 0, 100% 0, 100% 100%, 0 100%);
}
.rodape::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--vermelho) 0 26%, var(--limao) 26% 100%);
  clip-path: polygon(0 48px, 470px 0, 100% 0, 100% 6px, 470px 6px, 0 54px);
}
/* O símbolo isolado, cortado pela margem — nunca o logotipo completo. */
.rodape-simbolo {
  position: absolute;
  left: -110px;
  bottom: -90px;
  width: 420px;
  opacity: .11;
  pointer-events: none;
}

.rodape-grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, .95fr) minmax(0, .95fr);
  gap: 40px;
  padding-top: 86px;
  padding-bottom: 46px;
}
.rodape-marca .marca-quadro-rodape { --marca: 260px; }
.rodape-assinatura {
  margin-top: 22px;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--branco);               /* limão-claro sobre verde é 3,36:1 e
                                         só serve a display: aqui são 13 px */
}
.rodape-titulo {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--branco);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--fio-sobre-verde);
}
.rodape-par { margin-bottom: 16px; }
.rodape-rotulo {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--branco);
  opacity: .82;
  margin-bottom: 3px;
}
.rodape-valor {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  font-size: 15px;
  overflow-wrap: anywhere;
  line-height: 1.45;
  color: var(--branco);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease;
}
a.rodape-valor { border-bottom-color: var(--limao-claro); }
a.rodape-valor:hover { border-bottom-color: var(--branco); }
.rodape-valor-texto { min-height: 0; display: block; padding: 4px 0; }

.rodape-lista { list-style: none; margin: 0; padding: 0; }
.rodape-lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15.5px;
  color: var(--branco);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease;
}
.rodape-lista a:hover { border-bottom-color: var(--limao-claro); }

.rodape-legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 26px;
  padding-bottom: 40px;
  border-top: 1px solid var(--fio-sobre-verde);
}
.rodape-razao {
  font-size: 14px;
  line-height: 1.5;
  color: var(--branco);
}
.voltar-topo {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 4px solid var(--limao);
  transition: border-color 160ms ease;
}
.voltar-topo:hover { border-bottom-color: var(--vermelho); }

/* Rolagem suave só para quem não pediu movimento reduzido. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================ S05 · piloto das composições ==========

   Camada 2 do plano: três degraus com foto, resumo e indicadores; a
   relação de produtos (Camada 3) abre sob demanda, em duas colunas no
   desktop e uma no mobile. Faixa aberta, nunca card.
   ===================================================================== */

.composicoes {
  background: var(--papel-2);
  border-top: 4px solid var(--verde);
}
.composicoes .cabeca-secao {
  padding-top: 76px;
  padding-bottom: 30px;
}
.composicoes-intro {
  margin-top: 20px;
  max-width: 64ch;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--tinta-suave);
}
.composicoes-lista {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  border-top: 2px solid var(--verde);
}
.composicao {
  /* A largura da coluna da foto vira variável porque a alternância
     precisa dela nos DOIS lados do grid, e cada faixa tem a sua. */
  --foto-cesta: 300px;
  padding: 46px 28px 42px;
  border-bottom: 1px solid var(--regua-celula);
  transition: background-color 180ms ease;
}
.composicao:hover,
.composicao:focus-within { background: var(--realce-faixa); }

.composicao-abre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--foto-cesta);
  gap: 0 44px;
  align-items: center;
}
.composicao-rotulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.composicao-nome {
  margin-top: 12px;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 33px;
  line-height: 1.08;
  letter-spacing: -.016em;
  color: var(--tinta);
}
.composicao-resumo {
  margin-top: 12px;
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.composicao-figura { margin: 0; }
/* PRESENÇA. A 236 px a cesta era um ícone ao lado de um parágrafo de
   58 caracteres; o produto perdia para o texto na própria faixa que
   existe para mostrá-lo. A 300 px passa a dividir a composição em pé de
   igualdade, e ainda sobra resolução: o derivado tem 640 px de largura,
   ou seja, 2,1× o que a tela usa. `contain` garante que nenhum produto
   encoste na borda, seja qual for a proporção do recorte. */
.composicao-foto {
  width: var(--foto-cesta);
  /* A ALTURA SAI DA LARGURA, e isso não é elegância — é a correção de um
     defeito real. Enquanto largura e altura eram dois números soltos,
     cada faixa precisava lembrar de mudar os dois, e uma faixa esqueceu:
     em 961–1100 px a altura valia 148 px e a largura 190 px, enquanto a
     regra de alternância usava a variável, que ali ainda valia 300 px.
     Resultado: linha ímpar com coluna de 190 px, linha par com coluna de
     300 px e a foto encostada à esquerda, com 110 px de calha morta.
     Com um número só por faixa, divergir deixa de ser possível. */
  height: calc(var(--foto-cesta) * 0.78);
  object-fit: contain;
  filter: drop-shadow(0 15px 22px rgba(34, 48, 31, .18));
}

/* Indicadores em régua, como a banda do catálogo. */
.composicao-indicadores {
  list-style: none;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--regua-fina);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.composicao-indicadores li {
  padding: 0 18px;
  border-left: 1px solid var(--regua-tenue);
}
.composicao-indicadores li:first-child { padding-left: 0; border-left: 0; }
.indicador-valor {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -.014em;
  color: var(--verde);
  white-space: nowrap;
}
.indicador-rotulo {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tinta-suave);
}
/* O rendimento é o argumento que impede confundir porção com refeição —
   o catálogo o destaca em vermelho pelo mesmo motivo. */
.indicador-destaque .indicador-valor { color: var(--vermelho); }

.composicao-acoes {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;            /* o fio vermelho do CTA alinha com o
                                      topo do botão, não com o meio dele */
  gap: 14px 30px;
}
/* O tratamento visual das duas ações NÃO mora aqui.
   Morava — e ficou aqui uma versão antiga, com fio vermelho e
   versalete, que a versão vigente no fim desta folha anulava
   silenciosamente por ordem de cascata. O efeito na tela estava certo,
   mas quem editasse este bloco não veria efeito nenhum, e levaria um
   tempo até desconfiar da causa. Duas definições concorrentes do mesmo
   seletor são uma armadilha, mesmo quando a que vence é a certa.

   Aqui ficam só as propriedades ESTRUTURAIS, que nenhuma faixa muda.
   A aparência — botão preenchido para o CTA, link sobre régua para o
   expansor — está em um lugar só, no fim do arquivo. */
.composicao-abrir[hidden] { display: none; }
.composicao-abrir {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  min-height: 46px;                /* alvo de toque, padrão interno */
  padding: 14px 0 12px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

/* Camada 3 — relação de produtos. Duas colunas no desktop, uma no
   mobile: duas colunas de 11 px não é adaptação, é o erro do PDF. */
.composicao-itens {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px solid var(--verde);
}
.composicao-itens[hidden] { display: none; }
.itens-cabeca {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 14px;
}
.itens-relacao {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
  column-rule: 1px solid var(--regua-tenue);
}
.itens-relacao li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 0 10px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--regua-celula);
  font-size: 15px;
  line-height: 1.4;
}
.itens-relacao li:nth-child(even) { background: var(--realce-faixa); }
.item-qtd {
  font-family: var(--fonte-display);
  font-weight: 800;
  color: var(--verde);
}
.item-nome  { color: var(--tinta); }
.item-total {
  font-family: var(--fonte-display);
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
}

.composicoes-nota {
  margin: 26px 0 0;
  padding-bottom: 66px;
  max-width: 88ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* ==================== S06 · escolher a cesta ========================
   Seção editorial de duas colunas. Substituiu a faixa panorâmica de 350 px
   que ficava no fim de S10 — naquela altura a fotografia não cabia: o
   recorte comia rostos e caixa e sobrava fundo.

   A fotografia ocupa metade da composição e o texto a outra metade. A
   coluna da imagem SANGRA até a borda esquerda da tela; a do texto fecha
   alinhada à margem direita da mancha, como o resto da página.

   O QUE ESTAVA ERRADO ATÉ AQUI, E O QUE MUDOU
   O original `ChatGPT Image 4 de set. de 2026, 18_59_29.png` é 1535×1024
   RGBA — um recorte com canal alfa de verdade. Os derivados servidos à
   página eram JPEG, e JPEG não tem alfa: a geração ACHATAVA o recorte
   sobre var(--papel) e ainda acrescentava uma faixa de papel embaixo
   (--folga-inferior). O resultado é que a máscara do CSS não corria
   sobre a fotografia — corria sobre um RETÂNGULO OPACO que apenas
   continha a fotografia, e boa parte da rampa se gastava dissolvendo
   papel em papel. Por isso o corte continuava perceptível.

   Agora os derivados são WebP COM ALFA, sem folga e sem achatamento. O
   recorte flutua sobre o papel da seção, como a cesta do Hero, e as
   máscaras agem sobre os pixels das pessoas.

   ONDE ESTÃO OS CORTES, MEDIDOS NO CANAL ALFA DO ORIGINAL
   | borda    | cobertura na última linha/coluna |
   |----------|----------------------------------|
   | inferior | 81,8 % da largura — corte reto   |
   | direita  | 25,0 % da altura                 |
   | esquerda | 3,1 % da altura — quase limpa    |
   | topo     | 0 % — 6,6 % de vazio, aparado    |

   São essas duas bordas que recebem véu. A esquerda não precisa, e o
   topo foi aparado no recorte (0,0664 → 0,9336 da altura).

   AS DUAS MÁSCARAS PRECISAM SE MULTIPLICAR, NÃO SE SOMAR
   Duas camadas em mask-image compõem por padrão com `add`: a parte
   opaca de uma RESTAURA o que a outra dissolveu, e o véu do canto
   inferior direito simplesmente não acontece. Daí o
   `mask-composite: intersect` (e `source-in` no prefixo WebKit) —
   cada ponto recebe o MENOR dos dois valores.

   Nenhum rosto e nenhum produto recebem transparência. O que dissolve é
   a barra das calças, a bainha do uniforme e a lateral externa de quem
   está na ponta direita. */

.escolha {
  background: var(--papel);
  border-top: 1px solid var(--regua-fina);
}
.escolha-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(28px, 3.4vw, 56px);
}

/* <picture> existe aqui para trocar o ARQUIVO por faixa — arte, não
   resolução. `display: contents` tira o wrapper do fluxo, e todo o CSS
   continua escrito para a <img>, como antes de existirem duas fontes. */
.escolha-figura picture,
.institucional-quadro { display: contents; }

/* O grupo é um RECORTE, não uma fotografia com fundo: flutua sobre o
   papel, como a cesta do Hero.

   BASELINE COMPARTILHADA. Centrado na altura da linha, ele não
   compartilhava nenhuma aresta com a coluna de texto — a base da
   fotografia caía 88 px acima da base do CTA, e as duas colunas liam
   como dois blocos colados em vez de uma composição. Agora a base da
   fotografia coincide com a base do botão: é a única linha que as duas
   colunas têm em comum, e é ela que fecha a seção.
   A legenda sai do fluxo e fica pendurada abaixo dessa linha, no vão do
   padding — assim ela não desloca a baseline que acabou de ser criada. */
.escolha-figura {
  position: relative;
  margin: 0 0 56px;          /* = padding-bottom de .escolha-texto */
  align-self: end;
  /* RESPIRO À ESQUERDA. A coluna sangra até a borda da tela; sem este
     recuo o ombro da primeira pessoa encostava no vidro. */
  padding-left: clamp(18px, 3vw, 56px);
}
.escolha-foto {
  display: block;
  width: 100%;
  /* ZOOM OUT POR DIMENSIONAMENTO. Antes a foto tomava a coluna inteira
     — 695 px a 1440, e mais ainda em telas largas, onde o teto de
     altura entrava e passava a LETREIRAR a imagem dentro da caixa (a
     máscara mede a CAIXA, não o pixel: com letterbox o véu caía no
     lugar errado). Limitar pela LARGURA mantém caixa e imagem sempre
     com a mesma proporção, e a máscara sempre no lugar certo. */
  max-width: 640px;
  height: auto;
  /* Encostada na coluna de texto: é para dentro do texto que o véu
     lateral dissolve. O respiro fica do lado de fora. */
  margin-left: auto;

  /* DUAS MÁSCARAS, MULTIPLICADAS.

     Inferior — o corte reto atravessa 81,8 % da largura do original, e
     é o defeito mais visível. A rampa começa DENTRO da fotografia, e
     não depois dela.

     ONDE ESTÃO AS MÃOS, MEDIDO E NÃO SUPOSTO. A primeira tentativa
     desta rodada abriu a rampa aos 82 %, na suposição de que as mãos
     apoiadas do casal sentado estavam por volta de 78 %. Não estavam:
     recortando o terço inferior do derivado e olhando, as mãos ocupam
     de 90 % a 99 % da altura — elas são a própria base da cena, junto
     com o corte. A rampa larga lavou as duas.

     Com 91 %, a rampa só abre depois das mãos: os dedos e os nós
     ficam. O que dissolve são os últimos 5 %, que é onde a moldura
     corta panturrilha, joelho e a ponta dos dedos. Não há como
     esconder o corte sem encostar neles — eles estão na linha do
     corte —, e o que dá para fazer é encostar de leve.

     Direita — a pessoa da ponta é cortada pela moldura em 25 % da
     altura. O rosto dela está a ~85 % da largura; a rampa só começa aos
     89 %, cruza o cabelo ainda em 0,88 e dissolve na lateral externa do
     uniforme. Nenhum rosto entra na rampa. */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0 94.5%, rgba(0,0,0,.80) 97%, rgba(0,0,0,.36) 98.6%, transparent 100%),
    linear-gradient(to right,  #000 0 89%, rgba(0,0,0,.88) 93%, rgba(0,0,0,.40) 97%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, #000 0 94.5%, rgba(0,0,0,.80) 97%, rgba(0,0,0,.36) 98.6%, transparent 100%),
    linear-gradient(to right,  #000 0 89%, rgba(0,0,0,.88) 93%, rgba(0,0,0,.40) 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* A LEGENDA SAIU. Havia aqui um <figcaption> com a ressalva de imagem
   ilustrativa; o cliente pediu a retirada. Nada a substitui: o texto
   alternativo da imagem continua descritivo e sem atribuir identidade a
   ninguém, e nenhum texto da página afirma que são funcionários reais.

   A margem de 56 px de .escolha-figura NÃO some junto. Ela nunca foi o
   berço da legenda — a legenda era `position: absolute` e ficava fora
   do fluxo. Os 56 px existem para igualar o padding-bottom de
   .escolha-texto, que é o que faz a base da fotografia coincidir com a
   base do botão. Tirá-los quebraria a única aresta que as duas colunas
   compartilham. */

.escolha-texto {
  padding: 56px max(var(--margem-desktop), calc((100vw - var(--mancha-max)) / 2 + var(--margem-desktop))) 56px 0;
}
.escolha-texto .tique { margin: 14px 0 18px; }
.escolha h2 {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(30px, 2.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--tinta);
}
.escolha h2 em { font-style: normal; color: var(--verde); }
.escolha-paragrafo {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
}

.escolha-pontos {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  max-width: 48ch;
}
.escolha-pontos li {
  padding: 14px 0;
  border-top: 1px solid var(--regua-tenue);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.escolha-pontos li:last-child { border-bottom: 1px solid var(--regua-tenue); }
.escolha-pontos strong {
  font-weight: 600;
  color: var(--tinta);
}
.escolha-cta { margin-top: 28px; }

/* ==================== Página complementar · todas as cestas ==========
   `a31/cestas.html`. Mesma folha de estilo, mesmos componentes: a
   composição reaproveita `.composicoes`, `.composicao`, os indicadores e
   o abre-e-fecha da LP sem uma linha nova de comportamento. O que entra
   aqui é só o que a LP não tem — abertura, atalhos de linha e fecho. */

.cestas-abertura {
  background: var(--papel);
  border-top: 1px solid var(--regua-fina);
  padding: 46px 0 40px;
}
.cestas-volta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-size: 13.5px;
  color: var(--tinta-suave);
}
.cestas-volta a { color: var(--verde-escuro, #2f6a2b); }
.cestas-volta [aria-current] { color: var(--tinta); }

.cestas-abertura h1 {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 14px 0 0;
  color: var(--tinta);
}
.cestas-abertura h1 em { font-style: normal; color: var(--verde); }
.cestas-intro {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--tinta-suave);
}

/* Atalhos por linha. Réguas e versalete — a mesma pontuação do
   roteador da LP, sem virar pill nem chip. */
.cestas-atalhos { margin-top: 34px; }
.cestas-atalhos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--regua-fina);
}
.cestas-atalhos li { border-bottom: 1px solid var(--regua-tenue); }
.cestas-atalhos a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
  padding: 14px 26px 14px 0;
  margin-right: 26px;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.cestas-atalhos a:hover,
.cestas-atalhos a:focus-visible { border-bottom-color: var(--limao); }
.cestas-atalho-n {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--tinta-suave);
}

/* Cada linha do portfólio abre com a régua verde do sistema. */
.cestas-linha { border-top: 4px solid var(--verde); }
.cestas-linha + .cestas-linha { margin-top: 0; }
.cestas-linha h2 {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0;
  color: var(--tinta);
}

/* Ressalva de divergência: curta, factual, no lugar do número em
   disputa. Não explica processo interno ao comprador. */
.composicao-ressalva {
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--limao);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.itens-nota {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--regua-tenue);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.cestas-fecho {
  background: var(--papel);
  border-top: 1px solid var(--regua-fina);
  padding: 44px 0 56px;
}
.cestas-cta-fecho { margin-top: 26px; }
.cestas-voltar-fim { margin: 26px 0 0; font-size: 15px; }

/* Saída da LP para o portfólio inteiro. */
.composicoes-saida {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--regua-fina);
}
/* A PORTA PARA AS OUTRAS ONZE COMPOSIÇÕES.

   Este link usava `.cta-secundario`, que é display, negrito, sem
   sublinhado e com um fio vermelho de 3 px em cima. No Hero isso
   funciona: ele fica ao LADO do botão primário, e a vizinhança dá a
   afordância. Aqui ele fica SOZINHO, logo abaixo de uma régua — e
   display negrito sob uma régua é a forma de um TÍTULO DE SEÇÃO, não a
   de um link. Quem precisa de higiene, sindical ou revenda depende dele
   para saber que existem.

   Sai o fio (a régua do bloco já separa), entra sublinhado e seta: as
   duas afordâncias de link que não dependem de vizinhança. Continua
   sendo link, e não botão, para não disputar com os botões verdes de
   conversão — que é onde o clique vale dinheiro. */
.composicoes-todas {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--limao);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color 160ms ease, text-decoration-color 160ms ease, gap 160ms ease;
}
.composicoes-todas:hover {
  color: var(--verde);
  text-decoration-color: var(--verde);
  gap: 14px;                      /* a seta avança: o link responde */
}
.composicoes-todas .seta { font-size: 19px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .composicoes-todas { transition: none; }
  .composicoes-todas:hover { gap: 10px; }
}

.composicoes-saida-apoio {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* ============================ Avaliações no Google ================== */

/* Sem nota, sem estrela, sem número, sem depoimento: o Google devolve um
   muro de consentimento e nada disso pôde ser lido na fonte. O bloco
   convida e leva ao perfil verificado — e só. */
.avaliacoes {
  background: var(--papel);
  border-top: 1px solid var(--regua-fina);
}
/* UMA COLUNA É O PADRÃO. Sempre, em qualquer largura e em qualquer
   estado. As duas colunas do estado vazio são uma exceção de desktop, e
   vivem dentro de um media query de LARGURA MÍNIMA — ver mais abaixo.

   ┌ POR QUE ISTO ESTÁ ESCRITO ASSIM ────────────────────────────────────┐
   │ Na rodada de 26/09 a exceção foi escrita aqui fora, como            │
   │ `.avaliacoes-grade:has(.avaliacoes-convite-so)`. Essa regra tem     │
   │ especificidade 0,2,0; a regra de uma coluna dentro de               │
   │ `@media (max-width: 960px)` tem 0,1,0. Media query NÃO acrescenta   │
   │ especificidade — então a exceção de desktop venceu TAMBÉM no        │
   │ celular, e a seção saiu com o título e o parágrafo espremidos em    │
   │ uma coluna de ~130 px, quebrando palavra por palavra, com o botão   │
   │ na lateral.                                                         │
   │                                                                     │
   │ A lição, que vale para a página inteira: exceção de desktop entra   │
   │ por `min-width`, nunca por especificidade maior no escopo global.   │
   │ `qa-composicao-humana.js` passou a medir a largura real do          │
   │ parágrafo em 360 px para que isto não volte em silêncio.            │
   └─────────────────────────────────────────────────────────────────────┘ */
.avaliacoes-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.avaliacoes h2 {
  margin-top: 16px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -.018em;
}
.avaliacoes h2 em { font-style: normal; color: var(--verde); }

/* As definições de .avaliacoes-texto e .cta-avaliacoes que viviam aqui
   eram duplicata exata das de baixo (linhas ~1830 e ~1913) — sobra de um
   layout anterior. Removidas: as de baixo já venciam por ordem. */

/* ============================ S10 · fotografia ilustrativa ========== */

/* Fotografia de estocagem em faixa sangrada, dissolvendo no papel pelo
   topo. Legenda visível: é ilustração, não registro da sede. */
.processo-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.processo-foto img {
  width: 100%;
  height: clamp(220px, 30vw, 380px);
  object-fit: cover;
  object-position: 50% 42%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 88%, transparent 100%);
}
.processo-foto figcaption {
  position: absolute;
  right: max(var(--margem-desktop), calc((100% - var(--mancha-max)) / 2 + var(--margem-desktop)));
  bottom: 14px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--tinta-suave);
  background: var(--papel);
  padding: 5px 10px;
}
.etapa-nota {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tinta-suave);
}

/* ============================ Ações flutuantes ====================== */

/* Desktop: um botão só. Mobile: a barra inferior. Nunca os dois. */
.fab-whatsapp {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: var(--verde);
  color: var(--branco);
  border-bottom: 4px solid var(--limao);
  text-decoration: none;
  transition: border-color 160ms ease;
}
.fab-whatsapp:hover { border-bottom-color: var(--branco); }

.barra-acoes { display: none; }

/* ============================ Campo de seleção do formulário ======== */

.campo-selecao input[readonly] {
  background: var(--papel-2);
  border-bottom-color: var(--limao);
}
.limpar-selecao {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--tinta-suave);
  border-radius: 0;
  padding: 2px 0;
  margin-left: 4px;
  font: inherit;
  color: var(--tinta);
  cursor: pointer;
}
.limpar-selecao:hover { border-bottom-color: var(--vermelho); color: var(--vermelho); }

/* ============================ Passos da coluna de apoio ============= */

.apoio-passos {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  counter-reset: passo;
}
.apoio-passos li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--regua-celula);
}
.passo-num {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--verde);
}
.passo-txt {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--tinta);
}


/* ==================== Fotografia de apresentação da equipe (S12) =====

   Faixa horizontal integrada ao papel, com dissolução nas duas pontas.
   O enquadramento exclui o logotipo do uniforme — que NÃO é a assinatura
   oficial da marca. A legenda diz, em duas palavras, que é imagem de
   apresentação e não registro fotográfico.
   ===================================================================== */


/* ==================== Avaliações do Google ===========================

   O layout está completo e é o que recebe as avaliações quando elas
   chegarem: três no desktop, uma por vez no mobile com controles
   manuais. Enquanto o conteúdo verificado não existe, cada lugar diz o
   que falta — em vez de um depoimento inventado ocupando o espaço.
   ===================================================================== */

.avaliacoes-cabeca {
  padding-top: 76px;
  padding-bottom: 26px;
}
.avaliacoes-texto {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--tinta-suave);
}

/* A QUANTIDADE DE CARTÕES RESPONDE À LARGURA — e o piso é definido pela
   LEITURA, não pela contagem máxima possível.

   A primeira versão usou piso de 258 px, para caber QUATRO cartões em
   1440. Medido no render: cada cartão ficava com 263 px e o texto dentro
   dele com 235 px, cerca de 23 caracteres por linha. Isso não é medida
   de leitura — é coluna espremida, exatamente o que a instrução proíbe
   ao dizer que a quantidade não pode prejudicar a leitura.

   Com piso de 290 px e o cartão mais justo, a conta sobre a largura
   ÚTIL — a mancha menos o padding — dá:

     1052 px (1440)  → 3 cartões de ~350 px
      596 px  (768)  → 2 cartões de ~298 px
      346 px  (390)  → 1 cartão, com controles manuais

   QUATRO CARTÕES NÃO ACONTECEM, e é deliberado: `--mancha-max` é
   1180 px, então nem numa tela de 2560 px haveria largura para quatro
   cartões legíveis. A instrução era "até quatro, SE houver espaço
   confortável". Não há — e três é a resposta honesta.

   `auto-fit` resolve sozinho o caso de poucas avaliações: com duas na
   fonte, as trilhas vazias colapsam e saem duas colunas, nunca três
   buracos. */
.avaliacoes-lista {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0;
  border-top: 2px solid var(--verde);
}

/* COMENTÁRIO LONGO — progressive enhancement, não corte cego.
   Sem JavaScript, o texto aparece INTEIRO: nenhuma avaliação fica
   escondida atrás de um botão que não funciona. Quando o script assume,
   ele marca a lista com `avaliacoes-com-js`, o texto passa a ser
   limitado a 8 linhas e o botão de expandir — que nasce `hidden` —
   aparece, com `aria-expanded` de verdade. É o mesmo padrão do
   abre-e-fecha das cestas. */
.avaliacoes-com-js .avaliacao-texto-longo {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.avaliacoes-com-js .avaliacao-aberta .avaliacao-texto-longo {
  display: block;
  overflow: visible;
}
.avaliacao-mais {
  align-self: flex-start;
  margin-top: 10px;
  padding: 8px 0;
  min-height: 44px;              /* alvo de toque */
  background: none;
  border: 0;
  border-bottom: 2px solid var(--limao);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--tinta);
  cursor: pointer;
}
.avaliacao-mais:hover { border-bottom-color: var(--verde); }

/* Atribuição: de onde a avaliação veio, em cada cartão, e o link para a
   fonte no rodapé do bloco. O Google exige que a origem fique clara. */
.avaliacao-origem {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--tinta-suave);
}
.avaliacoes-agregado {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.avaliacoes-agregado strong {
  font-family: var(--fonte-display);
  font-weight: 800;
  color: var(--verde);
}
.avaliacao {
  display: flex;
  flex-direction: column;
  /* 24 px em vez de 28: num cartão de ~300 px, oito pixels de folga de
     cada lado custam quase um caractere por linha. */
  padding: 28px 24px 30px;
  border-left: 1px solid var(--regua-tenue);
}
/* A autoria desce para o pé do cartão: as três linhas de assinatura
   ficam alinhadas mesmo com textos de tamanhos diferentes. */
.avaliacao-autor { margin-top: auto; }
.avaliacao:first-child { padding-left: 0; border-left: 0; }

.avaliacao-nota {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  color: var(--verde);
  letter-spacing: .04em;
}
.avaliacao-texto {
  margin-top: 16px;
  /* 16 px: meio ponto abaixo do corpo da página, porque a medida aqui é
     de cartão e não de parágrafo corrido. */
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
}
.avaliacao-autor {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--regua-celula);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* O texto da avaliação pode levar ao original, quando a fonte devolve
   o link. Sem sublinhado permanente: é leitura, não navegação. */
.avaliacao-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--regua-tenue);
}
.avaliacao-link:hover { border-bottom-color: var(--verde); }

/* Nota média e quantidade — só existem se tiverem vindo da fonte. */
.avaliacoes-agregado {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.avaliacoes-agregado strong {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--verde);
}

/* Estado sem avaliações verificadas: um convite curto, e nada mais.
   Sem cartão vazio, sem espaço reservado, sem texto de instrução. */
.avaliacoes-convite {
  padding: 4px 0 64px;
}
.cta-avaliacoes {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 32px;
  background: var(--branco);
  color: var(--tinta);
  border-bottom: 4px solid var(--verde);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: border-color 160ms ease;
}
.cta-avaliacoes:hover { border-bottom-color: var(--limao); }

/* Controles do mobile — escondidos até o JS assumir, e só no mobile. */
.avaliacoes-controles { display: none; }

/* ====================================== Movimento — opcional e subordinado

   Parallax mínimo nos dois círculos, por scroll-driven animation nativa:
   sem biblioteca, sem JavaScript, sem reposicionar texto ou CTA. Se o
   navegador não suportar `animation-timeline`, a página fica idêntica,
   apenas estática. Desligado sob prefers-reduced-motion e no mobile, onde
   o ganho não paga o custo de leitura.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .barra-acoes { transition: none; }
}

@keyframes circulo-sobe   { to { transform: translateY(-52px); } }
@keyframes circulo-desce  { to { transform: translateY(34px); } }

@media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
  @supports (animation-timeline: scroll()) {
    .circulo-limao {
      animation: circulo-sobe linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 760px;
    }
    .circulo-verde {
      animation: circulo-desce linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 760px;
    }
  }
}

/* ============================== Faixa intermediária · 721 px a 1100 px */

@media (min-width: 721px) and (max-width: 1100px) {

  .marca-quadro { --marca: 288px; }

  .cabeca-secao h2 { font-size: 34px; }

  /* A banda de fatos vai a duas colunas antes de o valor estourar a célula. */
  .faixa-fatos { clip-path: polygon(0 32px, 300px 0, 100% 0, 100% 100%, 0 100%); }
  .faixa-fatos::before { clip-path: polygon(0 32px, 300px 0, 100% 0, 100% 6px, 300px 6px, 0 38px); }
  .faixa-personalizada { clip-path: polygon(0 0, calc(100% - 300px) 0, 100% 32px, 100% 100%, 0 100%); }
  .faixa-personalizada::before { clip-path: polygon(0 0, calc(100% - 300px) 0, 100% 32px, 100% 38px, calc(100% - 300px) 6px, 0 6px); }

  .institucional-ano { font-size: 96px; }
  .institucional h2 { font-size: 34px; }
  .institucional-texto { max-width: 56%; }
  .institucional-fatos {
    grid-template-columns: 1fr 1fr;
    row-gap: 34px;
  }
  .institucional-fatos li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .institucional-fatos li:nth-child(n+3) {
    border-top: 1px solid var(--fio-sobre-verde);
    padding-top: 30px;
  }

  .institucional-foto { width: min(58vw, 760px); }
  .personal-nome { font-size: 28px; }

  /* Um número só por faixa. As regras de grade e de tamanho ficam no
     bloco base, escritas em cima da variável — inclusive a alternância,
     que é o que antes divergia daqui. */
  .composicao { --foto-cesta: 240px; }
  .composicao-abre { gap: 0 26px; }
  .composicao-nome { font-size: 26px; }
  .composicao-indicadores { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .composicao-indicadores li:nth-child(4) { padding-left: 0; border-left: 0; }
  .avaliacoes h2 { font-size: 28px; }
}

/* ============ Avaliações · estado vazio em duas colunas ==============
   EXCEÇÃO DE DESKTOP, e por isso entra por `min-width`. Acima de 961 px
   a mancha tem 1180 px: com o convite embaixo do cabeçalho sobravam
   906 px de papel aberto à direita, e o bloco lia como buraco em vez de
   pausa. Ao lado do cabeçalho, o mesmo conteúdo vira um interstício
   deliberado e a seção ainda encolhe de 373 px para 266 px.

   Abaixo de 961 px esta regra simplesmente não existe, e vale a única
   coluna — que é o certo tanto para o convite quanto, depois, para os
   cartões. A classe `-so` vem do gerador e só aparece no estado vazio,
   então a exceção nunca alcança o estado com avaliações. */

@media (min-width: 961px) {
  .avaliacoes-grade:has(.avaliacoes-convite-so) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 56px;
  }
  .avaliacoes-grade:has(.avaliacoes-convite-so) .avaliacoes-cabeca {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .avaliacoes-grade:has(.avaliacoes-convite-so) .avaliacoes-convite {
    padding: 0;
  }
}

/* ----------------------------- Hero de duas colunas · 961 px a 1100 px */

@media (min-width: 961px) and (max-width: 1100px) {
  .hero h1 { font-size: 50px; }
  .hero-linha { font-size: 18px; max-width: 32ch; }
  .hero-visual { min-height: 380px; }
  .hero-texto { padding-right: 34px; }
  .circulo-limao { width: 700px; height: 700px; right: -220px; top: -200px; }
  .circulo-verde { width: 350px; height: 350px; right: 330px; bottom: -250px; }
}

/* ------------------------- Hero em coluna única abaixo de 960 px ------ */

/* O comportamento intermediário: o Hero assimétrico é uma composição de
   desktop. Abaixo de 960 px ele recompõe em uma coluna — a mesma ordem do
   mobile, em escala de tablet —, em vez de espremer título e cesta em duas
   colunas estreitas. A assimetria do desktop está preservada; o que muda é
   a faixa em que ela deixa de caber. */

@media (max-width: 960px) {
  .hero-grade {
    grid-template-columns: 1fr;
    padding-top: 36px;
    padding-bottom: 54px;
  }
  .hero-texto  { display: contents; }
  .olho-hero   { order: -5; margin-bottom: 18px; }
  .hero h1     { order: -4; font-size: 46px; }
  .hero-visual { order: -3; min-height: 0; margin-top: 28px; justify-content: flex-end; align-self: auto; }
  .hero-linha  { order: -2; margin-top: 26px; max-width: 46ch; font-size: 18px; }
  .hero-ctas   { order: -1; margin-top: 30px; }
  .hero-apoio  { order: 0; margin-top: 32px; max-width: 62ch; }
  .hero-cesta  { width: min(520px, 90%); margin-right: 0; }
  .circulo-limao { width: 620px; height: 620px; right: -170px; top: -170px; }
  .circulo-verde { width: 310px; height: 310px; right: 360px; bottom: -215px; }

  /* S04 recomposto em faixa: a descrição sai da coluna estreita. */
  .linhas .cabeca-secao { padding-top: 56px; }
  .linha-item {
    grid-template-columns: 84px minmax(0, 1fr) 190px;
    grid-template-areas:
      "num  nome img"
      "desc desc desc"
      "cnt  cnt  link";
    align-items: center;
    gap: 14px 18px;
    padding: 32px 22px 28px;
  }
  .linha-item .linha-conteudo { display: contents; }
  .linha-item .linha-nome { grid-area: nome; font-size: 26px; align-self: center; }
  .linha-item .linha-numeral { align-self: center; }
  .linha-item .linha-conteudo { align-self: center; }
  .linha-item .linha-descricao {
    grid-area: desc;
    margin-top: 0;
    max-width: 66ch;
    font-size: 16.5px;
  }
  .linha-recorte {
    grid-area: img;
    width: 190px;
    height: 148px;
    justify-self: end;
    margin: 0;
  }
  .linha-contagem { grid-area: cnt; align-self: center; justify-self: start; text-align: left; }
  .linha-link     { grid-area: link; align-self: center; justify-self: end; margin-top: 0; }
  .linha-numeral  { font-size: 54px; }
  .linha-item-sem-recorte {
    grid-template-areas:
      "num  nome nome"
      "desc desc desc"
      "cnt  cnt  link";
  }

  /* S10: cinco colunas de 190 px não leem. A escada vira vertical, com o
     numeral à esquerda — o que o plano já previa para o mobile. */
  .processo .cabeca-secao { padding-top: 54px; }
  .etapas {
    grid-template-columns: 1fr;
    padding-bottom: 48px;
  }
  .etapa {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 0 20px;
    align-items: start;
    padding: 22px 0 22px;
    border-left: 0;
    border-bottom: 1px solid var(--regua-celula);
  }
  .etapa:first-child { padding-left: 0; }
  .etapa:last-child { border-bottom: 0; }
  .etapa-numeral { font-size: 52px; }
  .etapa-nome { margin-top: 0; font-size: 20px; }
  .etapa-descricao { font-size: 16px; max-width: 62ch; }

  .ressalvas {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0 36px;
  }

  /* S12: uma coluna. O que ter em mãos vem ANTES do formulário, para o
     visitante juntar a informação antes de começar a digitar. */
  .orcamento-grade {
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding-top: 54px;
    padding-bottom: 58px;
  }
  /* Uma coluna: a colocação explícita do desktop é desfeita e a ordem passa
     a ser a do DOM — cabeçalho, o que ter em mãos, formulário. É o que o
     plano pede no mobile: juntar a informação antes de começar a digitar. */
  .orcamento-cabeca,
  .orcamento-apoio,
  .apoio-canais,
  .formulario { grid-column: 1; grid-row: auto; }
  .apoio-canais { margin-top: 0; padding-top: 26px; border-top: 2px solid var(--verde); }
  .orcamento-cabeca { margin-bottom: 0; }
  .orcamento-cabeca h2 { font-size: 34px; }
  .apoio-lista { columns: 2; column-gap: 32px; }
  .apoio-lista li { break-inside: avoid; }
  .apoio-canais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .apoio-canais .apoio-titulo { grid-column: 1 / -1; }
  .apoio-nota { grid-column: 1 / -1; }

  .circulo-orc-limao { width: 460px; height: 460px; left: -190px; top: -120px; }
  .circulo-orc-verde { width: 230px; height: 230px; right: -70px; bottom: -80px; }

  /* Piloto das composições */
  .composicoes .cabeca-secao { padding-top: 54px; }
  .composicao { --foto-cesta: 210px; padding: 34px 22px 32px; }
  .composicao-abre { gap: 0 28px; }
  .composicao-nome { font-size: 27px; }
  .composicao-indicadores {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    gap: 20px 0;
  }
  .composicao-indicadores li:nth-child(4) { padding-left: 0; border-left: 0; }
  .itens-relacao { columns: 1; column-rule: 0; }
  .composicoes-nota { padding-bottom: 48px; }

  /* Avaliações */
  .avaliacoes-grade {
    grid-template-columns: 1fr;
    padding-top: 46px;
    padding-bottom: 48px;
  }
  .avaliacoes h2 { font-size: 28px; }
  .avaliacoes-cabeca { padding-top: 54px; }
  /* A regra `grid-template-columns: 1fr` que existia aqui foi removida:
     ela era do tempo da grade fixa de três colunas e, com `auto-fit`,
     passou a forçar UMA coluna a 768 px, onde cabem duas
     confortavelmente. Quem decide a quantidade agora é a largura
     disponível, que é o que o cliente pediu. Abaixo de 720 px o
     carrossel manual assume e mostra um cartão por vez. */
  .avaliacao { padding: 26px 22px; border-left: 0; border-top: 1px solid var(--regua-tenue); }
  .avaliacao:first-child { padding-left: 22px; border-top: 0; }
  .cta-avaliacoes { justify-content: center; }

  /* S14 */
  .rodape { clip-path: polygon(0 32px, 300px 0, 100% 0, 100% 100%, 0 100%); }
  .rodape::before { clip-path: polygon(0 32px, 300px 0, 100% 0, 100% 6px, 300px 6px, 0 38px); }
  .rodape-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 40px;
    padding-top: 64px;
  }
  .rodape-marca { grid-column: 1 / -1; }
  .rodape-marca .marca-quadro-rodape { --marca: 230px; }
}

/* ================================================ Mobile · 390 × 844 */

@media (max-width: 720px) {

  .mancha { padding-left: var(--margem-mobile); padding-right: var(--margem-mobile); }

  /* S00 — a barra de contato mantém a informação e some da composição:
     serviço, não conteúdo. O masthead fica com a marca, maior que antes. */
  /* A barra quebra em duas linhas em vez de encolher o horário abaixo do
     tamanho legível. O telefone mantém os 44 px de alvo de toque. */
  .barra-contato-grade {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 18px;
    min-height: 0;
    padding-bottom: 10px;
  }
  .barra-telefone { font-size: 16px; }
  .barra-horario { font-size: 13px; flex: 1 0 100%; }

  .masthead { padding-top: 18px; padding-bottom: 16px; }
  .marca-quadro { --marca: 232px; }

  /* Hero em uma coluna. Ordem: olho → título → cesta → introdução → CTAs.
     A ressalva de frete desce para depois dos CTAs — continua na seção,
     em degrau de apoio, e libera a primeira dobra para produto e ação. */
  .hero-grade {
    grid-template-columns: 1fr;
    padding-top: 26px;
    padding-bottom: 46px;
  }
  .hero-texto { display: contents; }
  .olho-hero      { order: -5; margin-bottom: 16px; }
  .hero h1        { order: -4; font-size: 38px; letter-spacing: -.020em; }
  .hero-visual    { order: -3; }
  .hero-linha     { order: -2; font-size: 16.5px; margin-top: 22px; max-width: none; }
  .hero-ctas      { order: -1; margin-top: 24px; gap: 14px 24px; }
  .hero-apoio     { order: 0; margin-top: 26px; max-width: none; }

  .hero-visual {
    border-left: 0;
    min-height: 0;
    margin-top: 22px;
    justify-content: center;
  }
  .hero-cesta { width: min(330px, 94%); margin-right: 0; }
  .cta-primario { width: 100%; justify-content: center; }

  /* Círculos reancorados ao Hero, razão 2:1 preservada, longe do CTA. */
  .circulo-limao { width: 440px; height: 440px; right: -160px; top: -80px; }
  .circulo-verde { width: 220px; height: 220px; right: 190px; bottom: -155px; }

  .cabeca-secao h2 { font-size: 29px; margin-top: 16px; }

  /* S02 em 2 × 2, sobre a camada tonal. */
  .cabeca-roteador { padding-top: 30px; gap: 14px; }
  .cabeca-roteador h2 { font-size: 18px; white-space: normal; }
  .roteador-colunas {
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
    padding-bottom: 36px;
  }
  .roteador-colunas li {
    padding: 18px 16px;
    border-left: 0;
  }
  .roteador-colunas li:nth-child(even) { border-left: 1px solid var(--regua-tenue); }
  .roteador-colunas li:nth-child(odd)  { padding-left: 0; }
  .roteador-colunas li:nth-child(n+3) {
    border-top: 1px solid var(--regua-celula);
    padding-bottom: 0;
  }
  .roteador-entrada { font-size: 16.5px; }
  .roteador-apoio { font-size: 15px; }

  /* S03 no mobile: olho → ano → título → fotografia → texto → fatos.
     A imagem sobe para perto do título e ganha largura total. */
  .institucional { display: flex; flex-direction: column; }
  .institucional-grade,
  .institucional-texto { display: contents; }

  .institucional .olho,
  .institucional-ano,
  .institucional h2,
  .institucional-paragrafo {
    padding-left: var(--margem-mobile);
    padding-right: var(--margem-mobile);
  }
  .institucional .olho        { order: -6; margin-top: 38px; }
  .institucional-ano          { order: -5; font-size: 86px; margin-top: 14px; }
  .institucional .tique       { order: -4; margin: 18px var(--margem-mobile) 20px; }
  .institucional h2           { order: -3; font-size: 30px; }
  .institucional-foto         { order: -2; }
  .institucional-paragrafo    { order: -1; font-size: 16.5px; margin-top: 24px; }
  .institucional > .faixa-verde { order: 1; padding-left: 0; padding-right: 0; }

  /* FAMÍLIA · celular
     Assunto que precisa sobreviver: o menino, o pai, a mãe e a comida na
     mesa. O arquivo servido aqui já é outro — reenquadrado do original —,
     então o CSS não precisa mais recortar quase nada: só respeita a
     proporção que veio.

     O fade de cima saiu. Ele existia para disfarçar o topo de um recorte
     que não era deste enquadramento, e desbotava o rosto do pai. A foto
     agora encosta no papel em cima, limpa; o único véu é embaixo, curto,
     sobre a toalha e a madeira da mesa, para a transição ao parágrafo. */
  .institucional-foto {
    position: static;
    width: 100%;
    aspect-ratio: 860 / 742;
    object-position: 50% 50%;
    margin-top: 26px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0 90%, transparent 100%);
  }

  /* Uma coluna. O vão lateral entre as colunas some junto. */
  .escolha-grade {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  /* Em uma coluna não existe baseline para compartilhar: a margem de
     56 px do desktop viraria um vão entre imagem e texto. E o recuo de
     respiro do desktop também sai — aqui a foto usa a largura toda. */
  /* padding-top: aparar a faixa vazia do original colou o alto dos
     cabelos na aresta da seção. No desktop a figura é alinhada pela
     base e sobra espaço acima; aqui não sobra, e o ar precisa ser
     pedido. */
  .escolha-figura { align-self: auto; margin-bottom: 0; padding: 20px 0 0; }

  /* CELULAR · mesmo enquadramento, parâmetros próprios.

     O arquivo é o mesmo do desktop — os sete, inteiros, com alfa. O que
     muda são as rampas, e elas MUDAM DE VERDADE: reaproveitar os
     números do desktop seria errado aqui, porque a imagem passa a
     ocupar a largura toda da tela e o texto vem ABAIXO, não ao lado.

     · O véu inferior é um pouco mais longo que o do desktop — é ele
       que faz a passagem para o texto, e aqui a passagem é vertical.
       Mas obedece ao mesmo limite medido: opaco até 91 %, igual ao desktop, porque as
       mãos do casal sentado ocupam de 90 % a 99 % da altura.
     · O véu direito fica quase simbólico — começa aos 94 %. Em uma
       coluna não há texto à direita para dissolver dentro; o que se
       resolve é só a aresta do recorte contra a margem da tela.
     · A legenda sobe para logo abaixo da imagem e o texto começa em
       seguida: a rampa já criou o espaço, e um vão grande somado a ela
       abriria um buraco no meio da seção. */
  .escolha-foto {
    max-width: none;
    margin-left: 0;
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0 93%, rgba(0,0,0,.80) 96.5%, rgba(0,0,0,.34) 98.4%, transparent 100%),
      linear-gradient(to right,  #000 0 94%, rgba(0,0,0,.62) 98%, transparent 100%);
    mask-image:
      linear-gradient(to bottom, #000 0 93%, rgba(0,0,0,.80) 96.5%, rgba(0,0,0,.34) 98.4%, transparent 100%),
      linear-gradient(to right,  #000 0 94%, rgba(0,0,0,.62) 98%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* A rampa inferior entrega os últimos ~14 % da imagem já quase
     transparentes; medido como espaço em branco, esse trecho soma-se ao
     padding e abre um vão. A legenda sobe um pouco para dentro dele —
     mas só um pouco: a -18 px ela caía sobre o braço do rapaz sentado,
     que é exatamente o erro que ela evita no desktop. */

  .escolha-texto {
    padding: 14px var(--margem-mobile) 48px;
  }
  .escolha h2 { font-size: 28px; }
  .escolha-paragrafo { font-size: 16.5px; margin-top: 16px; }
  .escolha-pontos { margin-top: 22px; }
  /* NO CELULAR, ESTE CTA DEIXA DE SER PREENCHIDO — e não é enfeite.
     A barra fixa do pé tem o mesmo verde, a mesma largura e o mesmo
     destino (#orcamento). Medido a 390 px: um botão verde de 346 px de
     largura a 322 px de distância de outro bloco verde de largura
     cheia, os dois no mesmo quadro. Dois verdes de peso igual no mesmo
     lugar dividem o clique em vez de somar.

     O caminho não some: ele vira BOTÃO DE CONTORNO. Mantém a forma de
     botão, o alvo de toque e o destino; o preenchimento sólido fica
     sendo a marca de um elemento só, o que está sempre na tela.
     No desktop não há barra, e ali o CTA continua preenchido. */
  .escolha-cta {
    display: block;
    text-align: center;
    margin-top: 26px;
    background: transparent;
    /* O RÓTULO USA A TINTA, NÃO O VERDE — e isto veio de uma medição,
       não de gosto. `--verde` (#40833B) sobre `--papel` (#F7F5EF) dá
       4,25:1, abaixo dos 4,5:1 que a WCAG 2.2 AA exige para texto
       normal; a 17 px em peso 700 o botão ainda não alcança o limiar de
       "texto grande" (18,66 px em negrito). O QA reprovou a primeira
       versão deste botão exatamente por isso.

       Nenhum verde da paleta chega a 4,5:1 sobre o papel, e inventar um
       tom novo seria mexer no sistema visual congelado. A saída é a que
       o sistema já oferece: tinta no rótulo (12,75:1), verde no
       contorno — onde o mínimo é 3:1 para componente, e 4,25 passa. */
    color: var(--tinta);
    border: 2px solid var(--verde);
    border-bottom-width: 4px;
  }
  .escolha-cta:hover { border-bottom-color: var(--limao); color: var(--tinta); }

  .faixa-fatos { clip-path: polygon(0 24px, 190px 0, 100% 0, 100% 100%, 0 100%); }
  .faixa-fatos::before { clip-path: polygon(0 24px, 190px 0, 100% 0, 100% 5px, 190px 5px, 0 29px); }
  .faixa-fatos .mancha { padding-top: 40px; padding-bottom: 38px; }
  .institucional-fatos {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }
  .institucional-fatos li {
    padding: 0 14px;
    border-left: 0;
  }
  .institucional-fatos li:nth-child(even) { border-left: 1px solid var(--fio-sobre-verde); }
  .institucional-fatos li:nth-child(odd)  { padding-left: 0; }
  .institucional-fatos li:nth-child(n+3) {
    border-top: 1px solid var(--fio-sobre-verde);
    padding-top: 26px;
  }
  .fato-valor  { font-size: 21px; min-height: 48px; }
  .fato-rotulo { font-size: 14.5px; }

  /* S04 no mobile — recomposto.
     A abertura da faixa é numeral + nome + produto, na mesma linha. A
     descrição desce para uma linha própria, com a largura inteira da
     mancha. Contagem e link fecham a faixa. O produto sai do tamanho de
     ícone e volta a ser reconhecível. */
  .linhas .cabeca-secao { padding-top: 44px; padding-bottom: 18px; }
  /* Respiro lateral de 16 px, com o grid recalculado sobre a largura útil
     restante — a descrição continua ocupando a faixa inteira. */
  .linha-item {
    grid-template-columns: 44px minmax(0, 1fr) 118px;
    grid-template-areas:
      "num  nome nome-img"
      "desc desc desc"
      "cnt  cnt  link";
    align-items: center;
    gap: 12px 10px;
    padding: 26px 16px 24px;
  }
  .linha-numeral { font-size: 40px; }
  .linha-item .linha-nome { grid-area: nome; font-size: 21px; align-self: center; }
  .linha-item .linha-numeral { align-self: center; }
  .linha-item .linha-conteudo { align-self: center; }
  .linha-item .linha-descricao {
    grid-area: desc;
    margin-top: 0;
    max-width: none;
    font-size: 15.5px;
    line-height: 1.5;
  }
  .linha-item .linha-conteudo { display: contents; }
  .linha-recorte {
    grid-area: nome-img;
    width: 118px;
    height: 98px;
    justify-self: end;
    margin: 0;
  }
  .linha-contagem {
    grid-area: cnt;
    align-self: center;
    justify-self: start;
    text-align: left;
    font-size: 12px;
    letter-spacing: .14em;         /* mesma família de versalete do link */
  }
  .linha-link     { grid-area: link; align-self: center; justify-self: end; margin-top: 0; }
  .linha-item-sem-recorte {
    grid-template-areas:
      "num  nome nome"
      "desc desc desc"
      "cnt  cnt  link";
  }

  .faixa-personalizada { clip-path: polygon(0 0, calc(100% - 190px) 0, 100% 24px, 100% 100%, 0 100%); }
  .faixa-personalizada::before { clip-path: polygon(0 0, calc(100% - 190px) 0, 100% 24px, 100% 29px, calc(100% - 190px) 5px, 0 5px); }

  /* ---- S00: a barra passa a três linhas de serviço, com hierarquia ---- */
  .barra-contato-grade {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 10px;
  }
  .barra-rotulo { font-size: 11px; letter-spacing: .18em; }
  .barra-contatos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 14px;
  }
  .barra-telefone { font-size: 16px; }
  .barra-horario { font-size: 12.5px; flex: 1 0 100%; }

  /* ---- Piloto das composições ---- */
  .composicoes .cabeca-secao { padding-top: 44px; padding-bottom: 18px; }
  .composicoes-intro { font-size: 16.5px; margin-top: 16px; }
  .composicao { padding: 30px 16px 26px; }
  /* CELULAR · UMA ORDEM SÓ, EM TODAS AS CATORZE.
     A faixa era um grid de três linhas com a foto ocupando a coluna da
     direita ao lado do rótulo e do nome. Isso dava à fotografia 118 px
     — do tamanho de um ícone — e fazia o olho pular entre duas colunas
     antes de chegar ao resumo.

     Agora empilha: rótulo → nome → resumo → fotografia → indicadores →
     ações. É a MESMA ordem do documento, então `display: contents`
     basta e não há um único `order` nesta faixa: nada de zigue-zague,
     e a alternância do desktop não atravessa para cá.

     A fotografia ganha 300 px de largura e centraliza. Com o derivado
     de 640 px isso ainda é 2,1× a densidade da tela. */
  .composicao-abre {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
  }
  .composicao-texto { display: contents; }
  .composicao-nome { font-size: 24px; margin-top: 8px; }
  .composicao-resumo { max-width: none; font-size: 15.5px; margin-top: 12px; }
  .composicao-figura { margin-top: 20px; }
  .composicao-foto {
    width: 100%;
    max-width: 300px;
    height: 210px;
    margin: 0 auto;
  }
  .composicao-indicadores {
    grid-template-columns: 1fr 1fr;
    gap: 18px 0;
    margin-top: 20px;
    padding-top: 18px;
  }
  .composicao-indicadores li { padding: 0 14px; }
  .composicao-indicadores li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .indicador-valor { font-size: 21px; }
  .composicao-acoes { gap: 14px 20px; margin-top: 22px; align-items: stretch; }
  /* O botão preenchido toma a faixa inteira: em 360 px sobrar meia
     linha ao lado dele não serve para nada, e um alvo de toque largo
     serve. O expansor fica abaixo, alinhado à esquerda. */
  .composicao-cta { width: 100%; justify-content: center; font-size: 14px; }
  .composicao-abrir { align-self: start; }
  .itens-relacao { columns: 1; column-rule: 0; }
  .itens-relacao li { font-size: 15px; padding: 8px 6px; }
  .composicoes-nota { font-size: 14px; padding-bottom: 40px; }

  /* ---- Avaliações: uma por vez, com controles manuais ---- */
  .avaliacoes h2 { font-size: 26px; }
  .avaliacoes-cabeca { padding-top: 44px; padding-bottom: 18px; }
  .avaliacoes-texto { font-size: 16.5px; }
  .avaliacao { padding: 24px 0; }
  .avaliacao:first-child { padding-left: 0; }
  .avaliacao[hidden] { display: none; }
  .avaliacoes-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--regua-celula);
  }
  .avaliacoes-controles[hidden] { display: none; }
  .controle-avaliacao {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--limao);
    border-radius: 0;
    min-height: 46px;
    min-width: 46px;
    padding: 0 14px;
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta);
    cursor: pointer;
  }
  .controle-avaliacao:disabled { color: var(--tinta-suave); border-bottom-color: var(--regua-tenue); cursor: default; }
  .avaliacoes-posicao {
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--tinta-suave);
  }
  .cta-avaliacoes { width: 100%; justify-content: center; }

  /* ---- Fotografia de S10 ---- */
  /* A faixa é 4,57:1; num recorte de 200 px o centro cai na caixa e os
     rostos saem. O enquadramento desloca para a esquerda, onde está a
     primeira pessoa. */
  .processo-foto img { height: 210px; object-position: 24% 46%; }
  .processo-foto figcaption { right: var(--margem-mobile); font-size: 11px; }

  /* ---- Ações flutuantes: a barra substitui o botão ---- */
  .fab-whatsapp { display: none; }
  .barra-acoes {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px var(--margem-mobile);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--papel);
    border-top: 2px solid var(--verde);
    transform: translateY(0);
    transition: transform 220ms ease, opacity 220ms ease;
  }
  .barra-acoes.barra-oculta {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  .acao-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    background: var(--verde);
    color: var(--branco);
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-bottom: 3px solid var(--verde);
  }
  .acao-alternativa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    min-width: 50px;
    padding: 0 16px;
    background: var(--branco);
    color: var(--tinta);
    border-bottom: 3px solid var(--limao);
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
  }
  /* A barra reserva espaço no fim da página: nunca cobre o rodapé. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* ---- S10 ---- */
  .processo .cabeca-secao { padding-top: 44px; padding-bottom: 20px; }
  .processo-intro { font-size: 16.5px; margin-top: 16px; }
  .etapa { grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; padding: 18px 0; }
  .etapa-numeral { font-size: 44px; }
  .etapa-nome { font-size: 19px; }
  .etapa-descricao { font-size: 15.5px; }
  .ressalvas { padding: 28px 0 32px; gap: 22px; }
  .ressalvas li { padding-left: 16px; }
  .ressalva-texto { font-size: 15px; }

  /* ---- S12 ---- */
  .orcamento-grade { padding-top: 42px; padding-bottom: 46px; row-gap: 34px; }
  .orcamento-cabeca h2 { font-size: 29px; }
  .apoio-lista { columns: 1; }
  .apoio-canais { grid-template-columns: 1fr; }
  .formulario {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 22px;
  }
  .campo-metade, .campo-cidade, .campo-uf { grid-column: 1 / -1; }
  .campo-uf { max-width: 160px; }
  .formulario-acao { flex-direction: column; align-items: stretch; gap: 16px; }
  .formulario-acao .cta-primario { width: 100%; justify-content: center; }
  .circulo-orc-limao { width: 340px; height: 340px; left: -150px; top: -70px; }
  .circulo-orc-verde { width: 170px; height: 170px; right: -60px; bottom: -60px; }

  /* ---- S14 ---- */
  .rodape { clip-path: polygon(0 24px, 190px 0, 100% 0, 100% 100%, 0 100%); }
  .rodape::before { clip-path: polygon(0 24px, 190px 0, 100% 0, 100% 5px, 190px 5px, 0 29px); }
  .rodape-grade {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 48px;
    padding-bottom: 34px;
  }
  .rodape-marca .marca-quadro-rodape { --marca: 214px; }
  .rodape-assinatura { margin-top: 16px; font-size: 12px; }
  .rodape-simbolo { width: 260px; left: -78px; bottom: -52px; }
  .rodape-legal {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 34px;
  }
  .voltar-topo { width: 100%; justify-content: center; }

  .faixa-personalizada .mancha { padding-top: 42px; padding-bottom: 46px; }
  .linha-personalizada {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .personal-nome { font-size: 27px; }
  .personal-descricao { font-size: 16px; }
  .cta-claro { justify-content: center; width: 100%; }
}

/* ------------------------------------------------ 360 px e abaixo ----- */

/* Checagem de compressão: a exigência formal de primeira dobra continua
   sendo 390 × 844. Aqui só se evita que texto e produto se apertem. */
@media (max-width: 380px) {
  .marca-quadro { --marca: 214px; }
  .hero h1 { font-size: 31px; }
  .linha-item { grid-template-columns: 40px minmax(0, 1fr) 100px; gap: 8px; padding-left: 14px; padding-right: 14px; }

  .linha-recorte { width: 100px; height: 84px; }
  .linha-numeral { font-size: 36px; }
  .linha-item .linha-nome { font-size: 20px; }
  .institucional-ano { font-size: 78px; }
  .composicao { padding-left: 14px; padding-right: 14px; }
  .composicao-nome { font-size: 21px; }
  .acao-alternativa { padding: 0 12px; font-size: 13px; }
}

/* ---------------- Página de cestas · mobile (≤ 720 px) -------------- */

@media (max-width: 720px) {
  .cestas-abertura { padding: 30px 0 28px; }
  .cestas-volta { margin-bottom: 18px; font-size: 13px; }
  .cestas-intro { font-size: 16.5px; margin-top: 16px; }

  /* Os atalhos viram lista empilhada: em linha, a 360 px, os quatro
     nomes de linha quebravam no meio da palavra. */
  .cestas-atalhos ul { display: block; }
  .cestas-atalhos li { display: block; }
  .cestas-atalhos a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-right: 0;
    padding: 14px 0;
  }

  .cestas-fecho { padding: 34px 0 44px; }
  .cestas-cta-fecho { display: block; text-align: center; }
  .composicoes-saida { margin-top: 30px; padding-top: 24px; }
  .composicoes-todas { display: block; text-align: center; }
}

/* Plano B quando o navegador bloqueia a janela do WhatsApp. Nasce
   `hidden` e só aparece nesse caso — os campos continuam preenchidos. */
.formulario-manual {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 14px 16px;
  background: var(--papel-2);
  border-left: 4px solid var(--limao);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
}
.formulario-manual[hidden] { display: none; }
.formulario-manual a {
  font-family: var(--fonte-display);
  font-weight: 700;
  color: var(--tinta);
  border-bottom: 2px solid var(--verde);
  text-decoration: none;
}
.formulario-manual a:hover { border-bottom-color: var(--limao); }

/* Seleção declarada: quantos cartões a página mostra, de quantos o
   perfil tem, e por qual critério. Só aparece quando há seleção. */
.avaliacoes-selecao {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* Os controles do carrossel deixaram de ser exclusivos do celular: com
   mais avaliações do que cabem na linha, eles aparecem em qualquer
   largura. A aparência de desktop é mais discreta que a de mobile. */
.avaliacoes-controles {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--regua-celula);
}
.avaliacoes-controles[hidden] { display: none; }

/* ---- página de cestas · ritmo entre as linhas ---------------------
   As quatro linhas eram visualmente idênticas. Alternar entre os dois
   papéis do sistema faz a passagem de uma para outra ser sentida na
   rolagem — sem componente novo, sem cor nova. */
.cestas-linha-clara { background: var(--papel); }

/* Cabeçalho de linha com o retorno ao topo à direita: em 360 px a
   página passa de 13 mil px, e o único caminho de volta ficava no
   rodapé. O componente é o mesmo do rodapé. */
.cestas-cabeca-linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.cestas-voltar-linha { flex: 0 0 auto; margin-top: 6px; }
.cestas-linha .composicoes-intro { margin-top: 18px; }

/* ---- hierarquia das duas ações --------------------------------------
   Terceira posição em três rodadas, e desta vez pelo motivo certo.

   1ª  "VER O QUE VEM NA CESTA" em caixa alta com fio de 2 px; o CTA de
       orçamento em 14 px com fio fino. O botão que vende era o mais
       fraco do bloco.
   2ª  Trocados os tratamentos: o CTA virou display em caixa alta com
       fio verde de 3 px. Melhor, mas os dois continuavam sendo LINHAS
       DE TEXTO SOBRE UM FIO — a diferença era de peso, não de forma.
   3ª  O CTA vira BOTÃO PREENCHIDO, com o mesmo verde, a mesma reserva
       de 4 px para o realce e a mesma família do `.cta-primario` que a
       página já usa no Hero e no fecho. Agora a diferença entre as duas
       ações é de CATEGORIA, e se lê de relance: uma é um botão, a outra
       é um link.

   O expansor continua sendo texto sobre régua fina — ação secundária,
   que abre conteúdo na própria página e não leva a lugar nenhum. */
.composicao-cta {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 26px;
  background: var(--verde);
  color: var(--branco);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none;
  border: 0;
  border-bottom: 4px solid var(--verde);   /* reserva o espaço do realce */
  transition: border-color 160ms ease;
}
.composicao-cta:hover { border-bottom-color: var(--limao); color: var(--branco); }
.composicao-abrir {
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--regua-fina);
}
.composicao-abrir:hover { color: var(--tinta); border-bottom-color: var(--limao); }
/* Com um botão preenchido ao lado de um link de texto, alinhar pelo
   topo deixava o link pendurado. Alinham pelo centro. */
.composicao-acoes { align-items: center; }

/* ---- ALTERNÂNCIA TEXTO ↔ IMAGEM ------------------------------------
   Vale só onde existem duas colunas — a partir de 721 px. Abaixo disso
   a faixa é uma coluna só, e alternar ali produziria o zigue-zague de
   leitura que a ordem única do celular evita.

   O QUE ALTERNA é apenas a abertura: rótulo, nome, resumo e fotografia.
   Indicadores, ações e a relação de produtos são irmãos de
   `.composicao-abre`, ocupam a faixa inteira e NÃO se movem — é o que
   deixa duas cestas comparáveis lado a lado na rolagem.

   Feito com `order`, e não reordenando o HTML: a ordem do documento
   continua sendo nome → resumo → foto, que é a ordem que o leitor de
   tela anuncia e a que o Tab percorre.

   `:nth-child(even)` conta dentro de cada `<ol class="composicoes-lista">`.
   Em cestas.html cada linha comercial tem a sua própria lista, então o
   padrão REINICIA por categoria sem nenhuma regra a mais. */
@media (min-width: 721px) {
  .composicao:nth-child(even) .composicao-abre {
    grid-template-columns: var(--foto-cesta) minmax(0, 1fr);
  }
  .composicao:nth-child(even) .composicao-texto  { order: 2; }
  .composicao:nth-child(even) .composicao-figura { order: 1; }
}

@media (max-width: 720px) {
  /* O indicador de rendimento tem o rótulo mais longo da régua e, em
     meia coluna, quebrava em três linhas e ficava mais alto que os
     vizinhos. Ocupando a linha inteira, vira o fecho da régua. */
  .composicao-indicadores .indicador-destaque {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--regua-celula);
    padding-top: 16px;
  }
  .cestas-cabeca-linha { flex-direction: column; gap: 0; }
  .cestas-voltar-linha { align-self: flex-start; margin-top: 14px; }
}


/* ==================== Captação de lead ==============================
   Três acréscimos, todos a serviço do formulário — nenhuma mudança de
   direção visual. */

/* CAMPO-ARMADILHA. Sai da tela sem sair do documento: robô que lê o
   HTML o encontra e preenche; pessoa nenhuma o vê, o Tab não para nele
   (tabindex="-1") e o leitor de tela o ignora (aria-hidden no wrapper).
   `display: none` seria mais simples e menos eficaz — é exatamente o
   que um robô verifica antes de preencher. */
.fora-da-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Estado intermediário do envio: nem erro, nem sucesso. Sem ele, o
   "Registrando…" apareceria com a cor de erro ou a de sucesso, e as
   duas mentiriam sobre o que está acontecendo. */
.formulario-retorno.retorno-neutro {
  border-left: 3px solid var(--regua-celula);
  color: var(--tinta-suave);
}

/* Aviso de privacidade: letra menor que a do consentimento, porque é
   explicação, não decisão — mas com contraste de leitura, porque
   esconder o que se faz com o dado seria o oposto do ponto. */
.aviso-privacidade {
  margin: 10px 0 0;
  padding-left: 30px;          /* alinha com o texto da caixa acima */
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
}
/* O endereço de e-mail é um alvo de toque, e no celular ele precisa
   ter altura de dedo. Inline num parágrafo de 13 px ele nascia com
   ~17 px de altura — o QA reprovou, com razão. `inline-block` com
   padding vertical resolve sem tirar o link de dentro da frase. */
.aviso-privacidade a {
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--limao);
  text-underline-offset: 3px;
}
.aviso-privacidade a:hover { text-decoration-color: var(--verde); }
@media (max-width: 720px) {
  .aviso-privacidade { padding-left: 0; font-size: 13px; }
}