/* ===== v7: blog, artigos e páginas de exemplo ===== */
.blog-feat{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(11,36,40,.07);transition:transform .25s,box-shadow .25s}
.blog-feat:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(11,36,40,.12)}
.blog-feat .im{min-height:320px;overflow:hidden;background:var(--light)}.blog-feat .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.blog-feat:hover .im img{transform:scale(1.04)}
.blog-feat .tx{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.blog-feat h2{font-size:clamp(24px,2.6vw,34px)}
.cat{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#d9f2ee;color:#0b3a37;border-radius:4px;padding:5px 10px}
.mt{font-size:13px;color:var(--mut)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 8px 28px rgba(11,36,40,.06);transition:transform .25s,box-shadow .25s}
.bcard:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(11,36,40,.12)}
.bcard .im{aspect-ratio:16/10;overflow:hidden;background:var(--light)}.bcard .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.bcard:hover .im img{transform:scale(1.05)}
.bcard .tx{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard h3{font-size:18px;line-height:1.3}.bcard p{font-size:14.5px;color:var(--mut);line-height:1.55;flex:1}
.bcard .go{font-weight:700;font-size:14px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:5px}

.article{max-width:760px;margin:0 auto}
.article .cover{border-radius:var(--r);overflow:hidden;margin:0 0 32px;aspect-ratio:16/8;background:var(--light)}.article .cover img{width:100%;height:100%;object-fit:cover}
.article h2{font-size:clamp(22px,2.4vw,28px);margin:34px 0 10px}
.article p{font-size:17px;line-height:1.75;color:#33474b;margin:0 0 6px}
.tipbox{margin:28px 0;padding:18px 22px;background:#e9f7f5;border-left:4px solid var(--teal);border-radius:0 var(--rs) var(--rs) 0;color:#1c4b46;font-size:16px;line-height:1.6}
.tipbox b{display:block;color:var(--ink);margin-bottom:4px}
.art-cta{margin:40px 0 8px;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r);display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap;background:var(--light)}
.art-cta b{display:block;font-size:19px}.art-cta span{font-size:14.5px;color:var(--mut)}
.back{display:inline-flex;gap:8px;font-weight:700;font-size:14px;margin-bottom:22px;color:var(--ink)}
.back::before{content:"←"}
.ph .crumb{font-size:13px;color:#b9d3d1;margin-bottom:12px}.ph .crumb a{color:#e6f1f1;border-bottom:1px solid rgba(255,255,255,.4)}
@media(max-width:900px){.blog-feat{grid-template-columns:1fr}.blog-feat .im{min-height:220px}.bgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bgrid{grid-template-columns:1fr}}

/* páginas de exemplo */
.exf{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;margin:0 0 10px;height:540px;background:#0b2428;color:#fff}
.exf .hs{position:absolute;inset:0;opacity:1;visibility:visible}
.exf .hs .wrap{padding-top:40px;padding-bottom:40px;max-width:none}
.exf .hs .eyebrow,.exf .hs h1,.exf .hs h2,.exf .hs .lead,.exf .hs .acts{opacity:1;transform:none}
.exlab{font-size:14px;color:var(--mut);margin:0 0 22px}.exlab b{color:var(--ink)}
.ex-h{font-size:22px;margin:42px 0 6px}
.offcard{position:absolute;right:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%);width:min(360px,86%);background:#fff;color:var(--ink);border-radius:14px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.offcard .tt{display:inline-block;background:#9a0010;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;padding:5px 10px;margin-bottom:12px}
.offcard h3{font-size:22px;margin-bottom:8px}.offcard .pr{font-size:14px;color:var(--mut)}.offcard .pr b{display:block;font-size:42px;letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.offcard .bl{margin:12px 0 16px}.offcard .bl li{color:#3b5155}
.promo-text{position:absolute;left:0;right:0;bottom:0;padding:0}
.pricebox{display:inline-block;background:#150304;border-radius:10px;padding:14px 20px;margin-top:6px}.pricebox small{display:block;font-size:12px;color:#ffd9dc;letter-spacing:.08em;text-transform:uppercase}.pricebox b{font-size:46px;letter-spacing:-.03em;line-height:1}.pricebox em{font-style:normal;font-size:18px;margin-left:4px}
.cut{position:absolute;top:0;bottom:0;right:0;width:58%;z-index:-1;display:flex;justify-content:flex-end;align-items:center}.cut img{height:104%;width:auto;max-width:100%;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.hs.full>img{object-position:center}
.hs.full::before{display:none}
.hs.full .btn{position:absolute;left:clamp(20px,4vw,56px);bottom:48px}

/* exemplo da home nova: um botão principal (WhatsApp) e um secundário (contorno) */
body.nova .btn:not(.out):not(.yel):not([href*="wa.me"]){background:transparent;border-color:var(--ink);color:var(--ink)}
body.nova .btn:not(.out):not(.yel):not([href*="wa.me"]):hover{background:var(--ink);color:#fff}
body.nova .hero .btn:not(.yel):not([href*="wa.me"]),body.nova .band .btn:not(.yel):not([href*="wa.me"]),body.nova .dark .btn:not(.yel):not([href*="wa.me"]),body.nova .ttb .btn:not(.yel):not([href*="wa.me"]),body.nova .combos .btn:not(.yel):not([href*="wa.me"]){border-color:rgba(255,255,255,.7);color:#fff}
body.nova .combos .f-buy .btn{background:#25d366;border-color:#25d366;color:#04200f}
body.nova .offcard .btn{background:#25d366;border-color:#25d366;color:#04200f}
body.nova .btn.ghost{background:transparent;border-color:var(--ink);color:var(--ink)}

/* ofertas citadas nos serviços */
.ostrips{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.ostrip{display:flex;justify-content:space-between;align-items:center;gap:16px;border-radius:var(--r);padding:18px 22px;transition:transform .2s}.ostrip:hover{transform:translateY(-2px)}
.ostrip.red{background:linear-gradient(120deg,#4a0006,#9a0010);color:#fff}.ostrip.dk{background:var(--ink);color:#fff}
.ostrip b{display:block;font-size:16px;line-height:1.3}.ostrip span{display:block;font-size:14px;color:#ffd9dc;margin-top:3px;line-height:1.4}.ostrip.dk span{color:#b9cccd}
.ostrip em{font-style:normal;font-weight:700;font-size:14px;white-space:nowrap}
.rowpromo{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:#9a0010;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.row-btns{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.ostrips{grid-template-columns:1fr}.ostrip{flex-direction:column;align-items:flex-start}}

/* atalho provisório para revisão dos exemplos */
.revpill{position:fixed;left:14px;bottom:14px;z-index:95;display:flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 14px;box-shadow:0 8px 28px rgba(11,36,40,.18);font-size:13px}
.revpill b{font-weight:700;color:var(--ink);margin-right:4px}
.revpill a{background:var(--ink);color:#fff;border-radius:999px;padding:7px 12px;font-weight:600;white-space:nowrap}.revpill a:hover{background:var(--teal);color:#032b27}
@media(max-width:700px){.revpill{flex-wrap:wrap;border-radius:14px;max-width:calc(100% - 100px)}}

/* ===== v8: página da oferta de óleo sem verde (vermelho, branco e dourado) ===== */
.oh{grid-template-columns:1fr}
.ph.offer .plogo{height:96px;width:auto;margin-bottom:22px;display:block}
.ph.offer .plogo[src*="rodabem"]{height:110px;margin-left:-8px}
.ph.offer h1{max-width:820px}
body.oleo{--teal:#b0000f;--teal-d:#8c000f}
body.oleo .ph.offer .eyebrow{color:#ffd9dc;border-left-color:#ffd9dc}
body.oleo .ph.offer .hl{color:#ffc94d}
body.oleo .btn:not(.out):not([href*="wa.me"]){background:#fff;border-color:#fff;color:#7a000c}
body.oleo .btn:not(.out):not([href*="wa.me"]):hover{background:#ffe3e5;border-color:#ffe3e5}
body.oleo .bl .i,body.oleo .ticks .i{color:#b0000f}
body.oleo .combos .chips .i{color:#fff}
body.oleo .combos .eyebrow,body.oleo .combos .promo{color:#fff}
body.oleo .cta2{background:#9a0010;color:#fff}body.oleo .cta2 h2{color:#fff}body.oleo .cta2 p{color:#ffd9dc}
body.oleo .cta2 a.btn[href*="wa.me"],body.oleo .cta2 .btn:not(.out){background:#fff;border-color:#fff;color:#7a000c}
body.oleo .cta2 .btn.out{border-color:#fff;color:#fff}body.oleo .cta2 .btn.out:hover{background:#fff;color:#7a000c}

/* ===== v9: kit Wega do Canva no topo da oferta de óleo; passos do Roda Bem ===== */
.ph.offer.oleo{background:linear-gradient(115deg,#5a0005 0,#740006 45%,#9a000e 100%)}
.oh:has(.oh-kit){grid-template-columns:1.05fr 1fr;align-items:center}
.oh-kit img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%)}
@media(max-width:900px){.oh:has(.oh-kit){grid-template-columns:1fr}.oh-kit{max-width:520px}}
.steps3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps3 li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 28px;box-shadow:0 8px 28px rgba(11,36,40,.06);display:flex;flex-direction:column;gap:8px}
.steps3 b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-size:20px}
.steps3 h3{font-size:19px;margin-top:6px}.steps3 p{color:var(--mut);font-size:15px;line-height:1.6;flex:1}.steps3 .btn{align-self:flex-start;margin-top:8px}
@media(max-width:900px){.steps3{grid-template-columns:1fr}}

/* ===== v10: proposta da página da Top Truck (preto, amarelo e branco) ===== */
body.ttn .hero h1{font-size:clamp(38px,5.4vw,78px);max-width:900px;line-height:1.02}
body.ttn a.btn[href*="wa.me"]{background:#F4BD11;border-color:#F4BD11;color:#1a1400}
body.ttn a.btn[href*="wa.me"]:hover{background:#ffd445;border-color:#ffd445}
body.ttn .wa{background:#F4BD11;color:#1a1400}
.vstrip{background:#F4BD11;color:#000908;padding:0}
.vstrip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:20px;padding-bottom:20px}
.vstrip span{font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.num3{list-style:none;margin:26px 0 30px}
.num3 li{display:grid;grid-template-columns:78px 1fr;gap:18px;padding:22px 0;border-top:1px solid #243431;align-items:start}.num3 li:last-child{border-bottom:1px solid #243431}
.num3 b{font-family:"Anton",sans-serif;font-weight:400;font-size:46px;color:#F4BD11;line-height:1}
.num3 h3{font-size:20px;color:#fff}.num3 p{color:#b5c0bd;margin-top:4px;font-size:15.5px}
.escolha{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,10vw,140px) 0;color:#fff;background:#000908}
.escolha>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.escolha::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,9,8,.9),rgba(0,9,8,.6) 55%,rgba(0,9,8,.2))}
.escolha h2{max-width:720px;color:#fff}.escolha p{color:#d3dcda;margin-top:14px;font-size:18px;max-width:520px}
body.ttn .light{background:#fff;color:#000908}body.ttn .light .ci2 li{color:#46504d}body.ttn .light .ci2 b{color:#000908}body.ttn .light h2{color:#000908}
@media(max-width:900px){.vstrip .wrap{justify-content:flex-start}.num3 li{grid-template-columns:60px 1fr}}

/* v11: Top Truck nova, logo só texto, Instagram e galeria */
.brand-txt img{height:34px;width:auto}
@media(max-width:700px){.brand-txt img{height:26px}}
.igposts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.igposts a{display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:#111;border:1px solid rgba(255,255,255,.1);transition:transform .25s,border-color .25s}
.igposts a:hover{transform:translateY(-4px);border-color:#F4BD11}
.igposts img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.igposts{grid-template-columns:1fr 1fr}.igposts a:last-child{grid-column:span 2;aspect-ratio:16/10}.igposts a:last-child img{object-position:50% 40%}}
body.ttn .gal>a::after{background:#F4BD11;color:#111;font-weight:700}
body.ttn .light .btn.out{color:#000908;border-color:#000908}body.ttn .light .btn.out:hover{background:#F4BD11;border-color:#F4BD11}

body.ttn .igposts a.igc{aspect-ratio:auto;display:flex;flex-direction:column;background:#fff;border:1px solid #dfe3e1;color:#000908}
body.ttn .igposts a.igc:hover{border-color:#F4BD11;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.igi{display:block;aspect-ratio:4/5;overflow:hidden;background:#111}
.igi img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.igt{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.igt small{font-size:12.5px;color:#5b6663}
.igt b{font-size:16px;line-height:1.3}
.igt em{font-style:normal;font-weight:700;font-size:14px;border-bottom:2px solid #F4BD11;align-self:flex-start}
@media(max-width:700px){body.ttn .igposts a.igc:last-child{grid-column:auto}.igposts{grid-template-columns:1fr}.igi{aspect-ratio:1/1}}

/* ===== v12: ajustes do documento (2 nov) ===== */
header nav a.hp::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#F4BD11;margin-right:7px;vertical-align:middle}
footer .ci a:hover,.ci2 a:hover{text-decoration:underline;text-underline-offset:3px}
.ci2 a{color:inherit;display:block}
body.oleo footer{--teal:#03beac;--teal-d:#029684}
.marq img{max-height:58px;max-width:150px;width:auto;height:auto}
.igg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.igg-c{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s}
.igg-c:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(11,36,40,.12)}
.igg-i{display:block;aspect-ratio:4/5;overflow:hidden;background:#0b2428}
.igg-i img{width:100%;height:100%;object-fit:cover}
.igg-t{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.igg-t small{font-size:12.5px;color:var(--mut)}.igg-t b{font-size:15.5px;line-height:1.3;color:var(--ink)}
.igg-t em{font-style:normal;font-weight:700;font-size:13.5px;color:var(--ink);margin-top:auto;padding-top:6px;border-bottom:2px solid var(--teal);align-self:flex-start}
.hblog{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hb{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s}
.hb:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(11,36,40,.12)}
.hb-i{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#0b2428}
.hb-i img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hb-t{position:absolute;left:12px;top:12px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:999px}
.hb-b{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;flex:1}
.hb-b b{font-size:18px;line-height:1.3;color:var(--ink)}
.hb-b em{font-style:normal;font-weight:700;font-size:14px;color:var(--ink);margin-top:auto;border-bottom:2px solid var(--teal);align-self:flex-start}
@media(max-width:1000px){.igg{grid-template-columns:1fr 1fr}.hblog{grid-template-columns:1fr}}
@media(max-width:560px){.igg{grid-template-columns:1fr}}
/* mapas: botão do Google Maps */
.map,.map-full{position:relative}
.gmaps-btn{position:absolute;right:12px;top:12px;z-index:1000;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#0b2428;font:700 13.5px/1 var(--font);padding:11px 14px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.gmaps-btn:hover{background:#F4BD11}
.leaflet-popup-content a{font-weight:700;color:#0b2428;text-decoration:underline}
/* Top Truck: topo com a foto ocupando o lado direito, degradê mais à esquerda */
body.ttn .ttcs{background:#000908}
body.ttn .ttcs::before{background:none!important}
body.ttn .hs.ttc>img{left:auto;right:0;width:68%;object-position:50% 38%}
body.ttn .hs.ttc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000908 0,#000908 28%,rgba(0,9,8,.4) 36%,rgba(0,9,8,0) 52%)}
.vstrip a{font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#000908}.vstrip a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){body.ttn .hs.ttc>img{left:0;width:100%;object-position:50% 30%}body.ttn .hs.ttc::after{background:linear-gradient(180deg,rgba(0,9,8,.7),rgba(0,9,8,.55))}}
.marq img{max-width:170px}.marq .track div{width:210px}
/* contraste: textos claros em fundos escuros */
.honest .rev.q p,.honest .rev.q .who,.honest .rev.q .who b{color:#fff}
.honest .rev.q .who{opacity:.9}
.ph .lead,.hero .lead,.hs .lead{color:#fff}
.ig em{color:var(--ink);border-bottom:2px solid var(--teal)}
.vid-box{border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 12px 36px rgba(11,36,40,.18);aspect-ratio:16/9}
.vid-box video{width:100%;height:100%;display:block;object-fit:cover;background:#000}

/* ===== v13: ajustes de 2 nov (lote 2) ===== */
.nums>div>span{max-width:none;min-height:2.8em}
.marq .track{animation-duration:70s}
.marq img[alt="Lubrax"]{max-width:140px;max-height:60px}
.marq img[alt="Japanparts"]{max-width:115px}
.ph>img[src$="atendimento-transparente.jpg"]{object-position:62% 38%}
.ph>img[src$="mecanico-oleo.jpg"]{object-position:50% 38%}
.ph>img[src$="fachada-kit-wega.jpg"]{object-position:50% 100%}
.ph>img[src$="mecanico-alinhador.jpg"]{left:auto;right:0;width:48%;object-position:50% 56%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 12%,rgba(0,0,0,.6) 30%,#000 55%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 12%,rgba(0,0,0,.6) 30%,#000 55%)}
.ph:has(>img[src$="atendimento-transparente.jpg"])::after,.ph:has(>img[src$="fachada-kit-wega.jpg"])::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,16,18,.78),rgba(6,16,18,.45) 55%,rgba(6,16,18,.12))}
.split .ph-img.vid-in{aspect-ratio:16/9;background:#000;align-self:center}
.vid-in video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.gal.uni{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,240px)}
@media(max-width:900px){.gal.uni{grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,170px)}}
.row>div{display:flex;flex-direction:column;flex:1;align-self:stretch}
.rowpromo{margin-top:auto;padding-top:12px;align-self:flex-start}
.tgh{visibility:hidden}
.pb-s{padding-bottom:clamp(20px,3vw,36px)}.pt-s{padding-top:clamp(20px,3vw,36px)}
/* Top Truck: foto com transição suave para o fundo preto */
body.ttn .hs.ttc>img{width:74%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.08) 6%,rgba(0,0,0,.28) 16%,rgba(0,0,0,.58) 30%,rgba(0,0,0,.84) 46%,#000 64%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.08) 6%,rgba(0,0,0,.28) 16%,rgba(0,0,0,.58) 30%,rgba(0,0,0,.84) 46%,#000 64%)}
body.ttn .hs.ttc::after{background:none}
body.ttn .hero h1{text-shadow:0 2px 18px rgba(0,0,0,.55)}
@media(max-width:900px){body.ttn .hs.ttc>img{-webkit-mask-image:none;mask-image:none}.ph>img[src$="mecanico-alinhador.jpg"]{left:0;width:100%;-webkit-mask-image:none;mask-image:none;object-position:50% 56%}}
/* Sobre nós: foto do atendimento no lado direito, com transição suave */
.ph>img[src$="atendimento-transparente.jpg"]{left:auto;right:0;width:64%;object-position:72% 40%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 10%,rgba(0,0,0,.6) 26%,#000 50%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 10%,rgba(0,0,0,.6) 26%,#000 50%)}
.ph:has(>img[src$="atendimento-transparente.jpg"])::after{display:none}
@media(max-width:900px){.ph>img[src$="atendimento-transparente.jpg"]{left:0;width:100%;-webkit-mask-image:none;mask-image:none}.ph:has(>img[src$="atendimento-transparente.jpg"])::after{display:block}}

/* Serviços: foto da troca de óleo no lado direito */
.ph>img[src$="troca-oleo-servicos.jpg"]{left:auto;right:0;width:56%;object-position:45% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 10%,rgba(0,0,0,.6) 28%,#000 52%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 10%,rgba(0,0,0,.6) 28%,#000 52%)}
@media(max-width:900px){.ph>img[src$="troca-oleo-servicos.jpg"]{left:0;width:100%;-webkit-mask-image:none;mask-image:none}}

/* Ofertas: oficina coberta em tela cheia, com escurecimento para o texto */
.ph>img[src$="oficina-banner.jpg"]{object-position:50% 58%}
.ph:has(>img[src$="oficina-banner.jpg"])::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,16,18,.86),rgba(6,16,18,.62) 55%,rgba(6,16,18,.3))}

/* Blog: troca de óleo em tela cheia, com escurecimento à esquerda */
.ph>img[src$="blog-troca-oleo.jpg"]{object-position:50% 72%}
.ph:has(>img[src$="blog-troca-oleo.jpg"])::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,16,18,.82),rgba(6,16,18,.5) 50%,rgba(6,16,18,.1))}
/* Blog: destaque com altura controlada (fotos verticais não esticam mais o cartão) */
.blog-feat{align-items:stretch}
.blog-feat .im{height:clamp(260px,26vw,340px);min-height:0}
.blog-feat .im img{height:100%;object-position:50% 45%}
@media(max-width:900px){.blog-feat .im{height:230px}}
/* ===== v14: banners internos com a mesma altura, botão do WhatsApp mais alto ===== */
section.ph{height:600px;min-height:0;display:flex;align-items:center;box-sizing:border-box;padding-top:calc(var(--hh) + 24px);padding-bottom:48px}
section.ph>.wrap{width:100%}
section.ph.offer .plogo{height:72px}
section.ph.offer .plogo[src*="rodabem"]{height:84px}
section.ph.offer .oh-kit img{max-height:340px;width:auto}
@media(max-width:900px){section.ph{height:auto;min-height:480px}}
.wa{bottom:92px}
section.ph.offer{padding-top:calc(var(--hh) + 44px)}

/* aviso de cookies */
#ckbar{position:fixed;left:16px;bottom:16px;z-index:120;max-width:520px;background:#0b2428;color:#e7f1f0;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 18px;box-shadow:0 12px 36px rgba(0,0,0,.4);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
#ckbar p{margin:0;font-size:13.5px;line-height:1.5;flex:1 1 260px}#ckbar a{color:#fff;text-decoration:underline}
#ckbar div{display:flex;gap:10px}
#ckbar button{font:700 13.5px/1 var(--font);padding:11px 16px;border-radius:10px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
#ckbar button.ok{background:#03beac;border-color:#03beac;color:#032b27}
@media(max-width:600px){#ckbar{right:16px;max-width:none}}
/* ===== v15: celular, áreas de toque de pelo menos 44 px ===== */
@media(max-width:900px){
  footer .soc a{width:44px;height:44px;display:inline-grid;place-items:center}
  footer .ci a,.ci2 a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
  footer .ci li,.ci2 li{align-items:center}
  footer .copy a{display:inline-block;padding:12px 6px}
  .lnk{display:inline-flex;align-items:center;min-height:44px}
  .vstrip a{display:inline-block;padding:11px 4px}
  .crumb a,.article .back{display:inline-flex;align-items:center;min-height:44px}
  .gmaps-btn{height:44px;padding:0 16px}
  .leaflet-touch .leaflet-bar a{width:40px;height:40px;line-height:40px}
}
/* faixa "Para aprovar" (só no protótipo): compacta no celular */
@media(max-width:700px){.revpill{left:8px!important;right:84px!important;bottom:8px!important;max-width:none!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px!important;padding:6px 8px!important;border-radius:14px!important}.revpill b{display:none!important}.revpill a{white-space:nowrap;font-size:12px!important;padding:9px 11px!important;flex:none}}
/* celular: faixa "centro automotivo completo" em coluna única (v4 sobrescrevia a regra do v2) */
@media(max-width:900px){.band-grid{grid-template-columns:1fr}.band-img{height:260px}.band-img::after{background:linear-gradient(180deg,rgba(11,36,40,0) 50%,var(--ink))}.band-txt{padding:32px var(--pad) 56px;max-width:none}}
/* celular: botões lado a lado viram uma coluna, com a mesma largura */
@media(max-width:600px){.acts{flex-direction:column;align-items:stretch}.acts .btn{width:100%}}
@media(max-width:900px){footer .ci a,.ci2 a{flex-direction:column;align-items:flex-start;justify-content:center}}
/* celular: ícone alinhado à primeira linha, toque de 44 px */
@media(max-width:900px){
  footer .ci li,.ci2 li{align-items:start}
  footer .ci a,.ci2 a{display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:10px 0}
  footer .ci li>span,.ci2 li>span{display:block;padding:10px 0}
  footer .ci li>.i,.ci2 li>.i{margin-top:10px}
  /* Top Truck: foto em tela cheia no topo, com escurecimento para o texto */
  body.ttn .hs.ttc>img{left:0;width:100%;-webkit-mask-image:none;mask-image:none;object-position:50% 28%}
  body.ttn .hs.ttc::after{background:linear-gradient(180deg,rgba(0,9,8,.82),rgba(0,9,8,.58) 60%,rgba(0,9,8,.4))}
}
/* logo do Roda Bem (fundo preto) se funde ao fundo escuro da página */
.ph.offer .plogo[src*="rodabem"]{mix-blend-mode:screen}
@media(max-width:600px){.cta2 .wrap{flex-direction:column;align-items:stretch}.cta2 .acts{width:100%}}
@media(max-width:900px){.bl li a{display:inline-block;padding:10px 0}}

/* ===== v16: lote de 3 nov (celular) ===== */
.mo{display:none}
.car .nv,.car .dots{display:none}
.f-pr small{display:block;font-size:12px;font-weight:600;color:var(--mut);letter-spacing:.02em}
.f-buy b{font-size:26px}
.f-card .f-app b{color:var(--ink)}
.bsearch{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.bsearch input{flex:1 1 260px;height:48px;padding:0 16px;border:1px solid #c6d6d8;border-radius:var(--rs);font:500 16px var(--font)}
.bcats{display:flex;flex-wrap:wrap;gap:8px}.bcats button{font:600 13.5px var(--font);padding:10px 14px;border-radius:999px;border:1px solid #c6d6d8;background:#fff;cursor:pointer}.bcats button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bnone{text-align:center;color:var(--mut);padding:30px 0}

@media(max-width:900px){
  /* respiro entre seções menor */
  :root{--sec:clamp(44px,10vw,56px)}
  .mo{display:inline}.dk{display:none}
  /* serviços: etiqueta fantasma só no computador */
  .row .tgh{display:none}
  /* endereços, horários e rodapés compactos */
  footer .ci a,.ci2 a{display:block;padding:7px 0;min-height:0}
  footer .ci li>span,.ci2 li>span{display:block;padding:7px 0}
  footer .ci li>.i,.ci2 li>.i{margin-top:7px}
  footer .ci,.ci2{gap:2px;margin-top:10px}
  footer .ci li,.ci2 li{line-height:1.4}
  /* Contato: o mapa da Top Truck vem por último */
  .map-grid.rev-o .map{order:2}
  /* Top Truck: faixa dos veículos em grade 3 x 2 */
  .vstrip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0}
  .vstrip a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 4px;font-size:12px;letter-spacing:.06em;text-align:center;border-right:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.18)}
  .vstrip a:nth-child(3n){border-right:0}.vstrip a:nth-child(n+4){border-bottom:0}
  /* banner do Sobre nós: funcionário à mostra */
  .ph>img[src$="atendimento-transparente.jpg"]{object-position:45% 40%}
}
@media(max-width:700px){
  /* 1. banner inicial menor, com camada escura leve */
  #hero{height:560px;min-height:0}
  #hero .hs::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,16,18,.2) 0,rgba(6,16,18,.3) 55%,rgba(6,16,18,.2))}
  #hero .lead{color:#fff}#hero .eyebrow{color:#8ff3e8}
  #hero .hs .wrap{padding-bottom:40px}
  /* 2. números em três colunas */
  .nums{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .nums>div{align-items:center;text-align:center;gap:6px}
  .nums b{font-size:24px;justify-content:center}
  .nums>div>span{font-size:11.5px;min-height:0;max-width:none;line-height:1.3}
  /* 3. marcas mais próximas */
  .marq .track div{width:112px;padding:0 8px}
  .marq img{max-width:96px}
  .marq img[alt="Lubrax"]{max-width:92px}.marq img[alt="Japanparts"]{max-width:86px}
  /* 5. Instagram em carrossel */
  .car{position:relative}
  .car .nv{display:grid;place-items:center;position:absolute;top:112px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#0b2428;font-size:22px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.28);z-index:2;cursor:pointer;padding:0}
  .car .nv.l{left:6px}.car .nv.r{right:6px}
  .car .dots{display:flex;gap:7px;justify-content:center;margin-top:4px}
  .car .dots i{width:8px;height:8px;border-radius:50%;background:#c9d6d7}.car .dots i.on{background:var(--teal);width:22px;border-radius:4px}
  body.ttn .car .dots i.on{background:#F4BD11}
  .car .trk{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 14px;scroll-padding-left:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .car .trk::-webkit-scrollbar{display:none}
  .car .trk>a{flex:0 0 72%;scroll-snap-align:start}
  .igg-i{aspect-ratio:1/1}.igposts .igi{aspect-ratio:1/1!important}
  /* blog em lista compacta (home) */
  .hblog{grid-template-columns:1fr;gap:10px}
  .hb{flex-direction:row;align-items:center}
  .hb-i{width:108px;flex:none;aspect-ratio:1/1}
  .hb-t{left:6px;top:6px;font-size:10.5px;padding:3px 8px}
  .hb-b{padding:10px 14px;gap:6px}.hb-b b{font-size:15px;line-height:1.3}.hb-b em{font-size:13px}
  /* 11. combo: foto grande, preço discreto */
  .f-card{grid-template-columns:1fr!important}
  .f-img{width:100%!important;height:auto!important;aspect-ratio:16/10;object-fit:contain}
  .f-buy{flex-direction:column!important;align-items:stretch!important;gap:10px}
  .f-pr{display:flex;justify-content:space-between;align-items:baseline}.f-buy b{font-size:22px}
  .f-buy .btn{width:100%;flex:none;height:50px;min-height:50px}
  /* 13. Contato: canais em lista compacta */
  .ccs{gap:8px}
  .cc{min-height:58px!important;padding:8px 14px!important;grid-template-columns:34px 1fr auto!important;column-gap:12px!important}
  .cc>.i{font-size:26px!important}
  .cc>div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .cc b{font-size:14px!important}.cc span{display:inline!important;font-size:13px!important;margin-top:0!important}
}

/* v17: rodapé ainda mais compacto no celular */
@media(max-width:700px){
  footer .cols{gap:14px}
  footer .cols>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}
  footer .cols>div:first-child .soc{margin:0;display:flex}
  footer .cols>div:first-child .soc a{width:40px;height:40px}
  footer .cols h4{margin-bottom:4px}
  footer .ci{margin-top:4px;gap:0}
  footer .ci li{margin-bottom:0}
  footer .ci a,footer .ci li>span{padding:5px 0}
  footer .copy{margin-top:14px;padding-top:10px}
  footer .copy a{padding:8px 6px;margin:-8px -6px}
}

/* v17b: etiqueta fantasma de Troca de filtros some em todas as telas */
.row .tgh{display:none}

/* v17c: logo e ícones saem do rodapé no celular (a logo já fica fixa no cabeçalho) */
@media(max-width:700px){footer .cols>div:first-child{display:none}}