html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: #08090A; color: #E9EBED; font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #C9CED3; text-decoration: none; }
a:hover { color: #FFFFFF; }
::selection { background: #C9CED3; color: #08090A; }
input::placeholder { color: #6B7075; }
select { appearance: none; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #08090A; }
::-webkit-scrollbar-thumb { background: #26292C; }
/* ============================================================
RESPONSIVO — base
============================================================ */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }
/* Moldura de foto: trava a imagem exatamente na caixa do container. */
.plo-frame { position: relative; overflow: hidden; }
/* Selects: seta propria (appearance:none tirava a nativa) e trava de largura */
.plo-field { min-width: 0; }
.plo-select { max-width: 100%; }
.plo-chips { scrollbar-width: none; }
.plo-insta { flex-wrap: wrap; max-width: 100%; }
.plo-chips::-webkit-scrollbar { display: none; }
/* Alvos de toque nunca abaixo de ~44px */
@media (pointer: coarse) {
.plo-chip, .plo-clear, .plo-card-actions > *, .plo-back, .plo-detail-cta { min-height: 44px; }
}
/* Em tela de toque nao existe hover: mata o card "levantado" que gruda no tap */
@media (hover: none) {
div.plo-card:hover { transform: none !important; }
}
/* ============================================================
RESPONSIVO — tablet
============================================================ */
@media (max-width: 900px) {
html { scroll-padding-top: 84px; }
.plo-header-wa { padding: 10px 14px !important; font-size: 13px !important; letter-spacing: 0.08em !important; }
.plo-nav { font-size: 15px !important; letter-spacing: 0.09em !important; }
}
/* ============================================================
RESPONSIVO — celular
============================================================ */
@media (max-width: 700px) {
html { scroll-padding-top: 68px; }
/* --- topo: uma faixa so. O botao flutuante ja cobre o WhatsApp --- */
.plo-header { padding: 9px 16px !important; gap: 8px 14px !important; }
.plo-header-wa { display: none !important; }
.plo-brand img { height: 34px !important; }
.plo-nav { flex: 1 1 auto !important; justify-content: flex-end !important;
gap: 6px 18px !important; font-size: 13.5px !important; letter-spacing: 0.07em !important; }
/* --- hero --- */
.plo-hero { min-height: 78vh !important; min-height: 78svh !important; }
.plo-hero-img { object-position: 70% 50% !important; }
.plo-hero-inner { padding: 100px 20px 58px !important; }
.plo-hero h1 { font-size: clamp(36px, 11vw, 52px) !important; }
.plo-hero-cta { gap: 10px !important; margin-top: 30px !important; }
.plo-hero-cta > a { flex: 1 1 100% !important; text-align: center !important; padding: 16px 18px !important; }
/* --- faixa de garantias: 2 x 2 em vez de 4 linhas --- */
.plo-strip { display: grid !important; grid-template-columns: 1fr 1fr !important;
gap: 12px 18px !important; padding: 18px 20px !important;
font-size: 11px !important; letter-spacing: 0.11em !important; line-height: 1.4 !important; }
/* --- busca e filtros --- */
/* border-box so no celular: evita padding + largura estourarem a tela
sem mexer nas larguras calculadas do desktop */
.plo-field, .plo-select, .plo-search, .plo-search-input,
.plo-chips, .plo-chip, .plo-clear, .plo-card-actions > * { box-sizing: border-box !important; }
.plo-search { padding: 12px 14px !important; }
/* o input tem largura intrinseca e nao encolhia: libera o flex a espremer */
.plo-search-input { font-size: 16px !important; min-width: 0 !important; width: 100% !important; }
.plo-search > span { flex: 0 0 auto !important; }
.plo-chips { flex-wrap: nowrap !important; overflow-x: auto !important; overscroll-behavior-x: contain;
margin-top: 26px !important; padding-bottom: 4px !important;
margin-inline: calc(-1 * clamp(20px, 4vw, 40px)) !important;
padding-inline: clamp(20px, 4vw, 40px) !important; }
.plo-chip { flex: 0 0 auto !important;
padding: 11px 16px !important; font-size: 14px !important; letter-spacing: 0.1em !important; }
.plo-filters { display: grid !important; grid-template-columns: 1fr 1fr !important;
gap: 10px !important; margin-top: 14px !important; padding-bottom: 26px !important; }
.plo-field { flex-direction: column !important; align-items: stretch !important;
gap: 5px !important; padding: 9px 12px !important; }
.plo-field > span { font-size: 10.5px !important; letter-spacing: 0.13em !important; }
/* seta propria: o CSS original usa appearance:none e some com a nativa */
.plo-select { font-size: 16px !important; width: 100% !important;
min-width: 0 !important; text-overflow: ellipsis;
padding-right: 20px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 1px center !important;
background-size: 11px 8px !important; }
.plo-clear { padding: 14px !important; }
.plo-count { margin-left: 0 !important; align-self: center !important; text-align: right !important; }
/* --- cards --- */
.plo-grid { margin-top: 26px !important; gap: 16px !important; }
.plo-card-body { padding: 20px !important; gap: 14px !important; }
.plo-card-model { font-size: 26px !important; }
.plo-card-price { font-size: 28px !important; }
.plo-card-meta { font-size: 13.5px !important; gap: 6px 14px !important; }
.plo-card-actions { gap: 8px !important; }
.plo-card-actions > * { padding: 14px 6px !important; font-size: 13.5px !important; letter-spacing: 0.07em !important; }
/* --- rotulo/valor: empilha em vez de brigar na mesma linha --- */
.plo-kv { flex-direction: column !important; align-items: flex-start !important;
gap: 3px !important; padding: 10px 0 !important; }
.plo-kv > span:first-child { font-size: 10.5px !important; letter-spacing: 0.13em !important; }
.plo-kv > span:last-child { text-align: left !important; font-size: 15px !important; }
/* ficha tecnica em 2 colunas: mesma leitura, metade da rolagem */
.plo-specs { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 18px !important; }
/* --- a loja / instagram --- */
.plo-sobre-text p { font-size: 16px !important; }
.plo-ig { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
/* --- contato --- */
.plo-phone { font-size: 30px !important; }
.plo-contact-card { min-height: 0 !important; gap: 26px !important; padding: 24px !important; }
/* --- rodape: espaco pro botao flutuante --- */
.plo-footer-inner { gap: 22px !important; padding-bottom: 104px !important; }
.plo-footer-logo { height: 44px !important; }
.plo-footer-nav { gap: 12px 20px !important; font-size: 14px !important; }
.plo-footer-inner p { font-size: 12px !important; }
/* --- botao flutuante --- */
.plo-fab { gap: 8px !important; padding: 12px 16px !important;
font-size: 13.5px !important; letter-spacing: 0.08em !important;
right: 14px !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
/* --- ficha do carro (tela cheia) --- */
.plo-detail-bar { padding: 8px 14px !important; gap: 8px !important; flex-wrap: nowrap !important; }
.plo-back { padding: 10px 12px !important; font-size: 12px !important;
letter-spacing: 0.05em !important; white-space: nowrap !important; }
.plo-back-full { display: none !important; }
.plo-back-short { display: inline !important; }
.plo-detail-logo { height: 26px !important; flex: 0 0 auto !important; }
.plo-detail-cta { padding: 10px 12px !important; font-size: 12px !important;
letter-spacing: 0.05em !important; white-space: nowrap !important; }
.plo-detail-body { padding: 22px 20px 116px !important; }
.plo-detail-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
.plo-detail-price { text-align: left !important; }
.plo-gallery { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.plo-detail-cols { margin-top: 44px !important; gap: 40px !important; }
.plo-detail-actions { gap: 10px !important; margin-top: 32px !important; }
.plo-detail-actions > a { flex: 1 1 100% !important; text-align: center !important; }
.plo-itens { grid-template-columns: 1fr !important; }
.plo-fin { padding: 18px !important; }
}
/* ============================================================
RESPONSIVO — celular estreito (<= 380px)
============================================================ */
@media (max-width: 340px) {
/* 320px: em duas colunas o texto do select seria cortado */
.plo-filters { grid-template-columns: 1fr !important; }
}
@media (max-width: 380px) {
.plo-brand img { height: 30px !important; }
.plo-nav { gap: 4px 13px !important; font-size: 12.5px !important; letter-spacing: 0.04em !important; }
.plo-strip { grid-template-columns: 1fr 1fr !important; font-size: 10px !important; letter-spacing: 0.08em !important; }
.plo-card-actions > * { font-size: 12.5px !important; letter-spacing: 0.04em !important; }
.plo-specs { grid-template-columns: 1fr !important; }
.plo-back, .plo-detail-cta { padding: 10px 9px !important; font-size: 11px !important; }
.plo-insta { font-size: 15px !important; letter-spacing: 0.1em !important; }
.plo-search { gap: 8px !important; padding: 11px 12px !important; }
.plo-detail-logo { height: 22px !important; }
}
/* Tela baixa e deitada: hero nao pode ocupar a tela toda */
@media (max-height: 560px) and (orientation: landscape) {
.plo-hero { min-height: 0 !important; }
.plo-hero-inner { padding: 96px 20px 56px !important; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* ============================================================
HOVER — no design original isso vinha do atributo style-hover
do runtime do Claude Design. Aqui viram classes CSS de verdade.
============================================================ */
.h-outline:hover { border-color:#E9EBED !important; color:#fff !important; }
.h-green:hover { background:#25A85D !important; color:#fff !important; }
.h-white:hover { background:#fff !important; color:#000 !important; }
.h-link:hover { color:#fff !important; border-color:#fff !important; }
.h-phone:hover { color:#25A85D !important; }
.h-border-green:hover { border-color:#2A9459 !important; }
.plo-card:hover { transform:translateY(-5px); border-color:#3A3E42; }
/* ============================================================
Fotos — substituem o do protótipo, que só
funcionava dentro do editor do Claude Design.
============================================================ */
.plo-frame > img {
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; display:block;
}
.plo-frame > .plo-sem-foto {
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-family:'Saira Condensed',sans-serif; font-size:14px; font-weight:600;
letter-spacing:0.18em; text-transform:uppercase; color:#4A4F54;
}
/* Galeria da ficha: a foto grande troca ao clicar na miniatura */
.plo-thumb { cursor:pointer; border:1px solid #1E2124; transition:border-color .2s ease; }
.plo-thumb.ativo, .plo-thumb:hover { border-color:#E9EBED; }
/* ============================================================
Selo de status (reservado / vendido) — não existia no protótipo
============================================================ */
.plo-selo {
position:absolute; top:14px; right:14px; z-index:2;
padding:7px 12px; border:1px solid;
font-family:'Saira Condensed',sans-serif; font-size:13px; font-weight:700;
letter-spacing:0.16em; text-transform:uppercase; pointer-events:none;
}
.plo-selo-reservado { background:rgba(120,86,10,0.92); border-color:#B8860B; color:#FFE9B0; }
.plo-selo-vendido { background:rgba(90,16,20,0.92); border-color:#8B2B31; color:#FFD5D8; }
.plo-card-vendido .plo-frame > img { filter:grayscale(1) brightness(0.65); }
/* Sem JS os filtros não funcionam, mas os carros continuam visíveis */
.plo-oculto { display:none !important; }
/* ============================================================
Acessibilidade: foco visível para quem navega por teclado
============================================================ */
:focus-visible { outline:2px solid #E9EBED; outline-offset:2px; }
/* ============================================================
Chips de categoria — no protótipo o estilo do chip ativo era
trocado inline pelo React. Aqui é a classe .ativo.
============================================================ */
.plo-chip {
padding:12px 22px; background:transparent;
border:1px solid #24272A; color:#8E949A; cursor:pointer;
font-family:'Saira Condensed',sans-serif; font-size:16px; font-weight:700;
letter-spacing:0.14em; text-transform:uppercase; transition:all .2s ease;
}
.plo-chip.ativo { background:#E9EBED; border-color:#E9EBED; color:#08090A; }
.plo-chip:not(.ativo):hover { border-color:#8E949A; color:#C9CED3; }
/* ============================================================
Barra do administrador — visível só para quem está logado.
Fica embaixo à esquerda para não brigar com o botão do WhatsApp.
============================================================ */
.plo-adminbar {
position: fixed; left: clamp(14px,3vw,26px); bottom: clamp(14px,3vw,26px);
z-index: 71;
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
padding: 7px 8px 7px 14px;
background: rgba(14,16,18,0.95); backdrop-filter: blur(10px);
border: 1px solid #33373B; border-radius: 40px;
box-shadow: 0 14px 34px rgba(0,0,0,0.55);
font-family: 'Saira Condensed', sans-serif;
font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.plo-adminbar-quem {
margin-right: 6px; padding-right: 10px; border-right: 1px solid #2A2E32;
font-family: Manrope, sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 0.02em; text-transform: none; color: #6B7075;
}
.plo-adminbar a {
padding: 8px 13px; border: 1px solid #33373B; border-radius: 30px;
color: #C9CED3; white-space: nowrap;
}
.plo-adminbar a:hover { border-color: #E9EBED; color: #fff; }
.plo-adminbar a.destaque { background: #E9EBED; border-color: #E9EBED; color: #08090A; }
.plo-adminbar a.destaque:hover { background: #fff; color: #000; }
/* No celular a barra do WhatsApp e a do admin dividem a base da tela */
@media (max-width: 700px) {
.plo-adminbar { left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); justify-content: center; padding: 8px; }
.plo-adminbar-quem { display: none; }
.plo-adminbar a { font-size: 13px; padding: 9px 12px; }
}