/* ==========================================================================
   Layout
   ========================================================================== */

html,
body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* O painel do menu mobile fica fora da tela via transform (não via
     display:none), e position:fixed + transform pode ser contado na largura
     de rolagem do documento em alguns navegadores. overflow-x:hidden evita
     rolagem horizontal indesejada sem afetar nenhum conteúdo visível. */
  overflow-x: hidden;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  /* Gutter fluido: 20px no mobile (--container-padding-mobile) crescendo
     suavemente até 40px (--space-5) por volta de ~800px de largura, em vez
     de um salto único e tardio em 1120px. Antes disso, tudo entre 375px e
     1119px (incl. tablets/laptops pequenos, ex. 768px) ficava preso em
     20px fixos — relativamente apertado nessas larguras, dando a sensação
     de conteúdo colado na borda. Ver responsive.css: o breakpoint de
     1120px que sobrescrevia este valor foi removido por ficar redundante. */
  padding-inline: clamp(var(--container-padding-mobile), 5vw, var(--space-5));
}

main {
  display: block;
}

.section {
  padding: var(--space-8) 0;
}

.section--tight {
  padding: var(--space-6) 0;
}

.section--soft {
  background: var(--color-soft);
}

.section--surface {
  background: var(--color-surface);
}

.section--primary {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.9);
}

.section--primary h2,
.section--primary h3 {
  color: #fff;
}

.section--border-top {
  border-top: 1px solid var(--color-border);
}

.section-head {
  margin-bottom: var(--space-6);
  max-width: var(--measure);
}

/* Título de página interna: antes ficava num wrapper próprio com
   max-width:860px + margin:auto — como .container já centraliza a si
   mesmo, isso empurrava o H1 para a direita, desalinhado do resto da
   página (breadcrumb acima, texto abaixo). Limitar a largura no próprio
   H1 (sem margin:auto) evita título esticado numa única linha muito longa
   sem recriar o desalinhamento — H1 e o restante do conteúdo passam a
   compartilhar a mesma borda esquerda. */
.section--tight h1 {
  max-width: 900px;
}

.section-head--wide {
  max-width: 100%;
}

.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* Ritmo vertical (causa raiz): nenhum heading tinha margin-bottom — o
   espaço entre um título e o texto seguinte era só o ar do line-height, não
   um espaçamento deliberado (medido: 0px de gap real entre h2 e o parágrafo
   abaixo em ".section-head"). Estes valores usam a mesma escala de 8px do
   resto do projeto e só entram em vigor onde nenhum contexto mais
   específico já define o próprio espaçamento (.hero h1, .prose h2/h3 etc.
   continuam intactos — seletor mais específico sempre vence). */
/* Antes pulava de --fs-h1-mobile (40px) direto para --fs-h1 (56px) num
   único breakpoint (960px) — clamp() troca o salto por uma curva contínua
   entre 375–1280px (mesmos extremos de antes, só o teto subiu para 60px).
   Tracking um pouco mais fechado no tamanho grande (-0.02em) é um detalhe
   comum em tipografia editorial para títulos grandes não parecerem soltos. */
h1 {
  font-size: clamp(var(--fs-h1-mobile), 1.98rem + 2.21vw, var(--fs-h1));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

h2 {
  font-size: clamp(var(--fs-h2-mobile), 1.46rem + 1.77vw, var(--fs-h2));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-primary);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--fs-h3-mobile);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

h4 {
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

p {
  max-width: var(--measure);
}

p.measure-full {
  max-width: none;
}

.lede {
  font-size: var(--fs-body-lg);
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
}

/* .stack já controla o espaçamento entre filhos via "gap" (flexbox) — sem
   isto, o margin-bottom dos headings/.lede acima somaria ao gap, dobrando o
   espaço em blocos como o CTA final (h2 + p + botão dentro de ".stack"). */
.stack > * {
  margin-bottom: 0;
}

.text-muted {
  color: var(--color-muted);
}

.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.prose h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.prose p {
  margin-bottom: var(--space-3);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: var(--space-1);
  padding-left: 4px;
}

/* --- Grids genéricos ------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-4);
}

/* Itens de grid encolhem por padrão até o tamanho do seu conteúdo mínimo
   (min-width:auto). Um <select> com uma opção de texto longo, por exemplo,
   pode forçar a coluna inteira a ficar mais larga que o viewport e causar
   rolagem horizontal. min-width:0 permite que o item encolha normalmente e
   deixe o texto quebrar linha como esperado. */
.grid > *,
.two-col > *,
.contact-grid > *,
.form-row > * {
  min-width: 0;
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: 1fr;
}

.two-col {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}

.two-col--reverse .two-col__media {
  order: -1;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* --- Hero ------------------------------------------------------------------- */
.hero {
  padding: var(--space-5) 0 var(--space-7);
}

/* Proporção do H1 do hero: cresce com a viewport (clamp) em vez de um
   tamanho fixo único, para não consumir uma fatia excessiva da primeira
   tela em aparelhos estreitos (320–430px) — e para não ter mais o salto
   único que existia em 960px (ver responsive.css). Mesmos extremos de
   antes (36px→56px), só o teto foi para 60px, acompanhando o H1 geral. */
.hero h1 {
  font-size: clamp(2.25rem, 1.63rem + 2.65vw, var(--fs-h1));
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
}

.hero .lede {
  margin-bottom: var(--space-4);
}

.hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero__eyebrow-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.hero__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.hero__fact strong {
  font-size: var(--fs-small);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hero__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-soft);
  aspect-ratio: 4 / 5;
}

/* --- Placeholder de imagem --------------------------------------------------- */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: var(--fs-xs);
  text-align: center;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

/* --- Animação de entrada (progressive enhancement) ----------------------------
   Por padrão (sem JavaScript, ou antes dele carregar) o conteúdo é sempre
   visível. Só quando a classe .js está presente no <html> — adicionada por um
   script síncrono no <head> — é que o CSS esconde .reveal para a animação de
   entrada via IntersectionObserver (animations.js) fazer sentido. Isso garante
   que nenhum conteúdo dependa de JavaScript para aparecer. */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-base) var(--ease),
    transform var(--duration-base) var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }