@font-face{font-family:'Oswald';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/oswald-300.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/oswald-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/oswald-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================================================
   1 · TEMAS — 8 paletas.
   Regra: --ac é a cor em bloco (botão/fundo). --ac-txt é a mesma
   cor usada como TEXTO, escurecida nos temas claros para não
   reprovar em contraste. Nunca troque um pelo outro.
   ============================================================ */
html[data-tema="noir"]{      /* barbearia · tatuagem · whisky · alfaiataria */
  --bg:#0d0c0b;--sur:#151312;--sur2:#1c1917;--ink:#f0ece4;--mut:#8d8578;
  --ln:rgba(240,236,228,.13);--ac:#d4af37;--ac-ink:#0d0c0b;--ac-txt:#d4af37;
  --claro:#f4f1ea;--claro-ink:#17150f;--claro-mut:#6a6355;--claro-ac:#86690e;
  --shc:rgba(0,0,0,.5);--bc-tint:#050505;--bc-dot:#d4af37}

html[data-tema="linho"]{     /* arquitetura · marcenaria · cafeteria · ateliê */
  --bg:#f5f1e8;--sur:#fffdf7;--sur2:#efe9dc;--ink:#211e18;--mut:#746b5c;
  --ln:rgba(33,30,24,.15);--ac:#9a6b3f;--ac-ink:#fffdf7;--ac-txt:#875730;
  --claro:#211e18;--claro-ink:#f5f1e8;--claro-mut:#9a9082;--claro-ac:#cf9a68;
  --shc:rgba(60,48,30,.14);--bc-tint:#e7e0d2;--bc-dot:#9a6b3f}

html[data-tema="menta"]{     /* clínica · odonto · laboratório · nutrição */
  --bg:#f1f6f3;--sur:#ffffff;--sur2:#e7f0ea;--ink:#0f2019;--mut:#5b7468;
  --ln:rgba(15,32,25,.14);--ac:#0f7a58;--ac-ink:#ffffff;--ac-txt:#0c6449;
  --claro:#0f2019;--claro-ink:#f1f6f3;--claro-mut:#8fa89d;--claro-ac:#3fd3a0;
  --shc:rgba(15,50,38,.13);--bc-tint:#dfeae4;--bc-dot:#0f7a58}

html[data-tema="petroleo"]{  /* tech · oficina · náutico · engenharia */
  --bg:#08171c;--sur:#0e2028;--sur2:#142a33;--ink:#e6f2f4;--mut:#7d9aa2;
  --ln:rgba(230,242,244,.13);--ac:#2fc1ab;--ac-ink:#05171a;--ac-txt:#2fc1ab;
  --claro:#e6f2f4;--claro-ink:#08171c;--claro-mut:#527078;--claro-ac:#077968;
  --shc:rgba(0,0,0,.5);--bc-tint:#040f13;--bc-dot:#2fc1ab}

html[data-tema="rose"]{      /* estética · beleza · moda · floricultura */
  --bg:#fcf5f4;--sur:#ffffff;--sur2:#f6e9e8;--ink:#2b1b1e;--mut:#82696c;
  --ln:rgba(43,27,30,.13);--ac:#ab4c63;--ac-ink:#ffffff;--ac-txt:#9b3e55;
  --claro:#2b1b1e;--claro-ink:#fcf5f4;--claro-mut:#a08a8d;--claro-ac:#e88fa4;
  --shc:rgba(80,40,50,.13);--bc-tint:#f0e2e1;--bc-dot:#ab4c63}

html[data-tema="aco"]{       /* academia · automotivo · segurança · logística */
  --bg:#0f1114;--sur:#16191d;--sur2:#1d2126;--ink:#eef1f5;--mut:#8a939c;
  --ln:rgba(238,241,245,.13);--ac:#3f8cff;--ac-ink:#071018;--ac-txt:#5c9dff;
  --claro:#eef1f5;--claro-ink:#0f1114;--claro-mut:#5f6a75;--claro-ac:#1666e0;
  --shc:rgba(0,0,0,.55);--bc-tint:#070809;--bc-dot:#3f8cff}

html[data-tema="terra"]{     /* restaurante · padaria · pizzaria · açougue */
  --bg:#14100c;--sur:#1d1813;--sur2:#251e17;--ink:#f3ece2;--mut:#9c8b78;
  --ln:rgba(243,236,226,.13);--ac:#cd7040;--ac-ink:#14100c;--ac-txt:#dd8555;
  --claro:#f3ece2;--claro-ink:#14100c;--claro-mut:#74685a;--claro-ac:#a5501f;
  --shc:rgba(0,0,0,.5);--bc-tint:#0a0806;--bc-dot:#cd7040}

html[data-tema="citrico"]{   /* pet shop · infantil · hortifruti · sorveteria */
  --bg:#fbfbf4;--sur:#ffffff;--sur2:#f2f4e6;--ink:#1b1f14;--mut:#6e755e;
  --ln:rgba(27,31,20,.14);--ac:#7ab317;--ac-ink:#10140a;--ac-txt:#4f7a0c;
  --claro:#1b1f14;--claro-ink:#fbfbf4;--claro-mut:#98a086;--claro-ac:#a8dc3c;
  --shc:rgba(40,50,20,.13);--bc-tint:#eceee0;--bc-dot:#7ab317}

/* ============================================================
   2 · PARES DE FONTE — 6.
   --ttl título · --txt corpo · --acc a palavra destacada
   ============================================================ */
html[data-fonte="1"]{        /* BRUTO — barbearia, oficina, academia, tatuagem */
  --ttl:'Oswald',Impact,sans-serif;--ttl-w:600;--ttl-tr:uppercase;--ttl-ls:.005em;--ttl-lh:1.04;
  --txt:'Inter',system-ui,sans-serif;--acc:'Oswald',sans-serif;--acc-st:normal;--acc-w:300}
html[data-fonte="2"]{        /* CLÁSSICO — advocacia, contabilidade, joalheria, cartório */
  --ttl:'Playfair Display',Georgia,serif;--ttl-w:700;--ttl-tr:none;--ttl-ls:-.02em;--ttl-lh:1.06;
  --txt:'Source Sans 3',system-ui,sans-serif;--acc:'Playfair Display',serif;--acc-st:italic;--acc-w:400}
html[data-fonte="3"]{        /* AMIGÁVEL — pet shop, infantil, sorveteria, festas */
  --ttl:'Poppins',system-ui,sans-serif;--ttl-w:700;--ttl-tr:none;--ttl-ls:-.032em;--ttl-lh:1.08;
  --txt:'Nunito Sans',system-ui,sans-serif;--acc:'Poppins',sans-serif;--acc-st:italic;--acc-w:500}
html[data-fonte="4"]{        /* CLÍNICO — clínica, odonto, laboratório, tecnologia */
  --ttl:'Manrope',system-ui,sans-serif;--ttl-w:800;--ttl-tr:none;--ttl-ls:-.045em;--ttl-lh:1.02;
  --txt:'Manrope',system-ui,sans-serif;--acc:'Manrope',sans-serif;--acc-st:normal;--acc-w:400}
html[data-fonte="5"]{        /* EDITORIAL — estética, moda, arquitetura, fotografia */
  --ttl:'Bodoni Moda',Didot,serif;--ttl-w:700;--ttl-tr:none;--ttl-ls:-.015em;--ttl-lh:1.05;
  --txt:'Jost',system-ui,sans-serif;--acc:'Bodoni Moda',serif;--acc-st:italic;--acc-w:400}
html[data-fonte="6"]{        /* ARTESANAL — restaurante, padaria, cafeteria, marcenaria */
  --ttl:'Fraunces',Georgia,serif;--ttl-w:700;--ttl-tr:none;--ttl-ls:-.028em;--ttl-lh:1.05;
  --txt:'Karla',system-ui,sans-serif;--acc:'Fraunces',serif;--acc-st:italic;--acc-w:400}

/* ============================================================
   3 · LINGUAGENS DE FORMA — 3.
   Muda raio, borda, sombra, formato do botão e densidade.
   ============================================================ */
html[data-forma="reto"]{
  --r:0px;--rb:0px;--bd:1px;--sh:none;--dens:.88;--btn-y:17px;--btn-x:32px;--card:26px}
html[data-forma="suave"]{
  --r:10px;--rb:8px;--bd:1px;--sh:0 10px 30px var(--shc);--dens:1;--btn-y:16px;--btn-x:30px;--card:28px}
html[data-forma="redondo"]{
  --r:24px;--rb:100px;--bd:0px;--sh:0 16px 44px var(--shc);--dens:1.18;--btn-y:17px;--btn-x:34px;--card:32px}

/* ============================================================
   4 · BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--txt);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:66px}
::selection{background:var(--ac);color:var(--ac-ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}  /* height:auto ou o atributo height estica a imagem */
.w{max-width:1180px;margin:0 auto;padding-left:5vw;padding-right:5vw}
section{padding:calc(10vh * var(--dens)) 0}
h1,h2,h3,.nav__logo{font-family:var(--ttl)}
h1,h2{font-weight:var(--ttl-w);text-transform:var(--ttl-tr);letter-spacing:var(--ttl-ls);line-height:var(--ttl-lh)}
h2{font-size:clamp(27px,4.6vw,50px)}
em{font-family:var(--acc);font-style:var(--acc-st);font-weight:var(--acc-w);color:var(--ac-txt);
  text-transform:none;letter-spacing:0}
.lb{font-family:var(--txt);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.desc{color:var(--mut);max-width:56ch;margin-top:16px;font-size:15.5px;line-height:1.75}
.btn{display:inline-block;background:var(--ac);color:var(--ac-ink);padding:var(--btn-y) var(--btn-x);
  border-radius:var(--rb);font-family:var(--txt);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;border:var(--bd) solid transparent}
.btn--g{background:transparent;color:var(--ink);border:1px solid var(--ln)}
.ico{width:26px;height:26px;stroke:var(--ac-txt);fill:none;stroke-width:1.5;flex:0 0 auto}
/* Placeholder de foto: precisa ser VISÍVEL, senão não dá para julgar o layout.
   Vira a foto real do cliente — troque por <img> ou background-image. */
html{--hachura:repeating-linear-gradient(135deg,var(--sur2) 0 14px,
  color-mix(in srgb,var(--sur2) 68%,var(--ink)) 14px 28px)}
.foto{position:relative;overflow:hidden;background:var(--hachura)}
.foto::after{content:"foto";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--acc);font-style:italic;color:var(--ink);opacity:.55;font-size:16px;letter-spacing:.2em}
.foto:has(img)::after{display:none}   /* entrou foto de verdade, some a legenda */
.foto img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   5 · NAVEGAÇÃO — 4 variantes.
   A gaveta é um <details>: abre e fecha sem uma linha de JavaScript.
   ============================================================ */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.nav__in{display:flex;align-items:center;gap:24px;padding:14px 0}
.nav__logo{font-size:15px;letter-spacing:.28em;font-weight:700;white-space:nowrap;text-transform:uppercase}
.nav__logo i{color:var(--ac-txt);font-style:normal}
.nav__menu{display:flex;gap:22px;margin-left:auto;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.nav__menu a:hover{color:var(--ink)}
.nav__tel{font-size:13px;color:var(--mut);white-space:nowrap}
.nav__cta{padding:11px 20px;font-size:10.5px}
.nav__topo{display:none;border-bottom:1px solid var(--ln);background:var(--sur)}
.nav__topo div{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
  padding:7px 0;font-size:11.5px;letter-spacing:.08em;color:var(--mut)}

/* gaveta (só aparece quando é a variante escolhida, ou no celular) */
.gav{display:none;margin-left:auto;position:relative}
.gav>summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-content:center;gap:5px;
  border:1px solid var(--ln);border-radius:var(--rb)}
.gav>summary::-webkit-details-marker{display:none}
.gav>summary span{display:block;width:17px;height:1.5px;background:var(--ink)}
.gav__lista{position:absolute;right:0;top:calc(100% + 9px);min-width:190px;background:var(--sur);
  border:1px solid var(--ln);border-radius:var(--r);box-shadow:var(--sh);padding:8px;display:grid;gap:2px}
.gav__lista a{padding:11px 14px;border-radius:calc(var(--r) - 4px);font-size:13.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.gav__lista a:hover{background:var(--sur2);color:var(--ink)}

/* B · logo ao centro — as três colunas precisam ser EXPLÍCITAS.
   Só posicionar o logo deixa o auto-placement empurrar o botão para
   uma segunda linha. */
html[data-nav="central"] .nav__in{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
html[data-nav="central"] .nav__menu{grid-area:1/1;margin:0;justify-content:flex-start}
html[data-nav="central"] .nav__logo{grid-area:1/2;text-align:center;font-size:17px}
html[data-nav="central"] .nav__cta{grid-area:1/3;justify-self:end}
html[data-nav="central"] .nav__tel{display:none}

/* C · barra dupla — endereço e horário em cima */
html[data-nav="dupla"] .nav__topo{display:block}
html[data-nav="dupla"] .nav__tel{display:none}

/* D · gaveta — menu escondido também no desktop */
html[data-nav="gaveta"] .nav__menu{display:none}
html[data-nav="gaveta"] .gav{display:block}
html[data-nav="gaveta"] .nav__cta{margin-left:auto}
html[data-nav="gaveta"] .gav{margin-left:14px}

/* no celular todas viram gaveta — antes o menu simplesmente sumia */
@media(max-width:900px){
  .nav__menu,.nav__tel{display:none}
  .nav__in{display:flex;justify-content:space-between;gap:12px}
  .nav__topo div{font-size:10.5px;gap:12px}
  .gav{display:block;margin-left:0}
  html[data-nav="central"] .nav__logo{grid-column:auto;text-align:left;font-size:15px}
  html[data-nav="gaveta"] .nav__cta{margin-left:0}
}

/* ============================================================
   6 · OS 5 HERÓIS
   Só o escolhido em data-heroi fica no fluxo.
   ============================================================ */
header[data-heroi]{display:none}
html[data-heroi="a"] header[data-heroi="a"],html[data-heroi="b"] header[data-heroi="b"],
html[data-heroi="c"] header[data-heroi="c"],html[data-heroi="d"] header[data-heroi="d"],
html[data-heroi="e"] header[data-heroi="e"]{display:block}

.eyebrow{font-family:var(--txt);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut)}
h1{font-size:clamp(38px,6.4vw,72px);margin:18px 0}
.sub{color:var(--mut);font-size:clamp(15px,1.7vw,17.5px);max-width:44ch;line-height:1.7}
.selos{display:flex;flex-wrap:wrap;gap:22px 30px;margin:30px 0}
.selo{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.4;max-width:190px}
.selo b{display:block;font-weight:600}
.selo span{color:var(--mut);font-size:12.5px}
.acts{display:flex;gap:12px;flex-wrap:wrap}

/* A · DIVIDIDO — texto à esquerda, foto em pé à direita */
.h-a{display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center;padding:8vh 0 6vh}
.h-a .foto{border-radius:var(--r);overflow:hidden;border:var(--bd) solid var(--ln);aspect-ratio:4/4.4;box-shadow:var(--sh)}
@media(max-width:900px){.h-a{grid-template-columns:1fr;padding-top:2.5vh}.h-a .foto{aspect-ratio:4/3;order:-1}}

/* B · IMERSIVO — foto ocupa tudo, texto por cima */
.h-b{position:relative;min-height:86svh;display:flex;align-items:flex-end;overflow:hidden}
.h-b__bg{position:absolute;inset:0;background:var(--hachura)}
.h-b__bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--bg) 0%,
    color-mix(in srgb,var(--bg) 82%,transparent) 58%,
    color-mix(in srgb,var(--bg) 52%,transparent) 100%)}
.h-b__in{position:relative;z-index:2;width:100%;padding:22vh 0 9vh}
.h-b h1{max-width:16ch}
.h-b .selos{margin-bottom:0}
@media(max-width:900px){.h-b{min-height:78svh}}

/* C · TIPOGRÁFICO — sem foto grande, título enorme, tira de fotos embaixo */
.h-c{padding:12vh 0 0}
.h-c h1{font-size:clamp(44px,9.4vw,124px);margin:20px 0 0;max-width:14ch}
.h-c__linha{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;margin-top:34px}
.h-c .sub{max-width:38ch}
.h-c__tira{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:7vh}
.h-c__tira .foto{aspect-ratio:1/1.15;border-radius:var(--r);border:var(--bd) solid var(--ln);overflow:hidden}
@media(max-width:900px){.h-c{padding-top:8vh}.h-c__tira{grid-template-columns:1fr 1fr}.h-c__tira>:last-child{display:none}}

/* D · CARTÃO — foto de fundo, cartão sólido deslocado */
.h-d{position:relative;padding:9vh 0 11vh}
.h-d__bg{position:absolute;inset:0 0 22% 34%;border-radius:var(--r);overflow:hidden}
.h-d__cartao{position:relative;z-index:2;background:var(--sur);border:var(--bd) solid var(--ln);
  border-radius:var(--r);padding:var(--card) calc(var(--card) + 8px);max-width:600px;box-shadow:var(--sh);margin-top:8vh}
.h-d h1{font-size:clamp(34px,5.2vw,58px)}
@media(max-width:900px){.h-d__bg{inset:0 0 62% 0}.h-d__cartao{margin-top:34vh;max-width:none}}

/* E · CENTRAL — tudo centralizado, foto larga embaixo */
.h-e{padding:11vh 0 0;text-align:center}
.h-e h1{max-width:18ch;margin-inline:auto}
.h-e .sub{margin-inline:auto}
.h-e .selos{justify-content:center}
.h-e .selo{text-align:left}
.h-e .acts{justify-content:center}
.h-e__foto{margin-top:6vh;aspect-ratio:21/9;border-radius:var(--r);border:var(--bd) solid var(--ln);
  overflow:hidden;box-shadow:var(--sh)}
@media(max-width:900px){.h-e{padding-top:7vh}.h-e__foto{aspect-ratio:4/3}}


/* ============================================================
   8 · ORDEM DOS BLOCOS — 4 roteiros de leitura.
   Aqui é só o preview: o CSS 'order' muda o que se vê, mas não
   muda o DOM — quem navega por teclado ou leitor de tela continua
   na ordem antiga. Por isso a EXPORTAÇÃO reordena de verdade.
   ============================================================ */
.blocos{display:flex;flex-direction:column}
/* o `order` só funciona em flex, e em flex com margem automática no eixo
   transversal o item encolhe para o conteúdo em vez de esticar. Sem esta
   linha, seção de conteúdo estreito (galeria) sai espremida no meio da tela. */
.blocos>[data-bloco]{width:100%}
/* padrao */
html[data-ordem="padrao"] [data-bloco="serv"]{order:1} html[data-ordem="padrao"] [data-bloco="dif"]{order:2} html[data-ordem="padrao"] [data-bloco="eq"]{order:3} html[data-ordem="padrao"] [data-bloco="dep"]{order:4} html[data-ordem="padrao"] [data-bloco="ad"]{order:5} html[data-ordem="padrao"] [data-bloco="nums"]{order:6} html[data-ordem="padrao"] [data-bloco="gal"]{order:7} html[data-ordem="padrao"] [data-bloco="faq"]{order:8}
/* prova */
html[data-ordem="prova"] [data-bloco="dep"]{order:1} html[data-ordem="prova"] [data-bloco="nums"]{order:2} html[data-ordem="prova"] [data-bloco="serv"]{order:3} html[data-ordem="prova"] [data-bloco="gal"]{order:4} html[data-ordem="prova"] [data-bloco="dif"]{order:5} html[data-ordem="prova"] [data-bloco="eq"]{order:6} html[data-ordem="prova"] [data-bloco="ad"]{order:7} html[data-ordem="prova"] [data-bloco="faq"]{order:8}
/* visual */
html[data-ordem="visual"] [data-bloco="gal"]{order:1} html[data-ordem="visual"] [data-bloco="serv"]{order:2} html[data-ordem="visual"] [data-bloco="ad"]{order:3} html[data-ordem="visual"] [data-bloco="dep"]{order:4} html[data-ordem="visual"] [data-bloco="dif"]{order:5} html[data-ordem="visual"] [data-bloco="nums"]{order:6} html[data-ordem="visual"] [data-bloco="eq"]{order:7} html[data-ordem="visual"] [data-bloco="faq"]{order:8}
/* confianca */
html[data-ordem="confianca"] [data-bloco="eq"]{order:1} html[data-ordem="confianca"] [data-bloco="dif"]{order:2} html[data-ordem="confianca"] [data-bloco="serv"]{order:3} html[data-ordem="confianca"] [data-bloco="nums"]{order:4} html[data-ordem="confianca"] [data-bloco="dep"]{order:5} html[data-ordem="confianca"] [data-bloco="gal"]{order:6} html[data-ordem="confianca"] [data-bloco="ad"]{order:7} html[data-ordem="confianca"] [data-bloco="faq"]{order:8}

/* ============================================================
   7 · RESTO DA PÁGINA
   ============================================================ */
.serv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--ln);
  border:var(--bd) solid var(--ln);border-radius:var(--r);overflow:hidden;margin-top:5vh;box-shadow:var(--sh)}
.serv>div{background:var(--sur);padding:var(--card) calc(var(--card) - 4px)}
.serv h3{font-size:15.5px;font-weight:600;margin:14px 0 7px;letter-spacing:-.01em}
.serv p{color:var(--mut);font-size:13.5px;line-height:1.6}

.dif{display:grid;grid-template-columns:1fr 1fr;gap:0;border:var(--bd) solid var(--ln);
  border-radius:var(--r);overflow:hidden;margin-top:5vh;box-shadow:var(--sh)}
.dif__txt{padding:calc(var(--card) + 14px) calc(var(--card) + 10px);background:var(--sur)}
.dif__lista{list-style:none;display:grid;gap:14px}
.dif__lista li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.dif__lista svg{width:19px;height:19px;margin-top:3px}
.dif .foto{min-height:330px}
@media(max-width:820px){.dif{grid-template-columns:1fr}.dif__txt{padding:30px 24px}}

.eq{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:5vh}
.eq__c{background:var(--sur);border:var(--bd) solid var(--ln);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.eq__c .foto{aspect-ratio:1/1}
.eq__c div:last-child{padding:18px 20px}
.eq__c b{display:block;font-size:15.5px}
.eq__c span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-txt)}
.eq__c p{color:var(--mut);font-size:13px;margin-top:6px}

.dep{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:5vh}
.dep__c{background:var(--sur);border:var(--bd) solid var(--ln);border-radius:var(--r);
  padding:var(--card) calc(var(--card) - 2px);box-shadow:var(--sh)}
.dep__e{color:var(--ac-txt);letter-spacing:.14em;font-size:14px}
.dep__c p{margin:14px 0 20px;font-size:15px;line-height:1.7}
.dep__q{display:flex;gap:12px;align-items:center}
.dep__av{width:38px;height:38px;border-radius:50%;background:var(--sur2);border:1px solid var(--ln);flex:0 0 auto}
.dep__q b{display:block;font-size:14px}
.dep__q span{font-size:12px;color:var(--mut)}

.ad{position:relative;border:var(--bd) solid var(--ln);border-radius:var(--r);overflow:hidden;margin-top:5vh;
  aspect-ratio:16/8;background:var(--sur);touch-action:pan-y;user-select:none;cursor:ew-resize;box-shadow:var(--sh)}
.ad__a,.ad__d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--acc);font-style:italic;font-size:clamp(20px,3.4vw,38px)}
.ad__a{background:var(--sur2);color:var(--mut)}
.ad__d{background:var(--ac);color:var(--ac-ink);clip-path:inset(0 0 0 50%)}
.ad__h{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ac);z-index:3;pointer-events:none}
.ad__h::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--ac);box-shadow:0 4px 18px rgba(0,0,0,.45)}
.ad__tag{position:absolute;bottom:14px;z-index:4;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(0,0,0,.6);padding:6px 12px;border-radius:100px;color:#fff}
.ad__tag--a{left:14px}.ad__tag--d{right:14px}

.nums{background:var(--claro);color:var(--claro-ink)}
.nums .lb,.nums .desc{color:var(--claro-mut)}
.nums .lb b,.nums em{color:var(--claro-ac)}
.nums__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px;margin-top:5vh}
.nums__g b{display:block;font-family:var(--ttl);font-size:clamp(34px,5.4vw,56px);font-weight:var(--ttl-w);
  letter-spacing:-.04em;color:var(--claro-ac)}
.nums__g>div>span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--claro-mut)}  /* > div > : senão a regra pega o span do número dentro do <b> */

[data-bloco="gal"]{overflow-x:clip}   /* cartões laterais do carrossel 3D passam da tela */
.gal-nota{color:var(--mut);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:22px}

.faq{margin-top:5vh;border-top:1px solid var(--ln)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:clamp(16px,2vw,19px);font-weight:500;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover,.faq details[open] summary{color:var(--ac-txt)}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;background:var(--ac-txt)}
.faq summary::before{transform:translateY(-50%) rotate(90deg);transition:transform .35s}
.faq details[open] summary::before{transform:translateY(-50%)}
.faq p{padding:0 12% 24px 0;color:var(--mut);font-size:15px;line-height:1.75}

.cta{background:var(--sur);border-block:1px solid var(--ln)}
.cta__in{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}

footer{padding:calc(8vh * var(--dens)) 0 4vh}
.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
.ft h4{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ac-txt);margin-bottom:16px}
.ft ul{list-style:none;display:grid;gap:9px}
.ft a,.ft li{color:var(--mut);font-size:14px}
.ft a:hover{color:var(--ink)}
.ft__sobre{color:var(--mut);font-size:14px;line-height:1.7;margin-top:14px;max-width:34ch}
.ft__base{border-top:1px solid var(--ln);margin-top:6vh;padding-top:26px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.ft__base a{color:var(--ac-txt)}
@media(max-width:820px){.ft{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft{grid-template-columns:1fr}}

/* ── camada LS ──────────────────────────────────────────── */
/* ── acento do tema aço trocado pelo prata cromado da marca LS ─────────── */
html[data-tema="aco"]{
  --ac:#dbe2ea; --ac-ink:#0b0e12; --ac-txt:#dbe2ea;
  --claro-ac:#28313d; --bc-dot:#dbe2ea; --bc-tint:#05070a;
  --fx-cursor-color:#dbe2ea; --fx-cursor-fill:rgba(219,226,234,.14);
  --bendi:'estudiobendi.com.br';
}
/* ordem "vitrine" (nicho automotivo): o DOM já é escrito na ordem visual, então
   nenhuma regra de `order` do laboratório se aplica — foco de teclado e leitor de
   tela seguem exatamente o que se vê. */
.blocos>[data-bloco]{order:0}

/* body não pode fechar o transbordo: position:sticky do herói para de funcionar.
   O transbordo é fechado na seção que o cria. */
body{overflow-x:visible}
[data-bloco="gal"],[data-bloco="est"],.cta,.hs{overflow-x:clip}

/* ── HERÓI COM ROLAGEM ─────────────────────────────────────────────────── */
.hs{position:relative;height:190vh;background:var(--bg)}
.hs__pin{position:sticky;top:0;height:100svh;min-height:560px;display:flex;
  align-items:flex-start;overflow:hidden}
/* `cover` amplia a foto até preencher e corta o que sobra — em tela larga e baixa
   quem sai do quadro é a frente do carro. `contain` nunca corta, e como o fundo da
   foto é estúdio preto, a faixa que sobra some contra o preto do palco. Resultado:
   o carro aparece inteiro em qualquer proporção de tela, sem depender de sorte. */
.hs__palco{position:absolute;inset:0;z-index:0;background:#000}
.hs__img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  transform:scale(calc(1 + .08 * var(--p,0))) translateY(calc(var(--p,0) * -2vh));
  transform-origin:50% 50%;will-change:transform}
/* O véu não pode ser uma parede preta em cima de metade da tela: o carro tem que
   ler de ponta a ponta. Um escurecimento leve e parelho na imagem inteira, e a
   sombra forte só onde o texto encosta — não na metade esquerda inteira. */
.hs__veu{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(118% 86% at 27% 46%, rgba(15,17,20,.90) 0%, rgba(15,17,20,.62) 34%,
                    rgba(15,17,20,.10) 62%, rgba(15,17,20,0) 78%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 24%,
                    rgba(0,0,0,0) 60%, rgba(15,17,20,.82) 93%, var(--bg) 100%),
    linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
  opacity:calc(.94 + .06 * var(--p,0))}
/* `.hs__in` é item flex dentro do palco: sem width:100% ele encolhe até o
   conteúdo e o `margin:0 auto` do .w centraliza esse bloco menor — jogando o
   título 163px à direita do logo da barra. Com width:100% ele volta ao trilho. */
.hs__in{width:100%;position:relative;z-index:2;padding-top:12vh;padding-bottom:5vh;
  transform:translateY(calc(var(--p,0) * -34px));
  opacity:calc(1 - max(0, var(--p,0) - .40) / .30)}
.hs__in>*{max-width:760px}          /* mesmo trilho das seções, sem centralizar */
.hs__in .sub{max-width:56ch}
/* opacidade zerada não tira o clique: quem some, some de verdade */
.hs--sumiu .hs__in{pointer-events:none;visibility:hidden}
.hs__dica{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font:600 10px/1 var(--txt);letter-spacing:.24em;text-transform:uppercase;color:var(--mut);
  opacity:calc(1 - min(1, var(--p,0) * 4))}
.hs__dica i{width:1px;height:34px;background:linear-gradient(var(--ac-txt),transparent);
  animation:hsdica 1.8s ease-in-out infinite}
@keyframes hsdica{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.hs__prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ln);z-index:3}
.hs__prog i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--ac-txt)}
@media (max-width:520px){
  .hs__in .acts{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .hs__in .acts .btn{width:100%;justify-content:center;text-align:center}
}
@media (max-width:860px){
  .hs{height:165vh}
  /* no celular a foto não toma a tela toda: fica ancorada embaixo, com o topo
     em fundo sólido para o texto. Assim o carro aparece inteiro e nada compete. */
  .hs__pin{align-items:flex-start}
  .hs__palco{inset:auto 0 0 0;height:62%;background:transparent}
  .hs__img{object-fit:cover;object-position:50% 40%;
    transform:scale(calc(1 + .10 * var(--p,0))) translateY(calc(var(--p,0) * -1.5vh))}
  .hs__in{padding-top:12vh;padding-bottom:0}
  .hs__veu{background:linear-gradient(180deg,
    var(--bg) 0%, var(--bg) 33%, rgba(15,17,20,.88) 42%, rgba(15,17,20,.42) 56%,
    rgba(15,17,20,.14) 70%, rgba(15,17,20,.52) 84%, rgba(15,17,20,.86) 94%, rgba(15,17,20,.96) 100%);
    opacity:1}
  .hs__in .selos{margin-bottom:0;gap:14px 26px}
}
@media (prefers-reduced-motion:reduce){
  .hs{height:auto}
  .hs__pin{position:relative;height:auto;min-height:88svh}
  .hs__img{transform:none}
  .hs__in{transform:none;opacity:1}
  .hs__dica i{animation:none}
}

/* ── ESTOQUE ───────────────────────────────────────────────────────────── */
.est{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:5vh}
@media (max-width:1040px){.est{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.est{grid-template-columns:1fr}}
.est__c{background:var(--sur);border:var(--bd) solid var(--ln);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh)}
.est__foto{position:relative;aspect-ratio:3/4;background:var(--sur2);overflow:hidden}
.est__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.est__tag{position:absolute;left:12px;top:12px;padding:6px 11px;border-radius:var(--r);
  font:700 10.5px/1.35 var(--txt);letter-spacing:.09em;text-transform:uppercase;
  backdrop-filter:blur(6px)}
.est__tag--ok{background:rgba(219,226,234,.94);color:#0b0e12}
.est__tag--av{background:rgba(11,14,18,.90);color:#eef1f5;border:1px dashed rgba(219,226,234,.62)}
.est__tag--vendido{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);width:115%;padding:10px 0;border-radius:0;background:#b42318;color:#fff;text-align:center;box-shadow:0 3px 12px #0008;font-size:12px;letter-spacing:.2em}
.est__corpo{padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.est__marca{font:600 10.5px/1 var(--txt);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0}
.est__c h3{font-family:var(--ttl);font-weight:var(--ttl-w);text-transform:var(--ttl-tr);
  font-size:clamp(19px,1.5vw,23px);line-height:1.12;margin:0}
.est__ficha{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin:0;
  padding:14px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.est__ficha>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.est__ficha dt{font:600 9.5px/1 var(--txt);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.est__ficha dd{margin:0;font:600 14px/1.3 var(--txt);color:var(--ink);overflow-wrap:anywhere}
.est__dest{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.est__dest li{font:500 11.5px/1 var(--txt);color:var(--mut);border:1px solid var(--ln);
  border-radius:var(--r);padding:6px 9px}
.est__preco{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.est__fipe{font:500 12px/1.4 var(--txt);color:var(--mut);text-decoration:line-through;
  text-decoration-color:var(--mut)}
.est__preco b{font-family:var(--ttl);font-weight:var(--ttl-w);font-size:clamp(27px,2.4vw,33px);
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.est__vista{font:500 11.5px/1.4 var(--txt);color:var(--ac-txt)}
.btn--full{width:100%;justify-content:center;text-align:center}
.est__acoes{display:flex;gap:8px}
.est__acoes .btn{flex:1;padding-inline:14px}
a.est__foto{display:block;text-decoration:none}
a.est__foto img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
a.est__foto:hover img{transform:scale(1.04)}
.desc--top{max-width:60ch;margin-top:14px}
.selo span{display:block;max-width:20ch}
.faq p{max-width:70ch}

/* ── diferenciais em lista larga ───────────────────────────────────────── */
.dif__lista--larga{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 34px;margin-top:5vh}
@media (max-width:760px){.dif__lista--larga{grid-template-columns:1fr}}
.dif__lista--larga li{display:flex;gap:13px;align-items:flex-start}
.dif__lista--larga li>div{display:flex;flex-direction:column;gap:4px}
.dif__lista--larga b{font:700 15.5px/1.35 var(--txt);color:var(--ink)}
.dif__lista--larga span{font:400 14px/1.55 var(--txt);color:var(--mut)}

/* ── alvo de toque: nada abaixo de 44px (WCAG 2.2 · 2.5.8) ─────────────── */
.bc .bc__dots{gap:0;padding:0 6px;bottom:0}
.bc .bc__dot{position:relative;width:26px;height:44px;background:transparent;
  display:flex;align-items:center;justify-content:center;transition:none}
.bc .bc__dot::after{content:"";width:7px;height:7px;border-radius:999px;
  background:rgba(255,255,255,.32);transition:width .25s,background .25s}
.bc .bc__dot.is-on{width:34px;background:transparent}
.bc .bc__dot.is-on::after{width:20px;background:var(--bc-dot)}
.gav>summary{min-width:44px;min-height:44px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px}
.nav__cta{min-height:44px;display:inline-flex;align-items:center}
.faq summary{min-height:44px}

/* trilho do conteúdo: 1280 em vez de 1180, e o respiro lateral para de crescer
   depois de 72px — senão em tela grande sobra um vazio enorme à esquerda */
.w{max-width:1280px;padding-left:clamp(18px,5vw,72px);padding-right:clamp(18px,5vw,72px)}

/* ── âncora não pode parar embaixo da barra grudada ────────────────────── */
[id]{scroll-margin-top:112px}
@media (max-width:900px){[id]{scroll-margin-top:96px}}

/* a nav usava `padding:14px 0`, que apaga o padding-left/right:5vw do .w —
   o brasão encostava na borda no celular e saía do trilho no desktop. */
.nav__in{padding-left:clamp(18px,5vw,72px);padding-right:clamp(18px,5vw,72px)}
.nav__topo .w{padding-left:clamp(18px,5vw,72px);padding-right:clamp(18px,5vw,72px)}

/* ── nav com a marca em imagem ─────────────────────────────────────────── */
.nav__logo{display:flex;align-items:center;gap:11px}
.nav__logo img{border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(219,226,234,.22),0 2px 10px rgba(0,0,0,.5)}
.nav__logo--ft img{border-radius:50%;box-shadow:0 0 0 1px rgba(219,226,234,.18)}
@media (max-width:560px){
  .nav__topo .w span:last-child{display:none}
  .nav__logo span{font-size:15px}
}
@media (max-width:400px){.nav__logo i{display:none}}

/* ── o laudo cautelar não é um opcional: destaca ───────────────────────── */
.est__dest li:first-child:where(.est__dest--cau *, .est__dest--cau li){}
.est__dest .cau{border-color:rgba(219,226,234,.5);color:var(--ink);font-weight:700}
.est__dest .cau::before{content:"✓ ";color:var(--ac-txt)}
.nums .desc a{color:var(--claro-ac);text-decoration:underline;text-underline-offset:3px}
.ft__base small{display:block;margin-top:6px;color:var(--mut);font-size:12px;line-height:1.55;max-width:56ch}
.ft__base a,.ft__sobre a{text-decoration:underline;text-underline-offset:3px}


/* ═══════════════════ PÁGINA DO VEÍCULO ═══════════════════ */
.migalha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:18px 0 22px;
  font-size:12.5px;color:var(--mut)}
.migalha a{color:var(--mut);text-decoration:none}
.migalha a:hover{color:var(--ac-txt);text-decoration:underline;text-underline-offset:3px}
.migalha span[aria-current]{color:var(--ink)}
.migalha i{font-style:normal;opacity:.5}

.veic{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr);
  gap:clamp(20px,2.4vw,36px);align-items:start}
@media(max-width:1000px){.veic{grid-template-columns:minmax(0,1fr)}}
.veic>*{min-width:0}

/* galeria: rolagem com encaixe, funciona sem JavaScript */
.gal{position:relative;border:var(--bd) solid var(--ln);border-radius:var(--r);
  overflow:hidden;background:var(--sur)}
.gal__tira{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;scroll-behavior:smooth}
.gal__tira:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.gal__tira::-webkit-scrollbar{display:none}
.gal__f{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;position:relative}
.gal__f img{width:100%;height:100%;object-fit:cover;display:block}
.gal__conta{position:absolute;right:14px;bottom:14px;z-index:3;padding:6px 12px;
  border-radius:var(--r);background:rgba(8,9,11,.82);border:1px solid var(--ln);
  font:600 12px/1 var(--txt);color:var(--ink);backdrop-filter:blur(6px)}
.gal__selo{position:absolute;left:14px;top:14px;z-index:3;padding:7px 13px;border-radius:var(--r);
  font:700 10.5px/1.3 var(--txt);letter-spacing:.12em;text-transform:uppercase}
.gal__selo--ok{background:rgba(219,226,234,.95);color:#0b0e12}
.gal__selo--av{background:rgba(11,14,18,.9);color:#eef1f5;border:1px dashed rgba(219,226,234,.62)}
.gal__miu{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin-top:10px}
.gal__miu a{display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--ln);opacity:.62;transition:opacity .18s,border-color .18s}
.gal__miu a:hover,.gal__miu a:focus-visible{opacity:1;border-color:var(--ac)}
.gal__miu img{width:100%;height:100%;object-fit:cover;display:block}
.gal-nota--fotos{margin-top:10px}

/* coluna da direita */
.ficha{position:sticky;top:110px;display:flex;flex-direction:column;gap:14px}
@media(max-width:1000px){.ficha{position:static}}
.ficha__cx{background:var(--sur);border:var(--bd) solid var(--ln);border-radius:var(--r);padding:22px}
.ficha h1{font-size:clamp(25px,2.5vw,33px);line-height:1.08;margin-bottom:14px}
.ficha__rapido{display:flex;flex-wrap:wrap;gap:9px 18px;padding-bottom:16px;
  border-bottom:1px solid var(--ln);margin-bottom:16px}
.ficha__rapido span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--mut)}
.ficha__rapido .ico{width:17px;height:17px}
.ficha__preco b{display:block;font-family:var(--ttl);font-weight:var(--ttl-w);
  font-size:clamp(32px,3.4vw,44px);line-height:1;letter-spacing:-.02em}
.ficha__preco span{display:block;font-size:13px;color:var(--mut);margin-top:6px}
.ficha__fipe{margin-top:14px;padding:12px 14px;border:1px solid var(--ln);border-radius:var(--r);
  font-size:13px;color:var(--mut);line-height:1.6}
.ficha__fipe b{color:var(--ac-txt);font-weight:600}
.ficha .btn{width:100%;justify-content:center;margin-top:14px}
.ficha__obs{font-size:12px;color:var(--mut);text-align:center;margin-top:12px;line-height:1.6}

.provas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--ln);
  border:var(--bd) solid var(--ln);border-radius:var(--r);overflow:hidden}
.provas div{background:var(--sur);padding:16px 14px;text-align:center}
.provas div:last-child:nth-child(odd){grid-column:1/-1}
.provas .ico{width:22px;height:22px;margin:0 auto 9px;display:block}
.provas b{display:block;font:600 11px/1.3 var(--txt);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.provas span{display:block;font:600 13.5px/1.4 var(--txt);color:var(--ink);margin-top:4px}

.onde{background:var(--sur);border:var(--bd) solid var(--ln);border-radius:var(--r);
  padding:18px 20px;display:flex;gap:13px;align-items:flex-start}
.onde .ico{flex:0 0 auto;width:20px;height:20px;margin-top:2px}
.onde b{display:block;font-size:14px;line-height:1.45}
.onde span{display:block;font-size:13px;color:var(--mut);margin-top:3px}
.onde a{display:inline-block;margin-top:9px;font-size:12.5px;color:var(--ac-txt);
  text-decoration:underline;text-underline-offset:3px}

/* abas sem JavaScript, com radio */
.tabs{margin-top:clamp(26px,4vh,40px)}
.tabs input{position:absolute;opacity:0;width:1px;height:1px}
.tabs__rot{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--ln);scrollbar-width:none}
.tabs__rot::-webkit-scrollbar{display:none}
.tabs__rot label{flex:0 0 auto;min-height:52px;display:flex;align-items:center;padding:16px 20px;
  cursor:pointer;color:var(--mut);font:600 12px/1 var(--txt);letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent}
.tabs__rot label:hover{color:var(--ink)}
.tabs__pane{display:none;padding-top:26px}
#t1:checked~.tabs__rot label[for=t1],#t2:checked~.tabs__rot label[for=t2],
#t3:checked~.tabs__rot label[for=t3]{color:var(--ink);border-bottom-color:var(--ac)}
#t1:checked~#p1,#t2:checked~#p2,#t3:checked~#p3{display:block}
.tabs input:focus-visible~.tabs__rot label[for=t1],
.tabs input:focus-visible~.tabs__rot label[for=t2],
.tabs input:focus-visible~.tabs__rot label[for=t3]{outline:2px solid var(--ac);outline-offset:-2px}

.especs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--ln);border:var(--bd) solid var(--ln);border-radius:var(--r);overflow:hidden}
.especs>div{background:var(--sur);padding:16px 18px;display:grid;
  grid-template-columns:auto 1fr;gap:3px 12px;align-items:center}
.especs>div>.ico{grid-row:1/3;align-self:center}
.especs .ico{flex:0 0 auto;width:20px;height:20px}
.especs dt{font:600 10px/1 var(--txt);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.especs dd{margin:0;font:600 14.5px/1.3 var(--txt);margin-top:5px}
.opc{display:flex;flex-wrap:wrap;gap:8px}
.opc li{list-style:none;font:500 13px/1 var(--txt);color:var(--mut);
  border:1px solid var(--ln);border-radius:var(--r);padding:9px 13px}
.laudo p{max-width:70ch;color:var(--mut);font-size:14.5px;line-height:1.75;margin-bottom:14px}
.laudo p b{color:var(--ink)}
.voltar{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(30px,5vh,48px);
  font-size:13px;color:var(--ac-txt);text-decoration:underline;text-underline-offset:4px}

/* ── páginas vivas ─────────────────────────────────────── */
/* ═══════════════════ PÁGINAS VIVAS: ESTOQUE E CARRO ═══════════════════ */
/* padding-block, não `padding`: `padding: X 0 Y` zeraria a folga lateral que a
   classe .w dá, e o título encostaria na borda da tela. */
.pg{padding-block:clamp(28px,4vw,56px) clamp(48px,6vw,88px)}
/* o site não tinha nenhuma destas duas — as páginas vivas precisam das duas */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pula{position:absolute;left:-9999px;top:0;z-index:50;padding:12px 18px;
  background:var(--ac);color:var(--ac-ink);text-decoration:none;border-radius:0 0 var(--r) 0;
  font:600 12px/1 var(--txt)}
.pula:focus{left:0}
.migalha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 0 22px;
  font-size:12.5px;color:var(--mut)}
.migalha a{color:var(--mut);text-decoration:none}
.migalha a:hover{color:var(--ac-txt);text-decoration:underline;text-underline-offset:3px}
.migalha span[aria-current]{color:var(--ink)}
.migalha i{font-style:normal;opacity:.5}
.pg__cab{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;
  justify-content:space-between;margin-bottom:clamp(20px,2.4vw,32px)}
.pg__cab h1{font-family:var(--ttl);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(32px,5vw,54px);line-height:1;margin:0}
.pg__cab p{color:var(--mut);margin:10px 0 0;font-size:14.5px}
.pg__cab b{color:var(--ink)}

/* ── barra de filtros ─────────────────────────────────────────────────── */
.fl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;
  margin-bottom:clamp(18px,2vw,28px)}
.fl__c{position:relative}
.fl__c label{position:absolute;left:14px;top:9px;font:600 9.5px/1 var(--txt);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);pointer-events:none}
.fl select{width:100%;min-height:62px;padding:24px 38px 9px 13px;appearance:none;
  -webkit-appearance:none;border:1px solid var(--ln);border-radius:var(--r);
  background:var(--sur);color:var(--ink);font:400 14.5px/1.2 var(--txt);cursor:pointer}
.fl select:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.fl__c::after{content:"";position:absolute;right:15px;top:calc(50% + 4px);width:8px;height:8px;
  border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);
  transform:translateY(-50%) rotate(45deg);pointer-events:none}
.fl__b{display:flex;align-items:stretch}
.fl__b button{width:100%;min-height:62px;border:1px solid var(--ln);border-radius:var(--r);
  background:transparent;color:var(--mut);font:600 11px/1 var(--txt);letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer}
.fl__b button:hover{border-color:var(--ac);color:var(--ink)}
.fl__b button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.res{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin-bottom:16px;font-size:13.5px;color:var(--mut)}

/* ── grade de cartões ─────────────────────────────────────────────────── */
.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));
  gap:clamp(14px,1.6vw,22px)}
.vc{display:flex;flex-direction:column;background:var(--sur);border:1px solid var(--ln);
  border-radius:var(--r);overflow:hidden;transition:border-color .18s ease,transform .18s ease}
.vc:hover{border-color:var(--ac);transform:translateY(-2px)}
.vc__f{position:relative;aspect-ratio:4/3;background:#0a0c0f;overflow:hidden}
.vc__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vc__vazia{width:100%;height:100%;display:grid;place-content:center;color:var(--mut);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.vc__selo{position:absolute;left:12px;top:12px;z-index:2;padding:6px 11px;border-radius:var(--r);
  font:700 9.5px/1.3 var(--txt);letter-spacing:.13em;text-transform:uppercase;
  background:var(--ac);color:var(--ac-ink)}
.vc__selo--res{background:rgba(11,14,18,.92);color:#eef1f5;border:1px solid var(--ln)}
.vc__selo--vendido{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);width:115%;padding:10px 0;text-align:center;border-radius:0;background:#b42318;color:#fff;box-shadow:0 3px 12px #0008;font-size:12px;letter-spacing:.2em}
.cr__tira--vendido{position:relative}.cr__vendido{position:absolute;left:50%;top:50%;z-index:3;width:115%;padding:10px 0;transform:translate(-50%,-50%) rotate(-12deg);background:#b42318;color:#fff;text-align:center;font:700 14px/1 var(--txt);letter-spacing:.2em;text-transform:uppercase;box-shadow:0 3px 12px #0008;pointer-events:none}
.vc__c{display:flex;flex-direction:column;gap:10px;padding:16px 16px 18px;flex:1}
.vc__m{font:600 10px/1 var(--txt);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);margin:0}
.vc h3{font-family:var(--ttl);font-weight:600;font-size:19px;line-height:1.15;margin:0;
  letter-spacing:-.01em}
.vc h3 i{font-style:normal;display:block;font-family:var(--txt);font-weight:400;
  font-size:13.5px;color:var(--mut);margin-top:4px;letter-spacing:0}
.vc__l{display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12.5px;color:var(--mut)}
/* opcionais: sempre ABAIXO da foto, na largura do cartão — nunca numa coluna ao lado */
.vc__opc{display:flex;flex-wrap:wrap;gap:6px}
.vc__opc span{font-size:10.5px;line-height:1;padding:6px 9px;border-radius:var(--r);
  border:1px solid var(--ln);color:var(--mut)}
.vc__opc span.mais{border-style:dashed}
.vc__hist{font-size:11.5px;display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--r);padding:5px 9px;width:fit-content}
.vc__hist--ok{color:#7ee0a8;border:1px solid rgba(126,224,168,.35)}
.vc__hist--al{color:#f2c879;border:1px dashed rgba(242,200,121,.45)}
.vc__p{margin-top:auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vc__p b{font-family:var(--ttl);font-weight:600;font-size:25px;letter-spacing:-.01em}
.vc__p s{color:var(--mut);font-size:12px}
.vc__sim{font-size:12px;color:var(--mut);margin:-4px 0 0}
.vc__sim a{color:var(--ac-txt);text-decoration:none;border-bottom:1px solid rgba(219,226,234,.35)}
.vc__sim a:hover{border-bottom-color:var(--ac)}
.vc__a{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.vc__a a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:12px 10px;
  border-radius:var(--r);font:600 10.5px/1 var(--txt);letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;text-align:center}
.vc__a .ver{border:1px solid var(--ln);color:var(--ink)}
.vc__a .ver:hover{border-color:var(--ac)}
.vc__a .zap{background:var(--ac);color:var(--ac-ink)}
.vc__a .zap:hover{filter:brightness(1.08)}
.vc__a a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ── estados ──────────────────────────────────────────────────────────── */
.est{border:1px dashed var(--ln);border-radius:var(--r);padding:clamp(32px,5vw,64px) 24px;
  text-align:center;color:var(--mut)}
.est h2{font-family:var(--ttl);font-weight:600;font-size:22px;color:var(--ink);margin:0 0 10px}
.est p{margin:0 auto;max-width:46ch;line-height:1.65;font-size:14.5px}
.est .btn{margin-top:20px}
.esq{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));
  gap:clamp(14px,1.6vw,22px)}
.esq div{border:1px solid var(--ln);border-radius:var(--r);height:412px;
  background:linear-gradient(100deg,var(--sur) 30%,rgba(255,255,255,.04) 50%,var(--sur) 70%);
  background-size:280% 100%;animation:esq 1.3s linear infinite}
@keyframes esq{from{background-position:180% 0}to{background-position:-80% 0}}
@media(prefers-reduced-motion:reduce){.esq div{animation:none}}

/* ── página do carro ──────────────────────────────────────────────────── */
.cr{display:grid;gap:clamp(22px,3vw,40px)}
.cr__topo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  gap:clamp(20px,2.4vw,34px);align-items:start}
@media(max-width:940px){.cr__topo{grid-template-columns:minmax(0,1fr)}}
.cr__g{border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;background:var(--sur)}
.cr__tira{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none}
.cr__tira::-webkit-scrollbar{display:none}
.cr__tira>figure{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;margin:0;position:relative;overflow:hidden}
.cr__tira img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.cr__miu{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px;margin-top:10px}
.cr__miu button{padding:0;border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;background:none;cursor:pointer;position:relative}
.cr__miu button[aria-current="true"]{border-color:var(--ac)}
.cr__miu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* lightbox: clique na foto abre em tamanho grande, some sem JavaScript */
.lb{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;
  background:rgba(6,7,9,.94);padding:5vh 4vw}
.lb.aberta{display:flex}
.lb__img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;
  border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb__fechar,.lb__seta{position:absolute;background:rgba(14,16,20,.7);border:1px solid rgba(255,255,255,.22);
  color:#fff;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:0}
.lb__fechar{top:18px;right:18px}
.lb__fechar svg,.lb__seta svg{width:20px;height:20px}
.lb__seta{top:50%;transform:translateY(-50%)}
.lb__seta--ant{left:14px}.lb__seta--prox{right:14px}
.lb__conta{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(14,16,20,.7);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:20px;padding:6px 14px;font:600 12.5px/1 var(--txt)}
@media(max-width:600px){.lb__seta{width:38px;height:38px}.lb__fechar{width:38px;height:38px}}
.cr__lado{border:1px solid var(--ln);border-radius:var(--r);padding:clamp(18px,2vw,26px);
  background:var(--sur);position:sticky;top:18px}
@media(max-width:940px){.cr__lado{position:static}}
.cr__lado h1{font-family:var(--ttl);font-weight:600;font-size:clamp(24px,3vw,32px);
  line-height:1.1;margin:0;letter-spacing:-.02em}
.cr__lado .v{color:var(--mut);font-size:14.5px;margin:6px 0 16px}
.cr__ficha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px}
.cr__ficha div{border:1px solid var(--ln);border-radius:var(--r);padding:10px 12px}
.cr__ficha dt{font:600 9.5px/1 var(--txt);letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);margin:0 0 6px}
.cr__ficha dd{margin:0;font-size:14px}
.cr__preco b{font-family:var(--ttl);font-weight:600;font-size:clamp(30px,4vw,40px);
  letter-spacing:-.02em;display:block;line-height:1}
.cr__preco small{color:var(--mut);font-size:12.5px;display:block;margin-top:6px}
.cr__preco s{color:var(--mut);font-size:13px}
.cr__zap{display:flex;align-items:center;justify-content:center;min-height:56px;margin-top:16px;
  border-radius:var(--r);background:var(--ac);color:var(--ac-ink);text-decoration:none;
  font:700 12px/1 var(--txt);letter-spacing:.14em;text-transform:uppercase}
.cr__zap:hover{filter:brightness(1.08)}
.cr__zap:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

/* o bloco de opcionais fica ABAIXO da foto e ocupa a largura da galeria */
.cr__abaixo{display:grid;gap:clamp(16px,2vw,24px)}
.bx{border:1px solid var(--ln);border-radius:var(--r);padding:clamp(18px,2.2vw,28px);background:var(--sur)}
.bx>h2{font-family:var(--ttl);font-weight:600;font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
.bx>p.sub{color:var(--mut);font-size:13.5px;margin:0 0 18px}
.og{margin-bottom:18px}
.og:last-child{margin-bottom:0}
.og__t{font:600 9.5px/1 var(--txt);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);margin:0 0 9px}
.ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:620px){.ol{grid-template-columns:1fr}.cr__ficha{grid-template-columns:1fr}}
.ol li{list-style:none;display:flex;align-items:center;gap:10px;min-height:46px;
  padding:10px 13px;border:1px solid var(--ln);border-radius:var(--r);font-size:13.5px}
.ol svg{flex:0 0 17px;color:var(--ac-txt)}
.nota{color:var(--mut);font-size:12px;margin:16px 0 0;line-height:1.6}

/* as fotos do estoque vêm todas do mesmo lugar agora, e são 4:3 */
[data-bloco="est"] .est__foto{aspect-ratio:4/3}

/* ── assinatura da Bendi ────────────────────────────────── *//* `a.selo-bendi` e não só `.selo-bendi`: rodapé de site costuma ter uma regra
   como `.rodape a{text-decoration:underline}`, e o selo não é um link de texto
   — é uma assinatura. Empata na especificidade e ganha por vir depois. */
a.selo-bendi{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:inherit}
/* Nada de `opacity` para parecer discreto: opacidade rebaixa o contraste do
   texto e derruba o AA. O selo herda a cor do rodapé, que já foi medida, e a
   discrição vem do tamanho. O aviso de que é clicável aparece no hover. */
a.selo-bendi:hover .selo-bendi__txt,
a.selo-bendi:focus-visible .selo-bendi__txt{text-decoration:underline;text-underline-offset:3px}
a.selo-bendi:focus-visible{outline:2px solid #ff4d00;outline-offset:4px;border-radius:3px}
.selo-bendi__marca{flex:none;display:block;overflow:visible}
.selo-bendi__b{fill:currentColor}
.selo-bendi__ponto{fill:#ff4d00}
.selo-bendi__txt{font-size:.94em;line-height:1;white-space:nowrap}
.selo-bendi__txt b{font-weight:600;letter-spacing:.01em}
.selo-bendi__txt{transition:none}