/* =============================================================================
   LP Reduzzi Limeira — folha de estilo
   =============================================================================

   PALETA — extraída do site institucional (www.reduzzi.com.br), não inventada.
   Razões de contraste conferidas por cálculo, não por impressão:

     branco / navy #0e3d67 ........ 11.16:1   texto normal OK
     branco / verde #0c9238 ........ 4.05:1   SÓ texto grande — nunca corpo
     branco / verde #0a7a2f ........ 5.47:1   texto normal OK  <- botões
     branco / laranja #ff7100 ...... 2.76:1   REPROVADO — laranja nunca leva branco
     tinta  / laranja #ff7100 ...... 5.63:1   texto normal OK  <- etiqueta laranja
     #cfe0ea / navy ................ 8.24:1   texto normal OK  <- corpo sobre navy
     #4a5b68 / branco .............. 7.03:1   texto normal OK  <- texto suave
     #a3bac6 / branco .............. 2.02:1   REPROVADO — só borda e divisor

   Duas regras que decorrem disso e não podem ser esquecidas numa edição futura:
     1. LARANJA JAMAIS RECEBE TEXTO BRANCO. Só texto tinta.
     2. VERDE DE BOTÃO É --green-ink, não --green. O --green é para superfície
        grande, ícone e detalhe, onde o mínimo é 3:1.

   O QUE ESTA PÁGINA NÃO PODE TER, por decisão de conteúdo e não de estilo:
   selo, estrela de avaliação, contador, badge de garantia, ou qualquer elemento
   que simule prova social. A página não tem depoimento nem número auditado, e
   fingir credibilidade visual que o conteúdo não sustenta é o erro mais caro
   possível aqui. Vida vem de cor, forma, ritmo e tipografia.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* marca */
  --navy:        #0e3d67;
  --navy-dark:   #00385e;
  --navy-deep:   #072a4a;
  --green:       #0c9238;
  --green-ink:   #0a7a2f;   /* verde que pode levar texto branco */
  --green-soft:  #e8f5ec;
  --orange:      #ff7100;
  --orange-soft: #fff1e5;
  --steel:       #a3bac6;

  /* neutros */
  --ink:         #242424;
  --ink-soft:    #4a5b68;
  --paper:       #ffffff;
  --paper-tint:  #f4f7f9;
  --paper-warm:  #f9f9f9;
  --rule:        #dbe4ea;

  /* tipografia */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.11rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.38vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.3rem + 0.7vw, 1.88rem);
  --step-3:  clamp(1.73rem, 1.5rem + 1.16vw, 2.44rem);
  --step-4:  clamp(2.07rem, 1.68rem + 1.94vw, 3.18rem);

  /* espaço */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;

  --radius:    10px;
  --radius-lg: 18px;

  /* elevação — uma única direção de luz, de cima */
  --shadow-1: 0 1px 2px rgba(7, 42, 74, 0.06), 0 2px 6px rgba(7, 42, 74, 0.05);
  --shadow-2: 0 2px 4px rgba(7, 42, 74, 0.07), 0 8px 20px rgba(7, 42, 74, 0.08);
  --shadow-3: 0 4px 8px rgba(7, 42, 74, 0.08), 0 16px 40px rgba(7, 42, 74, 0.12);

  --wrap: 1140px;
}

/* ---------- 2. Base ------------------------------------------------------ */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;              /* nenhuma forma decorativa pode gerar rolagem lateral */
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-underline-offset: 0.18em; }
a:hover { color: var(--green-ink); }

strong { font-weight: 700; color: var(--navy-deep); }

/* Foco visível, forte, em tudo. Nunca outline:none sem substituto. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--orange); color: var(--ink); }

/* ---------- 3. Layout ---------------------------------------------------- */

.container {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.container--estreito { width: min(100% - 2.5rem, 760px); }

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

.section__titulo {
  font-size: var(--step-3);
  max-width: 22ch;
}
.section__intro {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: var(--sp-6);
}
.section__nota {
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-top: var(--sp-6);
}

/* Ritmo de fundo: a rolagem precisa ter cadência para a pessoa perceber
   que mudou de assunto. Sem isso a página vira uma parede só. */
.section--transparencia,
.section--fluxo,
.section--faq   { background: var(--paper-tint); }

/* ---------- 4. Cabeçalho ------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 66px;
}
.brand {
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--navy-deep);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.brand__unit {
  margin-left: 0.4em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  vertical-align: 0.15em;
}
.site-header__cta { flex-shrink: 0; }

/* ---------- 5. Hero ------------------------------------------------------ */

/* A marca usa arcos e diagonais grandes em azul atrás de fotografia. Não há
   nenhum arquivo de imagem no projeto, então a composição é feita em CSS. */
.section--hero {
  background: var(--navy);
  color: #e9f1f6;
  padding-block: var(--sp-9) var(--sp-8);
  overflow: hidden;
  isolation: isolate;
}
.section--hero::before,
.section--hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
/* Disco tonal grande: dá massa ao lado direito, que na marca é ocupado por
   fotografia. Sem imagem, a composição tem de vir da geometria. */
.section--hero::before {
  width: 64vw; height: 64vw;
  max-width: 820px; max-height: 820px;
  right: -16vw; top: -20vw;
  background:
    radial-gradient(circle at 32% 34%, #1b5b8c 0%, #14466f 45%, var(--navy) 72%);
  opacity: 0.95;
}
/* Arco laranja aberto: o único traço de acento, deliberadamente incompleto
   para não virar "selo". */
.section--hero::after {
  width: 34vw; height: 34vw;
  max-width: 420px; max-height: 420px;
  right: 8vw; bottom: -13vw;
  border: 3px solid var(--orange);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-28deg);
  opacity: 0.7;
  background: none;
}
.hero__inner { position: relative; max-width: 46rem; }

/* Faixa fina de marca fechando o hero: navy -> verde -> laranja. */
.section--hero > .container::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 38%, var(--orange) 38%, var(--orange) 52%, rgba(255, 255, 255, 0.12) 52%);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--sp-4);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #bcd4e4;
}
.hero__eyebrow::before {
  content: "";
  width: 2.2rem; height: 3px;
  background: var(--orange);
  border-radius: 2px;
}
.hero__titulo {
  font-size: var(--step-4);
  color: #ffffff;
  margin-bottom: var(--sp-5);
  letter-spacing: -0.025em;
}
.hero__subtitulo {
  font-size: var(--step-1);
  color: #cfe0ea;               /* 8.24:1 sobre navy */
  max-width: 54ch;
  margin-bottom: var(--sp-3);   /* espaço ENTRE os dois parágrafos */
}
/* O último parágrafo antes do botão respira mais: o intervalo maior é o que
   separa o texto da ação, e é ele que faz o botão ler como botão. */
.hero__subtitulo--fecha { margin-bottom: var(--sp-6); }
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.hero__escopo {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--step--1);
  color: #a9c6da;
  max-width: 60ch;
}
.section--hero a { color: #ffffff; }

/* ---------- 6. Botões ---------------------------------------------------- */

.btn {
  --btn-bg: var(--navy);
  --btn-fg: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.78em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }

/* Verde é a cor de ação da marca. --green-ink, não --green: o tom original
   não passa em contraste com texto branco (4.05:1). */
.btn--primary { --btn-bg: var(--green-ink); box-shadow: var(--shadow-1); }
.btn--primary:hover { --btn-bg: #096a29; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.12); border-color: #ffffff; }

/* Fora do hero o fantasma precisa inverter, senão some no fundo claro. */
.section:not(.section--hero) .btn--ghost,
.site-header .btn--ghost {
  --btn-fg: var(--navy);
  border-color: var(--navy);
}
.section:not(.section--hero) .btn--ghost:hover,
.site-header .btn--ghost:hover { --btn-bg: rgba(14, 61, 103, 0.08); }

.btn--lg { padding: 0.95em 1.9em; font-size: var(--step-1); }

.btn--link {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  padding: 0.2em 0;
  border: 0;
  text-decoration: underline;
  font-weight: 600;
}
.btn--link:hover { --btn-fg: var(--green-ink); transform: none; box-shadow: none; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.site-header__cta.btn { padding: 0.6em 1.1em; font-size: var(--step--1); }

/* ---------- 8. Listas com ícone ------------------------------------------ */

.lista { margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.lista__item {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: var(--sp-4);
  max-width: 68ch;
}
.lista__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0.28em;
  width: 1.35rem; height: 1.35rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* marcador laranja para a seção de problema */
.lista--problema .lista__item::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23fff1e5' stroke='%23ff7100' stroke-width='2'/%3E%3Cpath d='M12 7.5v5.5' stroke='%23c25400' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.4' r='1.25' fill='%23c25400'/%3E%3C/svg%3E");
}
/* confirmação em verde */
/* exclusão: navy, nunca vermelho — a franqueza aqui é argumento de venda,
   não mensagem de erro */

/* ---------- 9. Etapas como percurso -------------------------------------- */


.etapa {
  position: relative;
  margin-bottom: var(--sp-5);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.etapa:last-child { margin-bottom: 0; }

/* Fio ligando as etapas: vira percurso em vez de lista solta.
   Fica no VÃO entre um card e o próximo (top:100%, altura = margin-bottom),
   nunca dentro do card — dentro, ele cruza o texto do parágrafo. */
.etapa::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-6) - 0.4rem + 1.15rem - 1px);  /* centro do círculo numerado */
  top: 100%;
  height: var(--sp-5);
  width: 2px;
  background: linear-gradient(var(--steel), rgba(163, 186, 198, 0.25));
}
.etapa:last-child::after { display: none; }


/* A citação de fonte oficial é o ativo mais forte da página. Trata como selo
   de procedência, não como link solto. */


/* ---------- 10. Etiquetas ------------------------------------------------ */

/* A distinção "cabe a você" x "apoio da Reduzzi" é a melhor ideia de conteúdo
   da página. Codificada por cor, lê-se de relance.
   Laranja leva texto TINTA — com branco reprova em 2.76:1. */
.etiqueta {
  display: inline-block;
  margin-right: 0.5em;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.08em;
}
.etiqueta--voce {
  background: var(--orange);
  color: var(--ink);            /* 5.63:1 */
}
.etiqueta--reduzzi {
  background: var(--green-ink);
  color: #ffffff;               /* 5.47:1 */
}

/* ---------- 11. Cards ---------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  position: relative;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--green));
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card__titulo { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.card__texto { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

/* ---------- 12. Colunas (para quem serve / não serve) -------------------- */

.colunas { display: grid; gap: var(--sp-5); }
.colunas--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.coluna {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: var(--paper);
}

/* ---------- 13. Escopo negativo ------------------------------------------ */

/* Dizer o que não se faz é diferencial competitivo aqui. Merece bloco
   deliberado, não aparência de aviso legal apagado. */

/* ---------- 14. Callout -------------------------------------------------- */

.callout {
  padding: var(--sp-4) var(--sp-5);
  border-left: 5px solid var(--navy);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-tint);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 74ch;
}
.callout--responsabilidade { border-left-color: var(--navy); }

/* ---------- 15. FAQ ------------------------------------------------------ */

.faq { max-width: 820px; }
.faq__item {
  margin-bottom: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.faq__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--navy-deep);
  text-align: left;
  cursor: pointer;
}
.faq__botao:hover { background: var(--paper-tint); }
.faq__botao::after {
  content: "";
  flex: 0 0 auto;
  width: 1.1rem; height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3d67' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.18s ease;
}
.faq__botao[aria-expanded="true"] { background: var(--paper-tint); }
.faq__botao[aria-expanded="true"]::after { transform: rotate(180deg); }

.faq__pergunta { margin: 0; }
.faq__resposta {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}
.faq__resposta > *:first-child { margin-top: var(--sp-4); }

/* ---------- 16. Formulário ----------------------------------------------- */

.section--form { background: var(--paper-tint); }

.form {
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--green);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.form__linha { margin-bottom: var(--sp-4); }
.form__linha--dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.campo { display: flex; flex-direction: column; }
.campo__label {
  margin-bottom: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--navy-deep);
}
.campo__opcional {
  margin-left: 0.4em;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}
.campo__input,
.campo__select {
  width: 100%;
  padding: 0.72em 0.9em;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.campo__input:hover,
.campo__select:hover { border-color: var(--steel); }
.campo__input:focus,
.campo__select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14, 61, 103, 0.16);
}
.campo__input:focus-visible,
.campo__select:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.campo__select {
  appearance: none;
  padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5b68' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  background-size: 1rem;
}
/* O estado ocupa a coluna inteira, como os demais campos. Antes tinha um
   teto de 9rem que o deixava atarracado ao lado da cidade. */
.campo--uf { max-width: none; }

.campo__ajuda {
  margin: var(--sp-2) 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.campo__erro {
  margin: var(--sp-2) 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #a3261b;               /* 6.4:1 sobre branco */
  min-height: 0;
}
.campo__erro:empty { margin: 0; }

[aria-invalid="true"].campo__input,
[aria-invalid="true"].campo__select {
  border-color: #a3261b;
  box-shadow: 0 0 0 3px rgba(163, 38, 27, 0.14);
}

.campo--checkbox { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.campo__checkbox {
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.22em;
  accent-color: var(--green-ink);
  cursor: pointer;
}
.campo__label--checkbox {
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.55;
  cursor: pointer;
}

.form__acoes { margin: var(--sp-5) 0 var(--sp-4); }
.form__acoes .btn { width: 100%; }

.form__legal,
.form__aviso,
.form__alternativa {
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.form__legal { padding-top: var(--sp-4); border-top: 1px solid var(--rule); }

/* Região aria-live. NUNCA display:none — um elemento que estava fora da árvore
   e volta já preenchido não é anunciado de forma confiável por leitor de tela.
   Colapsa visualmente, permanece na árvore. */
.form__status {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--orange-soft);
  font-size: var(--step--1);
  color: var(--ink);
}
.form__status:empty {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.form-success {
  padding: var(--sp-6);
  border: 1px solid var(--green);
  border-left: 5px solid var(--green-ink);
  border-radius: var(--radius-lg);
  background: var(--green-soft);
}
.form-success__titulo { color: #075c22; margin-bottom: var(--sp-3); }
.form-success__texto { color: var(--ink); }

/* honeypot: fora da tela por POSICIONAMENTO. display:none é lido por bot. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.hp__label, .hp__input { position: absolute; left: -9999px; }

/* ---------- 17. Banner de consentimento ---------------------------------- */

.consent {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 100;
  width: min(100% - 2rem, 430px);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  font-size: 0.86rem;
  line-height: 1.55;
}
.consent__titulo { font-size: var(--step-0); margin-bottom: var(--sp-2); }
.consent__texto { color: var(--ink-soft); margin-bottom: var(--sp-4); }
.consent__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.consent__acoes .btn { padding: 0.6em 1.15em; font-size: 0.86rem; }

.consent__prefs {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.consent__legenda {
  font-weight: 700;
  color: var(--navy-deep);
  padding: 0;
  margin-bottom: var(--sp-3);
}
.consent__grupo { border: 0; padding: 0; margin: 0; }
.consent__opcao { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.consent__check {
  flex: 0 0 auto;
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.2em;
  accent-color: var(--green-ink);
}
.consent__label { cursor: pointer; }
.consent__label-titulo { display: block; font-weight: 700; color: var(--navy-deep); }
.consent__label-texto { display: block; font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- 18. Rodapé --------------------------------------------------- */

.site-footer {
  background: var(--navy-deep);
  color: #b9cfe0;
  padding-block: var(--sp-7) var(--sp-6);
  font-size: var(--step--1);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__marca,
.site-footer__titulo {
  color: #ffffff;
  font-size: var(--step-0);
  margin-bottom: var(--sp-3);
}
.site-footer__titulo {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--steel);
}
.site-footer__endereco { font-style: normal; line-height: 1.7; }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--orange); }
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin-bottom: var(--sp-2); }
.site-footer__legal { padding-top: var(--sp-5); color: #93b0c6; max-width: 90ch; }
.site-footer__copy { color: #ffffff; font-weight: 600; }

/* ---------- 19. Utilidades ----------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 0.8em 1.2em;
  background: var(--navy-deep);
  color: #ffffff;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; top: 0; }

.noscript-aviso {
  padding: var(--sp-4);
  background: var(--orange-soft);
  border-left: 5px solid var(--orange);
  color: var(--ink);
}

/* ---------- 20. Responsivo ----------------------------------------------- */

@media (max-width: 640px) {
  .section { padding-block: var(--sp-7); }
  .section--hero { padding-block: var(--sp-7) var(--sp-7); }
  .site-header__cta { display: none; }     /* o CTA do hero já está visível */
  .form__linha--dupla { grid-template-columns: 1fr; }
  .form { padding: var(--sp-5) var(--sp-4); }
  .hero__acoes .btn { width: 100%; }
  .consent { left: 0; right: 0; bottom: 0; width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .etapa { padding-left: var(--sp-5); }
  .etapa::before { left: calc(var(--sp-5) + 0.9rem); }
}

@media (min-width: 900px) {
  /* 96px em cima e embaixo somavam 192px de vazio entre uma seção e outra —
     a página parecia oca. 80px ainda é generoso e fecha o ritmo. */
  .section { padding-block: 5rem; }
  /* O botão de envio continua ocupando a largura do formulário também no
     desktop. Com `width: auto` ele ficava com 564px dentro de uma área de
     714px, deixando um vão à direita e parecendo desalinhado do cartão. */
}

/* ---------- 21. Movimento e impressão ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

@media print {
  .site-header, .consent, .hero__acoes, .form__acoes, .skip-link { display: none !important; }
  .section--hero,

  .site-footer {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .section--hero .hero__titulo { color: #000000 !important; }
  .faq__resposta { display: block !important; }
  body { font-size: 11pt; }
  a { color: #000000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ---------- 23. Porta de entrada em linguagem comum ---------------------- */

/* A página é necessariamente técnica — cita lei, norma e sistema oficial, e é
   isso que a protege. Estes dois blocos existem para que o leigo entenda o
   ASSUNTO antes de encontrar a primeira sigla. Visualmente eles precisam
   parecer mais leves que o resto, senão viram mais uma parede de texto. */

.section--resumo { background: var(--paper); }

.resumo {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
  max-width: 46rem;
}
.resumo__item {
  counter-increment: passo;
  position: relative;
  padding-left: 3.6rem;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.resumo__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.resumo__item::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -0.1em;
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 2px solid var(--orange);
  border-radius: 50%;
  font-size: var(--step-0);
  font-weight: 800;
  /* O aro é laranja da marca, mas o NUMERAL não pode ser: laranja sobre
     laranja-claro dá 2.49:1 e reprova. Laranja escurecido dá 4.70:1. */
  color: #8f3f00;              /* 6.59:1 sobre --orange-soft */
  background: var(--orange-soft);
}

/* A frase-chave é o que a pessoa lê se ler só uma linha. */
.resumo__frase {
  margin-bottom: var(--sp-2);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-deep);
  text-wrap: balance;
}
.resumo__nota {
  margin: 0;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------- 24. Tradutor de siglas --------------------------------------- */

/* Gradiente de transição: sai do branco da seção anterior e entra no tom da
   seção de fluxo, que vem logo abaixo. Evita branco-sobre-branco sem criar
   mais uma faixa de cor sólida. */
/* O nome por extenso vem antes da explicação, em laranja, para separar
   "o que a sigla significa" de "para que serve". */

/* A base legal continua na página — é o que sustenta a afirmação — mas
   desce um nível: a frase em português vem primeiro, a citação vira nota. */
.lista__fonte {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---------- 26. Ícones dos cards de entregáveis -------------------------- */

/* Os cards não têm classe individual no HTML e eu não vou inventar uma só
   para pendurar ícone. nth-child resolve sem tocar na marcação. Se a ORDEM
   dos cards mudar, os ícones precisam ser reordenados aqui junto. */

.cards--entregaveis .card { padding-top: var(--sp-6); }
.cards--entregaveis .card::after {
  content: "";
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 2.1rem;
  height: 2.1rem;
  opacity: 0.9;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.cards--entregaveis .card__titulo { padding-right: 2.6rem; }

.cards--entregaveis .card:nth-child(1)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3d67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><path d='M9 3h6v3H9z'/><path d='M12 10.5a2 2 0 100 4 2 2 0 000-4z'/><path d='M12 18c2.5-2.6 4-4.3 4-6a4 4 0 10-8 0c0 1.7 1.5 3.4 4 6z'/></svg>");
}
.cards--entregaveis .card:nth-child(2)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3d67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2.5' width='14' height='19' rx='2'/><path d='M8 6.5h8'/><path d='M9 11h.01M12 11h.01M15 11h.01M9 14.5h.01M12 14.5h.01M15 14.5h.01M9 18h6'/></svg>");
}
.cards--entregaveis .card:nth-child(3)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3d67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2.5H7a2 2 0 00-2 2v15a2 2 0 002 2h10a2 2 0 002-2V7.5z'/><path d='M14 2.5v5h5'/><path d='M12 18v-6M9.5 14.5L12 12l2.5 2.5'/></svg>");
}
.cards--entregaveis .card:nth-child(4)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3d67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4' width='19' height='13' rx='2'/><path d='M8 21h8M12 17v4'/><circle cx='11.5' cy='10' r='2.8'/><path d='M13.6 12.1L16 14.5'/></svg>");
}
.cards--entregaveis .card:nth-child(5)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3d67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2.5H7a2 2 0 00-2 2v15a2 2 0 002 2h6'/><path d='M13 2.5v5h5'/><circle cx='17' cy='16.5' r='4.2'/><path d='M15.2 16.6l1.3 1.3 2.4-2.5'/></svg>");
}

/* ---------- 27. Hero em duas colunas com a ilustração -------------------- */

.hero__inner { display: block; }
.hero__texto { position: relative; z-index: 2; }

.hero__arte {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-6);
  /* width:100% é obrigatório aqui. Um <svg> sem atributos width/height tem
     tamanho intrínseco de 300x150 (o padrão de elemento substituído), e com
     `justify-self: end` o item de grid encolhe para o conteúdo — a ilustração
     travava em 300px por mais que o max-width fosse maior. */
  width: 100%;
  max-width: 380px;
}
.hero__arte svg { width: 100%; height: auto; display: block; }

/* No mobile a arte fica DEPOIS do bloco de ação: o CTA precisa continuar
   visível sem rolagem (regra MUST da especificação). Como o desenho é
   decorativo (aria-hidden), a ordem visual pode mudar sem custo de leitura. */
/* 1080px, não 900px: em 900 o grid entra mas espreme o título a ponto de
   quebrá-lo em 6 linhas e empurrar o CTA para baixo da dobra — que é
   exatamente o MUST que a especificação impõe ao hero. A ilustração é o
   elemento dispensável aqui, não o botão. */
@media (min-width: 1080px) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--sp-6);
  }
  .hero__texto { max-width: 36rem; }
  /* A ilustração estava pequena demais para o peso do resto do hero.
     460px equilibra com o H1 e ocupa de fato a coluna da direita. */
  .hero__arte { margin-top: 0; max-width: 460px; justify-self: end; }
  /* Com a ilustração ocupando a direita, o disco tonal recua para não
     competir com ela. */
  .section--hero::before { opacity: 0.55; }
  .section--hero::after  { opacity: 0.45; }
}

/* Abaixo de 1080px a arte fica embaixo do texto, em tamanho contido, para não
   afastar o CTA da primeira dobra. */
@media (max-width: 1079px) {
  .hero__arte { max-width: 380px; margin-top: var(--sp-6); }
}

@media (max-width: 560px) {
  /* Em tela estreita a arte sai de cena: cada pixel acima da dobra é do CTA. */
  .hero__arte { display: none; }
}

/* =============================================================================
   28. CORREÇÃO DO SISTEMA DE LAYOUT
   =============================================================================
   Diagnóstico medido no navegador, não estimado:

     - A página tinha TRÊS margens esquerdas: 409px no hero, 207px nas seções
       e 397px no formulário. O olho lê isso como desalinhamento, e era.
     - Três grades com item órfão: 6 contatos em 5 colunas, 5 cards em 4
       colunas, e `.colunas--2` renderizando 3 trilhas para 2 itens.
     - Linhas de 83 a 86 caracteres. O confortável é 45–75: acima disso o
       olho perde a linha ao voltar para a esquerda.

   As regras abaixo vêm depois de tudo de propósito — corrigem sem apagar o
   histórico do que deu errado.
   ========================================================================== */

/* ---------- 28.1 Uma única margem esquerda ------------------------------- */

/* O `.hero__inner` é o MESMO elemento que o `.container`. O max-width que
   sobrou de quando o hero era coluna única competia com a largura do
   container e recuava o hero 200px além do resto da página. */
.hero__inner { max-width: none; }

/* O formulário usava um container estreito e centrado, criando a terceira
   margem. Passa a compartilhar o container de todo mundo; quem limita a
   medida é o próprio cartão. */
.section--form .container--estreito {
  width: min(100% - 2.5rem, var(--wrap));
}
.section--form .form { max-width: 720px; }
.section--form .form-success { max-width: 720px; }

/* ---------- 28.2 Medida de linha calibrada ------------------------------- */

/* A unidade `ch` é a largura do zero, mais estreita que a média das
   minúsculas: 68ch nesta fonte renderiza ~83 caracteres reais. Os valores
   abaixo são calibrados para cair em 65–72 caracteres de verdade. */
:root { --medida: 58ch; }

.section__intro   { max-width: 48ch; }
.section__nota    { max-width: var(--medida); }
.lista__item      { max-width: var(--medida); }

.resumo__nota     { max-width: var(--medida); }
.hero__subtitulo  { max-width: 44ch; }
.hero__texto      { max-width: 38rem; }
.callout          { max-width: 62ch; }
.faq              { max-width: 780px; }

/* ---------- 28.3 Grades sem item órfão ----------------------------------- */

/* 5 cards: 3 + 2. Os dois da segunda linha ocupam as trilhas inteiras em vez
   de deixar um sozinho no canto. */
@media (min-width: 860px) {
  .cards--entregaveis { grid-template-columns: repeat(3, 1fr); }
}

/* 8 verbetes: 4 × 2 fecha exato. */

/* `--2` no nome e 3 trilhas na tela: o auto-fit criava uma coluna vazia. */
@media (min-width: 760px) {
  .colunas--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 28.4 Ritmo vertical consistente ------------------------------ */

/* Título e introdução colados demais no conteúdo em algumas seções e soltos
   em outras, porque cada bloco trazia a própria margem. Um espaçamento só. */
.section__titulo { margin-bottom: var(--sp-3); max-width: 24ch; }
.section__intro  { margin-bottom: var(--sp-6); }

/* ---------- 28.5 Cinco cards sem buraco na segunda linha ----------------- */

/* 5 itens em 3 colunas dá 3 + 2 e deixa a terceira trilha vazia — um vão
   visível no canto. Com 6 trilhas: os três primeiros ocupam 2 cada (3 por
   linha) e os dois últimos ocupam 3 cada, preenchendo a linha inteira. */
@media (min-width: 860px) {
  .cards--entregaveis { grid-template-columns: repeat(6, 1fr); }
  .cards--entregaveis .card:nth-child(-n+3) { grid-column: span 2; }
  .cards--entregaveis .card:nth-child(n+4)  { grid-column: span 3; }
}

/* ---------- 28.7 Dobra do hero no celular -------------------------------- */

/* Medido em iframe de 360 e 390px: o CTA caía a ~700px do topo, abaixo da
   dobra de qualquer celular. A especificação exige o CTA visível sem rolagem.
   O texto do hero é longo por decisão de conteúdo (explica o problema em
   linguagem comum), então quem cede é a ESCALA, não a mensagem. */
@media (max-width: 560px) {
  .section--hero { padding-block: var(--sp-5) var(--sp-6); }

  .hero__eyebrow { margin-bottom: var(--sp-3); font-size: 0.76rem; }
  .hero__eyebrow::before { width: 1.4rem; }

  /* 1.72rem em vez do mínimo de 2.07rem do clamp: continua sendo o maior
     texto da página, e devolve ~45px de altura acima da dobra. */
  .hero__titulo {
    font-size: clamp(1.62rem, 1.3rem + 2.2vw, 1.95rem);
    margin-bottom: var(--sp-4);
    letter-spacing: -0.02em;
  }

  .hero__subtitulo {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: var(--sp-3);
  }
  .hero__subtitulo--fecha { margin-bottom: var(--sp-5); }

  .hero__acoes { gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .btn--lg { padding: 0.85em 1.4em; font-size: 1.02rem; }

  /* Estas duas linhas são de reforço, não de conversão: descem para depois
     do CTA e podem ficar abaixo da dobra sem prejuízo. */
  .hero__escopo { margin-top: var(--sp-4); padding-top: var(--sp-3); }
}

/* =============================================================================
   29. SISTEMA DE ALINHAMENTO — decisão única, substitui os remendos anteriores
   =============================================================================
   O problema real, medido: o container está centrado, mas TODO conteúdo dentro
   dele estava encostado à esquerda. Título com 540px, introdução com 690px e
   grade com 1140px, um embaixo do outro, criam degraus e deixam 400 a 600px de
   vazio à direita em cada seção. Unificar a margem esquerda (correção 28.1) só
   deixou o desequilíbrio consistente — não o resolveu.

   Decisão: COLUNA CENTRADA. Cabeçalho de seção centrado, blocos de conteúdo
   centrados como bloco (o texto dentro deles continua alinhado à esquerda, que
   é o que se lê bem). As grades já ocupam a largura inteira e ficam como estão.

   O hero é a única exceção deliberada: ele é assimétrico de propósito, com
   texto à esquerda e ilustração à direita.
   ========================================================================== */

:root {
  --col-texto: 780px;   /* bloco de texto corrido, centrado */
  --col-titulo: 34ch;   /* título de seção */
  --col-intro: 58ch;    /* introdução de seção */
}

/* ---------- 29.1 Cabeçalho de seção centrado ----------------------------- */

.section:not(.section--hero) .section__titulo,
.section:not(.section--hero) .section__intro {
  margin-inline: auto;
  text-align: center;
}
.section:not(.section--hero) .section__titulo {
  max-width: var(--col-titulo);
  margin-bottom: var(--sp-3);
}
.section:not(.section--hero) .section__intro {
  max-width: var(--col-intro);
  margin-bottom: var(--sp-7);
}
.section:not(.section--hero) .section__nota {
  margin-inline: auto;
  max-width: var(--col-intro);
  text-align: center;
}

/* ---------- 29.2 Blocos de conteúdo centrados ---------------------------- */

/* Centrados como BLOCO. O texto dentro segue à esquerda: texto corrido
   centrado é ruim de ler porque a margem esquerda deixa de ser previsível. */
.resumo,

.faq,

.etapas,

.section--form .form,

.section--form .form-success,

.section--problema .lista,

.section--transparencia .callout,

.section--resumo .section__nota {
  margin-inline: auto;
}

.resumo   { max-width: var(--col-texto); }
.faq      { max-width: var(--col-texto); }

.section--form .form,
.section--form .form-success { max-width: var(--col-texto); }

.section--problema .lista { max-width: var(--col-texto); }
.section--transparencia .callout { max-width: var(--col-texto); }

/* Dentro de um bloco já limitado, o item não precisa de teto próprio —
   o teto duplo era o que deixava sobra dentro da sobra. */
.section--problema .lista__item,
.section--escopo-negativo .lista__item,
.resumo__nota,


/* ---------- 29.3 Colunas internas continuam à esquerda ------------------- */

/* Nos blocos lado a lado o título é interno ao card e acompanha o card. */
.card__titulo { text-align: left; }

@media (max-width: 640px) {
  /* Em tela estreita não há vazio a corrigir: centralizar título só encurta
     a linha e atrapalha a leitura. */
  .section:not(.section--hero) .section__titulo,
  .section:not(.section--hero) .section__intro,
  .section:not(.section--hero) .section__nota { text-align: left; }
}

/* ---------- 29.4 Rodapé do formulário alinhado ao cartão ----------------- */

/* Medido: `.form__alternativa` ocupava os 1140px do container enquanto o
   cartão do formulário tem 780px centrados. A linha "Prefere conversar antes
   de preencher?" ficava pendurada à esquerda, sem relação com nada acima. */
.section--form .form__alternativa {
  max-width: var(--col-texto);
  margin-inline: auto;
  margin-top: var(--sp-5);
  text-align: center;
}

/* O <noscript> também é irmão direto do container e herdava a largura cheia. */
.section--form noscript,
.section--form .noscript-aviso {
  display: block;
  max-width: var(--col-texto);
  margin-inline: auto;
}

/* ---------- 30. Ícones do glossário -------------------------------------- */

/* Um ícone por verbete, na ordem do HTML. Mesma regra de manutenção dos
   cards: se a ORDEM dos verbetes mudar, reordenar aqui junto. */

/* O ícone vai ACIMA do termo, não ao lado: em card de ~270px, 62px de
   padding lateral espremiam "Serviço Eletrônico para Aferição de Obras"
   a ponto de quebrar em quatro linhas. */

/* ---------- 31. Diagrama do percurso ------------------------------------- */


/* Abaixo de 720px os rótulos do diagrama ficariam com ~6px e ilegíveis.
   Some: as quatro etapas numeradas logo abaixo já dão a sequência. */

/* ---------- 32. Fundo com a geometria da marca --------------------------- */

/* Arcos concêntricos muito sutis, no mesmo idioma do hero. Quebram a
   monotonia das faixas chapadas sem competir com o texto. */
.section--fluxo,
.section--faq { position: relative; overflow: hidden; }

.section--fluxo::before,
.section--faq::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 46vw; height: 46vw;
  max-width: 560px; max-height: 560px;
  border: 44px solid rgba(14, 61, 103, 0.05);
  border-radius: 50%;
  pointer-events: none;
}
.section--fluxo::before { right: -14vw; top: -12vw; }
.section--faq::before   { left: -16vw; bottom: -16vw; }

.section--fluxo > .container,
.section--faq > .container { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .section--fluxo::before,
  .section--faq::before { display: none; }
}

/* ---------- 33. Marca ---------------------------------------------------- */

/* Arquivos oficiais, copiados do site institucional para assets/. Não são
   carregados do domínio de terceiro: a CSP permite img-src 'self' e não
   inclui greatpages.com.br — e depender de host alheio para o logo é frágil. */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
/* O lockup traz símbolo + wordmark + assinatura numa peça só, então o
   .brand__name em texto saiu — duplicaria a palavra "Reduzzi" ao lado dela
   mesma. Só o marcador da unidade continua em texto. */
.brand__logo {
  display: block;
  width: auto;
  height: 2.6rem;
  flex: 0 0 auto;
}

.site-footer__marca {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--sp-4);
}
.site-footer__logo {
  width: 168px;
  height: auto;
  display: block;
}
.site-footer__unidade {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

@media (max-width: 480px) {
  .brand__logo { height: 2.1rem; }
  .site-footer__logo { width: 148px; }
}

/* =============================================================================
   34. AJUSTES DE LINGUAGEM VISUAL — depois de olhar a concorrência
   =============================================================================
   O que os concorrentes diretos fazem e a página não fazia: barra fina de
   contexto no topo, pill acima do H1, palavra destacada em cor no título,
   linha de confiança abaixo dos CTAs, eyebrow em caixa alta acima de cada H2
   e ícone em chip no card em vez de solto no canto.

   O que NÃO foi copiado, de propósito: a linha de confiança deles diz
   "500+ obras regularizadas". Aqui não há número auditado e o briefing proíbe.
   Em vez de número, a linha declara o que a própria página comprova — o que
   por acaso é o diferencial real dela.
   ========================================================================== */

/* ---------- 34.1 Barra fina de contexto ---------------------------------- */

.site-topbar {
  background: var(--navy-deep);
  color: #b9cfe0;
  font-size: 0.78rem;
}
.site-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  min-height: 34px;
  text-align: center;
}
.site-topbar__local { display: inline-flex; align-items: center; gap: 0.35em; }
.site-topbar__sep { color: rgba(255, 255, 255, 0.28); }

@media (max-width: 560px) {
  .site-topbar__sep { display: none; }
  .site-topbar__inner { flex-direction: column; gap: 0.15rem; padding-block: 0.4rem; }
}

/* ---------- 34.2 Hero: pill, destaque e linha de confiança --------------- */

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.95em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}
/* o filete laranja era do formato antigo, sem pill */
.hero__eyebrow::before { display: none; }
.hero__eyebrow-pin { color: var(--orange); flex: 0 0 auto; }

/* Palavra-chave do título em cor: o olho pega a frase mesmo sem ler tudo. */
.hero__destaque {
  /* Verde, seguindo a arte enviada pelo cliente. NÃO é o --green da marca
     (#0c9238): sobre o navy do hero ele dá 2.75:1 e reprova em qualquer
     critério de leitura. Este é o mesmo verde clareado até 7.23:1, acima do
     nível AAA. A arte do cliente tem fundo branco, onde o verde da marca
     funciona; aqui o fundo é escuro e o tom precisa subir. */
  color: #6ee7a0;              /* 7.23:1 sobre o navy do hero */
  /* Mantém "está regularizado?" inteiro numa linha só: quebrado no meio, o
     grifo laranja parece erro de layout em vez de ênfase. São 17 caracteres —
     cabem na coluna do hero até em 360px. */
  white-space: nowrap;
}

.hero__confianca {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: #cfe0ea;
}
.hero__confianca li {
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.hero__confianca li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%230c9238'/%3E%3Cpath d='M7.6 12.3l3 3 5.8-6.2' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 560px) {
  .hero__confianca { flex-direction: column; gap: 0.4rem; font-size: 0.8rem; }
}

/* ---------- 34.3 Eyebrow de seção ---------------------------------------- */

/* Dá a cada seção um rótulo curto antes do título. Barato, e muda o ritmo da
   página inteira: a pessoa sabe onde está antes de ler o H2. */
.section__eyebrow {
  margin: 0 auto var(--sp-3);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b34f00;              /* 5.2:1 sobre branco */
  text-align: center;
}

@media (max-width: 640px) {
  .section__eyebrow { text-align: left; }
}

/* ---------- 34.4 Ícone em chip, não solto no canto ----------------------- */

.cards--entregaveis .card { padding-top: calc(var(--sp-5) + 3.5rem); }
.cards--entregaveis .card::after {
  top: var(--sp-5);
  left: var(--sp-5);
  right: auto;
  width: 2.8rem; height: 2.8rem;
  background-color: var(--paper-tint);
  background-size: 1.45rem;
  border: 1px solid var(--rule);
  border-radius: 13px;
  opacity: 1;
}
.cards--entregaveis .card__titulo { padding-right: 0; }

/* ---------- 34.5 CTAs do hero lado a lado -------------------------------- */

/* Empilhados, o botão fantasma ficava pequeno embaixo do verde e parecia
   secundário demais. O texto do CTA principal é o oficial do briefing e não
   pode encurtar — quem cede é o corpo da fonte, não a frase. */
@media (min-width: 700px) {
  .hero__acoes { flex-wrap: nowrap; align-items: stretch; }
  .hero__acoes .btn--lg { font-size: var(--step-0); padding: 0.9em 1.5em; }
  .hero__acoes .btn--ghost { white-space: nowrap; }
}

/* A linha de confiança cabe em uma linha só com os rótulos curtos; abaixo
   disso ela empilha, que é melhor que quebrar 2+1. */
@media (min-width: 700px) {
  .hero__confianca { flex-wrap: nowrap; gap: 1.1rem; font-size: 0.8rem; }
  .hero__confianca li { white-space: nowrap; }
}

/* ---------- 35. Vídeo da unidade ----------------------------------------- */

/* Embed direto do Instagram, por decisão do cliente depois de eu propor
   carregamento sob clique. Consequência assumida e registrada: o iframe
   carrega conteúdo da Meta no LOAD da página, antes da escolha no banner —
   por isso o texto do banner passou a dizer isso explicitamente, senão a
   página afirmaria ao visitante algo que não cumpre. */

.video {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

@media (max-width: 560px) {
  .video { min-height: 540px; }
}


/* ---------- 35.1 Ilustração, agora na seção de resumo -------------------- */

.resumo__arte {
  margin: var(--sp-7) auto 0;
  max-width: 460px;
  /* O desenho ocupa o viewBox de forma assimétrica (casa à esquerda, documento
     à direita), então a caixa centrada deixava o conjunto visualmente torto.
     Este empurrão compensa o peso, não é ajuste de gosto. */
  padding-left: 3.5rem;
}
.resumo__arte svg { display: block; width: 100%; height: auto; }

@media (max-width: 560px) {
  .resumo__arte { max-width: 320px; margin-top: var(--sp-6); }
}

/* No hero, a coluna da direita agora abriga o vídeo — que precisa de mais
   largura que a ilustração tinha. */
@media (min-width: 1080px) {
  .hero__arte { max-width: 500px; }
}
@media (max-width: 1079px) {
  .hero__arte { max-width: 100%; }
}
/* O vídeo NÃO some no mobile: é conteúdo, não enfeite. */
@media (max-width: 560px) {
  .hero__arte { display: block; }
}

/* ---------- 36. [hidden] tem de vencer ----------------------------------- */

/* Bug clássico, e já aconteceu neste projeto: um elemento com `display`
   definido em regra de autor IGNORA o `[hidden]` da folha do navegador — o JS
   marcava hidden, a medição confirmava hidden, e o elemento seguia na tela.
   Vale para #form-success, #consent-prefs e qualquer outro que use o atributo.
   Fica por último de propósito: `!important` vence em qualquer ordem, mas
   ler no fim deixa claro que é uma trava, não um estilo. */
[hidden] { display: none !important; }

/* ---------- 37. Depoimentos ---------------------------------------------- */

/* As duas seções nascem `hidden` no HTML e só sobem com conteúdo real e
   autorizado. O CSS existe pronto para quando isso acontecer. */

.section--depo-video  { background: var(--paper-tint); }
.section--depo-imagem { background: var(--paper); }

/* --- vídeo --- */

.depo-video {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.depo-video__item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* Proporção de reel (9:16). Reservar a caixa antes do iframe carregar evita
   o pulo de layout — com três embeds de terceiro, o salto seria grande. */
.depo-video__frame {
  aspect-ratio: 9 / 16;
  background: var(--navy-deep);
}
.depo-video__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.depo-video__quem {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--rule);
}

/* --- imagem --- */

.depo-img {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.depo-img__item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.depo-img__figura { margin: 0; }
.depo-img__foto {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-tint);
}
.depo-img__quem {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--rule);
}

/* --- atribuição, comum aos dois --- */

.depo-video__nome,
.depo-img__nome {
  display: block;
  font-weight: 700;
  color: var(--navy-deep);
}
.depo-video__contexto,
.depo-img__contexto {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Depoimento anônimo não é depoimento: sem nome, some a atribuição inteira
   em vez de exibir um rótulo vazio. */
.depo-video__quem:empty,
.depo-img__quem:empty { display: none; }

/* ---------- 38. Posts do Instagram --------------------------------------- */

.section--posts { background: var(--paper-tint); }

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sp-5);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}
.posts__item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* Altura reservada antes do embed chegar. Com seis iframes de terceiro, sem
   isso a página inteira pula quando eles carregam, um a um. */
.posts__item iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
  background: var(--paper-tint);
}

.posts__perfil { font-weight: 700; }

@media (max-width: 560px) {
  .posts__item iframe { height: 460px; }
}

/* Um depoimento só não deve esticar até virar uma faixa de vídeo gigante:
   fica na largura de um card e centralizado. */
.depo-video--um {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

/* ---------- 39. Hero com CTA único ---------------------------------------- */

/* O botão de WhatsApp saiu (contato passou a ser só pelo formulário), então a
   regra que espremia a fonte para caber dois botões lado a lado não faz mais
   sentido — o CTA sozinho volta ao corpo cheio. */
@media (min-width: 700px) {
  .hero__acoes .btn--lg { font-size: var(--step-1); padding: 0.95em 1.9em; }
}

/* ---------- 40. Avaliação no Google -------------------------------------- */

/* É a única prova social da página, e só entra porque é verificável: número
   público, com link para conferir. Sem o link vira mais um número solto — que
   é justamente o que o BRIEFING §9 proíbe. */

.google-nota {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  max-width: var(--col-texto);
  margin: 0 auto var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid #f5a623;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}

.google-nota__valor {
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1;
  color: var(--navy-deep);
}
.google-nota__estrelas { display: inline-flex; gap: 1px; flex: 0 0 auto; }
.google-nota__g { flex: 0 0 auto; }

.google-nota__texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.google-nota__rotulo { font-weight: 700; color: var(--navy-deep); }
.google-nota__meta { font-size: var(--step--1); color: var(--ink-soft); }

@media (max-width: 560px) {
  .google-nota { gap: var(--sp-3); }
  .google-nota__texto { flex-basis: 100%; }
}

/* ---------- 41. Tira-dúvidas em vídeo ------------------------------------ */

.section--duvidas { background: var(--paper); }

.duvidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.duvidas__item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* Proporção reservada: sem isso o card colapsa antes de o metadado chegar. */
.duvidas__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--navy-deep);
  object-fit: cover;
}
.duvidas__titulo {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--rule);
  font-weight: 700;
  color: var(--navy-deep);
}

/* Depoimento agora é vídeo próprio, não iframe de terceiro. */
.depo-video__player {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--navy-deep);
  object-fit: cover;
}

/* ---------- 42. Avaliação em destaque ------------------------------------ */

/* Passou a ser o elemento mais forte da seção de transparência, por pedido do
   cliente. É a única prova social da página, então ganha peso de bloco
   próprio em vez de linha discreta abaixo dos cards. */
.google-nota {
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  border-left-width: 6px;
  background: linear-gradient(180deg, var(--paper) 0%, #fffaf2 100%);
  box-shadow: var(--shadow-2);
}
.google-nota__g { width: 34px; height: 34px; }
.google-nota__valor { font-size: var(--step-4); letter-spacing: -0.03em; }
.google-nota__estrelas svg { width: 26px; height: 26px; }
.google-nota__rotulo { font-size: var(--step-1); }
.google-nota__meta { font-size: var(--step-0); }

@media (max-width: 560px) {
  .google-nota { padding: var(--sp-5) var(--sp-4); gap: var(--sp-3); }
  .google-nota__valor { font-size: var(--step-3); }
  .google-nota__estrelas svg { width: 20px; height: 20px; }
  .google-nota__rotulo { font-size: var(--step-0); }
}

/* ---------- 43. Onde fica ------------------------------------------------- */

.section--local { background: var(--paper-tint); }

.local {
  display: grid;
  gap: var(--sp-5);
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .local { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; }
}

.local__mapa {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  background: var(--paper);
  min-height: 320px;
}
.local__mapa iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }

.local__dados {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.local__endereco {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.local__lista { margin: 0; font-size: var(--step--1); }
.local__lista dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.local__lista dd { margin: 0 0 var(--sp-3); color: var(--ink); }
.local__lista dd:last-child { margin-bottom: 0; }

/* =============================================================================
   44. HIERARQUIA VISUAL
   =============================================================================
   Havia 41 cartões brancos idênticos na página — mesma borda, mesma sombra,
   mesmo fundo. Sem diferença entre eles o olho não separa o que é conteúdo
   principal do que é apoio, e a página fica com cara de planilha.

   A correção não é mudar todos: é REBAIXAR o apoio (glossário e contatos
   viram lista sem caixa) para que os poucos blocos promovidos — formulário,
   avaliação e vídeos — realmente se destaquem.
   ========================================================================== */

/* ---------- 44.1 Rebaixado: glossário ------------------------------------ */

/* ---------- 44.2 Etapas do fluxo em acordeão ----------------------------- */

/* A seção tinha 2.267px — mais de duas telas. Em acordeão, a pessoa vê os
   quatro títulos de uma vez e abre o que interessa. O conteúdo continua no
   DOM e a página segue funcionando sem JavaScript (nascem abertos). */
.etapa { padding: 0; overflow: hidden; }
.etapa::after { display: none; }          /* o fio do percurso não cabe mais */


/* ---------- 44.3 Promovidos ---------------------------------------------- */

.duvidas__item,
.depo-video__item {
  border-color: var(--steel);
  box-shadow: var(--shadow-2);
}

/* ---------- 45. Tipografia de display ------------------------------------ */

/* Archivo, licença SIL Open Font License 1.1 — self-hosting permitido pela
   licença. Só os subsets latin e latin-ext, que é o que o português usa;
   os demais (cirílico, grego, vietnamita) ficariam baixando à toa.

   Aplicada SÓ nos títulos. O corpo continua na fonte do sistema: é o texto
   que a pessoa mais lê, carrega instantâneo e já está legível.

   font-display: swap — o título aparece na fonte do sistema e troca quando a
   web font chega. Sem isso, título invisível enquanto a fonte não carrega.
*/

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

:root { --font-display: 'Archivo', var(--font); }

h1, h2, h3,
.hero__titulo, .section__titulo,
.google-nota__valor, .resumo__frase {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
h1, .hero__titulo, .section__titulo, .google-nota__valor { font-weight: 800; }
h2, h3 { font-weight: 700; }

/* ---------- 46. O que mudou ---------------------------------------------- */

.section--mudou { background: var(--paper); }

/* São 4 cards: 1 "Antes" + 3 "Agora". Com auto-fit isso caía em 3 colunas e
   deixava um "Agora" sozinho na segunda linha — o item órfão que fazia a seção
   parecer torta. Agora a grade é explícita em cada faixa e nunca sobra card:

     < 560px   1 coluna,  4 linhas
     560-859   2 colunas, 2 × 2 exato (o "Antes" NÃO se estica aqui)
     >= 860px  "Antes" ocupa a faixa inteira + os 3 "Agora" numa linha só

   A faixa larga é também a leitura certa: o "Antes" é o estado que acabou, e
   os três "Agora" são o que entrou no lugar dele. */
.mudou {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  list-style: none;
}
@media (min-width: 560px) {
  .mudou { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .mudou { grid-template-columns: repeat(3, 1fr); }
  .mudou__item--antes { grid-column: 1 / -1; }
  /* Numa faixa de 1.040px, texto colado na borda esquerda com 700px de vazio à
     direita fica pior do que estava. O conteúdo vira uma coluna centrada e o
     branco passa a ser respiro dos dois lados. */
  /* Seletor com o tipo (`> p`, e não `> *`) de propósito: `.mudou__nota` usa
     `margin: 0` e, com a mesma especificidade, venceria por vir depois no
     arquivo — a terceira linha ficava desalinhada das outras duas. */
  .mudou__item--antes > p {
    max-width: 34rem;
    margin-inline: auto;
  }
}
.mudou__item {
  padding: var(--sp-5);
  background: var(--paper-tint);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--steel);
}
/* Na faixa larga o filete de topo não delimita nada — só corta a seção ao meio
   com uma linha cinza. O contraste de fundo já separa "antes" de "agora". */
@media (min-width: 860px) {
  .mudou__item--antes { border-top: 0; padding-block: var(--sp-6); }
}
/* O "antes" fica apagado de propósito: o contraste entre o bloco cinza e os
   três coloridos é que conta a mudança, sem precisar de texto explicando. */
.mudou__item--agora {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--green);
  box-shadow: var(--shadow-1);
}
.mudou__antes {
  margin-bottom: var(--sp-2);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mudou__item--agora .mudou__antes { color: #0a7a2f; }
.mudou__frase {
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy-deep);
}
.mudou__nota { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* ---------- 47. Print do perfil no Google -------------------------------- */

/* O bloco de texto acima continua sendo a versão legível — leitor de tela e
   buscador leem número e contexto. O print é a EVIDÊNCIA: mostra que a nota
   veio mesmo do Google, e não é um número que a empresa digitou. */

.google-print {
  max-width: var(--col-texto);
  margin: var(--sp-4) auto 0;
}
.google-print img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  /* a captura é de tema escuro; a borda evita que ela "flutue" no fundo claro */
  border: 1px solid var(--navy-deep);
}
.google-print figcaption {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- 48. CTA no meio da página ------------------------------------ */

/* A pessoa decide em pontos diferentes da leitura: depois de ver quem é a
   empresa, depois de entender o processo, ou depois dos depoimentos. Um CTA
   só no topo e outro no fim obrigam a rolar de volta. */
.cta-meio {
  margin: var(--sp-7) 0 0;
  text-align: center;
}
.cta-meio .btn { box-shadow: var(--shadow-2); }

@media (max-width: 560px) {
  .cta-meio { margin-top: var(--sp-6); }
  .cta-meio .btn { width: 100%; }
}

/* ---------- 49. Barra fixa de ação (celular) ----------------------------- */

.barra-acao { display: none; }

@media (max-width: 768px) {
  .barra-acao {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;                    /* abaixo do banner de consentimento (100) */
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -4px 16px rgba(7, 42, 74, 0.10);
  }
  .barra-acao .btn { width: 100%; font-size: var(--step-0); }

  /* espaço para a barra não cobrir o fim do conteúdo */
  body { padding-bottom: 5.5rem; }

  /* com o banner de consentimento aberto, a barra sai de cena: escolher
     sobre cookies não pode disputar espaço com o CTA */
  body:has(#consent-banner:not([hidden])) .barra-acao { display: none; }
}

/* ---------- 50. Legibilidade no celular ---------------------------------- */

/* O tráfego é majoritariamente mobile. O corpo já estava em 16px, mas os
   textos de apoio caíam para 13px — pequeno demais para ler em movimento. */
@media (max-width: 560px) {
  :root {
    --step--1: 0.95rem;   /* era 0.82rem (13,1px) -> 15,2px */
    --step-0:  1.05rem;   /* era 1rem (16px)      -> 16,8px */
  }
  body { line-height: 1.7; }
  .resumo__nota,

  .etapa__texto,

  .card__texto,

  .lista__item { font-size: var(--step--1); }
  /* rótulos em caixa alta ficam ilegíveis se encolherem junto */
  .section__eyebrow { font-size: 0.8rem; }
  .local__lista dt { font-size: 0.78rem; }
}

/* ---------- 51. Infográfico do fluxo ------------------------------------- */

.fluxo-arte {
  margin: var(--sp-7) auto 0;
  max-width: 1100px;
}
.fluxo-arte img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

/* Sete etapas lado a lado ficam ilegíveis num celular: a imagem rola
   horizontalmente dentro da própria caixa, sem empurrar a página. */
@media (max-width: 860px) {
  .fluxo-arte {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
  }
  .fluxo-arte img { width: 900px; max-width: none; border-radius: 0; }
}

/* ---------- 52. reCAPTCHA ------------------------------------------------ */

/* O selo flutuante do reCAPTCHA fica fixo no canto inferior direito — o mesmo
   lugar da barra de ação fixa do celular. Um cobre o outro. Esconder o selo é
   permitido pelos termos do Google DESDE QUE a atribuição apareça junto do
   formulário, e ela está lá, em .form__recaptcha. Remover uma sem remover a
   outra viola os termos. */
.grecaptcha-badge { visibility: hidden; }

.form__recaptcha {
  margin: var(--sp-3) 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.form__recaptcha a { color: inherit; text-decoration: underline; }
.form__recaptcha a:hover { color: var(--navy); }

/* Chapéu de lista: a frase que introduz os itens sem virar título de seção. */
.lista__chapeu {
  max-width: 58ch;
  margin: 0 auto var(--sp-3);
  color: var(--ink);
}

/* ---------- 53. Passos do serviço (3 etapas da matriz) ------------------- */

.passos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;              /* a numeração é visual, em .passo__numero */
  counter-reset: none;
}
@media (min-width: 780px) {
  .passos { grid-template-columns: repeat(3, 1fr); }
}
.passo {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--green);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
/* Número em disco, encavalado na borda de cima: dá ordem de leitura sem
   depender de list-style, que não aceita estilo próprio de forma confiável. */
.passo__numero {
  position: absolute;
  top: calc(var(--sp-5) * -1 + 6px);
  left: var(--sp-5);
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--green-ink);   /* verde escuro: aceita texto branco */
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 0 0 4px var(--paper);
}
.passo__titulo {
  margin: var(--sp-2) 0 var(--sp-2);
  font-size: var(--step-1);
  color: var(--navy-deep);
}
.passo__texto { margin: 0; color: var(--ink-soft); }

/* 4 cards: 2 × 2 no tablet, 4 × 1 no desktop. Nunca sobra item órfão. */
.cards--4 { grid-template-columns: 1fr; }
/* 560px e não 640px: em 585 de viewport o card de 4 itens já cabe em duas
   colunas, e ficava numa só, deixando a seção quatro vezes mais alta que o
   necessário. Medido no harness de larguras. */
@media (min-width: 560px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 54. Filete e ressalva do hero -------------------------------- */

/* Traço laranja da arte do cliente, entre o título e o texto de apoio. */
.hero__filete {
  display: block;
  width: 3.5rem;
  height: 4px;
  margin: 0 0 var(--sp-4);
  background: var(--orange);
  border-radius: 2px;
}

/* Ressalva do percentual. Menor que o subtítulo, mas com contraste de leitura
   real — 5.6:1 sobre o navy. Cinza fraco aqui seria letra miúda de propaganda,
   que é exatamente o que o CDC art. 31 não admite para informação essencial. */
.hero__ressalva {
  max-width: 46ch;
  margin: 0 0 var(--sp-5);
  font-size: 0.82rem;
  line-height: 1.5;
  color: #a9c2d4;
}

@media (max-width: 560px) {
  .hero__filete { margin-bottom: var(--sp-3); }
  .hero__ressalva { font-size: 0.78rem; }
}

/* O <strong> global usa --ink (quase preto), pensado para fundo claro. Dentro
   do hero, sobre navy, ele sumia: ficava mais escuro que o texto normal,
   invertendo o destaque — o trecho enfatizado era o menos legível da frase. */
.hero__subtitulo strong { color: #ffffff; font-weight: 700; }

/* ==========================================================================
   55. HERO CLARO — alinhamento com o site oficial da rede
   ==========================================================================
   O cliente pediu que as cores sigam reduzzi.com.br. A paleta já era a mesma
   (navy #0e3d67, verde #0c9238, laranja #ff7100, steel #a3bac6, ink #242424
   estão todos no HTML da matriz). O que divergia era a APLICAÇÃO:

     matriz  → header navy escuro + hero BRANCO com título navy
     aqui    → header branco + hero NAVY com título branco

   Esta seção inverte o hero e escurece o header, que é o que dá a separação
   entre os dois. Vem depois de tudo no arquivo de propósito: sobrescreve as
   regras originais sem apagá-las, então voltar atrás é remover este bloco.
   ========================================================================== */

/* ---------- 55.1 Header escuro (como o da matriz) ------------------------ */

.site-header {
  background: var(--navy-dark);            /* #00385e, cor do HTML da matriz */
  border-bottom: 0;
  backdrop-filter: none;                   /* sem fundo translúcido: o navy é chapado */
}
/* A troca do logo por versão clara é feita no src do HTML, não aqui:
   `content: url()` em <img> não é confiável fora do Chrome. */

/* ---------- 55.2 Hero claro --------------------------------------------- */

.section--hero {
  background: var(--paper);
  color: var(--ink);
}
/* As duas formas decorativas foram desenhadas para fundo escuro: o disco tonal
   vira uma mancha azul no meio do branco. O arco laranja continua, porque é o
   traço de acento da marca e funciona nos dois fundos. */
.section--hero::before { display: none; }
.section--hero::after { opacity: 0.35; }

.hero__titulo { color: var(--navy-deep); }

/* Verde da marca, como no H1 da matriz. Sobre branco ele dá 4.05:1 — abaixo do
   mínimo de 4.5 para texto corrido, mas ACIMA do mínimo de 3:1 que vale para
   texto grande (WCAG 1.4.3). O H1 aqui tem mais de 32px em qualquer viewport,
   então se enquadra. NÃO reaproveitar esta cor em texto pequeno. */
.hero__destaque { color: var(--green); }

.hero__subtitulo { color: var(--ink); }
.hero__subtitulo strong { color: var(--navy-deep); }
.hero__ressalva { color: var(--ink-soft); }      /* 7.03:1 sobre branco */
.hero__confianca { color: var(--ink-soft); }

/* A pílula era clara sobre navy; invertida, vira contorno sobre branco. */
.hero__eyebrow {
  background: var(--orange-soft);
  border-color: #f5c9a3;
  color: #8f3f00;                          /* 6.59:1 sobre --orange-soft */
}

/* O embed do Instagram tem moldura branca própria: sobre fundo branco ele
   perdia o limite e parecia flutuar. A borda devolve o contorno. */
.hero__arte .video {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

/* ---------- 55.3 Alternância de fundo depois do hero claro --------------- */

/* Com o hero invertido para branco, as quatro primeiras seções ficaram todas
   claras em sequência — hero, três etapas, para quem, resumo — e a página
   abria como uma parede branca sem articulação.

   O site oficial resolve o mesmo problema alternando: hero branco, bloco de
   números navy, "Bem-vindos" navy, cards claros. Aqui a alternância usa o tom
   mais leve (--paper-tint) nas três etapas, que é o primeiro bloco depois do
   hero e o que precisa ganhar limite próprio. */
.section--passos { background: var(--paper-tint); }

/* O "para quem" vinha logo depois com o mesmo branco do hero: sem o tint acima,
   as duas seções se fundiam numa só mancha. Agora a sequência é
   branco → tint → branco, que é a cadência do resto da página. */

/* ---------- 56. Prosa institucional -------------------------------------- */

.prosa {
  max-width: 58ch;
  margin: 0 auto;
}
.prosa p { margin: 0 0 var(--sp-4); color: var(--ink); }
.prosa p:last-child { margin-bottom: 0; }
/* A ressalva legal fecha o bloco em negrito, como no site oficial: ela é o que
   delimita o serviço, não um rodapé decorativo. */
.prosa__reforco { font-weight: 700; color: var(--navy-deep); }

/* "O que vamos entregar?" tem 5 cards — número ímpar, que sobra em qualquer
   grade par. Duas faixas, duas soluções:

   560–999px, 2 colunas: 2+2+1 deixaria o quinto sozinho num canto. O último
   card passa a ocupar a linha inteira, e a forma vira 2+2+1-largo.

   >= 1000px: grade de 6 trilhas com cards de 2 — 3 na primeira linha, 3 na
   segunda... mas são 5, então o quinto ficaria sozinho de novo. Por isso os
   dois últimos ocupam 3 trilhas cada e fecham a segunda linha exata. */
@media (min-width: 560px) and (max-width: 999px) {
  .section--entregaveis .cards--4 > .card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .section--entregaveis .cards--4 { grid-template-columns: repeat(6, 1fr); }
  .section--entregaveis .cards--4 > .card { grid-column: span 2; }
  .section--entregaveis .cards--4 > .card:nth-child(4),
  .section--entregaveis .cards--4 > .card:nth-child(5) { grid-column: span 3; }
}

/* ---------- 57. Etapas da obra (as 8 do site oficial) -------------------- */


@media (min-width: 700px) { .etapas-obra { grid-template-columns: repeat(2, 1fr); } }

/* PERDIDO E RESTAURADO: uma limpeza de CSS morto usou o padrão `etapas\b`,
   que casa com `.etapas-obra` porque o hífen conta como fim de palavra — e
   levou junto o container que acabara de ser escrito. Os filhos ficaram, a
   grade sumiu, e as oito etapas empilharam em coluna única.
   Lição: ao varrer blocos por regex, ancorar o seletor inteiro. */
.etapas-obra {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .etapas-obra { grid-template-columns: repeat(2, 1fr); } }

.etapa-obra {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.etapa-obra__num {
  grid-row: 1 / 3;                 /* o número acompanha título E texto */
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
}
.etapa-obra__titulo {
  margin: 0 0 var(--sp-1);
  font-size: var(--step-0);
  line-height: 1.3;
  color: var(--navy-deep);
}
.etapa-obra__texto {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ---------- 58. Avaliações do Google (formato do site oficial) ----------- */

/* Duas colunas: texto à esquerda, card do Google à direita. Abaixo de 900px
   empilha, com o card primeiro — quem rola até aqui veio ver a prova social,
   não o título. */
.avaliacoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .avaliacoes { grid-template-columns: 1fr 1.1fr; gap: var(--sp-7); }
}

/* Nesta seção o texto é alinhado à esquerda, ao contrário do resto da página,
   que é centrado. É o formato da matriz.

   ESPECIFICIDADE, medida no navegador depois de duas tentativas falharem:
   a regra 29.1 é `.section:not(.section--hero) .section__titulo`. O `:not()`
   NÃO é transparente — o argumento dele conta —, então são TRÊS classes (0,3,0).
   `.section__titulo--esq` sozinho é (0,1,0) e perde. `.avaliacoes__texto
   .section__titulo` é (0,2,0) e também perde, mesmo vindo depois no arquivo.
   Só (0,3,0) empata, e aí a ordem decide. Daí o seletor de três classes abaixo. */
.section--transparencia .avaliacoes__texto .section__titulo,
.section--transparencia .avaliacoes__texto .section__intro,
.section--transparencia .avaliacoes__texto .section__eyebrow {
  text-align: left;
  margin-inline: 0;
}
.section--transparencia .avaliacoes__texto .section__titulo { max-width: 18ch; }
.avaliacoes__apoio {
  margin: 0 0 var(--sp-5);
  color: var(--ink);
  max-width: 40ch;
}
.cta-meio--esq { text-align: left; margin: 0; }

/* ---------- o card ---------- */

.avaliacoes__card {
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.avaliacoes__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.avaliacoes__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  color: var(--ink);
}
.avaliacoes__marca-sub { font-weight: 400; color: var(--ink-soft); }

/* Azul do Google para a ação, como no card original. 4.6:1 sobre branco. */
.avaliacoes__acao {
  padding: 0.45em 0.9em;
  border-radius: var(--radius);
  background: #1a73e8;
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.avaliacoes__acao:hover { background: #1557b0; }

.avaliacoes__nota {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.avaliacoes__valor {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--navy-deep);
}
.estrelas { color: #f5a623; letter-spacing: 0.05em; }
.avaliacoes__total { color: var(--ink-soft); font-size: var(--step--1); }

.avaliacoes__lista { margin: 0; padding: 0; list-style: none; }
.avaliacao + .avaliacao {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.avaliacao__cabeca { display: flex; align-items: center; gap: 0.6em; }
/* Avatar com inicial, como o do Google. A cor vem do HTML porque é por pessoa. */
.avaliacao__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
.avaliacao__quem { display: flex; flex-direction: column; line-height: 1.3; }
.avaliacao__quem strong { color: var(--ink); font-size: var(--step--1); }
.avaliacao__meta { color: var(--ink-soft); font-size: 0.76rem; }
.avaliacao__estrelas {
  display: flex; align-items: center; gap: 0.5em;
  margin: 0.4rem 0 0.3rem;
  font-size: 0.85rem;
}
.avaliacao__quando { color: var(--ink-soft); font-size: 0.76rem; }
.avaliacao__texto {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.avaliacoes__todas {
  display: block;
  margin-top: var(--sp-4);
  padding: 0.7em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: #1a73e8;
  font-size: var(--step--1);
  text-align: center;
  text-decoration: none;
}
.avaliacoes__todas:hover { background: var(--paper-tint); }

.avaliacoes__origem {
  margin: var(--sp-3) 0 0;
  font-size: 0.76rem;
  color: var(--ink-soft);
  text-align: center;
}

/* 3 cards: 1 coluna no celular, 3 lado a lado a partir de 780px. Nunca 2, que
   deixaria o terceiro órfão. */
.cards--3 { grid-template-columns: 1fr; }
@media (min-width: 780px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* Alterna com a seção anterior, que é clara. */
.section--move { background: var(--paper-tint); }

/* Vídeo próprio do hero, no lugar do embed. Mesmo enquadramento vertical do
   Instagram (9:16), mas sem iframe: a moldura é nossa. */
.hero__video {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* ---------- 59. Casos documentados --------------------------------------- */

.section--casos { background: var(--paper-tint); }

.casos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* São 3 peças. Em duas colunas a terceira fica sozinha num canto, então a
   faixa intermediária mantém o último item CENTRADO na linha, em vez de
   esticado (a arte é vertical, 4:5 — esticar deformaria a leitura) ou encostado
   à esquerda. Acima de 1000px cabem as três lado a lado e o problema some. */
@media (min-width: 700px) and (max-width: 999px) {
  .casos { grid-template-columns: repeat(2, 1fr); }
  .casos > .caso:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--sp-2));
    justify-self: center;
  }
}
@media (min-width: 1000px) { .casos { grid-template-columns: repeat(3, 1fr); } }

.caso { margin: 0; }
.caso__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* ==========================================================================
   60. RITMO DE FUNDO — alternância por POSIÇÃO, não por seção
   ==========================================================================
   O fundo de cada seção vinha declarado uma a uma, espalhado por 12 pontos do
   arquivo. Funcionava enquanto a ordem não mudava; a cada reordenação era
   preciso reabrir todas e recalcular na mão — e o resultado da última foi cinco
   seções com o mesmo tom em sequência, uma parede sem articulação.

   Aqui a alternância passa a ser função da POSIÇÃO: ímpares claras, pares em
   tom. Reordenar deixa de exigir mexer em cor.

   `main > .section:not(.section--hero)` tem especificidade (0,3,0) — maior que
   as regras individuais `.section--x` (0,1,0) —, então esta regra vence sem
   precisar apagá-las. As antigas ficam como estavam e param de ter efeito.
   O hero fica de fora: é sempre branco, por decisão de marca (D48).
   ========================================================================== */

main > .section:not(.section--hero) {
  background: var(--paper);
}
main > .section:not(.section--hero):nth-of-type(even) {
  background: var(--paper-tint);
}

/* Seção oculta não conta para o olho, mas conta para o :nth-of-type e
   inverteria a alternância de tudo o que vem depois. Nenhuma está oculta hoje;
   a regra existe para o dia em que alguma voltar a ficar. */
main > .section[hidden] { display: none !important; }

/* ---------- 60.1 Exceções à alternância --------------------------------- */

/* O formulário é a conversão da página e não pode depender de onde caiu na
   ordem: fica sempre em tom, para o card branco do formulário ter contorno.
   Na posição ímpar ele herdava branco sobre branco e o card sumia. */
/* `.section.section--form` e não só `.section--form`: a regra de alternância
   acima é `main > .section:not(.section--hero):nth-of-type(...)`, que vale
   (0,2,1) — o :not() conta. Com uma classe só isto daria (0,1,1) e perderia,
   que foi o que aconteceu na primeira tentativa. Duas classes empatam, e aí a
   ordem no arquivo decide.

   E o fundo é NAVY, não o tom claro: o formulário é a conversão da página e
   sai do sistema de dois tons de propósito. Com ele em tom claro, a sequência
   FAQ → formulário → onde fica ficava com três fundos iguais seguidos, e
   escurecer uma das vizinhas só empurrava o problema. Sendo um terceiro tom,
   ele resolve a alternância e ganha o destaque que a conversão pede — o card
   branco do formulário passa a flutuar sobre fundo escuro. */
/* ESPECIFICIDADE — contada, não estimada. A regra de alternância é
   `main > .section:not(.section--hero):nth-of-type(even)`:
     main (0,0,1) + .section (0,1,0) + :not(…) (0,1,0) + :nth-of-type (0,1,0)
     = (0,3,1)
   `main > .section.section--form` dá (0,2,1) e PERDE.

   Isso passou despercebido porque o formulário era a 17ª seção — ímpar — e a
   regra `even` simplesmente não o alcançava. Ao remover o glossário ele virou
   a 16ª, par, e o fundo navy desapareceu sem que nada tivesse sido tocado aqui.
   Uma regra que depende da paridade para funcionar é uma regra quebrada que
   ainda não falhou. O `:not(.section--hero)` abaixo é inócuo em efeito e existe
   só para empatar em (0,3,1) — a ordem no arquivo decide o resto. */
main > .section.section--form:not(.section--hero) {
  background: var(--navy);
  color: #e9f1f6;
}
main > .section.section--form .section__titulo { color: #ffffff; }
main > .section.section--form .section__intro  { color: #cfe0ea; }
main > .section.section--form .section__eyebrow { color: #ffb066; }

/* Mesma correção, mesma razão. */
main > .section.section--transparencia:not(.section--hero) { background: var(--paper-tint); }

/* Mesma razão, invertida: as duas seções cujo conteúdo é um card claro grande
   (avaliações do Google e casos com certidão) ficam melhor sobre tom. Como
   "casos" já cai em posição par, só transparência precisa ser fixada. */