/* ==========================================================================
   InvestPro · page-administradoras.css
   Hubs Consórcio Embracon / Consórcio Volkswagen / Stellantis Consórcio
   + índice administradoras/. Tokens herdados de system.css.

   Tokens Stellantis (Guia SFS Brazil out/2024 v2) — uso LOCAL e restrito:
   · Fundos de comunicação da marca: White (predominante), Blue #243782,
     Anthracite #282b34. Nada além disso.
   · Tangerine / Mint / Orange: APENAS em ícones/pontos de acento
     (.stl-brand_dot). NUNCA em texto, fundo ou botão.
   · Nome da marca sempre em tipografia do site — PROIBIDO recriar logo.
   ========================================================================== */
:root {
  --stl-blue: #243782;
  --stl-anthracite: #282b34;
  --stl-tangerine: #E94E24; /* SÓ ícones/acentos */
  --stl-mint: #43AAA0;      /* SÓ ícones/acentos */
  --stl-orange: #ECA935;    /* SÓ ícones/acentos */
}

/* ---- Breadcrumb (dentro do hero, acima do eyebrow) ---- */
.hub-crumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.hub-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hub-crumbs li + li::before { content: '›'; margin-right: 8px; color: var(--on-dark-3); }
.hub-crumbs a { color: var(--on-dark-2); text-decoration: none; }
.hub-crumbs a:hover { color: #fff; }
.hub-crumbs [aria-current="page"] { color: #fff; }

/* ---- Hero da marca ---- */
.hub-hero {
  position: relative; color: var(--on-dark-1);
  padding: clamp(140px, 16vw, 200px) 0 clamp(56px, 6vw, 80px); /* compensa a navbar sobreposta */
  background:
    radial-gradient(ellipse at 18% 0%, rgba(0, 114, 206, 0.22) 0%, transparent 55%),
    linear-gradient(160deg, #0e2a55 0%, #0a1e42 60%, #07152a 100%);
}
/* Compliance Stellantis: fundo aprovado Blue #243782 sólido, sem gradiente do site */
body[data-brand="stellantis"] .hub-hero { background: var(--stl-blue); }
.hub-hero_inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hub-hero_eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #5fb6ff;
}
body[data-brand="stellantis"] .hub-hero_eyebrow { color: rgba(255, 255, 255, 0.75); }
.hub-hero h1 {
  font-family: var(--font-title);
  font-size: clamp(34px, 4.6vw, 60px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05; color: #fff; max-width: 18ch;
}
.hub-hero_sub { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--on-dark-2); max-width: 62ch; }
.hub-fonte { font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-3); }
.hub-fonte.is-on-light { color: var(--muted); }
.hub-stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); margin-top: clamp(12px, 1.6vw, 20px); }
.hub-stat { min-width: 0; }
.hub-stat .v {
  display: block; font-family: var(--font-title); font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px); color: #fff;
}
.hub-stat .l { display: block; font-size: 13px; color: var(--on-dark-3); }
/* Contraste AA sobre o Blue Stellantis #243782: --on-dark-3 (rgba 255,255,255,.48)
   rende ~3,8:1 nesse fundo (< 4,5:1 p/ texto pequeno). 0.72 ≈ var(--on-dark-2) → ~7:1. */
body[data-brand="stellantis"] .hub-fonte:not(.is-on-light),
body[data-brand="stellantis"] .hub-stat .l,
body[data-brand="stellantis"] .hub-crumbs li + li::before { color: rgba(255, 255, 255, 0.72); }
.hub-hero .cta-main { margin-top: clamp(10px, 1.4vw, 18px); }
/* Índice administradoras/ — hero curto, sem stats */
.hub-hero.is-compact { padding-bottom: clamp(44px, 5vw, 64px); }

/* ---- Cabeçalho padrão de seção ---- */
.hub-section_header {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  max-width: 72ch; margin-bottom: clamp(28px, 3.5vw, 44px);
}
.hub-section_header .rule-gold { align-self: stretch; }

/* ---- Portfólio / citação de marca ---- */
.hub-brand-quote {
  border-left: 3px solid var(--blue); padding-left: 20px;
  font-family: var(--font-accent); font-style: italic;
  font-size: clamp(19px, 1.6vw, 24px); color: var(--ink-strong);
  max-width: 60ch;
}
.hub-brand-quote_meta, .hub-cats_note, .stl-grid_note {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  margin-top: 12px; max-width: 90ch;
}
.hub-models {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  list-style: none; margin: 4px 0 0; padding: 0;
}

/* ---- Categorias ---- */
.hub-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.hub-cat {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-2); background: var(--bg);
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.hub-cat:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(12, 35, 64, 0.12); border-color: var(--border); }
.hub-cat_media { aspect-ratio: 4 / 3; overflow: hidden; }
.hub-cat_media img { width: 100%; height: 100%; object-fit: cover; }
.hub-cat_body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hub-cat_body h3 { font-size: 18px; font-weight: 700; color: var(--ink-strong); }
.hub-cat_body p { font-size: 14px; color: var(--muted); }
.hub-cat_link { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--blue); display: inline-flex; gap: 8px; align-items: center; }
.hub-cat_link svg { transition: transform var(--t); }
.hub-cat:hover .hub-cat_link svg { transform: translateX(4px); }
.hub-cat.is-text .hub-cat_media { display: none; }        /* card Serviços sem foto */
.hub-cat_icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue); flex: none;
}
.hub-cat_icon svg { width: 22px; height: 22px; }
.hub-cat.is-wide { grid-column: 1 / -1; }
.hub-cat.is-wide .hub-cat_media { aspect-ratio: 21 / 9; }

/* ---- Grid ecossistema Stellantis (dobras de marca: fundo BRANCO obrigatório) ---- */
.hub-stl { background: #fff; }
.hub-stl h2 { color: var(--stl-anthracite); }
.hub-stl .stl-brand_name { color: var(--stl-anthracite); }
.stl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stl-brand {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 22px 20px; border: 1px solid var(--border-2);
  border-radius: var(--r-md); background: #fff;
}
.stl-brand_dot { width: 10px; height: 10px; border-radius: 50%; }
.stl-brand[data-accent="tangerine"] .stl-brand_dot { background: var(--stl-tangerine); }
.stl-brand[data-accent="mint"]      .stl-brand_dot { background: var(--stl-mint); }
.stl-brand[data-accent="orange"]    .stl-brand_dot { background: var(--stl-orange); }
.stl-brand_name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.stl-brand_line { font-size: 14px; color: var(--muted); }
.stl-brand_src { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }

/* ---- "Por que via InvestPro" — dobra de comunicação InvestPro (navy do site) ---- */
.hub-why {
  background:
    radial-gradient(ellipse at 82% 0%, rgba(0, 114, 206, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #0e2a55 0%, #0a1e42 60%, #07152a 100%);
  color: var(--on-dark-1);
}
.hub-why h2 { color: #fff; }
.hub-why .sellers_card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.hub-why .sellers_card:hover { border-color: rgba(0, 114, 206, 0.55); }
.hub-why .sellers_card .text-base { color: var(--on-dark-2); }
.hub-why .sellers_card .text-base strong { color: #fff; }
.hub-why .sellers_card .icon-1x1-large .rect { color: rgba(0, 114, 206, 0.22); }
.hub-why .sellers_card .icon-1x1-large .path { color: #5fb6ff; }

/* ---- Form do hub (#simular) ---- */
.hub-simular .form_contact > .button.is-whatsapp {
  margin-top: 14px; width: 100%; justify-content: center;
}

/* ---- Cross-links / banner parceiro / disclaimer ---- */
.hub-others { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.hub-others .admin-card { min-width: 0; }
.hub-partner-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: clamp(24px, 3vw, 36px); padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #0e2a55, #07152a); color: #fff;
}
.hub-partner-banner_text { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 56ch; }
.hub-partner-banner_title {
  font-family: var(--font-title); font-size: clamp(20px, 2vw, 26px);
  font-weight: 600; letter-spacing: -0.01em; color: #fff;
}
.hub-partner-banner_sub { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-2); }
.hub-disclaimer-wrap { border-top: 1px solid var(--border-2); }
.hub-disclaimer {
  padding: 28px 0 40px; font-family: var(--font-mono); font-size: 12.5px;
  line-height: 1.7; color: var(--muted); max-width: 90ch;
}

/* ---- Responsivo (gate P0.1: zero overflow 320–1920px) ---- */
@media (max-width: 991px) {
  .hub-others { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hub-partner-banner .cta-main { width: 100%; justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .hub-stats { gap: 16px; }
  .hub-cats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .hub-cats { grid-template-columns: 1fr; }
}

/* ============================================================
   ÍNDICE v2 (03/09) · padrões da coleção Avenir (BYQ)
   - .adml_*: lista dark de linhas full-width (CMS Grid 1)
   - .cur_*: split imagem alta + mini-cards (Value & Features 2)
   Estilos só do índice; hubs por marca seguem nos blocos acima.
   ============================================================ */
.adml_head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.adml_head h2 { margin: 0; }
.adml_lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 48ch;
}
.adml_panel {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--r-lg);
  padding: clamp(10px, 1.4vw, 18px) clamp(22px, 3vw, 48px);
  overflow: hidden;
}
.adml_row {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.8vw, 40px);
  padding: clamp(26px, 3vw, 38px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  transition: opacity var(--t);
}
.adml_row:last-of-type { border-bottom: none; }
.adml_brand img { display: block; height: 38px; width: auto; }
.adml_row[data-brand="volkswagen"] .adml_brand img { height: 44px; }
.adml_row[data-brand="stellantis"] .adml_brand img { height: 48px; }
.adml_body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.adml_desc {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-dark-1);
}
.adml_meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7db4e8;
}
.adml_cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-dark-2);
  white-space: nowrap;
  transition: color var(--t);
}
.adml_cta svg { transition: transform var(--t); }
.adml_row:hover .adml_cta { color: var(--on-dark-1); }
.adml_row:hover .adml_cta svg { transform: translateX(4px); }
.adml_note {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- CURADORIA · split Avenir ---------- */
.section_about.is-curadoria {
  background: var(--off);
  border-top: 1px solid var(--border-2);
}
.cur_grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: stretch;
}
.cur_media {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
.cur_media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center 18%;
}
.cur_body { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); }
.cur_body h2 { margin: 0; }
.cur_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
}
.cur_card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cur_card strong {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.cur_card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.cur_foot { display: flex; flex-direction: column; gap: 8px; }
.cur_foot strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-strong);
}
.cur_foot p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
}
.section_about.is-curadoria .hub-partner-banner { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- Responsivo do índice v2 ---------- */
@media (max-width: 991px) {
  .adml_head, .cur_grid { grid-template-columns: 1fr; align-items: start; }
  .adml_row { grid-template-columns: 200px minmax(0, 1fr); }
  .adml_cta { display: none; }
  .cur_media img { min-height: 300px; }
}
@media (max-width: 640px) {
  .adml_row { grid-template-columns: 1fr; align-items: start; row-gap: 10px; }
  .cur_cards { grid-template-columns: 1fr; }
}

/* ============================================================
   HUBS v2 (03/09) · templates BYQ/Avenir
   - .hab_*: About/Stats (avenir-value-features-18) — grid 6/1/5,
     card quote quadrado + card stat count-up + retrato alto |
     h2 + parágrafo + lista com divisórias
   - .hcat_*: categorias em cards imagem-overlay
   ============================================================ */
.hub-hab { background: var(--bg); }
.hab_grid {
  display: grid;
  grid-template-columns: 6fr 1fr 5fr;
  align-items: center;
  gap: 16px;
}
.hab_left {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
}
.hab_cards {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  flex: 1;
}
.hab_quote {
  width: 100%;
  max-width: 332px;
  aspect-ratio: 1;
  padding: 24px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.hab_quote > p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--on-dark-1);
  text-wrap: balance;
}
.hab_quote-foot { display: flex; flex-direction: column; gap: 14px; }
.hab_quote-meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-dark-3);
}
.hab_quote-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--blue, #0072ce);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t);
}
.hab_quote-cta:hover { background: #0060ad; }
.hab_quote-cta svg { transition: transform var(--t); }
.hab_quote-cta:hover svg { transform: translateX(3px); }
.hab_stat {
  width: 100%;
  max-width: 216px;
  min-height: 184px;
  padding: 24px;
  border-radius: var(--r-md);
  background: rgba(0, 114, 206, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}
.hab_stat-v {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink-strong);
  transition: filter 1.4s ease;
}
.hab_stat-v.is-blur { filter: blur(6px); }
.hab_stat-l { font-size: 14px; font-weight: 500; color: var(--ink); }
.hab_photo {
  margin: 0 0 clamp(48px, 7vw, 120px);
  width: 100%;
  max-width: 332px;
  height: clamp(380px, 34vw, 504px);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  flex: 1;
}
.hab_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.hab_right { display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 72px); min-width: 0; }
.hab_head { display: flex; flex-direction: column; gap: 18px; }
.hab_head h2 { margin: 0; }
.hab_head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 56ch;
}
.hab_fonte { font-size: 12.5px; color: var(--muted); }
.hab_models {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.hab_models li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
}
.hab_list { display: flex; flex-direction: column; }
.hab_item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) 0;
}
.hab_item + .hab_item { border-top: 1px solid var(--border); }
.hab_dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(0, 114, 206, 0.35);
  margin-top: 7px;
}
.hab_item p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.hab_item p strong { color: var(--ink-strong); }

/* ---------- CATEGORIAS · cards imagem-overlay ---------- */
.hcat_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
/* Embracon: 4 colunas cheias (o card Serviços full-width impede o
   auto-fit de colapsar trilhas vazias); VW: 2 colunas */
body[data-brand="embracon"] .hcat_grid { grid-template-columns: repeat(4, 1fr); }
body[data-brand="volkswagen"] .hcat_grid { grid-template-columns: repeat(2, 1fr); }
.hcat_grid.is-single { grid-template-columns: 1fr; }
.hcat {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
  text-decoration: none;
  background: var(--navy-deep);
}
.hcat.is-wide { aspect-ratio: 21 / 9; }
.hcat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hcat:hover img { transform: scale(1.05); }
.hcat_scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 21, 42, 0.05) 35%, rgba(7, 21, 42, 0.86) 100%);
}
.hcat_body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hcat_body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.hcat_body p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.hcat_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}
.hcat_link svg { transition: transform var(--t); }
.hcat:hover .hcat_link svg { transform: translateX(4px); }
.hcat.is-text {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.hcat.is-text .hcat_body {
  position: static;
  height: 100%;
  justify-content: flex-end;
  padding: clamp(18px, 2vw, 24px);
}
.hcat_icon { width: 34px; height: 34px; color: #7db4e8; margin-bottom: auto; }
.hcat_icon svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hcat img, .hcat:hover img { transition: none; transform: none; }
  .hab_stat-v, .hab_stat-v.is-blur { transition: none; filter: none; }
}

/* ---------- Responsivo hubs v2 ---------- */
@media (max-width: 991px) {
  body[data-brand="embracon"] .hcat_grid { grid-template-columns: repeat(2, 1fr); }
  .hab_grid { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
  .hab_spacer { display: none; }
  .hab_right { order: -1; }
  .hab_photo { margin-bottom: 0; }
}
@media (max-width: 479px) {
  body[data-brand="embracon"] .hcat_grid,
  body[data-brand="volkswagen"] .hcat_grid { grid-template-columns: 1fr; }
  .hab_left { flex-direction: column; align-items: stretch; }
  .hab_cards { align-items: stretch; }
  .hab_quote { max-width: none; aspect-ratio: auto; gap: 28px; }
  .hab_stat { max-width: none; }
  .hab_photo { max-width: none; height: 320px; order: -1; }
  .hcat { aspect-ratio: 4 / 4.2; }
  .hcat.is-wide { aspect-ratio: 4 / 3; }
}

/* Card "Serviços" (Embracon): banda horizontal ocupando a linha toda */
.hcat.is-text.is-row { grid-column: 1 / -1; aspect-ratio: auto; }
.hcat.is-text.is-row .hcat_body {
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.4vw, 28px);
}
.hcat.is-text.is-row .hcat_icon { margin-bottom: 0; flex: none; }
.hcat_txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hcat_txt h3 { margin: 0; }
.hcat.is-text.is-row .hcat_link { margin: 0 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .hcat.is-text.is-row .hcat_body { flex-wrap: wrap; }
  .hcat.is-text.is-row .hcat_link { margin-left: 0; }
}

/* ============================================================
   HERO BENTO Embracon (BentoSection Avenir/BYQ, 03/09)
   Head à esquerda + grid 6/3/3 (2 linhas): foto grande c/ stats,
   card claro avatares+contemplações, card BACEN listrado,
   card navy portfólio+CTA. Fundo claro (navbar segue sólida).
   ============================================================ */
.hub-bhero {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(0, 114, 206, 0.22) 0%, transparent 55%),
    linear-gradient(160deg, #0e2a55 0%, #0a1e42 60%, #07152a 100%);
  padding: clamp(120px, 14vw, 168px) 0 clamp(48px, 5vw, 72px);
}
.bh_head { display: flex; flex-direction: column; gap: 14px; }
.bh_head h1 {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--on-dark-1);
  max-width: 22ch;
  text-wrap: balance;
}
.bh_sub {
  margin: 0;
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.6;
  color: var(--on-dark-2);
  max-width: 62ch;
}
.bh_grid {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.bh_card { border-radius: var(--r-md); overflow: hidden; min-width: 0; }

/* Card foto (span 2 linhas) */
.bh_card.is-photo {
  grid-row: 1 / 3;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 40vw, 600px);
  padding: clamp(20px, 2.2vw, 28px);
}
.bh_card.is-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bh_scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 21, 42, 0.08) 30%, rgba(7, 21, 42, 0.84) 100%);
}
.bh_photo-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
}
.bh_photo-content h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
  max-width: 20ch;
}
.bh_div { display: block; height: 1px; background: rgba(255, 255, 255, 0.18); }
.bh_stats { display: flex; gap: clamp(16px, 2.2vw, 32px); flex-wrap: wrap; }
.bh_stat { display: flex; align-items: center; gap: 14px; }
.bh_stat-v {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  transition: filter 1.4s ease;
}
.bh_stat-v.is-blur { filter: blur(6px); }
.bh_stat-l {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  max-width: 16ch;
}

/* Card claro · avatares + contemplações */
.bh_card.is-light {
  background: var(--off);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(18px, 2vw, 24px);
}
.bh_avs-wrap { display: flex; flex-direction: column; gap: 14px; }
.bh_avs { display: flex; }
.bh_av {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--bg);
}
.bh_av + .bh_av { margin-left: -12px; }
.bh_av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh_av.is-plus {
  display: grid;
  place-items: center;
  background: rgba(0, 114, 206, 0.16);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.bh_avs-wrap p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  max-width: 26ch;
}
.bh_roi { display: flex; align-items: flex-end; gap: 10px; }
.bh_roi .bh_stat-v { color: var(--ink-strong); }
.bh_roi-l {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 5px;
  max-width: 14ch;
}

/* Card listrado · BACEN */
.bh_card.is-stripes {
  background-color: var(--bg);
  background-image: repeating-linear-gradient(45deg, rgba(12, 35, 64, 0.055) 0 1px, transparent 1px 8px);
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: clamp(18px, 2vw, 24px);
}
.bh_tile {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.bh_tile-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(0, 114, 206, 0.12);
  color: var(--blue);
}
.bh_tile-icon svg { width: 26px; height: 26px; }
.bh_tile-txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bh_tile-txt p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-strong);
  max-width: 26ch;
}
.bh_tile-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Card navy · portfólio + CTA */
.bh_card.is-navy {
  grid-column: 2 / 4;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, var(--navy-soft, #13294f) 0%, var(--navy-deep) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(18px, 2vw, 24px);
}
.bh_navy-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.bh_navy-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #a9cdf0;
  max-width: 18ch;
}
.bh_navy-logo { flex: none; }
.bh_navy-logo img { height: 24px; width: auto; display: block; opacity: 0.9; }
.bh_navy-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.bh_tags { display: flex; gap: 8px; flex-wrap: wrap; }
.bh_tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
}
.bh_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.bh_link svg { transition: transform var(--t); }
.bh_link:hover svg { transform: translateX(3px); }

@media (max-width: 991px) {
  .bh_grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bh_card.is-photo { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  .bh_card.is-navy { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bh_grid { grid-template-columns: 1fr; }
  .bh_card.is-photo { min-height: 340px; }
  .bh_card.is-navy { grid-column: auto; }
}

/* ============================================================
   BENTO v2 Embracon (BentoSection vídeo Avenir/BYQ, 03/09)
   Grid 3 col: vídeo alto (2 linhas) · stat 88px · CTA listrado ·
   brand navy span-2 c/ slogan. + régua "por que" em 3 colunas.
   ============================================================ */
.hub-hb2 { background: var(--bg); }
.hb2_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hb2_video {
  grid-row: span 2;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: clamp(420px, 36vw, 530px);
  display: flex;
}
.hb2_fallback,
.hb2_video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hb2_video video { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .hb2_video video { display: none; }
}
.hb2_scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(0deg, transparent 55%, rgba(0, 0, 0, 0.35)),
    linear-gradient(180deg, transparent 45%, rgba(7, 21, 42, 0.72));
}
.hb2_video-in {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  padding: clamp(20px, 2.2vw, 32px);
  color: #fff;
}
.hb2_video-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.hb2_video-top h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
  max-width: 18ch;
}
.hb2_label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.hb2_author { display: flex; align-items: center; gap: 14px; }
.hb2_author-av {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
}
.hb2_author-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb2_author-txt { display: flex; flex-direction: column; gap: 5px; }
.hb2_author-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* Card stat */
.hb2_stats {
  background: rgba(0, 114, 206, 0.10);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 48px);
}
.hb2_stats-top { display: flex; flex-direction: column; gap: 14px; }
.hb2_num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink-strong);
  transition: filter 1.4s ease;
}
.hb2_num.is-blur { filter: blur(6px); }
.hb2_stats-lead { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.hb2_stats-foot { display: flex; flex-direction: column; gap: 10px; }
.hb2_stats-foot p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink-strong);
  max-width: 20ch;
}
.hb2_fonte { font-size: 12px; color: var(--muted); }

/* Card listrado · compliance + CTA */
.hb2_cta {
  background-color: var(--navy-deep);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 10px);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 48px);
}
.hb2_cta-txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-2);
  max-width: 30ch;
}
.hb2_cta .button { align-self: flex-start; }

/* Card marca · slogan */
.hb2_brand {
  grid-column: span 2;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 4.5vw, 56px);
}
.hb2_brand-logo img { height: 30px; width: auto; display: block; opacity: 0.95; }
.hb2_brand-body { display: flex; flex-direction: column; gap: 14px; }
.hb2_quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #a9cdf0;
  max-width: 24ch;
  text-wrap: balance;
}
.hb2_brand-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.hb2_compliance {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--on-dark-3);
  max-width: 64ch;
}

/* Régua "por que via InvestPro" */
.hb2_why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 40px);
  margin-top: clamp(20px, 2.5vw, 32px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--border);
}
.hb2_why-item { display: flex; align-items: flex-start; gap: 14px; }
.hb2_why-item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.hb2_why-item p strong { color: var(--ink-strong); }

@media (max-width: 991px) {
  .hb2_grid { grid-template-columns: 1fr 1fr; }
  .hb2_video { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  .hb2_brand { grid-column: 1 / -1; }
  .hb2_why { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .hb2_grid { grid-template-columns: 1fr; }
  .hb2_video { min-height: 340px; }
  .hb2_brand { grid-column: auto; }
}

/* ============================================================
   SIMULAÇÃO · csplit (padrão Fale Conosco) — 4ª cópia do .csplit
   (⚠️ candidato a promoção p/ system.css). Form claro escopado.
   ============================================================ */
.hub-simular.is-split { background: var(--bg); border-top: 1px solid var(--border-2); }
.hub-simular .csplit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: stretch; }
.hub-simular .csplit-aside {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); min-height: 560px;
  display: flex; padding: clamp(28px, 3vw, 40px);
}
.hub-simular .csplit-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (prefers-reduced-motion: reduce) {
  .hub-simular .csplit-bg.is-video { display: none; }
}
.hub-simular .csplit-scrim { position: absolute; inset: 0; background: linear-gradient(165deg, rgba(7,21,42,0.72) 0%, rgba(7,21,42,0.86) 100%); }
.hub-simular .csplit-aside_in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.hub-simular .csplit-logo { height: clamp(40px, 4vw, 56px); width: auto; }
.hub-simular .csplit-form { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }
.hub-simular .csplit-form_head { display: flex; flex-direction: column; gap: 12px; }
.hub-simular .csplit-title { font-family: var(--font-title); font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-strong); text-wrap: balance; margin: 0; }
.hub-simular .csplit-title .italic { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--blue); }
.hub-simular .csplit-sub { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6; color: var(--muted); margin: 0; }
.hub-simular .csplit-sub strong { color: var(--ink-strong); font-weight: 600; }

/* form claro (escopado — não afeta os forms navy) */
.hub-simular.is-split .form_form { display: grid; gap: 16px; }
.hub-simular.is-split .form_input {
  background-color: rgba(12, 35, 64, 0.05);
  border: 1px solid rgba(12, 35, 64, 0.08);
  color: var(--ink-strong);
}
.hub-simular.is-split .form_input::placeholder { color: var(--muted-2); }
.hub-simular.is-split .form_input:focus { border-color: rgba(12, 35, 64, 0.34); background-color: rgba(12, 35, 64, 0.03); }
.hub-simular.is-split .form_label { color: var(--muted); }
.hub-simular.is-split .form_input:where(select) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c2340' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.hub-simular.is-split .form_input:where(select) option { color: var(--ink-strong); background: #fff; }
.hub-simular.is-split .form_consent-label span { color: var(--muted); }
.hub-simular.is-split .form_consent-label a { color: var(--blue); }
.hub-simular.is-split .form_micro-disclaimer { color: var(--muted-2); }
.hub-simular.is-split .button.is-secondary[type="submit"] { border-radius: 999px; }
.hub-simular.is-split .button.is-whatsapp { align-self: flex-start; }

@media (max-width: 991px) {
  .hub-simular .csplit { grid-template-columns: 1fr; }
  .hub-simular .csplit-form { order: -1; }
  .hub-simular .csplit-aside { min-height: 360px; }
}
@media (max-width: 767px) {
  .hub-simular .csplit-aside { display: none; }
}

/* Hubs de marca: sem o CTA "Pronto para transformar..." do footer —
   a página termina no formulário de simulação (CTA redundante). */
body[data-brand="embracon"] .fcta,
body[data-brand="volkswagen"] .fcta,
body[data-brand="stellantis"] .fcta { display: none; }

/* Stellantis: bento hero segue o navy padrão dos demais hubs (pedido 03/09);
   o Blue #243782 da marca fica restrito aos acentos da seção do ecossistema. */
/* stat textual (ex.: "Novos e seminovos") em tamanho de título, não de número */
.bh_roi .bh_stat-v.is-text {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* ============================================================
   ECOSSISTEMA STELLANTIS · slider de marcas (Testimonials
   Avenir/BYQ, 04/09): banda navy, cards retrato com imagem de
   campanha; ativo em destaque, vizinhos esmaecidos; setas abaixo.
   ============================================================ */
.hub-stlsl {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
}
.stlsl_head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.stlsl_head h2 { margin: 0; color: var(--on-dark-1); }
.stlsl_lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--on-dark-2);
  max-width: 52ch;
}
.stlsl_viewport { position: relative; }
.stlsl_track {
  display: flex;
  gap: clamp(18px, 2.2vw, 32px);
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.stlsl_card {
  position: relative;
  flex: none;
  width: clamp(270px, 26vw, 380px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  opacity: 0.35;
  transform: scale(0.94);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stlsl_card.is-active { opacity: 1; transform: scale(1); }
.stlsl_card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stlsl_scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 21, 42, 0) 45%, rgba(7, 21, 42, 0.85) 100%);
}
.stlsl_meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.stlsl_row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stlsl_name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.stlsl_tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.stlsl_quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #fff;
  text-wrap: balance;
}
.stlsl_nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
}
.stlsl_btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--t), color var(--t);
}
.stlsl_btn:hover { background: var(--blue, #0072ce); }
.stlsl_note {
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  font-size: 12.5px;
  color: var(--on-dark-3);
  text-align: center;
}
@media (max-width: 991px) {
  .stlsl_head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .stlsl_card { width: min(78vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .stlsl_track, .stlsl_card { transition: none; }
}