/* ========================================================= PF Autos Multimarcas — estilo completo (não-crítico) Tema: alternância PRETO e BRANCO por seção (alto contraste). As variáveis temáticas (claro por padrão, escuro em .sec-dark) estão no inline. Aqui tudo referencia essas variáveis, então cada seção herda a cor certa automaticamente. Acento: monocromático (preto no claro / branco no escuro). ========================================================= */ /* ---------- Largura máxima global (sobrescreve variável do head) ---------- */ .wrap{max-width:1700px!important;padding-left:clamp(16px,3vw,60px)!important;padding-right:clamp(16px,3vw,60px)!important} /* ---------- Utilitários ---------- */ .txt-blue{color:inherit;text-decoration:underline;text-decoration-thickness:.1em; text-underline-offset:.14em;text-decoration-color:var(--accent)} .kicker{display:inline-block;font-family:var(--ff-head);font-weight:700;font-size:.78rem; letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .center{text-align:center} .center .section-sub{margin-left:auto;margin-right:auto} .center-btn{display:flex;justify-content:center;margin-top:42px} /* ---------- Menu mobile (sempre escuro, dentro do header) ---------- */ .nav-mobile{display:flex;flex-direction:column;background:#0b0c0e;border-top:1px solid #23262c} .nav-mobile[hidden]{display:none} .nav-mobile a{padding:16px 22px;font-weight:500;border-bottom:1px solid #23262c;color:#a7adb6} .nav-mobile a:active{background:#16181c;color:#fff} .hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.is-open span:nth-child(2){opacity:0} .hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(min-width:1000px){.nav-mobile{display:none!important}} /* ---------- Seções ---------- */ .section{background:var(--bg);color:var(--ink);padding:100px 0; content-visibility:auto;contain-intrinsic-size:1px 900px} .section-head{margin-bottom:56px} .section-head h2{font-size:clamp(2rem,4vw,3.6rem)} .section-sub{margin-top:16px;color:var(--mut);max-width:60ch;font-size:1.08rem} /* ---------- Revelações no scroll (ScrollReveal vanilla) ---------- Estado inicial via CSS (sem flash); JS ajusta duração/delay e dispara .is-in. Easing igual ao spec: cubic-bezier(0.25, 0.46, 0.45, 0.94). */ [data-reveal]{ opacity:0; transform:translate3d(0,40px,0); /* default: fadeInUp (vem de baixo) */ transition-property:opacity,transform; transition-duration:700ms; transition-timing-function:cubic-bezier(0.25,0.46,0.45,0.94); will-change:opacity,transform; } [data-reveal][data-reveal-dir="down"]{transform:translate3d(0,-40px,0)} [data-reveal][data-reveal-dir="left"]{transform:translate3d(-40px,0,0)} [data-reveal][data-reveal-dir="right"]{transform:translate3d(40px,0,0)} [data-reveal][data-reveal-dir="none"]{transform:none} [data-reveal].is-in{opacity:1;transform:translate3d(0,0,0)} @media(prefers-reduced-motion:reduce){ [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} } /* ---------- Painel de stats (sobreposto ao hero) ---------- */ .stats-panel{position:relative;z-index:5;margin-top:-72px} .stats-row{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line); border:1px solid var(--line-2);border-radius:16px;overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.55)} .stat{background:var(--surface);padding:34px 26px;text-align:center} .stat-num{display:block;font-family:var(--ff-head);font-weight:800;font-size:clamp(2.2rem,5vw,3rem); line-height:1;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums} .stat-lab{display:block;margin-top:10px;font-size:.86rem;color:var(--mut);font-weight:500} @media(min-width:760px){.stats-row{grid-template-columns:repeat(3,1fr)}} /* ---------- Grid de veículos ---------- */ .grid-veiculos{display:grid;grid-template-columns:1fr;gap:26px} @media(min-width:580px){.grid-veiculos{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.grid-veiculos{grid-template-columns:repeat(3,1fr)}} @media(min-width:1400px){.grid-veiculos{grid-template-columns:repeat(4,1fr)}} /* ---------- Card de veículo ---------- */ .card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px; overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 30px -20px rgba(0,0,0,.25); transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .card:hover{border-color:var(--accent);box-shadow:0 26px 50px -26px rgba(0,0,0,.45)} .card-foto{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden;cursor:pointer} .card-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .card:hover .card-foto img{transform:scale(1.05)} .card-tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--accent);color:var(--accent-ink); font-family:var(--ff-head);font-weight:700;font-size:.66rem;letter-spacing:.1em; text-transform:uppercase;padding:6px 11px;border-radius:6px} .card-corpo{padding:20px;display:flex;flex-direction:column;gap:15px;flex:1} .card-titulo{font-family:var(--ff-head);font-weight:800;font-size:1.25rem;line-height:1.18} .card-marca{color:var(--mut);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em} /* ---------- Spec strip ---------- */ .spec-strip{display:grid;grid-template-columns:repeat(4,1fr); background:var(--surface-2);border:1px solid var(--line);border-radius:10px;overflow:hidden} .spec{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:11px 6px} .spec+.spec{border-left:1px solid var(--line)} .spec svg{width:17px;height:17px;color:var(--accent);flex-shrink:0} .spec b{font-family:var(--ff-head);font-weight:700;font-size:.76rem;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums} .spec small{font-size:.58rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em} /* ---------- Preço + CTA ---------- */ .card-rodape{margin-top:auto;display:flex;flex-direction:column;gap:14px} .card-preco{font-family:var(--ff-head);font-weight:800;font-size:1.65rem;letter-spacing:-.02em; color:var(--ink);font-variant-numeric:tabular-nums} .card-preco small{display:block;font-family:var(--ff-body);font-weight:400;font-size:.7rem;color:var(--faint)} .btn-interesse{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%; background:var(--accent);color:var(--accent-ink);padding:13px;border-radius:9px;font-weight:700; font-size:.92rem;border:0;cursor:pointer;transition:.22s var(--ease)} .btn-interesse:hover{background:var(--accent-2)} .btn-detalhes{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%; background:transparent;color:var(--ink);padding:12px;border-radius:9px;font-weight:700;font-size:.92rem; border:1px solid var(--line-2);cursor:pointer;transition:.22s var(--ease)} .btn-detalhes:hover{border-color:var(--accent);background:var(--accent-soft)} /* ---------- Modal de detalhes do veículo ---------- */ .modal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:18px} .modal[hidden]{display:none} .modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px); opacity:0;transition:opacity .25s var(--ease)} .modal.aberto .modal-overlay{opacity:1} .modal-dialog{position:relative;z-index:1;width:100%;max-width:920px;max-height:92vh;overflow:auto; background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:18px; display:grid;grid-template-columns:1fr;opacity:0;transform:translateY(18px) scale(.98); transition:opacity .25s var(--ease),transform .25s var(--ease);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)} .modal.aberto .modal-dialog{opacity:1;transform:none} @media(min-width:780px){.modal-dialog{grid-template-columns:1.05fr .95fr}} .modal-close{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff; border:1px solid var(--line-2);cursor:pointer;transition:.2s var(--ease)} .modal-close:hover{background:var(--accent);color:var(--accent-ink)} .modal-galeria{background:var(--surface-2)} .modal-foto{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-2)} .modal-thumbs{display:flex;gap:8px;padding:12px;flex-wrap:wrap} .modal-thumb{width:66px;height:50px;border-radius:7px;overflow:hidden;padding:0;background:none; border:2px solid transparent;cursor:pointer;transition:border-color .2s} .modal-thumb.ativo,.modal-thumb:hover{border-color:var(--accent)} .modal-thumb img{width:100%;height:100%;object-fit:cover} .modal-corpo{padding:28px;display:flex;flex-direction:column;gap:14px} .modal-titulo{font-family:var(--ff-head);font-weight:800;font-size:1.55rem;line-height:1.15} .modal-preco{font-family:var(--ff-head);font-weight:800;font-size:1.9rem;letter-spacing:-.02em; color:var(--accent);font-variant-numeric:tabular-nums} .modal-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:4px 0; background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden} .modal-spec{background:var(--surface);padding:12px 14px} .modal-spec dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:3px} .modal-spec dd{font-family:var(--ff-head);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .modal-desc{color:var(--mut);line-height:1.65;font-size:.96rem} .modal-cta{margin-top:8px} @media(prefers-reduced-motion:reduce){ .modal-overlay,.modal-dialog{transition:none} } /* ---------- Filtros ---------- */ .filtros{margin-bottom:26px} .filtros-toggle{display:none;align-items:center;justify-content:space-between;gap:8px;width:100%; background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:10px;padding:15px 18px; font-family:var(--ff-head);font-weight:700;font-size:1rem;cursor:pointer} .filtros-toggle span{display:inline-flex;align-items:center;gap:10px} .filtros-toggle .chevron{transition:transform .3s var(--ease)} .filtros.is-open .filtros-toggle .chevron{transform:rotate(180deg)} .filtros-campos{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end; background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px} .campo{display:flex;flex-direction:column;gap:7px;flex:1;min-width:170px} .campo span{font-size:.72rem;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.08em} .campo select{appearance:none;background:var(--bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center; color:var(--ink);border:1px solid var(--line-2);border-radius:9px;padding:13px 38px 13px 14px; font-family:var(--ff-body);font-size:.95rem;cursor:pointer;transition:border-color .2s} .campo select:hover{border-color:var(--accent)} .campo select:focus{outline:none;border-color:var(--accent)} .btn-limpar{background:none;border:1px solid var(--line-2);color:var(--mut);border-radius:9px; padding:13px 20px;font-family:var(--ff-head);font-weight:700;font-size:.9rem;cursor:pointer;height:fit-content;transition:.2s} .btn-limpar:hover{border-color:var(--accent);color:var(--ink)} .resultado-contagem{color:var(--faint);font-size:.82rem;margin-bottom:24px;text-transform:uppercase;letter-spacing:.12em;font-weight:600} @media(max-width:999px){ .filtros-toggle{display:flex} .filtros-campos{display:none;flex-direction:column;align-items:stretch;margin-top:12px} .filtros.is-open .filtros-campos{display:flex} .campo{min-width:0} } /* ---------- Estado vazio / skeleton ---------- */ .estado-vazio{text-align:center;padding:64px 20px;color:var(--mut)} .estado-vazio svg{color:var(--line-2);margin:0 auto 16px} .estado-vazio h3{font-size:1.4rem;color:var(--ink);margin-bottom:8px} .skeleton{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;height:400px;position:relative} .skeleton::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(128,128,128,.12),transparent); background-size:200% 100%;animation:shimmer 1.5s infinite} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ---------- Quem somos ---------- */ .sobre-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center} .sobre-media{position:relative} .sobre-media img{width:100%;border-radius:16px;border:1px solid var(--line-2);aspect-ratio:4/3;object-fit:cover} .sobre-badge{position:absolute;right:-10px;bottom:-18px;background:var(--accent);color:var(--accent-ink); border-radius:14px;padding:16px 22px;text-align:center;box-shadow:0 18px 36px -16px rgba(0,0,0,.4);border:4px solid var(--bg)} .sobre-badge b{display:block;font-family:var(--ff-head);font-weight:800;font-size:1.8rem;line-height:1} .sobre-badge span{font-size:.74rem;opacity:.85} .sobre-grid h2{font-size:clamp(1.8rem,3.5vw,3.2rem);margin:6px 0 18px} .sobre-texto{color:var(--mut);font-size:1.08rem;line-height:1.7;max-width:52ch} .check-list{list-style:none;margin:22px 0 28px;display:flex;flex-direction:column;gap:13px} .check-list li{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-size:.98rem} .check-list svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;margin-top:2px} @media(min-width:980px){.sobre-grid{grid-template-columns:1fr 1.05fr}} /* ---------- Cards 4 (diferenciais) ---------- */ .cards-4{display:grid;grid-template-columns:1fr;gap:22px} .vcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px 26px; box-shadow:0 12px 30px -22px rgba(0,0,0,.25); transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .vcard:hover{border-color:var(--accent);box-shadow:0 22px 44px -26px rgba(0,0,0,.4)} .vcard-ic{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:14px; background:var(--accent-soft);border:1px solid var(--line-2);margin-bottom:20px} .vcard-ic svg{width:28px;height:28px;color:var(--accent)} .vcard h3{font-family:var(--ff-head);font-weight:800;font-size:1.25rem;margin-bottom:12px} .vcard p{color:var(--mut);font-size:.98rem;line-height:1.65} @media(min-width:560px){.cards-4{grid-template-columns:1fr 1fr}} @media(min-width:980px){.cards-4{grid-template-columns:repeat(4,1fr)}} /* ---------- Métricas ---------- */ .metrics{position:relative;padding:80px 0;overflow:hidden;background:var(--bg);color:var(--ink)} .metrics-bg{position:absolute;inset:0;z-index:-1; background:radial-gradient(70% 120% at 50% 0%,var(--accent-soft),transparent 60%),var(--bg)} .metrics-row{display:grid;grid-template-columns:1fr 1fr;gap:34px 20px;text-align:center} .metric .stat-num{font-size:clamp(2.2rem,5vw,3.2rem)} @media(min-width:760px){.metrics-row{grid-template-columns:repeat(4,1fr)}} /* ---------- Blog (em breve) ---------- */ .blog-soon{text-align:center;padding:56px 24px;border:1px dashed var(--line-2);border-radius:18px; background:var(--surface);color:var(--mut)} .blog-soon svg{width:46px;height:46px;color:var(--accent);margin:0 auto 18px} .blog-soon h3{font-size:1.4rem;color:var(--ink);margin-bottom:8px} /* ---------- Contato ---------- */ .contato-grid{display:grid;grid-template-columns:1fr;gap:46px} .contato-info h2{font-size:clamp(1.8rem,3.5vw,3.2rem);margin:6px 0 16px} .contato-lead{color:var(--mut);max-width:44ch;margin-bottom:30px;font-size:1.08rem} .contato-lista{list-style:none;display:flex;flex-direction:column;gap:22px} .contato-lista li{display:flex;gap:14px;align-items:flex-start} .contato-lista .ci{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center; border-radius:11px;background:var(--accent-soft);border:1px solid var(--line-2)} .contato-lista .ci svg{width:20px;height:20px;color:var(--accent)} .contato-lista strong{display:block;font-family:var(--ff-head);font-weight:700;margin-bottom:2px} .contato-lista span{color:var(--mut);font-size:.94rem} .contato-form{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:28px; display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 50px -30px rgba(0,0,0,.3)} .form-row{display:grid;grid-template-columns:1fr;gap:16px} .campo-form{display:flex;flex-direction:column;gap:7px} .campo-form label{font-size:.8rem;font-weight:600;color:var(--mut)} .campo-form input,.campo-form select,.campo-form textarea{background:var(--surface-2);border:1px solid var(--line-2); border-radius:10px;padding:13px 14px;color:var(--ink);font-family:var(--ff-body);font-size:.96rem;transition:border-color .2s} .campo-form input::placeholder,.campo-form textarea::placeholder{color:var(--faint)} .campo-form input:focus,.campo-form select:focus,.campo-form textarea:focus{outline:none;border-color:var(--accent)} .campo-form textarea{resize:vertical;min-height:110px} .campo-form select{appearance:none;background:var(--surface-2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px;cursor:pointer} .btn-block{width:100%;justify-content:center} .form-nota{font-size:.78rem;color:var(--faint);text-align:center} @media(min-width:560px){.form-row{grid-template-columns:1fr 1fr}} @media(min-width:980px){.contato-grid{grid-template-columns:1fr 1.1fr}} /* ---------- Footer ---------- */ .site-footer{background:var(--bg);color:var(--ink);border-top:1px solid var(--line);padding-top:60px} .footer-grid{display:grid;grid-template-columns:1fr;gap:36px;padding-bottom:42px} .footer-brand img{height:104px;width:auto;margin-bottom:16px} .footer-brand p{color:var(--mut);font-size:.92rem;max-width:32ch;line-height:1.6;margin-bottom:18px} .footer-social{display:flex;gap:12px} .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px; border:1px solid var(--line-2);border-radius:10px;color:var(--mut);transition:.22s var(--ease)} .footer-social a:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-2px)} .footer-col h3{font-family:var(--ff-head);font-weight:700;font-size:.8rem;margin-bottom:16px; text-transform:uppercase;letter-spacing:.14em;color:var(--faint)} .footer-col a,.footer-col span{display:block;color:var(--mut);font-size:.92rem;margin-bottom:11px;transition:color .2s} .footer-col a:hover{color:var(--ink)} .footer-bottom{border-top:1px solid var(--line);padding:20px 0} .footer-bottom .wrap{display:flex;flex-direction:column;gap:8px;color:var(--faint);font-size:.8rem} .footer-legal a:hover{color:var(--ink)} @media(min-width:560px){.footer-grid{grid-template-columns:1fr 1fr}} @media(min-width:980px){ .footer-grid{grid-template-columns:2fr 1fr 1.4fr 1.2fr} .footer-bottom .wrap{flex-direction:row;justify-content:space-between;align-items:center} } /* ---------- WhatsApp flutuante (verde da marca) ---------- */ .wpp-flutuante{position:fixed;right:20px;bottom:20px;z-index:1000;width:58px;height:58px; display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff; border-radius:50%;box-shadow:0 12px 30px -6px rgba(0,0,0,.5);transition:transform .2s var(--ease)} .wpp-flutuante:hover{transform:scale(1.08)} /* ---------- Acessibilidade ---------- */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} }