/* Estrutura das páginas: cabeçalho, trilha, capas, blocos de conteúdo,
   tabelas de prazo, rodapé.

   O conteúdo deste site é sobretudo DATA e REGRA: "a opção vai até 30/09",
   "a DCTFWeb vence no último dia útil do mês seguinte". Então o CSS foi feito
   para dar hierarquia a data e a aviso, não a foto. Tabela e quadro de prazo
   são elementos de primeira classe aqui, não sobra. */

/* ===== CABEÇALHO ========================================================= */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--marinho);
  color: var(--papel);
  border-bottom: 3px solid var(--ouro-vivo);
}
.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
}

/* --- marca ---------------------------------------------------------------
   Selo com o "R" e a palavra RUIZ em caixa alta espaçada, como no material
   impresso dele. Quando ele mandar o arquivo da logo, troca-se o selo por
   <img> e o resto continua igual. */
.marca {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
  flex: none;              /* nunca encolhe: era isto que deixava o texto vazar */
  overflow: hidden;        /* e isto impede o vazamento voltar por outro caminho */
}
.marca__selo {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ouro-vivo);
  border-radius: 6px;
  font-family: var(--serifada);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ouro-claro);
  background: linear-gradient(150deg, rgba(201,162,39,0.22), rgba(201,162,39,0.04));
  line-height: 1;
  padding-bottom: 2px;
}
.marca__texto { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.marca__nome {
  font-family: var(--serifada);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.1;
  color: var(--papel);
}
.marca__sub {
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- ações e menu --------------------------------------------------------- */
.topo__acoes { display: flex; align-items: center; gap: 10px; flex: none; }
.topo__zap { display: none; min-height: 44px; padding: 10px 18px; font-size: 0.94rem; }

.topo__abrir {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 15px;
  border-radius: 8px;
  border: 1px solid rgba(232, 205, 131, 0.45);
  background: rgba(255,255,255,0.06);
  color: var(--papel);
  font: inherit; font-size: 0.94rem; font-weight: 600;
  cursor: pointer;
}
.topo__riscos { position: relative; width: 19px; height: 13px; flex: none; }
.topo__riscos, .topo__riscos::before, .topo__riscos::after {
  background-image: linear-gradient(var(--ouro-claro), var(--ouro-claro));
  background-repeat: no-repeat;
  background-size: 19px 2px;
  background-position: center;
}
.topo__riscos::before, .topo__riscos::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  transition: transform 0.18s ease;
}
.topo__riscos::before { top: 0; }
.topo__riscos::after { bottom: 0; }
[aria-expanded="true"] .topo__riscos { background-image: none; }
[aria-expanded="true"] .topo__riscos::before { transform: translateY(5.5px) rotate(45deg); }
[aria-expanded="true"] .topo__riscos::after { transform: translateY(-5.5px) rotate(-45deg); }

.topo__painel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--marinho);
  border-top: 1px solid rgba(232,205,131,0.25);
  box-shadow: 0 18px 32px rgba(6, 14, 34, 0.5);
  padding: 12px 20px 18px;
}
/* Sem JavaScript o painel fica aberto: lista inteira é melhor que botão morto. */
.tem-js .topo__painel { display: none; }
.tem-js .topo__painel--aberto { display: block; }

.topo__menu { display: flex; flex-direction: column; gap: 2px; }
.topo__menu a {
  display: flex; align-items: center;
  min-height: 50px; padding: 8px 12px;
  border-radius: 8px;
  color: var(--papel);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topo__menu a:last-child { border-bottom: 0; }
.topo__menu a:hover { background: rgba(255,255,255,0.09); color: var(--papel); }
.topo__menu a[aria-current="page"] { color: var(--ouro-claro); font-weight: 700; }
.topo__zap-painel { display: flex; width: 100%; margin-top: 12px; }

@media (min-width: 1180px) {
  .topo__abrir { display: none; }
  .topo__zap { display: inline-flex; }
  .topo__painel, .tem-js .topo__painel {
    display: block; position: static;
    padding: 0; background: none; border: 0; box-shadow: none;
    order: 2; margin-left: auto;
  }
  .topo__acoes { order: 3; }
  .topo__menu { flex-direction: row; gap: 2px; }
  .topo__menu a {
    min-height: 38px; padding: 7px 11px;
    border-bottom: 0; border-radius: 6px;
    font-size: 0.9rem;
    /* Sem isto o flex quebra "Trocar de contador" e "Agenda fiscal 2026" em
       duas linhas e o cabeçalho ganha 25px de altura à toa. */
    white-space: nowrap;
  }
  .topo__menu a[aria-current="page"] { background: rgba(232,205,131,0.14); }
  .topo__zap-painel { display: none; }
  .marca__selo { width: 46px; height: 46px; font-size: 1.62rem; }
  .marca__nome { font-size: 1.44rem; }
  .marca__sub { font-size: 0.64rem; }
}
body.menu-aberto { overflow: hidden; }
@media (min-width: 1180px) { body.menu-aberto { overflow: auto; } }

/* ===== TRILHA ============================================================ */
.migalhas-faixa { background: var(--marinho-2); }
.migalhas {
  display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center;
  padding-top: 9px; padding-bottom: 9px;
  font-size: 0.86rem;
  color: #c3cfe6;
}
.migalhas a { color: var(--ouro-claro); text-decoration: none; }
.migalhas a:hover { text-decoration: underline; color: var(--ouro-claro); }
.migalhas__seta { color: rgba(255,255,255,0.35); }
.migalhas > span:not(.migalhas__seta) { color: var(--papel); font-weight: 600; }

/* ===== CAPA DAS INTERNAS ================================================= */
.capa {
  background: var(--marinho);
  color: #e6ecf8;
  padding: clamp(38px, 6vw, 66px) 0 clamp(34px, 5vw, 58px);
  position: relative;
  overflow: hidden;
}
/* Filete dourado fino no rodapé da capa: o detalhe da marca dele, sem virar
   moldura dourada em volta de tudo. */
.capa::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--ouro-vivo), rgba(201,162,39,0.15));
}
.capa h1 { color: var(--papel); max-width: 20ch; }
.capa .sobrelinha { color: var(--ouro-claro); }
.capa__resumo {
  font-size: clamp(1.05rem, 2.3vw, 1.24rem);
  color: #c8d4ea;
  max-width: 58ch;
  margin-bottom: 1.5em;
}
.capa .linha-botoes { margin-top: 4px; }

/* --- capa com a cidade atrás --------------------------------------------
   A foto é de Maringá de verdade, com a catedral. O véu não é um retângulo
   preto por cima: é um degradê que fecha à esquerda, onde fica o texto, e
   abre à direita, onde a cidade aparece. Assim o título tem contraste e a
   foto continua sendo vista. */
.capa--foto { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(44px, 7vw, 88px); }
.capa__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.capa__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.capa--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(15,25,50,0.96) 0%, rgba(17,30,60,0.9) 42%,
                            rgba(19,33,66,0.72) 72%, rgba(22,38,74,0.62) 100%),
    linear-gradient(180deg, rgba(12,21,44,0.55) 0%, rgba(12,21,44,0) 35%);
}
.capa--foto > .container { position: relative; z-index: 2; }
.capa--foto::after { z-index: 3; }
@media (max-width: 700px) {
  /* No celular a coluna de texto ocupa a largura toda: o degradê lateral não
     resolve, então o véu fecha por igual. */
  .capa--foto::before {
    background: linear-gradient(180deg, rgba(13,23,47,0.9), rgba(17,29,58,0.94));
  }
}

/* ===== BLOCOS DE CONTEÚDO =============================================== */
.duas { display: grid; gap: clamp(24px, 4vw, 44px); }
.duas > * { min-width: 0; }
@media (min-width: 900px) { .duas { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
@media (min-width: 900px) { .duas--igual { grid-template-columns: 1fr 1fr; } }

.prosa { max-width: 68ch; }
.prosa h3 { margin-top: 1.6em; }
.prosa ul, .prosa ol { padding-left: 1.25em; }
.prosa li { margin-bottom: 0.5em; }

/* --- listas com marca ---------------------------------------------------- */
.checks { list-style: none; padding: 0; margin: 0 0 1.4em; }
.checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  line-height: 1.55;
}
.checks li::before {
  content: "";
  position: absolute; left: 2px; top: 0.55em;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--ouro); border-bottom: 2.5px solid var(--ouro);
  transform: rotate(-45deg);
}
.secao--marinho .checks li::before { border-color: var(--ouro-claro); }

/* --- passo a passo ------------------------------------------------------- */
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 0; }
.passos li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 24px 58px;
  border-left: 2px solid var(--borda);
  margin-left: 17px;
}
.passos li:last-child { border-left-color: transparent; padding-bottom: 0; }
.passos li::before {
  content: counter(passo);
  position: absolute; left: -18px; top: -2px;
  width: 35px; height: 35px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marinho);
  color: var(--ouro-claro);
  font-family: var(--serifada);
  font-weight: 700;
  font-size: 1.05rem;
}
.passos h3 { margin-bottom: 0.3em; font-size: 1.15rem; }
.passos p { margin-bottom: 0; }
.secao--marinho .passos li { border-left-color: rgba(255,255,255,0.18); }
.secao--marinho .passos li::before { background: var(--ouro-vivo); color: #2a1f05; }

/* --- quadro e alerta ----------------------------------------------------- */
.quadro {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--ouro-vivo);
  border-radius: var(--raio);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--sombra);
  margin: 0 0 1.6em;
}
.quadro h3 { margin-bottom: 0.5em; }
.quadro > :last-child { margin-bottom: 0; }
.secao--creme .quadro { background: var(--papel); }
.secao--marinho .quadro {
  background: rgba(255,255,255,0.06);
  border-color: rgba(232,205,131,0.3);
  border-left-color: var(--ouro-vivo);
  color: #dfe7f6;
}
.secao--marinho .quadro h3 { color: var(--papel); }

.alerta {
  background: #fdf6ec;
  border: 1px solid #ecd9b4;
  border-left: 4px solid var(--alerta);
  border-radius: var(--raio);
  padding: 16px 20px;
  margin: 0 0 1.6em;
}
.alerta > :last-child { margin-bottom: 0; }
.alerta strong { color: var(--alerta); }

/* --- prazos -------------------------------------------------------------- */
.prazo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--borda);
  margin: 0;
}
.prazo:last-of-type { border-bottom: 0; }
.prazo b {
  font-family: var(--serifada);
  font-size: 1.14rem;
  color: var(--marinho);
  min-width: 148px;
}
.prazo span { color: var(--tinta-2); flex: 1 1 240px; }
.secao--marinho .prazo { border-bottom-color: rgba(255,255,255,0.15); }
.secao--marinho .prazo b { color: var(--ouro-claro); }
.secao--marinho .prazo span { color: #c8d4ea; }

/* --- tabela --------------------------------------------------------------
   No celular vira lista empilhada. Esconder coluna seria pior: cada coluna
   aqui é um prazo, e é justamente o prazo que a pessoa veio ver. */
.tabela-rolagem { overflow-x: auto; margin: 0 0 1.6em; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.tabela th, .tabela td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela thead th {
  background: var(--marinho);
  color: var(--papel);
  font-family: var(--texto);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 0;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:nth-child(even) { background: var(--papel-2); }
.tabela td:first-child { font-weight: 600; color: var(--marinho); white-space: nowrap; }

@media (max-width: 700px) {
  .tabela, .tabela thead, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
  .tabela thead { display: none; }
  .tabela tr {
    border-bottom: 1px solid var(--borda);
    padding: 12px 4px;
  }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td { border: 0; padding: 3px 12px; }
  .tabela td::before {
    content: attr(data-rotulo) " ";
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-2);
    font-weight: 600;
  }
  .tabela td:first-child { font-size: 1.08rem; padding-top: 6px; white-space: normal; }
}

/* --- cartões ------------------------------------------------------------- */
.cartoes { display: grid; gap: 18px; }
@media (min-width: 620px) { .cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cartoes--3 { grid-template-columns: repeat(3, 1fr); } }
.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 22px 22px 18px;
  box-shadow: var(--sombra);
}
.cartao > :last-child { margin-bottom: 0; }
.cartao h3 { font-size: 1.16rem; margin-bottom: 0.4em; }
a.cartao {
  text-decoration: none; color: inherit; display: block;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
a.cartao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
  border-color: var(--ouro-vivo);
  color: inherit;
}
a.cartao .cartao__ver { color: var(--marinho-3); font-weight: 600; display: inline-block; margin-top: 0.4em; }
.secao--marinho .cartao {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: #dfe7f6;
}
.secao--marinho .cartao h3 { color: var(--papel); }

/* ===== DÚVIDAS =========================================================== */
.duvidas { max-width: 80ch; }
.duvida {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-bottom: 9px;
  box-shadow: var(--sombra);
}
.duvida summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 13px 18px;
  font-weight: 600;
  color: var(--marinho);
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--ouro); border-bottom: 2.5px solid var(--ouro);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.duvida[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.duvida__corpo { padding: 0 18px 16px; }
.duvida__corpo > :last-child { margin-bottom: 0; }

/* ===== CHAMADA FINAL ===================================================== */
.chamada {
  background: var(--marinho);
  color: #dbe4f5;
  padding: clamp(44px, 7vw, 78px) 0;
  border-top: 3px solid var(--ouro-vivo);
}
.chamada h2 { color: var(--papel); }
.chamada p { max-width: 58ch; }
.chamada__assinatura {
  margin-top: 1.8em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(255,255,255,0.16);
  font-size: 0.95rem;
  color: #aebbd6;
}
.chamada__assinatura strong { color: var(--ouro-claro); }

/* ===== NOTA LEGAL DATADA =================================================
   Vai no fim de toda página de serviço. A legislação de 2026 está em
   transição e três datas desta pesquisa já mudaram uma vez no ano: a nota
   protege o registro do contador e avisa o leitor. */
.nota-legal {
  background: var(--papel-2);
  border-top: 1px solid var(--borda);
  padding: 22px 0;
  font-size: 0.9rem;
  color: var(--tinta-2);
}
.nota-legal p { max-width: 78ch; margin-bottom: 0; }

/* ===== RODAPÉ ============================================================ */
.rodape { background: var(--marinho); color: #b9c6e0; padding-top: clamp(40px, 6vw, 64px); }
.rodape__grade { display: grid; gap: 30px; padding-bottom: 34px; }
@media (min-width: 700px) { .rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .rodape__grade { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.rodape__grade > * { min-width: 0; }

.rodape__nome {
  font-family: var(--serifada);
  font-size: 1.6rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--papel); margin-bottom: 0.1em;
}
.rodape__sub {
  font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ouro-claro); margin-bottom: 1.3em;
}
.rodape__crc { color: var(--papel); font-weight: 600; margin-bottom: 1em; }
.rodape__crc span { color: var(--ouro-claro); font-weight: 500; font-size: 0.94rem; }
.rodape__lema { font-style: italic; color: #93a3c4; }

.rodape__titulo {
  color: var(--papel); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1em;
}
.rodape__lista { list-style: none; padding: 0; margin: 0; }
.rodape__lista li { margin-bottom: 9px; line-height: 1.4; }
.rodape a { color: #cbd6ec; text-decoration: none; }
.rodape a:hover { color: var(--ouro-claro); text-decoration: underline; }
.rodape__lista--contato li { margin-bottom: 11px; }
.rodape__endereco { font-style: normal; margin-top: 1.2em; line-height: 1.6; }

.rodape__legal {
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 0;
  font-size: 0.92rem;
}
.rodape__legal p { margin-bottom: 0.3em; color: #cbd6ec; }
.rodape__legal strong { color: var(--papel); }
.rodape__legal-nota { color: #8fa0c2; font-size: 0.86rem; }

.rodape__pe {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  justify-content: space-between;
  padding-top: 16px; padding-bottom: 18px;
  font-size: 0.88rem;
  color: #8fa0c2;
}
.rodape__pe p { margin: 0; }

/* ===== BARRA FIXA DE WHATSAPP ===========================================
   Escrita, não iconezinho. Some no desktop, onde o botão do topo dá conta. */
.barra-zap {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--borda);
}
body { padding-bottom: 80px; }
@media (min-width: 1180px) {
  .barra-zap { display: none; }
  body { padding-bottom: 0; }
}

/* ===== HOME ==============================================================
   A capa da home carrega o registro do contador logo abaixo do botão: é a
   informação que separa a RUIZ dos onze escritórios da praça que não mostram
   CRC nenhum, então ela não pode ficar no rodapé. */
.capa__registro {
  margin-top: 1.6em;
  padding-top: 1.1em;
  border-top: 1px solid rgba(232, 205, 131, 0.3);
  font-size: 0.98rem;
  color: #c8d4ea;
}
.capa__registro strong { color: var(--ouro-claro); font-weight: 600; }

/* --- faixa de prazo -------------------------------------------------------
   O CFC barra promoção e desconto. Prazo legal correndo é o motivo honesto de
   agir agora, e este bloco existe para ser trocado quando a data virar. */
.faixa-prazo {
  background: var(--papel-2);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  padding: clamp(26px, 4vw, 40px) 0;
}
.faixa-prazo__interno { display: grid; gap: 20px; align-items: start; }
@media (min-width: 760px) { .faixa-prazo__interno { grid-template-columns: 158px 1fr; gap: 30px; } }
.faixa-prazo__data {
  margin: 0;
  text-align: center;
  background: var(--marinho);
  color: var(--papel);
  border-radius: var(--raio);
  border: 1px solid var(--ouro-vivo);
  padding: 14px 12px;
  line-height: 1.1;
}
.faixa-prazo__data b {
  display: block;
  font-family: var(--serifada);
  font-size: 2.1rem;
  color: var(--ouro-claro);
}
.faixa-prazo__data span {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #c8d4ea;
}
.faixa-prazo__titulo { font-size: clamp(1.3rem, 2.8vw, 1.75rem); margin-bottom: 0.4em; }
.faixa-prazo p { max-width: 70ch; }

/* --- cartão do responsável técnico ---------------------------------------- */
.cartao-registro {
  background: var(--marinho);
  color: #d3ddf0;
  border-radius: var(--raio);
  border-top: 4px solid var(--ouro-vivo);
  padding: 26px 26px 22px;
  box-shadow: var(--sombra-2);
}
.cartao-registro hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin: 18px 0;
}
.cartao-registro__rotulo {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  margin-bottom: 0.4em;
}
.cartao-registro__nome {
  font-family: var(--serifada);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--papel);
  margin-bottom: 0.15em;
}
.cartao-registro__crc { color: var(--ouro-claro); font-weight: 600; margin-bottom: 0; }
.cartao-registro__linha { margin-bottom: 0.25em; }
.cartao-registro a { color: var(--papel); font-weight: 600; }
.cartao-registro a:hover { color: var(--ouro-claro); }

.quadro__nota {
  font-size: 0.9rem;
  color: var(--tinta-2);
  border-top: 1px solid var(--borda);
  padding-top: 0.9em;
  margin-top: 0.4em;
}

.mapa {
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
}
.mapa iframe { display: block; width: 100%; height: clamp(300px, 46vw, 440px); border: 0; }

.btn--grande { font-size: 1.08rem; padding: 17px 32px; min-height: 58px; }

/* --- links lado a lado (páginas irmãs, 404) ------------------------------- */
.links-lado { display: flex; flex-wrap: wrap; gap: 10px; }
.links-lado a {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--papel);
  text-decoration: none;
  font-weight: 600;
  color: var(--marinho);
  min-height: 48px;
  line-height: 24px;
}
.links-lado a:hover { border-color: var(--ouro-vivo); background: var(--papel-2); color: var(--marinho); }

/* --- cartões de contato --------------------------------------------------- */
.cartao__rotulo {
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--tinta-2); font-weight: 600; margin-bottom: 0.35em;
}
.cartao__valor {
  font-family: var(--serifada); font-size: 1.42rem; font-weight: 700;
  color: var(--marinho); margin-bottom: 0.25em;
}
.cartao__valor--menor { font-size: 1.02rem; word-break: break-word; }
.cartao--zap { border-left: 4px solid var(--zap); }

.prosa__nota { color: var(--tinta-2); font-size: 0.92rem; margin-top: 2.4em; }

/* ===== Teste das seis perguntas =========================================
   O visitante responde sobre a PRÓPRIA empresa e vê o resultado na hora.
   Nada é enviado nem guardado: a conta acontece no aparelho dele. Isso
   importa por dois motivos: é a autoqualificação que o site precisa (quem
   marca vários "não" chega no WhatsApp já sabendo por que veio) e não cria
   obrigação de LGPD para um formulário que não coleta nada. */
.teste { margin: 0 0 1.6em; }
.teste__lista { list-style: none; counter-reset: q; padding: 0; margin: 0; }
.teste__item {
  counter-increment: q;
  display: grid;
  gap: 10px;
  padding: 15px 0;
  border-bottom: 1px solid var(--borda);
}
@media (min-width: 640px) {
  .teste__item { grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
}
.teste__item:last-child { border-bottom: 0; }
.teste__pergunta { margin: 0; line-height: 1.5; }
.teste__pergunta::before {
  content: counter(q);
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--papel-2);
  border: 1px solid var(--borda-forte);
  color: var(--tinta-2);
  font-size: 0.78rem;
  font-weight: 700;
  vertical-align: 2px;
}

.teste__opcoes { display: flex; gap: 8px; flex: none; }
.teste__op {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 46px;
  padding: 8px 16px;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  background: var(--papel);
  font-weight: 600;
  color: var(--tinta-2);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
/* O rádio cobre o rótulo inteiro: não existe zona morta entre a bolinha e a
   palavra, que é onde o dedo costuma cair. */
.teste__op input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.teste__op:hover { border-color: var(--marinho-3); }
.teste__op:has(input:focus-visible) { outline: 3px solid var(--ouro-vivo); outline-offset: 2px; }
.teste__op:has(input:checked) {
  background: var(--marinho);
  border-color: var(--marinho);
  color: var(--papel);
}
.teste__aviso { margin: 14px 0 0; font-size: 0.92rem; color: var(--tinta-2); }

.teste__saida {
  border-radius: var(--raio);
  padding: 22px 24px;
  margin: 0 0 1.5em;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--ouro-vivo);
  background: var(--papel-2);
}
.teste__saida h3 { margin-bottom: 0.4em; }
.teste__saida > :last-child { margin-bottom: 0; }
.teste__saida--alerta { border-left-color: var(--alerta); background: #fdf6ec; }
.teste__saida--ok { border-left-color: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .teste__saida { animation: sobe 0.4s cubic-bezier(0.16,1,0.3,1) backwards; }
}
.teste__nota {
  font-size: 0.85rem;
  color: var(--tinta-2);
  margin: 1em 0 0;
  padding-top: 0.9em;
  border-top: 1px solid var(--borda);
}

/* Classes que existiam no HTML sem estilo: o bloco da marca no rodapé e o
   rótulo do botão Menu. Sem regra própria elas não quebravam nada, mas
   classe órfã é classe que ninguém sabe se pode remover. */
.rodape__marca { max-width: 34ch; }
.topo__abrir-texto { line-height: 1; }