/* ============================================================================
   MOLDES — o que é específico de cada tipo de página.
   O que se repete entre moldes mora em componentes.css.
   ============================================================================ */

/* ── Molde PRODUTO — 9 das 17 páginas ─────────────────────────────────────
   Foto do produto + galeria de 2 no topo, texto abaixo. No desktop os dois
   lados dividem a linha, como no original. */
/* ⚠️ 20px, não 48. No espelho a seção tem padding vertical ZERO e os 20px que
   se veem vêm da folga própria de cada widget. Eu somava 96px por seção —
   com cinco seções, 400px de página inventados. */
.hero-produto { padding: 20px 0; }
.hero-produto__env { display: grid; gap: var(--e5); }
@media (min-width: 992px) {
  /* ⚠️ Duas colunas de 570 SEM vão entre elas. A folga que se vê são 10px de
     recuo DENTRO de cada coluna — medido: conteúdo a 550. Com gap de 48px as
     colunas caíam para 546 e cada card ganhava uma linha. */
  .hero-produto__env { grid-template-columns: 1fr 1fr; align-items: start; gap: 0; }
}
.hero-produto__foto img { width: 100%; border-radius: var(--raio-foto); }

.miolo { padding: 20px 0; }
.miolo > .env > * + * { margin-top: var(--e5); }
.miolo h1 { margin-bottom: var(--e3); }
.miolo h2 { margin-top: var(--e7); }
.miolo .titulo-secao { margin-top: var(--e8); }
.titulo-secao + .ornamento { margin-top: var(--e3); }
.miolo .card + .card { margin-top: 20px; }
.miolo .acao { margin-top: var(--e6); }
.miolo /* A foto ocupa a COLUNA inteira (570), não o conteúdo recuado (550): medido.
   Por isso ela desfaz os 10px de recuo da coluna. */
.col .figura { margin-inline: -10px; }
.figura img { width: 100%; border-radius: var(--raio-foto); }

/* Os cards em grade a partir do tablet — no celular empilham, que é o que o
   original faz. */
@media (min-width: 768px) {
  .miolo > .env { display: grid; grid-template-columns: 1fr; }
}

/* ── Entrada ao rolar ─────────────────────────────────────────────────────
   ⚠️ O estado escondido só existe sob `.anim`, e `.anim` só entra por
   JavaScript depois de provar que a página consegue animar. Sem JS, sem
   IntersectionObserver ou com `prefers-reduced-motion`, NINGUÉM ESCONDE NADA.
   É por isso que não existe <noscript> — e por isso ninguém vê página em
   branco se o JS falhar. */
.anim .rv { opacity: 0; transform: translateY(22px); }
.anim .rv.in {
  opacity: 1; transform: none;
  transition: opacity .66s var(--curva), transform .66s var(--curva);
}
.anim .rv.rv--lista { opacity: 1; transform: none; }
.anim .rv--lista > * { opacity: 0; transform: translateY(18px); }
.anim .rv--lista.in > * {
  opacity: 1; transform: none;
  transition: opacity .6s var(--curva), transform .6s var(--curva);
  transition-delay: calc(var(--i, 0) * 62ms);
}
@media (prefers-reduced-motion: reduce) {
  .anim .rv, .anim .rv--lista > * { opacity: 1; transform: none; transition: none; }
}

/* ── Seções ───────────────────────────────────────────────────────────────
   Duas colunas de 570px no desktop — medido no espelho, não escolhido. No
   celular empilham, que é o que o original faz. */
.secao { padding: 20px 0; }
.secao__grade { display: grid; gap: var(--e6); }
@media (min-width: 992px) {
  .secao__grade { grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
}
.col { padding-inline: 10px; }   /* medido: coluna 570, conteúdo 550 */
.col > * + * { margin-top: var(--e4); }
.col .card + .card { margin-top: 20px; }   /* medido, não --e5 (24) */
.col .acao { margin-top: var(--e6); }
.col h1 { margin-bottom: var(--e3); }
.col h2 { margin-top: var(--e6); }
.col .titulo-secao + .ornamento { margin-top: var(--e3); }

.env.estreito > * + * { margin-top: var(--e4); }
/* NÃO sobrescrever a margem do h2 aqui: dentro de um bloco de texto ela é 8px
   (ver base.css). Com --e6 (32) cada um dos cinco títulos de /folders/ empurrava
   24px a mais. */

/* A foto ocupa a COLUNA inteira (570), não o conteúdo recuado (550): medido.
   Por isso ela desfaz os 10px de recuo da coluna. */
.col .figura { margin-inline: -10px; }
.figura img { width: 100%; border-radius: var(--raio-foto); }
/* SUBSTITUÍDA por .figura--cheia: a foto da coluna direita não tem teto no
   espelho — sai a 570×1013, na proporção do arquivo. O teto de 620px cortava
   400px de foto em nove páginas.
   (comentário antigo abaixo, mantido para quem for procurar)
   ela sozinha somava 1500px e empurrava a página inteira. */
.figura--alta img { width: 100%; height: auto; }

/* "Não encontrou o que procurava?" — o original põe esta seção sobre um fundo
   azul com onda. Reproduzido com gradiente e máscara, sem imagem extra. */
/* ⚠️ Cada seção tem a SUA goteira lateral, medida: 10px no herói e no texto
   rico, 30px na seção da marca e no contato, 60px na faixa da onda. No
   desktop a caixa de 1140 absorve tudo e some a diferença; a 375 ela decide
   quantas linhas cada título ocupa — o título da onda cai em 255px de largura,
   não em 355. Aqui a goteira extra é a diferença para os 10px que a .env já
   aplica. */
.secao--marca { padding-inline: 20px; }
.secao--onda { padding-inline: 50px; }

/* O título da faixa da onda é 35/35 peso 600, branco e CENTRADO — não é o h2
   comum de 18/18 do resto do site. Medido nos dois breakpoints. */
.secao--onda h2 {
  font-size: 35px; line-height: 35px; font-weight: 600; text-align: center;
}

.secao--onda {
  position: relative; overflow: hidden; color: var(--papel);
  /* ⚠️ GRADIENTE, não azul chapado: 180° de #5B99C2 a #1A4870, medido.
     A goteira de 50px está na regra lá em cima; aqui só o vertical, senão o
     `padding` curto zera o `padding-inline`. */
  background: linear-gradient(180deg, var(--onda-topo) 0%, var(--onda-fundo) 100%);
  padding-block: 60px;
}
/* A textura por cima, a 18% e em multiply — é o que tira o chapado do azul. */
.secao--onda::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/wp-content/uploads/2024/08/bg-cta.jpg") center/cover;
  opacity: .18; mix-blend-mode: multiply;
}
.secao--onda > * { position: relative; }
.onda { position: absolute; left: 0; width: 100%; line-height: 0; pointer-events: none; }
.onda svg { display: block; width: calc(100% + 1.3px); }
.onda path { fill: var(--papel); }
.onda--topo { top: 0; }
.onda--topo svg { height: 49px; }
.onda--base { bottom: 0; transform: rotate(180deg); }
.onda--base svg { height: 67px; }
.secao--onda .btn { background: var(--laranja); color: var(--tinta); }
.secao--onda a:not(.btn) { color: inherit; }


/* A foto de /sobre/ ocupa a coluna inteira: 570 × 1013 no espelho. O arquivo
   tem 500×889, então ele sobe 14% e fica um pouco mole — está na lista do
   Carlos junto das outras fotos de produto. */
.figura--cheia img { width: 100%; height: auto; border-radius: var(--raio-foto); }

/* ── Molde SIMPLES — /sobre/ ──────────────────────────────────────────────
   Medido @1280: seção 1 de 1140 (h1 centrado + texto 20/30), seção 2 de duas
   colunas de 570 (4 cards | foto vertical). O texto desta página é
   Montserrat 20/30 — NÃO é o bloco Roboto do molde produto. */
.hero-simples { padding: var(--e3) 0 var(--e2); }
.hero-simples .h1-pagina { margin-bottom: var(--e5); }

/* Ornamento sob o h1 — 100×4 centrado, em #2575FC. ⚠️ Esse azul NÃO é da
   marca: é o padrão do tema ElementsKit, que ninguém trocou. Medido, e
   reproduzido como está; anotado para o Carlos decidir. */
.h1-pagina--ornado { margin-bottom: var(--e4); }
/* Três pontos de 4px e uma barra de 100 — medido: os pontos ficam em -27, -18
   e -9 do começo da barra, e o GRUPO inteiro (127px) é que fica centrado, não
   a barra. Com a barra centrada sozinha o conjunto sai 13px à esquerda. */
.ornamento {
  position: relative; width: 127px; height: 4px; margin: 0 0 var(--e5);
}
/* Onde o título é centrado, o filete acompanha. */
.h1-pagina--centro + .ornamento, .titulo-secao + .ornamento { margin-inline: auto; }
.ornamento::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: 100px; height: 4px; background: var(--ornamento-cor);
}
.ornamento::before {
  content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 4px;
  background: var(--ornamento-ponto);
  box-shadow: 9px 0 0 var(--ornamento-ponto), 18px 0 0 var(--ornamento-ponto);
}
.hero-simples .texto { font-size: var(--corpo-g); line-height: var(--corpo-g-lh); }
.hero-simples .texto p + p { margin-top: var(--e4); }

/* ── Molde LEGAL — política e termos ──────────────────────────────────────
   Páginas do tema, não do Elementor. Uma coluna de 1140, h1 à esquerda,
   parágrafos 18/27, h2 de seção 32/38.4 e h3 28/33.6. */
/* Sem folga embaixo: o vão até o rodapé é a margem do último parágrafo
   (14,4px), medida no espelho. Com --e8 aqui a página ficava 50px mais alta. */
.legal { padding: var(--e2) 0 0; }
/* Os dois botões do fim do /404 e do /obrigado. `.acao` só tinha regra dentro
   de `.miolo` e `.col`: aqui a linha herdava margem de parágrafo e os botões
   ficavam colados no texto e um no outro. */
.legal .acao { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }

/* ── /obrigado e /404: as duas páginas curtas ────────────────────────────
   ⚠️ DOIS DEFEITOS QUE SÓ APARECEM EM PÁGINA CURTA, e os dois o Luiz viu na
   /obrigado em 21/08:

   1. FAIXA BRANCA DEPOIS DO RODAPÉ. O conteúdo dessas duas páginas é menor
      que a janela, então o rodapé acabava no meio da tela e sobrava o fundo
      do documento embaixo. Rodapé com nada depois dele não é fim de página,
      é página inacabada. A correção é o clássico: a página vira uma coluna
      flex de altura mínima igual à da janela e o <main> come a folga.
      `100dvh` e não `100vh` por causa da barra do navegador no celular, que
      some ao rolar e faria a página pular.

   2. BOTÕES COLADOS NO RODAPÉ. `.legal` não tem folga embaixo — nas páginas
      longas não faz diferença porque vem seção depois, aqui o botão encostava
      na primeira linha do azul. */
.pag--curta { min-height: 100dvh; display: flex; flex-direction: column; }
/* ⚠️ O <main> não só ESTICA, ele CENTRA o que tem dentro. Só esticar resolvia
   a faixa branca depois do rodapé, mas deixava o texto grudado no cabeçalho e
   um vazio de 180px logo acima do rodapé — o mesmo defeito com outro nome.
   Centrado, a folga se reparte em cima e embaixo e a página fica composta. */
.pag--curta > main { flex: 1 0 auto; display: flex; align-items: center; }
.pag--curta > main > * { width: 100%; }
.pag--curta .legal { padding-block: var(--e6); }
.legal .h1-pagina { margin-bottom: var(--e4); }
/* Ritmo MEDIDO no espelho: margem de baixo 14,4px em tudo, zero em cima; a
   lista não tem margem de baixo; títulos 8px em cima e 16px embaixo. Eu tinha
   posto 12/16 do meu sistema de espaço e a página crescia 200px. */
.legal__corpo > * { margin-top: 0; margin-bottom: 14.4px; }
.legal__corpo p { font-size: var(--corpo); line-height: var(--corpo-lh); }
.legal__corpo ul, .legal__corpo ol { margin-bottom: 0; padding-left: 40px; }
.legal__corpo li { margin-bottom: 0; }   /* medido: os itens não têm folga */
.legal__corpo h2 {
  font-size: var(--h2-secao); line-height: var(--h2-secao-lh);
  font-weight: var(--h2-secao-peso); text-align: left;
  margin-top: var(--e2); margin-bottom: var(--e4);
}
.legal__corpo h3 {
  font-size: var(--legal-h3); line-height: var(--legal-h3-lh);
  font-weight: var(--h2-secao-peso);
  margin-top: var(--e2); margin-bottom: var(--e4);
}
.legal__corpo ul, .legal__corpo ol { padding-left: 40px; }

/* ── Molde BREVE — /breve/ ────────────────────────────────────────────────
   Sem cabeçalho, sem rodapé, sem contato. Medido: logo 445px de largura
   centrada, h1 "Em breve" em ROBOTO 40/40 peso 600 — a única linha do site
   nessa combinação. */
.breve { padding: var(--e2) 0; text-align: center; }
.breve__marca { margin: 0 0 var(--e4); }
.breve__marca img { width: 445px; max-width: 100%; height: auto; margin-inline: auto; }
/* Mesmo papel de título de página das outras — só a caixa alta é de /breve/. */
.breve__aviso {
  font-size: var(--h1-pagina); line-height: var(--h1-pagina-lh);
  font-weight: var(--h1-pagina-peso); text-transform: uppercase;
  text-align: center;
}

/* ── Índice de prévia (temporário, some no R6) ───────────────────────────── */
.previa { list-style: none; padding: 0; margin: var(--e6) 0 var(--e8);
  display: grid; gap: 2px; }
.previa li { border-bottom: 1px solid #e6e4de; }
.previa a { display: inline-block; padding: var(--e3) 0; font-weight: 600;
  text-decoration: none; }
.previa a:hover, .previa a:focus-visible { text-decoration: underline; }
.previa__molde { float: right; padding: var(--e3) 0; font-size: 14px;
  color: var(--cinza-texto); }
.previa__nota { padding: var(--e4); background: var(--cinza-campo);
  border-radius: var(--raio); font-size: 16px; color: var(--cinza-texto); }

/* ── Molde LANDING — as duas páginas eleitorais ───────────────────────────
   Elas não têm menu: no lugar do cabeçalho vai só a marca, e ela leva para a
   home. Medido: a faixa tem 119px e a logo sai a 265 de largura. */
/* ⚠️ A marca do topo das duas landings estava MENOR e À ESQUERDA. Duas
   causas somadas: o logo saía a 265 onde o espelho põe 365, e o
   `text-align: center` não centra nada porque o reset de base.css faz
   `img { display: block }` — bloco só se centra com margem automática.
   Medido no espelho: banda 1280×119 com 10px de folga, logo 365×99 centrado;
   a 375 o logo abre para os 355 do conteúdo. Estas duas páginas são as que
   vendem em ano de eleição, e a marca é a primeira coisa que se vê nelas. */
.landing-marca { padding: 10px 0; text-align: center; }
.landing-marca img { width: 365px; max-width: 100%; height: auto;
  margin-inline: auto; }

.hero-landing { padding: 20px 0; }
.hero-landing h1 { font-size: var(--h1-pagina); line-height: var(--h1-pagina-lh);
  font-weight: var(--h1-pagina-peso); margin-bottom: var(--e4); }
.hero-landing h2 { font-size: var(--corpo-g); line-height: var(--corpo-g-lh);
  font-weight: 400; margin-bottom: var(--e5); }

/* A prateleira de produtos vive sobre o cinza, do começo ao fim. */
.secao--produtos { background: var(--cinza-campo); padding: 20px 0 var(--e7); }
.secao--produtos .titulo-secao { margin-bottom: var(--e3); }

/* ⚠️ Fileiras de TRÊS cards de 367 com 20px entre eles — medido nas posições
   70, 457 e 843. No celular vira um por linha; entre 768 e 991, dois. */
.grade-precos { display: grid; grid-template-columns: 1fr; gap: 20px;
  margin-top: var(--e6); }
@media (min-width: 768px) { .grade-precos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .grade-precos { grid-template-columns: repeat(3, 1fr); } }

.preco {
  /* ⚠️ 35px entre as peças. O `gap` do original é 20, MAS cada widget dele
     carrega 10px de folga própria em cima e embaixo — o vão que se vê na tela
     é 45. Como os meus elementos não têm essa folga, o vão tem que estar no
     `gap`. Medir a propriedade e copiar o número deu 20 e um card 44px mais
     curto; o que vale é a distância entre as peças na tela. */
  display: flex; flex-direction: column; gap: 35px;
  background: var(--papel); border-radius: var(--raio-foto); padding: 10px;
  /* Sombra do original: halo sem deslocamento. Fica porque é a cara da página;
     um deslocamento pequeno seria mais correto e menos fiel. */
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.preco__foto img { width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--raio); display: block; }
.preco__nome {
  margin: 0; font-family: var(--fonte-ui);
  font-size: var(--h1); line-height: var(--h1-lh); font-weight: 700;
  color: var(--tinta); text-align: center;
}
.preco__espec { font-size: var(--corpo); line-height: var(--corpo-lh);
  text-align: center; color: var(--cinza-texto); min-height: 41px; }
.preco__espec p { margin: 0; }

/* A tabela de tiragens era uma lista de "5.000 | R$ 180,00". Vira tabela de
   verdade: o par tem cabeçalho implícito, alinha as colunas e deixa o leitor
   de tela anunciar a tiragem junto com o preço. */
.preco__tabela { width: 100%; border-collapse: collapse;
  font-size: var(--corpo); line-height: var(--corpo-lh); }
.preco__tabela tr + tr th, .preco__tabela tr + tr td {
  border-top: 1px solid #e6e4de; }
.preco__tabela th, .preco__tabela td { padding: 4px; }
.preco__tabela th { text-align: left; font-weight: 400; color: var(--cinza-texto); }
/* ⚠️ `tabular-nums`: numeral de largura fixa. Na Montserrat o "1" é mais
   estreito que os outros dígitos, então numa coluna de preços alinhada à
   direita as casas não caíam umas sobre as outras e a coluna parecia torta.
   São 17 tabelas de preço nas duas eleitorais — é onde a página é lida com
   régua na mão. */
.preco__tabela td, .preco__tabela th {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.preco__tabela td { text-align: right; font-weight: 700; white-space: nowrap; }
/* O botão do card NÃO ocupa a largura toda: 238px centrado, 18px — medido.
   Esticado ele briga com o botão do herói, que é o que deve dominar. */
.preco__botao { align-self: center; font-size: 18px; line-height: 18px;
  margin-top: auto; }

/* Legenda que só o leitor de tela lê. */
.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Herói da landing — MEDIDO: gradiente de #1D1D1B a #000, h1 de 30px peso 700
   em limão, e o formulário na coluna da direita. */
.hero-landing {
  background: linear-gradient(180deg, var(--tinta) 0%, #000 100%);
  color: var(--papel);
  position: relative;   /* âncora da nuvem */
}

/* ── A nuvem do topo ─────────────────────────────────────────────────────
   Medida no espelho, a 1280 e a 375:
     caixa   1280×192 (375×204 no celular), `position: absolute`, `top: -1px`
     tinta   BRANCA, que é o papel da página descendo sobre a faixa preta
     desenho ESPELHADO na horizontal — o Elementor aplica `scaleX(-1)`
     `slice` faz o desenho COBRIR a caixa e sobrar pelas laterais: é isso que
     dá nuvem grande em vez de uma fita fininha esticada.
   ⚠️ `overflow: hidden` na caixa, senão o excesso lateral vaza e a página
   ganha barra de rolagem horizontal. */
.nuvem { position: absolute; top: -1px; left: 0; right: 0; height: 192px;
  overflow: hidden; line-height: 0; pointer-events: none; z-index: 0; }
.nuvem svg { display: block; width: 100%; height: 100%; transform: scaleX(-1); }
.nuvem path { fill: var(--papel); }
@media (max-width: 767px) { .nuvem { height: 204px; } }

.hero-landing > .env { position: relative; z-index: 1; }
/* ⚠️ CLAREIRA PARA A NUVEM. O h1 é limão e a nuvem é branca: um sobre o outro
   dá 2,2:1, ilegível. No espelho quem abre esse espaço é um "spacer" de 159px
   dentro da coluna; aqui é folga, que é a mesma coisa sem um elemento vazio.
   Só a coluna do TEXTO desce — o formulário da direita continua no alto, por
   cima da nuvem, exatamente como no original. */
@media (min-width: 992px) { .hero-landing .col--centro { padding-top: 169px; } }
@media (max-width: 991px) { .hero-landing .col--centro { padding-top: 190px; } }
/* ⚠️ A COLUNA DA ESQUERDA É CENTRADA, e eu tinha posto à esquerda. Medido de
   novo no espelho, a 1280, nas duas landings:
     h1      550×60  30/30 peso 700  #C6D300  CENTRADO   (eu tinha 30/36 à esquerda)
     h2      550×40  20/20 peso 500  branco   CENTRADO   (eu tinha 20/30 peso 400)
     botão   317×44  centrado
     foto    308×324 CENTRADA e com a máscara orgânica shape-9
   A foto era o erro mais visível: saía num retângulo de canto arredondado onde
   o original tem o recorte orgânico. `hero-01` não estava no mapa de máscaras
   do montador — só `hero-site` e `capa` estavam. */
.hero-landing h1 { font-size: 30px; line-height: 30px; font-weight: 700;
  color: var(--lima); text-align: center; }
.hero-landing h2 { font-size: 20px; line-height: 20px; font-weight: 500;
  color: var(--papel); text-align: center; }
.hero-landing .texto { color: var(--papel); }
.hero-landing__capa { margin-top: var(--e5); }
.hero-landing__capa img { width: 308px; max-width: 100%; height: auto;
  margin-inline: auto; border-radius: 0; }
/* O formulário sobre o escuro continua sendo um cartão branco. */
.hero-landing .form-orcamento { background: var(--papel); color: var(--tinta); }

/* ── Molde HOME ──────────────────────────────────────────────────────────
   Seções escuras: o herói e a chamada da eleição, ambas #1D1D1B. */
.secao--escura { background: var(--tinta); color: var(--papel); }
.secao--escura h1, .secao--escura h2, .secao--escura .texto { color: var(--papel); }
/* ⚠️ O herói da HOME é branco 35/35 peso 600 e CENTRADO — eu tinha copiado o
   estilo da landing eleitoral (lima, 30px, à esquerda) por engano. São duas
   páginas diferentes, com dois heróis diferentes. Medido nos dois. */
/* ⚠️ O recorte vai ATRÁS do conteúdo e a seção ganha folga embaixo para o
   botão passar por cima dele. Sem o z-index a ponta do chevron cobria o botão
   e metade do subtítulo — o desenho comia a chamada principal da página. */
/* ⚠️ O recorte TRANSBORDA a seção: no espelho ele vai de y=346 a 528 numa
   seção que acaba em 497, ou seja invade 31px da seção de baixo. É isso que
   deixa a divisão limpa — o escuro é um bloco curto com um entalhe, em vez de
   um bloco alto com um V cavado por dentro. Com `overflow: hidden` eu prendia
   o recorte lá dentro e precisava esticar a seção para caber. */
.hero-home { padding: 10px 0 var(--e7); position: relative; overflow: visible; }
.hero-home > .env { position: relative; z-index: 1; }
/* ⚠️ `start`, não `center`: no original a foto começa 10px abaixo do topo da
   seção e o recorte passa por baixo dela. Centrada, ela descia para dentro do
   recorte e ficava cortada. */
.hero-home .secao__grade { align-items: start; }
.hero-home .col--centro { padding-top: var(--e6); }
.col--centro { text-align: center; }
.col--centro .acao { display: flex; justify-content: center; }
.hero-home h1 { font-size: 35px; line-height: 35px; font-weight: 600; color: var(--papel); }

/* ── O h1 da home, em duas linhas ────────────────────────────────────────
   Luiz escolheu a opção A em 21/08, depois de ver as três montadas na página.
   O raciocínio: o nome da gráfica é o ativo mais forte que ela tem e estava
   diluído no meio de uma frase de 57 caracteres.
     linha 1  NOME       48/52 peso 800, branco
     linha 2  LUGAR      25/32 peso 500, limão  ← as palavras que se busca
   ⚠️ As duas moram no MESMO h1. Tirar a localização de dentro dele desfaria
   o motivo de ter posto o nome ali.
   ⚠️ Aqui o site ganha, de propósito, o único degrau de tipo por breakpoint
   que ele tem: 48px em 355 de largura não cabe em "Mestre Gráfica" sem
   quebrar no meio da palavra. */
.hero-home__h1 { margin: 0; }
/* ⚠️ Seletor com o `h1` no meio, e não é enfeite. O base.css tem
   `.secao--escura h1 span { color: inherit }` — regra que existe para os
   `<span>` que o Elementor deixa dentro dos títulos e que precisam herdar.
   Ela pesa (0,2,1) e atropelava `.hero-home__lugar` (0,1,0): a linha do
   endereço saía BRANCA em vez de limão, e a opção A perdia exatamente o que
   a distinguia. `.hero-home h1 .classe` empata em peso e ganha por vir depois. */
.hero-home h1 .hero-home__nome, .hero-home h1 .hero-home__lugar { display: block; }
.hero-home h1 .hero-home__nome {
  font-size: 48px; line-height: 52px; font-weight: 800;
  letter-spacing: -.02em; color: var(--papel); text-wrap: balance;
}
.hero-home h1 .hero-home__lugar {
  margin-top: 6px; font-size: 25px; line-height: 32px; font-weight: 500;
  color: var(--lima); text-wrap: balance;
}
@media (max-width: 767px) {
  .hero-home h1 .hero-home__nome  { font-size: 34px; line-height: 38px; }
  .hero-home h1 .hero-home__lugar { font-size: 20px; line-height: 26px; }
}
.hero-home h2 { font-size: var(--corpo); line-height: var(--corpo-lh); font-weight: 400;
  margin-top: var(--e5); }
/* A foto sai a 385×385, sem canto arredondado — a arte já é recortada. */
.hero-home__foto img { width: 385px; max-width: 100%; height: auto; border-radius: 0;
  margin-inline: auto; display: block; }

/* O recorte em ponta no pé do herói: 182px, na cor da seção de baixo. */
/* ⚠️ GIRADO 180°. No original esta é uma forma "de baixo", e o Elementor as
   desenha viradas — a tinta fica no PÉ da caixa, não na cabeça. Sem girar, o
   escuro sobrava numa faixa embaixo do V e a divisão entre as duas seções
   ficava suja. É o mesmo `transform: rotate(180deg)` que o Elementor aplica. */
.chevron { position: absolute; left: 0; right: 0; bottom: 0; height: 182px;
  line-height: 0; pointer-events: none; z-index: 0; }
.chevron svg { transform: rotate(180deg); }
.chevron svg { display: block; width: 100%; height: 100%; }
.chevron path { fill: var(--cinza-campo); }
@media (max-width: 767px) { .chevron { height: 90px; } }
/* ⚠️ Folga embaixo. Com `0` a vitrine encostava na seção escura da eleição e
   as duas viravam um bloco só — sem respiro nenhum entre elas. */
.secao--produtos-home { background: var(--cinza-campo); padding: 20px 0 var(--e7); }

/* ── A chamada da eleição, na home ───────────────────────────────────────
   ⚠️ ESTA SEÇÃO NUNCA RECEBEU ESTILO NENHUM. Em 21/08 eu relatei ter aplicado
   aqui os 30/30 peso 700 em lima do espelho. O montador passou a emitir a
   classe `secao--eleicao`, mas a REGRA nunca chegou ao CSS: os dois títulos
   ficaram no h2 comum (18/18 peso 600, branco) e a foto saiu a 570 onde o
   espelho põe 302. Era isso o "largado" que o Luiz viu, e continuou lá.
   Medido de novo no espelho, a 1280:
     h2 nº1   540×60   30/30 peso 700  #C6D300  centrado
     h2 nº2   540×40   20/20 peso 500  branco   centrado
     botão    287×44   laranja, texto escuro, raio 3
     20px entre os três widgets, e nenhum com margem própria
     foto     302×302  no ALTO da coluna direita, sem canto arredondado
     coluna esquerda: conteúdo CENTRADO na vertical, contra os 322 da direita
     seção    30px de folga em cima e embaixo (não os 20 do padrão) */
.secao--eleicao { padding: 30px 0; }
@media (min-width: 992px) {
  /* `stretch` para a coluna do texto ganhar a altura da foto e poder centrar
     o conteúdo dentro dela. O padrão das outras seções é `start`. */
  .secao--eleicao .secao__grade { align-items: stretch; }
  .secao--eleicao .col--centro { display: flex; flex-direction: column; justify-content: center; }
}
/* ⚠️ As colunas desta seção têm folga em CIMA e EMBAIXO também: 10px, como
   as laterais. É o que faz a coluna medir 322 contra os 302 da foto, e a
   seção fechar em 382. Sem isso a seção saía 20px mais curta. */
.secao--eleicao .col { padding-block: 10px; }
.secao--eleicao .col > * + * { margin-top: 20px; }
/* ⚠️ O primeiro título herdava `margin-top: 32px` da regra geral `.col h2`.
   Numa coluna centrada na vertical, margem no primeiro filho não some: ela
   entra na conta da altura e empurra o bloco inteiro 16px para baixo. */
.secao--eleicao .col > :first-child { margin-top: 0; }
.secao--eleicao .acao { margin-top: 20px; }
.secao--eleicao h2 {
  font-size: 30px; line-height: 30px; font-weight: 700; color: var(--lima);
}
/* O segundo título é o subtítulo: menor, mais leve e branco. */
.secao--eleicao h2 + h2 {
  font-size: 20px; line-height: 20px; font-weight: 500; color: var(--papel);
}
/* A foto NÃO ocupa a coluna: 302 fixos, centrados. O `-10px` que as outras
   figuras usam para encostar na borda da coluna não vale aqui. */
.secao--eleicao .figura { margin-inline: 0; }
.secao--eleicao__foto img {
  width: 302px; max-width: 100%; height: auto; margin-inline: auto;
  border-radius: 0; display: block;
}

/* ── Carrossel ───────────────────────────────────────────────────────────
   Faixa de ponta a ponta, 400px de altura, foto cobrindo e véu preto a 50% —
   tudo medido. Sem `.tem-js` os slides ficam empilhados e visíveis: quem
   está sem JavaScript vê o primeiro, não uma faixa vazia. */
.carrossel { position: relative; width: 100%; }
.carrossel__trilho { list-style: none; margin: 0; padding: 0; }
.slide {
  position: relative; min-height: 400px;
  display: grid; place-items: center;
  background: var(--azul-escuro) center/cover no-repeat;
  padding: var(--e6) 50px; text-align: center; color: var(--papel);
}
.slide::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .5);   /* véu medido: preto a 50% */
}
.slide__miolo { position: relative; max-width: 700px; }
.slide__titulo {
  font-size: var(--h1); line-height: var(--h1-lh); font-weight: var(--h1-peso);
  color: var(--papel); margin-bottom: var(--e3);
}
.slide__texto { font-size: var(--corpo); line-height: var(--corpo-lh); margin-bottom: var(--e5); }
.slide__botao { background: var(--laranja); color: var(--tinta); }

/* Com JavaScript, um slide de cada vez, empilhados na mesma célula. */
.tem-js .carrossel__trilho { display: grid; }
.tem-js .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .5s ease; }
.tem-js .slide.esta-ativo { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .tem-js .slide { transition: none; }
}


/* As duas fotos das seções escuras da home NÃO ocupam a coluna: 70% e 56% da
   largura do conteúdo, centradas e sem canto arredondado — está literal no CSS
   do original (`elementor-element-5e36ee3 img{width:70%}`). Eu as pus a 100%
   com raio de 25 e a home ficou 400px mais alta. */
.figura--70 img, .figura--56 img { margin-inline: auto; border-radius: 0; }
.figura--70 img { width: 70%; }
.figura--56 img { width: 56%; }

/* ── Vitrine de produtos ─────────────────────────────────────────────────
   O comportamento é o do AccordionGallery que o Luiz escolheu, mas SEM React
   e SEM GSAP: aquele componente traz 70 KB de biblioteca para animar duas
   propriedades que o CSS já anima sozinho, e o site inteiro tem 50 KB.

   O que vem da especificação dele e por quê:
   · `expandRatio 0.52` — a peça aberta ocupa 52% da fileira. É o que faz
     "crescer" de verdade, em vez do empurrãozinho que eu tinha antes.
   · uma peça JÁ ABERTA ao carregar — sem isso a fileira parece morta.
   · CINZA nas fechadas, cor na aberta. Esta é a peça que mais resolve: as
     oito fotos são mockups sobre o mesmo verde-limão, e em cor todas juntas
     viravam uma parede verde. Dessaturadas, a aberta salta.
   · o nome deita e ganha um filete quando a peça abre.
   Fora: o `tilt` de 8 graus e o parallax. Numa gráfica de bairro isso vira
   enfeite, e cada grau de rotação 3D é um pixel a menos de foto legível. */
.vitrine { list-style: none; margin: var(--e6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vitrine__item { position: relative; border-radius: 16px; overflow: hidden;
  background: var(--azul-escuro) center/cover no-repeat; min-height: 190px;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }
.vitrine__item a { position: absolute; inset: 0; display: flex;
  align-items: flex-end; padding: var(--e4); text-decoration: none;
  color: var(--papel); }
.vitrine__item a::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%);
  transition: background .6s cubic-bezier(.16,1,.3,1);
}
.vitrine__nome { position: relative; display: flex; align-items: center;
  gap: 12px; font-family: var(--fonte-ui); font-size: 18px; line-height: 22px;
  font-weight: 700; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
/* O filete que acompanha o nome quando a peça abre. */
.vitrine__nome::before {
  content: ""; flex: 0 0 auto; width: 3px; height: 26px; border-radius: 3px;
  background: var(--lima); opacity: 0; transition: opacity .5s ease .1s;
}
.vitrine__item--sem-foto { background: var(--lima); }
.vitrine__item--sem-foto a { color: var(--tinta); }
.vitrine__item--sem-foto a::before { content: none; }
.vitrine__item--sem-foto .vitrine__nome { text-shadow: none; }
.vitrine__item--sem-foto .vitrine__nome::before { background: var(--tinta); }

@media (min-width: 768px) { .vitrine { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 992px) {
  .vitrine { display: flex; height: 460px; gap: 10px; }
  .vitrine__item {
    flex: 1 1 0; min-height: 0; min-width: 0;
    /* cinza e escurecida enquanto fechada */
    filter: grayscale(1);
    transition: flex-grow .6s cubic-bezier(.16,1,.3,1), filter .6s ease;
  }
  .vitrine__item a::before {
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.75) 100%),
                rgba(6, 0, 16, .35);
  }
  /* ⚠️ 7,58 = (0,52 × 7) / (1 − 0,52). É a conta do `expandRatio` da
     especificação, refeita para OITO peças: a aberta cresce 7,58 contra 1 das
     sete fechadas, e fica com 52% da fileira. O número muda se a lista mudar:
     é (0,52 × (n − 1)) / 0,48. Com 8,67, que era a conta de nove, a aberta
     comia 55% e as fechadas encolhiam para 68px. */
  .vitrine__item.esta-aberto { flex-grow: 7.58; filter: none; }
  .vitrine__item.esta-aberto a::before {
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.78) 100%);
  }
  .vitrine__item.esta-aberto .vitrine__nome::before { opacity: 1; }

  .vitrine__item a { align-items: flex-end; justify-content: center; }
  .vitrine__nome { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .vitrine__nome::before { display: none; }
  .esta-aberto .vitrine__nome { writing-mode: horizontal-tb; transform: none; }
  .esta-aberto .vitrine__nome::before { display: block; }
  .vitrine__item.esta-aberto a { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .vitrine__item, .vitrine__item a::before { transition: none; }
}

/* ── Clientes ────────────────────────────────────────────────────────────
   Faixa de credencial colada ao rodapé: rótulo pequeno em caixa alta, três
   marcas lado a lado. Com manchete de 32px e muito ar ela lia como seção
   inacabada. Aqui o peso está nos NOMES, que é o que convence.
   Chapa de altura travada com `contain`: as três marcas têm proporções
   diferentes e esticar logo de cliente, numa gráfica, é o pior anúncio
   possível. Quem não tem marca conferida leva o nome na mesma chapa. */
.clientes { background: var(--cinza-campo); padding: var(--e6) 20px; }
.clientes__env { max-width: 900px; }
.clientes__rotulo {
  margin: 0; text-align: center; font-family: var(--fonte-ui);
  font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cinza-texto);
}
.clientes__lista { list-style: none; margin: var(--e5) 0 0; padding: 0;
  display: grid; gap: var(--e5); text-align: center; }
@media (min-width: 700px) { .clientes__lista { grid-template-columns: repeat(3, 1fr); } }
/* ⚠️ LARGURA TRAVADA, não `min-width`. Com largura livre a chapa do hospital
   (que leva NOME, não logo) saía 60px mais larga que as duas com logo, e no
   celular, uma embaixo da outra, a fileira lia como três coisas soltas em vez
   de um conjunto. Chapa igual é o que faz três marcas parecerem uma lista. */
.clientes__chapa { display: inline-flex; align-items: center; justify-content: center;
  width: 180px; max-width: 100%; height: 64px; padding: 0 var(--e3);
  margin-bottom: var(--e3);
  background: var(--papel); border: 1px solid #e2e0da; border-radius: var(--raio); }
.clientes__chapa img { max-height: 40px; width: auto; object-fit: contain; display: block; }
.clientes__chapa--nome { font-family: var(--fonte-ui); font-weight: 800;
  font-size: 18px; color: var(--tinta); white-space: nowrap; }
/* `balance` reparte as linhas do nome longo em vez de deixar uma palavra
   órfã embaixo — "Hospital Municipal Hugo / Miranda" ficava torto ao lado dos
   dois nomes curtos. */
.clientes__lista b { display: block; font-family: var(--fonte-ui);
  font-size: 17px; line-height: 23px; font-weight: 700; text-wrap: balance; }
.clientes__lista li > span:last-child { display: block; margin-top: 2px;
  font-size: 15px; color: var(--cinza-texto); }