/* =============================================================
   Mix Pneus Jundiaí — camada do projeto sobre o Static Sites DS
   Ordem obrigatória: tokens.css → base.css → components.css → este.

   Knobs do projeto (só estes variam, por regra do DS):
     · matiz  hsl(22 88%)  = laranja amostrado do logo
     · fonte  Barlow (títulos) + Inter (corpo e botões)
   Raio único: 8px.
   ============================================================= */

:root {
  --hue: 22;
  --sat: 88%;

  /* Secundária por harmonia análoga (22 → 45): o amarelo da fachada. */
  --c-accent: hsl(45 96% 52%);

  /* Fundo da página. hsl(22 100% 99%) resolve exatamente em #FFFCFA,
     então o valor pedido já nasce dentro da matiz do projeto e continua
     em HSL, que é o espaço de trabalho do DS. Segue sendo branco
     tingido, não o #FFFFFF que o sistema proíbe. */
  --c-bg: hsl(var(--hue) 100% 99%);

  --radius: var(--r-md);

  --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-display: "Barlow", "Inter", system-ui, sans-serif;
  --fw-title: 700;   /* divergência assumida: só há 400/700 do Barlow */

  /* ---------- Escala tipográfica, um degrau abaixo do DS ----------
     O DS entrega 56/48/40/32/24/20 e 28/24/20/16. O projeto desce um
     passo em cada nível, porque a página é longa e o texto de oficina
     pede leitura mais densa que a de uma landing de produto. */
  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 16px;

  --fs-p-xl: 24px;
  --fs-p-l:  20px;
  --fs-p-m:  16px;
  --fs-p-s:  14px;
}

/* Sem redefinição de --btn-*: os valores do DS já são exatamente os
   do guia (G 24/32/32 · M 20/48/24 · P 16/32/16). A versão anterior
   encolhia esses tokens no mobile, o que quebrava o guia. */

/* =============================================================
   TIPOGRAFIA E QUEBRA DE LINHA
   O DS já aplica balance/pretty em h1–h6 e p; aqui a regra é
   estendida para os elementos que não são <p> nem heading.
   ============================================================= */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; letter-spacing: -0.01em; }
p, li, dd, figcaption { text-wrap: pretty; }
.point span, .qa > p, .scard p, .footer__brand p, .modelos { text-wrap: pretty; }

/* Subtítulos ficam em balance, não em pretty: são linhas curtas de
   apoio ao título, e equilibrar as linhas lê melhor que só evitar a
   órfã da última linha. */
.lead, summary, .point b, .info b, .scard h3, .footer__col b { text-wrap: balance; }

/* ---------- Helpers ---------- */
.section        { padding-block: var(--sp-96); }
.section--tight { padding-block: var(--sp-64); }
.stack > * + *  { margin-top: var(--sp-20); }
.lead           { color: var(--c-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  color: var(--c-primary-strong);
  font-size: var(--fs-p-s); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}

/* =============================================================
   GRADE — o conteúdo assenta nas 12 colunas do workspace em vez
   de esticar de ponta a ponta. É o que corrige a linha de leitura
   longa demais sem precisar de max-width em ch.
   ============================================================= */
.sec-head   { grid-column: 1 / span 7; margin-bottom: var(--sp-48); }
.sec-head--center { grid-column: 3 / span 8; text-align: center; margin-inline: auto; }
.sec-head--center .eyebrow { justify-content: center; }

/* .split vira transparente para a grade: os filhos viram itens do
   próprio workspace, então media e texto caem em colunas reais. */
.split { display: contents; }
.split__media { grid-column: 1 / span 5; }
.split__copy  { grid-column: 7 / span 6; }
.split--flip .split__media { grid-column: 8 / span 5; }
.split--flip .split__copy  { grid-column: 1 / span 6; }

/* grid-row explícito é obrigatório no bloco invertido: a foto ocupa a
   coluna 8 e o texto a coluna 1, então o auto-placement, que só anda
   pra frente, jogava o texto para a linha 2 e a foto ficava sozinha
   numa linha própria. */
.split__media, .split__copy,
.spotlight__copy, .spotlight__media, .map { grid-row: 1; }

/* A foto acompanha a altura da seção: começa no topo e termina na
   base, alinhada com o bloco de texto. align-self stretch faz o item
   ocupar a linha inteira do grid, então nada de aspect-ratio fixo
   aqui, senão a imagem volta a flutuar no meio da coluna. */
.split__media {
  align-self: stretch;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--c-border); background: var(--c-surface);
  min-height: 420px;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   BOTÕES — guia do projeto
   Tamanhos e paddings vêm dos tokens do DS, que já batem com o guia.
   Aqui entram as 4 variações e os 3 estados (padrão, hover, active).
   ============================================================= */
.btn { font-family: var(--ff); }
.btn .ic { width: 1em; height: 1em; flex: none; }

.btn--primary { background: var(--c-primary); color: var(--c-50); }
.btn--primary:hover { background: var(--c-primary-strong); }
.btn--primary:active { background: var(--c-950); }

.btn--secondary { background: transparent; color: var(--c-primary-strong); border-color: var(--c-primary); }
.btn--secondary:hover { background: var(--c-primary); color: var(--c-50); }
.btn--secondary:active { background: var(--c-primary-strong); color: var(--c-50); }

.btn--tertiary { background: transparent; color: var(--c-primary-strong); border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn--tertiary:hover { background: transparent; color: var(--c-700); }
.btn--tertiary:active { background: transparent; color: var(--c-950); }

.btn--icon { background: var(--c-primary); color: var(--c-50); padding: var(--sp-16); aspect-ratio: 1 / 1; }
.btn--icon:hover { background: var(--c-primary-strong); }
.btn--icon:active { background: var(--c-950); }

/* Sobre a faixa escura do topo */
.btn--ghost-light { background: transparent; color: var(--c-50); border-color: hsl(var(--hue) 14% 30%); }
.btn--ghost-light:hover { background: hsl(var(--hue) 14% 14%); }
.btn--ghost-light:active { background: hsl(var(--hue) 14% 20%); }

/* Pares de botão: mesma largura e mesmo tratamento de ícone */
.actions { display: flex; gap: var(--sp-16); flex-wrap: wrap; align-items: stretch; }
.actions .btn { flex: 0 1 auto; }
.actions--fill .btn { flex: 1 1 0; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: var(--radius);
}

/* =============================================================
   HEADER + HERO — a única faixa escura da página (o rodapé é a
   convenção da regra 8c). O escuro fica em cada elemento, não num
   wrapper em volta do <main>.
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 30;
  color: var(--c-50);
  background: hsl(var(--hue) 12% 4% / .86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid hsl(var(--hue) 14% 16%);
}
.nav { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-32); padding-block: var(--sp-12); }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 40px; width: auto; flex: none; }
.nav__links { display: flex; gap: var(--sp-28); margin-left: auto; }
.nav__link {
  color: hsl(var(--hue) 10% 74%); text-decoration: none;
  font-size: var(--fs-p-s); padding: var(--sp-8) 0; transition: color .15s ease;
}
.nav__link:hover { color: var(--c-50); }
.nav__cta { display: flex; gap: var(--sp-12); align-items: center; }
.nav__toggle { display: none; background: transparent; border-color: transparent; color: var(--c-50); padding: var(--sp-8); aspect-ratio: auto; }
.nav__toggle:hover { background: transparent; }
.nav__menu-cta { display: none; }

.hero-section { position: relative; overflow: hidden; background: var(--c-950); color: var(--c-50); }
.hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      var(--c-950) 0%,
      hsl(var(--hue) 12% 4% / .84) 46%,
      hsl(var(--hue) 12% 4% / .44) 74%,
      hsl(var(--hue) 12% 4% / .28) 100%),
    linear-gradient(0deg, var(--c-950) 0%, transparent 34%);
}
.hero-section .workspace { position: relative; z-index: 2; }
.hero { grid-column: 1 / span 7; padding-block: var(--sp-96) 0; }
.hero__copy { display: flex; flex-direction: column; gap: var(--sp-20); align-items: flex-start; }
.hero .lead { color: hsl(var(--hue) 12% 82%); }

/* Sem pílula: o local é texto solto, com o mesmo tratamento de
   sobretítulo do resto da página. */
.hero__local {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  color: var(--c-accent); font-size: var(--fs-p-s);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

/* Sem pílula: os argumentos viram uma linha de texto solta.
   padding-block com um valor só: o mesmo espaço acima (entre o botão
   do hero e os destaques) e abaixo (entre os destaques e o fim da
   faixa escura), em vez de depender da margem do .hero vizinho. */
.hero__facts {
  grid-column: 1 / span 9; display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24);
  padding-block: var(--sp-64); color: hsl(var(--hue) 12% 76%); font-size: var(--fs-p-s);
}
.hero__facts span { display: inline-flex; align-items: center; gap: var(--sp-8); }
.hero__facts span::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--c-accent); flex: none; }

/* =============================================================
   TRILHOS — van e carro
   Sem caixa em volta do ícone: o traço fica solto ao lado do texto,
   que é mais leve e não compete com a foto.
   ============================================================= */
.points { display: flex; flex-direction: column; gap: var(--sp-24); margin-top: var(--sp-8); }
.point { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-16); align-items: start; }
.point > svg { width: 20px; height: 20px; color: var(--c-primary); margin-top: 3px; }
.point__num {
  width: 20px; height: 20px; border-radius: var(--r-full);
  background: var(--c-primary); color: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: var(--fw-title); font-size: 11px;
  margin-top: 1px;
}
.point b { display: block; font-family: var(--ff-display); font-weight: var(--fw-title); font-size: var(--fs-p-l); margin-bottom: var(--sp-4); }
.point span { color: var(--c-muted); font-size: var(--fs-p-s); }
.modelos { color: var(--c-muted); font-size: var(--fs-p-s); }

/* =============================================================
   CENTRO AUTOMOTIVO
   ============================================================= */
.svc-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-32); }
.scard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* height:auto é obrigatório: o atributo height do HTML entra como
   altura definida e, com altura definida, o aspect-ratio é ignorado. */
.scard img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-100); }
.scard__body { padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-8); }
.scard h3 { font-size: var(--fs-p-l); }
.scard p { color: var(--c-muted); font-size: var(--fs-p-s); }
.scard--cta { justify-content: center; gap: var(--sp-16); padding: var(--sp-32); align-items: flex-start; }

/* =============================================================
   ALINHAMENTO 3D
   ============================================================= */
.spotlight__copy { grid-column: 1 / span 5; align-self: center; display: flex; flex-direction: column; gap: var(--sp-20); align-items: flex-start; }
.spotlight__media { grid-column: 7 / span 6; align-self: center; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--c-border); }
.spotlight__media img { width: 100%; height: 100%; object-fit: cover; }
/* Espelhado: mídia à esquerda, texto à direita (balanceamento).
   display:contents, igual ao .split, senão o wrapper vira 1 item só
   da grade e as regras de grid-column dos filhos deixam de valer. */
.spotlight--flip { display: contents; }
.spotlight--flip .spotlight__media { grid-column: 1 / span 6; }
.spotlight--flip .spotlight__copy { grid-column: 8 / span 5; }

/* Lista de verificação (o que o alinhamento ajuda a evitar) */
.check-list { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-8); padding-left: 0; }
.check-list li { display: flex; align-items: center; gap: var(--sp-8); color: var(--c-muted); font-size: var(--fs-p-s); list-style: none; }
.check-list svg { width: 16px; height: 16px; color: var(--c-primary); flex: none; }

/* =============================================================
   MÉTODO DE ENVIO (medida ou placa) e DIFERENCIAIS numerados
   Reaproveitam .svc-grid/.scard para manter a mesma responsividade.
   ============================================================= */
.method-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-32); }
.method-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-32); text-align: center; }
.method-card svg { width: 32px; height: 32px; color: var(--c-primary); margin-inline: auto; }
.method-card h3 { font-size: var(--fs-p-l); margin-top: var(--sp-16); }
.method-card p { color: var(--c-muted); font-size: var(--fs-p-s); margin-top: var(--sp-8); }

.scard__num { padding: var(--sp-24) var(--sp-24) 0; font-family: var(--ff-display); font-weight: var(--fw-title); color: var(--c-primary); font-size: var(--fs-h3); }
.scard__icon { padding: var(--sp-24) var(--sp-24) 0; }
.scard__icon svg { width: 28px; height: 28px; color: var(--c-primary); }

/* =============================================================
   O ESTOQUE
   ============================================================= */
.wall { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 170px; gap: var(--sp-16); }
.wall a { border-radius: var(--radius); overflow: hidden; display: block; }
.wall img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.wall a:hover img { transform: scale(1.05); }
.wall a:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.wall a:nth-child(2) { grid-column: 3; grid-row: 1; }
.wall a:nth-child(3) { grid-column: 4; grid-row: 1 / span 2; }
.wall a:nth-child(4) { grid-column: 3; grid-row: 2; }
.wall a:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; }
.wall a:nth-child(6) { grid-column: 3 / span 2; grid-row: 3; }

/* =============================================================
   LOCALIZAÇÃO
   ============================================================= */
.map { grid-column: 1 / span 5; align-self: center; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-border); background: var(--c-100); }
.map iframe { width: 100%; height: 100%; border: 0; }
.map__link { position: absolute; inset: 0; z-index: 2; }
.info b { display: block; font-family: var(--ff-display); font-weight: var(--fw-title); font-size: var(--fs-p-l); margin-bottom: var(--sp-4); }
.info span, .info a { color: var(--c-muted); font-size: var(--fs-p-s); text-decoration: none; }
.info a:hover { color: var(--c-primary-strong); }

/* =============================================================
   CTA FINAL
   ============================================================= */
.cta {
  grid-column: 2 / span 10;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-20);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-80) var(--sp-48);
}

/* =============================================================
   PERGUNTAS
   ============================================================= */
.faq { grid-column: 3 / span 8; }
.qa { border-bottom: 1px solid var(--c-border); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  padding: var(--sp-24) 0; cursor: pointer; list-style: none;
  font-family: var(--ff-display); font-weight: var(--fw-title); font-size: var(--fs-p-l);
  transition: color .15s ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--c-primary-strong); }
.qa summary svg { width: 20px; height: 20px; flex: none; color: var(--c-primary); transition: transform .2s ease; }
.qa[open] summary svg { transform: rotate(180deg); }
.qa > p { color: var(--c-muted); font-size: var(--fs-p-s); padding-bottom: var(--sp-24); }

/* =============================================================
   RODAPÉ — padrão 8c do DS. Cinza tingido de baixa saturação,
   porque a rampa da matiz em laranja fica salmão demais no escuro.
   ============================================================= */
.site-footer { background: var(--c-950); color: hsl(var(--hue) 12% 72%); padding-block: var(--sp-64); }
.footer { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: var(--sp-48); }
.footer a { color: hsl(var(--hue) 12% 72%); text-decoration: none; transition: color .15s ease; }
.footer a:hover { color: var(--c-50); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-16); font-size: var(--fs-p-s); }
.footer__col b { color: var(--c-50); font-family: var(--ff-display); font-weight: var(--fw-title); font-size: var(--fs-p-l); }
.footer__brand img { height: 44px; width: auto; align-self: flex-start; margin-bottom: var(--sp-16); }
.footer__brand p { color: hsl(var(--hue) 10% 58%); max-width: 40ch; }
.footer__line { display: flex; align-items: flex-start; gap: var(--sp-8); }
.footer__line svg { width: 18px; height: 18px; flex: none; color: var(--c-primary); margin-top: 2px; }
.footer__bottom {
  grid-column: 1 / -1; display: flex; justify-content: center; text-align: center; flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-24); margin-top: var(--sp-48); padding-top: var(--sp-24);
  border-top: 1px solid hsl(var(--hue) 14% 16%); font-size: var(--fs-p-s); color: hsl(var(--hue) 10% 55%);
}

/* =============================================================
   WHATSAPP FLUTUANTE
   Exceção documentada à regra 8b: o glifo do WhatsApp é marca, não
   ícone de interface, então entra preenchido e na cor da marca.
   ============================================================= */
.wa-fab {
  position: fixed; right: var(--sp-24); bottom: var(--sp-24); z-index: 45;
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; background: #25d366; color: #fff;
  border-radius: var(--r-full); box-shadow: var(--shadow);
  transition: background-color .15s ease;
}
.wa-fab:hover { background: #1da851; }
.wa-fab svg { width: 32px; height: 32px; }

/* =============================================================
   MOVIMENTO — estado inicial só depois que o GSAP assume
   ============================================================= */
.gsap-ready [data-anim], .gsap-ready [data-anim-group] > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .gsap-ready [data-anim], .gsap-ready [data-anim-group] > * { opacity: 1; }
  .qa summary svg, .wall img { transition: none; }
}

section[id] { scroll-margin-top: var(--sp-80); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =============================================================
   BREAKPOINTS
   As media queries do base.css vêm ANTES desta folha, então toda
   sobrescrita responsiva precisa ser repetida aqui, senão o :root
   acima vence e a escala trava no tamanho de desktop.
   ============================================================= */
@media (max-width: 1200px) {
  .sec-head, .sec-head--center, .hero, .hero__facts,
  .split__media, .split__copy, .split--flip .split__media, .split--flip .split__copy,
  .spotlight__copy, .spotlight__media, .map, .cta, .faq { grid-column: 1 / -1; }
  /* empilhado, cada um volta a ter a própria linha, senão sobrepõem */
  .split__media, .split__copy, .spotlight__copy, .spotlight__media, .map { grid-row: auto; }
  /* especificidade: ".spotlight--flip .spotlight__media" (2 classes) vence o
     reset genérico de 1 classe acima, então o empilhado precisa repetir aqui
     com a mesma especificidade pra não ficar preso ao "1 / span 6" do desktop */
  .spotlight--flip .spotlight__media, .spotlight--flip .spotlight__copy { grid-column: 1 / -1; }
  .spotlight--flip .spotlight__media { order: -1; }
  /* Empilhado, quem separa os blocos é o row-gap do próprio grid, e
     não margem solta. Margem embaixo da imagem não resolvia a seção
     de alinhamento, onde a imagem vem DEPOIS do texto: ali o espaço
     ficava do lado errado e os dois encostavam. */
  main > section:not(.hero-section) > .workspace { row-gap: var(--sp-40); }
  .sec-head, .sec-head--center { margin-bottom: 0; }
  .split__media, .spotlight__media, .map { margin-bottom: 0; }
  /* Empilhado nada é centrado na vertical. Sobrar align-self:center
     aqui fazia o item não casar com a altura da própria linha, e o
     estouro comia o row-gap: o mapa encostava no texto. */
  .split__media, .split__copy, .spotlight__copy, .spotlight__media, .map { align-self: auto; }
  /* empilhado, a foto volta a ter proporção própria */
  .split__media { min-height: 0; aspect-ratio: 16 / 10; }
  .split--flip .split__media { order: -1; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .nav__links, .nav__cta .btn--ghost-light, .nav__cta .btn--primary { display: none; }
  .nav__toggle { display: inline-flex; margin-left: auto; }
  .nav__links--open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--c-950);
    border-bottom: 1px solid hsl(var(--hue) 14% 16%); padding: var(--sp-16) var(--sp-24);
  }
  .nav__links--open .nav__link { padding: var(--sp-16) 0; border-bottom: 1px solid hsl(var(--hue) 14% 12%); }
  .nav__links--open .nav__menu-cta { display: inline-flex; width: 100%; justify-content: center; margin-top: var(--sp-16); }
}

@media (max-width: 880px) {
  /* ---------- Escala mobile fluida, em vw ----------
     Mesmo padrão do Portfolio: calc((100vw - 16px) / N), com o
     divisor ancorado em 375px de viewport, onde 100vw menos a margem
     dá 359px úteis. Divisor = 359 ÷ tamanho alvo.

     O clamp existe pelas duas pontas. O piso segura a legibilidade
     em telas de 320px. O teto é o tamanho de desktop, então em 880px
     o texto encosta no valor do desktop e não dá salto ao cruzar o
     breakpoint.

     DIVERGÊNCIA DO DS, sinalizada: o design-system.md define a escala
     mobile em px fixo (32/28/24/20/18/16). Aqui ela é fluida a pedido
     do João, seguindo o que os projetos do acervo já fazem. Os alvos
     em 375px são os px do projeto, um degrau abaixo do DS. */
  :root {
    --fs-h1: clamp(26px, calc((100vw - 16px) / 11.22), 48px);  /* 32px @375 */
    --fs-h2: clamp(22px, calc((100vw - 16px) / 12.82), 40px);  /* 28px @375 */
    --fs-h3: clamp(20px, calc((100vw - 16px) / 14.96), 32px);  /* 24px @375 */
    --fs-h4: clamp(16px, calc((100vw - 16px) / 17.95), 24px);  /* 20px @375 */
    --fs-h5: clamp(16px, calc((100vw - 16px) / 19.94), 20px);  /* 18px @375 */
    --fs-h6: clamp(14px, calc((100vw - 16px) / 22.44), 16px);  /* 16px @375 */

    --fs-p-xl: clamp(16px, calc((100vw - 16px) / 17.95), 24px); /* 20px @375 */
    --fs-p-l:  clamp(16px, calc((100vw - 16px) / 19.94), 20px); /* 18px @375 */
    --fs-p-m:  clamp(14px, calc((100vw - 16px) / 22.44), 16px); /* 16px @375 */
    --fs-p-s:  clamp(13px, calc((100vw - 16px) / 25.64), 14px); /* 14px @375 */
  }
  .section { padding-block: var(--sp-80); }
  .section--tight { padding-block: var(--sp-64); }
  /* row-gap zerado de propósito: a simetria dos destaques vem só do
     padding-block do próprio .hero__facts, não de um gap externo
     somado a ele (senão o espaço de cima e o de baixo divergem). */
  .hero-section > .workspace { row-gap: 0; }
  .hero { padding-block: var(--sp-48) 0; }
  .hero__facts { padding-block: var(--sp-40); }
  .hero__scrim { background: linear-gradient(180deg, hsl(var(--hue) 12% 4% / .42) 0%, hsl(var(--hue) 12% 4% / .88) 100%); }
  .svc-grid { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; gap: var(--sp-32); }
  .cta { padding: var(--sp-48) var(--sp-24); }
  .wall { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 150px; }
  .wall a:nth-child(n) { grid-column: auto; grid-row: auto; }
  .wall a:nth-child(1) { grid-column: 1 / span 2; grid-row: span 2; }
  /* com 6 itens e o primeiro ocupando duas colunas, sobra o último
     sozinho numa linha; ele abre pra largura toda em vez de ficar
     meia foto com um buraco do lado */
  .wall a:nth-child(6) { grid-column: 1 / span 2; }
}

@media (max-width: 767px) {
  /* A largura útil passa a acompanhar a viewport.
     DIVERGÊNCIA DO DS, necessária: a tabela do sistema fixa 360px
     aqui. Com a escala tipográfica em vw isso quebra, porque entre
     360px e 767px de tela a coluna congela em 360 enquanto a fonte
     continua crescendo, e o título estoura a medida. Acompanhando a
     viewport, fonte e coluna crescem juntas, que é a premissa do
     cálculo em vw. De quebra some a margem lateral enorme que
     sobrava em telas de 500 a 767px. */
  :root { --workspace: 100%; }

  .actions { width: 100%; }
  .actions .btn { flex: 1 1 100%; }
  .wa-fab { right: var(--sp-16); bottom: var(--sp-16); width: 56px; height: 56px; }
}