.lubricants{background:var(--paper);color:var(--ink);padding:100px var(--gutter) 90px;--oil-muted:#47535f}
.oil-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:50px}.oil-intro h2{font-size:var(--head);line-height:1.06;letter-spacing:-.04em}.oil-intro>p{max-width:33ch;color:var(--oil-muted);line-height:1.65}
.oil-track{margin-top:35px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 100px)/5);gap:25px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#83919e var(--paper);padding:26px 2px 22px;margin-inline:-2px;outline-offset:4px}
.oil-product{min-width:0;scroll-snap-align:start}.oil-stage{height:310px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;position:relative;isolation:isolate;background:var(--paper)}.oil-stage::after{content:'';position:absolute;bottom:13px;left:50%;width:60%;height:10px;border-radius:50%;background:#24354640;filter:blur(6px);transform:translateX(-50%);z-index:-1}.oil-photo{height:260px;position:relative;overflow:hidden;mix-blend-mode:multiply;flex:none}.oil-photo img{position:absolute;display:block;max-width:none;height:auto}.oil-p10 .oil-photo{height:210px}
.oil-product figcaption{padding-top:18px;border-top:1px solid #c9d0d4}.oil-brand{font-size:13px;color:var(--oil-muted);font-weight:600}.oil-product h3{font-size:clamp(18px,1.5vw,23px);line-height:1.3;letter-spacing:-.025em;margin:8px 0 5px;overflow-wrap:break-word}.oil-product figcaption p{color:var(--oil-muted);font-size:15px}
.oil-navigation{display:flex;justify-content:flex-end;gap:12px;margin-top:12px}.oil-navigation button{min-height:44px;padding:8px 16px;border:1px solid #9ba8b4;background:transparent;color:var(--ink);font-size:14px}.oil-navigation button:hover:not(:disabled){background:#dde3e8}.oil-navigation button:disabled{opacity:.4}
.oil-bottom{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:35px;padding-top:28px;border-top:1px solid #c9d0d4}.oil-bottom p{color:var(--oil-muted);max-width:43ch;font-size:15px}.oil-bottom .button{flex-shrink:0;font-size:16px}.oil-service-link{display:block;color:var(--blue-ink);font-size:15px;min-height:44px;padding-block:10px;margin-bottom:8px}.oil-service-link:hover{text-decoration:underline}
.oil-track:focus-visible,.lubricants button:focus-visible,.lubricants a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media(max-width:1100px){.oil-track{grid-auto-columns:calc((100% - 56px)/3.35);gap:22px}.oil-intro{gap:35px}.oil-intro>p{max-width:29ch;font-size:16px}.oil-photo{height:250px}.oil-bottom{gap:25px}.oil-bottom .button{max-width:48%;text-align:center}}
@media(max-width:760px){.lubricants{padding:65px var(--gutter) 60px}.oil-intro{display:block}.oil-intro h2{font-size:clamp(36px,8vw,50px)}.oil-intro>p{margin-top:22px;max-width:36ch}.oil-track{grid-auto-columns:calc((100% - 28px)/2.15);gap:14px;margin:28px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) 18px;scroll-padding-left:var(--gutter);scroll-snap-type:x mandatory}.oil-stage{height:205px}.oil-photo{height:clamp(145px,43vw,180px)}.oil-p10 .oil-photo{height:130px}.oil-product figcaption{padding-top:13px}.oil-product h3{font-size:17px;line-height:1.3;margin-top:6px;min-height:66.3px}.oil-product figcaption p{font-size:14px}.oil-brand{font-size:12px}.oil-bottom{display:block;margin-top:25px;padding-top:24px}.oil-bottom p{max-width:35ch}.oil-bottom .button{margin-top:24px;max-width:none;width:100%;justify-content:center;font-size:15px;padding-inline:16px}.oil-navigation{margin-top:10px}}

.oil-marker{height:44px;font-size:13px;font-weight:600;line-height:1.4;color:var(--oil-muted);max-width:22ch;display:flex;align-items:center}
.oil-product figcaption .oil-description{font-size:14px;line-height:1.5;margin-top:12px;max-width:25ch;min-height:3em;color:var(--oil-muted)}

/* Uma passagem pela prateleira: alturas e planos discretos, sem ampliar frascos. */
.oil-pin{background:var(--paper)}
@media(prefers-reduced-motion:no-preference){
  .oil-product{--oil-rise:0px;--oil-drift:0px;--oil-scale:1;--oil-speed:0px;transform:translate3d(calc(var(--oil-pan, -1) * var(--oil-speed)),calc(var(--oil-rise) + var(--oil-pan, -1) * var(--oil-drift)),0) scale(var(--oil-scale));transform-origin:50% 75%}
  .oil-product:nth-child(4n+1){--oil-rise:-12px;--oil-drift:8px;--oil-scale:.97;--oil-speed:10px}
  .oil-product:nth-child(4n+2){--oil-rise:22px;--oil-drift:-9px;--oil-scale:1;--oil-speed:-12px}
  .oil-product:nth-child(4n+3){--oil-rise:-5px;--oil-drift:12px;--oil-scale:.95;--oil-speed:16px}
  .oil-product:nth-child(4n){--oil-rise:12px;--oil-drift:-6px;--oil-scale:.98;--oil-speed:-8px}
  .oil-product:first-child,.oil-product:last-child{--oil-speed:0px}
  .oil-track{padding-top:44px;padding-bottom:40px;scroll-snap-type:x proximity}
  .oil-scroll-driven .oil-scroll-scene{height:calc(var(--oil-pin-height) + var(--oil-distance))}
  .oil-scroll-driven .oil-pin{position:sticky;top:24px;padding:12px 0 16px;transform:translateY(var(--oil-soft-y,0px))}
  .oil-scroll-driven .oil-track{scroll-snap-type:none;scrollbar-width:none}
  .oil-scroll-driven .oil-track::-webkit-scrollbar{display:none}
  .oil-scroll-driven .oil-navigation{margin-top:2px}
}
@media(min-width:1101px) and (max-height:900px){.oil-scroll-driven .oil-intro h2{font-size:52px}.oil-scroll-driven .oil-intro>p{font-size:15px}.oil-scroll-driven .oil-track{margin-top:15px;padding-top:30px;padding-bottom:35px}.oil-scroll-driven .oil-stage{height:285px}.oil-scroll-driven .oil-product h3{font-size:19px}}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .oil-track{padding-top:18px;padding-bottom:28px}
  .oil-product{--oil-speed:0px!important;--oil-scale:1!important;--oil-drift:2px!important}
  .oil-product:nth-child(4n+1){--oil-rise:-4px}.oil-product:nth-child(4n+2){--oil-rise:7px}.oil-product:nth-child(4n+3){--oil-rise:-2px}.oil-product:nth-child(4n){--oil-rise:3px}
}
@media(min-width:1101px) and (max-height:900px){
  .oil-scroll-driven .oil-intro h2{font-size:44px}
  .oil-scroll-driven .oil-track{margin-top:12px;padding-top:20px;padding-bottom:25px}
  .oil-scroll-driven .oil-marker{height:36px}
  .oil-scroll-driven .oil-product figcaption .oil-description{margin-top:9px}
}
@media(max-width:760px){.oil-product figcaption .oil-description{font-size:14px;line-height:1.5;margin-top:10px;max-width:none;min-height:4.5em}}