/* ═══════════════════════════════════════════════════════════════════════
   RITA DA COSTA CONSULTORIA DE SEGUROS
   Folha de estilo única — mobile-first, sem build.

   Sumário
   00. Fontes
   01. Tokens
   02. Reset
   03. Utilitários
   04. Tipografia de seção
   05. Botões
   06. Cabeçalho e navegação
   07. Hero
   08. Faixa de credenciais
   09. Seções
   10. Cartões
   11. Passos
   12. Sobre
   13. Contato
   14. Rodapé
   15. WhatsApp flutuante
   16. Responsivo
   17. Movimento reduzido / impressão
   18. Blog
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 00. Fontes ───────────────────────────────────────────────────────────
   Servidas do próprio domínio. A decisão de não chamar o Google Fonts continua
   valendo: zero requisição a terceiros, zero latência de fora, nada de LGPD.
   Spectral e Cinzel são SIL Open Font License 1.1 — uso comercial, modificação
   e embutir em site estão liberados. Só o subconjunto latin é carregado, que é
   o que o português precisa: 61 KB nas três faces.

   Três papéis, e cada letra faz um só:
   · Spectral  — serifada de texto, ligeiramente estreita, com itálico de
                 verdade. Segura título longo em português sem esticar a linha.
   · Cinzel    — a capitular do logotipo. É romana de inscrição: não tem
                 minúscula, só versalete. Serve para cadeia curta em caixa
                 alta (nome, número de registro) e arruinaria um título de
                 quatro linhas.
   · Sistema   — corpo de texto. Renderiza na hora, sem download e sem
                 depender de rede para a página ser legível. */
@font-face {
  font-family: "Spectral";
  src: url("../fontes/spectral-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fontes/spectral-600-italico.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fontes/cinzel-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ── 01. Tokens ───────────────────────────────────────────────────────── */
:root {
  /* Marca — amostradas no arquivo oficial do logotipo, não estimadas:
     lettering "RITA" #0A1D3B · escudo #05264C · "COSTA" #0D3627 ·
     escudo verde #1D5E2E · hélice vinho #6C0705.
     Contraste sobre --superficie, medido: azul 13.8:1 · verde 8.7:1 ·
     vinho 10.5:1 — os tres em AAA. */
  --azul: #12294F;
  --azul-claro: #2A4A85;
  --azul-escuro: #0A1D3B;
  --verde: #14532D;
  --verde-claro: #1E6B3C;
  --vinho: #7A1016;

  /* Superfícies e texto */
  --superficie: #FAFAF8;
  --superficie-alt: #F2F4F7;
  --branco: #FFFFFF;
  --texto: #232A38;
  --texto-suave: #5A6478;          /* 5.7:1 sobre --superficie (AA) */
  --borda: #E1E5EC;
  --borda-forte: #CBD2DE;

  /* Anel de foco. O valor padrao vale nas superficies claras; as escuras
     redefinem o token logo depois do reset, porque nenhum azul alcanca os
     3:1 da 1.4.11 contra elas. */
  --foco: #2A4A85;

  /* Sobre fundo escuro */
  --texto-claro: #FFFFFF;
  --texto-claro-suave: rgba(255, 255, 255, .78);

  /* Verde do WhatsApp escurecido até passar AA com texto branco:
     o #25D366 oficial dá 1.8:1 e o #128C4A dá 4.31 — ambos reprovam. */
  --whatsapp: #0F7D41;             /* 5.21:1 com branco */
  --whatsapp-hover: #0D6B36;       /* 6.62:1 com branco */

  /* Tipografia — ver a seção 00 para o porquê de cada papel */
  --fonte-titulo: "Spectral", Georgia, "Times New Roman", serif;
  --fonte-gravada: "Cinzel", Georgia, serif;
  --fonte-corpo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.25rem, 1.55rem + 3.1vw, 3.9rem);
  --t-h2:      clamp(1.75rem, 1.35rem + 1.75vw, 2.65rem);
  --t-h3:      clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-lead:    clamp(1.06rem, 1rem + 0.35vw, 1.28rem);
  --t-corpo:   1.0625rem;
  --t-peq:     0.9rem;
  --t-micro:   0.8rem;

  /* Espaçamento — base 8 */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4rem;
  --e9: 6rem;

  --raio-p: 6px;
  --raio: 12px;
  --raio-g: 20px;
  --raio-total: 999px;

  /* Sombras tingidas de azul-marinho — mais elegantes que preto puro */
  --sombra-p: 0 1px 2px rgba(18, 41, 79, .06), 0 1px 3px rgba(18, 41, 79, .08);
  --sombra-m: 0 4px 14px rgba(18, 41, 79, .09), 0 2px 4px rgba(18, 41, 79, .05);
  --sombra-g: 0 14px 38px rgba(18, 41, 79, .14), 0 4px 10px rgba(18, 41, 79, .06);

  --transicao: 220ms cubic-bezier(.22, .61, .36, 1);
  --transicao-rapida: 140ms cubic-bezier(.22, .61, .36, 1);

  --largura-container: 1200px;
  --altura-cabecalho: 76px;
}


/* ── 02. Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.7;
  color: var(--texto);
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p  { margin: 0 0 var(--e4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transicao-rapida);
}
a:hover { color: var(--azul-claro); }

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

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--raio-p);
}

/* O anel de foco troca de cor com a superficie, e nao por gosto: a 1.4.11 pede
   3:1 entre o indicador e o fundo, e --azul-claro (#2A4A85, luminancia 0.0708)
   precisaria de um fundo com luminancia 0.3125 para chegar la. O campo escuro
   do topo tem 0.016 no ponto mais claro, ou seja, nenhum ajuste de fundo
   salvaria esse anel — so a troca de cor resolve. Branco sobre o topo mede
   11.8:1 e sobre o rodape 16.8:1. Cobre os dois CTAs do topo, o flutuante do
   WhatsApp e os sete links do rodape, que e o caminho de conversao inteiro. */
.hero, .credenciais, .secao--escura, .rodape,
.whatsapp-flutuante, .pular-para-conteudo { --foco: #FFFFFF; }

/* O main recebe foco por programa quando alguem usa o link de pulo; anel de
   3px em volta da pagina inteira nao ajuda ninguem. */
#conteudo:focus { outline: none; }


/* ── 03. Utilitários ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--e5);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute;
  top: -100px;
  left: var(--e4);
  z-index: 200;
  padding: var(--e3) var(--e5);
  background: var(--azul);
  color: var(--texto-claro);
  font-weight: 600;
  border-radius: 0 0 var(--raio) var(--raio);
  text-decoration: none;
  transition: top var(--transicao);
}
.pular-para-conteudo:focus {
  top: 0;
  color: var(--texto-claro);
}


/* ── 04. Tipografia de seção ──────────────────────────────────────────── */
.sobrancelha {
  margin: 0 0 var(--e3);
  font-family: var(--fonte-corpo);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--verde);
}
.sobrancelha--clara { color: rgba(255, 255, 255, .72); }

.secao__cabecalho {
  max-width: 62ch;
  margin-bottom: var(--e7);
}

.secao__titulo {
  font-size: var(--t-h2);
  color: var(--azul);
  margin-bottom: var(--e4);
}

.secao__linha-fina {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--texto-suave);
}

.secao__cabecalho--claro .secao__titulo { color: var(--texto-claro); }
.secao__cabecalho--claro .secao__linha-fina { color: var(--texto-claro-suave); }


/* ── 05. Botões ───────────────────────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: .82rem 1.5rem;
  min-height: 48px;                /* alvo de toque confortável */
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--raio-total);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao-rapida),
              box-shadow var(--transicao);
}
.botao:active { transform: translateY(1px); }

.botao--whatsapp {
  background: var(--whatsapp);
  color: var(--texto-claro);
  box-shadow: var(--sombra-m);
}
.botao--whatsapp:hover {
  background: var(--whatsapp-hover);
  color: var(--texto-claro);
  box-shadow: var(--sombra-g);
}
.botao--whatsapp .icone { stroke: none; fill: currentColor; width: 1.35em; height: 1.35em; }

.botao--fantasma {
  background: transparent;
  color: var(--texto-claro);
  border-color: rgba(255, 255, 255, .45);
}
.botao--fantasma:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .8);
  color: var(--texto-claro);
}

.botao--pequeno { padding: .6rem 1.1rem; min-height: 42px; font-size: var(--t-peq); }
/* O recuo lateral acompanha a janela em vez de ser fixo em 2rem. Num telefone
   de 360px este botão fica com 246px, e 32px de recuo de cada lado deixavam
   182px para um rótulo que pede 183 — "Falar no WhatsApp" quebrava em duas
   linhas dentro do botão por um pixel. Com o piso de 1.5rem sobram 198px. */
.botao--grande  { padding: 1rem clamp(1.25rem, 4vw, 2rem); min-height: 56px; font-size: 1.1rem; }


/* ── 06. Cabeçalho e navegação ────────────────────────────────────────── */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(250, 250, 248, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.cabecalho--rolado {
  border-bottom-color: var(--borda);
  box-shadow: var(--sombra-p);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: var(--altura-cabecalho);
}

.cabecalho__marca { display: flex; align-items: center; flex-shrink: 0; }
.cabecalho__marca img { width: auto; height: 50px; }

.cabecalho__alternador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  color: var(--azul);
  cursor: pointer;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida);
}
.cabecalho__alternador:hover { background: var(--superficie-alt); border-color: var(--azul); }
.cabecalho__alternador .icone { width: 24px; height: 24px; }

.navegacao {
  display: grid;
  gap: var(--e4);
}

/* Painel deslizante — tratamento exclusivo de telas estreitas.
   Fica escopado num max-width em vez de ser aplicado na base e desfeito no
   desktop: assim `position`, `opacity` e `visibility` nunca precisam de reset,
   que é onde esse padrão costuma falhar silenciosamente. */
@media (max-width: 999.98px) {
  .navegacao {
    position: fixed;
    inset: var(--altura-cabecalho) 0 auto 0;
    /* Sem teto de altura, o painel cresce alem da borda inferior e o que passa
       fica inalcancavel — elemento fixo nao acompanha a rolagem da pagina. Em
       celular de pe sobra espaco; em paisagem o botao de WhatsApp, que e o
       ultimo item, sai da tela. dvh e nao vh para nao perder altura para a
       barra de endereco. */
    max-height: calc(100vh - var(--altura-cabecalho));
    max-height: calc(100dvh - var(--altura-cabecalho));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--e5);
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra-g);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transicao), opacity var(--transicao), visibility var(--transicao);
  }
  .navegacao--aberta {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}

.navegacao__lista { display: grid; gap: var(--e1); }

.navegacao__lista a {
  display: block;
  padding: var(--e3) var(--e2);
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
  border-radius: var(--raio-p);
  border-left: 3px solid transparent;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida);
}
.navegacao__lista a:hover,
.navegacao__lista a.ativo {
  background: var(--superficie-alt);
  border-left-color: var(--verde);
}

/* No painel móvel este botão deixa de ser um item compacto de cabeçalho e passa
   a ser alvo de toque: o modificador --pequeno o deixava em 43px, abaixo dos
   44px de alvo mínimo, e era o único controle principal da página nessa
   situação. No desktop (≥900px) ele volta ao tamanho compacto. */
.navegacao__cta {
  width: 100%;
  min-height: 48px;
}


/* ── 07. Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: calc(var(--altura-cabecalho) + var(--e8));
  background: var(--azul-escuro);
  color: var(--texto-claro);
  overflow: hidden;
}

/* O campo do topo é foto sob azul quase opaco: a foto entra como profundidade
   e textura de operação, não como assunto.

   Contraste medido no composto, não no gradiente sozinho: no pior caso — o
   pixel mais claro da foto na área do texto, com o trecho menos opaco do
   linear e os três radiais somando no mesmo ponto — o fundo dá rgb(41,63,96),
   que é 10.6:1 com branco e 7.2:1 com o branco a 78% da linha fina. Os dois
   passam AAA. O caso típico é 14.2:1. */
.hero__fundo {
  position: absolute;
  inset: 0;
  background-color: var(--azul-escuro);
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, rgba(42, 74, 133, .42), transparent 62%),
    radial-gradient(45rem 35rem at 100% 12%, rgba(29, 94, 46, .22), transparent 60%),
    radial-gradient(30rem 26rem at 78% 96%, rgba(122, 16, 22, .16), transparent 65%),
    linear-gradient(165deg, rgba(18, 41, 79, .93) 0%, rgba(10, 29, 59, .95) 58%, rgba(6, 19, 42, .97) 100%),
    url("../imagens/topo-operacao.webp");
  background-size: cover;
  background-position: center 38%;
}

.hero__interno {
  position: relative;
  padding-bottom: var(--e8);
}

.hero__texto { max-width: 44rem; }

.hero__titulo {
  font-size: var(--t-display);
  color: var(--texto-claro);
  margin-bottom: var(--e5);
}
.hero__titulo em {
  display: block;
  margin-top: var(--e2);
  font-style: italic;
  color: rgba(255, 255, 255, .82);
}

.hero__linha-fina {
  max-width: 40rem;
  font-size: var(--t-lead);
  line-height: 1.7;
  color: var(--texto-claro-suave);
  margin-bottom: var(--e6);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}



/* ── 08. Faixa de credenciais ─────────────────────────────────────────── */
.credenciais {
  position: relative;
  background: rgba(255, 255, 255, .07);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.credenciais__interno {
  display: grid;
  gap: var(--e3);
  padding-block: var(--e5);
}

.credenciais__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0;
  font-size: var(--t-peq);
  color: var(--texto-claro-suave);
}
.credenciais__item strong { color: var(--texto-claro); font-weight: 600; }
.credenciais__item .icone {
  width: 20px; height: 20px;
  padding: 3px;
  color: #6BCB8B;
  border: 1px solid rgba(107, 203, 139, .4);
  border-radius: var(--raio-total);
  stroke-width: 2.4;
}


/* ── 09. Seções ───────────────────────────────────────────────────────── */
.secao {
  padding-block: var(--e8);
  scroll-margin-top: var(--altura-cabecalho);
}
.secao--alternada { background: var(--superficie-alt); }
.secao--escura {
  background: var(--azul-escuro);
  background-image: linear-gradient(160deg, #12294F 0%, #0A1D3B 70%, #06132A 100%);
  color: var(--texto-claro);
}

/* Faixa de foto — uma por frente, entre o texto da seção e os cartões: mostra
   o que está sendo protegido antes de listar cobertura. São fotos ilustrativas
   da categoria, e a descrição delas fala só do que a imagem mostra. */
.faixa-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: var(--e7);
  border-radius: var(--raio);
  box-shadow: var(--sombra-m);
}


/* ── 10. Cartões ──────────────────────────────────────────────────────── */
.grade-cartoes {
  display: grid;
  gap: var(--e4);
  grid-template-columns: 1fr;
}

.cartao {
  padding: var(--e5);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-p);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.cartao:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-m);
  border-color: var(--borda-forte);
}

.cartao__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--e4);
  border-radius: var(--raio-p);
}
.cartao__icone .icone { width: 24px; height: 24px; }

.cartao__icone--azul  { background: rgba(18, 41, 79, .09);  color: var(--azul); }
.cartao__icone--verde { background: rgba(20, 83, 45, .10);  color: var(--verde); }
.cartao__icone--vinho { background: rgba(138, 21, 32, .09); color: var(--vinho); }

.cartao__titulo {
  font-size: var(--t-h3);
  color: var(--azul);
  margin-bottom: var(--e2);
}

.cartao p {
  font-size: var(--t-peq);
  line-height: 1.65;
  color: var(--texto-suave);
}

/* Variante sobre fundo escuro */
.cartao--claro {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
.cartao--claro:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .28);
}
.cartao--claro .cartao__titulo { color: var(--texto-claro); }
.cartao--claro p { color: var(--texto-claro-suave); }

.cartao__icone--contorno {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--texto-claro);
}


/* ── 11. Passos ───────────────────────────────────────────────────────── */
.passos {
  display: grid;
  gap: var(--e5);
}

.passo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e4);
  align-items: start;
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--borda);
}
.passo:last-child { border-bottom: 0; padding-bottom: 0; }

.passo__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--branco);
  background: var(--azul);
  border-radius: var(--raio-total);
  box-shadow: 0 0 0 5px rgba(18, 41, 79, .10);
}

.passo__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--t-h3);
  color: var(--azul);
  margin-bottom: var(--e2);
}
.passo__titulo .icone { width: 21px; height: 21px; color: var(--verde); }

.passo p { font-size: var(--t-peq); color: var(--texto-suave); line-height: 1.65; }


/* ── 12. Sobre ────────────────────────────────────────────────────────── */
.sobre {
  display: grid;
  gap: var(--e6);
  align-items: center;
}

/* Retrato e registro formam uma peça só: a credencial de quem atende.
   O fio deslocado é a margem gravada de um certificado — é o único ornamento
   da página, e fica neste elemento e em nenhum outro. */
/* O `width: 100%` não é redundante. Em item de grade, margem automática no eixo
   inline tem precedência sobre o `justify-self: stretch` padrão: o bloco passa
   a ser shrink-to-fit e a margem come a folga. Com a foto em loading="lazy"
   ainda não carregada, "conteúdo" era só a linha do registro, e a moldura
   nascia com 251px para saltar a 380px quando a imagem chegasse — salto de
   layout gratuito. Com largura declarada, a medida é a mesma antes e depois. */
.sobre__retrato {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}
.sobre__retrato::before {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px solid var(--borda-forte);
  border-radius: calc(var(--raio-p) + 9px);
  pointer-events: none;
}

/* O padding é o passe-partout: com box-sizing de borda, a proporção vale para
   a moldura inteira e o object-fit recorta a foto dentro dela. */
.retrato {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  padding: 10px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-m);
}

.registro {
  display: flex;
  flex-wrap: wrap;
  /* pelo fim, não pela linha de base: o campo tem duas linhas e a primeira
     linha de base é a do rótulo, o que deixaria o link flutuando acima do
     número */
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

/* Campo de documento: rótulo miúdo em caixa alta sobre o valor espaçado, com
   algarismos tabulares — é como número de registro sai impresso numa apólice. */
.campo { margin: 0; }

.campo__rotulo {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Cinzel no valor: é a letra do logotipo, e um número de registro é justamente
   a cadeia curta em caixa alta para a qual uma romana de inscrição foi
   desenhada. Caixa alta sempre pede entreletra positiva. */
.campo__valor {
  display: block;
  font-family: var(--fonte-gravada);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--azul);
}

/* 24px de altura mínima: o WCAG 2.2 pede isso de alvo que não seja texto
   corrido dentro de uma frase, e este link é isolado numa linha própria — a
   exceção de texto em linha não o cobre. O rótulo sozinho dava 22px. */
.conferir {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--e1);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--verde);
  text-decoration-color: rgba(20, 83, 45, .45);
}
.conferir:hover { color: var(--verde-claro); }
.conferir .icone { width: 14px; height: 14px; stroke-width: 2.2; }

.sobre__destaque {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--texto);
  padding-left: var(--e4);
  border-left: 3px solid var(--verde);
}

/* So o paragrafo sem classe: com `.sobre__texto p` a especificidade (0,1,1)
   vencia `.sobrancelha` e `.sobre__destaque`, que sao (0,1,0), e as duas cores
   declaradas nunca chegavam a valer — a sobrancelha desta secao saia cinza
   enquanto as outras saiam verdes. */
.sobre__texto > p:not([class]) { color: var(--texto-suave); }
.sobre__texto strong { color: var(--texto); font-weight: 600; }

.lista-selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e5);
}
.lista-selos li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--azul);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-total);
}
.lista-selos .icone { width: 15px; height: 15px; color: var(--verde); stroke-width: 2.6; }


/* ── 13. Contato ──────────────────────────────────────────────────────── */
.contato {
  display: grid;
  gap: var(--e7);
  /* Num telefone de 320px a coluna tem 272px e um recuo fixo de 2rem levava
     64px deles. Acompanhando a janela, sobra largura para o botão de conversão
     caber em uma linha — que é o elemento mais importante desta seção. */
  padding: clamp(1.25rem, 5vw, 2rem);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-m);
}

.contato__chamada .secao__linha-fina { margin-bottom: var(--e6); }

.contato__canais { display: grid; gap: var(--e2); }

.contato__canais li > * {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icone rotulo" "icone valor";
  align-items: center;
  column-gap: var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  text-decoration: none;
  color: inherit;
  transition: background var(--transicao-rapida);
}
.contato__canais a:hover { background: var(--superficie-alt); }

.contato__icone {
  grid-area: icone;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--raio-total);
}
.contato__icone .icone { width: 21px; height: 21px; }
.contato__icone--azul  { background: rgba(18, 41, 79, .09);  color: var(--azul); }
.contato__icone--verde { background: rgba(15, 125, 65, .12); color: var(--whatsapp); }
.contato__icone--verde .icone { stroke: none; fill: currentColor; }

.contato__rotulo {
  grid-area: rotulo;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.contato__valor {
  grid-area: valor;
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--azul);
  overflow-wrap: anywhere;
}
.contato__area .contato__valor { font-weight: 500; color: var(--texto-suave); }


/* ── 14. Rodapé ───────────────────────────────────────────────────────── */
.rodape {
  padding-top: var(--e8);
  background: var(--azul-escuro);
  color: var(--texto-claro-suave);
  font-size: var(--t-peq);
}

.rodape__interno {
  display: grid;
  gap: var(--e6);
  padding-bottom: var(--e7);
}

/* Versão reversa do logotipo: monocromática em branco, sem a placa branca que
   a primeira versão precisava para o arquivo colorido não brigar com o azul. */
.rodape__logo {
  width: auto;
  height: 56px;
}

.rodape__susep {
  margin-top: var(--e4);
  font-size: var(--t-micro);
  letter-spacing: .04em;
}
.rodape__susep strong {
  font-family: var(--fonte-gravada);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--texto-claro);
}

.rodape__titulo {
  font-family: var(--fonte-corpo);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: var(--e4);
}

.rodape ul { display: grid; gap: var(--e2); }

.rodape a {
  color: var(--texto-claro-suave);
  text-decoration: none;
}
.rodape a:hover { color: var(--texto-claro); text-decoration: underline; }

/* Últimos textos no rodapé. Além de servir ao leitor que chegou ao fim da
   página, dá a cada texto um link interno que aparece em todas as páginas do
   site — que é como um endereço novo é encontrado mais depressa. A lista é
   escrita por ferramentas/gera_blog.py entre os marcadores do HTML. */
.rodape__blog ul { gap: var(--e3); }

.rodape__blog a { display: block; }

.rodape__todos {
  display: inline-block;
  margin-top: var(--e4);
  font-weight: 600;
}

/* Link de rede social: ícone e rótulo na mesma linha. O ícone fica um pouco
   menor que o corpo do texto para não competir com ele — num rodapé, o nome do
   perfil é a informação, e o ícone só diz de que rede se trata. */
.rodape__rede {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
.rodape__rede .icone { width: 17px; height: 17px; }

.rodape__base {
  padding-block: var(--e5);
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.rodape__aviso {
  max-width: 78ch;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}

.rodape__direitos {
  margin-top: var(--e3);
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, .55);   /* .45 dava 4.08:1 — abaixo de AA */
}


/* ── 15. WhatsApp flutuante ───────────────────────────────────────────── */
.whatsapp-flutuante {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  color: var(--texto-claro);
  background: var(--whatsapp);
  border-radius: var(--raio-total);
  box-shadow: var(--sombra-g);
  transition: transform var(--transicao), background var(--transicao);
}
.whatsapp-flutuante:hover {
  background: var(--whatsapp-hover);
  color: var(--texto-claro);
  transform: scale(1.06);
}
.whatsapp-flutuante .icone {
  width: 30px; height: 30px;
  stroke: none;
  fill: currentColor;
}


/* ── 16. Responsivo ───────────────────────────────────────────────────── */

/* ≥ 600px — grades começam a abrir */
@media (min-width: 600px) {
  /* a faixa vai abrindo com a tela: 16/9 em coluna estreita, 2/1 aqui e
     panorâmica no desktop — sempre alta o bastante para ler a cena e nunca
     alta o bastante para empurrar os cartões para fora da tela */
  .faixa-foto { aspect-ratio: 2 / 1; }

  .grade-cartoes { grid-template-columns: repeat(2, 1fr); }
  .credenciais__interno { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: var(--e7); }
  .contato__canais { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 900px — layout de desktop */
@media (min-width: 900px) {
  :root { --altura-cabecalho: 88px; }

  .container { padding-inline: var(--e6); }

  /* o logotipo oficial traz "consultoria de seguros" em corpo miúdo: abaixo de
     60px de altura a linha empasta, e o cabeçalho de 88px acomoda isso */
  .cabecalho__marca img { height: 60px; }
  .hero { padding-top: calc(var(--altura-cabecalho) + var(--e9)); }
  /* coluna única: o texto tem medida própria pelo max-width e a foto do campo
     fica respirando à direita, sem elemento em cima */
  .hero__interno { padding-bottom: var(--e9); }
  .credenciais__interno {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    column-gap: var(--e5);
  }

  .secao { padding-block: var(--e9); }

  /* na largura de desktop a faixa fica panorâmica: 16/9 aqui viraria um bloco
     alto demais e empurraria os cartões para fora da primeira tela */
  .faixa-foto { aspect-ratio: 12 / 5; }

  .grade-cartoes { grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
  .grade-cartoes--quatro { grid-template-columns: repeat(4, 1fr); }

  .passos { grid-template-columns: repeat(2, 1fr); gap: var(--e6) var(--e7); }
  .passo { border-bottom: 0; padding-bottom: 0; }

  .sobre { grid-template-columns: 380px 1fr; gap: var(--e8); }

  .contato { grid-template-columns: 1fr 1fr; gap: var(--e8); padding: var(--e8); align-items: center; }
  .contato__canais { grid-template-columns: 1fr; }

  /* Quatro colunas a partir daqui, e não três: a lista de textos do blog
     entrou entre a navegação e o contato. Abaixo de 900px elas empilham. */
  .rodape__interno {
    grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr;
    gap: var(--e6) var(--e5);
  }

  .rodape__base { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e5); }
  .rodape__direitos { margin-top: 0; white-space: nowrap; }

}

/* ≥ 1000px — a navegação em linha, que é onde ela cabe de verdade

   ATENÇÃO, ANTES DE ACRESCENTAR ITEM NO MENU: esta barra vive perto do limite,
   e passar dele não dá erro — quebra silenciosamente em duas linhas.

   Medido com os cinco itens atuais mais o botão de WhatsApp: a barra pede
   718px sem quebrar linha. Somando o logotipo (143px), o gap do cabeçalho
   (16px) e o padding do container (64px), o mínimo é 941px. Numa janela de
   1000px sobram 985px depois da barra de rolagem, ou seja, 44px de folga — o
   que cabe em um item curto e não cabe em dois.

   Isso já aconteceu duas vezes neste arquivo. Primeiro em 900px, onde a barra
   pedia 886px e sobravam 885: faltava um pixel, e a navegação quebrava
   exatamente no ponto de quebra que devia servi-la. Depois quando um item
   "Blog" entrou no menu sem remedição: o mínimo foi a 995px e os itens caíram
   em três alturas diferentes em 1000px. O item saiu para o rodapé.

   Para conferir depois de mexer, no console, com a janela em 1000px:

     const n = document.querySelector('.navegacao');
     n.style.width = 'max-content'; n.style.flexWrap = 'nowrap';
     n.getBoundingClientRect().width;   // +223 tem de caber em 985

   O resto do layout de desktop continua em 900px, porque lá ele funciona: o
   que mudou de faixa foi só a navegação. Entre 900 e 999 a página tem duas
   colunas e menu em painel, combinação que não incomoda ninguém. */
@media (min-width: 1000px) {
  .cabecalho__alternador { display: none; }

  .navegacao {
    display: flex;
    align-items: center;
    gap: var(--e5);
  }

  .navegacao__lista { display: flex; align-items: center; gap: var(--e1); }
  .navegacao__lista a {
    padding: var(--e2) var(--e3);
    font-size: var(--t-peq);
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }
  .navegacao__lista a:hover,
  .navegacao__lista a.ativo {
    background: transparent;
    border-bottom-color: var(--verde);
    color: var(--verde);
  }

  .navegacao__cta { width: auto; min-height: 42px; }

  /* o flutuante sai de cena só quando o CTA do cabeçalho está sempre visível */
  .whatsapp-flutuante { display: none; }
}


/* ≥ 1140px — grade de patrimônio em 4 colunas */
@media (min-width: 1140px) {
  .grade-cartoes { grid-template-columns: repeat(4, 1fr); }
}


/* ── 17. Movimento reduzido / impressão ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cartao:hover, .whatsapp-flutuante:hover, .botao:active { transform: none; }
}

@media print {
  .cabecalho, .whatsapp-flutuante { display: none; }
  .sobre__retrato::before { display: none; }
  /* O campo do topo continuaria pintando azul-marinho com "graficos de plano de
     fundo" ligado na caixa de impressao. */
  .hero__fundo { display: none; }
  body { background: #fff; color: #000; }
  .hero, .secao--escura, .rodape { background: #fff !important; color: #000; }
  /* Descendente com cor propria nao herda: as cores claras estao declaradas nos
     proprios elementos (rgba branco literal em varios lugares), entao zerar a
     cor no ancestral nao alcanca ninguem. Sem isto, sai branco sobre branco. */
  .hero *, .credenciais *, .secao--escura *, .rodape * { color: #000 !important; }
  .hero__titulo, .secao__cabecalho--claro .secao__titulo { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}


/* ── 18. Blog ─────────────────────────────────────────────────────────────
   A página inicial ganha o recuo do cabeçalho fixo pelo padding do hero. As
   páginas do blog não têm hero, então precisam desse recuo por conta própria —
   sem ele o título nasce por baixo do cabeçalho. */
.pagina-blog,
.pagina-texto { padding-top: var(--altura-cabecalho); }


/* Lista de textos ─────────────────────────────────────────────────────── */
.lista-textos {
  display: grid;
  gap: var(--e6);
  max-width: 62rem;
}

.lista-textos__item {
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--borda);
}
.lista-textos__item:last-child { border-bottom: 0; padding-bottom: 0; }

.lista-textos__data {
  margin: 0 0 var(--e2);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.lista-textos__titulo {
  font-size: var(--t-h3);
  margin-bottom: var(--e3);
}
.lista-textos__titulo a {
  color: var(--azul);
  text-decoration: none;
}
.lista-textos__titulo a:hover { color: var(--verde); text-decoration: underline; }

.lista-textos__resumo {
  margin: 0;
  max-width: 62ch;
  color: var(--texto-suave);
}


/* Texto ───────────────────────────────────────────────────────────────── */
.texto {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding: var(--e8) var(--e5);
}

.texto__titulo {
  font-size: var(--t-h2);
  color: var(--azul);
  max-width: 24ch;
  margin-bottom: var(--e4);
}

.texto__dados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin-bottom: var(--e7);
  padding-bottom: var(--e5);
  font-size: var(--t-peq);
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda);
}
.texto__atualizado { font-style: italic; }

/* A medida do corpo é o que faz um texto longo ser lido até o fim: 68ch fica
   dentro da faixa de 45 a 75 caracteres por linha em que o olho acha a linha
   seguinte sem esforço. O container de 1200px serviria à página inicial, que é
   feita de colunas, e seria largo demais aqui. */
.texto__corpo {
  max-width: 68ch;
  font-size: var(--t-lead);
  line-height: 1.75;
}

.texto__corpo h2 {
  font-size: var(--t-h3);
  color: var(--azul);
  margin: var(--e7) 0 var(--e4);
}
.texto__corpo h3 {
  font-size: 1.15rem;
  color: var(--azul);
  margin: var(--e6) 0 var(--e3);
}

.texto__corpo p { margin-bottom: var(--e5); }
.texto__corpo strong { color: var(--texto); font-weight: 600; }

.texto__corpo ul,
.texto__corpo ol {
  display: grid;
  gap: var(--e3);
  margin: 0 0 var(--e5);
  padding-left: var(--e5);
}
.texto__corpo ul { list-style: disc; }
.texto__corpo ol { list-style: decimal; }
.texto__corpo li::marker { color: var(--verde); }

.texto__corpo blockquote {
  margin: 0 0 var(--e5);
  padding-left: var(--e4);
  border-left: 3px solid var(--verde);
  color: var(--texto);
}

.texto__corpo hr {
  height: 1px;
  margin: var(--e7) 0;
  background: var(--borda);
  border: 0;
}

.texto__corpo code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .9em;
  padding: .1em .35em;
  background: var(--superficie-alt);
  border-radius: var(--raio-p);
}

.texto__corpo a { text-decoration-color: rgba(18, 41, 79, .4); }

/* O convite ao fim do texto é o único lugar do blog que empurra para a
   conversa. Fica depois da leitura e não no meio dela, de propósito. */
.texto__chamada {
  max-width: 68ch;
  margin-top: var(--e8);
  padding: var(--e6);
  background: var(--superficie-alt);
  border-radius: var(--raio-g);
}
.texto__chamada p {
  margin-bottom: var(--e5);
  color: var(--texto);
}


@media (min-width: 900px) {
  .texto { padding: var(--e9) var(--e6); }
  .lista-textos { gap: var(--e7); }
  .lista-textos__item { padding-bottom: var(--e7); }
}


/* Imagens do texto ───────────────────────────────────────────────────────
   A capa é mais larga que o corpo de propósito: ela abre o texto e o corpo
   volta à medida de leitura logo abaixo. Largura e altura vêm declaradas pelo
   gerador, lidas do arquivo, para o navegador reservar o espaço antes de a
   imagem chegar — sem isso a página pula durante o carregamento. */
.texto__capa,
.texto__figura {
  margin: 0 0 var(--e6);
}

.texto__capa img,
.texto__figura img {
  width: 100%;
  height: auto;
  border-radius: var(--raio);
  box-shadow: var(--sombra-m);
}

.texto__capa { max-width: 56rem; }

.texto__figura {
  max-width: 68ch;
  margin-block: var(--e6);
}


/* Assinatura ─────────────────────────────────────────────────────────────
   Quem escreveu, com que credencial, e como conferir. É a mesma peça da ficha
   da página inicial, agora assinando o texto: numa categoria regulada, autoria
   verificável vale mais que qualquer selo de "especialista". */
.assinatura {
  display: grid;
  gap: var(--e4);
  max-width: 68ch;
  margin-top: var(--e8);
  padding-top: var(--e6);
  border-top: 1px solid var(--borda);
}

.assinatura__retrato {
  width: 84px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--raio-total);
}

.assinatura__nome {
  margin: 0;
  font-family: var(--fonte-gravada);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--azul);
}

.assinatura__papel {
  margin: var(--e1) 0 var(--e3);
  font-size: var(--t-peq);
  line-height: 1.55;
  color: var(--texto-suave);
}

.assinatura .campo { margin-bottom: var(--e2); }


@media (min-width: 600px) {
  /* miniatura à esquerda, texto à direita */
  .lista-textos__item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--e5);
    align-items: start;
  }

  .assinatura { grid-template-columns: 84px 1fr; align-items: start; }
}

.lista-textos__miniatura { display: block; }
.lista-textos__miniatura img {
  width: 100%;
  height: auto;
  border-radius: var(--raio-p);
}