/* ==========================================================================
   BASE — componentes reutilizáveis (modelo de produção Traço & Fluxo)
   --------------------------------------------------------------------------
   Não contém cores, fontes nem formas de nenhuma marca: tudo vem das
   variáveis genéricas definidas em marca.css (--cor-*, --fonte-*, --raio-*).
   Para um cliente novo, mantenha este arquivo e troque apenas marca.css.

   Sumário: reset · tipografia · layout · acessibilidade · botões · rótulo ·
            cabeçalho/menu · seções · cartões · etapas · formulário · rodapé
   ========================================================================== */

/* Reset mínimo ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Tipografia --------------------------------------------------------------- */
h1, h2, h3, .titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 8.4vw, 5rem); line-height: 1.02; }    /* ~30px no celular até 80px */
h2 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); }                    /* 28–40px */
h3 { font-size: clamp(1.15rem, 2vw, 1.3rem); letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--cor-link); }

.texto-destaque { font-size: clamp(1.06rem, 1.6vw, 1.19rem); line-height: 1.6; color: var(--cor-texto-2); }
.texto-2 { color: var(--cor-texto-2); }

/* Layout ------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--conteudo-max); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .container { padding-inline: 1.5rem; } }

.pilha > * + * { margin-top: var(--espaco, 1rem); }

/* Acessibilidade ----------------------------------------------------------- */
.pular-conteudo {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: 0.75rem 1.25rem; border-radius: var(--raio-botao);
  background: var(--cor-primaria); color: var(--cor-sobre-primaria); text-decoration: none;
}
.pular-conteudo:focus { top: 1rem; color: var(--cor-sobre-primaria); }
.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;
}
:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 3px; }

/* Botões (pílula) ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.8rem 1.6rem;
  border: 1px solid transparent; border-radius: var(--raio-botao);
  font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primario { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.btn--primario:hover { background: var(--cor-primaria-hover); color: var(--cor-sobre-primaria); }
.btn--secundario { border-color: var(--cor-primaria); color: var(--cor-primaria); background: transparent; }
.btn--secundario:hover { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
/* Variações para fundo escuro */
.btn--claro { background: var(--cor-escuro-texto); color: var(--cor-escuro-fundo); }
.btn--claro:hover { background: var(--cor-superficie); color: var(--cor-escuro-fundo); }
.btn--contorno-claro { border-color: var(--cor-escuro-texto-2); color: var(--cor-escuro-texto); }
.btn--contorno-claro:hover { background: var(--cor-escuro-texto); color: var(--cor-escuro-fundo); }
.btn--pequeno { min-height: 44px; padding: 0.6rem 1.25rem; font-size: 0.94rem; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.grupo-botoes { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Link com seta */
.link-seta {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  font-weight: 500; color: var(--cor-texto); text-decoration: underline; text-decoration-thickness: 1px;
}
.link-seta::after { content: "→"; transition: transform .2s ease; }
.link-seta:hover::after { transform: translateX(3px); }

/* Rótulo (eyebrow com traço de destaque) ---------------------------------- */
.rotulo {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo); color: var(--cor-texto-3);
  margin: 0;
}
.rotulo::before { content: ""; flex: none; width: 32px; height: 2px; background: var(--cor-acento); }

/* Cabeçalho e menu --------------------------------------------------------- */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda);
}
.cabecalho__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.cabecalho__marca { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.cabecalho__marca img { width: 152px; height: auto; }   /* compacto: mínimo 120px */

.menu__botao {
  display: none; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1rem;
  border: 1px solid var(--cor-primaria); border-radius: var(--raio-botao);
  background: transparent; cursor: pointer; font-weight: 500;
}
.menu__icone { position: relative; width: 18px; height: 12px; }
.menu__icone::before, .menu__icone::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform .2s ease, top .2s ease;
}
.menu__icone::before { top: 1px; }
.menu__icone::after { top: 9px; }
.menu__botao[aria-expanded="true"] .menu__icone::before { top: 5px; transform: rotate(45deg); }
.menu__botao[aria-expanded="true"] .menu__icone::after { top: 5px; transform: rotate(-45deg); }

.menu__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; margin: 0; padding: 0; list-style: none; font-size: 0.94rem; }
.menu__lista a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.menu__lista a[aria-current="true"]:not(.btn) { text-decoration: underline; text-decoration-color: var(--cor-acento); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }

@media (max-width: 899.98px) {
  /* Sem JavaScript, os links aparecem abaixo da marca; com JS, viram menu recolhível. */
  .cabecalho__barra { flex-wrap: wrap; padding-block: 0.75rem; }
  .js .cabecalho__barra { flex-wrap: nowrap; padding-block: 0; }
  .js .menu__botao { display: inline-flex; }
  .js .menu__lista {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem 1.25rem 1.5rem; background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda); font-size: 1.06rem;
  }
  .js .menu__lista:not(.aberto) { display: none; }
  .js .menu__lista li { border-bottom: 1px solid var(--cor-borda); }
  .js .menu__lista li:last-child { border-bottom: 0; padding-top: 1rem; }
  .js .menu__lista a:not(.btn) { width: 100%; min-height: 52px; }
  .js .menu__lista .btn { width: 100%; }
}

/* Seções ------------------------------------------------------------------- */
.secao { padding-block: clamp(4rem, 9vw, 7rem); }
.secao--superficie { background: var(--cor-superficie); }
.secao--escura { background: var(--cor-escuro-fundo); color: var(--cor-escuro-texto); }
.secao--escura .rotulo { color: var(--cor-escuro-texto-2); }
.secao--escura .texto-destaque, .secao--escura .texto-2 { color: var(--cor-escuro-texto-2); }
.secao--escura a:hover { color: var(--cor-escuro-texto); }
.secao--escura :focus-visible { outline-color: var(--cor-escuro-foco); }

.secao__cabeca { display: grid; gap: 1.25rem; max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* Cartões ------------------------------------------------------------------ */
.grade { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cartao {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--cor-superficie); border-radius: var(--raio-bloco);
}
.cartao p { color: var(--cor-texto-2); }
.cartao__rodape { margin-top: auto; padding-top: 0.5rem; }
.lista-itens { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: 0.94rem; color: var(--cor-texto-2); }
.lista-itens li { display: flex; gap: 0.6rem; }
.lista-itens li::before { content: ""; flex: none; width: 10px; height: 2px; margin-top: 0.75em; background: var(--cor-acento); }

/* Etapas (processo) -------------------------------------------------------- */
.etapas { display: grid; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.etapa { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem 0 2rem; border-top: 1px solid var(--cor-linha-forte); }
/* Número em azul-noite: o coral-escuro sobre névoa não atinge o contraste mínimo (4,5:1) em texto pequeno */
.etapa__numero { display: flex; align-items: center; gap: 0.6rem; font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: 0.94rem; color: var(--cor-texto); letter-spacing: 0; }
.etapa__numero::after { content: ""; width: 20px; height: 2px; background: var(--cor-acento); }
.etapa p { color: var(--cor-texto-2); }

/* Formulário --------------------------------------------------------------- */
.campo { display: grid; gap: 0.4rem; }
.campo label, .campo legend { font-weight: 500; font-size: 0.94rem; }
.campo .dica { font-size: 0.85rem; color: var(--cor-texto-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  background: #fff; color: var(--cor-texto);
  border: 1px solid var(--cor-texto-3); border-radius: var(--raio-bloco);
}
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline-offset: 1px; border-color: var(--cor-primaria); }

/* Rodapé ------------------------------------------------------------------- */
.rodape { background: var(--cor-escuro-fundo); color: var(--cor-escuro-texto-2); padding-block: 3rem 2rem; font-size: 0.94rem; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--cor-escuro-texto); text-decoration: underline; }
.rodape :focus-visible { outline-color: var(--cor-escuro-foco); }