/* Dom Filipe Veículos: fiel às pranchetas de design-canvas.
   Preto, branco e amarelo; a luz hexagonal do estúdio é a ideia central.
   Fundo preto é exceção à regra de site claro, pedida pelo Victor.

   Até 900px a home mostra .so-cel (prancheta Celular), acima .so-pc (Main).
   Regra de fluidez (medida na Sarvel): o que muda a cada quadro só mexe em
   transform. Nada de variável CSS animada nem máscara mudando de lugar. */

:root {
  --preto: #0A0A0B; --preto-2: #141416; --campo: #1B1B1E; --linha: #232327; --linha-2: #3A3A40; --linha-3: #5A5A60;
  --branco: #F5F4F0; --cinza: #C9C9CE; --cinza-2: #A8A8AE; --amarelo: #FFC400; --amarelo-2: #FFD54A;
  --hex-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='104'%3E%3Cpath d='M0 52L30 0H90L120 52L90 104H30ZM120 52H180' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E");
  --hex-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='104'%3E%3Cpath d='M0 52L30 0H90L120 52L90 104H30ZM120 52H180' fill='none' stroke='%23fff' stroke-width='7' stroke-opacity='.14'/%3E%3Cpath d='M0 52L30 0H90L120 52L90 104H30ZM120 52H180' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
  --hex-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='135' height='78'%3E%3Cpath d='M0 39L22.500 0H67.500L90 39L67.500 78H22.500ZM90 39H135' fill='none' stroke='%23fff' stroke-width='6' stroke-opacity='.14'/%3E%3Cpath d='M0 39L22.500 0H67.500L90 39L67.500 78H22.500ZM90 39H135' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--preto); }
section[id] { scroll-margin-top: 84px; }
body { margin: 0; background: var(--preto); color: var(--branco); font-family: Archivo, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
figure, h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
legend { padding: 0 0 6px; font-size: 15px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
input:focus, select:focus { outline: 2px solid var(--amarelo); outline-offset: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pular { position: absolute; left: 8px; top: -60px; z-index: 60; background: var(--amarelo); color: var(--preto); padding: 10px 14px; font-weight: 700; border-radius: 4px; }
.pular:focus { top: 8px; }
.amarelo { color: var(--amarelo); }
.cinza { color: var(--cinza); }
@media (hover: hover) { a:hover { color: var(--amarelo); } }

/* marcado para a loja responder: só na prévia chama atenção */
.falta { outline: 1px dashed var(--amarelo); outline-offset: 3px; }
.tem-preco-falta { color: var(--amarelo); }
.conferir { padding: 12px 14px; border: 1px dashed var(--amarelo); border-radius: 4px; font-size: 15px; color: var(--amarelo); }
.conferir strong { display: block; }

/* letras */
.h-hero { font-size: clamp(28px, 2.4vw, 35px); line-height: 1.1; font-weight: 800; font-stretch: 108%; letter-spacing: -.01em; }
.h-hero span { display: block; }
.h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
.h-grande { font-size: clamp(36px, 4.5vw, 66px); line-height: 1.03; font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; text-wrap: balance; }
.h-entregas, .h-cg { font-size: clamp(42px, 5.4vw, 80px); line-height: 1.01; font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; text-wrap: balance; }
.h-pagina { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; }
.h-trat { font-size: clamp(34px, 4vw, 58px); line-height: 1.04; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
.h-sec { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; }
.h-visita { font-size: 36px; line-height: 1.08; font-weight: 800; font-stretch: 112%; }
.h-rel { font-size: 32px; line-height: 1.1; font-weight: 800; font-stretch: 112%; }
.h3 { font-size: 26px; line-height: 1.15; font-weight: 800; font-stretch: 112%; }
.sobre { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--amarelo); }
.sobre--escuro { color: var(--preto); font-weight: 700; }
.lead { font-size: 19px; line-height: 1.5; color: var(--cinza); max-width: 30em; }
.lead--escuro { color: var(--preto); }
.handle { font-size: 15px; font-weight: 700; color: var(--amarelo); }
.pilha { display: flex; flex-direction: column; gap: 10px; }
.pilha0 { display: flex; flex-direction: column; gap: 2px; }
.pilha--g { gap: 28px; } .pilha--20 { gap: 20px; } .pilha--24 { gap: 24px; } .pilha--28 { gap: 28px; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 4px; font-weight: 700; font-size: 15px; white-space: nowrap; border: 1px solid transparent; background: none; }
.btn-g { min-height: 56px; padding: 0 32px; font-size: 17px; }
.btn-m { min-height: 52px; padding: 0 24px; font-size: 17px; }
.btn-y { background: var(--amarelo); color: var(--preto); }
.btn-o { border-color: var(--linha-3); color: var(--branco); }
.btn-k { background: var(--preto); color: #FFF; min-height: 48px; padding: 0 22px; font-size: 17px; }
.btn-vidro { background: rgba(10,10,11,.55); border-color: #6A6A70; }
.hero .btn-o { background: rgba(10,10,11,.5); }
.centro { align-self: center; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.atalhos .btn { border-color: var(--linha-2); font-weight: 600; }
@media (hover: hover) {
  .btn-y:hover { background: var(--amarelo-2); color: var(--preto); }
  .btn-o:hover { border-color: var(--amarelo); color: var(--amarelo); }
  .btn-k:hover { background: #26262A; color: #FFF; }
}

/* topo */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(10,10,11,.92); border-bottom: 1px solid var(--linha); }
.topo__in { max-width: 1320px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topo__logo { display: flex; flex: none; }
.topo__logo img { width: 60px; height: 60px; object-fit: contain; }
.nav { display: flex; gap: 32px; align-items: center; font-size: 15px; font-weight: 500; }
.nav a[aria-current] { color: #FFF; font-weight: 700; }
.nav__destaque, .nav a.nav__destaque[aria-current] { color: var(--amarelo); font-weight: 700; }
.topo__wa { padding: 0 20px; }
.topo__menu { display: none; flex-direction: column; gap: 5px; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; }
.topo__menu span { display: block; width: 24px; height: 2px; background: var(--branco); transition: transform .2s ease, opacity .2s ease; }
.topo__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topo__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.gaveta { position: fixed; inset: 0 0 auto 0; top: 76px; z-index: 40; display: flex; flex-direction: column; padding: 8px 16px 20px; background: var(--preto); border-bottom: 1px solid var(--linha-2); box-shadow: 0 24px 50px rgba(0,0,0,.7); }
.gaveta a { display: flex; align-items: center; min-height: 52px; font-size: 19px; font-weight: 700; border-bottom: 1px solid var(--linha); }
.gaveta a:last-child { border-bottom: 0; }
.gaveta a[aria-current] { color: var(--amarelo); }
.pagina-index .gaveta { top: 72px; }

/* peças de página */
.bloco { max-width: 1320px; margin: 0 auto; padding: 96px 24px; display: flex; flex-direction: column; gap: 40px; }
.bloco__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.bloco__cab--sonho { gap: 20px 64px; }
.sonho__t { flex: 2 1 520px; min-width: 0; gap: 14px; }
.sonho__p { flex: 1 1 320px; }
.borda { border-top: 1px solid var(--linha); }
.estreito { max-width: 1000px; margin: 0 auto; padding: 96px 24px; display: flex; flex-direction: column; gap: 36px; }
.xadrez { height: 32px; background: repeating-conic-gradient(var(--linha) 0 25%, var(--preto) 0 50%) 0 0 / 32px 32px; }

/* primeira dobra */
.hero { position: relative; overflow: hidden; background: var(--preto); }
.hex { position: absolute; inset: 0; background-repeat: repeat; }
.hex--dim { background-image: var(--hex-dim); opacity: .07; }
.spot { position: absolute; left: 0; top: 0; width: 920px; height: 920px; margin: -460px 0 0 -460px; background: radial-gradient(circle closest-side, rgba(255,196,0,.1), transparent 70%); will-change: transform; pointer-events: none; }
/* a lente: círculo de tamanho fixo que anda por transform, com o desenho
   andando ao contrário por dentro. A máscara nunca muda de lugar. */
.lente { position: absolute; left: 0; top: 0; width: 600px; height: 600px; margin: -300px 0 0 -300px; overflow: hidden; opacity: .4; pointer-events: none; will-change: transform; -webkit-mask-image: radial-gradient(circle closest-side, #000 0, rgba(0,0,0,.45) 48%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 0, rgba(0,0,0,.45) 48%, transparent 100%); }
.hex--lit { inset: auto; left: 0; top: 0; width: 2880px; height: 1664px; background-image: var(--hex-lit); will-change: transform; }
.hero__in { position: relative; max-width: 1320px; margin: 0 auto; padding: 44px 24px 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px 72px; }
.hero__txt { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero .sobre { color: var(--cinza); }
.hero .lead { font-size: 18px; }
.hero__foto { flex: 1 1 500px; max-width: 610px; min-width: 0; width: 100%; }
.tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.wipe { overflow: hidden; border-radius: 4px; box-shadow: 0 34px 90px rgba(0,0,0,.75); animation: wipe 1.25s cubic-bezier(.7,0,.2,1) .15s both; }
.in { animation: in .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* carrossel da primeira dobra: troca suave com zoom lento */
.slides { position: relative; aspect-ratio: 10 / 9.4; background: var(--preto-2); overflow: hidden; }
.mwipe .slides { position: absolute; inset: 0; aspect-ratio: auto; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.slide.on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0s 1.2s; }
.slide.on img { transform: scale(1.06); transition: transform 7s linear; }
.pontos { position: absolute; right: 12px; bottom: 8px; display: flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 4px; background: rgba(10,10,11,.55); }
.pontos button { width: 22px; height: 28px; padding: 0; background: none; border: 0; display: flex; align-items: center; justify-content: center; }
.pontos button i { display: block; width: 16px; height: 3px; background: rgba(255,255,255,.4); border-radius: 2px; }
.pontos button[aria-current="true"] i { background: #FFF; }
.pontos .pausa { width: 26px; color: #FFF; }
.pontos .pausa svg { display: block; }
.rotulo { position: absolute; left: 12px; bottom: 12px; padding: 8px 12px; background: rgba(10,10,11,.82); border-radius: 4px; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; color: var(--cinza); }
.rotulo strong { font-size: 15px; color: #FFF; }

/* números */
.numeros { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.numeros__in { max-width: 1320px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.numeros__in > div { padding: 32px 0; display: flex; flex-direction: column; gap: 2px; }
.numeros strong, .numero { font-size: 44px; line-height: 1.1; font-weight: 800; font-stretch: 112%; }
.numeros span { color: var(--cinza); }

/* cartões */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 32px 20px; }
.grade--rel { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.frame { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--preto-2); outline: 1px solid transparent; outline-offset: 3px; }
.pic { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card__txt { display: flex; flex-direction: column; gap: 3px; }
.card__meta { font-size: 14px; color: var(--cinza-2); }
.card__nome { font-size: 20px; line-height: 1.2; font-weight: 700; }
.card__preco { font-size: 18px; font-weight: 700; color: var(--amarelo); margin-top: 4px; }
.card__preco--falta { font-weight: 600; font-size: 16px; }
@media (hover: hover) {
  .card:hover { color: var(--branco); }
  .card:hover .frame, .reel:hover .frame { outline-color: var(--amarelo); }
  .card:hover .pic { transform: scale(1.035); }
}

/* faixa amarela */
.faixa-venda { background: var(--amarelo); color: var(--preto); }
.faixa-venda__in { max-width: 1320px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 64px; align-items: center; }
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 20px 32px; border-top: 2px solid var(--preto); padding-top: 24px; }
.passos li { display: flex; flex-direction: column; gap: 2px; }
.passos strong { font-size: 18px; }

/* caixas de formulário */
.caixa { background: var(--preto); color: var(--branco); padding: clamp(24px, 3vw, 40px); border-radius: 4px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.caixa label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.caixa input, .caixa select { width: 100%; height: 52px; padding: 0 14px; font-size: 17px; font-weight: 400; background: var(--campo); color: var(--branco); border: 1px solid var(--linha-2); border-radius: 4px; min-width: 0; }
.caixa input::placeholder { color: #8A8A90; }
.caixa--passos { gap: 20px; min-height: 400px; }
.caixa__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.caixa__cab h2:focus { outline: 0; }
.caixa__passo { font-size: 14px; color: var(--cinza-2); white-space: nowrap; }
.barras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.barras i { height: 4px; background: var(--linha-2); }
.barras i.on { background: var(--amarelo); }
.passo { display: flex; flex-direction: column; gap: 16px; }
.caixa__acoes { display: flex; gap: 10px; margin-top: auto; }
.cresce { flex: 1 1 auto; }
.simnao, .prazos { display: flex; gap: 8px; }
.simnao button, .prazos button, .filtros button, .ops button { font-weight: 600; border-radius: 4px; border: 1px solid var(--linha-2); background: transparent; color: var(--branco); }
.simnao button { flex: 1 1 0; min-height: 52px; }
.prazos button { flex: 1 1 0; min-height: 48px; padding: 0 2px; min-width: 0; }
.simnao [aria-pressed="true"], .prazos [aria-pressed="true"], .filtros [aria-pressed="true"], .ops [aria-pressed="true"] { background: var(--amarelo); color: var(--preto); border-color: var(--amarelo); }
.erro { color: var(--amarelo); font-size: 15px; }
.nota { font-size: 14px; color: var(--cinza-2); }

/* Filipe */
.filipe { position: relative; overflow: hidden; background: var(--preto); }
.filipe__in { max-width: 1320px; margin: 0 auto; padding: 72px 24px 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 64px; }
.filipe__txt { flex: 1 1 440px; min-width: 0; padding-bottom: 72px; display: flex; flex-direction: column; gap: 22px; }
.stage { position: relative; flex: 1 1 460px; min-width: 0; height: 680px; }
.fh1 { position: absolute; left: 50%; bottom: 40px; width: 620px; max-width: 100%; aspect-ratio: 1.15; margin-left: -310px; background: var(--amarelo); clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
.fh2 { position: absolute; left: 50%; bottom: -10px; width: 720px; margin-left: -360px; filter: drop-shadow(0 0 7px rgba(255,255,255,.85)); }
.fman { position: absolute; left: 50%; bottom: 0; height: 660px; width: auto; max-width: none; margin-left: -236px; }
.fman, .fh1, .fh2 { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.spin { transform-origin: 0 0; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ops { display: flex; flex-wrap: wrap; gap: 8px; }
.ops button { min-height: 48px; padding: 0 22px; font-size: 16px; font-weight: 700; border-color: var(--linha-3); }
.pop { position: relative; padding: 22px 24px; background: #FFF; color: var(--preto); border-radius: 14px; display: flex; flex-direction: column; gap: 14px; max-width: 30em; align-items: flex-start; transform-origin: 0 50%; animation: pop .45s cubic-bezier(.2,1.5,.4,1) both; }
.pop::before { content: ""; position: absolute; left: -10px; top: 30px; width: 22px; height: 22px; background: #FFF; transform: rotate(45deg); }
.pop p { position: relative; font-size: 21px; line-height: 1.3; font-weight: 700; }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
.linha { height: 1px; background: var(--linha); }

/* Reels */
.reels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 46%), 1fr)); gap: 14px; }
.reel { position: relative; display: block; min-width: 0; }
.reel .frame { aspect-ratio: 9 / 16; }
.reel .frame img { width: 100%; height: 100%; object-fit: cover; }
.reel > svg { position: absolute; left: 12px; bottom: 12px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.7)); }

/* o time: acesa até o mouse entrar; aí só onde a lente passa */
.team { position: relative; overflow: hidden; border-radius: 4px; background: #000; }
.team__base { width: 100%; aspect-ratio: 1848 / 1000; object-fit: cover; filter: brightness(.42) saturate(.5); }
.avals { overflow: hidden; }
.avals__cab { max-width: 1320px; margin: 0 auto; padding: 96px 24px 36px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
[data-avaliacoes] { display: flex; flex-direction: column; gap: 14px; padding-bottom: 96px; }
.fila { overflow: hidden; }
.fila__track { display: flex; gap: 14px; width: max-content; padding-right: 14px; animation: run 80s linear infinite; }
.fila--b .fila__track { animation-direction: reverse; animation-duration: 95s; }
.fila:hover .fila__track, .fila:focus-within .fila__track, .fila.toque .fila__track { animation-play-state: paused; }
.aval { flex: none; width: 340px; min-height: 212px; padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: left; background: var(--preto-2); border: 1px solid var(--linha); border-radius: 4px; color: var(--branco); }
.aval__est { display: flex; gap: 2px; }
.aval__txt { flex: 1; font-size: 16px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.aval__pe { display: flex; flex-direction: column; font-size: 15px; }
.aval__pe small, .aval-dlg small { font-size: 13px; color: var(--cinza-2); }
@media (hover: hover) { .aval:hover { border-color: var(--amarelo); } }
.aval-dlg { width: min(560px, calc(100vw - 32px)); max-height: 82vh; padding: 24px; border: 1px solid var(--linha-2); border-radius: 4px; background: var(--preto-2); color: var(--branco); }
.aval-dlg::backdrop { background: rgba(0,0,0,.75); }
.aval-dlg p { margin: 14px 0; white-space: pre-line; font-size: 17px; }
.aval-dlg footer { display: flex; flex-direction: column; margin-bottom: 16px; }
.prova { background: var(--preto-2); border-bottom: 1px solid var(--linha); }
.prova figure { max-width: 1000px; margin: 0 auto; padding: 72px 24px; display: flex; flex-direction: column; gap: 18px; }
.prova blockquote { margin: 0; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.16; font-weight: 800; font-stretch: 108%; letter-spacing: -.01em; }
.prova figcaption, .falas figcaption { color: var(--cinza); font-size: 15px; }
.prova figcaption strong, .falas figcaption strong { color: var(--branco); }
.falas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.falas figure { padding: 22px; background: var(--preto-2); border-radius: 4px; display: flex; flex-direction: column; gap: 12px; }
.falas blockquote { margin: 0; font-size: 18px; }
.team__lit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.team.acesa .team__lit { opacity: 0; }
.team__lente { position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; overflow: hidden; opacity: 0; transition: opacity .4s ease; pointer-events: none; will-change: transform; -webkit-mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%); }
.team.acesa .team__lente { opacity: 1; }
.team__lente img { position: absolute; left: 0; top: 0; max-width: none; object-fit: cover; will-change: transform; }
.team figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; background: rgba(10,10,11,.9); border-radius: 4px; font-size: 15px; font-weight: 700; }
.fotos3 { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.fotos3 img { border-radius: 4px; }
.fotos3__alta { position: relative; flex: 1 1 320px; min-width: 0; min-height: 460px; overflow: hidden; border-radius: 4px; }
.fotos3__alta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.fotos3__par { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fotos3__par img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

/* Google */
.google { max-width: 1320px; margin: 0 auto; padding: 96px 24px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.google__nota { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.google__estrelas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.google__estrelas > span { display: flex; gap: 2px; }
.google__lista { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.google__lista figure { padding: 24px; background: var(--preto-2); border-radius: 4px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.google__lista blockquote { margin: 0; font-size: 18px; }
.google__lista figcaption { font-size: 15px; color: var(--cinza-2); }

/* venha ver de perto */
.visita { position: relative; min-height: 760px; display: flex; align-items: center; background: #000; }
.visita > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%; }
.visita picture { position: absolute; inset: 0; }
.visita picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.visita__in { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 80px 24px; display: flex; justify-content: flex-end; }
.visita__caixa { background: var(--preto); padding: clamp(24px, 3vw, 40px); border-radius: 4px; width: 460px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }

/* entregas */
.entregas { position: relative; overflow: hidden; background: var(--preto); }
.hexled { position: absolute; left: 0; top: 0; width: 100%; height: auto; filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.hexled use { opacity: .1; animation: led 6s linear infinite; }
@keyframes led { 0%,100% { opacity: .1; } 4% { opacity: .9; } 6% { opacity: .25; } 9% { opacity: 1; } 55% { opacity: 1; } 70% { opacity: .1; } }
.entregas__in { position: relative; max-width: 1320px; margin: 0 auto; padding: 240px 24px 112px; display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.entregas__txt { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.polaroids { flex: 1.3 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 36px; padding-top: 40px; }
.polaroids > div { position: relative; }
.foto { padding: 10px 10px 14px; background: var(--branco); color: var(--preto); border-radius: 3px; box-shadow: 0 20px 50px rgba(0,0,0,.65); display: flex; flex-direction: column; gap: 10px; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.foto figcaption { font-size: 15px; font-weight: 600; text-align: center; }
@media (hover: hover) { .foto:hover { transform: rotate(0deg) scale(1.05) !important; box-shadow: 0 0 0 2px var(--amarelo), 0 24px 70px rgba(255,196,0,.32); } }
.tag { position: absolute; z-index: 3; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); transform-origin: 50% 0; animation: swing 3.4s ease-in-out infinite; }
@keyframes swing { 0%,100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@supports (animation-timeline: view()) {
  .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
  .rise2 { animation-range: entry 12% cover 42%; }
}
@keyframes rise { from { opacity: 0; transform: translateY(110px) rotate(9deg) scale(.9); } to { opacity: 1; transform: none; } }
.faixa { position: relative; background: var(--amarelo); color: var(--preto); overflow: hidden; height: 76px; display: flex; align-items: center; font-size: 30px; font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.faixa span { padding-right: 48px; }
.track { display: flex; width: max-content; animation: run 26s linear infinite; }
@keyframes run { to { transform: translateX(-50%); } }

/* Filipe flutuante */
.peek { position: fixed; right: 18px; bottom: 0; z-index: 30; display: flex; align-items: flex-end; gap: 6px; animation: peekin .9s cubic-bezier(.2,1.2,.3,1) 1.6s both; }
@keyframes peekin { from { transform: translateY(190px); } to { transform: none; } }
.peek.off { transform: translateY(190px); animation: none; transition: transform .4s ease; }
.peekm { display: block; width: 128px; height: 128px; overflow: hidden; transform: translateY(16px); transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
.peekm img { width: 128px; }
.peekb { margin-bottom: 62px; padding: 9px 13px; background: #FFF; color: var(--preto); font-size: 14px; font-weight: 700; border-radius: 12px 12px 2px 12px; box-shadow: 0 10px 28px rgba(0,0,0,.5); white-space: nowrap; transition: transform .3s ease; }
@media (hover: hover) {
  .peek:hover { color: var(--preto); }
  .peek:hover .peekm { transform: translateY(0); }
  .peek:hover .peekb { transform: translateY(-6px); background: var(--amarelo); }
}

/* rodapé */
.rodape { max-width: 1320px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 32px; font-size: 15px; color: var(--cinza); }
.rodape__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rodape__col img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 4px; }

/* páginas internas */
.pagina { max-width: 1320px; margin: 0 auto; padding: 64px 24px 96px; display: flex; flex-direction: column; gap: 32px; }
.pagina--carro { padding-top: 32px; padding-bottom: 80px; gap: 72px; }
.pagina--erro { min-height: 56vh; justify-content: center; align-items: flex-start; gap: 20px; }

/* estoque */
.est__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 16px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.filtros__g { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros button { min-height: 44px; padding: 0 18px; font-size: 15px; }
.busca { flex: 1 1 200px; min-width: 0; max-width: 300px; }
.busca input { width: 100%; height: 44px; padding: 0 14px; font-size: 16px; background: var(--campo); border: 1px solid var(--linha-2); border-radius: 4px; }
.filtros__res { margin-left: auto; color: var(--cinza); font-size: 15px; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 0; color: var(--cinza); }

/* carro */
.voltar { align-self: flex-start; display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--cinza); }
.voltar::before { content: "←"; margin-right: 8px; }
.car { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.galeria { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.galeria__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--preto-2); }
.galeria__foto > img { width: 100%; height: 100%; object-fit: contain; }
.galeria__seta { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 4px; background: rgba(10,10,11,.75); color: #FFF; font-size: 20px; }
.galeria__seta--a { left: 10px; } .galeria__seta--b { right: 10px; }
.galeria__num { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; background: rgba(10,10,11,.8); border-radius: 4px; font-size: 14px; }
.miniaturas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.miniaturas button { padding: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--preto-2); border: 2px solid transparent; }
.miniaturas button[aria-pressed="true"] { border-color: var(--amarelo); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.ficha { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ficha__meta { color: var(--cinza-2); font-size: 15px; }
.ficha h1 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.06; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; }
.ficha__preco { margin-top: 8px; font-size: 40px; line-height: 1.1; font-weight: 800; font-stretch: 112%; color: var(--amarelo); }
.ficha__preco--falta { font-size: 26px; }
.ficha dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--linha); }
.ficha dl > div { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ficha dt { font-size: 14px; color: var(--cinza-2); }
.ficha dd { font-weight: 700; }
.ficha__acoes { display: flex; flex-direction: column; gap: 10px; }
.ficha__dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ficha__dois .btn { min-height: 52px; white-space: normal; text-align: center; padding: 0 8px; }
.itens { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.itens li { display: flex; gap: 10px; align-items: flex-start; }
.itens svg { flex: none; margin-top: 3px; }
.reelcar { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 40px; background: var(--preto-2); border-radius: 4px; }
.reelcar__capa { position: relative; flex: 0 1 300px; min-width: 0; display: block; }
.reelcar__capa img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; }
.reelcar__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--amarelo); }
.reelcar__txt { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.reelcar__txt h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
.car-vendido { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 48px 0; }

/* consignação */
.cg-topo { background: var(--amarelo); color: var(--preto); }
.cg-topo__in { max-width: 1320px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 56px; align-items: center; }
.cg-trat { max-width: 1320px; margin: 0 auto; padding: 96px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 56px; align-items: center; }
.cg-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cg-dois figure { display: flex; flex-direction: column; gap: 10px; }
.cg-dois img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.cg-dois figcaption { font-size: 15px; color: var(--cinza-2); }
.tabela { overflow-x: auto; }
.tabela table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.tabela thead th { padding: 14px 16px; font-size: 15px; color: var(--cinza-2); font-weight: 600; border-bottom: 1px solid var(--linha-2); }
.tabela thead th:first-child { padding-left: 0; }
.tabela thead th.amarelo { color: var(--amarelo); font-weight: 700; border-bottom-color: var(--amarelo); }
.tabela tbody th { padding: 18px 16px 18px 0; font-weight: 700; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 18px 16px; border-bottom: 1px solid var(--linha); }
.tabela td:nth-child(2) { color: var(--cinza); }
.cg-foto { position: relative; min-height: 520px; display: flex; align-items: flex-end; background: #000; }
.cg-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cg-foto__in { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; padding: 32px 24px; }
.cg-foto p { display: inline-block; padding: 14px 20px; background: var(--preto); border-radius: 4px; font-size: 22px; font-weight: 800; font-stretch: 112%; }
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--linha); padding: 18px 0; }
.faq summary { font-weight: 700; font-size: 19px; min-height: 28px; cursor: pointer; }
.faq details p { margin-top: 10px; color: var(--cinza); }

/* financiamento e quem somos */
.fi-topo { position: relative; overflow: hidden; }
.fi-topo__in { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 56px; align-items: center; }
.fi-topo .caixa { background: var(--preto-2); border: 1px solid var(--linha); }
.fi-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 16px 24px; border-top: 2px solid var(--amarelo); padding-top: 20px; }
.fi-passos li { display: flex; flex-direction: column; gap: 2px; }
.fi-passos strong { font-size: 18px; }
.fi-passos span { color: var(--cinza); }
.fi-cta { background: var(--preto-2); padding: 72px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.fi-cta .botoes { justify-content: center; }
.qs-topo__in { max-width: 1320px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 48px; align-items: center; }
.qs-topo img { width: 100%; border-radius: 4px; }
.qs-dono { overflow: hidden; }
.stage--qs { height: 600px; }
.stage--qs .fman { height: 580px; margin-left: -208px; }
.stage--qs .fh1 { width: 540px; margin-left: -270px; }

/* ===== quem manda em cada tela ===== */
.so-cel { display: none; }
.bar { display: none; }

@media (max-width: 1180px) { .nav { gap: 20px; } }
@media (max-width: 1040px) { .topo__wa { display: none; } }

@media (max-width: 900px) {
  body { font-size: 16px; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .so-pc { display: none; }
  .so-cel { display: flex; }
  .nav, .peek { display: none; }
  .topo__menu { display: flex; }
  .topo__in { padding: 8px 16px; }
  .topo__logo img { width: 52px; height: 52px; }
  .pagina-index .topo { display: none; }
  .xadrez { display: none; }
  .pagina { padding: 28px 16px 48px; gap: 22px; }
  .pagina--carro { padding-top: 8px; gap: 44px; }
  .bloco, .estreito { padding: 56px 16px; gap: 28px; }
  .h-pagina { font-size: 38px; }
  .h-cg { font-size: 38px; line-height: 1.04; }
  .h-trat, .h-sec, .h2 { font-size: 30px; }
  .h-grande { font-size: 33px; }
  .lead { font-size: 17px; }
  .btn-g { padding: 0 20px; font-size: 16px; }
  .botoes .btn { flex: 1 1 auto; }
  .caixa input, .caixa select { font-size: 16px; }

  /* estoque: dois cartões por linha, como app */
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  .card { gap: 8px; }
  .card__meta { font-size: 12.5px; }
  .card__nome { font-size: 15.5px; }
  .card__preco { font-size: 16px; margin-top: 2px; }
  .card__preco--falta { font-size: 13.5px; }
  .filtros { gap: 8px; padding: 10px 0; flex-flow: column nowrap; align-items: stretch; }
  .filtros__g { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .filtros__g::-webkit-scrollbar { display: none; }
  .filtros button { flex: none; padding: 0 14px; }
  .busca { max-width: none; flex: none; }
  .filtros__res { margin: 0; }

  /* carro */
  .car { gap: 22px; }
  .galeria { margin: 0 -16px; flex-basis: 100%; }
  .galeria__foto { border-radius: 0; }
  .miniaturas { display: flex; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  .miniaturas::-webkit-scrollbar { display: none; }
  .miniaturas button { flex: none; width: 76px; }
  .ficha { flex-basis: 100%; }
  .ficha__preco { font-size: 34px; }
  .reelcar { padding: 20px; gap: 22px; }
  .reelcar__capa { flex-basis: 100%; }
  .h-rel { font-size: 26px; }

  /* consignação e outras */
  .cg-topo__in, .fi-topo__in, .qs-topo__in, .cg-trat { padding: 40px 16px; gap: 32px; }
  .caixa--passos { min-height: 0; }
  .cg-foto { min-height: 340px; }
  .cg-foto p { font-size: 18px; }
  .faq summary { font-size: 17px; }
  .visita { min-height: 640px; align-items: flex-end; }
  .avals__cab { padding: 56px 16px 24px; }
  .prova figure { padding: 44px 16px; }
  .visita--dia { display: block; min-height: 0; }
  .visita--dia picture { position: static; display: block; height: 270px; }
  .visita--dia picture img { object-position: 22% 76%; }
  .visita--dia .visita__in { padding: 0; }
  .visita--dia .visita__caixa { width: 100%; border-radius: 0; padding: 24px 16px; }
  .visita__in { padding: 24px 16px; }
  .filipe__in { padding: 44px 16px 0; }
  .stage--qs { height: 460px; flex-basis: 100%; }
  .stage--qs .fman { height: 440px; margin-left: -158px; }
  .stage--qs .fh1 { width: 380px; margin-left: -190px; }
  .numeros__in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; gap: 0 16px; }
  .numeros__in > div { padding: 18px 0; }
  .numeros strong { font-size: 30px; }
  .numeros span { font-size: 14px; }
  .fi-cta { padding: 48px 16px; }
  .rodape { padding: 36px 16px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; font-size: 14px; }

  /* barra de baixo */
  .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.4fr; background: var(--preto-2); border-top: 1px solid #2E2E33; font-size: 13px; font-weight: 600; padding-bottom: env(safe-area-inset-bottom); }
  .bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; }
  .bar a.wa { position: relative; flex-direction: row; gap: 8px; background: var(--amarelo); color: var(--preto); font-size: 15px; font-weight: 700; overflow: hidden; }
  .bar a.wa::after { content: ""; position: absolute; inset: 0; animation: anel 2.6s ease-out 3s infinite; pointer-events: none; }
  .prog { position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--amarelo); transform: scaleX(0); transform-origin: 0 50%; }
  .pagina-index .bar { animation: barin .6s cubic-bezier(.2,1.2,.4,1) var(--barra, 2.3s) both; }
}
@keyframes barin { from { transform: translateY(100%); } to { transform: none; } }
@keyframes anel { 0% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.75); } 70%, 100% { box-shadow: inset 0 0 0 16px rgba(255,255,255,0); } }

/* ===== home no celular (prancheta Celular) ===== */
.m { --d0: 2.05s; flex-direction: column; width: 100%; font-size: 16px; line-height: 1.45; overflow-x: clip; }
.ja-abriu .m { --d0: .1s; }
.ja-abriu { --barra: .3s; }
.splash { position: fixed; inset: 0; z-index: 50; background: var(--preto); display: flex; align-items: center; justify-content: center; pointer-events: none; animation: splashout .55s ease 1.65s both; }
.ja-abriu .splash { display: none; }
.splash__in { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; }
.splash svg { position: absolute; inset: -30px; }
.splash polygon { fill: none; stroke: #FFF; stroke-width: 2.2; stroke-dasharray: 360; stroke-dashoffset: 360; animation: draw .9s ease forwards; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.splash img { position: relative; width: 104px; height: 104px; object-fit: contain; animation: logoin .7s cubic-bezier(.2,1.4,.4,1) .55s both; }
@keyframes splashout { to { opacity: 0; visibility: hidden; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes logoin { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* a área da imagem tem a proporção das fotos em pé (3:4): o carro aparece inteiro em qualquer celular */
.mhero { position: relative; height: calc(min(133.34vw, 640px) + 96px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: var(--preto); touch-action: pan-y; }
.par { position: absolute; left: 0; right: 0; top: 0; bottom: 96px; will-change: transform; -webkit-mask-image: linear-gradient(#000 74%, transparent 100%); mask-image: linear-gradient(#000 74%, transparent 100%); }
.mwipe .slide.on img { transform: scale(1.02); }
.mtilt { position: absolute; inset: 0; transition: transform .35s ease-out; }
.mwipe { position: absolute; inset: 0; overflow: hidden; animation: mwipe 1.15s cubic-bezier(.7,0,.2,1) 1.7s both; }
.ja-abriu .mwipe { animation-delay: 0s; }
@keyframes mwipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mhero__sombra { position: absolute; left: 0; right: 0; top: 0; height: 110px; background: linear-gradient(rgba(10,10,11,.8), transparent); }
.lente--m { width: 420px; height: 420px; margin: -210px 0 0 -210px; opacity: .28; -webkit-mask-image: radial-gradient(circle closest-side, #000 0, rgba(0,0,0,.45) 50%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 0, rgba(0,0,0,.45) 50%, transparent 100%); }
.hex--m { inset: auto; left: 0; top: 0; width: 1080px; height: 936px; background-image: var(--hex-m); will-change: transform; }
.mhero__topo { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.mhero__topo img { width: 52px; height: 52px; object-fit: contain; }
.mhero__dir { display: flex; align-items: center; gap: 4px; }
.topo__menu--m { margin-right: -8px; }
.mhero__txt { position: relative; z-index: 3; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.mhero__info { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.pontos--m { position: static; order: 2; flex: none; margin-left: auto; }
.pontos--m button { width: 18px; }
.pontos--m button i { width: 13px; }
.rotulo--m { position: static; order: 1; min-width: 0; padding: 5px 9px; font-size: 13px; }
.rotulo--m strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhero__txt h1 { font-size: min(5.6vw, 26px); line-height: 1.18; font-weight: 800; font-stretch: 100%; letter-spacing: -.005em; }
.mhero__txt h1 span { display: block; }
.dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dois .btn { min-height: 54px; font-size: 16px; }

.rail { scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
nav.rail { display: flex; gap: 8px; padding: 18px 14px 8px; overflow-x: auto; }
.dest { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; text-align: center; line-height: 1.2; }
.ring { position: relative; display: block; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; transition: transform .2s ease; }
.ring::before { content: ""; position: absolute; inset: -20%; background: conic-gradient(#FFC400, #FFF4CC 18%, #8A6A00 42%, #FFC400 62%, #FFF4CC 80%, #FFC400); animation: ringspin 7s linear infinite; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.dest:active .ring { transform: scale(.93); }
.ring svg { position: absolute; inset: 2.5px; width: 67px; height: 67px; border-radius: 50%; display: block; }
.ic { fill: none; stroke: url(#au); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .ic .d { stroke-dashoffset: 1; }
.js .rv.on .ic .d { animation: icdraw 1.1s cubic-bezier(.5,0,.2,1) .25s forwards; }
@keyframes icdraw { to { stroke-dashoffset: 0; } }
.hx { fill: none; stroke: #FFF; stroke-opacity: .34; stroke-width: 1; }
.hxb { fill: none; stroke: #FFF; stroke-opacity: .1; stroke-width: 4; }

/* revelar ao rolar: só esconde quando o script estiver rodando */
.anima .rv { opacity: 0; transform: translateY(38px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.anima .rv.on { opacity: 1; transform: none; }
.anima .rvl { transform: translate(-70px,50px) rotate(-14deg); }
.anima .rvr { transform: translate(70px,70px) rotate(14deg); transition-delay: .14s; }
.anima .rvl.on, .anima .rvr.on { transform: none; }

.mnum { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 8px; padding: 22px 16px 26px; }
.mnum > div { display: flex; flex-direction: column; }
.mnum strong { font-size: 30px; line-height: 1.1; font-weight: 800; font-stretch: 112%; }
.mnum span { font-size: 13px; color: var(--cinza); }
.msec { padding: 12px 0 40px; display: flex; flex-direction: column; gap: 18px; }
.mh2 { padding: 0 16px; font-size: 28px; line-height: 1.1; font-weight: 800; font-stretch: 112%; }
.mh2--0 { padding: 0; }
.mpad { padding: 0 16px; display: flex; flex-direction: column; gap: 4px; }
.flow { perspective: 900px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.flow > a { flex: none; scroll-snap-align: center; will-change: transform; transform-origin: 50% 50%; }
.flow--carros { gap: 14px; padding: 8px calc(50% - 135px); }
.flow--carros > a { width: 270px; display: flex; flex-direction: column; gap: 10px; }
.flow--carros img { width: 270px; height: 360px; object-fit: cover; border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.7); }
.flow--carros .flow__txt { display: flex; flex-direction: column; gap: 2px; }
.flow__txt span:first-child { font-size: 13px; color: var(--cinza-2); }
.flow__txt strong { font-size: 18px; line-height: 1.2; }
.flow__txt span:last-child { font-size: 18px; font-weight: 700; color: var(--amarelo); }
.flow--reels { gap: 10px; padding: 8px calc(50% - 105px); }
.flow--reels > a { position: relative; display: block; }
.flow--reels img { width: 210px; height: 373px; object-fit: cover; border-radius: 4px; }
.flow--reels svg { position: absolute; left: 10px; bottom: 10px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.7)); }

.cons { background: var(--amarelo); color: var(--preto); padding: 52px 16px; display: flex; flex-direction: column; gap: 14px; }
.cons .sobre { font-size: 13px; }
.cons h2 { font-size: 36px; line-height: 1.04; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; }
.cons .btn { min-height: 54px; }

.mfil { padding: 44px 16px 32px; display: flex; flex-direction: column; gap: 14px; overflow-x: clip; }
.mfil h2 { font-size: 33px; line-height: 1.05; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; }
.fstage { position: relative; height: 390px; margin: 0 -16px; overflow: hidden; }
.fhex--a { position: absolute; left: 50%; bottom: 0; width: 380px; margin-left: -190px; filter: drop-shadow(0 0 6px rgba(255,255,255,.85)); }
.fhex--b { position: absolute; left: 50%; bottom: 16px; width: 330px; height: 288px; margin-left: -165px; background: var(--amarelo); clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
.fstage button { position: absolute; left: 50%; bottom: 0; width: 276px; height: 384px; margin-left: -138px; padding: 0; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
.fman2 { width: 276px; }
.anima .fhex { transform: scale(.2) rotate(-50deg); opacity: 0; transition: transform .9s cubic-bezier(.2,1.3,.4,1), opacity .4s ease; }
.anima .fman2 { transform: translateY(62%) scale(.86); transition: transform .95s cubic-bezier(.2,1.35,.4,1) .12s; }
.anima .fstage.on .fhex { transform: none; opacity: 1; }
.anima .fstage.on .fman2 { transform: none; }
.fman2.hop { animation: hop .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes hop { 0%,100% { translate: 0 0; rotate: 0deg; } 35% { translate: 0 -24px; rotate: -2.5deg; } 65% { translate: 0 2px; rotate: 1deg; } }
.spk { position: absolute; left: 32%; top: 40%; width: 16px; height: 14px; background: var(--amarelo); clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); opacity: 0; pointer-events: none; }
.fstage.burst .spk { animation: spk .75s ease-out both; }
@keyframes spk { 0% { opacity: 1; transform: translate(0,0) scale(.5) rotate(0); } 100% { opacity: 0; transform: translate(var(--sx),var(--sy)) scale(1.25) rotate(140deg); } }
.ops--m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ops--m button { padding: 0 4px; font-size: 15px; }
.pop--m { padding: 16px; border-radius: 12px; gap: 12px; max-width: none; align-items: stretch; }
.pop--m::before { display: none; }
.pop--m p { font-size: 18px; }

.msonho { display: flex; flex-direction: column; gap: 16px; padding-bottom: 36px; }
.msonho h2 { font-size: 31px; line-height: 1.06; font-weight: 800; font-stretch: 112%; letter-spacing: -.01em; }
.msonho .mpad { gap: 10px; }
.pan { position: relative; height: 380px; overflow: hidden; background: #000; }
.panimg { position: absolute; left: 0; top: 0; height: 380px; width: auto; max-width: none; will-change: transform; }
.pan__tag { position: absolute; left: 12px; bottom: 12px; padding: 8px 12px; background: rgba(10,10,11,.9); border-radius: 4px; font-size: 14px; font-weight: 700; }
.avals--m { padding-bottom: 36px; display: flex; flex-direction: column; gap: 14px; }
.avals--m [data-avaliacoes] { padding: 4px 0 0; gap: 10px; }
.avals--m .aval { width: 280px; min-height: 196px; padding: 16px; }
.avals--m .aval__txt { font-size: 15px; }
.avals__ver { margin: 0 16px; min-height: 54px; font-size: 16px; }
.mloja { padding: 0 16px 36px; display: flex; flex-direction: column; gap: 10px; }
.mloja img { width: 100%; height: 230px; object-fit: cover; object-position: 30% 52%; border-radius: 4px; margin-bottom: 6px; }
.mloja h2 { font-size: 26px; line-height: 1.1; font-weight: 800; font-stretch: 112%; }
.mloja .btn { min-height: 54px; font-size: 16px; }
.mentregas { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mentregas .hexled { filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); }
.mentregas .hexled use { animation-duration: 5.5s; }
.mentregas__in { position: relative; padding: 190px 16px 44px; display: flex; flex-direction: column; gap: 14px; }
.mentregas .sobre { font-size: 13px; font-weight: 700; }
.mentregas h2 { font-size: 36px; line-height: 1.04; font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; }
.mpola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.mpola > div { position: relative; }
.mpola figure { padding: 6px 6px 8px; background: var(--branco); color: var(--preto); border-radius: 3px; box-shadow: 0 14px 30px rgba(0,0,0,.65); display: flex; flex-direction: column; gap: 6px; }
.mpola img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mpola figcaption { font-size: 13px; font-weight: 600; text-align: center; }
.faixa--m { height: 54px; font-size: 20px; }
.faixa--m span { padding-right: 40px; }
.faixa--m .track { animation-duration: 22s; }

/* fora da tela não anima */
.idle, .idle *, .idle *::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .in, .wipe, .spin, .pop, .peek, .tag, .track, .rise, .hexled use, .mwipe, .ring::before, .bar, .bar a.wa::after { animation: none !important; }
  .fila { overflow-x: auto; }
  .fila__track { animation: none !important; }
  .slide, .slide img, .slide.on img { transition: none; transform: none; }
  .hexled use { opacity: .6; }
  .splash { display: none; }
  .js .ic .d { stroke-dashoffset: 0; animation: none; }
}