/* Páginas internas: alto padrão, repasse, carro, venda, sobre, FAQ, 404. */

.cabecalho-pagina { padding: calc(140px + env(safe-area-inset-top, 0px)) 0 var(--e-6); }
.cabecalho-pagina .container { display: grid; gap: var(--e-3); }
.cabecalho-pagina p { max-width: 52ch; }

/* Barra de filtros */
.filtros { position: sticky; top: calc(var(--h-topo) + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--c-grafite); border-block: 1px solid var(--c-linha-escuro); }
.papel .filtros { background: var(--c-creme); border-color: var(--c-linha-papel); }
.filtros-barra { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-3) var(--e-4); padding-block: var(--e-3); }
.filtros .campo { min-width: 150px; flex: 1 1 150px; }
.filtros .campo select, .filtros .campo input { min-height: var(--alvo); }
.filtros-acoes { display: flex; gap: var(--e-2); align-items: center; margin-left: auto; }
.filtros-abrir { display: none; }
@media (max-width: 760px) {
  .filtros-abrir { display: inline-flex; }
  .filtros-campos[data-fechado="true"] { display: none; }
  .filtros-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); width: 100%; animation: entrar-menu .28s var(--entrar) both; }
  .filtros-acoes { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (min-width: 761px) { .filtros-campos { display: contents; } }
.resumo { font-size: var(--t-small); }

/* Vitrine: um carro por tela */
.vitrine { display: grid; }
.vitrine-item {
  position: relative; min-height: 100dvh; display: grid; align-items: end;
  overflow: hidden; border-bottom: 1px solid var(--c-linha-escuro);
}
.vitrine-item picture, .vitrine-item > img { position: absolute; inset: 0; }
.vitrine-item img { width: 100%; height: 100%; object-fit: cover; }
.vitrine-texto { position: relative; z-index: 1; padding-block: var(--e-8) var(--e-7); display: grid; gap: var(--e-3); justify-items: start; }
.vitrine-dados { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: baseline; }
.vitrine-preco { font-family: var(--font-display); font-size: var(--t-h2); }

/* Lista */
.lista-carros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--e-6) var(--e-4); padding-block: var(--e-6) var(--secao-luxo); }
.cartao { display: grid; gap: var(--e-3); text-decoration: none; }
.cartao-foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-grafite); }
.cartao-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--entrar); }
.cartao:hover .cartao-foto img { transform: scale(1.03); }
.cartao-topo { display: flex; justify-content: space-between; gap: var(--e-3); align-items: start; }
.cartao h2, .cartao h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; }

/* Folha de vistoria (repasse) */
.vistoria-secao { padding-block: var(--e-5) var(--e-8); }
.vistoria-rolagem { overflow-x: auto; }
.vistoria { width: 100%; border-collapse: collapse; }
.vistoria th, .vistoria td { padding: var(--e-3) var(--e-2); text-align: left; border-top: 1px solid var(--c-linha-papel); vertical-align: top; }
.vistoria th { font-size: var(--t-small); font-weight: 600; white-space: nowrap; }
.vistoria th button { background: none; border: 0; font-weight: 600; cursor: pointer; min-height: var(--alvo); display: inline-flex; align-items: center; gap: var(--e-1); }
.vistoria .n { text-align: right; font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vistoria .desconto { font-weight: 500; }
.vistoria tbody tr { transition: background-color .2s; }
.vistoria tbody tr:hover { background: rgba(26, 26, 24, .04); }
.vistoria a { font-weight: 600; text-decoration: none; }
.vistoria a:hover { text-decoration: underline; }
.vistoria-obs { display: block; margin-top: var(--e-1); font-size: var(--t-small); color: var(--c-tinta-suave); max-width: 46ch; }
.aviso-fipe { margin-top: var(--e-4); font-size: var(--t-small); color: var(--c-tinta-suave); }
@media (max-width: 760px) {
  .vistoria thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vistoria, .vistoria tbody, .vistoria tr, .vistoria td { display: block; width: 100%; }
  .vistoria tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2) var(--e-3); padding-block: var(--e-4); border-top: 1px solid var(--c-linha-papel); }
  .vistoria td { border: 0; padding: 0; text-align: left; }
  .vistoria td.n { text-align: left; }
  .vistoria td:first-child { grid-column: 1 / -1; }
  .vistoria td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-family: var(--font-body); font-size: .8125rem; color: var(--c-tinta-suave); }
}

/* Vazio do repasse */
.vazio-repasse { display: grid; gap: var(--e-4); justify-items: start; padding-block: var(--e-6); }
.vazio-repasse svg { width: min(100%, 560px); height: auto; color: var(--c-tinta-suave); }

/* Página do carro */
.carro-topo { padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
.galeria { display: grid; gap: var(--e-2); }
.galeria-principal { aspect-ratio: 3 / 2; background: var(--c-grafite); overflow: hidden; max-height: 60vh; width: 100%; }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-miniaturas { display: flex; gap: var(--e-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--e-2); }
.galeria-miniaturas button { flex: 0 0 auto; width: 120px; aspect-ratio: 3 / 2; padding: 0; border: 2px solid transparent; background: var(--c-grafite); cursor: pointer; scroll-snap-align: start; }
.galeria-miniaturas button[aria-current="true"] { border-color: var(--c-creme); }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.carro-corpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e-7); padding-block: var(--e-6) var(--secao-luxo); align-items: start; }
.carro-resumo { position: sticky; top: 110px; display: grid; gap: var(--e-4); }
.carro-preco { font-family: var(--font-display); font-size: var(--t-display-l); line-height: 1; }
.carro-selos { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.ficha { width: 100%; border-collapse: collapse; }
.ficha th, .ficha td { padding: var(--e-3) 0; border-top: 1px solid var(--c-linha-escuro); text-align: left; }
.ficha th { font-weight: 500; color: var(--c-concreto); width: 45%; }
.ficha td { font-family: var(--font-data); }
.bloco-aviso { border: 1px solid var(--c-linha-escuro); padding: var(--e-4); display: grid; gap: var(--e-2); }
.simulador { display: grid; gap: var(--e-4); border-top: 1px solid var(--c-linha-escuro); padding-top: var(--e-5); }
.simulador-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-4); }
.simulador-resultado { font-family: var(--font-display); font-size: var(--t-h2); }
.barra-carro { display: none; }
@media (max-width: 900px) {
  .carro-corpo { grid-template-columns: 1fr; }
  .carro-resumo { position: static; }
  .barra-carro {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 35; gap: var(--e-3); align-items: center; justify-content: space-between;
    padding: var(--e-2) var(--margem) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
    background: var(--c-grafite); border-top: 1px solid var(--c-linha-escuro);
  }
  .com-barra .wa-flutuante { display: none; }
  .com-barra .rodape { padding-bottom: 120px; }
}

/* Venda seu carro */
.venda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-7); padding-block: calc(140px + env(safe-area-inset-top, 0px)) var(--secao-luxo); align-items: start; }
.venda-foto { aspect-ratio: 3 / 2; overflow: hidden; position: sticky; top: 110px; }
.venda-foto img { width: 100%; height: 100%; object-fit: cover; }
.form { display: grid; gap: var(--e-4); }
.form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.opcoes { display: flex; gap: var(--e-4); }
.opcoes label { display: inline-flex; gap: var(--e-2); align-items: center; min-height: var(--alvo); cursor: pointer; }
.opcoes input { width: 20px; height: 20px; accent-color: var(--c-pinca); }
@media (max-width: 900px) {
  .venda { grid-template-columns: 1fr; padding-top: calc(110px + env(safe-area-inset-top, 0px)); }
  .venda-foto { position: static; order: -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) { .form-linha { grid-template-columns: 1fr; } }

/* Sobre */
.sobre-foto { aspect-ratio: 16 / 9; max-height: 80vh; width: 100%; overflow: hidden; }
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre-texto { display: grid; gap: var(--e-4); padding-block: var(--secao-luxo); max-width: 60ch; }
.compromissos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--e-5); padding-bottom: var(--secao-luxo); }
.compromissos li { list-style: none; border-top: 1px solid var(--c-linha-escuro); padding-top: var(--e-4); display: grid; gap: var(--e-2); }

/* FAQ */
.faq { display: grid; gap: var(--e-7); padding-bottom: var(--secao-luxo); max-width: 860px; }
.faq-grupo { display: grid; gap: var(--e-3); scroll-margin-top: 110px; }
.faq details { border-top: 1px solid var(--c-linha-escuro); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); min-height: 64px; font-weight: 600; font-size: var(--t-body-l); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; transition: transform .35s var(--entrar); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .resposta { padding-bottom: var(--e-4); max-width: 62ch; color: var(--c-concreto); }

/* 404 */
.nao-encontrada { min-height: 100dvh; display: grid; align-items: end; }
.nao-encontrada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.nao-encontrada .container { position: relative; z-index: 1; padding-block: var(--e-8); display: grid; gap: var(--e-4); justify-items: start; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
