/* ============================================================================
   HOME PÚBLICA — jcc-home.css
   Carregada só pela home (section "Estilos" do _PublicLayout), porque nada aqui
   é reaproveitado por outra tela. Tudo prefixado com `hm-` de propósito: a home
   tem seções que o resto do site não tem (hero, faixa de números, blocos de
   cor cheia) e os nomes genéricos — .hero, .btn, .selo — colidiriam com o
   Bootstrap e com o vocabulário de jcc-componentes.css.

   O ritmo da página é a alternância de superfície, nesta ordem:
     nav escura → hero foto → faixa escura → bloco verde → creme →
     branco → creme → rodapé escuro

   Grid: container 1140 · gutter do Bootstrap 5.3. Nenhuma cor literal:
   tudo sai de jcc-tokens.css.
   ========================================================================= */

.hm-wrap { width: min(1140px, 100%); margin-inline: auto; padding-inline: var(--space-40); }

.hm-eyebrow {
  font-size: var(--font-size-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; border-radius: var(--radius-md);
  font-weight: 600; border: 0; cursor: pointer;
  transition: background-color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease);
}
.hm-btn:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 3px; }

/* ── Topo: hero + números ocupam a primeira tela ───────────────────────────
   Não ocupa a tela inteira de propósito: sobra uma faixa do bloco seguinte
   abaixo da dobra, que é o que convida a rolar. */
/* A primeira tela ocupa a viewport inteira, descontada a nav que fica acima:
   hero e faixa de números terminam exatamente na dobra. */
.hm-topo { min-height: calc(100svh - var(--pub-nav-altura, 74px)); display: flex; flex-direction: column; }

.hm-hero {
  position: relative; flex: 1; min-height: 420px; display: flex;
  overflow: hidden; border-bottom: 4px solid var(--brand-accent);
}
/* Foto do hero: WebP com JPEG de reserva. A versão de 1280 atende telas
   pequenas — em celular o recorte aproveita pouco da largura e não compensa
   baixar o arquivo grande. */
.hm-hero-foto {
  position: absolute; inset: 0;
  background-image: url('/img/hero-jipes-1920.jpg');
  background-image: image-set(
    url('/img/hero-jipes-1920.webp') type('image/webp'),
    url('/img/hero-jipes-1920.jpg') type('image/jpeg'));
  background-size: cover; background-position: center 52%;
}
@media (max-width: 900px) {
  .hm-hero-foto {
    background-image: url('/img/hero-jipes-1280.jpg');
    background-image: image-set(
      url('/img/hero-jipes-1280.webp') type('image/webp'),
      url('/img/hero-jipes-1280.jpg') type('image/jpeg'));
  }
}

/* Slideshow do hero: quatro fotos empilhadas em crossfade puro de CSS.
   As fotos 2 a 4 só ganham `background-image` depois que a classe
   `hm-hero-pronto` entra, no evento load — assim elas não disputam banda com
   a foto principal, que é o LCP da página. Sem JavaScript o hero fica
   estático na primeira foto, que é uma degradação aceitável.
   Ciclo de 24s: 4s por foto, com ~0,8s de transição. Não há z-index: a ordem
   do DOM já empilha, e o véu, que vem depois, fica por cima de todas.

   Cada slide acende na sua janela e apaga ao fim dela; o de baixo reaparece
   sozinho quando o de cima some. Quem pediu menos movimento no sistema fica
   só com a primeira foto. */
.hm-hero-foto-2, .hm-hero-foto-3, .hm-hero-foto-4, .hm-hero-foto-5, .hm-hero-foto-6 {
  background-position: center;
  opacity: 0;
  animation-duration: 24s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.hm-hero-pronto .hm-hero-foto-2 {
  background-image: url('/img/rio-willys-1920.jpg');
  background-image: image-set(
    url('/img/rio-willys-1920.webp') type('image/webp'),
    url('/img/rio-willys-1920.jpg') type('image/jpeg'));
  animation-name: hm-hero-slide-2;
}
.hm-hero-pronto .hm-hero-foto-3 {
  background-image: url('/img/barro-willys-1920.jpg');
  background-image: image-set(
    url('/img/barro-willys-1920.webp') type('image/webp'),
    url('/img/barro-willys-1920.jpg') type('image/jpeg'));
  animation-name: hm-hero-slide-3;
}
.hm-hero-pronto .hm-hero-foto-4 {
  background-image: url('/img/fumaca-pickup-1920.jpg');
  background-image: image-set(
    url('/img/fumaca-pickup-1920.webp') type('image/webp'),
    url('/img/fumaca-pickup-1920.jpg') type('image/jpeg'));
  animation-name: hm-hero-slide-4;
}
.hm-hero-pronto .hm-hero-foto-5 {
  background-image: url('/img/azul-fj40-1920.jpg');
  background-image: image-set(
    url('/img/azul-fj40-1920.webp') type('image/webp'),
    url('/img/azul-fj40-1920.jpg') type('image/jpeg'));
  animation-name: hm-hero-slide-5;
}
.hm-hero-pronto .hm-hero-foto-6 {
  background-image: url('/img/jimny-rio-1920.jpg');
  background-image: image-set(
    url('/img/jimny-rio-1920.webp') type('image/webp'),
    url('/img/jimny-rio-1920.jpg') type('image/jpeg'));
  animation-name: hm-hero-slide-6;
}
@media (max-width: 900px) {
  .hm-hero-pronto .hm-hero-foto-2 {
    background-image: url('/img/rio-willys-1280.jpg');
    background-image: image-set(
      url('/img/rio-willys-1280.webp') type('image/webp'),
      url('/img/rio-willys-1280.jpg') type('image/jpeg'));
  }
  .hm-hero-pronto .hm-hero-foto-3 {
    background-image: url('/img/barro-willys-1280.jpg');
    background-image: image-set(
      url('/img/barro-willys-1280.webp') type('image/webp'),
      url('/img/barro-willys-1280.jpg') type('image/jpeg'));
  }
  .hm-hero-pronto .hm-hero-foto-4 {
    background-image: url('/img/fumaca-pickup-1280.jpg');
    background-image: image-set(
      url('/img/fumaca-pickup-1280.webp') type('image/webp'),
      url('/img/fumaca-pickup-1280.jpg') type('image/jpeg'));
  }
  .hm-hero-pronto .hm-hero-foto-5 {
    background-image: url('/img/azul-fj40-1280.jpg');
    background-image: image-set(
      url('/img/azul-fj40-1280.webp') type('image/webp'),
      url('/img/azul-fj40-1280.jpg') type('image/jpeg'));
  }
  .hm-hero-pronto .hm-hero-foto-6 {
    background-image: url('/img/jimny-rio-1280.jpg');
    background-image: image-set(
      url('/img/jimny-rio-1280.webp') type('image/webp'),
      url('/img/jimny-rio-1280.jpg') type('image/jpeg'));
  }
}
@keyframes hm-hero-slide-2 {
  0%, 13.4% { opacity: 0; }
  16.7%, 30% { opacity: 1; }
  33.4%, 100% { opacity: 0; }
}
@keyframes hm-hero-slide-3 {
  0%, 30% { opacity: 0; }
  33.4%, 46.7% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes hm-hero-slide-4 {
  0%, 46.7% { opacity: 0; }
  50%, 63.4% { opacity: 1; }
  66.7%, 100% { opacity: 0; }
}
@keyframes hm-hero-slide-5 {
  0%, 63.4% { opacity: 0; }
  66.7%, 80% { opacity: 1; }
  83.4%, 100% { opacity: 0; }
}
@keyframes hm-hero-slide-6 {
  0%, 80% { opacity: 0; }
  83.4%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

/* Barra de progresso: mede os 4s de cada foto sobre o filete dourado no topo
   do hero. Reinicia a cada slide, então serve de marcador do slideshow sem
   precisar de bolinhas ocupando a composição. */
.hm-hero-barra {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: color-mix(in srgb, var(--brand-accent) 22%, transparent);
  z-index: 3; overflow: hidden;
}
.hm-hero-barra i {
  display: block; height: 100%; width: 0;
  background: var(--brand-accent);
}
.hm-hero-pronto .hm-hero-barra i {
  animation: hm-hero-carga 4s linear infinite;
}
@keyframes hm-hero-carga {
  from { width: 0; }
  to   { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-foto-2, .hm-hero-foto-3, .hm-hero-foto-4, .hm-hero-foto-5, .hm-hero-foto-6 { animation: none; opacity: 0; }
}
.hm-hero-veu {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--neutral-900) 84%, transparent) 0%,
    color-mix(in srgb, var(--neutral-900) 64%, transparent) 42%,
    color-mix(in srgb, var(--neutral-900) 22%, transparent) 74%,
    color-mix(in srgb, var(--neutral-900) 48%, transparent) 100%);
}
.hm-hero-in {
  position: relative; z-index: 2;
  flex: 0 1 auto; width: min(1140px, 100%); margin-inline: auto;
  padding: var(--space-40);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hm-hero-selo { position: absolute; top: var(--space-40); right: var(--space-40); width: 120px; height: 120px; }
.hm-hero-txt { max-width: 780px; }
/* Linha fina acima do título, sem cápsula: a pílula com borda dourada dava
   ao hero cara de template genérico. */
.hm-hero-linha {
  display: block; color: var(--accent-on-photo);
  font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: var(--space-16);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.hm-hero h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 600; font-size: clamp(44px, 6.4vw, 76px); line-height: .96; letter-spacing: .03em;
  color: #fff; margin: 0 0 14px; text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.hm-hero p {
  font-size: var(--font-size-xl); line-height: 1.45; color: rgba(255, 255, 255, .92);
  margin: 0 0 26px; max-width: 640px; text-wrap: pretty;
}
.hm-hero-acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hm-btn-ouro { height: 56px; padding-inline: 26px; background: var(--brand-accent); color: var(--brand-on-secondary); font-size: 17px; font-weight: 700; }
.hm-btn-ouro:hover { background: var(--accent-hover); color: var(--brand-on-secondary); }
.hm-btn-linha { height: 56px; padding-inline: 24px; border: 2px solid rgba(255, 255, 255, .7); color: #fff; font-size: var(--font-size-base); }
.hm-btn-linha:hover { background: var(--white-alpha-100); color: #fff; }

/* ── Faixa de números: fecha a primeira tela ───────────────────────────── */
.hm-numeros { background: var(--surface-overlay); flex: 0 0 auto; }
.hm-numeros-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  width: min(1140px, 100%); margin-inline: auto;
  padding-inline: var(--space-40);
}
.hm-numero {
  padding: 26px var(--space-24); border-right: 1px solid var(--white-alpha-100);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  /* viram links (Eventos, Loja, Seja sócio, Anuidade) sem mudar o visual */
  color: inherit; text-decoration: none;
  transition: background-color var(--motion-base) var(--motion-ease);
}
a.hm-numero:hover { background: var(--white-alpha-100); }
a.hm-numero:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: -3px; }
.hm-numero:last-child { border-right: 0; }
.hm-numero i { font-size: 20px; color: var(--brand-accent); opacity: .75; margin-bottom: 4px; }
.hm-numero b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 22px; color: var(--brand-accent); line-height: 1;
}
.hm-numero span { display: block; font-size: 13px; color: var(--sand-400); margin-top: 6px; max-width: 22ch; }

/* ── O selo, sobre verde militar ───────────────────────────────────────── */
.hm-selo { background: var(--brand-primary); }
.hm-selo-in { padding-block: 56px; display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: center; }
.hm-selo-arte { display: grid; place-items: center; }
.hm-selo-arte img { width: 152px; height: 152px; }
.hm-selo .hm-eyebrow { color: var(--accent-on-brand); margin-bottom: 14px; }
.hm-selo h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 500; font-size: var(--font-size-2xl); line-height: 1.15; letter-spacing: .03em;
  color: #fff; margin: 0 0 var(--space-16); max-width: 640px;
}
.hm-selo p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .86); margin: 0; max-width: 660px; text-wrap: pretty; }

/* ── Títulos de seção ──────────────────────────────────────────────────── */
.hm-titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-24); margin-bottom: var(--space-8); }
.hm-titulo-linha h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 600; font-size: var(--font-size-3xl); letter-spacing: .04em; color: var(--text-primary); margin: 0;
}
.hm-link { font-size: 15px; font-weight: 600; color: var(--brand-primary); text-decoration: none; border-bottom: 2px solid var(--brand-primary); padding-bottom: 2px; white-space: nowrap; }
.hm-link:hover { color: var(--brand-hover); border-bottom-color: var(--brand-hover); }
.hm-sub { font-size: var(--font-size-base); color: var(--text-secondary); margin: 0 0 28px; max-width: 640px; }

/* ── Três caminhos, sobre branco ───────────────────────────────────────── */
.hm-caminhos-bl { background: var(--surface-default); border-top: 1px solid var(--border-subtle); }
.hm-caminhos-in { padding-block: 56px; }
.hm-caminhos-in h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 600; font-size: var(--font-size-3xl); letter-spacing: .04em; margin: 0 0 6px;
}
.hm-caminhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
.hm-caminho {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--radius-lg); padding: 26px; min-height: 190px;
  background: var(--surface-page); border: 1px solid var(--border-subtle);
  transition: border-color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease);
}
.hm-caminho:hover { border-color: var(--brand-primary); }
.hm-caminho:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.hm-caminho .quem { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mud-700); margin-bottom: var(--space-12); }
.hm-caminho .oque { font-family: var(--font-display); font-size: 28px; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; color: var(--text-primary); margin-bottom: 10px; }
.hm-caminho .diz { font-size: 15px; color: var(--text-secondary); line-height: 1.5; }
.hm-caminho .seta { position: absolute; right: var(--space-24); bottom: var(--space-24); color: var(--brand-primary); }
/* o primeiro caminho é a ação com prazo real — recebe o verde da marca */
.hm-caminho.destaque { background: var(--brand-primary); border-color: var(--brand-primary); }
.hm-caminho.destaque:hover { background: var(--brand-hover); }
.hm-caminho.destaque .quem { color: var(--brand-accent); }
.hm-caminho.destaque .oque { color: #fff; }
.hm-caminho.destaque .diz { color: rgba(255, 255, 255, .8); }
.hm-caminho.destaque .seta { color: var(--brand-accent); }

/* ── Quarta-feira ──────────────────────────────────────────────────────── */
.hm-quarta-in { padding-block: 52px; display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: center; border-top: 1px solid var(--border-subtle); }
.hm-quarta .hm-eyebrow { color: var(--mud-700); margin-bottom: var(--space-12); }
.hm-quarta h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 600; font-size: 34px; line-height: 1.06; letter-spacing: .03em; margin: 0 0 14px;
}
.hm-quarta p { font-size: 17px; line-height: 1.65; color: var(--sand-800); margin: 0 0 22px; max-width: 560px; text-wrap: pretty; }
.hm-quarta-acoes { display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap; }
.hm-btn-verde { height: 48px; padding-inline: 22px; background: var(--brand-primary); color: #fff; font-size: var(--font-size-base); }
.hm-btn-verde:hover { background: var(--brand-hover); color: #fff; }
.hm-nota { font-size: 15px; color: var(--text-secondary); }

/* Slot de imagem ainda não produzida: descreve a foto que falta, em vez de
   fingir com um placeholder cinza. Sai quando a imagem existir. */
.hm-quarta-foto { display: block; margin: 0; }
.hm-quarta-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); display: block;
}
.hm-quarta-foto figcaption {
  font-size: var(--font-size-sm); color: var(--mud-700);
  line-height: 1.45; margin-top: var(--space-12);
}

/* ── Seção genérica de duas colunas (texto + foto) ─────────────────────── */
.hm-secao-in { padding-block: 56px; }
.hm-branco { background: var(--surface-default); border-block: 1px solid var(--border-subtle); }
.hm-h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 600; font-size: var(--font-size-3xl); line-height: 1.06;
  letter-spacing: .04em; color: var(--text-primary); margin: 0 0 14px;
}
.hm-lead { font-size: 17px; line-height: 1.65; color: var(--sand-800); margin: 0; max-width: 560px; text-wrap: pretty; }
.hm-lead + .hm-lead { margin-top: var(--space-16); }

.hm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hm-split img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }
/* .inverso põe a foto primeiro no desktop; no mobile a ordem volta ao fluxo. */
.hm-split.inverso > img { order: -1; }
.hm-foto-alta { aspect-ratio: 4 / 5; max-height: 520px; }
.hm-foto-larga { aspect-ratio: 4 / 3; }

/* ── Linha do tempo ────────────────────────────────────────────────────── */
.hm-tempo-grid { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; margin-top: var(--space-32); }
.hm-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-32); position: relative; }
.hm-timeline::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--sand-300);
}
.hm-timeline li { position: relative; padding-bottom: var(--space-32); }
.hm-timeline li:last-child { padding-bottom: 0; }
.hm-timeline li::before {
  content: ''; position: absolute; left: calc(-1 * var(--space-32) + 2px); top: 6px;
  width: 12px; height: 12px; border-radius: var(--radius-full);
  background: var(--brand-primary); box-shadow: 0 0 0 4px var(--surface-default);
}
/* O marco atual se destaca sem depender só de cor: o ponto fica dourado e maior. */
.hm-timeline li.agora::before { background: var(--brand-accent); width: 16px; height: 16px; left: calc(-1 * var(--space-32)); }
.hm-timeline > li > b {
  display: block; font-family: var(--font-display); font-size: var(--font-size-2xl);
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-primary); line-height: 1.1;
}
/* Dentro do texto, negrito é só negrito. */
.hm-timeline span b { font-weight: 700; color: var(--text-primary); }
.hm-timeline span { display: block; font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin-top: 6px; max-width: 52ch; }

.hm-acervo { margin: 0; background: var(--sand-50); border-radius: var(--radius-lg); padding: var(--space-16); }
.hm-acervo img { width: 100%; border-radius: var(--radius-md); display: block; }
.hm-acervo figcaption { font-size: 13px; color: var(--text-secondary); margin-top: var(--space-12); text-align: center; }

/* ── Benefícios do sócio ───────────────────────────────────────────────── */
.hm-beneficios { list-style: none; margin: var(--space-20) 0 var(--space-24); padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.hm-beneficios li { display: flex; align-items: flex-start; gap: var(--space-12); font-size: 15px; line-height: 1.5; color: var(--sand-800); }
.hm-beneficios i { color: var(--brand-primary); font-size: var(--font-size-lg); flex-shrink: 0; line-height: 1.3; }

/* ── Vitrine da loja ───────────────────────────────────────────────────── */
.hm-produtos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); margin-top: 28px; }
.hm-produto {
  display: block; text-decoration: none; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-page); border: 1px solid var(--border-subtle);
  transition: border-color var(--motion-base) var(--motion-ease);
}
.hm-produto:hover { border-color: var(--brand-primary); }
.hm-produto:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.hm-produto-foto {
  aspect-ratio: 4 / 3; background: var(--brand-primary);
  display: grid; place-items: center; overflow: hidden;
}
.hm-produto-foto img { width: 100%; height: 100%; object-fit: cover; }
.hm-produto-foto .selo-fallback { width: 68px; height: 68px; object-fit: contain; }
.hm-produto-info { padding: var(--space-16) var(--space-20) var(--space-20); }
.hm-produto-nome { font-family: var(--font-display); font-size: var(--font-size-xl); text-transform: uppercase; letter-spacing: .03em; color: var(--text-primary); line-height: 1.1; }
.hm-produto-precos { margin-top: 10px; display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }
.hm-preco-socio { font-weight: 700; font-size: var(--font-size-lg); color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.hm-preco-rotulo { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--mud-700); }
.hm-preco-cheio { font-size: var(--font-size-sm); color: var(--text-secondary); text-decoration: line-through; }
.hm-produto-vertudo { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; padding: var(--space-24); }

/* ── Faixa de fechamento ───────────────────────────────────────────────── */
.hm-cta { position: relative; overflow: hidden; border-block: 4px solid var(--brand-accent); }
.hm-cta-foto {
  position: absolute; inset: 0;
  background-image: url('/img/faixa-mono.jpg');
  background-size: cover; background-position: center;
}
.hm-cta-veu { position: absolute; inset: 0; background: color-mix(in srgb, var(--neutral-900) 78%, transparent); }
.hm-cta-in { position: relative; z-index: 2; padding-block: 56px; text-align: center; }
.hm-cta .hm-eyebrow { color: var(--brand-accent); margin-bottom: var(--space-12); }
.hm-cta h2 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  font-size: var(--font-size-4xl); line-height: 1.06; letter-spacing: .03em; color: #fff; margin: 0 0 14px;
}
.hm-cta p { font-size: 17px; color: rgba(255, 255, 255, .85); margin: 0 auto var(--space-32); max-width: 52ch; }

/* ── Responsivo — 375px é a base ───────────────────────────────────────── */
@media (max-width: 980px) {
  .hm-wrap { padding-inline: var(--space-20); }

  .hm-hero { min-height: 460px; }
  .hm-hero-veu {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--neutral-900) 45%, transparent) 0%,
      color-mix(in srgb, var(--neutral-900) 86%, transparent) 55%,
      color-mix(in srgb, var(--neutral-900) 96%, transparent) 100%);
  }
  .hm-hero-selo { width: 76px; height: 76px; top: 20px; right: 20px; }
  .hm-hero-in { padding: var(--space-32) var(--space-20); }
  .hm-hero-txt { max-width: 100%; }
  .hm-hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .hm-hero p { font-size: var(--font-size-lg); }
  .hm-hero-acoes .hm-btn { flex: 1 1 100%; }

  .hm-numeros-in { grid-template-columns: repeat(2, 1fr); padding-inline: var(--space-20); }
  .hm-numero { border-bottom: 1px solid var(--white-alpha-100); padding: var(--space-20); }
  .hm-numero:first-child, .hm-numero:last-child { padding-inline: var(--space-20); }
  .hm-numero:nth-child(2n) { border-right: 0; }

  .hm-selo-in { grid-template-columns: 1fr; gap: var(--space-24); text-align: center; }
  .hm-selo-arte { justify-self: center; width: 200px; }
  .hm-selo h2 { font-size: var(--font-size-3xl); }

  .hm-titulo-linha { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .hm-caminhos { grid-template-columns: 1fr; }
  .hm-quarta-in { grid-template-columns: 1fr; }

  .hm-secao-in { padding-block: var(--space-40); }
  .hm-split { grid-template-columns: 1fr; gap: var(--space-24); }
  /* No celular o texto vem sempre antes da foto, inclusive no .inverso. */
  .hm-split.inverso > img { order: 0; }
  .hm-foto-alta { aspect-ratio: 4 / 3; max-height: none; }

  .hm-tempo-grid { grid-template-columns: 1fr; gap: var(--space-24); }
  .hm-acervo { max-width: 320px; margin-inline: auto; }
  .hm-timeline > li > b { font-size: var(--font-size-xl); }

  .hm-produtos { grid-template-columns: 1fr; }
  .hm-cta-in { padding-block: var(--space-40); }
  .hm-cta h2 { font-size: var(--font-size-3xl); }
}