/* ============================================================================
   COMPONENTES — as peças que se repetem em várias páginas
   Toda medida vem de tokens.css. Nada de valor solto aqui.
   ============================================================================ */

/* ── Botão ────────────────────────────────────────────────────────────────
   Medido no espelho: laranja #F39200, Montserrat 600 18px, altura 44px.
   O 44 não é gosto — é o piso de alvo de toque, e três botões do site atual
   estavam a 40-42px. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--toque); padding: var(--e3) var(--e5);
  font-family: var(--fonte-ui); font-size: var(--botao);
  font-weight: var(--botao-peso); line-height: 1;
  color: var(--tinta); background: var(--laranja);   /* texto ESCURO: 7,17:1 */
  border: 0; border-radius: var(--raio); text-decoration: none; cursor: pointer;
  transition: background var(--tempo) var(--curva), transform var(--tempo) var(--curva);
}
.btn:hover, .btn:focus-visible { background: #d97f00; color: var(--tinta); text-decoration: none; }

/* O botão do formulário e o do WhatsApp têm cor própria no original.
   O do formulário ("eu quero") também é maior e em CAIXA ALTA — medido. */
.btn--form {
  color: var(--papel); background: var(--btn-verde);
  font-size: 20px; line-height: 20px; text-transform: uppercase;
}
.btn--form:hover, .btn--form:focus-visible { color: var(--papel); background: #3b6a0c; }
.btn--zap  { color: var(--papel); background: var(--btn-zap); }
.btn--zap:hover, .btn--zap:focus-visible { color: var(--papel); background: #064c44; }
.btn:active { transform: translateY(1px); }

.btn--contorno {
  color: var(--tinta); background: transparent;
  border: 1px solid currentColor;
}
.btn--contorno:hover, .btn--contorno:focus-visible {
  color: var(--papel); background: var(--tinta);
}

/* ── Card de ícone (o "icon-box" do original) ─────────────────────────────
   Medido: título Montserrat 600 18px/21.6, texto 16px/24. */
/* Vão de 15px entre o ícone e o texto; a folga vertical vem das margens do
   título, não do gap — medido.
   ⚠️ `align-items: center`: o ícone fica no MEIO do bloco de texto, não no
   topo. É o que o original faz (`.elementor-icon-box-wrapper{align-items:
   center}`) e é a diferença que mais salta aos olhos — com `start` a estrela
   flutua acima do título e o card parece desalinhado. */
.card { display: grid; grid-template-columns: auto 1fr; gap: 0 15px;
  align-items: center; }
.card > :not(.card__icone) { grid-column: 2; }
.card:not(:has(.card__icone)) { grid-template-columns: 1fr; }
.card:not(:has(.card__icone)) > * { grid-column: 1; }
/* ⚠️ A CAIXA do ícone é 50 (80 no card grande) — no original ela é a caixa-em
   de um glifo de fonte, e é ela que define onde o texto começa: 650+50+15=715,
   igual ao espelho. O desenho dentro fica em 34 (54), que é o tamanho que
   combina com o traço do original. Com a caixa a 34 o texto começava 19px cedo
   demais e o card inteiro saía torto em relação ao espelho. */
/* ⚠️ O desenho OCUPA a caixa inteira. Eu desenhava 34px numa caixa de 50 e o
   ícone saía um terço menor que o do original — o traço fica proporcional
   porque o `stroke-width` cai junto. */
.card__icone { grid-row: 1 / span 2; width: 50px; height: 50px;
  display: grid; place-items: center;
  /* ⚠️ LIMÃO, não a cor do título. No original o ícone do trio do herói é
     #C6D300 e o título é #1A4870 — duas cores diferentes de propósito. Eu
     amarrei o ícone ao título e o verde da marca sumiu da página. */
  color: var(--card-icone-cor); }
.card__icone svg { width: 100%; height: 100%; stroke-width: 1.1; }
.card--g .card__icone { width: 80px; height: 80px; }
.card--g .card__icone svg { stroke-width: .7; }
.card--marca .card__icone { color: var(--card-icone-cor-alt); }
.card__titulo {
  /* ⚠️ 8px em cima e 5 embaixo, medido. Sem declarar, a regra de h2 do molde
     (`.col h2 { margin-top: 32px }`) alcançava o título do card e cada um dos
     três do herói ficava 27px mais alto — 81px por página. */
  margin: 8px 0 5px; font-family: var(--fonte-ui); font-size: var(--card-titulo);
  line-height: var(--card-titulo-lh); font-weight: var(--card-titulo-peso);
  color: var(--card-titulo-cor);
}
/* Os quatro cards compartilhados ("Por que Escolher a MESTRE Gráfica?") usam
   laranja no título. Ver o aviso de contraste em tokens.css. */
.card--marca .card__titulo { color: var(--card-titulo-cor-alt); }
.card__texto {
  margin: 0; font-family: var(--fonte-ui); font-size: var(--card-texto);
  line-height: var(--card-texto-lh); color: var(--tinta);
}

/* ── Campo de formulário ─────────────────────────────────────────────────
   Rótulo ACIMA do campo, como no original. Rótulo real, não placeholder:
   placeholder some quando a pessoa digita e leitor de tela ignora. */
.campo { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }
/* padding medido: 6px em cima e embaixo, 16px nas laterais. O min-height de
   44px é meu e fica: 44 é o alvo de toque mínimo, e o original tem 47. */
.campo label {
  font-family: var(--fonte-ui); font-size: var(--rotulo);
  line-height: var(--rotulo-lh); font-weight: var(--rotulo-peso);
}
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: var(--toque); padding: 6px 16px;
  font-family: var(--fonte-ui); font-size: var(--campo);
  line-height: var(--campo-lh); font-weight: var(--campo-peso);
  color: var(--tinta); background: var(--papel);
  /* ⚠️ Borda VERDE de 1px e canto de 10px — medido no espelho, e é o que dá
     a cara do formulário. Eu tinha posto cinza com canto de 4px, que é o
     padrão de qualquer formulário e por isso não chamou atenção em número
     nenhum: a comparação de altura passa igual. Só o olho pegou. */
  border: 1px solid var(--verde); border-radius: var(--raio-campo);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--cinza-texto); }

/* Honeypot. ⚠️ `display:none` e NÃO "fora da tela": campo com layout, mesmo
   longe da viewport, é preenchido pelo autofill do Chrome e do Safari, e
   `empresa` casa com o heurístico de "organização" em português. O site
   anterior classificou clientes reais como robô por isso.
   ⚠️ O nome do campo não muda: o nó "É robô?" do n8n casa por nome. */
.toca { display: none; }

/* ── Botão flutuante de WhatsApp ─────────────────────────────────────────
   Verde da marca com o quase-preto da própria marca: 9,38:1 medido.
   Branco sobre o mesmo verde daria 1,98:1 e reprovaria. */
.zap-flutuante {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: inline-flex; align-items: center; gap: var(--e2);
  height: 60px; padding: 0 var(--e5); border-radius: var(--raio-pilula);
  font-family: var(--fonte-ui); font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--zap-tinta); background: var(--zap); text-decoration: none;
  box-shadow: var(--sombra-alta);
  transition: transform var(--tempo) var(--curva), background var(--tempo) var(--curva);
}
.zap-flutuante:hover, .zap-flutuante:focus-visible {
  background: var(--zap-hover); transform: translateY(-2px); text-decoration: none;
}
.zap-flutuante svg { width: 26px; height: 26px; flex: none; }
/* No celular só o símbolo: o rótulo comeria a tela, e o polegar só precisa do alvo. */
@media (max-width: 600px) {
  .zap-flutuante { padding: 0; width: 60px; justify-content: center; }
  .zap-flutuante span { display: none; }
}

/* ── Galeria ─────────────────────────────────────────────────────────────
   Duas colunas quadradas, como o original. */
/* ⚠️ UMA coluna no celular. Medido: cada foto sai a 335×335 empilhada, e as
   duas somam 680px. Em duas colunas elas encolhem para 152 e a página perde
   530px — foi assim que /adesivos/ ficou 17% mais curta a 375. */
.galeria { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
.galeria a { display: block; overflow: hidden; border-radius: var(--raio-galeria); }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--raio-galeria);
  transition: transform var(--tempo) var(--curva); }
.galeria a:hover img, .galeria a:focus-visible img { transform: scale(1.04); }

/* ── Lista com marcador de ícone ─────────────────────────────────────────── */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; align-items: baseline; gap: var(--e2);
  font-family: var(--fonte-ui); font-size: var(--card-texto);
  line-height: var(--card-texto-lh); margin-bottom: var(--e2);
}

/* ============================================================================
   CABEÇALHO — o retoque aprovado pelo Luiz em 20/08
   ============================================================================ */
.cabecalho {
  position: sticky; top: 0; z-index: 800;
  background: var(--papel);
  box-shadow: 0 1px 0 #e6e4de, 0 6px 18px rgba(29, 29, 27, .05);
}
.cabecalho__env {
  display: flex; align-items: center; gap: var(--e5);
  max-width: var(--env); margin-inline: auto;
  padding: var(--e2) var(--gutter); min-height: 60px;
}
.cabecalho__marca { flex: none; line-height: 0; text-decoration: none; }
.cabecalho__marca img { width: 176px; height: auto; }
@media (min-width: 768px) { .cabecalho__marca img { width: 196px; } }

.cabecalho__dir { display: flex; align-items: center; gap: var(--e2); margin-left: auto; }

/* Pílula de WhatsApp do topo. No celular só o símbolo. */
.zap-pilula {
  display: inline-flex; align-items: center; gap: var(--e2);
  height: var(--toque); padding: 0 var(--e4); border-radius: var(--raio-pilula);
  font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--zap-tinta); background: var(--zap); text-decoration: none;
  transition: background var(--tempo) var(--curva);
}
.zap-pilula:hover, .zap-pilula:focus-visible { background: var(--zap-hover); text-decoration: none; }
.zap-pilula svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { .zap-pilula { padding: 0; width: var(--toque); justify-content: center; }
  .zap-pilula span { display: none; } }

/* Hambúrguer — 44×44. O do site atual tinha 33 e o toque errava. */
.hamburguer {
  width: var(--toque); height: var(--toque);
  display: grid; place-items: center; flex: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hamburguer span, .hamburguer span::before, .hamburguer span::after {
  content: ""; display: block; width: 21px; height: 2px;
  background: var(--tinta); transition: transform var(--tempo) var(--curva),
    opacity var(--tempo) var(--curva);
}
.hamburguer span::before { transform: translateY(-6px); }
.hamburguer span::after  { transform: translateY(4px); }
.hamburguer[aria-expanded="true"] span { background: transparent; }
.hamburguer[aria-expanded="true"] span::before { transform: rotate(45deg); }
.hamburguer[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }
@media (min-width: 992px) { .hamburguer { display: none; } }

/* ── Menu ──────────────────────────────────────────────────────────────── */
.menu__lista, .menu__sub { list-style: none; margin: 0; padding: 0; }
.menu__link {
  display: flex; align-items: center; gap: var(--e1);
  min-height: var(--toque); padding: 0 var(--e1);
  font-family: var(--fonte-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--tinta);
  background: none; border: 0; text-decoration: none; cursor: pointer;
}
/* ── Destaque do item da eleição ─────────────────────────────────────────
   ⚠️ TERCEIRA TENTATIVA, e as duas primeiras erraram pelo mesmo motivo.
     1ª  filete embaixo  → "você está aqui" em toda a web.
     2ª  pastilha cheia  → também é convenção de estado: aba selecionada,
         controle segmentado, item ativo. Trocou uma linguagem de ESTADO por
         outra, e o Luiz leu igual das duas vezes.
   O que separa "promoção" de "estado" não é cor nem forma: é MOVIMENTO.
   Estado não se mexe. Um filete de luz girando em volta do rótulo só pode
   ser uma coisa: olha aqui. Por isso o miolo agora é VAZIO — sem preencher,
   a peça deixa de parecer o item selecionado do menu — e a marcação toda vive
   na borda, que anda.

   Como funciona, sem imagem e sem JavaScript: um `conic-gradient` gira num
   pseudo-elemento e uma máscara em `xor` recorta o miolo, deixando ver só os
   2px da moldura. O ângulo é uma variável registrada com `@property`, que é o
   que permite animar um gradiente (variável comum não interpola).

   ⚠️ Degradação: onde `@property` não existe, `--giro` não anima e o gradiente
   fica parado numa moldura dourada — que é exatamente o mesmo desenho, só
   quieto. Nada some, nada quebra.
   ⚠️ 4,5s de propósito. Abaixo de 3s vira pisca-pisca de vitrine de rua, e
   isto aqui é uma gráfica de bairro, não um cassino. */
@property --giro {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}
.menu__link--eleicao { padding: 0; }
.menu__link--eleicao > span {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; line-height: 1;
  padding: 8px 15px; border-radius: var(--raio-pilula);
  color: var(--tinta); font-weight: 700;
}
.menu__link--eleicao > span::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--giro),
    #D9BE72 0turn, #D9BE72 .46turn,
    var(--destaque) .58turn, var(--laranja) .66turn,
    var(--destaque) .74turn, #D9BE72 .86turn, #D9BE72 1turn);
  /* o `xor` come o miolo e sobra a moldura */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: giro-eleicao 4.5s linear infinite;
}
@keyframes giro-eleicao { to { --giro: 1turn; } }

/* No apontador fino a peça se acende: o miolo enche e a volta acelera. */
@media (hover: hover) and (pointer: fine) {
  .menu__link--eleicao:hover > span { background: var(--destaque); }
  .menu__link--eleicao:hover > span::before { animation-duration: 1.6s; }
}
.menu__link--eleicao:focus-visible > span { background: var(--destaque); }

/* ⚠️ Sem movimento, a moldura para no dourado cheio — continua destacando,
   só não anda. Quem pediu para o sistema não animar não recebe animação. */
@media (prefers-reduced-motion: reduce) {
  .menu__link--eleicao > span::before {
    animation: none;
    background: var(--destaque);
  }
}

.menu__seta { width: 10px; height: 7px; flex: none; }
.menu__abre[aria-expanded="true"] .menu__seta { transform: rotate(180deg); }

@media (max-width: 991px) {
  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papel); border-top: 1px solid #e6e4de;
    box-shadow: var(--sombra); display: none;
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .menu.esta-aberto { display: block; }
  .menu__lista { padding: var(--e2) var(--gutter) var(--e4); }
  .menu__item { border-bottom: 1px solid #f0efe9; }
  .menu__item:last-child { border-bottom: 0; }
  .menu__link { min-height: 48px; font-size: 15px; }
  .menu__sub { display: none; padding: 0 0 var(--e2) var(--e4); }
  .menu__sub.esta-aberto { display: block; }
  .menu__sub a { display: flex; align-items: center; min-height: 44px;
    font-size: 15px; text-decoration: none; }
}
@media (min-width: 992px) {
  .menu__lista { display: flex; align-items: center; gap: var(--e5); }
  .menu__item--tem-filhos { position: relative; }
  .menu__sub {
    position: absolute; left: 0; top: 100%; min-width: 200px;
    background: var(--papel); box-shadow: var(--sombra);
    border-radius: var(--raio); padding: var(--e2) 0; display: none; z-index: 10;
  }
  .menu__item--tem-filhos:hover .menu__sub,
  .menu__item--tem-filhos:focus-within .menu__sub,
  .menu__sub.esta-aberto { display: block; }
  .menu__sub a { display: flex; align-items: center; min-height: 40px;
    padding: 0 var(--e4); font-size: 15px; text-decoration: none; }
  .menu__sub a:hover, .menu__sub a:focus-visible { background: var(--cinza-campo); }
}

/* ============================================================================
   BLOCO DE CONTATO — fundo #F4F4F4, medido
   ============================================================================ */
/* Folga MEDIDA: 40px em cima e embaixo nas 13 páginas, 20px em /contatos/ —
   que é também a única sem o fundo cinza. Eu tinha 64, do meu sistema. */
.contato { background: var(--cinza-campo); padding: 40px 20px; margin-bottom: 54px; }
/* Na home a faixa de clientes vem logo depois: sem isto sobra uma tira branca
   entre dois cinzas, e o corte fica sem razão de ser. */
.contato:has(+ .clientes) { margin-bottom: 0; }
/* 54px de respiro antes do rodapé nas 10; /contatos/ encosta. Medido nas 11. */
.pag--contato .contato { padding: 20px 20px; margin-bottom: 0; }
.contato__env { display: grid; gap: var(--e7); }
@media (min-width: 992px) { .contato__env { grid-template-columns: 1fr 1fr; gap: var(--e8); } }
/* ⚠️ peso 700, não 600. O h1 do molde produto é 600; o título do bloco de
   contato é 700 nas 14 páginas, e centrado. Medido — e passei nove páginas
   com 600 porque peso não mexe na altura e a comparação não reclama. */
.contato__titulo {
  font-size: var(--h1); line-height: var(--h1-lh);
  font-weight: var(--h1-contato-peso); text-align: center;
}
/* 10px de recuo dentro da coluna, como em .col: medido, o conteúdo do bloco
   de contato sai a 550 num container de 570, e a 295 num de 315. */
.contato__lado, .form-orcamento { margin-inline: 10px; }
.contato__lado > * + * { margin-top: var(--e5); }
/* ⚠️ UMA coluna. Medido: as duas caixas empilham (y=1897 e y=2052 em
   /sobre/), não ficam lado a lado. Em duas colunas o título "ONDE ESTAMOS"
   quebra em duas linhas e o bloco perde 40px de altura. */
.contato__caixas { display: grid; gap: var(--e5); }

/* Telefone e endereço herdam a cor: viram link sem virar "link azul". */
.lig { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.lig:hover, .lig:focus-visible { border-bottom-color: currentColor; }

.form-orcamento { background: var(--papel); padding: var(--e5); border-radius: var(--raio); }
.form-orcamento .btn { width: 100%; }
.form-aviso { margin-top: var(--e3); font-size: 15px; }
.form-aviso[data-tipo="erro"] { color: #b3261e; }

/* ============================================================================
   RODAPÉ — #1589CB, medido
   ============================================================================ */
/* ⚠️ 40px em cima, não 64. O rodapé estava com 466px de altura — o Luiz achou
   grande e tem razão: 126 são só a nuvem, e o resto era folga minha. Com 40 e
   a logo menor ele cai para ~390 e continua com tudo: marca, Instagram,
   endereço, telefone, horário e os dois links legais. */
.rodape { background: var(--rodape-fundo); color: var(--papel); padding: var(--e5) 0 var(--e4); }
.rodape__env { display: flex; flex-direction: column; align-items: center;
  gap: var(--e4); text-align: center; }
.rodape__logo { width: 150px; height: auto; margin-bottom: var(--e3); }
.rodape__linha { margin: 0; font-size: 16px; line-height: 26px; }
.rodape__mapa, .rodape__fone { color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.5); }
.rodape__mapa:hover, .rodape__fone:hover,
.rodape__mapa:focus-visible, .rodape__fone:focus-visible { border-bottom-color: currentColor; }
.rodape__fio { width: 100%; max-width: 640px; height: 1px; border: 0;
  background: rgba(255,255,255,.28); margin: var(--e4) 0; }

/* ⚠️ 19px/600 torna estes links "texto grande", cujo mínimo de contraste é
   3:1 — e branco sobre #1589CB dá 3,84:1, que passa. A 16px normal o mínimo
   seria 4,5 e reprovaria. De quebra o alvo de toque sai de 15px para 44. */
.rodape__legais { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e5); justify-content: center; }
.rodape__legais a { display: inline-flex; align-items: center; min-height: var(--toque);
  font-size: 19px; font-weight: 600; color: inherit; }

.redes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e3); }
.redes a { display: grid; place-items: center; width: var(--toque); height: var(--toque);
  color: inherit; border-radius: 50%; text-decoration: none;
  transition: background var(--tempo) var(--curva); }
.redes a:hover, .redes a:focus-visible { background: rgba(255,255,255,.18); }
.redes svg { width: 22px; height: 22px; }


/* ── Card grande — a variante de /sobre/ ──────────────────────────────────
   Medido lá: ícone 80px em #F39200, título 25/30 peso 800 no mesmo laranja,
   texto 18/27. Contra o card do molde produto: ícone 50px lima, título
   18/21.6 peso 600 em #1A4870, texto 16/24.
   ⚠️ CONTRASTE: 25px peso 800 conta como texto grande, então a régua da WCAG
   cai de 4,5:1 para 3:1 — e #F39200 sobre branco dá 2,35:1. Reprova nas duas.
   Reproduzido fiel; anotado para o Carlos. */
.card--g { gap: var(--e2) var(--e4); }
.card--g .card__icone { width: var(--card-icone-g); height: var(--card-icone-g); }
.card--g .card__titulo {
  text-transform: uppercase;   /* medido: só a variante grande é caixa alta */
  font-size: var(--card-titulo-g);
  line-height: var(--card-titulo-g-lh);
  font-weight: var(--card-titulo-g-peso);
}
.card--g .card__texto {
  font-size: var(--card-texto-g);
  line-height: var(--card-texto-g-lh);
}

/* Em /contatos/ o bloco de contato perde o fundo cinza — é o único lugar do
   site onde isso acontece, e é medido, não suposto. */
.contato--claro { background: var(--papel); }


/* Asterisco de campo obrigatório — o original marca com "*" vermelho depois do
   rótulo. Só decoração: quem lê por leitor de tela ouve o `required` do input,
   e por isso o pseudo-elemento não precisa (nem deve) ser anunciado. */
.campo label::after { content: "*"; color: var(--obrigatorio); margin-left: 3px; }
.toca label::after { content: none; }

/* ── Borda de nuvens no topo do rodapé ────────────────────────────────────
   Ver o comentário em partials/rodape.html: no site vivo esta forma perdeu o
   posicionamento e virou um bloco preto. Aqui ela é o que deveria ser — um
   recorte na cor do que está imediatamente acima, que é o bloco de contato. */
.rodape { position: relative; }
.rodape__forma {
  position: absolute; inset: 0 0 auto 0;
  height: var(--onda-alt); overflow: hidden; line-height: 0; pointer-events: none;
}
.rodape__forma svg {
  display: block; width: calc(100% + 1.3px); height: 100%;
  position: relative; left: 50%; transform: translateX(-50%);
}
.rodape__forma path { fill: var(--onda-cor); }
/* /contatos/ é a única página cujo bloco de contato é branco. */



/* ── Card no celular ──────────────────────────────────────────────────────
   ⚠️ A 375 o card VIRA BLOCO: ícone centrado em cima, título e texto
   centrados abaixo — nos dois tamanhos de card. Medido: o título ocupa a
   largura inteira (335 no trio do herói, 295 no quarteto da marca) e o ícone
   fica no meio. Lado a lado, o texto perdia 60px de medida e cada card
   ganhava linha; a seção da marca ficava 200px mais curta que o original. */
@media (max-width: 767px) {
  .card { display: block; text-align: center; }
  /* ⚠️ A CAIXA do ícone é 50 (e 80 no card grande) porque no original ela é a
     caixa-em de um glifo de fonte, e é ela que ocupa altura. O desenho dentro
     continua com o tamanho que combina com o traço do original — casar a
     caixa sem inchar o desenho. Com a caixa a 34 cada card ficava 12px curto. */
  .card__icone {
    display: grid; place-items: center; margin: 0 auto var(--e3);
    width: 50px; height: 50px;
  }
  .card__icone svg { width: 34px; height: 34px; }
  .card--g .card__icone { width: 80px; height: 80px; }
  .card--g .card__icone svg { width: 54px; height: 54px; }
}

/* Enviando: o botão fica inerte e diz por quê. Sem isto o `disabled` do
   JavaScript deixava o botão com a cara de sempre e a pessoa clicava de novo. */
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .6; cursor: progress; pointer-events: none;
}

/* Aviso do formulário: erro em vermelho legível sobre o branco do cartão. */
.form-aviso { margin-top: var(--e3); font-size: 16px; line-height: 24px; }
.form-aviso[data-tipo="erro"] { color: var(--erro); }
.form-aviso a { color: inherit; font-weight: 600; }

/* ── Máscara orgânica nas fotos ───────────────────────────────────────────
   ⚠️ Não é enfeite meu: o site atual recorta as fotos com uma máscara SVG,
   e é isso que faz a lâmpada do herói virar um círculo rasgado em vez de um
   quadrado preto. Medido: `mask-image` do ElementsKit, `contain`, centrada.
   Onde aparece:
     shape-10 → a foto do herói da home
     shape-9  → a `capa.jpg` da home, e TODAS as 17 fotos das duas landings
                eleitorais, inclusive as dos cards de preço
   Eu tinha desenhado todas como quadrados — é a diferença mais visível entre
   a home nova e a original, e a que o Luiz apontou primeiro. */
.mascara-1, .mascara-2 {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;  mask-position: 50% 50%;
  -webkit-mask-size: contain;      mask-size: contain;
  border-radius: 0;
}
.mascara-1 { -webkit-mask-image: url("/assets/mascara-organica.svg");
             mask-image: url("/assets/mascara-organica.svg"); }
.mascara-2 { -webkit-mask-image: url("/assets/mascara-organica-2.svg");
             mask-image: url("/assets/mascara-organica-2.svg"); }