/* Painel da Equipe — página de venda
   Referência de design: sistema Supabase (dark nativo, profundidade por bordas, sem sombras duras)
   Paleta institucional: fundo #0B0F0F, acento verde-limão #B6FF00, cinzas esverdeados
   Tipografia: Space Grotesk (títulos) + Inter (texto) + JetBrains Mono (rótulos técnicos) */

:root {
  --fundo: #0B0F0F;
  --fundo-alt: #0F1513;
  --superficie: #121917;
  --borda: rgba(255, 255, 255, 0.07);
  --borda-forte: rgba(255, 255, 255, 0.14);
  --lima: #B6FF00;
  --lima-fraca: rgba(182, 255, 0, 0.16);
  --texto: #EAF2ED;
  --texto-2: #B6C4BC;
  --texto-3: #93A29A;
  --alerta: #FFC247;
  --erro: #FF7A6B;
  --risco: #FF9C8F;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --titulo: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
a { color: var(--lima); }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap-estreito { max-width: 860px; }

/* ---------- topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 15, 15, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.topo-solido {
  background: rgba(11, 15, 15, 0.95);
  border-bottom-color: var(--lima-fraca);
}
.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  text-decoration: none;
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
}
.marca-pulso {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 4px rgba(182, 255, 0, 0.14);
  flex: none;
}
.marca-nome { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-menu { display: none; }
.topo-menu a {
  color: var(--texto-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.topo-menu a:hover { color: var(--texto); border-bottom-color: var(--lima); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.botao-forte {
  background: var(--lima);
  color: #0B0F0F;
  box-shadow: 0 12px 34px rgba(182, 255, 0, 0.14);
}
.botao-forte:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(182, 255, 0, 0.22); }
.botao-fraco {
  background: transparent;
  color: var(--texto);
  border-color: var(--borda-forte);
}
.botao-fraco:hover { transform: translateY(-2px); border-color: var(--lima); }
.botao-mini { padding: 10px 16px; font-size: 13px; color: var(--texto-2); border-color: var(--borda-forte); background: transparent; }
.botao-mini:hover { color: var(--texto); transform: none; }
.botao-larga { width: 100%; }
.botao-seta { width: 20px; height: 20px; flex: none; }
.botao[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--borda);
}
.hero-luz {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 255, 0, 0.11), rgba(182, 255, 0, 0) 68%);
  pointer-events: none;
}
.hero-grade { display: grid; gap: 40px; position: relative; }
.hero-texto { min-width: 0; }
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 22px;
}
.etiqueta-ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lima);
  flex: none;
}
.hero h1 { font-size: clamp(2.05rem, 8.6vw, 4rem); }
.hero h1 span, .secao-cabeca h2 { text-wrap: balance; }
.hero-sub, .secao-cabeca p { text-wrap: pretty; }
.hero h1 span { display: block; }
.linha-2 { color: var(--lima); }
.hero-sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--texto-2);
  max-width: 60ch;
}
.hero-acoes { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.hero-micro {
  margin-top: 18px;
  font-size: 14px;
  color: var(--texto-2);
  max-width: 52ch;
}

/* minitela do hero */
.hero-painel { min-width: 0; }
.minitela {
  background: linear-gradient(180deg, #131A18, #0E1412);
  border: 1px solid var(--borda-forte);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.minitela-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.02);
}
.pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.minitela-url, .moldura-url {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.minitela-corpo { padding: 12px; display: grid; gap: 7px; }
.minitela-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13.5px;
  min-width: 0;
}
.minitela-linha .mono { font-family: var(--mono); font-size: 11px; color: var(--texto-3); flex: none; }
.minitela-linha .nome { flex: 1 1 auto; color: var(--texto); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-2);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 3px 9px;
  flex: none;
}
.tag-alta { color: var(--risco); border-color: rgba(255, 122, 107, 0.32); background: rgba(255, 122, 107, 0.08); }
.tag-falta { color: var(--alerta); border-color: rgba(255, 194, 71, 0.28); }
.minitela-nota, .moldura-pe {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 0 14px 12px;
}

/* ---------- seções ---------- */
.secao { padding: 72px 0; border-bottom: 1px solid var(--borda); }
.secao-alt { background: var(--fundo-alt); }
.secao-cabeca { max-width: 760px; margin-bottom: 42px; }
.secao-cabeca h2 { font-size: clamp(1.6rem, 5.4vw, 2.5rem); }
.secao-cabeca p { margin-top: 14px; color: var(--texto-2); font-size: 16.5px; }

.grade { display: grid; gap: 16px; }
.grade-dor { grid-template-columns: 1fr; }
.grade-recursos { grid-template-columns: 1fr; }
.grade-numeros { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.grade-planos { grid-template-columns: 1fr; }

.cartao, .bloco {
  background: linear-gradient(180deg, var(--superficie), var(--fundo-alt));
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 24px;
  min-width: 0;
}
.cartao h3, .bloco h3 { font-size: 19px; margin-top: 16px; }
.cartao p, .bloco p { margin-top: 10px; color: var(--texto-2); font-size: 15px; }
.icone { display: block; width: 32px; height: 32px; }
.bloco .icone { width: 36px; height: 36px; }
.bloco { transition: border-color 0.25s ease, transform 0.25s ease; }
.bloco:hover { border-color: var(--lima-fraca); transform: translateY(-3px); }

/* ---------- números ---------- */
.numero {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 20px 18px;
  min-width: 0;
}
.numero-valor {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(1.8rem, 6.6vw, 2.5rem);
  line-height: 1;
  color: var(--lima);
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.numero-sufixo { font-size: 0.5em; color: var(--texto-2); }
.numero-rotulo { margin-top: 10px; font-size: 14.5px; color: var(--texto); }
.numero-nota { margin-top: 6px; font-size: 12.5px; color: var(--texto-3); }

/* ---------- telas de amostra ---------- */
.tela { margin-bottom: 34px; }
.tela:last-child { margin-bottom: 0; }
.tela-legenda { margin-bottom: 14px; max-width: 720px; }
.tela-legenda h3 { font-size: 20px; }
.tela-legenda p { margin-top: 8px; color: var(--texto-2); font-size: 15px; }

.moldura {
  background: #0D1311;
  border: 1px solid var(--borda-forte);
  border-radius: 18px;
  overflow: hidden;
  min-width: 0;
}
.moldura-barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.02);
}
.selo-demo {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0B0F0F;
  background: var(--alerta);
  border-radius: 999px;
  padding: 4px 10px;
}
.moldura-corpo { display: grid; grid-template-columns: 1fr; min-width: 0; }
.mock-lateral { display: none; }
.mock-conteudo { padding: 14px; min-width: 0; }
.mock-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.mock-titulo { font-family: var(--titulo); font-weight: 600; font-size: 16px; }
.mock-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--lima);
  border: 1px solid var(--lima-fraca);
  background: rgba(182, 255, 0, 0.06);
  border-radius: 999px;
  padding: 4px 10px;
}
.mock-chip-fraca { color: var(--texto-3); border-color: var(--borda); background: transparent; }
.mock-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mock-filtro {
  font-size: 12px;
  color: var(--texto-2);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.mock-filtro-on { color: var(--texto); border-color: var(--borda-forte); background: rgba(255, 255, 255, 0.04); }
.mock-tabela { display: grid; gap: 6px; }
.mock-linha {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, auto);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  font-size: 13px;
  color: var(--texto-2);
  background: rgba(255, 255, 255, 0.015);
}
.mock-cabecalho {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-3);
  background: transparent;
  border-color: transparent;
  padding-bottom: 2px;
}
.mock-nome { color: var(--texto); font-weight: 500; }
.mock-pill {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 3px 9px;
  justify-self: start;
  white-space: nowrap;
}
.mock-pill-alta { color: var(--risco); border-color: rgba(255, 122, 107, 0.32); background: rgba(255, 122, 107, 0.08); }
.mock-pill-falta { color: var(--alerta); border-color: rgba(255, 194, 71, 0.28); }
.mock-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.mock-cartao {
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
}
.mock-cartao-rotulo { display: block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); }
.mock-cartao-numero { display: block; font-family: var(--titulo); font-weight: 700; font-size: 26px; color: var(--lima); line-height: 1.2; }
.mock-cartao-nota { display: block; font-size: 12px; color: var(--texto-3); }
.mock-duas { display: grid; grid-template-columns: 1fr; gap: 10px; }
.mock-painel { border: 1px solid var(--borda); border-radius: 12px; padding: 14px; min-width: 0; }
.mock-painel-titulo { display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); margin-bottom: 12px; }
.mock-barras { display: grid; gap: 10px; }
.mock-barra { display: grid; grid-template-columns: 62px minmax(0, 1fr) 42px; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); }
.mock-barra-trilha { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.mock-barra-valor { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(182, 255, 0, 0.45), var(--lima)); }
.mock-barra-num { text-align: right; font-size: 11px; color: var(--texto-3); }
.mono { font-family: var(--mono); }
.mock-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mock-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--texto-2); border-bottom: 1px dashed var(--borda); padding-bottom: 7px; min-width: 0; }
.mock-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.moldura-pe { padding: 12px 14px; border-top: 1px solid var(--borda); background: rgba(255, 255, 255, 0.02); }

/* ---------- planos ---------- */
.plano {
  background: linear-gradient(180deg, var(--superficie), var(--fundo-alt));
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plano-topo h3 { font-size: 21px; }
.plano-selo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0B0F0F;
  background: var(--lima);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.plano-selo:empty { display: none; }
.plano-preco { display: flex; align-items: baseline; gap: 5px; margin-top: 16px; }
.plano-moeda { font-size: 17px; color: var(--texto-2); }
.plano-valor { font-family: var(--titulo); font-weight: 700; font-size: clamp(2.3rem, 8vw, 2.9rem); line-height: 1; letter-spacing: -0.03em; }
.plano-periodo { font-size: 15px; color: var(--texto-2); }
.plano-resumo { margin-top: 12px; color: var(--texto-2); font-size: 15px; }
.plano-lista { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 11px; }
.plano-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--texto-2); }
.plano-lista img { flex: none; margin-top: 3px; width: 18px; height: 18px; }
.plano .botao { margin-top: auto; }

.planos-nota { margin-top: 20px; font-size: 14px; color: var(--texto-3); }
.planos-nota strong { color: var(--texto); }

.destaques { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
.destaque {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 24px;
  min-width: 0;
}
.destaque h3 { font-size: 19px; margin-top: 14px; }
.destaque p { margin-top: 10px; color: var(--texto-2); font-size: 15px; }
.destaque .botao { margin-top: 18px; }

/* ---------- perguntas ---------- */
.perguntas { display: grid; gap: 10px; }
.pergunta {
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  overflow: hidden;
}
.pergunta summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--texto);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta-seta { flex: none; width: 20px; height: 20px; transition: transform 0.25s ease; }
.pergunta[open] .pergunta-seta { transform: rotate(180deg); }
.pergunta[open] summary { border-bottom: 1px solid var(--borda); }
.pergunta p { padding: 16px 20px 20px; color: var(--texto-2); font-size: 15px; }

/* ---------- formulário ---------- */
.formulario {
  background: linear-gradient(180deg, var(--superficie), var(--fundo-alt));
  border: 1px solid var(--borda-forte);
  border-radius: 18px;
  padding: 26px 24px;
  display: grid;
  gap: 16px;
}
.campo { display: grid; gap: 7px; }
.campo label { font-size: 13.5px; color: var(--texto-2); }
.campo input, .campo select {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  padding: 12px 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--lima);
  box-shadow: 0 0 0 3px rgba(182, 255, 0, 0.14);
}
.campo select { appearance: none; background-image: none; }
.campo input::placeholder { color: var(--texto-3); }
.consentimento { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--texto-2); }
.consentimento input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--lima); }
.form-aviso {
  font-size: 14px;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 122, 107, 0.32);
  background: rgba(255, 122, 107, 0.08);
  color: #FFD9D3;
}
.form-rodape { font-size: 14px; color: var(--texto-3); text-align: center; }
.form-rodape a { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--lima); }

.retorno {
  border: 1px solid var(--lima-fraca);
  background: rgba(182, 255, 0, 0.05);
  border-radius: 18px;
  padding: 30px 24px;
  display: grid;
  gap: 14px;
  justify-items: start;
}
.retorno-erro { border-color: rgba(255, 122, 107, 0.32); background: rgba(255, 122, 107, 0.06); }
.retorno h3 { font-size: 22px; }
.retorno p { color: var(--texto-2); font-size: 15.5px; }

/* ---------- rodapé ---------- */
.rodape { padding: 44px 0 54px; background: #090D0C; }
.rodape-grade { display: grid; gap: 24px; }
.rodape-nome { font-family: var(--titulo); font-weight: 600; font-size: 17px; }
.rodape-assinatura { margin-top: 6px; color: var(--texto-3); font-size: 14px; }
.rodape-rotulo { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); }
.rodape-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  color: var(--texto);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid var(--lima);
  padding-bottom: 2px;
}
.rodape-aviso { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--borda); color: var(--texto-3); font-size: 13px; max-width: 78ch; }
.rodape-fim { margin-top: 12px; color: var(--texto-3); font-size: 13px; }

/* ---------- telas maiores ---------- */
@media (min-width: 600px) {
  .grade-dor, .grade-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-acoes { flex-direction: row; flex-wrap: wrap; }
  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo-larga, .consentimento, .form-aviso, .formulario .botao, .form-rodape { grid-column: 1 / -1; }
  .consentimento, .form-aviso { grid-column: 1 / -1; }
  .formulario .botao-larga, .form-rodape { grid-column: 1 / -1; }
  .destaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-grade { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

@media (min-width: 860px) {
  .topo-menu { display: flex; align-items: center; gap: 22px; }
  .secao { padding: 96px 0; }
  .hero { padding: 88px 0 76px; }
  .grade-dor, .grade-recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-recursos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .grade-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tela { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 2fr); gap: 26px; align-items: start; margin-bottom: 44px; }
  .mock-lateral { display: grid; align-content: start; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--borda); background: rgba(255, 255, 255, 0.015); }
  .moldura-corpo { grid-template-columns: 168px minmax(0, 1fr); }
  .mock-linha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, auto); font-size: 13px; }
  .mock-item { font-size: 13px; color: var(--texto-3); border-radius: 8px; padding: 8px 10px; }
  .mock-item.mock-ativo { color: var(--texto); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borda); }
  .hero-grade { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: 48px; }
}

@media (min-width: 1100px) {
  .grade-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* esconde a coluna extra da amostra em telas estreitas (já é o padrão abaixo de 860px) */
@media (max-width: 859px) {
  .mock-col-extra { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .bloco, .pergunta-seta, .topo { transition: none; }
}

/* ---------- ajustes de toque e quebra (13/09) ---------- */
/* o hífen do telefone deixava o número quebrar em duas linhas no celular */
.form-rodape a, .rodape-link { white-space: nowrap; }
/* alvo de toque de 44px no botão do topo */
.botao-mini { min-height: 44px; }
/* respiro abaixo do rodapé: a barra de gestos do celular não cobre o texto */
.rodape { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }