/* House of Jiu Jitsu · style.css · só estiliza; o movimento vem dos kits (kits.css/kits.js) */
:root {
  --papel: #F4F4F2; --branco: #FFFFFF; --tinta: #121213; --cinza: #66686B; --linha: #D6D6D3; --preto: #0D0D0E; --tatame: #5E6266;
  --bg: #F4F4F2; --fg: #121213; --acento: #5E6266; --mudo: rgba(18,18,19,.6);
  --nav: 68px;
  --sec: clamp(64px, 10vw, 140px);
  --sombra: 14px 18px 40px -18px rgba(18,18,19,.38);
  --borda-luz: inset 0 1px 0 rgba(255,255,255,.7);
}
html { background: var(--bg); }
body { font-family: "Archivo", system-ui, sans-serif; font-weight: 400; line-height: 1.6; color: var(--fg); }
a { color: inherit; }
p { margin: 0 0 1rem; max-width: 62ch; }
h1, h2, h3 { margin: 0; font-weight: 700; }

/* tipografia da casa: Archivo + uma palavra em Instrument Serif itálico (D3) */
.rotulo { font: 600 .72rem/1.2 "Archivo", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--cinza); margin: 0 0 1.25rem; }
.titulo { font-size: clamp(2.1rem, 4.2vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 1.25rem; }
.titulo em, .hero__h1 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.1em; }

.botao { display: inline-flex; align-items: center; gap: .6rem; padding: 15px 24px; border-radius: 10px; font: 600 .95rem/1 "Archivo", sans-serif; text-decoration: none; transition: background var(--dur-micro), color var(--dur-micro), transform var(--dur-micro); }
.botao--preto { background: var(--tinta); color: var(--papel); box-shadow: 6px 8px 0 -2px rgba(18,18,19,.18); }
.botao--preto:hover { background: var(--tatame); transform: translateY(-1px); }
.link { font-weight: 600; text-underline-offset: 5px; }
.link:hover { color: var(--tatame); }

/* ---- nav: placa branca própria ---- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav); display: flex; align-items: center; gap: 2rem;
  padding: 0 clamp(20px, 3vw, 44px) 0 clamp(28px, 3.4vw, 52px); background: var(--branco); color: var(--tinta); border-bottom: 1px solid var(--linha); }
.nav__logo img { height: 46px; width: auto; display: block; }
.nav__links { display: flex; gap: 1.8rem; margin-left: auto; }
.nav__links a { font: 500 .9rem/1 "Archivo", sans-serif; text-decoration: none; color: var(--tinta); }
.nav__links a:hover { color: var(--tatame); }
.nav__acoes { display: flex; align-items: center; gap: 1.1rem; }
.nav__zap { display: inline-flex; align-items: center; gap: .5rem; font: 600 .9rem/1 "Archivo", sans-serif; text-decoration: none; white-space: nowrap; color: var(--tinta); }
.nav__zap svg { width: 20px; height: 20px; fill: currentColor; }
.nav__acesso { padding: 12px 18px; white-space: nowrap; }


/* ---- telas de cena (pôster + canvas; o canvas só aparece com frame pintado) ---- */
.tela { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #8C8E90; }
.tela canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .3s linear; }
.tela canvas.vivo { opacity: 1; }
.veu { position: absolute; inset: 0; pointer-events: none; }

/* ---- blocos 1 e 2 · palco duplo ---- */
.duo { position: relative; height: 700vh; }
.duo__m1, .duo__m2 { position: absolute; left: 0; width: 1px; pointer-events: none; }
.duo__m1 { top: 0; height: 350vh; }
.duo__m2 { top: 250vh; height: 450vh; }
.duo__palco { z-index: 1; }
.tela--2 { opacity: 0; }
.veu--hero { background: linear-gradient(90deg, rgba(244,244,242,.9) 0%, rgba(244,244,242,.66) 34%, rgba(244,244,242,0) 62%); }
.veu--prof { opacity: 0; background: linear-gradient(180deg, rgba(244,244,242,.92) 0%, rgba(244,244,242,.6) 36%, rgba(244,244,242,0) 58%); }
.hero__txt { position: absolute; left: 7vw; top: calc(var(--nav) + 13dvh); max-width: 40rem; color: var(--tinta); }
.hero__h1 { font-size: clamp(2.6rem, 5.8vw, 6.2rem); line-height: 1.02; letter-spacing: -.042em; font-weight: 700; margin-bottom: 1.6rem; }
.hero__p { font-size: 1.12rem; color: #2A2B2D; max-width: 34ch; margin-bottom: 2rem; }
.prof__txt { position: absolute; left: 7vw; top: calc(var(--nav) + 6dvh); max-width: 44rem; color: var(--tinta); opacity: 0; }
.prof__p { font-size: 1.08rem; color: #2A2B2D; max-width: 46ch; }
.prof__dados .am-dado { font: 600 .72rem/1.2 "Archivo", sans-serif; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.94); color: var(--tinta); border-color: rgba(18,18,19,.18); box-shadow: var(--sombra); }
.prof__dados path { stroke: var(--papel); stroke-width: 1.5; }

/* ---- fim da ponte P10 no palco duplo: o papel sobe sobre as mãos e o anel começa ---- */
.duo__casa { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.duo__casa::before { content: ""; position: absolute; inset: 0; background: var(--papel); opacity: var(--papel-op, 0); }
.duo__h { opacity: 0; transform: scale(1.08); }
/* ---- bloco 3 · A CASA: nasce por cima do último quadro do palco duplo, idêntico a ele ---- */
.casa { margin-top: -100dvh; z-index: 2; background: transparent; color: var(--tinta); }
.casa__palco { display: grid; place-items: center; background: var(--papel); opacity: 0; }
.casa.assumiu .casa__palco { opacity: 1; }
.casa__txt { opacity: 0; }
/* 60/40: o texto à esquerda, o H e o anel à direita; nenhuma linha cruza o traço */
.casa__h { --d: min(70dvh, 44vw); position: absolute; left: 71%; top: calc(50% + var(--nav) / 2); width: var(--d); aspect-ratio: 1; margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); }
.casa__h img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; }
/* o anel medido no marca-h.png (250 px): centro (126, 127.5), raio do traço 106, espessura 12.5 → viewBox 200 */
.casa__anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.casa__anel circle { fill: none; stroke: var(--tatame); stroke-width: 10; opacity: .55; }
.casa__palco { justify-items: start; }
.casa__txt { position: relative; z-index: 1; width: min(36rem, 44vw); margin-left: 7vw; padding-top: var(--nav); }
.casa__p { font-size: clamp(1.2rem, 1.9vw, 1.85rem); line-height: 1.42; letter-spacing: -.012em; max-width: 44ch; color: var(--tinta); }

/* ---- bloco 4 · OS PROGRAMAS (sobe por cima: P12) ---- */
.programas { margin-top: -100dvh; z-index: 3; background: var(--branco); color: var(--tinta); border-top: 1px solid var(--linha); }
.programas .am-htrilho__palco { padding-top: var(--nav); background: var(--branco); }
.programas .am-htrilho__faixa { align-items: center; gap: 3.2vw; padding: 0 7vw; }
.prog__cab { align-self: center; }
.prog__cab { width: 30vw; }
.prog__dica { color: var(--cinza); }
.card { width: 27vw; }
.card__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; box-shadow: var(--sombra); margin-bottom: 1.4rem; background: #DADAD7; }
.card__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.card__img--kimono img { object-position: 70% 80%; } /* a ponteira e o tatame à vista */
.card h3 { font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: .6rem; }
.card p { color: #3A3B3E; font-size: 1rem; }

/* ---- bloco 5 · KIDS (P14: nasce miniatura) ---- */
.kids { background: var(--papel); color: var(--tinta); }
.kids__palco { background: var(--papel); }
.kids__fantasma { position: absolute; left: 0; right: 0; top: 50%; margin: -.45em 0 0; text-align: center; font: 800 clamp(120px, 30vw, 520px)/.9 "Archivo", sans-serif; letter-spacing: -.06em; color: #E4E4E1; max-width: none; user-select: none; }
.kids__zoom { position: absolute; inset: -3vh -3vw; border-radius: 28px; overflow: hidden; transform: scale(.55); transform-origin: 50% 10%; box-shadow: 0 40px 80px -40px rgba(18,18,19,.45); }
.kids__noite { position: absolute; inset: 0; background: #0D0D0E; opacity: 0; pointer-events: none; }
.kids__placa { position: absolute; left: 6vw; bottom: 7dvh; width: min(34rem, 88vw); opacity: 0; }
.placa { background: var(--branco); color: var(--tinta); padding: 2rem 2.2rem 1.4rem; border-radius: 14px; box-shadow: var(--sombra), var(--borda-luz); }
.placa .titulo { font-size: clamp(1.8rem, 3vw, 3rem); }
.placa p { color: #2F3033; font-size: 1rem; }

/* ---- bloco 6 · A GRADUAÇÃO (o pico) ---- */
.grad { position: relative; height: 400vh; color: var(--fg); }
.grad__palco { position: sticky; top: 0; height: 100dvh; overflow: clip; }
.grad__txt { position: absolute; left: 7vw; top: calc(var(--nav) + 9dvh); max-width: 34rem; z-index: 2; }
.grad__txt .rotulo { color: color-mix(in oklab, var(--fg) 60%, var(--bg)); }
.grad__txt .titulo { font-size: clamp(2.6rem, 6vw, 6.4rem); }
.grad__txt p { color: color-mix(in oklab, var(--fg) 82%, var(--bg)); }
.grad__palco3d { position: absolute; inset: 0; }
/* a faixa preta ganha luz de recorte: halo atrás e filete claro, acesos pela coreografia (--halo, .82 a .88) */
.grad__palco3d::before { content: ""; position: absolute; left: 50%; top: calc(54% + max(9vh, 72px) / 2); width: min(110vw, 1600px); height: 70vh; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, #2E2F33 0%, #1C1C1E 32%, transparent 62%); opacity: var(--halo, 0); pointer-events: none; }
.grad .faixa__corpo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 4; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,calc(.14 * var(--halo, 0))) inset, 0 1px 0 rgba(255,255,255,calc(.3 * var(--halo, 0))) inset; }
.grad .faixa__corpo { outline: 1px solid rgba(255,255,255,calc(.1 * var(--halo, 0))); outline-offset: 0; }
/* a faixa é um objeto: ≥ 9vh, algodão trançado do hero, marcas pousadas DENTRO dela, composição no centro */
.faixa { position: absolute; left: 50%; top: 54%; width: min(82vw, 1160px); margin-left: calc(min(82vw, 1160px) / -2); }
.faixa__corpo { position: relative; height: max(9vh, 72px); border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25); }
.faixa__corpo > i { position: absolute; inset: 0; display: block; }
.faixa__base { background: linear-gradient(180deg, #F4F4F1, #DCDCD8); }
.faixa__tom { opacity: 0; }
.faixa__tom--1 { background: linear-gradient(180deg, #C6C6C2, #ADADA9); }
.faixa__tom--2 { background: linear-gradient(180deg, #A9AAAC, #929396); }
.faixa__tom--3 { background: linear-gradient(180deg, #6C6F72, #575A5D); }
.faixa__tom--4 { background: linear-gradient(180deg, #252527, #111112); }
.faixa__trama { background: url('assets/img/trama-faixa.jpg') left center / auto 100% repeat-x; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
.faixa__marcas { position: absolute; left: 2%; width: 73%; top: 0; bottom: 0; z-index: 2; }
.marca { top: 20%; height: 60%; width: 3px; margin-left: -1.5px; background: #2A2B2D; border-radius: 2px; opacity: 0; box-shadow: 1px 0 0 rgba(255,255,255,.35); }
.marca--intro { background: #121213; width: 4px; margin-left: -2px; }
.faixa__corpo .faixa__ponta { left: auto; right: 6%; width: 17%; background: #0A0A0B; z-index: 3; box-shadow: -2px 0 0 rgba(0,0,0,.25), 2px 0 0 rgba(0,0,0,.25); }
.faixa__ponta-cinza { position: absolute; inset: 0; background: var(--tatame); opacity: 0; }
.faixa__fita1, .faixa__graus { position: absolute; inset: 0; }
.grau { top: -2px; bottom: -2px; width: 7%; background: #F4F4F2; box-shadow: 2px 0 2px rgba(0,0,0,.35); opacity: 0; }
.grau--1 { left: 14%; }
.grad__cont { position: absolute; left: 0; top: calc(100% + 26px); display: flex; align-items: flex-end; gap: 1rem; }
.grad__n { font: 800 clamp(3.6rem, 8vw, 7.5rem)/.85 "Archivo", sans-serif; letter-spacing: -.05em; font-variant-numeric: tabular-nums; min-width: 2ch; color: var(--fg); }
.grad__de { font: 600 .72rem/1.5 "Archivo", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in oklab, var(--fg) 70%, var(--bg)); padding-bottom: .5rem; }
.grad__de b { font-weight: 600; }
.grad__rot { font: 600 .72rem/1.3 "Archivo", sans-serif; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: var(--fg); opacity: 0; }
.grad__rot--1 { left: 2%; bottom: calc(100% + 18px); }
.grad__rot--2 { left: calc(2% + 73% * 10.5 / 30); bottom: calc(100% + 18px); }
.grad__rot--1::before, .grad__rot--2::before { content: ""; position: absolute; left: 0; top: calc(100% + 4px); width: 1px; height: 12px; background: currentColor; opacity: .6; }
.grad__rot--3 { right: 6%; top: calc(100% + 30px); }

/* ---- bloco 7 · A FAMÍLIA (P16 na entrada, P11 dentro) ---- */
.familia { background: var(--papel); color: var(--tinta); z-index: 2; }
.familia .am-ceder__palco { background: var(--papel); }
/* a faixa do corte é a mesma da GRADUAÇÃO: mesmo tamanho, o preto do tom 4 com o algodão por cima, a ponteira cinza e os 4 graus */
.corte { position: absolute; left: 0; right: 0; top: calc(max(9vh, 72px) / -2); height: max(9vh, 72px); z-index: 6; pointer-events: none; }
.faixa-mini { position: absolute; left: 50%; width: min(82vw, 1160px); margin-left: calc(min(82vw, 1160px) / -2); height: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.5); }
.faixa-mini i { position: absolute; inset: 0; background: linear-gradient(180deg, #252527, #111112); }
.faixa-mini i::after { content: ""; position: absolute; inset: 0; background: url('assets/img/trama-faixa.jpg') left center / auto 100% repeat-x; mix-blend-mode: multiply; opacity: .75; }
.faixa-mini b { position: absolute; top: 0; bottom: 0; right: 6%; width: 17%; background: var(--tatame); box-shadow: -2px 0 0 rgba(0,0,0,.25), 2px 0 0 rgba(0,0,0,.25); }
.faixa-mini s { position: absolute; top: -2px; bottom: -2px; width: 7%; background: #F4F4F2; box-shadow: 2px 0 2px rgba(0,0,0,.35); text-decoration: none; }
.faixa-mini s:nth-child(1) { left: 14%; } .faixa-mini s:nth-child(2) { left: 34%; } .faixa-mini s:nth-child(3) { left: 54%; } .faixa-mini s:nth-child(4) { left: 74%; }
/* a foto real no aspecto original (586×627), maior; o palco desconta a nav; foto e texto compõem o quadro juntos */
.familia .am-ceder__palco { padding-top: var(--nav); box-sizing: border-box; }
/* o arquivo do dono tem só 586 px (não existe versão maior): a foto não passa de 300 px CSS, ~2× o original em tela 2× */
.familia__foto { margin: 0; width: min(34vw, 300px); position: relative; left: -6vw; }
.familia__txt .titulo { font-size: clamp(2.6rem, 4.9vw, 5.6rem); }
.familia .familia__txt { margin-top: 0; }
.familia .familia__txt { right: auto; left: 47vw; width: min(36vw, 34rem); margin-top: calc(var(--nav) / 2); }
.familia__foto img { display: block; width: 100%; height: auto; border-radius: 8px; filter: grayscale(1) contrast(1.05); box-shadow: var(--sombra); }
.familia__txt { color: var(--tinta); }
.familia__txt p { color: #2F3033; }

/* ---- bloco 8 · CONTATO (P08 arco que sobe, D9) ---- */
.contato { margin-top: -30vh; z-index: 4; border-radius: 50% 50% 0 0 / 30vh 30vh 0 0; overflow: clip; background: #8C8E90; color: var(--tinta); }
.contato__palco { background: #8C8E90; }
.contato__h { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; opacity: 0; pointer-events: none; z-index: 2; }
.contato__placa { position: absolute; right: 3vw; bottom: 8dvh; width: min(26rem, 88vw); z-index: 3; }
.contato__botoes { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 1.4rem 0 1.2rem; }
.contato__mais { font-size: .95rem; color: var(--cinza) !important; }
.contato__mais a { color: var(--tinta); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---- rodapé ---- */
.rodape { position: relative; z-index: 5; background: var(--papel); color: var(--tinta); padding: var(--sec) 7vw 40px; border-top: 1px solid var(--linha); }
.rodape__logo { width: min(380px, 60vw); height: auto; margin-bottom: 4rem; }
.rodape__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; margin-bottom: 4rem; }
.rodape__grade p { font-size: 1rem; color: #2F3033; }
.rodape__grade a { text-underline-offset: 4px; }
.rodape__grade .botao { color: var(--papel); }
.rodape__fim { font-size: .82rem; color: var(--cinza); border-top: 1px solid var(--linha); padding-top: 1.4rem; max-width: none; }

/* ---- celular ---- */
@media (max-width: 820px) {
  :root { --nav: 60px; }
  .am-trilho { height: 200vh; }
  .nav { gap: .8rem; padding: 0 14px 0 20px; }
  .nav__logo img { height: 38px; }
  .nav__links { display: none; }
  .nav__acoes { margin-left: auto; gap: .7rem; }
  .nav__zap span { display: none; }
  .nav__zap svg { width: 24px; height: 24px; }
  .nav__acesso { padding: 10px 14px; font-size: .85rem; }
  .duo { height: 560vh; }
  .duo__m1 { height: 260vh; }
  .duo__m2 { top: 200vh; height: 360vh; }
  .veu--hero { background: linear-gradient(0deg, rgba(244,244,242,.96) 0%, rgba(244,244,242,.9) 38%, rgba(244,244,242,0) 45%); }
  .hero__txt { left: 22px; right: 18px; top: auto; bottom: 6dvh; }
  .hero__h1 { font-size: clamp(2.2rem, 10.4vw, 3.4rem); margin-bottom: 1rem; }
  .hero__p { font-size: 1rem; margin-bottom: 1.4rem; }
  .prof__txt { left: 22px; right: 18px; top: calc(var(--nav) + 3dvh); }
  .prof__dados svg { display: none; }
  .prof__dados { inset: auto 0 5dvh 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px; }
  .prof__dados .am-dado { position: static; }
  /* celular: o H e o anel no alto, o texto embaixo, sem cruzar o traço */
  .casa__palco { justify-items: stretch; align-items: start; }
  .casa__h { --d: min(56vw, 30dvh); left: 50%; top: calc(var(--nav) + 2dvh + var(--d) / 2); }
  .casa__txt { width: auto; margin-left: 0; padding: calc(var(--nav) + 2dvh + min(56vw, 30dvh) + 24px) 22px 0 26px; }
  .casa__txt .titulo { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .casa__p { font-size: 1.08rem; }
  /* programas no celular: pilha vertical, cabeçalho inteiro, cartões dentro da tela */
  .programas { box-shadow: none; }
  .programas .am-htrilho__palco { display: block; padding: calc(var(--nav) + 28px) 0 56px; }
  .programas .am-htrilho__faixa { flex-direction: column; overflow: visible; scroll-snap-type: none; gap: 40px; padding: 0 24px; }
  .prog__cab { width: auto; align-self: stretch; }
  .card { width: auto; max-width: calc(100vw - 48px); }
  .card__img { aspect-ratio: 4 / 3; }
  /* pôsteres de 1280 px no celular */
  .tela--1 { background-image: url('assets/frames-m/cena-1/f0001.jpg') !important; }
  .tela--2 { background-image: url('assets/frames-m/cena-2/f0001.jpg') !important; }
  .tela--3 { background-image: url('assets/frames-m/cena-3/f0001.jpg') !important; }
  .tela--4 { background-image: url('assets/frames-m/cena-4/f0001.jpg') !important; }
  /* cena 1 no celular: o círculo inteiro, com a ponteira, acima da headline */
  /* encostado no fim da nav: nenhum pixel de fundo entre a placa e a imagem */
  .tela--1 { background-color: #8F9092; background-size: 190vw auto; background-position: 50% var(--nav); background-repeat: no-repeat; }
  .duo__palco .tela--1 canvas { inset: auto; max-width: none; width: 190vw !important; height: 106.875vw !important; left: calc(50% - 95vw); top: var(--nav); }
  /* cena 3 no celular: o foco no banco com os kimonos (x ≈ 80%) */
  .tela--3 { background-position: 80% 50%; }
  .kids__palco .tela--3 canvas { inset: 0 auto 0 50%; max-width: none; height: 100% !important; width: auto !important; aspect-ratio: 16 / 9; transform: translateX(-80%); }
  .familia__foto { width: min(100%, 290px); margin: 0 auto; left: 0; }
  .familia .am-ceder__palco { padding-top: calc(var(--nav) + 10vh); }
  .familia .familia__txt { width: auto; margin-top: 24px; }
  .faixa-mini { left: 18px; width: calc(100vw - 36px); margin-left: 0; }
  .corte { top: calc(max(12vh, 84px) / -2); height: max(12vh, 84px); }
  .kids__placa { left: 16px; right: 12px; width: auto; bottom: 3dvh; padding: 1.4rem 1.4rem .8rem; }
  .kids__placa p { font-size: .94rem; }
  /* celular: a faixa logo abaixo do parágrafo, mais alta, as 30 aulas em 3 linhas de 10 */
  .grad__palco { display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav); box-sizing: border-box; }
  .grad__txt { position: relative; left: auto; right: auto; top: auto; padding: 0 18px 0 22px; }
  .grad__txt p { margin-bottom: 0; }
  .grad__palco3d { position: relative; inset: auto; padding-bottom: 150px; }
  .faixa { position: relative; left: 18px; width: calc(100vw - 36px); margin-left: 0; top: auto; margin-top: 46px; }
  .faixa__corpo { height: max(12vh, 84px); }
  .faixa__marcas { width: 70%; }
  .marca { height: 18%; }
  .grad__rot--2 { left: 40%; }
  .grad__cont { top: calc(100% + 18px); }
  .grad__n { font-size: 4.2rem; }
  .grad__rot--1, .grad__rot--2 { font-size: .6rem; letter-spacing: .12em; }
  .grad__rot--1, .grad__rot--2 { bottom: calc(100% + 16px); }
  .grad__rot--3 { right: 0; top: calc(100% + 120px); white-space: normal; max-width: 80vw; text-align: right; font-size: .62rem; }
  .contato { margin-top: -16vh; border-radius: 50% 50% 0 0 / 16vh 16vh 0 0; }
  .contato__placa { left: 14px; right: 12px; width: auto; bottom: 3dvh; padding: 1.4rem 1.4rem .9rem; }
  .rodape { padding: 72px 22px 32px 28px; }
  .rodape__grade { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kids__placa { opacity: 1 !important; }
  .kids__zoom { transform: none !important; }
  .marca, .grau, .grad__rot, .faixa__tom, .faixa__ponta-cinza { opacity: 1 !important; transform: none !important; }
  .familia .am-ceder__texto { opacity: 1 !important; }
}