/* Ajudaquí Imobiliária — portal das imobiliárias parceiras. Identidade da spec (seção 3): azul #01328F, amarelo #FDD303,
   fundo #EEF1F5, Nunito nos títulos, Inter no texto. Fontes servidas pelo próprio servidor (sem Google Fonts). */
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('/parceiros/fontes/nunito-latin-800-normal-5.3.0.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-display: swap; src: url('/parceiros/fontes/nunito-latin-900-normal-5.3.0.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/parceiros/fontes/inter-latin-opsz-normal-5.3.0.woff2') format('woff2'); }

:root {
  --azul: #01328f;
  --azul-2: #0a43b3;
  --azul-3: #0a4fc4;
  --azul-claro: #e8f0ff;
  --amarelo: #fdd303;
  --amarelo-claro: #fff8d1;
  --fundo: #eef1f5;
  --cartao: #fff;
  --linha: #dde3ea;
  --texto: #1d2733;
  --apoio: #6b7787;
  --verde: #2e9d3a;
  --verde-claro: #e7f6e9;
  --vermelho: #c0392b;
  --vermelho-claro: #fdecea;
  --ambar: #b07d00;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(16, 32, 64, 0.06), 0 6px 18px rgba(16, 32, 64, 0.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul-2); }
h1, h2, h3, .titulo { font-family: Nunito, Inter, sans-serif; letter-spacing: -0.2px; }
h1 { font-size: 24px; font-weight: 900; color: var(--azul); margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 800; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 800; color: var(--azul); margin: 0 0 10px; }
.apoio { color: var(--apoio); }
.pequeno { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.carregando-tela { min-height: 100vh; display: grid; place-items: center; color: #fff; background: var(--azul); font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; }
svg { width: 20px; height: 20px; flex: none; }
.foco:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--linha); background: #fff; color: var(--texto); font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s; white-space: nowrap; }
.btn:hover { box-shadow: var(--sombra); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primario:hover { background: var(--azul-2); }
.btn.destaque { background: var(--amarelo); border-color: var(--amarelo); color: var(--azul); font-weight: 800; }
.btn.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.vermelho { color: var(--vermelho); border-color: var(--vermelho); background: #fff; }
.btn.fantasma { border-color: transparent; background: transparent; color: var(--azul-2); }
.btn.pequeno { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn.largo { width: 100%; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- formulário ---------- */
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo > span { font-size: 12px; font-weight: 600; color: var(--apoio); }
.i { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #c9d2dd; border-radius: 10px; background: #fff; font-size: 15px; }
.i:focus { border-color: var(--azul-2); }
textarea.i { min-height: 84px; resize: vertical; }
.grade { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ocupa-2 { grid-column: span 2; }
.radios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.radio { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; cursor: pointer; min-height: 44px; }
.radio:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); font-weight: 600; }
.caixa-check { display: flex; gap: 10px; align-items: flex-start; }
.caixa-check input { width: 20px; height: 20px; margin-top: 2px; }
.erro-campo { color: var(--vermelho); font-size: 13px; }

/* ---------- entrada ---------- */
.entrada { min-height: 100vh; background: var(--azul); border-top: 6px solid var(--amarelo); padding: 40px 16px 32px; }
.entrada-caixa { max-width: 900px; margin: 0 auto; }
.entrada-topo { text-align: center; color: #dbe4ff; margin-bottom: 24px; }
.entrada-topo img { width: min(400px, 86vw); height: auto; display: block; margin: 0 auto 8px; }
.entrada-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.entrada-cartao { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 10px; }
.entrada-cartao h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.entrada-cartao p { margin: 0; color: var(--apoio); font-size: 13px; }
.entrada-rodape { color: #8fa3c8; text-align: center; font-size: 12px; margin-top: 18px; }
.cartao-unico { max-width: 460px; margin: 0 auto; }

/* ---------- casca ---------- */
.casca { display: flex; min-height: 100vh; }
.lado { width: 248px; flex: none; background: var(--azul); color: #e3eaff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20; }
.marca { padding: 16px 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.marca img { width: 100%; display: block; border-radius: 6px; }
.marca small { display: block; text-align: center; color: #8fa3c8; font-size: 11px; margin-top: 6px; }
.menu { padding: 10px 8px; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; color: #e3eaff; border-radius: 10px; cursor: pointer; font-weight: 500; min-height: 44px; }
.menu button:hover { background: var(--azul-2); color: #fff; }
.menu button[aria-current='page'] { background: var(--amarelo); color: var(--azul); font-weight: 800; }
.menu svg { width: 18px; height: 18px; flex: none; }
.quem { padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 12px; }
.quem b { color: #fff; display: block; font-size: 13px; }
.quem select, .quem button { margin-top: 8px; width: 100%; min-height: 36px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; cursor: pointer; }
.quem select option { color: var(--texto); }
.teste { color: #ffd98a; display: block; margin-top: 4px; }
.principal { flex: 1; min-width: 0; padding: 24px 28px 64px; }
.topo-celular { display: none; }
.cobertura { display: none; }

/* ---------- cartões, números, selos ---------- */
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; }
.cartao.destaque-azul { background: var(--azul-claro); border-color: #c7d6fb; }
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.numero { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.numero small { display: block; color: var(--apoio); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.numero b { display: block; font-family: Nunito, Inter, sans-serif; font-size: 22px; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; }
.numero span { font-size: 12px; color: var(--apoio); }
.positivo { color: var(--verde); }
.negativo { color: var(--vermelho); }
.ambar { color: var(--ambar); }
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.selo.claro { background: var(--fundo); color: var(--texto); border: 1px solid var(--linha); }
.selo.amarelo { background: var(--amarelo-claro); color: #6b5300; border: 1px solid #f1df7a; }
.selo.verde { background: var(--verde-claro); color: #1d6b27; border: 1px solid #bfe3c4; }
.selo.vermelho { background: var(--vermelho-claro); color: var(--vermelho); border: 1px solid #f3c3bd; }
.etiqueta-imob { display: inline-flex; gap: 6px; align-items: center; background: var(--amarelo-claro); color: var(--azul); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso { border-radius: var(--raio); padding: 12px 14px; margin-bottom: 12px; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; }
.aviso.azul { background: var(--azul-claro); border-color: #c7d6fb; }
.aviso.amarelo { background: #fff8e1; border-color: #f4dd8c; }
.aviso.vermelho { background: var(--vermelho-claro); border-color: #f3c3bd; }
.aviso.verde { background: var(--verde-claro); border-color: #bfe3c4; }
.vazio { text-align: center; color: var(--apoio); padding: 28px 12px; }

/* ---------- listas de pedidos ---------- */
.cabeca-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.filtros .i { width: auto; min-width: 180px; }
.abas-lista { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; overflow-x: auto; }
.abas-lista button, .abas button { border: 0; background: none; padding: 10px 14px; cursor: pointer; color: var(--apoio); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; min-height: 44px; }
.abas-lista button[aria-selected='true'], .abas button[aria-selected='true'] { color: var(--azul); border-bottom-color: var(--amarelo); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.cartao-pedido { display: flex; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; cursor: pointer; text-align: left; padding: 0; transition: box-shadow 0.15s, transform 0.15s; width: 100%; }
.cartao-pedido:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.bloco-data { background: var(--azul); color: #fff; width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Nunito, sans-serif; }
.bloco-data.vencido { background: var(--vermelho); }
.bloco-data b { font-size: 24px; font-weight: 900; line-height: 1; }
.bloco-data small { font-size: 10px; text-transform: uppercase; margin-top: 4px; }
.corpo-cartao { padding: 12px 14px; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.corpo-cartao .titulo-linha { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; }
.corpo-cartao .titulo-linha span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corpo-cartao .linha { color: var(--apoio); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corpo-cartao .rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--apoio); }
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.etapa-cont { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; cursor: pointer; min-height: 44px; }

/* ---------- pedido ---------- */
.voltar { margin-bottom: 12px; }
.cabeca-pedido { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; }
.cabeca-pedido .topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cabeca-pedido h1 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 22px; }
.origem { margin-top: 12px; background: var(--azul-claro); border: 1px solid #c7d6fb; border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.progresso { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-top: 14px; }
.progresso .seg { height: 6px; border-radius: 3px; background: #dfe5ee; }
.progresso .seg.feito { background: var(--azul); }
.progresso .seg.atual { background: var(--amarelo); }
.progresso-rotulos { display: flex; justify-content: space-between; font-size: 11px; color: var(--apoio); margin-top: 4px; }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; overflow-x: auto; scrollbar-width: thin; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pares { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; font-size: 13.5px; }
.pares dt { color: var(--apoio); }
.pares dd { margin: 0; overflow-wrap: anywhere; }
.acompanha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acompanha > div { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.acompanha small { display: block; color: var(--apoio); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 6px 0; }
.linha-tempo .bolinha { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.linha-tempo small { color: var(--apoio); display: block; }

/* tabela do orçamento */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th { color: var(--apoio); font-size: 12px; font-weight: 700; background: #f7f9fc; }
.tabela td.v, .tabela th.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tr.apagado td { color: #a4adba; text-decoration: line-through; }
.tabela tfoot td { font-weight: 800; }
.cartoes-itens { display: none; }
.cartao-item { border: 1px solid var(--linha); border-radius: 10px; padding: 12px; margin-bottom: 8px; background: #fff; }
.cartao-item .v { font-variant-numeric: tabular-nums; }
.barra-total, .reserva-barra { display: none; }
.preco { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.preco .i { width: 120px; min-height: 36px; padding: 6px 10px; text-align: right; }
.preco .forte { font-weight: 800; }
.materiais .linha-mat { display: grid; grid-template-columns: 1fr 90px 120px 36px; gap: 6px; margin-bottom: 6px; }

/* galerias */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.foto { position: relative; border-radius: 10px; overflow: hidden; background: #dfe5ee; aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: zoom-in; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .legenda { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); color: #fff; font-size: 11px; padding: 14px 6px 4px; text-align: left; }
.foto .tirar { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
.pdf { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--linha); color: var(--azul); font-weight: 700; cursor: pointer; aspect-ratio: 4 / 3; border-radius: 10px; }
.comodo { border: 1px solid var(--linha); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fff; }
.comodo .cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.estado-novo, .estado-bom { background: var(--verde); }
.estado-regular { background: #d8a200; }
.estado-ruim, .estado-danificado { background: var(--vermelho); }
.chat { max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.msg { max-width: 78%; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 8px 12px; }
.msg.minha { align-self: flex-end; background: var(--azul-claro); border-color: #c7d6fb; }
.msg.auto { align-self: center; background: #fff8e1; border-color: #f4dd8c; font-size: 13px; }
.msg small { display: block; color: var(--apoio); font-size: 11px; }

/* janelas */
.janela-fundo { position: fixed; inset: 0; background: rgba(10, 20, 40, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; animation: aparece 0.15s ease; }
.janela { background: #fff; border-radius: 16px; width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: sobe 0.18s ease; }
.janela.larga { width: min(880px, 100%); }
.janela header { background: var(--azul); color: #fff; padding: 14px 18px; border-bottom: 4px solid var(--amarelo); display: flex; justify-content: space-between; align-items: center; }
.janela header h2 { margin: 0; color: #fff; font-size: 17px; }
.janela header button { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; min-width: 44px; min-height: 44px; }
.janela .corpo { padding: 18px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.janela footer { padding: 12px 18px; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.texto-contrato { white-space: pre-wrap; background: #f7f9fc; border: 1px solid var(--linha); border-radius: 10px; padding: 12px; max-height: 260px; overflow: auto; font-size: 12.5px; }
.quadro-assinatura { width: 100%; height: 180px; border: 2px dashed #9fb0c8; border-radius: 10px; background: #fff; touch-action: none; display: block; }
.total-grande { font-family: Nunito, sans-serif; font-weight: 900; font-size: 26px; color: var(--azul); }
.foto-grande { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: 8px; }
.avisos { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; width: min(420px, calc(100vw - 32px)); }
.toast { background: #1c2836; color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--sombra); animation: sobe 0.18s ease; }
.toast.erro { background: var(--vermelho); }
@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- celular (≤ 860 px): gaveta, topo azul, grades em 1–2 colunas, orçamento em cartões ---------- */
@media (max-width: 860px) {
  .lado { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.3); }
  .casca.gaveta-aberta .lado { transform: none; }
  .casca.gaveta-aberta .cobertura { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 15; }
  .topo-celular { display: flex; position: sticky; top: 0; z-index: 10; align-items: center; gap: 10px; background: var(--azul); border-bottom: 4px solid var(--amarelo); padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .topo-celular img { height: 34px; border-radius: 4px; }
  .topo-celular button { background: none; border: 0; color: #fff; font-size: 24px; min-width: 44px; min-height: 44px; cursor: pointer; }
  .casca { flex-direction: column; }
  .principal { padding: 16px 12px 80px; }
  .numeros, .acompanha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g4, .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2, .duas-colunas, .entrada-grade { grid-template-columns: 1fr; }
  .ocupa-2 { grid-column: auto; }
  .radios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartoes { grid-template-columns: 1fr; }
  .pares { grid-template-columns: 1fr; gap: 0 0; }
  .pares dd { margin-bottom: 8px; }
  .tabela-orcamento { display: none; }
  .cartoes-itens { display: block; }
  .barra-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; background: var(--azul); color: #fff; border-top: 4px solid var(--amarelo); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18); }
  .barra-total-valor { display: flex; flex-direction: column; min-width: 0; }
  .barra-total-valor small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #cdd8f5; }
  .barra-total-valor b { font-family: Nunito, sans-serif; font-weight: 900; font-size: 20px; white-space: nowrap; }
  .barra-total .btn { min-height: 46px; flex: none; }
  .reserva-barra { display: block; height: calc(84px + env(safe-area-inset-bottom)); }
  .casca.gaveta-aberta .barra-total { display: none; }
  .esconde-celular { display: none; }
  .materiais .linha-mat { grid-template-columns: 1fr 70px 90px 36px; }
  .janela { max-height: calc(100vh - 16px); }
  .janela-fundo { padding: 8px; align-items: flex-end; }
  h1 { font-size: 21px; }
}
@media (max-width: 420px) {
  .numeros, .acompanha, .g3, .g4, .etapas, .radios { grid-template-columns: 1fr; }
}