/* ============================================================
   BMK LUBRIFICANTE — design system
   Grounded identity: black field + brand yellow + white,
   condensed uppercase display type, industrial poster feel.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--black);
  color:var(--white);
  line-height:1.6;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:2px}

/* ---------- Tokens ---------- */
:root{
  --black:#0A0A0B;
  --ink:#141416;
  --ink-2:#1B1B1E;
  --void:#000000;
  --yellow:#F5B60A;
  --yellow-h:#FFC400;
  --white:#FFFFFF;
  --paper:#F7F5F1;
  --paper-ink:#141416;
  --muted:rgba(255,255,255,.62);
  --muted-ink:#5B5E66;
  --line:rgba(255,255,255,.12);
  --line-ink:#DEDAD2;

  --font-display:"Barlow Condensed",system-ui,sans-serif;
  --font-body:"Barlow",system-ui,sans-serif;

  --container:1200px;
  --sp:clamp(4rem,8vw,7rem);
  --r:2px;
  --shadow-hard:6px 6px 0 #000;
  --shadow-hard-y:6px 6px 0 var(--yellow);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.2s;
}

/* ---------- Layout primitives ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.section{padding-block:var(--sp)}
.section--ink{background:var(--ink)}
.section--paper{background:var(--paper);color:var(--paper-ink)}
.section--void{background:var(--void)}

/* ---------- Typography ---------- */
.h-display{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.01em;
  font-size:clamp(2.6rem,8vw,5.5rem);
}
.h-display strong{color:var(--yellow);font-weight:800}
.h-2{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  font-size:clamp(1.9rem,4.5vw,3rem);
  letter-spacing:.01em;
}
.h-3{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,1.8rem);
  letter-spacing:.02em;
}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:56ch}
.section--paper .lead{color:var(--muted-ink)}
h1,h2,h3{font-weight:600}
p{max-width:65ch}

/* Eyebrow label — encodes section numbering as real sequence */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:.85rem;color:var(--yellow);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:2rem;height:2px;background:var(--yellow)}
.section--paper .eyebrow{color:#B58500}
.section--paper .eyebrow::before{background:#B58500}

.text-yellow{color:var(--yellow)}
.text-muted{color:var(--muted)}
.text-muted-ink{color:var(--muted-ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.05rem;line-height:1;
  padding:1rem 1.6rem;border-radius:var(--r);white-space:nowrap;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.btn--yellow{background:var(--yellow);color:#000;box-shadow:var(--shadow-hard)}
.btn--yellow:hover{background:var(--yellow-h);transform:translate(2px,2px);box-shadow:4px 4px 0 #000}
.btn--ghost{border:2px solid var(--line);color:var(--white)}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn--ghost-dark{border:2px solid #CBC4BA;color:var(--paper-ink)}
.btn--ghost-dark:hover{border-color:#111;color:#111}
.btn--sm{padding:.7rem 1.1rem;font-size:.95rem}
.btn svg{width:1.1rem;height:1.1rem}

/* ---------- Topbar ---------- */
.topbar{background:var(--void);border-bottom:1px solid var(--line);font-size:.9rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.55rem}
.topbar a{color:var(--muted);transition:color var(--dur)}
.topbar a:hover{color:var(--yellow)}
.topbar .tb-right{display:flex;align-items:center;gap:1.4rem}
.topbar .tb-item{display:inline-flex;align-items:center;gap:.45rem}
@media(max-width:760px){.topbar .tb-right span.tb-hide{display:none}.topbar .tb-left{display:none}.topbar .container{justify-content:center}}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:.9rem}
.brand{display:flex;align-items:center;gap:.75rem;line-height:1}
.brand .mark{width:44px;height:44px;flex:none}
.brand .b-txt{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em}
.brand .b-txt span{color:var(--yellow)}
.brand .b-sub{display:block;font-family:var(--font-body);font-weight:500;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.nav-links{display:flex;align-items:center;gap:.4rem}
.nav-links a{position:relative;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:1.02rem;color:var(--white);padding:.5rem .7rem;transition:color var(--dur)}
.nav-links a::after{content:"";position:absolute;left:.7rem;right:100%;bottom:.28rem;height:2px;background:var(--yellow);transition:right var(--dur) var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--yellow)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:.7rem}
.nav-cta{display:flex;align-items:center;gap:.8rem}
@media(max-width:960px){
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(78vw,340px);background:var(--ink);flex-direction:column;align-items:flex-start;gap:.4rem;padding:6rem 2rem 2rem;transform:translateX(100%);transition:transform var(--dur) var(--ease);z-index:60;box-shadow:-12px 0 40px rgba(0,0,0,.6)}
  .nav-links.is-open{transform:translateX(0)}
  .nav-links a{font-size:1.4rem;width:100%}
  .nav-links a::after{left:0;right:100%}
  .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:auto;width:2.2rem}
  .nav-cta .btn{display:none}
}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r)}
.burger span{display:block;width:22px;height:2px;background:var(--white);position:relative;transition:.2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--white);transition:.2s}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0;transform:rotate(45deg)}
.burger.is-open span::after{top:0;transform:rotate(-45deg)}
@media(max-width:960px){.burger{display:inline-flex}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,7vw,6rem) var(--sp);background:var(--black)}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.9rem;color:var(--yellow);margin-bottom:1.4rem}
.hero-eyebrow .dot{width:8px;height:8px;background:var(--yellow);border-radius:50%}
.hero .h-display{margin-bottom:1.4rem}
.hero .lead{margin-bottom:2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.6rem}
.hero-stats{display:flex;gap:clamp(1.5rem,3vw,3rem);align-items:center;border-top:1px solid var(--line);padding-top:1.6rem;flex-wrap:wrap}
.hero-stats .stat .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,2.8rem);color:var(--white);line-height:1}
.hero-stats .stat .n b{color:var(--yellow);font-weight:800}
.hero-stats .stat .l{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:.2rem}
/* hero visual — oil-drop machine */
.hero-visual{position:relative;aspect-ratio:4/4.4;display:flex;align-items:center;justify-content:center}
.hero-halo{position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(circle at 40% 30%,rgba(245,182,10,.28),transparent 62%)}
.hero-plate{position:relative;z-index:1;width:min(72%,300px);aspect-ratio:3/3.6;background:var(--ink);border:2px solid var(--yellow);box-shadow:var(--shadow-hard-y);display:flex;align-items:center;justify-content:center;border-radius:2px;padding:1.4rem;overflow:hidden}
.hero-plate::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(245,182,10,.12),transparent 65%)}
.hero-plate .drop{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(0,0,0,.6));position:relative;z-index:1}
.hero-ring{position:absolute;z-index:2;width:66%;aspect-ratio:1;border:1px dashed rgba(245,182,10,.5);border-radius:50%;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-chip{position:absolute;z-index:3;background:var(--yellow);color:#000;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;padding:.55rem .9rem;box-shadow:var(--shadow-hard)}
.hero-chip.c1{top:6%;right:2%}
.hero-chip.c2{bottom:8%;left:0;background:var(--white)}
.hero-chip .tag{display:block;font-size:.62rem;letter-spacing:.2em;opacity:.7}
@media(max-width:860px){
  .hero .container{grid-template-columns:1fr}
  .hero-visual{order:2;aspect-ratio:4/3;max-width:420px;margin-inline:auto}
}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1rem;background:var(--ink)}
.marquee-track{display:flex;align-items:center;gap:4.5rem;width:max-content;animation:scroll 18s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{object-fit:contain;filter:brightness(1.18);opacity:.92;flex:none}
.marquee-track img[alt$="W-30"],.marquee-track img[alt$="W-40"]{height:78px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.marquee-track img[alt="Motul"],.marquee-track img[alt="Petrobras"],.marquee-track img[alt="Lubrax"]{height:38px}
.marquee-track span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:1.4rem;color:var(--muted);white-space:nowrap}
.marquee-track span em{color:var(--yellow);font-style:normal}
@keyframes scroll{to{transform:translateX(-33.333%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- Stripe divider (signature) ---------- */
.stripe{height:14px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 26px,#0A0A0B 26px 52px)}
.stripe--paper{background:repeating-linear-gradient(-45deg,var(--yellow) 0 26px,var(--paper) 26px 52px)}

/* ---------- Section header ---------- */
.sec-head{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head .h-2{max-width:16ch}
.sec-head .lead{margin-top:.8rem}
.sec-head .right{text-align:right}
@media(max-width:720px){.sec-head{grid-template-columns:1fr}.sec-head .right{text-align:left}}

/* ---------- Cards: feature ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}

.feature{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:1.9rem;display:flex;flex-direction:column;gap:.8rem;transition:transform var(--dur) var(--ease),border-color var(--dur)}
.feature:hover{transform:translateY(-4px);border-color:rgba(245,182,10,.55)}
.feature .ic{width:52px;height:52px;display:grid;place-items:center;background:rgba(245,182,10,.1);border:1px solid rgba(245,182,10,.35);color:var(--yellow);margin-bottom:.4rem}
.feature .ic svg{width:26px;height:26px}
.feature .h-3{margin-bottom:.1rem}
.feature p{color:var(--muted);font-size:.98rem}
.feature .num{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(245,182,10,.6)}

/* ---------- Product card ---------- */
.pcard{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform var(--dur) var(--ease),border-color var(--dur)}
.pcard:hover{transform:translateY(-5px);border-color:rgba(245,182,10,.5)}
.pcard .thumb{aspect-ratio:4/3;background:radial-gradient(circle at 30% 25%,var(--ink-2),#0d0d0f);display:grid;place-items:center;border-bottom:1px solid var(--line);color:var(--yellow)}
.pcard .thumb svg{width:46%;height:46%;opacity:.9}
.pcard .body{padding:1.4rem}
.pcard .cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--yellow);margin-bottom:.4rem}
.pcard .h-3{margin-bottom:.4rem}
.pcard p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}

/* ---------- Service step ---------- */
.step{position:relative;background:var(--ink);border:1px solid var(--line);padding:1.8rem;border-radius:var(--r)}
.step .n{font-family:var(--font-display);font-weight:800;font-size:3.4rem;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--yellow);margin-bottom:1rem}
.step .h-3{margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.95rem}

/* ---------- CTA band ---------- */
.cta{background:var(--yellow);color:#000;padding-block:var(--sp);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 20px,transparent 20px 40px)}
.cta .container{position:relative;display:grid;grid-template-columns:1.1fr auto;gap:2rem;align-items:center}
.cta .h-2{color:#000;max-width:18ch}
.cta p{color:rgba(0,0,0,.72);margin-top:.6rem;max-width:52ch}
.cta .btns{display:flex;gap:1rem;flex-wrap:wrap}
.cta .btn--dark{background:#000;color:#fff;box-shadow:6px 6px 0 rgba(255,255,255,.4)}
.cta .btn--dark:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 rgba(255,255,255,.4)}
.cta .btn--line{border:2px solid #000;color:#000}
.cta .btn--line:hover{background:#000;color:#fff}
@media(max-width:760px){.cta .container{grid-template-columns:1fr;text-align:left}}

/* ---------- Footer ---------- */
footer{background:var(--void);border-top:1px solid var(--line)}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem;padding-block:clamp(3rem,6vw,4.5rem)}
.footer-main .brand{margin-bottom:1rem}
.footer-main p{color:var(--muted);font-size:.95rem}
.footer-col h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1rem;margin-bottom:1rem;color:var(--white)}
.footer-col ul{display:flex;flex-direction:column;gap:.55rem}
.footer-col a{color:var(--muted);font-size:.95rem;transition:color var(--dur)}
.footer-col a:hover{color:var(--yellow)}
.footer-contact li{display:flex;gap:.6rem;color:var(--muted);font-size:.95rem;align-items:flex-start}
.footer-contact li svg{width:18px;height:18px;color:var(--yellow);flex:none;margin-top:.15rem}
.footer-bottom{border-top:1px solid var(--line);padding-block:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--yellow)}
@media(max-width:960px){.footer-main{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-main{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;margin-bottom:.4rem}
.field .req{color:#B58500}
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--line-ink);border-radius:var(--r);padding:.85rem .95rem;color:var(--paper-ink);font-size:1rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--yellow);border-color:transparent}
.field .hint{font-size:.82rem;color:var(--muted-ink);margin-top:.3rem}

/* ---------- Page hero ---------- */
.page-hero{background:var(--black);padding-block:clamp(3rem,6vw,4.5rem);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero .eyebrow{margin-bottom:.8rem}
.page-hero .h-display{font-size:clamp(2.4rem,6.5vw,4.2rem)}
.page-hero p{margin-top:1rem;color:var(--muted);max-width:60ch}

/* ---------- Contact / map ---------- */
.map{width:100%;height:100%;min-height:320px;filter:grayscale(.2) contrast(1.05)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3rem);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info-card{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:grid;gap:1.1rem}
.info-card li{display:flex;gap:.8rem;align-items:flex-start}
.info-card li svg{width:22px;height:22px;color:var(--yellow);flex:none;margin-top:.1rem}
.info-card li .t{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.info-card li .v{font-size:1.05rem;font-weight:500}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about-grid .photo{aspect-ratio:4/3;background:radial-gradient(circle at 30% 25%,var(--ink-2),#0d0d0f);display:grid;place-items:center;border:1px solid var(--line);color:var(--yellow);border-radius:2px}
.about-grid .photo svg{width:40%;height:40%;opacity:.85}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}}

/* ---------- Values ---------- */
.value{border-left:3px solid var(--yellow);padding:1rem 1.3rem;background:var(--ink);border-radius:0 var(--r) var(--r) 0;margin-bottom:1rem}
.value .h-3{margin-bottom:.3rem}
.value p{color:var(--muted);font-size:.95rem}

/* ---------- Reveal ----------
   When GSAP is available, JS adds body.gsap-anim which pre-hides .reveal and
   .hero-entrance elements so GSAP can animate them in (no FOUC). Without JS/animation
   the elements are never hidden, so content is always visible. */
.anim .reveal,.anim .hero-plate,.anim .hero-chip,.anim .hero-eyebrow,.anim .hero .lead,.anim .hero-actions .btn,.anim .hero-stats .stat{opacity:1}
body.gsap-anim .reveal,body.gsap-anim .hero-plate,body.gsap-anim .hero-chip,body.gsap-anim .hero-eyebrow,body.gsap-anim .hero .lead,body.gsap-anim .hero-actions .btn,body.gsap-anim .hero-stats .stat{opacity:0}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}
body.no-motion .reveal,body.no-motion .hero-ring,body.no-motion .marquee-track{transition:none!important;opacity:1!important;transform:none!important;animation:none!important}

/* ---------- Breadcrumb / utility ---------- */
.crumbs{display:flex;gap:.5rem;font-size:.85rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}
.crumbs a{color:var(--yellow)}
.crumbs a:hover{color:var(--yellow-h)}
.crumbs span{color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:720px){.two-col{grid-template-columns:1fr}}
.mb-{margin-bottom:2rem}
.mt-{margin-top:clamp(2.5rem,5vw,4rem)}
.v-center{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}

/* ---------- Whatsapp float ---------- */
.whatsapp{position:fixed;right:1.2rem;bottom:1.2rem;z-index:70;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform var(--dur) var(--ease)}
.whatsapp:hover{transform:scale(1.06)}
.whatsapp svg{width:32px;height:32px;color:#fff}

/* ---------- Stats / count-up ---------- */
.stat{min-width:0}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,2.8rem);color:var(--white);line-height:1;font-variant-numeric:tabular-nums}
.stat .n b{color:var(--yellow);font-weight:800}

/* Animated counter element */
.counter{font-variant-numeric:tabular-nums}

/* ---------- Product photo card ---------- */
.photo-card{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur) var(--ease)}
.photo-card:hover{transform:translateY(-5px);border-color:rgba(245,182,10,.55);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.photo-card .thumb{aspect-ratio:4/3.4;background:radial-gradient(circle at 50% 32%,#1c1c1f,#0c0c0e);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);padding:1rem;overflow:hidden}
.photo-card .thumb img{height:100%;width:auto;max-height:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));transition:transform .5s var(--ease)}
.photo-card:hover .thumb img{transform:scale(1.06)}
.photo-card .body{padding:1.4rem}
.photo-card .cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--yellow);margin-bottom:.4rem}
.photo-card .h-3{margin-bottom:.4rem}
.photo-card p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}

/* ---------- Brand logo image ---------- */
.brand-logo{background:#f4f2ec;border:1px solid rgba(0,0,0,.16);border-radius:var(--r);padding:1rem 1.4rem;display:flex;align-items:center;justify-content:center;min-height:84px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.brand-logo img{max-height:46px;width:auto;object-fit:contain}
.brand-logo:hover{border-color:var(--yellow);transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.45)}
.brand-logo{transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur)}

/* ---------- Owner / story photo ---------- */
.owner-photo{position:relative;border-radius:3px;overflow:hidden;box-shadow:6px 6px 0 rgba(0,0,0,.9)}
.owner-photo img{width:100%;height:auto;display:block}
.owner-photo .tag{position:absolute;left:0;bottom:0;background:var(--yellow);color:#000;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;padding:.5rem .9rem}

/* Stats row on dark bg */
.stats-row{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,3vw,3rem);align-items:center;border-top:1px solid var(--line);padding-top:1.6rem}

/* Utility spacing helpers */
.u-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

/* ============================================================
   PREMIUM UPGRADE v2 — refinement layer
   ============================================================ */
:root{
  --gold-grad:linear-gradient(135deg,#FFD34D 0%,#F5B60A 45%,#D99A00 100%);
  --glow:0 0 40px rgba(245,182,10,.18);
}
html{scroll-padding-top:90px}
body::selection{background:var(--yellow);color:#000}

/* Grain texture sutil no fundo */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* Hero mais cinematográfico */
.hero{background:
  radial-gradient(ellipse 60% 50% at 75% 20%,rgba(245,182,10,.07),transparent),
  radial-gradient(ellipse 40% 40% at 15% 80%,rgba(245,182,10,.04),transparent),
  var(--black)}
.hero .h-display{letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.h-display strong{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Header: vidro mais fino + blur */
.site-header{background:rgba(10,10,11,.72);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.08);transition:background .3s var(--ease)}
.site-header.scrolled{background:rgba(10,10,11,.92)}

/* Botão amarelo com brilho premium */
.btn--yellow{position:relative;overflow:hidden;box-shadow:var(--shadow-hard),var(--glow)}
.btn--yellow::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transition:left .6s var(--ease)}
.btn--yellow:hover::after{left:140%}

/* Cards com borda de luz no hover */
.feature,.photo-card,.step{position:relative;backdrop-filter:blur(4px)}
.feature:hover,.photo-card:hover,.step:hover{box-shadow:0 24px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(245,182,10,.25)}

/* Product thumb: spotlight */
.photo-card .thumb{background:radial-gradient(circle at 50% 30%,#222226,#0a0a0c 70%)}

/* Marquee com fade nas bordas */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* Stripe com leve sombra */
.stripe{box-shadow:0 -6px 20px rgba(245,182,10,.06),0 6px 20px rgba(245,182,10,.06)}

/* CTA amarelo com gradiente rico */
.cta{background:linear-gradient(160deg,#FFC93C 0%,#F5B60A 50%,#E0A400 100%)}
.cta .btn--dark{box-shadow:6px 6px 0 rgba(0,0,0,.35)}

/* Footer refinado */
footer{background:#070708}

/* WhatsApp float com pulso */
.whatsapp{animation:wpp-pulse 2.6s ease-in-out infinite;border-radius:50%}
@keyframes wpp-pulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 0 rgba(37,211,102,.45)}50%{box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 14px rgba(37,211,102,0)}}

/* Scrollbar customizada */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0d0d0f}
::-webkit-scrollbar-thumb{background:#2a2a2e;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--yellow)}

/* Imagens WebP lazy */
img[loading="lazy"]{opacity:0;transition:opacity .5s ease}
img[loading="lazy"].loaded{opacity:1}

/* ============================================================
   PREMIUM v3 — impacto visível, mesma paleta preto+amarelo
   ============================================================ */

/* HERO full-bleed com foto de fundo escura + overlay */
.hero{position:relative;isolation:isolate;padding-block:clamp(4rem,8vw,7rem) var(--sp)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("../assets/img/motor-oleo.webp") center/cover no-repeat;
  opacity:.16;filter:saturate(1.1)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,11,.55),rgba(10,10,11,.92) 70%,var(--black))}

/* Título gigante com sublinhado desenhado */
.hero .h-display{font-size:clamp(3rem,9vw,6.5rem)}
.h-display strong{position:relative;display:inline-block}
.h-display strong::after{content:"";position:absolute;left:2%;bottom:.04em;width:96%;height:.12em;
  background:var(--gold-grad);z-index:-1;border-radius:2px;transform:skewX(-8deg)}

/* Produto do hero flutuando */
.anim .hero-plate{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.anim .hero-plate{animation:none}}

/* Chips do hero com borda neon */
.hero-chip{box-shadow:var(--shadow-hard),0 0 24px rgba(245,182,10,.35)}

/* Números do hero em dourado gradiente */
.hero-stats .stat .n b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Cards: número gigante dourado atrás no hover */
.feature,.photo-card,.step{overflow:hidden}
.feature .num,.step .n{-webkit-text-stroke:1.5px rgba(245,182,10,.85);transition:-webkit-text-stroke .3s}
.feature:hover .num,.step:hover .n{-webkit-text-stroke:1.5px var(--yellow);text-shadow:0 0 30px rgba(245,182,10,.35)}

/* Faixa de marcas maior e mais presente */
.marquee-track img[alt$="W-30"],.marquee-track img[alt$="W-40"]{height:92px}
.marquee-track img[alt="Motul"],.marquee-track img[alt="Petrobras"],.marquee-track img[alt="Lubrax"]{height:46px}

/* CTA com raio de luz animado no fundo */
.cta::after{content:"";position:absolute;top:-60%;left:-20%;width:140%;height:220%;
  background:conic-gradient(from 180deg at 50% 50%,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  animation:cta-sweep 9s linear infinite;pointer-events:none}
@keyframes cta-sweep{to{transform:rotate(360deg)}}

/* Footer logo maior */
.footer-main .brand .mark{width:56px;height:56px}

/* Botão principal maior (mais conversão) */
.btn:not(.btn--sm){padding:1.15rem 1.9rem;font-size:1.12rem}