/* Ribeirão Motors: a página é uma queda, do céu até a terra roxa. */
@font-face { font-family: "Bowlby One"; src: url("assets/fonts/bowlby-one-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; font-weight: 400; src: url("assets/fonts/archivo-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; font-weight: 600; src: url("assets/fonts/archivo-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; font-weight: 800; src: url("assets/fonts/archivo-latin-800-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --ceu-alto: #1270c9;
  --ceu: #3a9eea;
  --ceu-claro: #8fd0f5;
  --horizonte: #ffe6bd;
  --terra: #5b1a2b;
  --terra-funda: #3a0f1b;
  --vermelho: #e72e35;
  --vermelho-fundo: #c21c24;
  --tinta: #0f2438;
  --tinta-suave: #41566a;
  --papel: #ffffff;
  --linha: #d5dee6;
  --titulo: "Bowlby One", "Arial Black", sans-serif;
  --texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lado: clamp(16px, 4vw, 56px);
  --topo-a: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-a) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--tinta);
  font: 400 1rem/1.55 var(--texto);
  word-spacing: .07em;
  background: linear-gradient(180deg, var(--ceu-alto) 0, var(--ceu) 14%, #62b7f0 48%, var(--ceu-claro) 74%, #cfeaf8 88%, var(--horizonte) 100%);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
.heroi :focus-visible { outline-color: #fff; }

#palco { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; display: block; }
main, .topo, .chao { position: relative; z-index: 1; }

.pular { position: fixed; left: 16px; top: -60px; z-index: 30; background: #fff; padding: 10px 16px; border-radius: 8px; }
.pular:focus { top: 8px; }

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 20;
  height: var(--topo-a);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--lado);
  background: #fff;
  box-shadow: 0 2px 0 rgba(15, 36, 56, .12);
}
.marca { text-decoration: none; display: flex; align-items: center; }
.marca img { height: 48px; width: auto; }
.marca-texto { display: none; font: 400 1.25rem/1 var(--titulo); }
.marca.sem-logo img { display: none; }
.marca.sem-logo .marca-texto { display: block; }
.topo nav { display: flex; gap: 24px; margin-left: auto; font-weight: 600; }
.topo nav a { text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; }
.topo nav a:hover { border-color: var(--vermelho); }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 11px 20px;
  border: 2px solid transparent; border-radius: 6px;
  font-weight: 800; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; background: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-verm { background: var(--vermelho-fundo); color: #fff; }
.btn-verm:hover { background: #a3141b; }
.btn-branco { background: #fff; color: var(--tinta); }
.btn-branco:hover { background: var(--horizonte); }
.btn-contorno { border-color: #fff; color: #fff; }
.btn-contorno:hover { background: #fff; color: var(--tinta); }
.btn-linha { border-color: var(--tinta); color: var(--tinta); }
.btn-linha:hover { background: var(--tinta); color: #fff; }
.btn-escuro { background: var(--tinta); color: #fff; }
.btn-escuro:hover { background: #000; }
.btn-topo { min-height: 42px; padding: 8px 16px; }

/* Herói */
.heroi {
  position: relative;
  height: calc(100vh - var(--topo-a));
  height: calc(100svh - var(--topo-a));
  min-height: 560px;
  color: #fff;
  padding: clamp(18px, 3.4vh, 40px) var(--lado) 0;
  overflow: visible;
}
.heroi-texto { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, .8fr); gap: clamp(20px, 3vw, 48px); align-items: end; }
h1 {
  font: 400 clamp(2.5rem, min(5.1vw, 8.6vh), 5rem)/1.04 var(--titulo);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.heroi-lado p { font-size: clamp(1rem, 1.25vw, 1.15rem); max-width: 44ch; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.letreiro-reserva { display: none; }
.heroi-rodape { position: absolute; left: var(--lado); right: var(--lado); bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.btn-mini {
  background: rgba(15, 36, 56, .78); color: #fff; border: 0; border-radius: 6px;
  padding: 9px 14px; font-weight: 600; cursor: pointer;
}
.btn-mini:hover { background: var(--tinta); }
.dica { font-weight: 600; background: rgba(15, 36, 56, .78); padding: 7px 12px; border-radius: 6px; opacity: 0; transition: opacity .5s; }
.dica.ver { opacity: 1; }
.tremor .heroi-texto { animation: tremor .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes tremor {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(5px, -3px); }
  30%, 50%, 70% { transform: translate(-8px, 4px); }
  40%, 60% { transform: translate(7px, -4px); }
}

/* Coluna com a raia de queda à direita */
.pista { padding: max(70px, calc(var(--ilha, 100vh) - 100svh + 70px)) var(--lado) 0; max-width: min(1320px, 100%); }
.pista > section { margin-bottom: clamp(70px, 12vh, 130px); }
@media (min-width: 1180px) {
  .pista { padding-right: clamp(190px, 22vw, 420px); max-width: none; }
}
h2 { font: 400 clamp(1.9rem, 4vw, 3.1rem)/1.06 var(--titulo); letter-spacing: -.005em; text-wrap: balance; }
.sub { margin-top: 10px; font-size: 1.1rem; max-width: 56ch; }

.atualizado { margin-top: 6px; font-size: .92rem; }

/* Filtros */
.filtros {
  margin-top: 24px; padding: 16px;
  background: var(--papel); border-radius: 12px;
  display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(120px, 1fr)); gap: 12px;
  box-shadow: 0 10px 0 rgba(15, 36, 56, .14);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.chip {
  min-height: 40px; padding: 7px 14px;
  border: 2px solid var(--linha); border-radius: 999px; background: #fff;
  font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 0; padding: 0; margin: 0; }
.campo > span, .campo > legend { font-size: .9rem; font-weight: 600; color: var(--tinta-suave); padding: 0; }
.campo strong { color: var(--tinta); }
input[type="search"], input[type="text"], input[type="number"], select {
  width: 100%; min-height: 44px; padding: 8px 10px;
  border: 2px solid var(--linha); border-radius: 6px; background: #fff;
}
input:hover, select:hover { border-color: var(--tinta-suave); }
input[type="range"] { width: 100%; accent-color: var(--vermelho-fundo); min-height: 32px; }
.contagem { margin: 22px 0 12px; font-weight: 800; }

/* Grade de carros */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 18px; }
.carro { background: var(--papel); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 0 rgba(15, 36, 56, .14); }
.carro-foto { aspect-ratio: 4 / 3; background: var(--linha); position: relative; overflow: hidden; }
.carro-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carro-foto.sem-foto img { display: none; }
.carro-foto.sem-foto::after { content: "Foto indisponível"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinta-suave); font-weight: 600; }
.carro-corpo { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.carro h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.versao { color: var(--tinta-suave); min-height: 1.5em; }
.preco { font: 400 1.5rem/1.1 var(--titulo); margin-top: 10px; }
.fichinha { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 10px 0 14px; font-size: .92rem; color: var(--tinta-suave); }
.carro-acoes { margin-top: auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.carro-acoes .btn { padding: 9px 8px; font-size: .95rem; min-height: 44px; }
.btn-mais { display: flex; margin: 26px auto 0; }
.btn-mais[hidden] { display: none; }
.vazio { background: var(--papel); border-radius: 12px; padding: 28px; text-align: center; }
.vazio .btn { margin-top: 12px; }

/* Painéis */
.painel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3.4vw, 48px);
  background: var(--papel); border-radius: 12px; padding: clamp(20px, 3.4vw, 40px);
  box-shadow: 0 10px 0 rgba(15, 36, 56, .14);
}
.painel-texto p { margin-top: 12px; max-width: 42ch; }
.sim-carro { font-weight: 600; }
.aviso { color: var(--tinta-suave); font-size: .95rem; }
.simulador { display: flex; flex-direction: column; gap: 14px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.resultado { display: block; padding: 14px 16px; background: var(--tinta); color: #fff; border-radius: 8px; }
.parcela { display: block; font: 400 clamp(1.7rem, 3vw, 2.3rem)/1.1 var(--titulo); }
.parcela-det { display: block; margin-top: 4px; }
.erro { color: #a3141b; font-weight: 600; }

/* Quem somos */
.numeros { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.numeros div { display: flex; flex-direction: column-reverse; }
.numeros dd { font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--titulo); }
.numeros dt { font-weight: 600; }

/* Pouso */
#visita { padding: 0 var(--lado); }
.visita-texto { max-width: 860px; }
.contato { margin: 22px 0 6px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; }
.contato dt { font-weight: 800; }
.contato a { overflow-wrap: anywhere; }
.vaga { height: clamp(250px, 42vh, 430px); }

.chao { background: var(--terra); color: #fff; margin-top: 0; }
.chao-borda { position: absolute; left: 0; right: 0; top: -23px; width: 100%; height: 24px; display: block; fill: var(--terra); }
.chao-dentro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 20px var(--lado) 24px; }
.chao nav { display: flex; gap: 18px; font-weight: 600; }

/* Sem WebGL: o letreiro vira texto e nada se perde */
.sem-3d #palco, .sem-3d #replay { display: none; }
.sem-3d .heroi { height: auto; padding-bottom: 60px; }
.sem-3d .letreiro-reserva { display: block; margin-top: 30px; font: 400 clamp(3rem, 13vw, 11rem)/.95 var(--titulo); text-transform: uppercase; }
.sem-3d .vaga { height: 40px; }

@media (max-width: 960px) {
  .topo nav { display: none; }
  .btn-topo { margin-left: auto; }
  .heroi-texto { grid-template-columns: 1fr; gap: 12px; }
  .painel { grid-template-columns: 1fr; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .campo-busca { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  :root { --topo-a: 60px; }
  .marca img { height: 40px; }
  .heroi-rodape { gap: 8px; }
  .heroi-rodape .dica { font-size: .8rem; padding: 7px 9px; }
  .btn-mini { font-size: .8rem; padding: 8px 10px; }
  .dica, .btn-mini { white-space: nowrap; }
  .heroi-acoes { margin-top: 12px; }
  .heroi-acoes .btn { flex: 1 1 40%; min-height: 44px; padding: 8px 10px; font-size: .95rem; }
  .grade { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tremor .heroi-texto { animation: none; }
  .vaga { height: 40px; }
  * { transition: none !important; }
}