/* =========================================================
   Movel Caminhões — Modelos & Comparador
   ========================================================= */

/* ---------- Page title band ---------- */
.page-band{ background:var(--vw-navy); color:#fff; position:relative; overflow:hidden;
  padding-block:clamp(36px,6vw,72px); }
.page-band::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(70% 140% at 85% 0%, rgba(0,177,235,.22), transparent 55%); }
.page-band .wrap{ position:relative; }
.crumbs{ font-size:.85rem; color:#9fb0cc; display:flex; gap:.5em; align-items:center; }
.crumbs a:hover{ color:#fff; }
.page-band h1{ color:#fff; font-size:clamp(2.2rem,5vw,3.6rem); margin-top:.7rem; }
.page-band p{ color:#aebbd2; margin-top:.9rem; max-width:620px; font-size:1.06rem; }

/* ---------- Family tabs ---------- */
.tabs-rail{ position:sticky; top:var(--header-h); z-index:40; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); }
.tabs{ display:flex; gap:.4rem; overflow-x:auto; padding-block:.7rem; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ flex:0 0 auto; padding:.65em 1.2em; border-radius:999px; font-family:var(--display);
  font-weight:600; font-size:.95rem; color:var(--slate); white-space:nowrap; transition:.18s; }
.tab:hover{ background:var(--mist); color:var(--ink); }
.tab.active{ background:var(--vw-navy); color:#fff; }
.tab .count{ opacity:.6; font-size:.85em; margin-left:.3em; }

/* ---------- Spec cards grid ---------- */
.models-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  padding-block:clamp(36px,5vw,56px); }
.spec-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:.22s; position:relative; }
.spec-card.is-selected{ border-color:var(--vw-blue); box-shadow:0 0 0 2px var(--vw-blue), var(--sh-md); }
.spec-card:hover{ box-shadow:var(--sh-md); }
.spec-head{ padding:1.3rem 1.4rem .4rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.spec-head h3{ font-size:1.4rem; }
.spec-head .fam-pill{ font-family:var(--display); font-weight:700; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--vw-blue); }
.spec-media{ aspect-ratio:16/10; background:linear-gradient(160deg,#fafcff,#eaeff7); position:relative; }
.spec-media image-slot{ width:100%; height:100%; }
.spec-rows{ padding:.4rem 1.4rem 1.2rem; }
.spec-row{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0;
  border-bottom:1px solid var(--line); }
.spec-row:last-child{ border-bottom:none; }
.spec-row .k{ font-size:.82rem; color:var(--slate-2); }
.spec-row .v{ font-size:.92rem; font-weight:600; text-align:right; font-family:var(--display); }
.spec-foot{ margin-top:auto; padding:1rem 1.4rem 1.4rem; display:grid; gap:.6rem; }
.spec-actions{ display:flex; gap:.6rem; }
.spec-actions .btn{ flex:1; padding:.85em 1em; font-size:.9rem; }

/* compare toggle */
.cmp-toggle{ display:flex; align-items:center; gap:.55em; cursor:pointer; user-select:none;
  font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--slate);
  padding:.55em .9em; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--line-2);
  transition:.16s; justify-content:center; }
.cmp-toggle:hover{ box-shadow:inset 0 0 0 1.5px var(--vw-blue); color:var(--vw-blue); }
.cmp-box{ width:18px; height:18px; border-radius:5px; box-shadow:inset 0 0 0 1.5px var(--line-2);
  display:grid; place-items:center; transition:.16s; flex:0 0 auto; }
.cmp-box svg{ width:12px; height:12px; color:#fff; opacity:0; transform:scale(.5); transition:.16s; }
.spec-card.is-selected .cmp-toggle{ box-shadow:inset 0 0 0 1.5px var(--vw-blue); color:var(--vw-blue); }
.spec-card.is-selected .cmp-box{ background:var(--vw-blue); box-shadow:inset 0 0 0 1.5px var(--vw-blue); }
.spec-card.is-selected .cmp-box svg{ opacity:1; transform:scale(1); }

/* ---------- Compare tray (sticky bottom) ---------- */
.cmp-tray{ position:fixed; left:50%; bottom:0; transform:translate(-50%,130%);
  width:min(960px, calc(100% - 24px)); z-index:75; transition:transform .35s cubic-bezier(.4,0,.2,1);
  margin-bottom:14px; }
.cmp-tray.open{ transform:translate(-50%,0); }
.cmp-tray-inner{ background:var(--vw-navy); color:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:.9rem 1rem .9rem 1.3rem; display:flex; align-items:center;
  gap:1rem; flex-wrap:wrap; }
.cmp-slots{ display:flex; gap:.7rem; flex:1; min-width:0; }
.cmp-slot{ width:74px; height:60px; border-radius:10px; background:rgba(255,255,255,.07);
  border:1px dashed rgba(255,255,255,.25); position:relative; flex:0 0 auto;
  display:grid; place-items:center; overflow:hidden; }
.cmp-slot.filled{ border-style:solid; border-color:transparent; background:rgba(255,255,255,.12); }
.cmp-slot image-slot{ width:100%; height:100%; pointer-events:none; }
.cmp-slot .name{ position:absolute; inset:auto 0 0 0; font-size:.58rem; font-weight:700;
  font-family:var(--display); text-align:center; background:rgba(0,0,0,.45); padding:2px 3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmp-slot .rm{ position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,.55); display:grid; place-items:center; }
.cmp-slot .rm svg{ width:10px; height:10px; color:#fff; }
.cmp-slot .plus{ color:rgba(255,255,255,.4); font-size:1.4rem; font-weight:300; }
.cmp-tray .cmp-meta{ font-size:.82rem; color:#9fb0cc; }
.cmp-tray .cmp-meta b{ color:#fff; font-family:var(--display); }
.cmp-tray-actions{ display:flex; gap:.6rem; align-items:center; margin-left:auto; }
.cmp-clear{ color:#9fb0cc; font-size:.86rem; font-family:var(--display); font-weight:600; }
.cmp-clear:hover{ color:#fff; }

/* ---------- Compare modal ---------- */
.cmp-modal{ position:fixed; inset:0; z-index:100; display:none; }
.cmp-modal.open{ display:block; }
.cmp-modal .scrim{ position:absolute; inset:0; background:rgba(7,14,28,.6); backdrop-filter:blur(3px); }
.cmp-sheet{ position:absolute; inset:auto 0 0 0; top:0; margin:auto; max-width:1100px;
  background:var(--mist-2); border-radius:0; height:100%; overflow-y:auto; box-shadow:var(--sh-lg);
  animation:cmpIn .3s cubic-bezier(.4,0,.2,1); }
@media (min-width:820px){ .cmp-sheet{ inset:24px; border-radius:var(--r-xl); height:auto; max-height:calc(100% - 48px); } }
@keyframes cmpIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.cmp-sheet-head{ position:sticky; top:0; z-index:3; background:#fff; border-bottom:1px solid var(--line);
  padding:1.2rem clamp(1rem,3vw,2rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.cmp-sheet-head h2{ font-size:clamp(1.3rem,3vw,1.9rem); }
.cmp-close{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--mist); color:var(--vw-navy); flex:0 0 auto; }
.cmp-close:hover{ background:var(--line); }
.cmp-table-wrap{ padding:clamp(1rem,3vw,2rem); overflow-x:auto; }
.cmp-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:520px; }
.cmp-table th, .cmp-table td{ text-align:left; padding:1rem 1.1rem; vertical-align:middle; }
.cmp-table thead th{ position:sticky; top:0; background:transparent; }
.cmp-col-head{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:1rem; text-align:center; }
.cmp-col-head .cmp-thumb{ aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin-bottom:.7rem;
  background:linear-gradient(160deg,#fafcff,#eaeff7); }
.cmp-col-head .cmp-thumb image-slot{ width:100%; height:100%; }
.cmp-col-head h4{ font-size:1.1rem; }
.cmp-col-head small{ color:var(--vw-blue); font-family:var(--display); font-weight:700; font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; }
.cmp-table tbody tr:nth-child(odd) td{ background:#fff; }
.cmp-table tbody tr td:first-child{ background:transparent; font-size:.82rem; color:var(--slate-2);
  text-transform:uppercase; letter-spacing:.06em; font-family:var(--display); font-weight:600;
  width:200px; }
.cmp-table tbody td{ font-family:var(--display); font-weight:600; font-size:1rem; border-bottom:1px solid var(--line); }
.cmp-table tbody tr:first-child td{ border-top:1px solid var(--line); }
.cmp-cell-best{ color:var(--vw-blue); }
.cmp-cell-best::after{ content:"melhor"; display:inline-block; margin-left:.6em; font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; background:rgba(10,79,196,.12); color:var(--vw-blue);
  padding:.2em .5em; border-radius:999px; vertical-align:middle; font-weight:700; }
.cmp-empty{ padding:4rem 2rem; text-align:center; color:var(--slate); }

/* ---------- Responsive ---------- */
@media (max-width:980px){ .models-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:1024px){ .tabs-rail{ top:var(--header-h); } }
@media (max-width:620px){
  .models-grid{ grid-template-columns:1fr; }
  .cmp-tray-inner{ padding:.8rem; gap:.7rem; }
  .cmp-meta{ display:none; }
  .cmp-slot{ width:60px; height:48px; }
  .spec-actions{ flex-direction:column; }
}