/* ============================================================================
 * catalog.css — Catálogo de Peças VW (Reparadores) · design system VW
 * Tudo escopado em #page-catalogo p/ não vazar para o resto do site.
 * ========================================================================== */
#page-catalogo{ --c-blue:#001E50; --c-blue2:#003087; --c-accent:#0040C5; --c-cyan:#00B0F0;
  --c-ink:#0a1730; --c-muted:#5b6b86; --c-line:#e6eaf1; --c-bg:#f4f6fa; --c-card:#fff;
  --c-radius:14px; --c-radius-sm:10px; --c-shadow:0 2px 14px rgba(0,30,80,.07);
  --c-shadow-lg:0 18px 50px rgba(0,30,80,.16);
  --br-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23009C3B'/%3E%3Cpath d='M10 1.5 18.5 7 10 12.5 1.5 7Z' fill='%23FFDF00'/%3E%3Ccircle cx='10' cy='7' r='2.5' fill='%23002776'/%3E%3C/svg%3E");
  background:var(--c-bg); }
#page-catalogo *{ box-sizing:border-box; }
.cat{ font-family:'VWText','VWHead','Helvetica Neue',Arial,sans-serif; color:var(--c-ink); min-height:100%; }
.cat .vh{ font-family:'VWHead','Helvetica Neue',Arial,sans-serif; }
.cat button{ font-family:inherit; cursor:pointer; }
.cat a{ color:inherit; text-decoration:none; }

/* ---- Top bar (sticky) ---- */
.cat-bar{ position:sticky; top:0; z-index:30; background:var(--c-blue); color:#fff;
  display:flex; align-items:center; gap:16px; padding:12px clamp(16px,4vw,40px); box-shadow:0 2px 18px rgba(0,0,0,.25); }
.cat-bar__brand{ display:flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none; }
.cat-bar__brand svg{ width:36px; height:36px; flex-shrink:0; display:block; }
.cat-bar__name{ font-family:'VWHead','Helvetica Neue',Arial,sans-serif; font-weight:800; font-size:1.05rem; color:#fff; letter-spacing:.02em; line-height:1.1; }
.cat-bar__tag{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-cyan); border-left:1px solid rgba(255,255,255,.28); padding-left:12px; }
@media(max-width:520px){ .cat-bar__tag{ display:none; } }
.cat-bar__spring{ flex:1; }
.cat-bar__quick{ flex:1; max-width:420px; position:relative; }
.cat-bar__quick input{ width:100%; height:40px; border:0; border-radius:999px; padding:0 42px 0 16px;
  background:rgba(255,255,255,.14); color:#fff; font-size:.92rem; outline:none; transition:background .2s; }
.cat-bar__quick input::placeholder{ color:rgba(255,255,255,.7); }
.cat-bar__quick input:focus{ background:rgba(255,255,255,.22); }
.cat-bar__quick svg{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; opacity:.8; }
.cat-bar__close{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff;
  border-radius:999px; padding:9px 16px; font-weight:700; font-size:.82rem; display:inline-flex; align-items:center; gap:7px; transition:background .2s,transform .2s; white-space:nowrap; }
.cat-bar__close:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
@media(max-width:760px){ .cat-bar__quick{ display:none; } }

/* ---- Layout ---- */
.cat-wrap{ max-width:1200px; margin:0 auto; padding:clamp(20px,3.5vw,40px) clamp(16px,4vw,40px) 80px; }

/* ---- Eyebrow ---- */
.cat-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-accent); margin:0 0 12px; }
.cat-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--c-cyan); box-shadow:0 0 0 0 rgba(0,176,240,.5); animation:catPulse 1.8s ease-out infinite; }
@keyframes catPulse{ 0%{box-shadow:0 0 0 0 rgba(0,176,240,.55)} 70%{box-shadow:0 0 0 8px rgba(0,176,240,0)} 100%{box-shadow:0 0 0 0 rgba(0,176,240,0)} }

/* ---- Hero / primeira dobra (full-bleed cinematográfico) ---- */
.cat-fold{ position:relative; width:100%; min-height:clamp(400px,50vw,560px); display:flex; align-items:center; overflow:hidden; padding:56px 0 108px; isolation:isolate; background:var(--c-blue); }
.cat-fold__bg{ position:absolute; inset:0; background-image:url('/assets/img/130a1015381f646c.jpg'); background-size:cover; background-position:center 30%; transform:scale(1.08); opacity:0; animation:catFoldBg 1.6s cubic-bezier(.16,.7,.2,1) forwards; will-change:transform,opacity; }
@keyframes catFoldBg{ to{ transform:scale(1); opacity:1; } }
.cat-fold__overlay{ position:absolute; inset:0; background:linear-gradient(102deg, rgba(0,9,30,.95) 0%, rgba(0,19,56,.88) 30%, rgba(0,30,80,.56) 62%, rgba(0,18,50,.30) 100%); }
.cat-fold__overlay::after{ content:''; position:absolute; inset:0; background:radial-gradient(125% 95% at 80% 48%, transparent 40%, rgba(0,7,24,.58) 100%); }
.cat-fold__inner{ position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.cat-fold__copy{ max-width:660px; }
.cat-fold .cat-eyebrow{ color:rgba(255,255,255,.82); margin-bottom:16px; animation:catUp .7s ease .25s both; }
.cat-fold__title{ font-family:'VWHead','Helvetica Neue',Arial,sans-serif; font-weight:800; font-size:clamp(2.1rem,5.2vw,3.5rem); line-height:1.03; letter-spacing:-.025em; color:#fff; margin:0 0 14px; text-shadow:0 2px 30px rgba(0,0,0,.38); text-wrap:balance; animation:catUp .8s cubic-bezier(.2,.7,.2,1) .38s both; }
.cat-fold__title em{ font-style:normal; color:var(--c-cyan); }
.cat-fold__sub{ font-family:'VWText','VWHead',sans-serif; font-weight:300; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.55; color:rgba(255,255,255,.84); max-width:540px; margin:0; animation:catUp .8s ease .52s both; }
@keyframes catUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* card de busca sobreposto à dobra */
.cat-fold__below{ position:relative; z-index:2; padding-top:0 !important; }
.cat-fold__below .cat-search{ max-width:1000px; margin:clamp(-96px,-6vw,-60px) auto 0; border:1px solid rgba(0,150,235,.28); box-shadow:0 16px 40px rgba(0,18,54,.15); animation:catUp .8s cubic-bezier(.2,.7,.2,1) .66s both; }

@media(prefers-reduced-motion:reduce){
  .cat-eyebrow .dot{ animation:none; }
  .cat-fold__bg{ animation:none; opacity:1; transform:none; }
  .cat-fold .cat-eyebrow, .cat-fold__title, .cat-fold__sub, .cat-fold__below .cat-search{ animation:none; }
}
@media(max-width:760px){
  .cat-fold{ min-height:330px; padding:36px 0 78px; }
  .cat-fold__below .cat-search{ margin-top:-44px; }
}

/* ---- Search card + tabs ---- */
.cat-search{ background:var(--c-card); border:1px solid rgba(0,140,230,.22); border-radius:var(--c-radius); box-shadow:0 10px 30px rgba(0,30,80,.10); overflow:hidden; }
.cat-tabs{ display:flex; gap:2px; overflow-x:auto; border-bottom:1px solid var(--c-line); scrollbar-width:none; }
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-tab{ flex:1 0 auto; background:transparent; border:0; padding:16px 18px; font-weight:700; font-size:.84rem;
  letter-spacing:.02em; color:var(--c-muted); white-space:nowrap; border-bottom:3px solid transparent; transition:color .18s,border-color .18s; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.cat-tab svg{ width:17px; height:17px; }
.cat-tab:hover{ color:var(--c-blue); }
.cat-tab.is-active{ color:var(--c-blue); border-bottom-color:var(--c-accent); }
.cat-panel{ padding:clamp(18px,2.6vw,28px); display:none; }
.cat-panel.is-active{ display:block; animation:catFade .25s ease; }
@keyframes catFade{ from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* form bits */
.cat-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.cat-field{ flex:1 1 200px; min-width:0; }
.cat-field label{ display:block; font-size:.74rem; font-weight:700; color:var(--c-muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px; }
.cat-input, .cat-select{ width:100%; height:48px; border:1.5px solid var(--c-line); border-radius:var(--c-radius-sm);
  padding:0 14px; font-size:.95rem; color:var(--c-ink); background:#fff; outline:none; transition:border-color .18s,box-shadow .18s; }
.cat-input:focus, .cat-select:focus{ border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(0,64,197,.12); }
.cat-select:disabled{ background:#f3f5f9; color:#9aa7bd; cursor:not-allowed; }
.cat-help{ font-size:.78rem; color:var(--c-muted); margin:10px 2px 0; }

/* plate (Mercosul) */
.cat-plate{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.cat-plate__hint{ margin:0; font-family:'VWHead','Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-accent); display:inline-flex; align-items:center; gap:8px; }
.cat-plate__hint::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--c-cyan); box-shadow:0 0 0 0 rgba(0,176,240,.5); animation:catPulse 1.8s ease-out infinite; }
@media(prefers-reduced-motion:reduce){ .cat-plate__hint::before{ animation:none; } }
.cat-plate__box{ width:min(360px,100%); border-radius:12px; overflow:hidden; border:3px solid #1a1a1a; box-shadow:0 6px 22px rgba(0,0,0,.18); background:#fff; }
.cat-plate__top{ background:#0a3bbf; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; padding:5px; font-size:.7rem; font-weight:700; letter-spacing:.28em; }
.cat-plate__top .flag{ width:19px; height:13px; border-radius:2px; background:var(--br-flag) center/cover no-repeat; }
.cat-plate__field{ position:relative; }
.cat-plate input{ width:100%; border:0; text-align:center; font-family:'VWHead',Arial,sans-serif; font-weight:800;
  font-size:clamp(2rem,7vw,2.8rem); letter-spacing:.06em; text-transform:uppercase; color:#111; padding:10px 8px; outline:none; background:transparent; position:relative; z-index:1; }
/* animação de digitação (demo) dentro da placa */
.cat-plate__demo{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2;
  font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:clamp(2rem,7vw,2.8rem); letter-spacing:.06em; }
.cat-plate__demo.is-hidden{ display:none; }
.cat-plate__chars{ display:inline-flex; }
.cat-plate__chars .ch{ color:#aeb6c2; display:inline-block; }
.cat-plate__chars .ch--new{ animation:catCh .26s cubic-bezier(.2,.85,.3,1.25); }
@keyframes catCh{ from{ opacity:0; transform:translateY(-6px) scale(.55); } to{ opacity:1; transform:none; } }
.cat-plate__caret{ width:4px; height:.82em; margin-left:4px; border-radius:2px; background:var(--c-accent); box-shadow:0 0 10px rgba(0,64,197,.35); animation:catCaret 1.05s steps(1) infinite; }
@keyframes catCaret{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
@media(prefers-reduced-motion:reduce){ .cat-plate__caret{ animation:none; } .cat-plate__chars .ch--new{ animation:none; } }

/* code-type chips */
.cat-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.cat-chip{ border:1.5px solid var(--c-line); background:#fff; color:var(--c-muted); border-radius:999px; padding:7px 14px; font-size:.8rem; font-weight:700; transition:all .15s; }
.cat-chip.is-on{ border-color:var(--c-accent); background:rgba(0,64,197,.08); color:var(--c-blue); }

/* actions */
.cat-actions{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.cat-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 28px; border-radius:999px; font-weight:700; font-size:.92rem; border:2px solid transparent; transition:transform .18s,background .18s,box-shadow .18s; }
.cat-btn svg{ width:18px; height:18px; }
.cat-btn--primary{ background:var(--c-blue); color:#fff; box-shadow:0 6px 18px rgba(0,30,80,.22); }
.cat-btn--primary:hover{ background:var(--c-blue2); transform:translateY(-2px); }
.cat-btn--ghost{ background:#fff; color:var(--c-blue); border-color:var(--c-line); }
.cat-btn--ghost:hover{ border-color:var(--c-accent); color:var(--c-accent); }

/* autocomplete */
.cat-ac{ position:relative; }
.cat-ac__list{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; background:#fff; border:1px solid var(--c-line); border-radius:var(--c-radius-sm); box-shadow:var(--c-shadow-lg); max-height:320px; overflow:auto; display:none; }
.cat-ac__list.is-open{ display:block; }
.cat-ac__item{ width:100%; padding:9px 12px; cursor:pointer; display:flex; align-items:center; gap:12px; border:0; border-bottom:1px solid #f1f3f8; background:none; text-align:left; font:inherit; }
.cat-ac__item:hover, .cat-ac__item.is-active{ background:rgba(0,64,197,.06); }
.cat-ac__thumb{ flex:none; width:46px; height:46px; border-radius:8px; background:#fff; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; padding:5px; overflow:hidden; }
.cat-ac__thumb img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cat-ac__thumb svg{ width:22px; height:22px; color:#c4ccda; }
.cat-ac__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cat-ac__name{ font-size:.92rem; font-weight:700; color:var(--c-ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-ac__code{ font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:.8rem; color:var(--c-blue); line-height:1.2; }
.cat-ac__txt.is-code .cat-ac__code{ order:1; font-size:.96rem; }
.cat-ac__txt.is-code .cat-ac__name{ order:2; font-size:.78rem; font-weight:500; color:var(--c-muted); }
.cat-ac__hl{ background:rgba(0,176,240,.22); color:var(--c-blue); font-weight:800; border-radius:3px; padding:0 1px; }
.cat-ac__sys{ flex:none; max-width:36%; font-size:.72rem; color:var(--c-muted); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-ac__all{ width:100%; display:flex; align-items:center; gap:9px; padding:11px 14px; border:0; border-top:1px solid var(--c-line); background:var(--c-bg); cursor:pointer; font:inherit; font-size:.84rem; font-weight:600; color:var(--c-accent); text-align:left; }
.cat-ac__all svg{ width:16px; height:16px; flex:none; }
.cat-ac__all b{ color:var(--c-blue); }
.cat-ac__all:hover, .cat-ac__all.is-active{ background:rgba(0,64,197,.08); }
.cat-ac__state{ padding:15px 14px; color:var(--c-muted); font-size:.84rem; display:flex; align-items:center; gap:9px; }
.cat-ac__spin{ width:16px; height:16px; flex:none; border:2px solid var(--c-line); border-top-color:var(--c-accent); border-radius:50%; animation:catSpin .8s linear infinite; }

/* ---- Linhas de produto (tiles) ---- */
.cat-section-title{ display:flex; align-items:center; justify-content:space-between; margin:38px 2px 16px; }
.cat-section-title h2{ font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:1.15rem; color:var(--c-blue); margin:0; letter-spacing:-.01em; }
/* setas do carrossel */
.cat-carr-nav{ display:flex; gap:8px; }
.cat-carr-btn{ width:42px; height:42px; border-radius:50%; border:1.5px solid var(--c-line); background:#fff; color:var(--c-blue); font-size:1.25rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s; }
.cat-carr-btn:hover{ background:var(--c-blue); color:#fff; border-color:var(--c-blue); transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,30,80,.24); }
.cat-carr-btn:disabled{ opacity:.32; cursor:default; }
.cat-carr-btn:disabled:hover{ background:#fff; color:var(--c-blue); border-color:var(--c-line); transform:none; box-shadow:none; }
@media(max-width:600px){ .cat-carr-nav{ display:none; } }

/* carrossel — scroll-snap horizontal */
.cat-carousel{ position:relative; margin:0 -6px; }
.cat-tiles{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scroll-padding-left:6px; padding:18px 6px 34px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.cat-tiles::-webkit-scrollbar{ display:none; }

/* CARD — Faixa Azul: card claro sólido + faixa inferior azul VW com texto branco e detalhe ciano */
.cat-tile{ flex:0 0 224px; scroll-snap-align:start; position:relative; display:flex; flex-direction:column; text-align:left; border-radius:18px; overflow:hidden; cursor:pointer;
  background:var(--c-card); border:1px solid var(--c-line); box-shadow:0 6px 20px rgba(0,30,80,.10);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease; }
@media(max-width:600px){ .cat-tile{ flex:0 0 80%; } }
.cat-tile:hover{ transform:translateY(-7px); box-shadow:0 24px 50px rgba(0,18,54,.22); border-color:transparent; }
.cat-tile:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }

/* mídia clara (estúdio): a peça flutua, fundo branco some via mix-blend */
.cat-tile__media{ flex:0 0 auto; position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:22px; background:radial-gradient(112% 96% at 50% 22%, #ffffff 0%, #e9eef6 100%); border-bottom:1px solid var(--c-line); overflow:hidden; }
.cat-tile__media::after{ content:''; position:absolute; left:50%; bottom:14%; width:54%; height:9px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(0,18,52,.20), transparent 70%); filter:blur(2px); opacity:0; transition:opacity .3s ease; }
.cat-tile:hover .cat-tile__media::after{ opacity:1; }
.cat-tile__media img{ max-width:82%; max-height:82%; object-fit:contain; mix-blend-mode:multiply; filter:drop-shadow(0 14px 18px rgba(0,22,66,.2)); transition:transform .42s cubic-bezier(.2,.7,.2,1); }
.cat-tile:hover .cat-tile__media img{ transform:scale(1.08) translateY(-3px); }
.cat-tile__sk{ width:66%; height:56%; border-radius:12px; background:linear-gradient(90deg,#eef1f6 25%,#e3e8f0 37%,#eef1f6 63%); background-size:400% 100%; animation:catShimmer 1.3s ease infinite; }
.cat-tile__ph{ color:#c2cbdb; } .cat-tile__ph svg{ width:48px; height:48px; }

/* faixa inferior AZUL VW (sólida) + detalhe ciano */
.cat-tile__body{ flex:1 1 auto; position:relative; padding:14px 16px 16px 22px; background:linear-gradient(155deg,#012c72 0%, var(--c-blue) 70%, #001440 100%); display:flex; flex-direction:column; gap:5px; min-height:80px; }
.cat-tile__body::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; background:var(--c-cyan); border-radius:0 3px 3px 0; }
.cat-tile__name{ font-family:'VWHead','Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:.97rem; color:#fff; line-height:1.22; letter-spacing:-.01em; }
.cat-tile__count{ font-size:.78rem; color:rgba(255,255,255,.72); font-weight:600; display:flex; align-items:center; }
.cat-tile__count .arw{ margin-left:auto; color:var(--c-cyan); font-weight:800; opacity:0; transform:translateX(-5px); transition:opacity .2s ease, transform .2s ease; }
.cat-tile:hover .cat-tile__count .arw{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .cat-tile, .cat-tile__media img, .cat-tile__count .arw, .cat-tile__media::after{ transition:none; } .cat-tile__sk{ animation:none; } .cat-tiles{ scroll-behavior:auto; } }

/* ---- Seção convidativa "Fique por dentro" ---- */
.cat-invite{ margin-top:clamp(36px,5vw,58px); }
.cat-invite__head{ text-align:center; max-width:680px; margin:0 auto clamp(22px,3vw,32px); }
/* O sobretítulo é um <p>: sem isto, a regra ".cat-invite__head p" (cinza, fino) venceria. */
.cat-invite__head .cat-eyebrow{ justify-content:center; margin:0 0 12px; font-family:'VWHead','Helvetica Neue',Arial,sans-serif; font-weight:700; font-size:.74rem; line-height:1.2; color:var(--c-accent); }
.cat-invite__head h2{ font-family:'VWHead','Helvetica Neue',Arial,sans-serif; font-weight:800; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--c-blue); letter-spacing:-.02em; margin:0 0 10px; }
.cat-invite__head p{ color:var(--c-muted); font-weight:300; font-size:clamp(.95rem,1.4vw,1.08rem); line-height:1.55; margin:0; }

/* ---- Footer do site dentro do catálogo ---- */
#page-catalogo .footer{ margin-top:clamp(40px,6vw,72px); }
#page-catalogo .footer-logo svg{ width:36px; height:36px; display:block; }

/* ---- Results layout ---- */
.cat-results{ display:grid; grid-template-columns:262px 1fr; gap:26px; align-items:start; }
.cat-crumb{ font-size:.86rem; color:var(--c-muted); margin:0 0 16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cat-crumb a{ color:var(--c-accent); font-weight:600; cursor:pointer; }
.cat-crumb .sep{ opacity:.5; }
.cat-back{ display:inline-flex; align-items:center; gap:6px; color:var(--c-accent); font-weight:700; font-size:.9rem; background:none; border:0; padding:0; margin:0 0 12px; cursor:pointer; white-space:nowrap; transition:gap .2s ease; }
.cat-back svg{ width:18px; height:18px; flex:0 0 auto; }
.cat-back:hover{ gap:10px; }

/* cabeçalho dos resultados — faixa azul VW c/ a imagem da oficina ao fundo (sutil), preenche o topo */
.cat-rhead{ position:relative; width:100%; overflow:hidden; background:linear-gradient(120deg,#001233 0%,#012c72 100%); padding:clamp(20px,3vw,30px) 0 clamp(22px,3.2vw,34px); }
.cat-rhead__bg{ position:absolute; inset:0; background-image:url('/assets/img/130a1015381f646c.jpg'); background-size:cover; background-position:center 28%; opacity:.28; pointer-events:none; }
.cat-rhead__veil{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(0,8,28,.84) 0%, rgba(0,22,64,.58) 55%, rgba(0,30,80,.42) 100%); pointer-events:none; }
.cat-rhead__inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.cat-rhead .cat-crumb a{ cursor:pointer; }
.cat-rhead .cat-crumb a:hover{ text-decoration:underline; }
.cat-rhead .cat-back{ color:rgba(255,255,255,.85); margin-bottom:12px; }
.cat-rhead .cat-back:hover{ color:#fff; }
.cat-rhead .cat-crumb{ color:rgba(255,255,255,.6); margin:0 0 10px; }
.cat-rhead .cat-crumb a{ color:var(--c-cyan); }
.cat-rhead__title{ font-family:'VWHead','Helvetica Neue',Arial,sans-serif; font-weight:800; font-size:clamp(1.5rem,3vw,2.2rem); color:#fff; letter-spacing:-.02em; line-height:1.1; margin:0 0 6px; text-shadow:0 2px 18px rgba(0,0,0,.25); }
.cat-rhead__count{ font-size:.9rem; color:rgba(255,255,255,.72); font-weight:500; } .cat-rhead__count b{ color:#fff; font-weight:800; }
.cat-results-body{ padding-top:clamp(18px,2.6vw,26px) !important; }

/* filters sidebar */
.cat-filters{ background:var(--c-card); border-radius:var(--c-radius); box-shadow:var(--c-shadow); padding:6px 0; position:sticky; top:78px; }
.cat-fgroup{ border-bottom:1px solid var(--c-line); }
.cat-fgroup:last-child{ border-bottom:0; }
.cat-fgroup__h{ width:100%; background:none; border:0; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; font-weight:700; font-size:.82rem; color:var(--c-blue); text-transform:uppercase; letter-spacing:.04em; }
.cat-fgroup__h svg{ width:16px; height:16px; transition:transform .2s; }
.cat-fgroup.is-collapsed .cat-fgroup__h svg{ transform:rotate(-90deg); }
.cat-fgroup__body{ padding:0 16px 14px; max-height:240px; overflow:auto; }
.cat-fgroup.is-collapsed .cat-fgroup__body{ display:none; }
.cat-check{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:.86rem; color:var(--c-ink); cursor:pointer; }
.cat-check input{ accent-color:var(--c-accent); width:16px; height:16px; flex:none; }
.cat-check .n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-check .c{ color:var(--c-muted); font-size:.78rem; }
.cat-clearf{ display:block; width:calc(100% - 32px); margin:12px 16px 14px; text-align:center; border:1.5px solid var(--c-line); background:#fff; color:var(--c-muted); border-radius:999px; padding:8px; font-weight:700; font-size:.82rem; }

/* results main */
.cat-rtop{ display:none; align-items:center; gap:12px; margin-bottom:14px; }
.cat-rcount{ font-size:.9rem; color:var(--c-muted); } .cat-rcount b{ color:var(--c-ink); }
.cat-sort{ height:40px; border:1.5px solid var(--c-line); border-radius:var(--c-radius-sm); padding:0 12px; font-size:.86rem; color:var(--c-ink); background:#fff; }
.cat-filtertoggle{ display:none; }

.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:18px; }

/* ===== card de produto · estilo "Blueprint Genuíno" ===== */
.cat-prod{ position:relative; display:flex; flex-direction:column; width:100%; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--c-radius); overflow:hidden; isolation:isolate; cursor:pointer; text-align:left; color:var(--c-ink); transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,border-color .28s ease; }
.cat-prod::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(var(--c-line) 1px,transparent 1px),linear-gradient(90deg,var(--c-line) 1px,transparent 1px); background-size:16px 16px; opacity:.35; -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 42%); mask-image:linear-gradient(180deg,#000 0,transparent 42%); }
.cat-prod>*{ position:relative; z-index:1; }
.cat-prod:hover,.cat-prod:focus-within{ transform:translateY(-4px); border-color:var(--c-accent); box-shadow:0 18px 40px -18px rgba(0,30,80,.45); }
.cat-prod:focus-visible{ outline:3px solid var(--c-cyan); outline-offset:2px; }

.cat-prod__meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 13px 7px; border-bottom:1px dashed var(--c-line); }
.cat-prod__brand{ display:inline-flex; align-items:center; gap:7px; font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-blue); }
.cat-prod__vw{ width:15px; height:15px; flex:none; display:inline-flex; color:var(--c-blue); }
.cat-prod__vw svg{ width:100%; height:100%; display:block; }
.cat-prod__genuine{ display:inline-flex; align-items:center; gap:4px; font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-blue2); white-space:nowrap; }
.cat-prod__genuine svg{ width:11px; height:11px; flex:none; }

.cat-prod__bay{ position:relative; background:var(--c-card); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:13px 15px; border-bottom:1px solid var(--c-line); }
.cat-prod__bay::before,.cat-prod__bay::after{ content:""; position:absolute; width:11px; height:11px; border:1.5px solid var(--c-line); pointer-events:none; }
.cat-prod__bay::before{ top:8px; left:8px; border-right:0; border-bottom:0; }
.cat-prod__bay::after{ bottom:8px; right:8px; border-left:0; border-top:0; }
.cat-prod__img{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cat-prod__img img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cat-prod__img .ph{ color:#c4ccda; }

.cat-prod__b{ padding:13px 14px 0; }
.cat-prod__pnlabel{ display:block; font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-blue2); margin-bottom:5px; }
.cat-prod__code{ display:flex; align-items:center; gap:7px; padding:6px 8px 6px 11px; border-radius:8px; background:var(--c-blue); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.cat-prod__codepn{ font-family:'VWHead','Courier New',monospace; font-weight:800; font-size:16px; letter-spacing:.04em; line-height:1.05; font-variant-numeric:tabular-nums; word-break:break-all; }
.cat-prod__copy{ flex:none; margin-left:auto; position:relative; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; transition:background .2s ease,transform .14s ease; }
.cat-prod__copy:hover{ background:rgba(255,255,255,.28); }
.cat-prod__copy:active{ transform:scale(.9); }
.cat-prod__copy:focus-visible{ outline:2px solid var(--c-cyan); outline-offset:2px; }
.cat-prod__copy svg{ width:14px; height:14px; display:block; }
.cat-prod__copy .ic-check{ display:none; }
.cat-prod__copy.is-copied{ background:var(--c-cyan); color:var(--c-blue); }
.cat-prod__copy.is-copied .ic-copy{ display:none; }
.cat-prod__copy.is-copied .ic-check{ display:block; }
.cat-prod__copytip{ position:absolute; bottom:calc(100% + 7px); right:-4px; background:var(--c-ink); color:#fff; font-family:'VWText',Arial,sans-serif; font-size:10px; font-weight:700; padding:3px 8px; border-radius:5px; white-space:nowrap; opacity:0; transform:translateY(4px); transition:opacity .2s ease,transform .2s ease; box-shadow:0 4px 12px rgba(0,18,54,.28); }
.cat-prod__copytip::after{ content:""; position:absolute; top:100%; right:11px; border:5px solid transparent; border-top-color:var(--c-ink); }
.cat-prod__copy.is-copied .cat-prod__copytip{ opacity:1; transform:none; }

.cat-prod__name{ margin:10px 0 3px; font-family:'VWHead',Arial,sans-serif; font-weight:600; font-size:13.5px; line-height:1.2; letter-spacing:-.005em; color:var(--c-ink); }
.cat-prod__app{ margin:0 0 10px; font-size:12.5px; line-height:1.4; color:var(--c-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.cat-prod__specs{ margin:0 0 11px; border-top:1px solid var(--c-line); }
.cat-prod__row{ display:flex; align-items:center; gap:8px; padding:7px 1px; border-bottom:1px solid var(--c-line); }
.cat-prod__rowic{ width:21px; height:21px; flex:none; border-radius:6px; display:flex; align-items:center; justify-content:center; background:var(--c-bg); color:var(--c-blue2); }
.cat-prod__rowic svg{ width:12px; height:12px; }
.cat-prod__rowk{ font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-muted); }
.cat-prod__rowv{ margin-left:auto; text-align:right; font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:10.5px; line-height:1.2; color:var(--c-ink); }

.cat-prod__foot{ margin-top:auto; padding:10px 14px 13px; }
.cat-prod__cta{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:10px 13px; border:0; border-radius:9px; background:var(--c-accent); color:#fff; font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:12.8px; letter-spacing:.04em; cursor:pointer; transition:background .2s ease; }
.cat-prod__cta svg{ width:14px; height:14px; flex:none; transition:transform .22s cubic-bezier(.2,.7,.3,1); }
.cat-prod:hover .cat-prod__cta{ background:var(--c-blue2); }
.cat-prod:hover .cat-prod__cta svg{ transform:translateX(4px); }
.cat-prod__cta:focus-visible{ outline:3px solid var(--c-cyan); outline-offset:2px; }

@media (max-width:300px){ .cat-prod__codepn{ font-size:14px; } .cat-prod__name{ font-size:12.5px; } .cat-prod__genuine span{ display:none; } }

/* pagination */
.cat-pages{ display:flex; gap:6px; justify-content:center; align-items:center; margin-top:30px; flex-wrap:wrap; }
.cat-page{ min-width:40px; height:40px; border:1.5px solid var(--c-line); background:#fff; border-radius:var(--c-radius-sm); font-weight:700; font-size:.86rem; color:var(--c-ink); padding:0 10px; }
.cat-page.is-on{ background:var(--c-blue); color:#fff; border-color:var(--c-blue); }
.cat-page:disabled{ opacity:.4; cursor:not-allowed; }

/* ===== Product detail (página de produto) ===== */
.cat-rhead--pd .cat-rhead__title{ font-size:clamp(1.4rem,2.6vw,2rem); }
.cat-rhead__stat{ display:inline-block; background:rgba(0,176,240,.18); border:1px solid rgba(0,176,240,.4); color:#bfe9ff; font-size:.74rem; font-weight:700; padding:1px 9px; border-radius:999px; }

.cat-pd{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--c-radius); overflow:hidden; box-shadow:var(--c-shadow); }
.cat-pd__gallery{ padding:24px; border-right:1px solid var(--c-line); }
.cat-gallery__main{ position:relative; background:#fff; border:1px solid var(--c-line); border-radius:var(--c-radius-sm); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:28px; cursor:zoom-in; overflow:hidden; }
.cat-gallery__main img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cat-gallery__main.is-zoomable img{ will-change:transform; }
@media(prefers-reduced-motion:reduce){ .cat-gallery__main img{ transition:none !important; } }
.cat-gallery__main .ph{ color:#c4ccda; }
.cat-gallery__zoom{ position:absolute; right:12px; bottom:12px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:rgba(0,30,80,.06); color:var(--c-blue); opacity:.65; transition:opacity .2s,background .2s; }
.cat-gallery__zoom svg{ width:18px; height:18px; }
.cat-gallery__main:hover .cat-gallery__zoom{ opacity:1; background:rgba(0,64,197,.12); }
.cat-thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.cat-thumb{ width:62px; height:62px; border:1.5px solid var(--c-line); border-radius:9px; background:#fff; padding:6px; cursor:pointer; transition:border-color .2s; }
.cat-thumb.is-on,.cat-thumb:hover{ border-color:var(--c-accent); }
.cat-thumb img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.cat-gallery__hint{ display:flex; align-items:center; gap:6px; margin:14px 0 0; font-size:.78rem; color:var(--c-muted); }
/* Foto da Loja Oficial — reserva quando a Fraga não tem a peça. Entra suave no lugar do ícone, sem
   mexer no layout (só opacidade: não briga com o zoom do hover). Na ficha, a origem fica indicada. */
.cat-foto-loja{ opacity:0; }
.cat-foto-loja.is-on{ opacity:1; animation:catFotoIn .4s ease; }
.cat-pd__gallery.is-loja .cat-gallery__main img{ animation:catFotoIn .4s ease; }
@keyframes catFotoIn{ from{ opacity:0; } to{ opacity:1; } }
.cat-gallery__fonte{ display:flex; align-items:center; gap:7px; margin:8px 0 0; font-size:.76rem; color:var(--c-muted); }
.cat-gallery__fonte-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--c-accent); }
@media(prefers-reduced-motion:reduce){ .cat-foto-loja.is-on,.cat-pd__gallery.is-loja .cat-gallery__main img{ animation:none; } }
.cat-gallery__hint svg{ width:14px; height:14px; }

.cat-pd__info{ padding:26px 28px; display:flex; flex-direction:column; }
.cat-pd__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.cat-pd__brand{ display:inline-flex; align-items:center; gap:8px; font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; color:var(--c-blue); }
.cat-pd__brand .cat-prod__vw{ width:20px; height:20px; }
.cat-pd__badges{ display:inline-flex; align-items:center; gap:8px; }
.cat-pd__status{ font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:#0b7a3b; background:rgba(16,140,70,.1); border:1px solid rgba(16,140,70,.28); border-radius:999px; padding:3px 9px; }
.cat-pd__info .cat-prod__genuine{ font-size:.7rem; }
.cat-pd__pnlabel{ display:block; font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-blue2); margin-bottom:6px; }
.cat-pd__code{ display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; border-radius:11px; background:var(--c-blue); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.cat-pd__codepn{ font-family:'VWHead','Courier New',monospace; font-weight:800; font-size:clamp(1.3rem,3vw,1.7rem); letter-spacing:.03em; line-height:1.05; font-variant-numeric:tabular-nums; word-break:break-all; }
.cat-pd__copy{ width:36px; height:36px; }
.cat-pd__copy svg{ width:16px; height:16px; }
.cat-pd__desc{ margin:14px 0 0; font-size:.92rem; line-height:1.5; color:var(--c-muted); }
.cat-pd__meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px; margin:18px 0 0; background:var(--c-line); border:1px solid var(--c-line); border-radius:var(--c-radius-sm); overflow:hidden; }
.cat-pd__meta>div{ background:#fff; padding:11px 14px; }
.cat-pd__meta dt{ font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); margin-bottom:3px; }
.cat-pd__meta dd{ margin:0; font-size:.86rem; font-weight:600; color:var(--c-ink); line-height:1.25; }
.cat-pd__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.cat-pd__files{ margin-top:18px; padding-top:16px; border-top:1px solid var(--c-line); }
.cat-pd__fileslbl{ display:block; font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); margin-bottom:9px; }
.cat-pd__file{ display:inline-flex; align-items:center; gap:7px; margin:0 8px 8px 0; padding:8px 13px; border:1.5px solid var(--c-line); border-radius:9px; font-size:.84rem; font-weight:600; color:var(--c-accent); text-decoration:none; }
.cat-pd__file:hover{ border-color:var(--c-accent); background:#f5f8ff; }
.cat-pd__file svg{ width:15px; height:15px; flex:none; }

.cat-btn--sm{ height:42px; padding:0 17px; font-size:.85rem; gap:8px; }
.cat-btn--sm svg{ width:16px; height:16px; flex:none; }

/* Compartilhar (ver "compartilhar a peça" no catalog.js): menu ao lado do botão no computador;
   no celular, painel que sobe da borda de baixo, com os ícones em grade. */
.cat-share{ position:relative; display:inline-flex; }
.cat-share__fundo{ display:none; }
/* fixed + left/top do JS: a ficha (.cat-pd) tem overflow:hidden e cortaria um menu absoluto */
.cat-share__painel{ position:fixed; left:0; top:0; z-index:1250; width:264px; padding:8px; border:1px solid var(--c-line); border-radius:16px;
  background:#fff; box-shadow:var(--c-shadow-lg); animation:catFade .16s ease both; }
.cat-share__painel[hidden],.cat-share__fundo[hidden]{ display:none !important; }
.cat-share__topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px 8px; }
.cat-share__tit{ margin:0; font-family:'VWHead',system-ui,sans-serif; font-weight:700; font-size:.92rem; color:var(--c-blue); }
.cat-share__fechar{ display:none; flex:none; width:36px; height:36px; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%;
  background:#f1f4f9; color:var(--c-blue); cursor:pointer; }
.cat-share__fechar svg{ width:18px; height:18px; display:block; }
.cat-share__lista{ display:flex; flex-direction:column; gap:2px; }
.cat-share__it{ display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:6px 10px; border:0; border-radius:10px; background:none;
  font:inherit; font-size:.9rem; font-weight:600; line-height:1.2; text-align:left; cursor:pointer; }
/* O CSS do site pinta todo link de azul-escuro e sublinha no hover: aqui a cor é blindada. */
.cat-share .cat-share__it,.cat-share a.cat-share__it:visited,.cat-share a.cat-share__it:hover{ color:var(--c-ink) !important; text-decoration:none !important; }
.cat-share__it:hover,.cat-share__it:focus-visible{ background:#f1f5fc; outline:none; }
.cat-share__it:focus-visible{ box-shadow:inset 0 0 0 2px var(--c-accent); }
.cat-share__ic{ flex:none; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#f4f6fa; color:var(--c-accent); }
.cat-share__ic svg{ width:18px; height:18px; display:block; }
.cat-share__it.is-ok .cat-share__ic{ background:rgba(26,158,85,.12); color:#1a9e55; }
.cat-share .cat-share__it.is-ok{ color:#1a7a4a !important; }
@keyframes catSheetUp{ from{ transform:translateY(100%); } to{ transform:none; } }
@media (max-width:640px){
  .cat-share{ flex:1 1 100%; }
  .cat-share > .cat-btn{ width:100%; }
  .cat-share__fundo{ display:block; position:fixed; inset:0; z-index:1300; background:rgba(0,18,54,.45); animation:catFade .2s ease both; }
  .cat-share__painel{ position:fixed; left:0; right:0; top:auto; bottom:0; z-index:1301; width:auto; max-height:85vh; overflow:auto;
    border-radius:20px 20px 0 0; padding:10px 12px calc(16px + env(safe-area-inset-bottom, 0px)); animation:catSheetUp .22s cubic-bezier(.2,.8,.25,1) both; }
  .cat-share__fechar{ display:inline-flex; }
  .cat-share__lista{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .cat-share__it{ flex-direction:column; justify-content:flex-start; gap:7px; min-height:86px; padding:10px 2px; font-size:.74rem; text-align:center; }
  .cat-share__ic{ width:48px; height:48px; }
  .cat-share__ic svg{ width:24px; height:24px; }
}
@media(prefers-reduced-motion:reduce){ .cat-share__painel,.cat-share__fundo{ animation:none; } }
@media print{ .cat-share__painel,.cat-share__fundo{ display:none !important; } }

.cat-pd__panel{ margin-top:24px; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--c-radius); padding:4px 22px 22px; box-shadow:var(--c-shadow); }
.cat-dtabs{ display:flex; gap:0; margin:0 0 18px; border-bottom:1px solid var(--c-line); overflow-x:auto; scrollbar-width:none; }
.cat-dtabs::-webkit-scrollbar{ display:none; }
.cat-dtab{ background:none; border:0; padding:16px 4px; margin-right:24px; font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:.92rem; color:var(--c-muted); border-bottom:3px solid transparent; white-space:nowrap; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.cat-dtab:hover{ color:var(--c-blue); }
.cat-dtab.is-active{ color:var(--c-blue); border-bottom-color:var(--c-accent); }
.cat-dtab__n{ font-size:.72rem; font-weight:800; background:var(--c-bg); color:var(--c-muted); border-radius:999px; padding:2px 8px; min-width:22px; text-align:center; }
.cat-dtab.is-active .cat-dtab__n{ background:var(--c-accent); color:#fff; }
.cat-dpane{ display:none; } .cat-dpane.is-active{ display:block; }

.cat-apptools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.cat-appsearch-wrap{ position:relative; flex:1 1 230px; display:flex; align-items:center; }
.cat-appsearch-wrap svg{ position:absolute; left:13px; width:17px; height:17px; color:var(--c-muted); pointer-events:none; }
.cat-appsearch{ width:100%; height:42px; border:1.5px solid var(--c-line); border-radius:var(--c-radius-sm); padding:0 14px 0 38px; font-size:.9rem; font-family:inherit; color:var(--c-ink); }
.cat-appsearch:focus{ outline:none; border-color:var(--c-accent); }
.cat-appsel{ height:42px; border:1.5px solid var(--c-line); border-radius:var(--c-radius-sm); padding:0 12px; font-size:.86rem; font-family:inherit; color:var(--c-ink); background:#fff; max-width:230px; cursor:pointer; }
.cat-appsel:focus{ outline:none; border-color:var(--c-accent); }
.cat-appcount{ font-size:.82rem; font-weight:700; color:var(--c-muted); margin-left:auto; white-space:nowrap; }
.cat-apptable-wrap{ max-height:460px; overflow:auto; border:1px solid var(--c-line); border-radius:var(--c-radius-sm); }
.cat-apptable{ width:100%; border-collapse:collapse; font-size:.84rem; }
.cat-apptable th{ text-align:left; background:var(--c-blue); color:#fff; padding:10px 12px; font-family:'VWHead',Arial,sans-serif; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; z-index:1; white-space:nowrap; }
.cat-apptable td{ padding:9px 12px; border-bottom:1px solid var(--c-line); vertical-align:top; }
.cat-apptable td.b{ font-weight:700; color:var(--c-blue); }
.cat-apptable td.num{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.cat-apptable td.obs{ color:var(--c-muted); }
.cat-apptable tbody tr:nth-child(even) td{ background:#fafbfe; }
.cat-apptable tbody tr:hover td{ background:#eef4ff; }
.cat-appempty{ text-align:center; color:var(--c-muted); padding:24px !important; }

.cat-specgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:6px 30px; }
.cat-specgrp__h{ font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-accent); margin:10px 0 2px; padding-bottom:7px; border-bottom:2px solid var(--c-line); }
.cat-specs{ width:100%; border-collapse:collapse; }
.cat-specs tr{ border-bottom:1px solid var(--c-line); }
.cat-specs td{ padding:10px 4px; font-size:.88rem; vertical-align:top; }
.cat-specs td.k{ color:var(--c-muted); width:52%; }
.cat-specs td.v{ font-weight:600; color:var(--c-ink); text-align:right; }
.cat-specs tr.imp td.v{ color:var(--c-accent); }
.cat-pd__codes{ margin-top:14px; }

.cat-xreftab{ width:100%; border-collapse:collapse; font-size:.88rem; max-width:560px; }
.cat-xreftab th{ text-align:left; background:var(--c-bg); color:var(--c-muted); padding:9px 12px; font-family:'VWHead',Arial,sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; }
.cat-xreftab td{ padding:10px 12px; border-bottom:1px solid var(--c-line); }
.cat-xreftab td.code{ font-family:'VWHead','Courier New',monospace; font-weight:700; color:var(--c-blue); -webkit-user-select:all; user-select:all; }

/* ---- States ---- */
.cat-state{ text-align:center; padding:70px 20px; color:var(--c-muted); }
.cat-state svg{ width:54px; height:54px; opacity:.4; margin-bottom:14px; }
.cat-state h3{ color:var(--c-ink); font-size:1.1rem; margin:0 0 6px; font-weight:700; }
.cat-spinner{ width:34px; height:34px; border:3px solid var(--c-line); border-top-color:var(--c-accent); border-radius:50%; animation:catSpin .8s linear infinite; margin:0 auto 14px; }
@keyframes catSpin{ to{ transform:rotate(360deg); } }
.cat-skel{ background:linear-gradient(90deg,#eef1f6 25%,#e3e8f0 37%,#eef1f6 63%); background-size:400% 100%; animation:catShimmer 1.3s ease infinite; border-radius:8px; }
@keyframes catShimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.cat-skelcard{ background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--c-radius); overflow:hidden; }
.cat-skelcard .a{ aspect-ratio:4/3; } .cat-skelcard .b{ height:14px; margin:13px 14px; } .cat-skelcard .c{ height:11px; margin:0 14px 16px; width:60%; }

/* lightbox */
.cat-lightbox{ position:fixed; inset:0; z-index:1200; background:rgba(2,8,23,.9); display:none; align-items:center; justify-content:center; padding:30px; }
.cat-lightbox.is-open{ display:flex; }
.cat-lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain; }
.cat-lightbox__x{ position:absolute; top:18px; right:22px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.2rem; }

/* ===== mensagem inline da placa ===== */
.cat-platemsg{ margin:14px auto 0; max-width:400px; text-align:center; font-size:.86rem; line-height:1.45; color:var(--c-muted); }
.cat-platemsg.is-err{ color:#c0392b; }

/* ===== modal "veículo identificado" (placa) ===== */
.cat-vm-wrap{ position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,12,40,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cat-vm-wrap.is-open{ display:flex; animation:catVmBd .25s ease; }
@keyframes catVmBd{ from{opacity:0} to{opacity:1} }
.cat-vm{ --catvm-pad:clamp(18px,3vw,28px); position:relative; display:flex; flex-direction:row; width:100%; max-width:600px; max-height:calc(100vh - 40px); margin:0 auto; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--c-radius); box-shadow:0 24px 60px -18px rgba(0,30,80,.34),0 4px 14px -6px rgba(0,30,80,.18); overflow:auto; font-family:'VWText',system-ui,sans-serif; color:var(--c-ink); -webkit-font-smoothing:antialiased; animation:catVmIn .4s cubic-bezier(.2,.8,.25,1); }
@keyframes catVmIn{ from{opacity:0; transform:translateY(18px) scale(.96)} to{opacity:1; transform:none} }
.cat-vm__x{ position:absolute; top:12px; right:12px; z-index:5; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--c-line); border-radius:50%; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--c-muted); cursor:pointer; transition:color .18s,border-color .18s,background .18s,transform .18s; }
.cat-vm__x:hover{ color:var(--c-blue); border-color:var(--c-accent); background:#fff; transform:rotate(90deg); }
.cat-vm__x:focus-visible{ outline:3px solid var(--c-cyan); outline-offset:2px; }
.cat-vm__x svg{ width:15px; height:15px; display:block; }
.cat-vm__stage{ position:relative; flex:0 0 48%; max-width:48%; display:flex; align-items:center; justify-content:center; padding:clamp(16px,2.4vw,24px); background:radial-gradient(120% 78% at 50% 18%,#fbfcff 0%,#eef2fa 52%,#e2e9f6 100%); border-right:1px solid var(--c-line); overflow:hidden; }
.cat-vm__stage::before{ content:""; position:absolute; top:14%; left:50%; width:116%; height:70%; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(0,176,240,.20),rgba(0,176,240,0) 72%); filter:blur(2px); pointer-events:none; }
.cat-vm__carwrap{ position:relative; z-index:2; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.cat-vm__carwrap::after{ content:""; position:absolute; bottom:4px; left:50%; width:70%; height:16px; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(0,30,80,.30),rgba(0,30,80,0) 72%); filter:blur(3px); z-index:1; }
.cat-vm__car{ display:block; width:100%; max-width:280px; height:auto; object-fit:contain; position:relative; z-index:2; filter:drop-shadow(0 16px 14px rgba(0,30,80,.30)); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.cat-vm:hover .cat-vm__car{ transform:scale(1.035); }
.cat-vm__ph{ color:#c4ccda; } .cat-vm__ph svg{ width:72px; height:72px; }
.cat-vm__body{ flex:1 1 52%; min-width:0; display:flex; flex-direction:column; gap:12px; padding:var(--catvm-pad); padding-top:clamp(20px,3vw,30px); }
.cat-vm__badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; font-family:'VWHead',system-ui,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.04em; line-height:1; color:var(--c-blue); background:linear-gradient(90deg,rgba(0,176,240,.16),rgba(0,64,197,.12)); border:1px solid rgba(0,176,240,.42); border-radius:999px; }
.cat-vm__titles{ margin-top:2px; }
.cat-vm__title{ margin:0; font-family:'VWHead',system-ui,sans-serif; font-size:clamp(20px,3.4vw,25px); font-weight:800; line-height:1.08; letter-spacing:-.01em; color:var(--c-blue); }
.cat-vm__sub{ margin:4px 0 0; font-size:13px; line-height:1.35; color:var(--c-muted); }
.cat-vm__plate{ align-self:flex-start; width:100%; max-width:188px; border:2px solid var(--c-ink); border-radius:7px; overflow:hidden; background:#fff; box-shadow:0 2px 8px -3px rgba(0,30,80,.25); }
.cat-vm__plate-top{ display:flex; align-items:center; justify-content:space-between; height:16px; padding:0 6px; background:var(--c-blue2); }
.cat-vm__plate-top span{ font-family:'VWHead',system-ui,sans-serif; font-size:8px; font-weight:700; letter-spacing:.14em; color:#fff; line-height:1; }
.cat-vm__plate-flag{ width:15px; height:10px; border-radius:1px; background:var(--br-flag) center/cover no-repeat; flex:none; }
.cat-vm__plate-num{ display:block; padding:5px 6px 6px; text-align:center; font-family:'VWHead',system-ui,monospace; font-size:clamp(20px,3.6vw,26px); font-weight:800; letter-spacing:.14em; color:var(--c-ink); line-height:1; }
.cat-vm__specs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:2px 0; background:var(--c-line); border:1px solid var(--c-line); border-radius:10px; overflow:hidden; }
.cat-vm__spec{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; background:var(--c-card); }
.cat-vm__spec dt{ font-family:'VWHead',system-ui,sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--c-muted); }
.cat-vm__spec dd{ margin:0; font-size:13px; font-weight:600; color:var(--c-ink); }
.cat-vm__spec:last-child:nth-child(odd){ grid-column:1 / -1; }
.cat-vm__cta{ margin-top:4px; display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:13px 18px; font-family:'VWHead',system-ui,sans-serif; font-size:14.5px; font-weight:700; letter-spacing:.01em; color:#fff; text-decoration:none; background:linear-gradient(180deg,var(--c-accent),var(--c-blue2)); border:0; border-radius:11px; cursor:pointer; box-shadow:0 8px 18px -8px rgba(0,64,197,.6); transition:transform .16s,box-shadow .16s,filter .16s; }
.cat-vm__cta:hover{ filter:brightness(1.06); box-shadow:0 12px 24px -8px rgba(0,64,197,.66); transform:translateY(-1px); }
.cat-vm__cta:active{ transform:translateY(0); }
.cat-vm__cta:focus-visible{ outline:3px solid var(--c-cyan); outline-offset:2px; }
.cat-vm__cta svg{ width:17px; height:17px; flex:none; transition:transform .2s; }
.cat-vm__cta:hover svg{ transform:translateX(4px); }
@media(max-width:460px){ .cat-vm{ flex-direction:column; } .cat-vm__stage{ flex:none; max-width:100%; width:100%; border-right:0; border-bottom:1px solid var(--c-line); padding:22px 16px 16px; } .cat-vm__car{ max-width:240px; } .cat-vm__body{ padding-top:var(--catvm-pad); } .cat-vm__plate{ max-width:200px; } }
@media(prefers-reduced-motion:reduce){ .cat-vm__car,.cat-vm__cta,.cat-vm__cta svg,.cat-vm__x{ transition:none; } .cat-vm:hover .cat-vm__car{ transform:none; } }

/* ===== card do veículo na página da placa ===== */
.cat-pveh{ display:flex; gap:20px; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--c-radius); padding:18px 20px; margin-bottom:20px; box-shadow:var(--c-shadow); align-items:center; }
.cat-pveh__media{ position:relative; flex:0 0 290px; height:190px; background:radial-gradient(120% 100% at 50% 0,#fff,#eef2f9); border:1px solid var(--c-line); border-radius:12px; display:flex; align-items:center; justify-content:center; padding:6px; overflow:hidden; }
.cat-pveh__media img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 16px rgba(0,20,60,.2)); }
.cat-pveh__ph{ color:#c4ccda; } .cat-pveh__ph svg{ width:54px; height:54px; }
.cat-pveh__info{ flex:1; min-width:220px; }
.cat-pveh__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.cat-pveh__eyebrow{ font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent); }
.cat-pveh__title{ font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:1.15rem; color:var(--c-blue); letter-spacing:-.01em; margin:3px 0 0; }
.cat-pveh__plate{ display:inline-flex; flex-direction:column; width:140px; border:2px solid #1a1a1a; border-radius:6px; overflow:hidden; flex:none; background:#fff; }
.cat-pveh__plate-top{ background:#0a3bbf; color:#fff; font-size:.5rem; font-weight:700; letter-spacing:.2em; text-align:center; padding:2px; display:flex; align-items:center; justify-content:center; gap:5px; }
.cat-pveh__plate-num{ text-align:center; font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:1.15rem; padding:3px; color:#111; }
.cat-pveh__specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:9px 18px; }
.cat-pveh__specs dt{ font-size:.66rem; color:var(--c-muted); text-transform:uppercase; letter-spacing:.06em; }
.cat-pveh__specs dd{ margin:0; font-weight:600; color:var(--c-ink); font-size:.9rem; }
.cat-vm__plate-top .flag, .cat-pveh__plate-top .flag{ width:17px; height:12px; border-radius:2px; flex:none; background:var(--br-flag) center/cover no-repeat; }
@media(max-width:640px){ .cat-pveh{ flex-direction:column; align-items:stretch; } .cat-pveh__media{ flex:none; width:100%; height:200px; } }
@media(max-width:480px){ .cat-vm__hero{ min-height:150px; padding:28px 20px 18px; } .cat-vm__body{ padding:18px 20px 22px; } }
@media(prefers-reduced-motion:reduce){ .cat-vm-wrap.is-open, .cat-vm{ animation:none; } }

/* ---- Responsive ---- */
@media(max-width:880px){
  .cat-pd{ grid-template-columns:1fr; }
  .cat-pd__gallery{ border-right:0; border-bottom:1px solid var(--c-line); }
}
@media(max-width:560px){
  .cat-pd__info{ padding:22px 18px; }
  .cat-pd__actions .cat-btn{ flex:1 1 100%; }
  .cat-apptools{ gap:8px; }
  .cat-appsel{ max-width:none; flex:1 1 100%; }
  .cat-appcount{ margin-left:0; }
}
/* impressão / salvar em PDF da ficha do produto */
@media print{
  body * { visibility:hidden !important; }
  #page-catalogo, #page-catalogo *{ visibility:visible !important; }
  #page-catalogo{ position:absolute !important; left:0; top:0; width:100%; }
  .cat-bar, .cat-rhead, .cat-pd__actions, .cat-pd__files, .cat-dtabs, #catRelated, .cat-section-title, .footer, .cat-gallery__hint, .cat-gallery__zoom, .cat-prod__copy{ display:none !important; }
  .cat-dpane{ display:block !important; }
  .cat-pd, .cat-pd__panel{ box-shadow:none !important; border-color:#ccc !important; break-inside:avoid; }
  .cat-apptable-wrap{ max-height:none !important; overflow:visible !important; }
  .cat-pd__panel{ margin-top:18px; }
}
@media(max-width:760px){
  .cat-results{ grid-template-columns:1fr; }
  .cat-rtop{ display:flex; }
  .cat-filtertoggle{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:999px; border:1.5px solid var(--c-line); background:#fff; color:var(--c-blue); font-weight:700; font-size:.85rem; }
  .cat-filters{ position:fixed; inset:0; z-index:1100; border-radius:0; overflow:auto; transform:translateX(-100%); transition:transform .25s; padding-top:14px; }
  .cat-filters.is-open{ transform:none; }
  .cat-filters__close{ display:flex; }
  .cat-tab{ flex:0 0 auto; padding:14px 14px; font-size:.8rem; }
  .cat-tab span{ display:none; } /* só ícone? não — manter texto */
}
@media(max-width:760px){ .cat-tab span{ display:inline; } }
.cat-filters__close{ display:none; width:calc(100% - 32px); margin:6px 16px 10px; }

/* ===== Otto Reparador (assistente de IA) ===== */
.otto{ position:fixed; right:0; bottom:0; z-index:1150; font-family:'VWText','VWHead',Arial,sans-serif; }
.otto-fab{ position:fixed; right:24px; bottom:24px; width:66px; height:66px; border-radius:50%; border:0; padding:0; background:linear-gradient(135deg,#001233,var(--c-blue)); box-shadow:0 10px 30px rgba(0,18,54,.4); cursor:pointer; overflow:hidden; display:flex; align-items:center; justify-content:center; animation:ottoGlow 3.2s ease-in-out infinite; transition:transform .2s; }
.otto-fab:hover{ transform:scale(1.06); }
.otto-fab img{ width:100%; height:100%; object-fit:cover; }
@keyframes ottoGlow{ 0%,100%{ box-shadow:0 10px 30px rgba(0,18,54,.4),0 0 0 0 rgba(0,176,240,.45); } 50%{ box-shadow:0 10px 30px rgba(0,18,54,.4),0 0 0 14px rgba(0,176,240,0); } }
.otto.is-open .otto-fab{ display:none; }
.otto-greet{ position:fixed; right:24px; bottom:102px; max-width:250px; background:#fff; color:var(--c-ink); border:1px solid var(--c-line); border-radius:16px 16px 4px 16px; box-shadow:0 12px 34px rgba(0,18,54,.2); padding:13px 30px 13px 15px; font-size:.86rem; line-height:1.45; cursor:pointer; opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; transition:opacity .3s,transform .3s; }
.otto-greet.is-show{ opacity:1; transform:none; pointer-events:auto; }
.otto-greet b{ color:var(--c-blue); }
.otto-greet__x{ position:absolute; top:5px; right:7px; border:0; background:none; color:var(--c-muted); font-size:1.1rem; line-height:1; cursor:pointer; width:20px; height:20px; }
.otto.is-open .otto-greet{ display:none; }
.otto-win{ position:fixed; right:24px; bottom:24px; width:384px; max-width:calc(100vw - 32px); height:min(580px,calc(100vh - 48px)); background:var(--c-card); border-radius:18px; box-shadow:0 30px 80px rgba(0,12,40,.45); display:none; flex-direction:column; overflow:hidden; }
.otto.is-open .otto-win{ display:flex; animation:ottoIn .28s cubic-bezier(.2,.8,.25,1); }
@keyframes ottoIn{ from{ opacity:0; transform:translateY(20px) scale(.97); } to{ opacity:1; transform:none; } }
.otto-hd{ display:flex; align-items:center; gap:11px; padding:13px 14px; background:linear-gradient(120deg,#001233,var(--c-blue) 70%,#012c72); color:#fff; }
.otto-hd__av{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none; background:#001233; border:1.5px solid rgba(255,255,255,.25); }
.otto-hd__av img{ width:100%; height:100%; object-fit:cover; }
.otto-hd__info{ display:flex; flex-direction:column; line-height:1.2; flex:1; min-width:0; }
.otto-hd__info b{ font-family:'VWHead',Arial,sans-serif; font-weight:800; font-size:1rem; }
.otto-hd__st{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:rgba(255,255,255,.8); }
.otto-hd__st i{ width:7px; height:7px; border-radius:50%; background:#2fd07a; animation:ottoPulse 2s ease-out infinite; }
@keyframes ottoPulse{ 0%{box-shadow:0 0 0 0 rgba(47,208,122,.5)} 70%,100%{box-shadow:0 0 0 6px rgba(47,208,122,0)} }
.otto-hd__x{ border:0; background:rgba(255,255,255,.14); color:#fff; width:32px; height:32px; border-radius:50%; font-size:1.3rem; line-height:1; cursor:pointer; flex:none; transition:background .2s,transform .2s; }
.otto-hd__x:hover{ background:rgba(255,255,255,.28); transform:rotate(90deg); }
.otto-msgs{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; background:var(--c-bg); }
.otto-b{ max-width:84%; padding:10px 13px; font-size:.88rem; line-height:1.45; border-radius:14px; word-wrap:break-word; overflow-wrap:anywhere; animation:ottoBub .2s ease; }
@keyframes ottoBub{ from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;} }
.otto-b--otto{ align-self:flex-start; background:#fff; color:var(--c-ink); border:1px solid var(--c-line); border-bottom-left-radius:5px; }
.otto-b--otto b{ color:var(--c-blue); }
.otto-b--user{ align-self:flex-end; background:linear-gradient(135deg,var(--c-accent),var(--c-blue)); color:#fff; border-bottom-right-radius:5px; }
.otto-err{ color:#c0392b; }
.otto-typing{ display:flex; gap:4px; align-items:center; }
.otto-typing span{ width:7px; height:7px; border-radius:50%; background:var(--c-muted); opacity:.5; animation:ottoDot 1.2s infinite; }
.otto-typing span:nth-child(2){ animation-delay:.15s; } .otto-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ottoDot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
.otto-card{ align-self:stretch; background:#fff; border:1px solid var(--c-line); border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,30,80,.06); animation:ottoBub .25s ease; }
.otto-card__top{ display:flex; gap:11px; padding:12px 12px 0; }
.otto-card__img{ flex:none; width:64px; height:64px; border:1px solid var(--c-line); border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; padding:6px; }
.otto-card__img img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.otto-card__h{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.otto-card__sys{ font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-accent); }
.otto-card__name{ font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:.92rem; color:var(--c-ink); line-height:1.2; }
.otto-card__code{ font-family:'VWHead','Courier New',monospace; font-weight:800; font-size:.82rem; color:var(--c-blue); }
.otto-card__desc{ margin:9px 12px 0; font-size:.78rem; line-height:1.4; color:var(--c-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.otto-card__models{ margin:9px 12px 0; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.otto-card__lbl{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--c-muted); margin-right:2px; }
.otto-card__chip{ font-size:.72rem; font-weight:600; color:var(--c-blue); background:var(--c-bg); border:1px solid var(--c-line); border-radius:999px; padding:2px 9px; }
.otto-card__acts{ display:flex; gap:8px; padding:12px; }
.otto-card__buy{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 12px; border-radius:9px; background:var(--c-accent); color:#fff; font-family:'VWHead',Arial,sans-serif; font-weight:700; font-size:.82rem; text-decoration:none; transition:background .2s; }
.otto-card__buy:hover{ background:var(--c-blue2); }
.otto-card__buy svg{ width:14px; height:14px; flex:none; }
.otto-card__view{ flex:none; padding:9px 12px; border-radius:9px; border:1.5px solid var(--c-line); background:#fff; color:var(--c-blue); font-weight:700; font-size:.82rem; cursor:pointer; }
.otto-card__view:hover{ border-color:var(--c-accent); color:var(--c-accent); }
.otto-in{ display:flex; gap:8px; align-items:flex-end; padding:11px 12px; border-top:1px solid var(--c-line); background:#fff; }
.otto-in textarea{ flex:1; resize:none; border:1.5px solid var(--c-line); border-radius:12px; padding:9px 12px; font-family:inherit; font-size:16px; line-height:1.35; max-height:110px; color:var(--c-ink); }
.otto-in textarea:focus{ outline:none; border-color:var(--c-accent); }
.otto-in__send{ flex:none; width:40px; height:40px; border-radius:50%; border:0; background:var(--c-accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .15s; }
.otto-in__send:hover{ background:var(--c-blue2); } .otto-in__send:active{ transform:scale(.92); }
.otto-in__send svg{ width:18px; height:18px; }
@media(max-width:520px){ .otto-win{ right:8px; bottom:8px; width:calc(100vw - 16px); height:calc(100dvh - 16px); } .otto-fab{ right:16px; bottom:16px; } .otto-greet{ right:16px; bottom:90px; } }
@media(prefers-reduced-motion:reduce){ .otto-fab,.otto-hd__st i,.otto-win,.otto-b,.otto-card,.otto-typing span{ animation:none; } }

/* ===== placa de outra marca: convite para as ofertas VW =====
   Mesma família visual do modal "Veículo identificado". VWHead só no peso 700 (o 800 do mestre é
   SVG, que Chrome/Edge/Firefox ignoram); VWText só existe no 300 — por isso o texto corrido usa
   tinta mais escura, para o traço fino manter contraste. Centralizado em qualquer tela. */
.cat-vm-wrap--nvw{ overscroll-behavior:contain; }
.cat-nvw{ position:relative; width:100%; max-width:460px; max-height:calc(100vh - 40px); margin:0 auto; overflow:auto; outline:0; text-align:center;
  background:var(--c-card); border-radius:20px; box-shadow:0 30px 70px -20px rgba(0,20,60,.5),0 6px 18px -8px rgba(0,20,60,.25);
  font-family:'VWText',system-ui,sans-serif; color:var(--c-ink); -webkit-font-smoothing:antialiased; animation:catNvwIn .42s cubic-bezier(.2,.8,.25,1); }
/* O diálogo recebe o foco só para o leitor de tela anunciar o título — sem anel no cartão inteiro;
   os botões dentro dele têm o próprio anel. */
.cat-nvw:focus,.cat-nvw:focus-visible{ outline:0; }

.cat-nvw__hero{ position:relative; height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(95% 130% at 50% 0%,#0b47c9 0%,#0a2f86 40%,#001e50 80%); }
.cat-nvw__hero::before{ content:""; position:absolute; inset:-40% -20%; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.09) 50%,transparent 60%); pointer-events:none; }
.cat-nvw__hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:44px; background:linear-gradient(0deg,rgba(0,20,60,.38),transparent); pointer-events:none; }
.cat-nvw__ring{ position:absolute; top:50%; left:50%; width:116px; height:116px; margin:-58px 0 0 -58px; border-radius:50%;
  border:1px solid rgba(0,176,240,.5); box-shadow:inset 0 0 34px rgba(0,176,240,.28),0 0 30px rgba(0,176,240,.18); animation:catNvwPulse 3.4s ease-in-out infinite; }
.cat-nvw__ring--2{ width:178px; height:178px; margin:-89px 0 0 -89px; border-color:rgba(255,255,255,.13); box-shadow:none; animation-delay:.7s; }
.cat-nvw__logo{ position:relative; z-index:2; display:block; width:70px; height:70px; filter:drop-shadow(0 6px 18px rgba(0,176,240,.5)); }
.cat-nvw__logo svg{ display:block; width:100%; height:100%; }

.cat-nvw__body{ padding:0 clamp(20px,5vw,34px) clamp(22px,4vw,30px); }
.cat-nvw__plate{ position:relative; z-index:3; margin:-27px auto 0; max-width:176px; box-shadow:0 12px 26px -10px rgba(0,20,60,.55); }
.cat-nvw__title{ margin:18px auto 0; max-width:360px; font-family:'VWHead',system-ui,sans-serif; font-weight:700; font-size:clamp(21px,5.2vw,26px);
  line-height:1.12; letter-spacing:-.012em; color:var(--c-blue); text-wrap:balance; }
.cat-nvw__lead{ margin:10px auto 0; max-width:370px; font-size:15.5px; line-height:1.55; color:#34425a; text-wrap:pretty; }
.cat-nvw__cta{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:14px 22px;
  font-family:'VWHead',system-ui,sans-serif; font-size:15.5px; font-weight:700; letter-spacing:.01em; color:#fff; text-decoration:none;
  background:linear-gradient(180deg,var(--c-accent),var(--c-blue2)); border-radius:999px; box-shadow:0 12px 26px -10px rgba(0,64,197,.72);
  transition:transform .16s,box-shadow .16s,filter .16s; }
/* O CSS do site pinta todo link de azul-escuro e vence por especificidade: aqui o branco é blindado. */
.cat-nvw a.cat-nvw__cta,.cat-nvw a.cat-nvw__cta:visited,.cat-nvw a.cat-nvw__cta:hover,.cat-nvw a.cat-nvw__cta:focus{ color:#fff !important; text-decoration:none !important; }
.cat-nvw__cta:hover{ filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 16px 30px -10px rgba(0,64,197,.78); }
.cat-nvw__cta:active{ transform:translateY(0); }
.cat-nvw__cta:focus-visible{ outline:3px solid var(--c-cyan); outline-offset:3px; }
.cat-nvw__cta svg{ width:18px; height:18px; flex:none; transition:transform .2s; }
.cat-nvw__cta:hover svg{ transform:translate(2px,-2px); }
.cat-nvw__note{ margin:10px 0 0; font-size:12.5px; line-height:1.4; color:#4a5870; text-wrap:balance; }
.cat-nvw__note b{ font-weight:600; color:var(--c-ink); }
.cat-nvw__alt{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--c-line); font-size:14px; color:#4a5870; }
.cat-nvw__fix{ margin-left:2px; padding:6px 4px; border:0; background:none; font:inherit; font-weight:700; color:var(--c-accent); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.cat-nvw__fix:hover{ color:var(--c-blue); }
.cat-nvw__fix:focus-visible{ outline:3px solid var(--c-cyan); outline-offset:2px; border-radius:4px; }
.cat-nvw__x{ position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0;
  border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; cursor:pointer; transition:background .18s,transform .18s; }
.cat-nvw__x:hover{ background:rgba(255,255,255,.24); transform:rotate(90deg); }
.cat-nvw__x:focus-visible{ outline:3px solid var(--c-cyan); outline-offset:2px; }
.cat-nvw__x svg{ width:16px; height:16px; display:block; }

@keyframes catNvwIn{ from{ opacity:0; transform:translateY(14px) scale(.975); } to{ opacity:1; transform:none; } }
@keyframes catNvwPulse{ 0%,100%{ transform:scale(.94); opacity:.55; } 50%{ transform:scale(1.06); opacity:1; } }

/* Celular: o mesmo cartão centralizado do desktop (decisão de 29/09), com respiro nas bordas. */
@media (max-width:560px){
  .cat-vm-wrap--nvw{ padding:16px; }
  .cat-nvw{ max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); border-radius:18px; }
  .cat-nvw__hero{ height:134px; }
}
@media (prefers-reduced-motion:reduce){ .cat-nvw,.cat-nvw__ring,.cat-nvw__cta,.cat-nvw__cta svg,.cat-nvw__x{ animation:none; transition:none; } }

/* ===== peça sem foto: ícone da linha + legenda =====
   Antes, o ícone de "sem foto" tinha só cor e nenhum tamanho: o SVG encolhia a zero dentro do flex
   e o card parecia quebrado. Aqui tudo tem tamanho explícito. ~97% das peças caem aqui (29/09). */
.cat-ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; }
.cat-ph__ic{ display:flex; align-items:center; justify-content:center; flex:none; width:clamp(66px,38%,100px); aspect-ratio:1/1; border-radius:50%;
  color:#35558a; background:radial-gradient(circle at 50% 28%,#fff 0%,#eef3fa 60%,#e3eaf5 100%);
  box-shadow:inset 0 0 0 1px #dde5f1,0 10px 20px -14px rgba(0,30,80,.45); transition:color .2s; }
.cat-ph__ic svg{ display:block; width:52%; height:52%; }
.cat-ph__tx{ font-family:'VWHead',system-ui,sans-serif; font-weight:700; font-size:10px; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:#8290a8; }
.cat-prod:hover .cat-ph__ic{ color:var(--c-accent); }
.cat-gallery__main--sem-foto{ cursor:default; }
.cat-gallery__main .cat-ph{ gap:14px; }
.cat-gallery__main .cat-ph__ic{ width:clamp(96px,36%,156px); }
.cat-gallery__main .cat-ph__tx{ font-size:11px; }
.cat-tile__media .cat-ph__ic{ width:clamp(54px,46%,82px); }
.cat-ac__thumb svg{ color:#6f82a3; }
@media (prefers-reduced-motion:reduce){ .cat-ph__ic{ transition:none; } }

/* ===== comprar na Loja VW (página do produto) =====
   Mesmo conceito do botão "Loja" do site (feixe de luz azul VW → ciano → branco girando pela borda),
   invertido para fundo claro: face em degradê azul VW, carrinho em círculo branco. É a ÚNICA ação
   principal da página — a ficha CSV virou secundária. */
.cat-buy{ margin-top:20px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"cta trust"; align-items:center; gap:14px 24px;
  padding:18px 20px; border:1px solid #dbe5f4; border-radius:18px; background:radial-gradient(120% 150% at 0% 0%,#edf3ff 0%,#f6f9fe 55%,#fff 100%); }
.cat-buy__cta{ grid-area:cta; position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:12px; min-height:62px; padding:8px 20px 8px 8px;
  border-radius:999px; color:#fff; text-decoration:none; transition:transform .18s ease; animation:catBuyPulse 2.8s ease-in-out infinite; }
.cat-buy__cta::before{ content:""; position:absolute; z-index:-2; left:50%; top:50%; width:220%; aspect-ratio:1/1; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,#0b2a66 0 42%,rgba(0,64,197,.7) 54%,#0040C5 62%,#00B0F0 71%,#fff 77%,#00B0F0 83%,#0040C5 90%,#0b2a66 100%);
  animation:catBuySweep 3.6s linear infinite; }
.cat-buy__cta::after{ content:""; position:absolute; z-index:-1; inset:2.5px; border-radius:999px;
  background:linear-gradient(115deg,#0b4fe0 0%,#0040C5 36%,#00318f 70%,#001e50 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -12px 20px rgba(0,10,40,.28); }
/* O CSS do site pinta todo link de azul-escuro e vence por especificidade: aqui o branco é blindado. */
.cat-buy a.cat-buy__cta,.cat-buy a.cat-buy__cta:visited,.cat-buy a.cat-buy__cta:hover,.cat-buy a.cat-buy__cta:focus{ color:#fff !important; text-decoration:none !important; }
.cat-buy__ic{ flex:none; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:var(--c-accent);
  box-shadow:0 6px 14px -6px rgba(0,10,40,.6); transition:transform .22s cubic-bezier(.2,.8,.25,1); }
.cat-buy__ic svg{ width:22px; height:22px; display:block; }
.cat-buy__t{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.cat-buy__t b{ font-family:'VWHead',system-ui,sans-serif; font-weight:700; font-size:17px; letter-spacing:.005em; }
.cat-buy__t small{ margin-top:3px; font-size:12.5px; color:rgba(255,255,255,.84); }
.cat-buy__go{ margin-left:auto; padding-left:12px; display:inline-flex; }
.cat-buy__go svg{ width:18px; height:18px; display:block; transition:transform .2s; }
.cat-buy__cta:hover{ transform:translateY(-2px); animation-duration:1.6s; }
.cat-buy__cta:hover::before{ animation-duration:1.4s; }
.cat-buy__cta:hover .cat-buy__ic{ transform:scale(1.07) rotate(-6deg); }
.cat-buy__cta:hover .cat-buy__go svg{ transform:translate(2px,-2px); }
.cat-buy__cta:active{ transform:translateY(0); }
.cat-buy__cta:focus-visible{ outline:3px solid var(--c-cyan); outline-offset:3px; }
.cat-buy__trust{ grid-area:trust; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.cat-buy__trust li{ display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.3; color:#26344d; }
.cat-buy__ok{ flex:none; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,64,197,.1); color:var(--c-accent); }
.cat-buy__ok svg{ width:12px; height:12px; display:block; }
/* Estados da loja, conferidos ao vivo (ver "comprar na Loja Oficial" no catalog.js). O peso visual
   segue a promessa: o degradê animado é só de "Comprar"; Avise-me e Concessionária são contornados. */
.cat-buy.is-consultando,.cat-buy.is-conferindo,.cat-buy.cat-buy--disponivel,.cat-buy.cat-buy--esgotado,.cat-buy.cat-buy--fora{ grid-template-areas:"status status" "cta trust"; }
.cat-buy__status{ grid-area:status; margin:0; display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; line-height:1.3; color:#26344d; }
.cat-buy__stxt{ min-width:0; }   /* texto corrido: no celular quebra como frase, não em colunas */
.cat-buy__qtd{ font-weight:500; color:#51607a; white-space:nowrap; }
.cat-buy__dot{ flex:none; width:9px; height:9px; border-radius:50%; background:#8d9bb3; box-shadow:0 0 0 4px rgba(141,155,179,.16); }
.cat-buy__status--ok .cat-buy__dot{ background:#1a9e55; box-shadow:0 0 0 4px rgba(26,158,85,.16); }
.cat-buy__status--aviso .cat-buy__dot{ background:#d4640a; box-shadow:0 0 0 4px rgba(212,100,10,.16); }
.cat-buy__spin{ flex:none; width:14px; height:14px; border-radius:50%; border:2px solid rgba(0,64,197,.22); border-top-color:var(--c-accent); animation:catSpin .8s linear infinite; }
/* A loja passou do prazo: "Procurar" já funciona e a linha avisa que a resposta ainda pode vir.
   Quando ela chega, o bloco se corrige e o novo estado entra com um leve fade. */
.cat-buy__status--espera{ font-weight:500; color:#51607a; }
.cat-buy.is-corrigido .cat-buy__status,.cat-buy.is-corrigido .cat-buy__trust,.cat-buy.is-corrigido .cat-buy__alt,.cat-buy.is-corrigido .cat-buy__par{ animation:catFade .45s ease both; }
@media(prefers-reduced-motion:reduce){
  .cat-buy.is-corrigido .cat-buy__status,.cat-buy.is-corrigido .cat-buy__trust,.cat-buy.is-corrigido .cat-buy__alt,.cat-buy.is-corrigido .cat-buy__par{ animation:none; }
}
.cat-buy__cta--sk{ width:258px; max-width:100%; animation:catShimmer 1.3s linear infinite;
  background:linear-gradient(90deg,#e6edf8 25%,#f4f7fd 50%,#e6edf8 75%); background-size:200% 100%; }
.cat-buy__cta--sk::before,.cat-buy__cta--sk::after{ display:none; }
.cat-buy__trust--sk li{ height:12px; width:62%; border-radius:6px; background:#e6edf8; }
.cat-buy__trust--sk li:first-child{ width:84%; }
.cat-buy__cta--sec{ animation:none; background:#fff; border:2px solid var(--c-blue); padding:6px 18px 6px 6px; box-shadow:0 14px 28px -20px rgba(0,30,80,.6); }
.cat-buy__cta--sec::before,.cat-buy__cta--sec::after{ display:none; }
.cat-buy a.cat-buy__cta.cat-buy__cta--sec,.cat-buy a.cat-buy__cta.cat-buy__cta--sec:visited,.cat-buy a.cat-buy__cta.cat-buy__cta--sec:hover,.cat-buy a.cat-buy__cta.cat-buy__cta--sec:focus{ color:var(--c-blue) !important; }
.cat-buy__cta--sec .cat-buy__ic{ background:rgba(0,64,197,.09); box-shadow:none; }
.cat-buy__cta--sec .cat-buy__t small{ color:#51607a; }
.cat-buy__cta--sec:hover{ background:#f2f6ff; }
.cat-buy__trust li > span:last-child{ min-width:0; }
/* Negrito com a fonte de título: a de texto não tem peso bold (o <b> sairia igual ao resto). */
.cat-buy b{ font-family:'VWHead',system-ui,sans-serif; font-weight:700; }
.cat-buy__alt{ grid-column:1 / -1; margin:0; padding-top:12px; border-top:1px dashed #d3ddee; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  font-size:13.5px; color:#51607a; }
.cat-buy a.cat-buy__link,.cat-buy a.cat-buy__link:visited{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--c-accent) !important; text-decoration:none !important; }
.cat-buy a.cat-buy__link:hover span:first-of-type{ text-decoration:underline; }
.cat-buy__link svg{ flex:none; width:18px; height:18px; }
/* Só para leitor de tela (a classe "vh" do catálogo é a FONTE de título, não esconde nada). */
.cat-sr{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; }
.cat-buy__par{ grid-column:1 / -1; margin:2px 0 0; padding:11px 14px; border:1px solid #f1d8b6; border-radius:12px; background:#fff8ee;
  font-size:13px; line-height:1.5; color:#4a3a22; }
.cat-buy__par a,.cat-buy__par a:visited{ font-weight:700; color:#8a4b00 !important; white-space:nowrap; }
@keyframes catBuySweep{ to{ transform:translate(-50%,-50%) rotate(1turn); } }
@keyframes catBuyPulse{
  0%,100%{ box-shadow:0 16px 32px -14px rgba(0,64,197,.75),0 0 12px rgba(0,176,240,.22); }
  50%{ box-shadow:0 16px 32px -14px rgba(0,64,197,.75),0 0 26px rgba(0,176,240,.58); } }

/* Celular: botão na largura toda; e a barra fixa que sobe quando o botão sai da tela. */
.cat-buybar,.cat-buybar-espaco{ display:none; }
@media (max-width:640px){
  .cat-buy{ grid-template-columns:1fr; grid-template-areas:"cta" "trust"; padding:16px; }
  .cat-buy.is-consultando,.cat-buy.is-conferindo,.cat-buy.cat-buy--disponivel,.cat-buy.cat-buy--esgotado,.cat-buy.cat-buy--fora{ grid-template-areas:"status" "cta" "trust"; }
  .cat-buy__cta{ width:100%; }
  /* No celular o botão inteiro é o alvo: a seta sai e o título ganha espaço (cabe numa linha). */
  .cat-buy__go{ display:none; }
  .cat-buy__t b{ font-size:16px; }
  .cat-buy__qtd{ display:block; margin-top:1px; }   /* contagem na linha de baixo, sem o "·" */
  .cat-buy__sep{ display:none; }
  .cat-buybar-espaco{ display:block; height:78px; }
  .cat-buybar{ position:fixed; left:0; right:0; bottom:0; z-index:1200; display:flex; align-items:center; gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:linear-gradient(115deg,#0a3aa6 0%,#001e50 100%);
    box-shadow:0 -12px 30px -12px rgba(0,10,40,.6); transform:translateY(115%); transition:transform .3s cubic-bezier(.2,.8,.25,1); }
  .cat-buybar.is-on{ transform:none; }
  .cat-buybar__info{ min-width:0; display:flex; flex-direction:column; line-height:1.2; color:#fff; }
  .cat-buybar__info small{ font-family:'VWHead',system-ui,sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.72); }
  .cat-buybar__info b{ font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cat-buybar a.cat-buybar__cta{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; background:#fff;
    color:var(--c-blue) !important; text-decoration:none !important; font-family:'VWHead',system-ui,sans-serif; font-weight:700; font-size:15px; box-shadow:0 0 0 3px rgba(0,176,240,.4); }
  .cat-buybar__cta svg{ width:20px; height:20px; color:var(--c-accent); }
}
@media (prefers-reduced-motion:reduce){
  .cat-buy__cta,.cat-buy__cta::before,.cat-buy__spin{ animation:none; }
  .cat-buy__cta::before{ background:linear-gradient(90deg,#0040C5,#00B0F0); }
  .cat-buy__cta,.cat-buy__ic,.cat-buy__go svg,.cat-buybar{ transition:none; }
}
@media print{ .cat-buy,.cat-buybar,.cat-buybar-espaco{ display:none !important; } }
/* Telas estreitas (320–380 px): botão mais compacto para "Comprar peça" caber numa linha. */
@media (max-width:380px){
  .cat-buy{ padding:14px 12px; }
  .cat-buy__cta{ gap:10px; min-height:56px; padding:6px 14px 6px 6px; }
  .cat-buy__ic{ width:40px; height:40px; }
  .cat-buy__ic svg{ width:20px; height:20px; }
  .cat-buy__t{ min-width:0; }
  .cat-buy__t b{ font-size:16px; white-space:nowrap; }
  /* Títulos longos dos botões contornados ("Encontrar concessionária") quebram em vez de cortar. */
  .cat-buy__cta--sec .cat-buy__t b{ white-space:normal; line-height:1.12; }
  .cat-buy__t small{ font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cat-buy__go{ display:none; }
}
/* Grade Linha/Família/Aplicações em 2 colunas (celular): o item que sobra sozinho ocupa a linha,
   em vez de deixar uma célula cinza vazia ao lado. */
@media (max-width:640px){ .cat-pd__meta > div:last-child:nth-child(odd){ grid-column:1 / -1; } }

/* ===== menu do site com o Catálogo (29/09) =====
   Regra GLOBAL (o menu é do site, não do catálogo). Com o item Catálogo são 9 itens e, medido em
   1.336 e 1.506 px de largura, a busca saía da tela. No menu horizontal (≥1061 px) "Notícias" sai;
   no sanduíche do celular (≤1060 px) continua — lá sobra espaço. Notícias segue no rodapé e na home. */
@media (min-width:1061px){ nav.nav .nav-item--so-mobile{ display:none !important; } }
footer .js-cat-open-rodape{ cursor:pointer; }

#otto{display:none!important}