/* Ninaut Advocacia — site vitrine (etapa 1). Cores, tipos, espaço e movimento vêm de tokens.css (marca base #138). */

@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/firasans-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/firasans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/firasans-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/firasans-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--cor-fundo); color: var(--cor-texto);
  font-family: var(--fonte-texto); font-weight: var(--peso-texto); font-size: var(--fs-texto); line-height: var(--lh-texto);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--cor-link); text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); color: var(--cor-titulo); line-height: var(--lh-titulo); letter-spacing: var(--tracking-titulo); margin: 0; text-wrap: balance; font-kerning: normal; }
p { margin: 0; max-width: var(--medida-texto); text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: var(--esp-2); top: -4rem; z-index: 100; background: var(--ninaut-ocre); color: var(--ninaut-cacau); padding: .75rem 1rem; font-weight: 600; text-decoration: none; }
.pular:focus { top: var(--esp-2); }

/* Grão sutil (1.3, item 4): SVG de ruído sobre toda a página */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grao-opacidade);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.grade { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--margem-lateral);
  display: grid; grid-template-columns: repeat(var(--grid-colunas), minmax(0, 1fr)); column-gap: var(--grid-calha); }

.etiqueta { font-family: var(--fonte-texto); font-size: var(--fs-etiqueta); font-weight: var(--peso-ui); letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase; color: var(--cor-destaque-texto); display: inline-flex; align-items: center; gap: .9rem; }
.etiqueta::before { content: ""; width: 2.5rem; height: var(--linha-ocre); background: currentColor; }

.ic { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- botões (estados: padrão, hover, foco, ativo) ---------- */
.botao {
  --b-fundo: var(--cor-botao); --b-texto: var(--cor-botao-texto);
  position: relative; display: inline-flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .95rem 1.6rem;
  background: var(--b-fundo); color: var(--b-texto); border: 0; border-radius: var(--raio-1); text-decoration: none;
  font: var(--peso-botao) 1rem/1.2 var(--fonte-texto); letter-spacing: .01em; cursor: pointer; isolation: isolate; overflow: hidden;
  transition: transform var(--tempo-micro) var(--curva-padrao), box-shadow var(--tempo-ui) var(--curva-saida);
}
.botao::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cor-botao-hover);
  transform: scaleX(0); transform-origin: left; transition: transform var(--tempo-ui) var(--curva-saida); }
.botao:hover::before { transform: scaleX(1); }
.botao:hover { box-shadow: var(--sombra-2); }
.botao:active { transform: translateY(1px) scale(.99); }
.botao .ic-seta { transition: transform var(--tempo-ui) var(--curva-saida); }
.botao:hover .ic-seta { transform: translateX(4px); }
.botao--linha { --b-fundo: transparent; --b-texto: var(--cor-titulo); box-shadow: inset 0 0 0 1px var(--cor-borda); }
.botao--linha::before { background: var(--cor-titulo); }
.botao--linha:hover { color: var(--cor-fundo); }

.link-linha { color: var(--cor-link); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--tempo-ui) var(--curva-saida); padding-bottom: 2px; }
.link-linha:hover, .link-linha:focus-visible { background-size: 100% 1px; }

/* ---------- cabeçalho ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color var(--tempo-ui) var(--curva-padrao), box-shadow var(--tempo-ui); }
.topo.is-solido { background: var(--ninaut-cacau); box-shadow: 0 1px 0 var(--cor-linha); }
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  max-width: var(--largura-max); margin-inline: auto; padding: .9rem var(--margem-lateral); }
.topo__marca { display: inline-flex; align-items: center; min-height: 2.75rem; }
.topo__marca img { height: 2.6rem; width: auto; }
.topo nav ul { display: flex; gap: var(--esp-4); list-style: none; margin: 0; padding: 0; }
.topo nav a { color: var(--ninaut-texto-claro); font-size: .9375rem; font-weight: var(--peso-ui); }
.topo .botao { min-height: 2.75rem; padding: .6rem 1.1rem; font-size: .9375rem; }

/* ---------- 1. hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding-block: 8rem var(--esp-5);
  background: radial-gradient(120% 80% at 85% 20%, #5a2510 0%, var(--ninaut-chocolate) 45%, var(--ninaut-cacau) 100%); overflow: clip; }
.hero__texto { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 2; }
.hero h1 { display: grid; gap: var(--esp-4); }
.hero__onde { font: var(--peso-ui) var(--fs-etiqueta)/1.4 var(--fonte-texto); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--ninaut-ocre-claro);
  display: inline-flex; align-items: center; gap: .9rem; }
.hero__onde::before { content: ""; width: 2.5rem; height: var(--linha-ocre); background: currentColor; }
.hero__lema { font-size: clamp(2.75rem, 1rem + 4vw, 4.25rem); line-height: var(--lh-display); font-weight: var(--peso-titulo); letter-spacing: -.005em; }
.hero__lema .linha { display: block; overflow: clip; padding-bottom: .06em; }
.hero__lema .linha > span { display: inline-block; }
.hero__lema em { font-style: normal; color: var(--ninaut-ocre); }
.hero__sub { margin-top: var(--esp-4); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--ninaut-texto-claro); max-width: 40ch; font-weight: 300; }
.hero__sub strong { font-weight: 500; color: var(--ninaut-branco); }
.hero__areas { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero__areas li { padding: .5rem .9rem; border: 1px solid rgba(224, 168, 90, .5); border-radius: var(--raio-1);
  font: var(--peso-ui) var(--fs-pequeno)/1.2 var(--fonte-texto); letter-spacing: .04em; color: var(--ninaut-branco); }
.hero__versiculo { margin: var(--esp-4) 0 0; padding-left: var(--esp-3); border-left: var(--linha-ocre) solid var(--ninaut-ocre); max-width: 44ch; }
.hero__versiculo p { font-size: 1rem; font-weight: 300; color: var(--ninaut-texto-claro); }
.hero__versiculo cite { display: block; margin-top: .35rem; font: var(--peso-ui) var(--fs-etiqueta)/1.4 var(--fonte-texto); font-style: normal;
  letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--ninaut-ocre-claro); }
.hero__acoes { margin-top: var(--esp-5); display: flex; flex-wrap: wrap; gap: var(--esp-2); }

.hero__arte { grid-column: 1 / 7; grid-row: 1; align-self: center; position: relative; z-index: 1; margin-right: var(--esp-5); }
.hero__quadro { position: absolute; inset: -1.25rem -1.25rem 14% 16%; background: var(--ninaut-degrade-ocre); box-shadow: var(--sombra-foto); }
.hero__quadro::after { /* luz que corre no quadro */ content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 200, .22) 48%, transparent 62%); mix-blend-mode: soft-light; }
.hero__foto { position: relative; display: block; width: 100%; height: auto; box-shadow: var(--sombra-foto); }
.hero__regua { position: absolute; left: 0; right: 30%; bottom: -1.5rem; height: var(--linha-ocre); background: var(--ninaut-ocre); transform-origin: left; }

.hero__fatos { grid-column: 1 / 13; margin-top: var(--esp-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-calha);
  border-top: 1px solid var(--cor-linha); padding-top: var(--esp-3); list-style: none; padding-left: 0; margin-bottom: 0; }
.hero__fatos li { font-size: var(--fs-pequeno); color: var(--ninaut-texto-claro-suave); letter-spacing: .02em; }
.hero__fatos b { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.0625rem; color: var(--ninaut-branco); letter-spacing: .04em; margin-bottom: .2rem; }

/* ---------- 2. áreas: capítulos fixos (momento de destaque 1) ---------- */
.areas { background: var(--cor-fundo); color: var(--cor-texto); padding-block: var(--esp-9) var(--esp-8); }
.areas__cabeca { grid-column: 1 / 9; margin-bottom: var(--esp-8); }
.areas__cabeca h2 { font-size: var(--fs-h1); margin-top: var(--esp-3); }
.areas__fixo { grid-column: 1 / 6; position: relative; }
.areas__palco { position: sticky; top: 18vh; height: 64vh; display: grid; align-content: center; }
.areas__num { position: relative; height: 1em; font: 600 clamp(8rem, 4rem + 12vw, 15rem)/1 var(--fonte-titulo); color: var(--ninaut-ocre); }
.areas__num span { position: absolute; inset: 0; opacity: 0; transform: translateY(.18em); transition: opacity var(--tempo-revelar) var(--curva-saida), transform var(--tempo-revelar) var(--curva-saida); }
.areas__num span.is-ativo { opacity: 1; transform: none; }
.areas__trilho { margin-top: var(--esp-4); display: flex; gap: .5rem; }
.areas__trilho i { height: 3px; width: 2.5rem; background: var(--cor-linha); transition: background-color var(--tempo-ui), width var(--tempo-ui) var(--curva-saida); }
.areas__trilho i.is-ativo { background: var(--ninaut-chocolate); width: 4.5rem; }
.areas__nome { margin-top: var(--esp-3); font: 500 var(--fs-pequeno)/1 var(--fonte-texto); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--cor-texto-suave); }
.areas__lista { grid-column: 7 / 13; display: grid; }
.area { position: relative; container-type: inline-size; overflow: hidden; min-height: 46vh; display: grid; align-content: center; padding: var(--esp-6) var(--esp-5) var(--esp-6) 0; border-top: 1px solid var(--cor-linha); }
.area:first-child { border-top: 0; }
.area__num-movel { display: none; }
.area h3 { position: relative; z-index: 1; font-size: var(--fs-h2); }
.area h3::before { content: ""; display: block; width: 3.5rem; height: var(--linha-ocre); background: var(--ninaut-ocre); margin-bottom: var(--esp-3); transform-origin: left; }
.area__ramo { position: absolute; top: var(--esp-3); right: 0; font: 700 min(clamp(4rem, 2rem + 6vw, 8.5rem), 17.5cqw)/1 var(--fonte-titulo); color: transparent; -webkit-text-stroke: 1px var(--ninaut-ocre); opacity: .45; letter-spacing: .02em; pointer-events: none; }
.area__n { position: absolute; right: -6%; bottom: -28%; width: 38%; aspect-ratio: 264 / 233; color: var(--ninaut-ocre); opacity: .1; transition: transform var(--tempo-revelar) var(--curva-saida), opacity var(--tempo-ui); pointer-events: none; }
.area:hover .area__n { transform: translateY(-6%) rotate(-3deg); opacity: .16; }
.area p { position: relative; z-index: 1; margin-top: var(--esp-3); color: var(--cor-texto); font-size: 1.25rem; max-width: 34ch; }

/* ---------- 3. sabia dessa: galeria horizontal (momento de destaque 2) ---------- */
.sabia { background: var(--ninaut-cacau); color: var(--cor-texto); padding-block: var(--esp-8); overflow: clip; }
.sabia__cabeca { grid-column: 1 / 8; }
.sabia__cabeca h2 { font-size: var(--fs-h1); margin-top: var(--esp-3); }
.sabia__cabeca p { margin-top: var(--esp-3); color: var(--cor-texto-suave); }
.sabia__aviso { grid-column: 9 / 13; align-self: end; font-size: var(--fs-pequeno); color: var(--cor-texto-suave); border-left: var(--linha-ocre) solid var(--ninaut-ocre); padding-left: var(--esp-2); }
.sabia__janela { margin-top: var(--esp-6); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sabia__janela::-webkit-scrollbar { display: none; }
.sabia__trilho { display: flex; gap: var(--grid-calha); padding-inline: max(var(--margem-lateral), calc((100vw - var(--largura-max)) / 2 + var(--margem-lateral))); width: max-content; }
.cartao { scroll-snap-align: start; width: min(82vw, 34rem); min-height: 30rem; padding: var(--esp-5); display: flex; flex-direction: column;
  background: var(--ninaut-chocolate); border-top: var(--linha-ocre) solid var(--ninaut-ocre); position: relative; overflow: hidden;
  transition: transform var(--tempo-ui) var(--curva-saida), box-shadow var(--tempo-ui) var(--curva-saida); }
.cartao:hover { transform: translateY(var(--subir-card)); box-shadow: var(--sombra-2); }
.cartao__num { font: 600 1rem/1 var(--fonte-titulo); color: var(--ninaut-ocre-claro); letter-spacing: .1em; }
.cartao h3 { margin-top: var(--esp-4); font-size: var(--fs-h3); line-height: 1.2; }
.cartao p { margin-top: var(--esp-3); color: var(--cor-texto); }
.cartao__fonte { margin-top: auto; padding-top: var(--esp-4); font-size: var(--fs-pequeno); color: var(--cor-texto-suave); }
.cartao__fonte a { color: var(--ninaut-ocre-claro); }
.cartao__n { position: absolute; right: -12%; bottom: -18%; width: 60%; color: rgba(192, 127, 38, .09); pointer-events: none; }
.cartao--ocre { background: var(--ninaut-degrade-ocre); border-top-color: var(--ninaut-cacau); }
.cartao--ocre h3, .cartao--ocre p { color: var(--ninaut-branco); }
.cartao--ocre .cartao__num { color: var(--ninaut-branco); }
.cartao--fim { background: transparent; box-shadow: inset 0 0 0 1px var(--cor-linha); border-top-color: transparent; justify-content: space-between; }
.cartao--fim h3 { font-size: var(--fs-h2); }
.cartao--fim .botao { margin-top: var(--esp-3); }

/* ---------- 4. quem atende ---------- */
.quem { background: var(--cor-fundo-profundo); color: var(--cor-texto); padding-block: var(--esp-9); }
.quem__texto { grid-column: 1 / 6; }
.quem__texto h2 { font-size: var(--fs-h1); margin-top: var(--esp-3); }
.quem__texto p { margin-top: var(--esp-4); }
.quem__placas { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); align-items: start; }
.placa { background: var(--ninaut-chocolate); color: var(--ninaut-texto-claro);
  display: flex; flex-direction: column; box-shadow: var(--sombra-1);
  transition: transform var(--tempo-ui) var(--curva-saida), box-shadow var(--tempo-ui) var(--curva-saida); }
.placa:hover { transform: translateY(var(--subir-card)); box-shadow: var(--sombra-2); }
.placa > div { padding: var(--esp-3) var(--esp-3) var(--esp-2); }
.placa h3 { color: var(--ninaut-branco); font-size: 1.25rem; }
.placa p { font-size: var(--fs-pequeno); color: var(--ninaut-texto-claro-suave); letter-spacing: .04em; }
.placa__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.placa__oab { font: 600 1.125rem/1 var(--fonte-titulo); color: var(--ninaut-ocre-claro); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap;
  margin: auto var(--esp-3) 0; padding-block: var(--esp-2) var(--esp-3); border-top: 1px solid rgba(224, 168, 90, .35); }
.placa:nth-child(2) { margin-top: var(--esp-6); }
.quem__registro { grid-column: 7 / 13; margin-top: var(--esp-4); font-size: var(--fs-pequeno); color: var(--cor-texto-suave); }

/* ---------- 5. contato (momento tipográfico) ---------- */
.visita { background: var(--ninaut-chocolate); color: var(--cor-texto); padding-block: var(--esp-8) var(--esp-8); overflow: clip; }
/* "Brasília" fica no centro da tela; o resto da frase sangra para os dois lados */
.visita__gigante { font: 600 clamp(4rem, 18vw, 19rem)/.9 var(--fonte-titulo); white-space: nowrap; text-align: center; color: var(--ninaut-ocre);
  letter-spacing: -.01em; margin: 0 0 var(--esp-6); }
.visita__cabeca { grid-column: 1 / 7; }
.visita__cabeca h2 { font-size: var(--fs-h1); margin-top: var(--esp-3); }
.visita__cabeca p { margin-top: var(--esp-3); color: var(--cor-texto-suave); }
.visita__cabeca .botao { margin-top: var(--esp-5); }
.visita__dados { grid-column: 8 / 13; list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.visita__dados li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--esp-2); padding-block: var(--esp-3); border-top: 1px solid var(--cor-linha); }
.visita__dados li:last-child { border-bottom: 1px solid var(--cor-linha); }
.visita__dados .ic { width: 1.5rem; height: 1.5rem; color: var(--ninaut-ocre); margin-top: .15rem; }
.visita__dados b { display: block; font: 500 var(--fs-etiqueta)/1.4 var(--fonte-texto); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--cor-texto-suave); margin-bottom: .25rem; }
.visita__dados a { display: inline-block; padding-block: .6rem; margin-block: -.45rem; background-position: 0 calc(100% - .5rem); }
.visita__dados a, .visita__dados span { color: var(--ninaut-branco); font-size: 1.0625rem; }

/* ---------- rodapé ---------- */
.rodape { background: var(--ninaut-cacau); color: var(--cor-texto-suave); padding-block: var(--esp-7) var(--esp-6); font-size: var(--fs-pequeno); }
.rodape__marca { grid-column: 1 / 4; }
.rodape__marca img { width: 9rem; height: auto; }
.rodape__info { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-4); }
.rodape__info p { max-width: none; }
.rodape__info strong { color: var(--ninaut-texto-claro); font-weight: 500; }
.rodape__nota { grid-column: 1 / 13; margin-top: var(--esp-6); padding-top: var(--esp-3); border-top: 1px solid var(--cor-linha); display: flex; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }

/* WhatsApp sempre à mão no celular */
.zap-fixo { display: none; }

/* ---------- revelação na rolagem (CSS primeiro; visível por padrão) ---------- */
@keyframes revelar { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes regua { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes passar { from { transform: translateX(8vw); } to { transform: translateX(-8vw); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela { animation: revelar linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .revela-regua { animation: regua linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; transform-origin: left; }
    .visita__gigante { animation: passar linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
/* Sem suporte a view(): o JS usa IntersectionObserver e marca .js-revela */
.js-revela .revela:not(.is-visto) { opacity: 0; transform: translateY(2.5rem); }
.js-revela .revela { transition: opacity var(--tempo-revelar) var(--curva-saida), transform var(--tempo-revelar) var(--curva-saida); }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .topo nav { display: none; }
  .hero__texto { grid-column: 1 / 13; }
  .hero__arte { grid-column: 1 / 13; max-width: 34rem; margin-right: 1.25rem; }
  .hero__texto { grid-row: 2; margin-top: var(--esp-6); }
  .hero { padding-top: 6.5rem; }
  .hero__regua { display: none; }
  .hero__lema { font-size: clamp(2.75rem, 1rem + 7vw, 5.5rem); }
  .areas__cabeca, .sabia__cabeca { grid-column: 1 / 13; }
  .sabia__aviso { grid-column: 1 / 13; margin-top: var(--esp-4); }
  .quem__texto, .quem__placas, .quem__registro, .visita__cabeca, .visita__dados { grid-column: 1 / 13; }
  .quem__placas, .visita__dados { margin-top: var(--esp-6); }
  .rodape__marca, .rodape__info { grid-column: 1 / 13; }
  .rodape__info { margin-top: var(--esp-4); }
}
@media (max-width: 860px) {
  .areas__fixo { display: none; }
  .areas__lista { grid-column: 1 / 13; }
  .area { min-height: 0; padding-block: var(--esp-5); padding-right: 0; }
  .area__ramo { font-size: 3.5rem; }
  .area__num-movel { display: block; font: 600 4.5rem/1 var(--fonte-titulo); color: var(--ninaut-ocre); margin-bottom: var(--esp-2); }
}
@media (max-width: 640px) {
  .topo__marca img { height: 2.2rem; }
  .topo .botao span { display: none; }
  .topo .botao { padding: .6rem .8rem; min-width: 2.75rem; justify-content: center; }
  .hero { padding-top: 6.5rem; align-items: start; }
  .hero__quadro { inset: -.75rem -.75rem 14% 16%; }
  .hero__arte { margin-right: .75rem; }
  .hero__foto { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 15%; }
  .hero__texto { margin-top: var(--esp-5); }
  .hero__lema { font-size: clamp(2.6rem, 1rem + 9.5vw, 4rem); }
  .hero__fatos { grid-template-columns: 1fr; gap: var(--esp-2); margin-top: var(--esp-6); }
  .hero__acoes .botao { width: 100%; justify-content: center; }
  .cartao { padding: var(--esp-4); min-height: 26rem; }
  .quem__placas { grid-template-columns: 1fr; }
  .placa:nth-child(2) { margin-top: 0; }
  .rodape__info { grid-template-columns: 1fr; }
  .zap-fixo { display: flex; position: fixed; left: var(--esp-2); right: var(--esp-2); bottom: var(--esp-2); z-index: 60; justify-content: center;
    transition: transform var(--tempo-ui) var(--curva-saida); box-shadow: var(--sombra-2); }
  .zap-fixo.is-oculto { transform: translateY(160%); }
  .rodape { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao::before, .cartao, .placa, .link-linha { transition: none; }
  .hero__quadro::after { display: none; }
}