/* Casa dos Carros - complementos ao Tailwind */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

/* Hero: escurece a esquerda para o texto ler bem e esconder o texto já gravado na foto */
.hero-bg { object-position: 78% 40%; }
.hero-shade { background:
    linear-gradient(90deg, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .92) 40%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 40%); }
@media (max-width: 768px) { .hero-shade { background: rgba(0, 0, 0, .88); } }

.navlink { position: relative; padding: .25rem 0; transition: color .2s; }
.navlink::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 3px; background: #EAB308; transition: width .25s; }
.navlink:hover { color: #000000; }
.navlink:hover::after { width: 100%; }

/* Abas Comprar / Vender */
.ptab { display: flex; flex: 1; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.25rem; font-size: .9rem; font-weight: 800; color: #64748b; border-bottom: 3px solid transparent; transition: color .2s, background .2s; cursor: pointer; }
.ptab:hover { color: #000000; }
.ptab.is-active { background: #fff; color: #000000; border-bottom-color: #EAB308; }
@media (min-width: 640px) { .ptab { flex: none; min-width: 15rem; } }

/* Filtros de categoria */
.cat { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; padding: .55rem 1rem; font-size: .85rem; font-weight: 700; color: #475569; transition: all .2s; cursor: pointer; }
.cat span { border-radius: .25rem; background: #f1f5f9; padding: 0 .4rem; font-size: .75rem; }
.cat:hover { border-color: #000000; color: #000000; }
.cat.is-active { border-color: #EAB308; background: #EAB308; color: #000000; }
.cat.is-active span { background: rgba(255, 255, 255, .55); }

.chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: .25rem; background: #f1f5f9; padding: .3rem .6rem; }
.fav[aria-pressed="true"] { color: #ef4444; }
.fav[aria-pressed="true"] svg { fill: currentColor; }

.car.is-hidden { display: none; }

/* Cartão: barra amarela no topo e faixa "Ver ficha" sobre a foto */
.car-bar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: 4px; background: #EAB308; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.car:hover .car-bar { transform: scaleX(1); }
.peek { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem; background: rgba(0, 0, 0, .82); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: translateY(100%); transition: transform .3s ease; }
.btn-detail:hover .peek, .btn-detail:focus-visible .peek { transform: none; }
.fav:active { transform: scale(.88); }

/* Lenis: scroll nativo desligado e mapas continuam clicáveis */
html.lenis, html.lenis body { scroll-behavior: auto !important; }
.lenis.lenis-smooth iframe { pointer-events: auto; }

/* Linha de veículos (Seminovos / Premium) */
.linha { display: inline-flex; align-items: center; gap: .5rem; border-radius: .4rem; padding: .6rem 1.1rem; font-size: .85rem; font-weight: 800; color: #475569; transition: all .2s; cursor: pointer; }
.linha span { border-radius: .25rem; background: #f1f5f9; padding: 0 .4rem; font-size: .75rem; }
.linha:hover { color: #000; }
.linha.is-active { background: #000; color: #EAB308; }
.linha.is-active span { background: rgba(234, 179, 8, .2); color: #EAB308; }
.cat.is-empty { opacity: .4; }

/* Avaliações */
.rev-track { scrollbar-width: none; cursor: grab; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rev.is-hidden { display: none; }
.rev-nav { display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 9999px; color: #fff; transition: all .2s; cursor: pointer; }
.rev-nav:hover { border-color: #EAB308; background: #EAB308; color: #000; }
.rev-chip { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: .4rem; padding: .45rem .9rem; font-size: .85rem; font-weight: 700; color: #e5e5e5; transition: all .2s; cursor: pointer; }
.rev-chip span { border-radius: .25rem; background: rgba(255, 255, 255, .12); padding: 0 .4rem; font-size: .75rem; }
.rev-chip:hover { border-color: #EAB308; }
.rev-chip.is-active { border-color: #EAB308; background: #EAB308; color: #000; }
.rev-chip.is-active span { background: rgba(0, 0, 0, .15); }
.car.is-in { animation: rise .4s ease backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.map-frame { filter: grayscale(.85) contrast(1.05); transition: filter .3s; }
article:hover .map-frame { filter: grayscale(0); }

.foot-social { display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border: 1px solid #cbd5e1; border-radius: 9999px; background: #fff; color: #475569; transition: all .2s; }
.foot-social:hover { border-color: #EAB308; background: #EAB308; color: #000000; }

#header.is-scrolled { box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .3); }
dialog { margin: auto; }
dialog[open] { animation: rise .25s ease both; }
@media (prefers-reduced-motion: reduce) { .car.is-in, dialog[open] { animation: none; } html { scroll-behavior: auto; } }