/*
 * Metalpex — base visual compartilhada pelo site institucional e pela loja.
 *
 * Referência de linguagem: superlogica.com (painéis arredondados, títulos leves em duas cores,
 * números grandes, cartões que empilham, muito branco). A assinatura própria da Metalpex é o
 * desenho técnico em wireframe 3D verde (compartilhado/metal3d.js).
 * O logo é usado como foi entregue: sobre branco/névoa ou direto sobre o grafite (o contorno branco
 * do logo novo separa o preto do fundo; a .logo--placa ficou só para compatibilidade).
 * Desde 09/11/2026 o PNG tem fundo transparente (o arquivo recebido era JPEG com o xadrez de
 * "transparência" desenhado; o xadrez foi removido). O `mix-blend-mode: multiply` que .logo img
 * usava para sumir com o branco do logo antigo saiu: sobre o grafite ele apagava o contorno branco.
 */

:root {
  --verde: #006800;          /* amostrado do logo */
  --verde-hover: #005400;
  --verde-sinal: #5fd673;    /* traço e brilho sobre fundo escuro */
  --verde-50: #eef6ee;
  --verde-100: #d7ebd8;
  --verde-noite: #0f2a17;

  --grafite: #1f2427;
  --grafite-2: #2a3034;
  --grafite-3: #3b4247;
  --aco: #8a9197;
  --linha: #e3e7e5;
  --nevoa: #f3f5f4;
  --nevoa-2: #e9edeb;
  --branco: #ffffff;
  --preto: #000000;

  --texto: #1a1e21;
  --texto-2: #586066;       /* 6,4:1 sobre branco */
  --texto-3: #7d858b;       /* só em títulos grandes (contraste de texto grande) */
  --texto-inv: #ffffff;
  --texto-inv-2: #b8c0c5;

  --fonte: "Geist", "Helvetica Neue", Arial, sans-serif;
  --t-sm: 0.889rem;   /* 16px */
  --t-base: 1rem;     /* 18px */
  --t-md: 1.111rem;   /* 20px */
  --t-lg: 1.333rem;   /* 24px */
  --t-h2: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem);    /* 31 → 45px */
  --t-h1: clamp(2.25rem, 1.55rem + 2.1vw, 3.4rem);   /* 40 → 61px */
  --t-num: clamp(2.2rem, 1.7rem + 1.6vw, 3.1rem);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 32px; --e-5: 48px; --e-6: 64px; --e-7: 96px; --e-8: 136px;
  --secao: clamp(72px, 9vw, 136px);

  --sombra-1: 0 1px 2px rgb(20 30 25 / 0.06), 0 8px 24px -12px rgb(20 30 25 / 0.18);
  --sombra-2: 0 2px 6px rgb(20 30 25 / 0.06), 0 30px 60px -30px rgb(20 30 25 / 0.35);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-saida: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 150ms; --d-2: 200ms; --d-3: 250ms; --d-brilho: 520ms;

  --largura: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --alvo: 48px;
  --topo: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: var(--t-base); line-height: 1.6; color: var(--texto); background: var(--branco); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
/* Links nunca sublinhados (pedido do cliente): o destaque no hover é cor + fundo suave. */
a { color: var(--verde); text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
.escuro :focus-visible { outline-color: var(--verde-sinal); }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--verde); color: var(--branco); padding: 12px 20px; border-radius: var(--r); }
.pular:focus { top: 12px; }
.container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------------ Tipografia */
.titulo-1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.04em; }
.titulo-2 { font-size: var(--t-h2); letter-spacing: -0.035em; }
.titulo-3 { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.titulo-4 { font-size: var(--t-md); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
/* Título em duas vozes: a segunda linha completa a primeira, em tom mais claro. */
.titulo-1 .tom, .titulo-2 .tom { display: block; color: var(--texto-3); }
.escuro .titulo-1 .tom, .escuro .titulo-2 .tom { color: var(--texto-inv-2); }
.verde .titulo-2 .tom { color: var(--verde-100); }
.lead { font-size: var(--t-md); color: var(--texto-2); line-height: 1.55; max-width: 34em; }
.apoio { color: var(--texto-2); }
.escuro .lead, .escuro .apoio { color: var(--texto-inv-2); }
.intro { font-size: var(--t-md); font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; max-width: 22em; }

/* ------------------------------------------------------------------ Logo */
.logo { display: inline-flex; align-items: center; min-height: var(--alvo); }
.logo img { height: 44px; width: auto; }
.logo--placa { background: var(--branco); padding: 4px 8px; border-radius: var(--r-sm); }
/* Rodapé grafite: o logo novo tem contorno branco próprio, então vai direto, sem placa (a placa
   virava uma caixa branca quadrada em volta do adesivo). */
.logo.logo--rodape img { height: 52px; } /* .logo.: vence o .logo img de 36px do celular */

/* ------------------------------------------------------------------ Botões
   Encaixe da seta: a seta sai pela direita e outra entra pela esquerda, como uma peça
   avançando na esteira. O brilho atravessa o botão uma vez, como luz sobre chapa. */
.btn {
  --bg: var(--verde); --bg-hover: var(--verde-hover); --fg: var(--branco); --slot: rgb(255 255 255 / 0.16); --seta: var(--branco); --borda: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 6px 24px; border: 1px solid var(--borda); border-radius: var(--r);
  background: var(--bg); color: var(--fg); font-weight: 500; font-size: var(--t-base); line-height: 1.2; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--d-2) var(--ease), border-color var(--d-2) var(--ease), transform var(--d-1) var(--ease), box-shadow var(--d-2) var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
  transform: translateX(-110%);
}
.btn:hover { background: var(--bg-hover); color: var(--fg); }
.btn:hover::after { transform: translateX(110%); transition: transform var(--d-brilho) var(--ease-saida); }
.btn:active { transform: scale(0.98); }
.btn:has(.btn__seta) { padding-right: 6px; }
.btn__seta { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--slot); color: var(--seta); overflow: hidden; flex: none; }
.btn__seta svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform var(--d-3) var(--ease); }
.btn__seta svg + svg { transform: translateX(-160%); }
.btn:hover .btn__seta svg:first-child { transform: translateX(160%); }
.btn:hover .btn__seta svg + svg { transform: translateX(0); }
.btn > svg { width: 22px; height: 22px; flex: none; }

.btn--secundario { --bg: var(--nevoa-2); --bg-hover: #dde3e0; --fg: var(--texto); --slot: var(--branco); --seta: var(--verde); }
.btn--secundario::after { background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.7) 50%, transparent 65%); }
.btn--claro { --bg: var(--branco); --bg-hover: var(--verde-50); --fg: var(--grafite); --slot: var(--verde-50); --seta: var(--verde); }
.btn--claro::after { background: linear-gradient(105deg, transparent 35%, rgb(0 104 0 / 0.08) 50%, transparent 65%); }
.btn--vidro { --bg: rgb(255 255 255 / 0.08); --bg-hover: rgb(255 255 255 / 0.14); --fg: var(--branco); --slot: rgb(255 255 255 / 0.12); --borda: rgb(255 255 255 / 0.22); backdrop-filter: blur(8px); }
.btn--pequeno { min-height: var(--alvo); padding: 4px 18px; font-size: var(--t-sm); gap: 10px; }
.btn--pequeno:has(.btn__seta) { padding-right: 4px; }
.btn--pequeno .btn__seta { width: 38px; height: 38px; }
.btn--largo { width: 100%; }
.btn[disabled] { --bg: var(--nevoa-2); --bg-hover: var(--nevoa-2); --fg: var(--texto-2); cursor: not-allowed; }

.link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); margin-inline: -10px; padding-inline: 10px; border-radius: var(--r-sm); color: var(--verde); font-weight: 500; text-decoration: none; transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.link svg { width: 18px; height: 18px; transition: transform var(--d-2) var(--ease); }
.link:hover { background: var(--verde-50); color: var(--verde-hover); }
.link:hover svg { transform: translateX(4px); }
.escuro .link { color: var(--verde-sinal); }
.escuro .link:hover { background: rgb(95 214 115 / 0.12); color: var(--verde-sinal); }

.icone-btn { display: inline-grid; place-items: center; width: var(--alvo); height: var(--alvo); border: 0; border-radius: var(--r); background: var(--nevoa); color: var(--texto); cursor: pointer; transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.icone-btn:hover { background: var(--nevoa-2); color: var(--verde); }
.icone-btn svg { width: 22px; height: 22px; }
.escuro .icone-btn { background: rgb(255 255 255 / 0.08); color: var(--branco); }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------------------------ Cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 0.9); backdrop-filter: saturate(1.4) blur(14px); transition: transform var(--d-3) var(--ease), box-shadow var(--d-2) var(--ease); }
.topo[data-rolado="true"] { box-shadow: 0 1px 0 var(--linha); }
.topo[data-oculto="true"] { transform: translateY(-100%); }
.topo__barra { display: flex; align-items: center; gap: var(--e-4); min-height: var(--topo); }
.topo__nav { margin-inline: auto; }
.topo__nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.topo__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--texto-2); font-weight: 500; text-decoration: none; transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.topo__nav a:hover { background: var(--nevoa); color: var(--texto); }
.topo__nav a[aria-current="page"] { color: var(--verde); background: var(--verde-50); }
.topo__acoes { display: flex; align-items: center; gap: 10px; }
.topo__menu { display: none !important; }

.gaveta { position: fixed; inset: 0; z-index: 70; display: none; }
.gaveta[data-aberta="true"] { display: block; }
.gaveta__fundo { position: absolute; inset: 0; background: rgb(20 24 26 / 0.45); animation: aparecer var(--d-2) var(--ease); }
.gaveta__painel { position: absolute; inset: 8px 8px 8px auto; width: min(400px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-3); overflow: auto; background: var(--branco); border-radius: var(--r-xl); animation: entrar-direita var(--d-3) var(--ease); }
.gaveta__painel--esquerda { inset: 8px auto 8px 8px; animation-name: entrar-esquerda; }
.gaveta__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.gaveta__links { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gaveta__links a { display: flex; align-items: center; min-height: 60px; padding: 0 var(--e-2); border-radius: var(--r); color: var(--texto); font-size: var(--t-md); font-weight: 500; text-decoration: none; }
.gaveta__links a:hover, .gaveta__links a[aria-current="page"] { background: var(--nevoa); color: var(--verde); }
@keyframes aparecer { from { opacity: 0; } }
@keyframes entrar-direita { from { opacity: 0; transform: translateX(24px); } }
@keyframes entrar-esquerda { from { opacity: 0; transform: translateX(-24px); } }

/* ------------------------------------------------------------------ Seções e painéis */
.secao { padding-block: var(--secao); }
.secao--nevoa { background: var(--nevoa); }
.secao__cabeca { display: grid; gap: var(--e-2); max-width: 44rem; margin-bottom: var(--e-6); }
.secao__cabeca--linha { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--e-3); }
.painel { border-radius: var(--r-xl); overflow: hidden; }
.escuro { background: var(--grafite); color: var(--texto-inv); }
.verde { background: var(--verde); color: var(--texto-inv); }

/* ------------------------------------------------------------------ Visor 3D */
.visor { position: relative; width: 100%; height: 100%; min-height: 0; }
.visor canvas { position: absolute; inset: 0; }
.visor[data-arrastar] { cursor: grab; }
.visor[data-arrastar]:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }

/* ------------------------------------------------------------------ Selos (cor + ícone + texto) */
.selo { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px 3px 9px; border-radius: 999px; font-size: var(--t-sm); font-weight: 500; line-height: 1.2; background: var(--branco); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linha); }
.selo svg { width: 16px; height: 16px; flex: none; }
.selo--estoque { background: var(--verde-50); color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde-100); }
.selo--poucos { color: var(--grafite); box-shadow: inset 0 0 0 1px var(--aco); }
.selo--vidro { background: rgb(255 255 255 / 0.1); color: var(--branco); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); backdrop-filter: blur(8px); }

/* ------------------------------------------------------------------ Formulários */
.campo { display: grid; gap: 8px; }
.campo__rotulo { font-weight: 500; }
.campo__ajuda { color: var(--texto-2); font-size: var(--t-sm); }
.campo__erro { display: flex; align-items: center; gap: 6px; color: #a61b1b; font-size: var(--t-sm); font-weight: 500; }
.escuro .campo__erro { color: #ffb4b4; }
.entrada {
  width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--nevoa); color: var(--texto); font: inherit; appearance: none;
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background-color var(--d-2) var(--ease);
}
textarea.entrada { min-height: 132px; padding-block: 14px; resize: vertical; }
.entrada:hover { background: var(--nevoa-2); }
.entrada:focus { outline: none; background: var(--branco); border-color: var(--verde); box-shadow: 0 0 0 4px var(--verde-50); }
.entrada::placeholder { color: #6f777d; }
.entrada[aria-invalid="true"] { border-color: #a61b1b; }
.escuro .entrada { background: var(--grafite-2); color: var(--branco); border-color: var(--grafite-3); }
.escuro .entrada:focus { border-color: var(--verde-sinal); box-shadow: 0 0 0 4px rgb(95 214 115 / 0.16); }
.escuro .entrada::placeholder { color: #8d969c; }
/* Seleção: o <select> nativo vira um botão + lista próprios (ui.js), porque a lista aberta do
   navegador não aceita estilo (fica azul e quadrada, fora do padrão). O <select> continua no
   HTML, escondido, guardando o valor para formulários e para quem escuta "input"/"change". */
.selecao { position: relative; }
.selecao .entrada { padding-right: 48px; cursor: pointer; }
.selecao::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; opacity: 0.7; transition: transform var(--d-2) var(--ease); }
.selecao[data-aberta="true"]::after { transform: translateY(-25%) rotate(-135deg); }
.selecao__botao { display: flex; align-items: center; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selecao[data-aberta="true"] .selecao__botao { background: var(--branco); border-color: var(--verde); box-shadow: 0 0 0 4px var(--verde-50); }
.selecao__lista {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; max-height: 320px; overflow: auto;
  display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none;
  background: var(--branco); border-radius: var(--r); box-shadow: 0 0 0 1px var(--linha), var(--sombra-2);
  transform-origin: top; animation: lista-abre var(--d-1) var(--ease);
}
.selecao__lista[data-acima="true"] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
@keyframes lista-abre { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.selecao__opcao { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 14px; border-radius: var(--r-sm); color: var(--texto); white-space: nowrap; cursor: pointer; }
.selecao__opcao svg { width: 18px; height: 18px; color: var(--verde); visibility: hidden; flex: none; }
.selecao__opcao[data-ativa="true"] { background: var(--nevoa); }
.selecao__opcao[aria-selected="true"] { color: var(--verde); font-weight: 500; }
.selecao__opcao[aria-selected="true"] svg { visibility: visible; }
.escuro .selecao[data-aberta="true"] .selecao__botao { background: var(--grafite-2); border-color: var(--verde-sinal); box-shadow: 0 0 0 4px rgb(95 214 115 / 0.16); }
.escuro .selecao__lista { background: var(--grafite-2); box-shadow: 0 0 0 1px var(--grafite-3), var(--sombra-2); }
.escuro .selecao__opcao { color: var(--branco); }
.escuro .selecao__opcao[data-ativa="true"] { background: var(--grafite-3); }
.escuro .selecao__opcao[aria-selected="true"], .escuro .selecao__opcao svg { color: var(--verde-sinal); }
.entrada-icone { position: relative; }
.entrada-icone > svg { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--texto-2); pointer-events: none; }
.entrada-icone .entrada { padding-left: 52px; }

.marcar { display: flex; align-items: center; gap: 14px; min-height: var(--alvo); cursor: pointer; }
.marcar input { appearance: none; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--aco); border-radius: 7px; background: var(--branco); cursor: pointer; transition: background-color var(--d-1) var(--ease), border-color var(--d-1) var(--ease); }
.marcar input[type="radio"] { border-radius: 50%; }
.marcar input:checked { background: var(--verde); border-color: var(--verde); }
.marcar input[type="checkbox"]:checked::after { content: ""; width: 6px; height: 12px; border: solid var(--branco); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.marcar input[type="radio"]:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--branco); }
.marcar input:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.marcar__qtd { margin-left: auto; color: var(--texto-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 20px; border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); color: var(--texto); font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color var(--d-2) var(--ease), background-color var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.chip:hover { border-color: var(--aco); }
.chip[aria-pressed="true"] { background: var(--grafite); border-color: var(--grafite); color: var(--branco); }

.quantidade { display: inline-grid; grid-template-columns: var(--alvo) 56px var(--alvo); align-items: center; height: 56px; padding: 4px; border-radius: var(--r); background: var(--nevoa); }
.quantidade button { height: 48px; border: 0; border-radius: var(--r-sm); background: transparent; font-size: var(--t-lg); color: var(--texto); cursor: pointer; }
.quantidade button:hover { background: var(--branco); color: var(--verde); }
.quantidade input { width: 100%; height: 48px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; appearance: textfield; color: var(--texto); }
.quantidade input::-webkit-inner-spin-button { appearance: none; }

/* ------------------------------------------------------------------ Abas */
.abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r); background: var(--nevoa); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.aba { position: relative; min-height: var(--alvo); padding: 0 20px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--texto-2); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); }
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { background: var(--branco); color: var(--texto); box-shadow: var(--sombra-1); }
.aba-painel { padding-top: var(--e-5); animation: painel-entra var(--d-3) var(--ease); }
@keyframes painel-entra { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------------ Tabela técnica */
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela th { width: 44%; font-weight: 400; color: var(--texto-2); }
.tabela td { font-weight: 500; }

/* ------------------------------------------------------------------ Toast */
.toasts { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 90; display: grid; gap: 10px; }
.toast { display: flex; align-items: center; gap: 14px; min-width: min(380px, calc(100vw - 32px)); padding: 14px 16px 14px 14px; border-radius: var(--r-lg); background: var(--grafite); color: var(--branco); box-shadow: var(--sombra-2); animation: toast-entra var(--d-3) var(--ease); }
.toast__icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(95 214 115 / 0.16); color: var(--verde-sinal); flex: none; }
.toast__icone svg { width: 20px; height: 20px; }
.toast a { margin-left: auto; color: var(--verde-sinal); font-weight: 500; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

/* ------------------------------------------------------------------ Rodapé */
.rodape { background: var(--grafite); color: var(--texto-inv-2); font-size: var(--t-sm); padding-block: var(--e-5) var(--e-3); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--e-4); }
.rodape h2 { margin-bottom: 4px; color: var(--branco); font-size: var(--t-sm); font-weight: 500; letter-spacing: -0.01em; }
.rodape ul { display: grid; margin: 0; padding: 0; list-style: none; }
.rodape li a { display: inline-flex; align-items: center; min-height: 34px; color: var(--texto-inv-2); text-decoration: none; transition: color var(--d-2) var(--ease); }
.rodape li a:hover { color: var(--verde-sinal); }
.rodape__marca p { margin-top: var(--e-2); line-height: 1.5; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-4); padding-top: var(--e-2); border-top: 1px solid var(--grafite-3); }

/* ------------------------------------------------------------------ Revelação no scroll (usada com parcimônia) */
[data-revelar] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--ordem, 0) * 80ms); }
[data-revelar].visivel { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ Responsivo */
@media (max-width: 960px) {
  .topo__nav, .topo__acoes .so-desktop { display: none !important; }
  .topo__menu { display: inline-grid !important; }
  .topo__barra { gap: var(--e-2); }
  .topo__acoes { margin-left: auto; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade > :first-child { grid-column: 1 / -1; }
  .secao__cabeca--linha { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  :root { --topo: 68px; }
  .logo img { height: 36px; }
  .acoes .btn { flex: 1 1 100%; }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  [data-revelar] { opacity: 1; transform: none; }
}