/* ==========================================================================
   MUNDO SEGURO — Reset, tipografia base e utilitários
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

@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;
  }
}

body {
  font-family: var(--font);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-prose);
  color: var(--text-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* <picture> é só um invólucro de formatos: não deve criar caixa própria,
   senão vira item de grid/flex e desloca o layout. Com display:contents o
   <source> passa a ser filho direto do grid, então precisa ser zerado também. */
picture { display: contents; }
source { display: none; }

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

button { cursor: pointer; background: none; border: none; padding: 0; }

/* Azul da marca como cor de link em todo o site. O tom escuro (--c-blue-text)
   ficou reservado ao hover. */
a {
  color: var(--c-blue);
  text-decoration: none;
  transition: color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
a:hover { text-decoration: underline; }

/* O escurecimento no hover só vale para link SEM classe — ou seja, link de
   texto corrido. Um `a:hover { color: … }` genérico venceria, por
   especificidade, a cor de qualquer componente que seja um <a> com uma classe
   só (o .btn, por exemplo), e os botões mudariam de cor ao passar o mouse. */
a:hover:not([class]) { color: var(--c-blue-text); }

/* Título em 600, não em 700: o 700 do Barlow em corpo grande vira um bloco
   maciço. O 600 mantém a hierarquia — o que separa título de texto é o
   tamanho, não a gordura da letra. */
h1, h2, h3, h4 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-titulo);
  color: var(--text-strong);
  text-wrap: balance;
}

h1 { font-size: var(--fs-32); }
h2 { font-size: var(--fs-32); }
h3 { font-size: var(--fs-24); }
h4 { font-size: var(--fs-20); }

/* O <strong> do navegador é 700. Dentro de um parágrafo em 400 isso é um
   salto de três degraus e a frase fica manchada; 600 destaca sem gritar. */
strong, b { font-weight: var(--fw-semibold); }

p { text-wrap: pretty; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---------- Foco visível (acessibilidade) ---------- */
:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Utilitários ---------- */

/* --container é a largura do CONTEÚDO; o gutter fica por fora, para que a
   coluna de texto bata com o Figma (1073px) em telas de 1440px. */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

/* Espaçamento vertical padrão das seções.
   Reduzido em 29/09/2026 (era 64→96): com os títulos menores, a folga antiga
   deixava buracos entre as seções em vez de separá-las. */
.section { padding-block: clamp(var(--sp-12), 6vw, var(--sp-20)); }
.section--tight { padding-block: clamp(var(--sp-10), 5vw, var(--sp-14)); }

/* Título de seção + link "ver todas" na mesma linha */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.section-title { max-width: 480px; }

/* Só para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Revelação ao rolar ----------
   Ativada por JS (ui.js) adicionando data-revealed. O estado inicial só é
   aplicado quando o JS confirma suporte, senão o conteúdo ficaria invisível
   com JS desligado. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

html[data-reveal-ready] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

html[data-reveal-ready] [data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-reveal-ready] [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Estado inicial dos elementos animados por motion.js ----------
   Só vale enquanto html[data-motion] existir. O módulo aplica os próprios
   estilos inline assim que roda e remove o atributo; se ele não carregar,
   o script do <head> remove por timeout e nada fica invisível. */
html[data-motion] .hero__eyebrow,
html[data-motion] .hero__title,
html[data-motion] .hero__lead,
html[data-motion] .hero__actions .btn,
html[data-motion] .section-title,
html[data-motion] .fazemos-passo,
html[data-motion] .card-banner,
html[data-motion] .card-seguro,
html[data-motion] .card-post,
html[data-motion] .card-carga {
  opacity: 0;
}

/* Link "pular para o conteúdo" */
.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-4);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-blue);
  color: var(--c-navy);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-btn);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); text-decoration: none; }

/* Link com seta, estilo "faça sua cotação >" */
/* Sem `white-space: nowrap`: um rótulo longo num celular estreito vazava da
   tela (aconteceu em /seguros/rc-v). A seta não fica órfã mesmo assim — ela é
   um item do flex ao lado do texto inteiro, nunca sozinha numa linha. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-blue);
}
.link-arrow {
  transition: color var(--dur) var(--ease);
}
.link-arrow::after {
  content: '›';
  font-size: 1.25em;
  line-height: 1;
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover { color: var(--c-blue-text); text-decoration: none; }
.link-arrow:hover::after { transform: translateX(3px); }