/* ============================================================ Portal Automotivo — Site público (base 2026) Consome --cor-primaria / --cor-secundaria injetadas no . ============================================================ */ :root{ --bg: #f7f8fa; --surface: #ffffff; --text: #1a1d23; --muted: #6b7280; --border: #e6e8ec; --radius: 16px; --shadow: 0 6px 24px rgba(16,24,40,.08); --shadow-sm: 0 2px 8px rgba(16,24,40,.06); --primary: var(--cor-primaria, #e11138); --secondary: var(--cor-secundaria, #1f2937); --accent: var(--cor-destaque, #ffc107); } *{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--text); background:var(--bg); line-height:1.5; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .container{ width:min(1200px,92%); margin-inline:auto; } .section{ padding-block:48px; } .muted{ color:var(--muted); } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, filter .15s ease; } .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); } .btn-primary{ background:var(--primary); color:#fff; } .btn-outline{ background:transparent; border-color:var(--border); color:var(--text); } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); } .header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:88px; gap:16px; } .brand img{ max-height:67px; width:auto; } .brand-text{ font-weight:800; font-size:22px; color:var(--secondary); letter-spacing:-.02em; } .site-nav{ display:flex; gap:28px; font-weight:500; align-items:center; } .site-nav a{ color:var(--secondary); padding:6px 2px; border-bottom:2px solid transparent; } .site-nav a:hover{ border-color:var(--primary); } /* Hamburger */ .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:8px; } .nav-toggle span{ display:block; height:3px; border-radius:3px; background:var(--secondary); transition:.2s; } /* Overlay + drawer mobile (fora do header → camada raiz, acima de tudo) */ .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:998; } .nav-overlay[hidden]{ display:none; } .mobile-drawer{ position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(82vw,320px); background:#fff; z-index:999; transform:translateX(100%); transition:transform .25s ease; box-shadow:-8px 0 30px rgba(0,0,0,.18); padding:64px 22px 24px; overflow-y:auto; } .mobile-drawer.open{ transform:translateX(0); } .mobile-drawer nav{ display:flex; flex-direction:column; } .mobile-drawer a{ padding:15px 4px; font-size:17px; font-weight:600; color:var(--secondary); border-bottom:1px solid var(--border); } .mobile-drawer a:hover{ color:var(--primary); } .nav-close{ position:absolute; top:14px; right:16px; background:none; border:0; font-size:36px; line-height:1; color:var(--secondary); cursor:pointer; } @media (max-width:820px){ .desktop-nav{ display:none; } .nav-toggle{ display:flex; } } /* ---------- Hero ---------- */ .hero{ background:linear-gradient(135deg, color-mix(in srgb, var(--secondary) 92%, #000) 0%, var(--secondary) 55%, color-mix(in srgb, var(--primary) 70%, var(--secondary)) 100%); color:#fff; padding-block:84px; } .hero-inner{ text-align:center; } .hero-title{ font-size:clamp(32px,5vw,56px); font-weight:800; margin:0 0 10px; letter-spacing:-.03em; } .hero-sub{ font-size:clamp(16px,2.4vw,20px); opacity:.9; margin:0 0 32px; } .hero-search{ display:flex; gap:8px; background:#fff; padding:8px; border-radius:999px; box-shadow:var(--shadow); max-width:640px; margin:0 auto 20px; } .hero-search input{ flex:1; border:0; outline:0; padding:12px 18px; font-size:16px; border-radius:999px; color:var(--text); } .hero-search button{ border:0; background:var(--primary); color:#fff; font-weight:600; padding:0 28px; border-radius:999px; cursor:pointer; font-size:15px; } .hero-cta{ margin-top:6px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); } /* ---------- Footer ---------- */ .site-footer{ background:var(--secondary); color:#cbd2dc; margin-top:64px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-block:48px 24px; } .footer-logo{ max-width:210px; height:auto; } .footer-brand strong{ color:#fff; font-size:20px; } .footer-contacts p{ margin:.25rem 0; } .footer-social{ display:flex; gap:10px; align-items:center; } .footer-social a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); color:#cbd2dc; transition:background .15s ease, color .15s ease, transform .15s ease; } .footer-social a:hover{ background:var(--accent); color:var(--secondary); transform:translateY(-2px); } .footer-copy{ border-top:1px solid rgba(255,255,255,.1); text-align:center; padding:18px; color:#8b94a3; } .footer-copy small{ display:block; line-height:1.7; } .footer-dev a{ color:var(--accent); font-weight:600; } /* ---------- WhatsApp flutuante ---------- */ .whatsapp-float{ position:fixed; right:20px; bottom:20px; z-index:50; width:58px; height:58px; border-radius:50%; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.45); transition:transform .15s ease; } .whatsapp-float:hover{ transform:scale(1.06); } /* ---------- 404 ---------- */ .error-404{ text-align:center; } .error-404 h1{ font-size:96px; margin:0; color:var(--primary); } /* ---------- Responsivo ---------- */ @media (max-width:820px){ .footer-grid{ grid-template-columns:1fr; text-align:center; gap:24px; } .footer-social{ justify-content:center; } .footer-contacts p{ margin:.2rem 0; } } /* ============================================================ Componentes — botão destaque, cards, estoque, detalhe ============================================================ */ .btn-destaque{ background:var(--accent); color:var(--secondary); font-weight:700; } .btn-destaque:hover{ filter:brightness(1.04); } /* ---------- Hero search (autocomplete) ---------- */ .hero-search{ position:relative; } .hero-search-btn{ border:0; background:var(--primary); color:#fff; font-weight:600; padding:0 28px; display:flex; align-items:center; border-radius:999px; cursor:pointer; } .ss-suggest{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:14px; box-shadow:var(--shadow); list-style:none; margin:0; padding:6px; z-index:30; text-align:left; max-height:340px; overflow:auto; } .ss-suggest li a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--text); } .ss-suggest li a:hover{ background:#f2f4f7; } .ss-tag{ font-size:11px; text-transform:uppercase; font-weight:700; letter-spacing:.04em; color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,#fff); padding:2px 8px; border-radius:999px; } /* ---------- Seções ---------- */ .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; } .section-title{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--secondary); } .section-link{ color:var(--primary); font-weight:600; } .page-h1{ font-size:30px; font-weight:800; letter-spacing:-.02em; margin:0 0 4px; color:var(--secondary); } /* ---------- Grid + Card de veículo ---------- */ .vgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; } .vcard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; display:block; } .vcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .vcard-media{ position:relative; aspect-ratio:4/3; background:#eceef2; } .vcard-media img{ width:100%; height:100%; object-fit:cover; } .vcard-badge{ position:absolute; top:10px; left:10px; background:var(--secondary); color:#fff; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; } .vcard-badge.is-novo{ background:var(--accent); color:var(--secondary); } .vcard-body{ padding:16px; } .vcard-title{ font-size:16.5px; font-weight:700; margin:0 0 2px; color:var(--secondary); } .vcard-sub{ font-size:13px; color:var(--muted); margin:0 0 12px; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vcard-specs{ display:flex; gap:14px; font-size:13px; color:var(--muted); margin-bottom:12px; flex-wrap:wrap; } .vcard-specs span{ position:relative; } .vcard-specs span+span::before{ content:"·"; position:absolute; left:-9px; } .vcard-price{ border-top:1px solid var(--border); padding-top:12px; } .vcard-price strong{ font-size:21px; color:var(--secondary); font-weight:800; } .vcard-price small{ display:block; font-size:12px; color:var(--muted); margin-top:2px; } /* ---------- Estoque ---------- */ .estoque-head{ margin-bottom:24px; } .estoque-layout{ display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start; } .filters{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; position:sticky; top:100px; } .filter-group{ margin-bottom:14px; } .filter-group label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--secondary); } .filter-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .form-control{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; font-family:inherit; background:#fff; outline:none; } .form-control:focus{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent); } .filter-clear{ display:block; text-align:center; margin-top:12px; font-size:13px; color:var(--muted); } .estoque-toolbar{ display:flex; justify-content:flex-end; margin-bottom:18px; } .order-form{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); } .order-form .form-control{ width:auto; } .empty-state{ text-align:center; padding:60px 20px; color:var(--muted); } /* ---------- Detalhe ---------- */ .vshow{ padding-bottom:48px; } .breadcrumb{ font-size:13px; color:var(--muted); margin:16px 0 18px; } .breadcrumb a{ color:var(--primary); } /* Faixa de fotos (carrossel de 3) */ .gallery-strip{ position:relative; background:#0d1117; } .strip-viewport{ display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; } .strip-viewport::-webkit-scrollbar{ display:none; } .strip-item{ flex:0 0 calc((100% - 16px)/3); scroll-snap-align:start; border:0; padding:0; background:#0d1117; cursor:zoom-in; aspect-ratio:4/3; } .strip-item img{ width:100%; height:100%; object-fit:cover; display:block; } .gallery-strip .gnav{ position:absolute; top:calc(50% - 36px); transform:translateY(-50%); z-index:6; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#1a1d23; font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.3); } .gallery-strip .gnav.prev{ left:16px; } .gallery-strip .gnav.next{ right:16px; } .gallery-strip .gnav:hover{ background:#fff; } .gallery-strip .vcard-badge{ position:absolute; top:14px; left:14px; z-index:6; } .gallery-counter{ position:absolute; top:14px; right:14px; z-index:6; background:rgba(0,0,0,.6); color:#fff; font-size:12.5px; padding:5px 12px; border-radius:999px; } /* Cards sobrepostos sobre as fotos */ .vshow-cards{ position:relative; z-index:10; margin-top:-72px; display:grid; grid-template-columns:1.7fr 1fr; gap:24px; align-items:start; } .vshow-cards .card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 12px 40px rgba(16,24,40,.12); padding:26px; } .vshow-left{ display:flex; flex-direction:column; gap:20px; min-width:0; } .vshow-block{ box-shadow:var(--shadow-sm) !important; } .vshow-block .block-title{ margin-top:0; } .vshow-contact{ position:sticky; top:100px; } /* Lightbox tela cheia */ .lightbox{ position:fixed; inset:0; z-index:100; background:rgba(8,10,14,.95); display:flex; align-items:center; justify-content:center; } .lightbox[hidden]{ display:none; } .lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:6px; } .lb-close{ position:absolute; top:18px; right:24px; background:none; border:0; color:#fff; font-size:40px; line-height:1; cursor:pointer; } .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:0; width:56px; height:56px; border-radius:50%; font-size:34px; cursor:pointer; } .lb-nav.prev{ left:3vw; } .lb-nav.next{ right:3vw; } .lb-nav:hover{ background:rgba(255,255,255,.25); } .lb-counter{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:#fff; background:rgba(255,255,255,.12); padding:6px 16px; border-radius:999px; font-size:14px; } .vshow-title{ font-size:26px; font-weight:800; margin:0 0 2px; color:var(--secondary); } .vshow-title span{ color:var(--primary); } .vshow-sub{ color:var(--muted); text-transform:uppercase; font-size:13px; margin:0 0 20px; letter-spacing:.02em; } .spec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px 22px; } .spec-cell span{ display:block; color:var(--muted); font-size:12px; margin-bottom:2px; } .spec-cell strong{ color:var(--secondary); font-size:15px; } .vshow-price{ margin-bottom:16px; } .price-main{ font-size:34px; font-weight:800; color:var(--secondary); } .price-tag{ font-size:13px; color:var(--muted); margin-left:6px; } .price-troca{ margin-top:4px; color:var(--secondary); font-weight:600; } .price-troca small{ color:var(--muted); font-weight:400; } .btn-zap{ background:#25d366; color:#fff; width:100%; justify-content:center; margin-bottom:16px; } .contact-lead{ font-weight:600; color:var(--secondary); margin:0 0 12px; } .vshow-contact .form-control{ margin-bottom:10px; } .vshow-extra{ margin-top:40px; } .block-title{ font-size:19px; font-weight:700; color:var(--secondary); margin:28px 0 16px; } .vshow-desc{ font-size:15.5px; line-height:1.7; color:var(--text); max-width:820px; } .options-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; } .options-list li{ background:#f6f7f9; border-radius:8px; padding:9px 14px; font-size:14px; position:relative; padding-left:30px; } .options-list li::before{ content:"✓"; position:absolute; left:12px; color:var(--primary); font-weight:700; } /* ---------- Sobre ---------- */ .hero-sm{ padding-block:56px; } .sobre-conteudo{ font-size:17px; line-height:1.7; max-width:760px; margin-bottom:28px; } .card-soft{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); } /* duas colunas: foto (esquerda) + texto (direita) */ .sobre-split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch; } .sobre-foto img{ width:100%; height:100%; min-height:380px; object-fit:cover; border-radius:var(--radius); display:block; } .sobre-foto-vazia{ width:100%; height:100%; min-height:380px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); background:#eef0f4; border-radius:var(--radius); padding:24px; } .sobre-texto{ font-size:16.5px; line-height:1.8; padding:36px; display:flex; flex-direction:column; justify-content:center; } @media (max-width:820px){ .sobre-split{ grid-template-columns:1fr; gap:24px; } /* mobile: imagem em cima, texto embaixo */ .sobre-foto img,.sobre-foto-vazia{ min-height:240px; } .sobre-texto{ padding:26px; } } /* ---------- Footer (horário) ---------- */ .footer-hours strong{ color:#fff; display:block; margin-bottom:6px; } .footer-hours p{ margin:0; white-space:pre-line; } .fc-addr{ font-weight:500; color:#fff; } @media (max-width:980px){ .estoque-layout{ grid-template-columns:1fr; } .filters{ position:static; } .vshow-cards{ grid-template-columns:1fr; margin-top:-48px; } .vshow-contact{ position:static; } .strip-item{ flex-basis:calc((100% - 8px)/2); } } @media (max-width:600px){ .strip-item{ flex-basis:88%; } .vshow-cards{ margin-top:-32px; } .gallery-strip .gnav{ top:calc(50% - 24px); width:40px; height:40px; font-size:24px; } } /* ---------- Banner ---------- */ .home-banner{ position:relative; } .banner-fallback{ height:clamp(220px,34vw,380px); background:linear-gradient(135deg, var(--secondary), color-mix(in srgb,var(--primary) 55%,var(--secondary))); } .banner-carousel{ position:relative; } .banner-carousel::after{ content:""; display:block; padding-top:40.2%; } /* proporção da arte (1706x686) */ .banner-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; } .banner-slide.active{ opacity:1; } .banner-slide picture,.banner-slide img,.banner-slide a{ width:100%; height:100%; display:block; } .banner-slide img{ object-fit:cover; } .banner-caption{ position:absolute; left:0; right:0; bottom:8%; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.55); } .banner-caption h2{ font-size:clamp(24px,4vw,46px); font-weight:800; margin:0 0 6px; } .banner-caption p{ font-size:clamp(14px,2vw,20px); margin:0; } @media (max-width:760px){ .banner-carousel::after{ padding-top:40.2%; } } /* ---------- Caixa de busca flutuante ---------- */ .search-card{ position:relative; z-index:20; margin:-52px auto 0; max-width:880px; background:#fff; border-radius:20px; box-shadow:0 18px 50px rgba(16,24,40,.16); padding:22px 24px; } .search-card-row{ display:flex; gap:12px; } .search-input-wrap{ position:relative; flex:1; } .search-icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:.5; } #ss-input{ width:100%; border:1.5px solid var(--border); border-radius:999px; padding:14px 18px 14px 44px; font-size:16px; outline:none; font-family:inherit; } #ss-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent); } .search-go{ padding-inline:34px; } .search-all{ display:block; text-align:center; margin-top:14px; color:var(--primary); font-weight:600; font-size:14.5px; } .ss-empty{ padding:12px 14px; color:var(--muted); font-size:14px; } @media (max-width:600px){ .search-card{ margin-top:-28px; padding:16px; } .search-card-row{ flex-direction:column; } .search-go{ width:100%; } } /* ---------- Sobre galeria ---------- */ .sobre-galeria{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:28px; } .sobre-galeria img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); } /* ---------- Contato ---------- */ .contato-hero{ background:var(--secondary); color:#fff; padding:48px 0 40px; } .contato-hero h1{ font-size:clamp(26px,4vw,40px); font-weight:800; margin:0 0 8px; } .contato-hero p{ opacity:.85; margin:0; } .contato-mapa{ line-height:0; } .contato-mapa iframe{ display:block; width:100%; filter:grayscale(.1); } .contato-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:start; } .contato-canais .canal{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border); } .canal-ic{ font-size:22px; line-height:1.2; } .canal strong{ display:block; color:var(--secondary); } .canal p{ margin:2px 0 0; color:var(--muted); } .contato-canais .btn-zap{ margin-top:18px; display:inline-flex; } .contato-form{ padding:28px; } .contato-form .block-title{ margin-top:0; } .contato-form form{ display:flex; flex-direction:column; gap:14px; } .contato-form .form-control{ width:100%; padding:13px 15px; font-size:15px; border:1px solid var(--border); border-radius:10px; font-family:inherit; background:#fff; } .contato-form .form-control:focus{ border-color:var(--primary); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent); } .contato-form textarea.form-control{ resize:vertical; min-height:120px; } @media (max-width:820px){ .contato-grid{ grid-template-columns:1fr; } } /* ---------- Política de privacidade / páginas legais ---------- */ .legal .legal-content{ max-width:820px; font-size:15.5px; line-height:1.75; } .legal-content h2{ font-size:19px; color:var(--secondary); margin:28px 0 10px; } .legal-content ul{ padding-left:20px; } .legal-content li{ margin:6px 0; } .footer-priv{ color:#cbd2dc; } .footer-priv:hover{ color:var(--accent); } /* ---------- Banner de cookies ---------- */ .cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:60; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 12px 40px rgba(16,24,40,.22); padding:18px 22px; display:flex; align-items:center; gap:20px; max-width:920px; margin:0 auto; } .cookie-banner[hidden]{ display:none; } .cookie-text{ margin:0; font-size:14px; color:var(--text); flex:1; } .cookie-text a{ color:var(--primary); font-weight:600; } .cookie-actions{ display:flex; gap:10px; flex-shrink:0; } .btn-cookie{ padding:10px 18px; font-size:14px; } @media (max-width:680px){ .cookie-banner{ flex-direction:column; align-items:stretch; gap:12px; left:10px; right:10px; bottom:10px; } .cookie-actions{ justify-content:stretch; } .btn-cookie{ flex:1; justify-content:center; } }