/* ============================================================
   SOS DIREITO — Reset e base tipográfica
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* Nada de overflow-x aqui: qualquer valor diferente de visible no html
     quebra o position: sticky do cabeçalho — inclusive `clip`. O corte da
     rolagem lateral é feito no elemento que a causa (ver .timeline em
     components.css), nunca na raiz. */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--peso-corpo);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
  color: var(--texto);
  background: var(--marfim);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

/* O atributo hidden é do agente de usuário e perde para qualquer
   `display` de autor — inclusive o `display: flex` dos nossos campos. */
[hidden] { display: none !important; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ---- Títulos ----
   O documento define dois papéis de fonte: "a tipografia do logo é a
   Roses Bolero" e "a fonte de corpo de texto do site (parágrafos, blog,
   FAQ) fica a critério do Pedro" — a Sweet Sans, escopada nominalmente ao
   texto corrido. Título de página não é corpo de texto: h1 e h2 usam a
   fonte da marca, como o documento propõe.

   h3, h4 e títulos de componente (card, etapa, post-card, accordion...)
   ficam em Sweet Sans por um motivo diferente, não estético: nesses
   tamanhos (14–22px) o traço capilar da Roses Bolero perde legibilidade
   real, não é sobre preferência de leitura, é sobre o desenho ficar
   pequeno demais pro traço sobreviver. */
h1, h2, h3, h4 {
  color: var(--principal);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--peso-display);
  letter-spacing: var(--ls-display);
}
h3, h4 {
  font-family: var(--font-body);
  font-weight: var(--peso-corpo);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-display); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Títulos de componente são pequenos por definição — mesmo quando a
   marcação usa h2 por hierarquia de documento (card de visto, card de
   post, etapa da timeline...), o papel deles é de rótulo de interface,
   não de título de página. Ficam em Sweet Sans sempre. */
.card__titulo, .etapa__titulo, .post-card__titulo, .contato-info__titulo,
.calc-form__titulo, .calc-secao__titulo, .estimativas__titulo,
.calc-tabela__titulo, .faixa h2, .faixa h3, .accordion__gatilho {
  font-family: var(--font-body);
  font-weight: var(--peso-corpo);
  letter-spacing: var(--ls-titulo);
}

/* Uso deliberado da fonte da marca fora de heading — a citação do Sobre,
   o numeral "26", frases isoladas do L-1A. Ver as páginas específicas. */
.em-display {
  font-family: var(--font-display);
  font-weight: var(--peso-display);
  letter-spacing: 0.002em;
}

p { text-wrap: pretty; }

/* O reset zerou todas as margens; parágrafos consecutivos precisam do
   respiro de volta. Qualquer .pilha ou componente sobrescreve isto. */
p + p { margin-top: var(--sp-5); }

/* ---- Links ---- */
a {
  color: var(--principal);
  text-decoration-color: color-mix(in srgb, var(--principal) 32%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-rapida) var(--ease-suave),
              text-decoration-color var(--dur-rapida) var(--ease-suave);
}
a:hover { color: var(--principal-900); text-decoration-color: currentColor; }

/* ---- Foco visível ---- */
:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-offset);
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Sobre fundo escuro o foco inverte, senão o vinho some */
.sobre-escuro :focus-visible,
.secao--apoio :focus-visible,
.secao--principal :focus-visible {
  outline-color: var(--marfim);
}

/* ---- Skip link ---- */
.pular-para-conteudo {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-5);
  background: var(--principal);
  color: var(--texto-inverso);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--peso-corpo);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-media) var(--ease-saida);
}
.pular-para-conteudo:focus {
  transform: translateY(0);
  color: var(--texto-inverso);
}

/* ---- Utilitários ---- */
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--peso-corpo);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--apoio);
  margin-bottom: var(--sp-4);
}
.secao--apoio .eyebrow,
.secao--principal .eyebrow { color: var(--texto-inverso-suave); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-media);
  color: var(--texto);
  max-width: var(--medida);
}

.texto-suave { color: var(--texto-suave); }
.medida      { max-width: var(--medida); }
.centro      { margin-inline: auto; }
.texto-centro{ text-align: center; }

/* ---- Seleção ---- */
::selection { background: var(--principal); color: var(--marfim); }

/* ---- Barra de rolagem (WebKit) ---- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--marfim-200); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--principal) 45%, var(--marfim-200));
  border-radius: var(--r-pill);
  border: 3px solid var(--marfim-200);
}
::-webkit-scrollbar-thumb:hover { background: var(--principal); }

/* ---- Respeito a movimento reduzido ----
   O JS já entrega o estado final; isto é a segunda camada de defesa. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { opacity: 1 !important; transform: none !important; }
}

/* ---- Impressão ---- */
@media print {
  .cabecalho, .rodape, .menu-movel, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}