/* ==========================================================================
   Center Motos — site público
   Recolorido a partir do estilo.css da União Motos (mesma arquitetura: nav
   fixa, corpo creme, acento colorido), trocando o laranja pelo AZUL da logo
   (Honda azul, com amarelo e verde de contorno) e o preto puro por um
   AZUL-NOITE — a nav e o rodapé deixam de ser pretos e passam a ser escuros
   com fundo azulado, do mesmo jeito que o Sistema Visual 2 da SavanaFlow já
   faz (`--azul-noite`, não é preto: puxa pro azul).

   O azul tem DOIS tons de propósito, e não é gosto: é contraste medido.
     --azul      #0B3FB5  -> fundo claro  (7,9:1 de texto branco em cima)
     --azul-vivo #1E5BFF  -> so em TITULO GRANDE e em detalhe sobre escuro:
                          medido, ele da 3,24:1 sobre o azul-noite, que passa
                          em texto grande (>=24px, min 3:1) e reprova em texto
                          normal. Texto pequeno azul sobre escuro usa o
                          --azul-claro abaixo.
   O AMARELO da logo entra só no CTA mais importante (o botão de WhatsApp),
   sempre com texto preto (11-12:1 de contraste) — em qualquer outro lugar
   ele brigaria com o azul pela atenção. Não trocar sem medir.
   ========================================================================== */

:root {
  --noite:      #0A1A3F;
  --noite-2:    #123168;
  --creme:      #F4F2EE;
  --creme-2:    #EAE7E1;
  --branco:     #FFFFFF;
  --azul:      #0B3FB5;
  --azul-vivo: #1E5BFF;
  /* MEDIDO: 4,51:1 sobre o azul-noite (o --azul-vivo da 3,24 e reprova o AA
     em texto normal). Mesma matiz, so menos saturado. E o azul de TEXTO. */
  --azul-claro: #497BFF;
  --azul-fraco:#E8EEFB;
  --amarelo:   #FFCC00;
  --texto:      #16171A;
  /* MEDIDO, nao escolhido: o #6B6C70 antigo dava 4,25:1 sobre o creme
     (#EAE7E1) e reprovava o AA, que pede 4,5 pra texto normal. E o creme e o
     fundo dos kickers e dos subtitulos de secao, ou seja de quase todo texto
     de apoio do site. Este tom escureceu mantendo matiz e saturacao (HSV):
     4,51:1 no creme e 5,57:1 no branco dos cards. Nao trocar sem medir. */
  --suave:      #67686C;
  --linha:      #DFDCD6;
  --linha-esc:  #26262A;
  --radius:     16px;
  --radius-g:   24px;
  --sombra:     0 6px 24px rgba(11,11,12,.07);
  --sombra-f:   0 20px 56px rgba(11,11,12,.16);
  --nav-h:      86px;
  --disp:       "Plus Jakarta Sans", system-ui, sans-serif;
  --corpo:      "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

/* O atributo `hidden` só esconde por causa de um `display:none` que vem da
   folha padrão do navegador, e QUALQUER regra nossa de `display` ganha dele.
   Isso já custou caro: com o vídeo na galeria, `.galeria__palco img` tem
   `display:block`, então a foto escondida continuava ocupando o palco e
   empurrava o vídeo pra fora do quadro — o visitante via um retângulo vazio.
   Esta linha faz `hidden` significar escondido em todo o site. */
[hidden] { display: none !important; }

body {
  font-family: var(--corpo);
  background: var(--creme);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* trava rolagem lateral (o verify checa) */
}

h1, h2, h3, h4, .disp { font-family: var(--disp); letter-spacing: -.02em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: 0; background: none; }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
@media (max-width: 620px) { .wrap { width: calc(100% - 32px); } }

/* ============================ NAV ============================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  background: var(--noite);
  display: flex; align-items: center;
  transition: height .25s, background .25s;
}
.nav--solto { background: transparent; }   /* no topo do hero, sem barra */
.nav--fixo  { height: 68px; background: rgba(10,26,63,.94); backdrop-filter: blur(10px); }
.nav__in { display: flex; align-items: center; gap: 28px; width: min(1300px, 100% - 48px); margin-inline: auto; }
/* logo-h.webp é o arquivo INTEIRO do dono, sem cortar nada (moto + CENTER
   MOTOS + faixa). O tamanho é controlado por ALTURA, não largura: a arte é
   bem mais larga que alta (~2:1), então a largura acompanha sozinha. */
.nav__logo img { height: 72px; width: auto; transition: height .25s; }
.nav--fixo .nav__logo img { height: 54px; }
.nav__menu { display: flex; gap: 30px; margin-inline: auto; }
.nav__menu a {
  color: #E6E6E8; font-size: 15px; font-weight: 500; padding: 6px 0;
  border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
}
.nav__menu a:hover, .nav__menu a.on { color: var(--branco); border-color: var(--azul-vivo); }
.nav__dir { display: flex; align-items: center; gap: 12px; }
.nav__busca {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; color: #E6E6E8;
  transition: background .18s, border-color .18s;
}
.nav__busca:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.nav__zap {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--amarelo); color: #16171A; font-weight: 800; font-size: 15px;
  padding: 12px 22px; border-radius: 999px;
  transition: transform .18s, background .18s;
}
.nav__zap:hover { background: #E6B800; transform: translateY(-1px); }
/* Entrada do dono pro painel: discreta ao lado do WhatsApp, contorno suave pra
   não competir com o botão amarelo. #C3C6CC dá ~7:1 sobre o --noite (AA ok). */
.nav__painel {
  display: inline-flex; align-items: center; gap: 7px;
  color: #C3C6CC; font-weight: 700; font-size: 14px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  transition: background .18s, border-color .18s, color .18s;
}
.nav__painel:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; }
.nav__hamb { display: none; color: #fff; width: 42px; height: 42px; }

@media (max-width: 1020px) {
  .nav__menu { display: none; }
  .nav__hamb { display: grid; place-items: center; margin-left: auto; }
  .nav__zap span { display: none; }
  .nav__zap { padding: 12px; }
  /* SÓ NO PC: o dono entra pelo computador da loja; no celular do cliente
     esse botão não existe (pedido do dono, 08/09/2026). */
  .nav__painel { display: none; }
}

/* ⚠️ A BARRA APERTAVA NO CELULAR. Em 390px a logo de 72px de altura media
   147px de LARGURA (38% da tela) e sobravam 28px entre ela e o primeiro
   ícone, com os três amontoados no canto. A logo é uma arte deitada (~2:1),
   então cada pixel de altura custa dois de largura: quem conserta é a ALTURA
   dela, não o espaçamento. Com 42px ela cai pra ~86px e sobra respiro. */
@media (max-width: 760px) {
  :root { --nav-h: 66px; }
  .nav--fixo { height: 60px; }
  .nav__in { width: calc(100% - 32px); gap: 10px; }
  .nav__logo img, .nav--fixo .nav__logo img { height: 42px; }
  .nav__dir { gap: 8px; margin-left: auto; }
  .nav__busca { width: 38px; height: 38px; }
  .nav__busca svg { width: 16px; height: 16px; }
  .nav__zap { padding: 10px; }
  .nav__zap svg { width: 18px; height: 18px; }
  .nav__hamb { width: 38px; height: 38px; margin-left: 0; }
  .nav__hamb svg { width: 23px; height: 23px; }
}

/* ============================ MENU DO CELULAR ==================
   É uma TELA, não uma lista solta: marca em cima, links no meio, contato no
   pé. Antes eram seis frases de 30px centralizadas na vertical e encostadas
   na margem de 40px — sem topo, sem pé e sem hierarquia. */
.menu-mob {
  position: fixed; inset: 0; z-index: 60; background: var(--noite);
  display: flex; flex-direction: column;
  padding: 16px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%); transition: transform .3s;
  overflow-y: auto;
}
.menu-mob.on { transform: none; }
.menu-mob__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menu-mob__marca { height: 46px; width: auto; }
/* botão de verdade, não um "×" de texto: 44px é o alvo de toque mínimo, e o
   círculo diz que ali se clica */
.menu-mob__x {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  display: grid; place-items: center;
}
.menu-mob__x:active { background: rgba(255,255,255,.1); }
/* `margin-bottom:auto` empurra o contato pro pé da tela sem precisar de altura
   fixa em lugar nenhum */
.menu-mob__links { display: flex; flex-direction: column; margin: 24px 0 auto; }
.menu-mob__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #fff; font-family: var(--disp); font-size: 22px; font-weight: 800;
  padding: 15px 2px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.menu-mob__links a svg { opacity: .38; flex: none; }
.menu-mob__links a:active, .menu-mob__links a.on { color: var(--azul-claro); }
.menu-mob__pe { display: grid; gap: 10px; padding-top: 24px; }
.menu-mob__pe .btn { width: 100%; }

/* ============================ HERO =========================== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--noite); overflow: hidden;
}
.hero__foto { position: absolute; inset: 0; }
/* 72% e não `center`: a fachada é quase quadrada (1323x1083) e o hero é
   deitado, então o corte é VERTICAL. No centro, as motos da calçada saíam
   decepadas na base e o telefone da placa ficava atrás da logo da barra.
   Descendo o enquadramento, as motos aparecem inteiras e a placa entra só
   com a faixa "COMPRA - VENDA - TROCA - CONSIGNAÇÃO", que é a que trabalha. */
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
/* scrim: a copy tem que ler por cima da foto em QUALQUER foto que o dono trocar */
.hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11,11,12,.94) 0%, rgba(11,11,12,.78) 42%, rgba(11,11,12,.28) 78%, rgba(11,11,12,.42) 100%),
    linear-gradient(to top, rgba(11,11,12,.96) 0%, rgba(11,11,12,.35) 34%, rgba(11,11,12,.55) 100%);
}
.hero__in { position: relative; z-index: 2; padding: 140px 0 76px; }
.hero__kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: #C9CBCE; font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 22px;
}
.hero__kicker::before { content: ""; width: 34px; height: 2px; background: var(--azul-vivo); }
.hero h1 {
  color: #fff; font-size: clamp(38px, 6.4vw, 76px); font-weight: 800;
  line-height: 1.02; max-width: 15ch; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--azul-vivo); }
.hero__sub {
  color: #C9CBCE; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;
  max-width: 52ch; margin: 22px 0 34px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__rolar {
  position: absolute; right: 26px; bottom: 90px; z-index: 2;
  writing-mode: vertical-rl; color: #8E9094;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
}
@media (max-width: 900px) { .hero__rolar { display: none; } }

/* ⚠️ NO CELULAR A FACHADA DEIXA DE SER FUNDO E VIRA FAIXA NO TOPO. A foto é
   quase quadrada e o hero do celular é uma caixa alta (390x844): com `cover`
   o navegador amplia ~2,2x e sobra o pilar de concreto atrás do texto, com as
   motos e a placa fora do quadro — a foto para de contar que ali é uma loja
   de motos. É a mesma armadilha e o mesmo conserto do hero do site/ da
   SavanaFlow, da fachada da União e do hero da NK Luz.
   `--faixa` é a fonte única: a altura da foto, o degradê que a costura no
   escuro e o espaço que o texto reserva saem todos dela. Em px fixo, o tablet
   (768px pede faixa mais alta que 390px) cortava a cena no meio. */
@media (max-width: 760px) {
  .hero { --faixa: clamp(232px, 46vw, 330px); min-height: 0; }
  .hero__foto { inset: 0 0 auto 0; height: var(--faixa); }
  .hero__foto img { object-position: center 62%; }
  /* o degradê mora DENTRO da faixa: preso ao hero, ele viraria um número em px
     que deixa de bater no dia em que a --faixa mudar */
  .hero__foto::after {
    background: linear-gradient(to bottom,
      rgba(11,11,12,.42) 0%, rgba(11,11,12,.06) 34%,
      rgba(11,11,12,.55) 78%, var(--noite) 100%);
  }
  .hero__in { padding: calc(var(--faixa) + 30px) 0 54px; }
  /* ⚠️ A barra "solta" (transparente) só se lê porque no desktop a foto é
     escurecida por baixo dela. Na faixa do celular ela cai em cima do céu e da
     placa amarela: medido, o hambúrguer branco dava 2,38:1, abaixo dos 3:1 que
     um ícone precisa. O véu escuro no alto da barra devolve o contraste sem
     virar uma tarja sólida sobre a foto. */
  .nav--solto {
    background: linear-gradient(to bottom,
      rgba(10,26,63,.86) 0%, rgba(10,26,63,.72) 62%, rgba(10,26,63,0) 100%);
  }
}

/* ============================ BOTÕES ========================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 15.5px; padding: 15px 30px; border-radius: 999px;
  transition: transform .18s, background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--marca  { background: var(--azul); color: #fff; }
.btn--marca:hover { background: #0A369C; }
.btn--zap    { background: var(--amarelo); color: #16171A; }
.btn--zap:hover { background: #E6B800; }
.btn--claro  { background: #fff; color: var(--texto); }
.btn--linha  { border: 1.6px solid rgba(255,255,255,.32); color: #fff; }
.btn--linha:hover { border-color: #fff; background: rgba(255,255,255,.09); }
.btn--escuro { background: var(--noite); color: #fff; }
/* ⚠️ `.btn--linha` é contorno BRANCO: só existe sobre fundo escuro. Em seção
   clara (o contato, o mapa) ele some no creme — os dois botões do mapa ficaram
   ilegíveis assim. Esta é a versão da seção clara, com a tinta do texto. */
.btn--linha-esc { border: 1.6px solid rgba(10,26,63,.28); color: var(--noite); }
.btn--linha-esc:hover { border-color: var(--noite); background: rgba(10,26,63,.06); }
.btn--escuro:hover { background: #24252A; }
.btn--bloco  { width: 100%; }

/* ========================== MARQUEE ========================== */
.selos { background: var(--noite); border-top: 1px solid var(--linha-esc); overflow: hidden; padding: 15px 0; }
/* Marquee: o JS (montarSelos) mede a largura de UM conjunto (.selos__set) e
   clona conjuntos até a pista passar da largura da tela + 1 conjunto, então a
   animação anda EXATAMENTE a largura de um conjunto (--set). Assim não dá o
   salto do "-50% com gap" nem sobra espaço vazio em tela larga. */
.selos__trilho { display: flex; width: max-content; animation: correr 30s linear infinite; will-change: transform; }
.selos__set { display: inline-flex; gap: 40px; padding-right: 40px; }
.selos span {
  display: inline-flex; align-items: center; gap: 12px;
  color: #C9CBCE; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.selos__ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; color: var(--azul-vivo);
  background: rgba(30,91,255,.14); border: 1px solid rgba(30,91,255,.28);
}
.selos__ic svg { width: 18px; height: 18px; }
@keyframes correr { to { transform: translateX(calc(-1 * var(--set, 50%))); } }
@media (prefers-reduced-motion: reduce) { .selos__trilho { animation: none; } }

/* ========================== SEÇÕES =========================== */
.sec { padding: 96px 0; }
.sec--escura { background: var(--noite); color: #fff; }
.sec--creme2 { background: var(--creme-2); }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--suave); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px;
}
.kicker::before { content: ""; width: 30px; height: 2px; background: var(--azul); }
.sec--escura .kicker { color: #9A9CA0; }
.sec--escura .kicker::before { background: var(--azul-vivo); }
.sec h2 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 800; line-height: 1.06; text-wrap: balance; }
.sec__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.sec__topo--col { align-items: flex-start; }
.sec__topo p { color: var(--suave); max-width: 46ch; font-size: 16px; line-height: 1.65; }
.sec__sub { margin-top: 16px; max-width: 52ch; }
.sec--escura .sec__topo p { color: #A8AAAE; }
@media (max-width: 860px) { .sec { padding: 66px 0; } .sec__topo { flex-direction: column; align-items: flex-start; } }

/* ======================= CARD DE MOTO ======================= */
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1140px) { .grade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .grade { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 540px)  { .grade { grid-template-columns: 1fr; } }

.card {
  background: var(--branco); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--sombra); display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-f); }
.card__foto { position: relative; aspect-ratio: 4/3; background: var(--creme-2); }
.card__foto img { width: 100%; height: 100%; object-fit: cover; }
.card__ano {
  position: absolute; top: 12px; left: 12px;
  background: rgba(11,11,12,.7); color: #fff; backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.card__n {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(11,11,12,.62); color: #fff; backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.card__sel {
  position: absolute; top: 12px; right: 12px;
  background: var(--azul-vivo); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.card__sel--reservado { background: #E9A21B; color: #2C1D00; }
.card__corpo { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.card__meta { color: var(--suave); font-size: 13.5px; margin: 10px 0 14px; display: flex; align-items: center; gap: 8px; }
.card__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--linha); font-style: normal; }
.card__pe {
  border-top: 1px solid var(--linha); padding-top: 14px; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card__preco { font-family: var(--disp); font-size: 21px; font-weight: 800; }
.card__ver { color: var(--azul); font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.card:hover .card__ver { gap: 9px; }

/* =========================== SOBRE =========================== */
.motivos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .motivos { grid-template-columns: 1fr; } }
.motivo {
  background: var(--branco); border-radius: var(--radius); padding: 32px 28px;
  box-shadow: var(--sombra); border: 1px solid transparent;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.motivo:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-f); border-color: rgba(166,72,15,.18);
}
.motivo__ic {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px;
  background: var(--azul-fraco); color: var(--azul);
  display: grid; place-items: center;
  transition: background .28s, transform .28s cubic-bezier(.2,.7,.3,1), color .28s;
}
/* o ícone NÃO troca: no hover só acompanha o card (chip fica azul, ícone branco) */
.motivo:hover .motivo__ic { background: var(--azul); color: #fff; transform: rotate(-6deg) scale(1.06); }
.motivo h3 { font-size: 20px; font-weight: 700; margin-bottom: 9px; }
.motivo p { color: var(--suave); font-size: 15px; line-height: 1.62; }

/* ========================== FUNDADOR ========================= */
/* overflow:hidden segura o glow azul (::before + blur) dentro da seção;
   o balão fica a 10px da borda do .wrap, então não é cortado. */
#fundador { overflow: hidden; }
.fund { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; align-items: center; }
@media (max-width: 900px) {
  .fund { grid-template-columns: 1fr; gap: 40px; }
  /* Em UMA coluna a foto pegaria a largura toda, e a 4:5 isso vira 1075px de
     altura no tablet: o visitante rola uma tela inteira de retrato antes de
     chegar no texto. Travada, ela fica alta o bastante pra se ver e o bloco
     continua sendo uma seção, não uma página. */
  .fund__foto--real { max-width: 340px; margin-inline: auto; width: 100%; }
  /* 🔴 O balão tem tamanho FIXO em px e a moldura encolhe: no desktop ele passa
     acima da cabeça (moldura de 484px), no celular ele mede 58% dos 340px e cai
     EM CIMA DO ROSTO DO DONO. Com foto real ele desce pra base, onde o que está
     atrás é o terno. O rabo vira pro outro canto pra continuar apontando pra
     dentro da foto. Vale só pra foto de verdade: no placeholder não há rosto
     nenhum pra cobrir. */
  .fund__foto--real .fund__balao { top: auto; bottom: 42px; }
}

/* --- coluna da foto: glow azul atrás + moldura + faixa da marca --- */
.fund__foto { position: relative; align-self: stretch; min-height: 440px; border-radius: var(--radius-g); }
/* ⚠️ FOTO REAL manda na própria altura. O `stretch` acima é do placeholder,
   que estica sem custo nenhum porque não tem nada dentro pra cortar. Com foto,
   a coluna do texto define a altura e o `cover` amplia até caber numa caixa
   quase quadrada — o recorte é 4:5 e a cabeça do dono saía do quadro. A
   proporção aqui é a MESMA do recorte de tools/prepara-foto-fundador.py:
   mudou lá, muda aqui, senão o `cover` volta a cortar. */
.fund__foto--real { align-self: center; aspect-ratio: 4 / 5; min-height: 0; }
.fund__foto::before {
  content: ""; position: absolute; inset: -6% -10% 8% -10%; z-index: 0; border-radius: 50%;
  background: radial-gradient(60% 60% at 40% 45%, rgba(30,91,255,.35), transparent 70%);
  filter: blur(18px);
}
.fund__foto img {
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; border-radius: var(--radius-g);
}
/* placeholder estilizado (troca pela foto real depois) */
.fund__ph {
  position: relative; z-index: 1; width: 100%; height: 100%; min-height: 440px;
  border-radius: var(--radius-g); display: grid; place-items: center; gap: 14px;
  grid-auto-flow: row; text-align: center;
  background: linear-gradient(160deg, #17181B, #0E0F11);
  border: 1px dashed rgba(255,255,255,.14);
}
.fund__ph svg { width: 62px; height: 62px; color: #3C3E43; }
/* 4,5:1 sobre o fundo do card, medido. Este texto e um AVISO pro dono (a
   foto real ainda nao chegou) e some quando CONFIG.fundador.foto existir,
   mas ate la ele esta na tela do cliente e precisa se ler. */
.fund__ph span { color: #8E9096; font-size: 13px; letter-spacing: .04em; line-height: 1.5; }
/* balão de fala */
.fund__balao {
  position: absolute; z-index: 3; top: 30px; left: -14px;
  background: #fff; color: var(--texto); font-weight: 700; font-size: 14.5px;
  padding: 12px 16px; border-radius: 14px 14px 14px 4px; box-shadow: var(--sombra-f);
}
.fund__balao::after {
  content: ""; position: absolute; left: 14px; bottom: -8px;
  border: 8px solid transparent; border-top-color: #fff; border-bottom: 0;
}
/* faixa da marca (azul, no lugar do laranja da União Motos) */
.fund__faixa {
  position: absolute; z-index: 2; left: 8%; right: 8%; bottom: 14px; height: 5px;
  border-radius: 3px; overflow: hidden;
  background: linear-gradient(90deg, var(--azul) 0 55%, #E7E4DE 55% 72%, var(--azul-vivo) 72% 100%);
}
/* etiqueta "Exemplo" */
.fund__tag {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #C9CBCE; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}
/* A etiqueta nasceu em cima da FOTO, avisando que o rosto era de exemplo. A
   foto virou real em 03/09/2026 e a etiqueta ali passaria a mentir; quem ainda
   é texto nosso é a CITAÇÃO, então ela desceu pra junto da frase. Aqui ela
   entra no fluxo (a de cima é `absolute` sobre a foto). */
.fund__tag--cit {
  position: static; display: inline-block; margin: -18px 0 26px;
}
/* --- coluna do texto --- */
.fund__txt h2 { margin-top: 6px; }
.fund__cit {
  margin: 22px 0 30px; padding-left: 22px; border-left: 3px solid var(--azul-vivo);
  color: #E4E5E7; font-size: 20px; line-height: 1.66; font-weight: 500; max-width: 40ch;
}
.fund__cit em { font-style: normal; color: var(--azul-claro); }  /* 20px normal: precisa de 4,5:1 */
.fund__ass { display: flex; align-items: center; gap: 13px; }
.fund__av {
  width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; color: #7C7E83;
  background: #1B1C1F; border: 1px solid var(--linha-esc);
}
.fund__av img { width: 100%; height: 100%; object-fit: cover; }
.fund__av svg { width: 24px; height: 24px; }
.fund__ass b { display: block; font-size: 15.5px; color: #fff; }
.fund__ass small { color: #8E9094; font-size: 13.5px; }

/* ========================== CONTATO ========================== */
.contato { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .contato { grid-template-columns: 1fr; gap: 34px; } }
.dado { padding: 18px 0; border-bottom: 1px solid rgba(11,11,12,.1); }
/* MEDIDO: o #85837E antigo dava 3,07:1 sobre o creme e reprovava o AA. Este
   tom mantem a matiz e passa (4,51:1). Sao os rotulos TELEFONE, ENDERECO e
   HORARIO, que e onde o cliente procura como chegar na loja. */
.dado dt { color: #6A6864; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.dado dd { color: var(--texto); font-size: 17px; font-weight: 600; }
.dado dd a { color: var(--texto); }
.dado dd a:hover { color: var(--azul); }
.mapa { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(11,11,12,.1); }
.mapa iframe { width: 100%; height: 320px; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }

/* ========================== RODAPÉ =========================== */
.pe { background: var(--noite); color: #9A9CA0; padding: 70px 0 26px; border-top: 1px solid var(--linha-esc); }
.pe__grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }
@media (max-width: 860px) { .pe__grade { grid-template-columns: 1fr; gap: 30px; } }
/* No celular a linha de baixo empilha e alinha à esquerda: assim o "Painel do
   dono" não cai no canto inferior direito, onde o botão flutuante de WhatsApp
   fica por cima. O respiro extra embaixo do .pe tira a última linha de trás
   do botão (56px + 20px de folga). */
@media (max-width: 640px) {
  .pe { padding-bottom: 88px; }
  .pe__fim { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.pe__logo img { height: 68px; width: auto; margin-bottom: 16px; }
.pe p { font-size: 14.5px; line-height: 1.68; max-width: 42ch; }
.pe h4 { color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.pe ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.pe ul a { font-size: 15px; }
.pe ul a:hover { color: var(--azul-claro); }
.pe__redes { display: flex; gap: 10px; margin-top: 16px; }
.pe__redes a {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--linha-esc);
  display: grid; place-items: center; color: #C9CBCE; transition: border-color .18s, color .18s;
}
.pe__redes a:hover { border-color: var(--azul-vivo); color: var(--azul-vivo); }
.pe__fim {
  border-top: 1px solid var(--linha-esc); margin-top: 46px; padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}
.pe__fim a:hover { color: var(--azul-claro); }

/* aviso de demonstração: some quando o site for pro ar de verdade */
.aviso-demo {
  background: #2A2410; color: #F0D28A; border-top: 1px solid #4A3F1C;
  font-size: 12.5px; text-align: center; padding: 11px 20px; line-height: 1.5;
}

/* ===================== BOTÃO FLUTUANTE ======================= */
.zap-fixo {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--amarelo); color: #16171A;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(255,204,0,.4);
  transition: transform .18s;
}
.zap-fixo:hover { transform: scale(1.07); }

/* ==================== PÁGINA DE ESTOQUE ====================== */
.miolo { padding-top: var(--nav-h); }
.migalha { color: var(--suave); font-size: 13.5px; padding: 26px 0 0; }
.migalha a:hover { color: var(--azul); }
/* No celular a migalha tem 16px de altura, que e menos que a ponta do dedo.
   A area de toque vem de um ::after absoluto: crescer a caixa do <a> com
   padding desalinharia a linha e descolaria o sublinhado (mesma regra do
   rodape do Grupo Imperial). */
.migalha a { position: relative; }
.migalha a::after { content: ""; position: absolute; left: 0; right: 0; top: -13px; bottom: -13px; }
.migalha span { color: var(--texto); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.chip {
  border: 1.5px solid var(--linha); background: var(--branco); color: var(--texto);
  font-size: 14px; font-weight: 600; padding: 11px 21px; border-radius: 999px;
  transition: background .18s, color .18s, border-color .18s;
}
.chip:hover { border-color: var(--azul); color: var(--azul); }
.chip.on { background: var(--azul); border-color: var(--azul); color: #fff; }

.estoque { display: grid; grid-template-columns: 268px 1fr; gap: 30px; align-items: start; }
@media (max-width: 980px) { .estoque { grid-template-columns: 1fr; } }

.filtros { background: var(--branco); border-radius: var(--radius); padding: 22px; box-shadow: var(--sombra); position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 980px) { .filtros { position: static; } }
.filtros h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.fgrupo { border-bottom: 1px solid var(--linha); }
.fgrupo:last-of-type { border-bottom: 0; }
.fgrupo__cab {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; font-size: 15px; font-weight: 700; color: var(--texto);
}
.fgrupo__cab svg { transition: transform .2s; color: var(--suave); }
.fgrupo.on .fgrupo__cab svg { transform: rotate(180deg); }
.fgrupo__corpo { display: none; padding-bottom: 16px; }
.fgrupo.on .fgrupo__corpo { display: block; }
.opc { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14.5px; color: var(--texto); cursor: pointer; }
.opc input { width: 16px; height: 16px; accent-color: var(--azul); cursor: pointer; }
.opc small { color: var(--suave); margin-left: auto; font-size: 12.5px; }
.faixa { display: flex; align-items: center; gap: 8px; }
.faixa input {
  width: 100%; border: 1.4px solid var(--linha); border-radius: 10px;
  padding: 9px 11px; font-size: 14px; outline: none; color: var(--texto); background: #fff;
}
.faixa input:focus { border-color: var(--azul); }
.faixa span { color: var(--suave); font-size: 13px; }
.filtros__pe { padding-top: 18px; }
.filtros__limpar { display: block; width: 100%; text-align: center; color: var(--suave); font-size: 13.5px; padding: 11px 0; }
.filtros__limpar:hover { color: var(--azul); }

.barra { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.busca-cx { position: relative; flex: 1; min-width: 220px; }
.busca-cx svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--suave); }
.busca-cx input {
  width: 100%; border: 1.5px solid var(--linha); border-radius: 999px;
  padding: 14px 18px 14px 44px; font-size: 15px; outline: none; background: #fff; color: var(--texto);
}
.busca-cx input:focus { border-color: var(--azul); }
.conta { color: var(--suave); font-size: 14px; white-space: nowrap; }
.ordenar {
  border: 1.5px solid var(--linha); border-radius: 999px; background: #fff;
  padding: 13px 18px; font-size: 14.5px; font-weight: 600; color: var(--texto); outline: none; cursor: pointer;
}
.ordenar:focus { border-color: var(--azul); }

.vazio { text-align: center; padding: 70px 20px; color: var(--suave); }
.vazio h3 { font-size: 22px; color: var(--texto); margin-bottom: 8px; }

/* =================== PÁGINA DO VEÍCULO ======================= */
.veic { display: grid; grid-template-columns: 1.28fr .72fr; gap: 40px; align-items: start; margin: 22px 0 10px; }
@media (max-width: 1000px) { .veic { grid-template-columns: 1fr; gap: 26px; } }

.galeria { position: relative; }
.galeria__palco {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius);
  overflow: hidden; background: var(--creme-2);
}
.galeria__palco img { width: 100%; height: 100%; object-fit: cover; }
.gseta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(11,11,12,.55); color: #fff; backdrop-filter: blur(6px);
  display: grid; place-items: center; transition: background .18s;
}
.gseta:hover { background: rgba(11,11,12,.82); }
.gseta--esq { left: 14px; } .gseta--dir { right: 14px; }
.gconta {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(11,11,12,.6); color: #fff; backdrop-filter: blur(6px);
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px;
}
.gzoom {
  position: absolute; right: 14px; bottom: 14px;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(11,11,12,.6); color: #fff; backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.gzoom:hover { background: rgba(11,11,12,.85); }
.minis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 620px) { .minis { grid-template-columns: repeat(4, 1fr); } }
.mini {
  aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  border: 2.5px solid transparent; background: var(--creme-2); transition: border-color .18s;
}
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini.on { border-color: var(--azul); }

/* card fixo do preço */
.compra {
  background: var(--branco); border-radius: var(--radius-g); padding: 30px 28px;
  box-shadow: var(--sombra); position: sticky; top: calc(var(--nav-h) + 16px);
}
@media (max-width: 1000px) { .compra { position: static; } }
.compra__kick {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--suave); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px;
}
.compra__kick::before { content: ""; width: 26px; height: 2px; background: var(--azul); }
.compra h1 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.12; }
.compra__rot { color: var(--suave); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 22px 0 2px; }
.compra__preco { font-family: var(--disp); font-size: clamp(32px, 4vw, 42px); font-weight: 800; letter-spacing: -.03em; }
.compra__parcela { color: var(--suave); font-size: 14px; margin-top: 4px; }
.fichinhas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.fichinha { border: 1.4px solid var(--linha); border-radius: 14px; padding: 14px 15px; }
.fichinha__ic { width: 30px; height: 30px; border-radius: 9px; background: var(--azul-fraco); color: var(--azul); display: grid; place-items: center; margin-bottom: 10px; }
.fichinha dt { color: var(--suave); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fichinha dd { font-size: 15px; font-weight: 700; margin-top: 3px; line-height: 1.32; }
.compra__selos { display: flex; flex-wrap: wrap; gap: 8px 20px; border-top: 1px solid var(--linha); margin-top: 22px; padding-top: 18px; }
.compra__selos span { display: inline-flex; align-items: center; gap: 7px; color: var(--suave); font-size: 13px; }
.compra__selos svg { color: var(--azul); flex: none; }

.bloco { padding: 44px 0; border-top: 1px solid var(--linha); }
.bloco h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 22px; }

.ficha-tab { border: 1px solid var(--linha); border-radius: var(--radius); overflow: hidden; }
.ficha-tab__grade { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .ficha-tab__grade { grid-template-columns: 1fr; } }
.linha-f {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px; border-bottom: 1px solid var(--linha); background: #fff;
}
.ficha-tab__grade > div:nth-child(odd) .linha-f { border-right: 1px solid var(--linha); }
@media (max-width: 780px) { .ficha-tab__grade > div:nth-child(odd) .linha-f { border-right: 0; } }
.linha-f:nth-child(even) { background: #FBFAF8; }
.linha-f dt { color: var(--suave); font-size: 14.5px; }
.linha-f dd { font-weight: 700; font-size: 14.5px; text-align: right; }

.opcs { display: flex; flex-wrap: wrap; gap: 10px; }
.opc-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.4px solid var(--linha); background: #fff; border-radius: 999px;
  padding: 10px 18px; font-size: 14.5px;
}
.opc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--azul-vivo); }
.opc-chip--mais { border-style: dashed; color: var(--suave); cursor: pointer; }
.opc-chip--mais::before { display: none; }

.descr p { color: #3A3B3F; font-size: 16px; line-height: 1.78; max-width: 74ch; margin-bottom: 16px; }
.descr p:first-child { font-weight: 600; color: var(--texto); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(8,8,9,.96); display: none; place-items: center; }
.lb.on { display: grid; }
.lb img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.lb__x { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 40px; line-height: 1; }
.lb__conta { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: #B9BBBE; font-size: 14px; }
.lb .gseta { background: rgba(255,255,255,.14); }
.lb .gseta:hover { background: rgba(255,255,255,.28); }
.lb .gseta--esq { left: 22px; } .lb .gseta--dir { right: 22px; }

/* busca global (overlay da lupa) */
.busca-geral { position: fixed; inset: 0; z-index: 80; background: rgba(11,11,12,.97); display: none; padding: 14vh 24px 0; }
.busca-geral.on { display: block; }
.busca-geral__cx { width: min(680px, 100%); margin-inline: auto; }
.busca-geral input {
  width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--linha-esc);
  color: #fff; font-family: var(--disp); font-size: clamp(24px, 4vw, 38px); font-weight: 700;
  padding: 14px 0; outline: none;
}
.busca-geral input:focus { border-color: var(--azul-vivo); }
.busca-geral input::placeholder { color: #56585C; }
.busca-geral__dica { color: #8E9094; font-size: 13.5px; margin-top: 14px; }
.busca-geral__res { margin-top: 26px; display: flex; flex-direction: column; gap: 4px; max-height: 44vh; overflow-y: auto; }
.busca-geral__res a { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; color: #E6E6E8; }
.busca-geral__res a:hover { background: rgba(255,255,255,.07); }
.busca-geral__res img { width: 66px; height: 50px; object-fit: cover; border-radius: 8px; flex: none; }
.busca-geral__res b { font-size: 15px; font-weight: 600; display: block; }
.busca-geral__res small { color: #8E9094; font-size: 13px; }
/* nowrap: no celular o "R$ 54.900" quebrava em duas linhas e o preco ficava
   desalinhado do nome da moto. Valor nao se parte no meio. */
.busca-geral__res i { margin-left: auto; font-style: normal; color: var(--azul-claro); font-weight: 700; font-size: 15px; white-space: nowrap; }
.busca-geral__x { position: absolute; top: 22px; right: 26px; color: #fff; font-size: 38px; line-height: 1; }

/* ================= "NÃO ACHEI A MOTO QUE EU QUERO" ===================
   Bloco de captura no fim do estoque. Fundo escuro de propósito: a página
   inteira é creme, e se ele fosse creme também sumiria no meio da grade
   de cards, que é justamente onde a pessoa já concluiu que não tem a moto. */
.procuro { margin: 56px 0 8px; }
.procuro__cx {
  background: var(--noite); color: var(--creme);
  border-radius: var(--radius-g); padding: 40px 38px;
}
.procuro__txt h3 { font-family: var(--disp); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.procuro__txt p { color: #A9AAAE; margin: 8px 0 24px; max-width: 56ch; line-height: 1.6; }
.procuro__form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.procuro__campo { flex: 1 1 300px; display: block; }
.procuro__campo--curto { flex: 0 1 190px; }
.procuro__campo span { display: block; font-size: 12.5px; font-weight: 700; color: #A9AAAE; margin-bottom: 7px; }
.procuro__campo input {
  width: 100%; font: inherit; font-size: 15px; padding: 13px 15px;
  background: var(--noite-2); color: var(--creme);
  border: 1.5px solid var(--linha-esc); border-radius: 12px; outline: none;
}
.procuro__campo input::placeholder { color: #6B6C70; }
.procuro__campo input:focus { border-color: var(--azul-vivo); }
.procuro__form .btn { flex: none; padding: 14px 26px; }
.procuro__pe { color: var(--azul-vivo); font-size: 13.5px; margin-top: 14px; min-height: 19px; }

@media (max-width: 700px) {
  .procuro__cx { padding: 30px 22px; border-radius: var(--radius); }
  .procuro__txt h3 { font-size: 21px; }
  /* o botão vira largura cheia: com o teclado aberto no celular, botão
     estreito ao lado do campo fica meio escondido atrás do teclado */
  .procuro__campo, .procuro__campo--curto { flex: 1 1 100%; }
  .procuro__form .btn { width: 100%; }
}

/* ===================== VÍDEO DO MOTO NA GALERIA =====================
   O vídeo é o primeiro item da galeria quando existe. `contain` e não `cover`
   porque o dono grava com o celular na horizontal e a proporção não é a mesma
   do palco: com `cover` a frente do moto sai cortada. */
.galeria__palco video { width: 100%; height: 100%; object-fit: contain; background: var(--noite); display: block; }
/* o selo sai de baixo quando é vídeo: ali fica a barra de progresso do player */
.gconta--topo { bottom: auto; top: 14px; }
.mini--video { position: relative; }
.mini__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11,11,12,.42);
}
/* triângulo em CSS puro: um SVG a mais só pra isso não se paga */
.mini__play::after {
  content: ""; width: 0; height: 0;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  margin-left: 4px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.card__vid {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--azul); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}

/* ==========================================================================
   SHOWROOM — a rolagem entra na loja (portado do Mônaco, 30/08/2026)
   --------------------------------------------------------------------------
   `.show__fixo` é `position:sticky`: fica parado no topo da tela enquanto a
   pista (300vh) rola por baixo, o que dá a sensação de a câmera se aproximar
   sozinha. É JS quem escreve `--p` (0 a 1) a cada quadro da rolagem — sem
   script. Com `sticky` a geometria é do CSS: JS fora do ar, a pessoa vê a
   cena parada no meio. Feio, não quebrado.

   ⚠️ `overflow:hidden` em QUALQUER ancestral mata o `sticky` sem avisar.

   A foto do salão é DEITADA (1600x1200, trocada em 02/09/2026), então
   `.show__dentro` usa `cover` como no Mônaco: no portal pequeno ele recorta o
   meio (a janela olhando pra dentro) e, quando o portal vira a tela toda, a
   foto preenche sem sobra. ⚠️ A foto ANTERIOR era vertical (900x1600) e
   precisava de `contain` — voltando a entrar foto de celular em pé aqui, o
   `cover` amplia e decepa a lateral (mesma armadilha do hero do site/ da
   SavanaFlow e da fachada da União no celular).
   ========================================================================== */
.show { position: relative; background: var(--noite); }
.show__pista { height: 300vh; }
.show__fixo {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  --p: 0;                       /* progresso da rolagem, escrito pelo app.js */
}

.show__fora {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + var(--p) * .16));
  opacity: calc(1 - var(--p) * .55);
}
.show__veu {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,26,63,.62) 0%, rgba(10,26,63,.30) 40%, rgba(10,26,63,.78) 100%);
  opacity: calc(1 - var(--p) * .6);
}

/* O PORTAL. Começa como um retrato de 300px no meio da tela e termina cobrindo
   tudo. Cresce em width/height reais (não `transform:scale`) porque com scale
   a foto de dentro esticaria junto e o salão sairia deformado. */
.show__portal {
  position: relative; z-index: 2;
  width:  calc(300px + (100vw - 300px) * var(--p));
  height: calc(430px + (100svh - 430px) * var(--p));
  border-radius: calc(18px - 18px * var(--p));
  overflow: hidden;
  background: var(--noite);
  box-shadow: 0 40px 120px rgba(0,0,0,calc(.6 - var(--p) * .6));
  will-change: width, height;
}
.show__dentro { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fio azul da marca em volta do portal, que apaga quando ele vira a tela toda */
.show__brilho {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(30,91,255,calc(.85 - var(--p) * .85));
}

.show__txt {
  position: absolute; z-index: 3; text-align: center; padding: 0 22px;
  display: grid; justify-items: center; gap: 26px;
}
/* Scrim atrás do título, e ele CRESCE com a rolagem: enquanto o portal está
   pequeno o título lê sobre o fundo escuro, mas quando o salão abre ele cai
   em cima da área mais clara da foto (o piso e as luzes do teto). Sombra de
   texto sozinha não segura ali. Radial e sem borda pra não virar tarja. */
.show__txt::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 150%; height: 190%;
  background: radial-gradient(ellipse at center, rgba(10,26,63,.72) 0%, rgba(10,26,63,.45) 45%, transparent 72%);
  opacity: var(--p);
  pointer-events: none;
}
.show__txt h2 {
  color: #fff; font-size: clamp(30px, 5vw, 62px); font-weight: 800;
  line-height: 1.04; text-shadow: 0 4px 30px rgba(0,0,0,.7);
}
/* o botão só aparece depois que a pessoa já está "dentro": antes disso ele
   convida a sair da seção justo no meio da animação */
.show__txt .btn {
  opacity: calc((var(--p) - .55) * 3);
  pointer-events: none;
}
.show__fixo[data-fim="1"] .show__txt .btn { pointer-events: auto; }

.show__dica {
  position: absolute; z-index: 3; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  color: #C9CBCE; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  opacity: calc(1 - var(--p) * 4);
}
.show__dica svg { animation: showSeta 1.9s ease-in-out infinite; }
@keyframes showSeta { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* No celular a pista encurta: 300vh de rolagem num aparelho é muito dedo pra
   uma seção só, e a barra de endereço que aparece e some faz a svh mudar no
   meio do caminho. */
@media (max-width: 900px) {
  .show__pista { height: 220vh; }
  .show__portal { width: calc(220px + (100vw - 220px) * var(--p)); height: calc(330px + (100svh - 330px) * var(--p)); }
  .show__dica { bottom: 22px; }
}

/* Quem pediu menos animação recebe a cena montada, sem depender de rolar. */
@media (prefers-reduced-motion: reduce) {
  .show__pista { height: auto; }
  .show__fixo { position: relative; --p: 1; }
  .show__dica { display: none; }
  .show__txt .btn { opacity: 1; pointer-events: auto; }
  .show__dica svg { animation: none; }
}

/* ===================== AVISO DE REPASSE ============================
   Observação legal do dono (12/09/2026): a moto de repasse não tem
   garantia. Fica bem destacada em amarelo/âmbar onde há repasse (home,
   estoque e a página da moto). Cores MEDIDAS contra o fundo âmbar. */
.aviso-repasse {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #FFF4D6;
  border: 1px solid #F0B429;
  border-left: 5px solid #C77700;
  border-radius: 14px;
  padding: 15px 17px;
  margin: 22px 0 4px;
}
.aviso-repasse__ic { color: #B45309; flex: none; margin-top: 1px; }
.aviso-repasse__t {
  display: block;
  color: #7A4B00;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.aviso-repasse__p {
  margin: 0;
  color: #52401F;      /* MEDIDO: bem acima de 4,5:1 sobre o #FFF4D6 */
  font-size: 14px;
  line-height: 1.55;
}
.aviso-repasse__p b { color: #6B3A00; font-weight: 800; }