/* RUIZ Contabilidade, Auditoria e Perícia — base do site.

   Três decisões guiam este CSS:

   1) A paleta é a da marca dele, tirada do material impresso que ele mandou:
      azul-marinho profundo e dourado metálico. Não é tema genérico de
      "escritório contábil" — é a identidade que ele já usa no cartão e no
      Instagram, para o site não parecer de outra empresa.

   2) O dourado é ACENTO, nunca fundo de texto. Dourado sobre branco não passa
      em contraste; texto dourado só aparece sobre o marinho, e mesmo assim
      no tom claro. Regra que vale para o site inteiro.

   3) Quem lê é dono de empresa consultando no celular entre uma coisa e
      outra: corpo de 18px, linha generosa, alvo de toque de 48px, e nada de
      cinza-claro sobre branco. Número é o conteúdo principal deste site
      (prazo, alíquota, data) e número precisa de contraste. */

:root {
  /* marca */
  --marinho: #16264a;
  --marinho-2: #1e3565;
  --marinho-3: #2b4681;
  --ouro: #b8892b;          /* sobre claro: passa em contraste */
  --ouro-vivo: #c9a227;     /* filetes, bordas, detalhe */
  --ouro-claro: #e8cd83;    /* texto dourado, só sobre marinho */

  /* neutros */
  --papel: #ffffff;
  --papel-2: #f7f5ef;
  --creme: #faf8f2;
  --tinta: #161d2b;
  --tinta-2: #4a5568;
  --borda: #e2ddd0;
  --borda-forte: #cfc7b3;

  /* apoio */
  --zap: #25d366;
  --zap-escuro: #128c3e;
  --alerta: #a8391f;
  --ok: #2f7a4d;

  --serifada: "Source Serif 4", Georgia, "Times New Roman", serif;
  --texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --largura: 1160px;
  --estreita: 780px;
  --raio: 12px;
  --sombra: 0 2px 10px rgba(22, 38, 74, 0.07);
  --sombra-2: 0 10px 34px rgba(22, 38, 74, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

h1, h2, h3, h4 {
  font-family: var(--serifada);
  color: var(--marinho);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 600; }
h4 { font-size: 1.08rem; font-weight: 600; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
a { color: var(--marinho-3); }
a:hover { color: var(--marinho); }
strong, b { font-weight: 600; }
img, svg, video { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--ouro-vivo); outline-offset: 2px; border-radius: 4px; }

/* Tabular figures onde o número precisa alinhar em coluna (prazos, valores).
   Fora daí, o número proporcional lê melhor no meio da frase. */
.numero, table, .ficha dd, .prazo { font-variant-numeric: tabular-nums; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.container--estreita { max-width: var(--estreita); }

.secao { padding: clamp(48px, 7vw, 88px) 0; }
.secao--creme { background: var(--creme); }
.secao--papel2 { background: var(--papel-2); }
.secao--marinho { background: var(--marinho); color: #e8edf7; }
.secao--marinho h2, .secao--marinho h3 { color: var(--papel); }

/* --- sobrelinha: rótulo pequeno acima do título -------------------------
   Sem fio, sem tracinho, sem numeração decorativa. Só o rótulo. */
.sobrelinha {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 0.7em;
}
.secao--marinho .sobrelinha { color: var(--ouro-claro); }

.linha-fina {
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  color: var(--tinta-2);
  max-width: 62ch;
}
.secao--marinho .linha-fina { color: #c3cfe6; }

/* --- botões -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--texto);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn--zap { background: var(--zap); border-color: var(--zap); color: #08331a; }
.btn--zap:hover { background: #1fbb5b; color: #08331a; }

.btn--marinho { background: var(--marinho); border-color: var(--marinho); color: var(--papel); }
.btn--marinho:hover { background: var(--marinho-2); color: var(--papel); }

.btn--ouro { background: var(--ouro-vivo); border-color: var(--ouro-vivo); color: #2a1f05; }
.btn--ouro:hover { background: var(--ouro-claro); color: #2a1f05; }

.btn--contorno {
  background: transparent;
  border-color: var(--borda-forte);
  color: var(--marinho);
}
.btn--contorno:hover { border-color: var(--marinho); background: var(--papel-2); }

/* Contorno sobre fundo escuro. O botão herdava o azul do texto e sumia dentro
   da capa azul: virava uma caixa vazia. Todo fundo marinho do site precisa
   estar nesta lista. */
.secao--marinho .btn--contorno,
.capa .btn--contorno,
.chamada .btn--contorno {
  border-color: rgba(232, 205, 131, 0.55);
  color: var(--ouro-claro);
}
.secao--marinho .btn--contorno:hover,
.capa .btn--contorno:hover,
.chamada .btn--contorno:hover {
  border-color: var(--ouro-claro);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ouro-claro);
}

.btn--largo { width: 100%; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- utilidades ---------------------------------------------------------- */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ouro-vivo);
  color: #2a1f05;
  padding: 12px 20px;
  font-weight: 600;
  z-index: 200;
}
.pular:focus { left: 0; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }