/* =========================================================
   SULBOX — DESIGN SYSTEM
   ARQUIVO GERADO por partials/css-build.php.
   Não edite aqui: edite assets/css/*.css.
   Fonte de verdade visual: design.md
========================================================= */

/* =========================================================
   TOKENS
========================================================= */
:root {
  /* Superfícies (escuro industrial) */
  --sb-bg:            #131517;
  --sb-surface:       #191C1F;
  --sb-surface-2:     #1C1F22;
  --sb-surface-3:     #202427;
  --sb-surface-deep:  #10161C;
  --sb-surface-foot:  #101214;

  /* Bordas */
  --sb-border:        #2A2E31;
  --sb-border-soft:   #23272A;
  --sb-border-strong: #3A4045;
  --sb-border-subtle: #33383C;

  /* Marca — verde Sulbox */
  --sb-green:         #0A7A45;
  --sb-green-hover:   #0E9A57;
  --sb-green-light:   #2FBF72;

  /* Texto */
  --sb-text-strong:   #FFFFFF;
  --sb-text:          #E8E9EA;
  --sb-text-nav:      #C6CACD;
  --sb-text-muted:    #A8AEB2;
  --sb-text-dim:      #8E9599;
  --sb-text-faint:    #6E757A;
  /* Rótulo secundário sobre a faixa verde. .88 é o mínimo que mantém 4,6:1. */
  --sb-on-green-soft: rgba(255, 255, 255, .88);

  /* Tipografia */
  --sb-font-display:  "Barlow Condensed", Barlow, sans-serif;
  --sb-font-body:     Barlow, system-ui, sans-serif;
  --sb-font-mono:     "IBM Plex Mono", ui-monospace, monospace;

  /* Escala fluida */
  --sb-fs-h1:         clamp(38px, 7vw, 68px);
  --sb-fs-h1-interna: clamp(33px, 6vw, 50px);
  --sb-fs-h2:         clamp(24px, 3.2vw, 34px);
  --sb-fs-h2-lg:      clamp(27px, 4vw, 40px);
  --sb-fs-h2-cta:     clamp(26px, 3.6vw, 36px);
  --sb-fs-h2-leve:    clamp(20px, 4vw, 30px);
  --sb-fs-h3:         clamp(21px, 2.3vw, 25px);
  --sb-fs-h3-nota:    clamp(22px, 2.4vw, 26px);
  --sb-fs-h4:         clamp(17px, 1.8vw, 20px);
  --sb-fs-doc:        24px;
  --sb-fs-diff:       22px;
  --sb-fs-mark:       21px;
  --sb-fs-lead:       19px;
  --sb-fs-md:         17px;
  --sb-fs-body:       16px;
  --sb-fs-sm:         15px;
  --sb-fs-xs:         13px;
  --sb-fs-mono:       12px;
  --sb-fs-mono-xs:    11px;
  --sb-fs-mono-tag:   10px;

  /* Espaço */
  --sb-container:     1240px;
  --sb-gutter:        24px;
  --sb-section-y:     clamp(44px, 6.5vw, 80px);

  /* Malha técnica do fundo */
  --sb-grid-line:     #1A1E21;
  --sb-grid-step:     96px;
  --sb-halo:          rgba(10, 122, 69, .20);

  /* Véus */
  --sb-veil-header:   rgba(19, 21, 23, .94);
  --sb-veil-modal:    rgba(8, 10, 11, .86);

  /* Outros */
  --sb-radius:        0;            /* cantos retos — decisão de marca */
  --sb-transition:    background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  --sb-shadow-fab:    0 10px 30px rgba(0,0,0,.45);
  --sb-shadow-modal:  0 30px 90px rgba(0,0,0,.55);
  --sb-shadow-hero:   18px 18px 0 0 rgba(10,122,69,.28), 0 24px 60px rgba(0,0,0,.45);
  --sb-hatch:         repeating-linear-gradient(135deg, var(--sb-surface-2) 0 12px, var(--sb-surface-3) 12px 24px);
}

/* =========================================================
   BASE
========================================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sb-font-body);
  font-size: var(--sb-fs-body);
  color: var(--sb-text);
  background-color: var(--sb-bg);
  background-image:
    radial-gradient(900px 520px at 78% -8%, var(--sb-halo), transparent 70%),
    linear-gradient(var(--sb-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sb-grid-line) 1px, transparent 1px);
  background-size: 100% 100%, var(--sb-grid-step) var(--sb-grid-step), var(--sb-grid-step) var(--sb-grid-step);
  background-attachment: fixed, scroll, scroll;
  -webkit-font-smoothing: antialiased;
}

/* Trava a rolagem enquanto painel lateral ou modal estão abertos. */
body.sb-travado { overflow: hidden; }

html { overflow-x: hidden; }
p { margin: 0; }
img { max-width: 100%; }
table { border-collapse: collapse; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--sb-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
h1 { font-size: var(--sb-fs-h1); line-height: .96; }
h2 { font-size: var(--sb-fs-h2); line-height: 1.05; }
h3 { font-size: var(--sb-fs-h3); line-height: 1.05; }
h4 { font-size: var(--sb-fs-h4); line-height: 1.25; letter-spacing: .01em; }

a { color: var(--sb-green-light); text-decoration: none; transition: var(--sb-transition); }
a:hover { color: var(--sb-green-hover); }

/* Acessibilidade — foco visível (ausente no protótipo, obrigatório aqui) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[role="dialog"]:focus-visible {
  outline: 2px solid var(--sb-green-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *:not(.sb-selo-garantia) { transition: none !important; animation: none !important; }
}

/* =========================================================
   LAYOUT
========================================================= */
.sb-container {
  max-width: var(--sb-container);
  margin: 0 auto;
  padding-inline: var(--sb-gutter);
}

.sb-section { padding-block: var(--sb-section-y); }
.sb-section--bordered { border-bottom: 1px solid var(--sb-border); }
.sb-section--topo     { border-top: 1px solid var(--sb-border); }
.sb-section--surface  { background: var(--sb-surface); }

/* Grade automática — o padrão de responsividade do site inteiro */
.sb-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sb-grid--wide  { gap: 64px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); align-items: start; }
.sb-grid--cards { gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sb-grid--docs  { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* =========================================================
   TIPOGRAFIA UTILITÁRIA
========================================================= */
.sb-eyebrow {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sb-green-light);
  margin-bottom: 14px;
}
/* Variante de abertura de seção grande, como no canvas. */
.sb-eyebrow--grande { font-size: var(--sb-fs-md); }

.sb-section-title {
  font-size: var(--sb-fs-h2);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sb-border);
}

.sb-lead {
  font-size: var(--sb-fs-lead);
  line-height: 1.5;
  color: var(--sb-text-muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.sb-lead + .sb-lead { margin-top: 18px; }

.sb-text  { font-size: var(--sb-fs-sm); line-height: 1.6; color: var(--sb-text-muted); text-wrap: pretty; }
.sb-text + .sb-text { margin-top: 16px; }
.sb-mono  { font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono); color: var(--sb-text-faint); }

/* Bloco de valores de engenharia — respeita as quebras do material. */
.sb-dados {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-xs); line-height: 1.7;
  color: var(--sb-text-dim); white-space: pre-line;
}

/* =========================================================
   BOTÕES
========================================================= */
.sb-btn {
  display: inline-block;
  font-size: var(--sb-fs-body);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 17px 28px;
  border: 0;
  border-radius: var(--sb-radius);
  cursor: pointer;
  transition: var(--sb-transition);
  text-align: center;
}
.sb-btn--primary { background: var(--sb-green); color: var(--sb-text-strong); }
.sb-btn--primary:hover { background: var(--sb-green-hover); color: var(--sb-text-strong); }

.sb-btn--outline { background: transparent; border: 1px solid var(--sb-border-strong); color: var(--sb-text); }
.sb-btn--outline:hover { border-color: var(--sb-green-light); color: var(--sb-green-light); }

/* Sobre faixa verde — inverte para branco */
.sb-btn--light { background: var(--sb-text-strong); color: var(--sb-surface-deep); padding: 20px 36px; white-space: nowrap; }
.sb-btn--light:hover { background: var(--sb-text); color: var(--sb-surface-deep); }

.sb-btn--sm      { font-size: var(--sb-fs-xs); padding: 13px 12px; }
.sb-btn--block   { flex: 1 1 118px; }   /* empilha quando o card é estreito demais */
.sb-btn--compact { font-size: 14px; padding: 13px 20px; }
.sb-btn--largo   { display: block; width: 100%; }

/* Botão flutuante de WhatsApp */
.sb-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  background: var(--sb-green); color: var(--sb-text-strong);
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 16px 22px; box-shadow: var(--sb-shadow-fab); transition: var(--sb-transition);
  display: inline-flex; align-items: center; gap: 10px;
}
.sb-fab:hover { background: var(--sb-green-hover); color: var(--sb-text-strong); }
.sb-fab__icon { flex: none; }

/* Voltar ao topo — documento longo com índice (políticas de garantia).
   Empilhado ACIMA do FAB de WhatsApp, que ocupa o canto: 24px de base + a altura
   do FAB + respiro. Escuro e menor, para não competir com o botão de conversão.
   Só aparece depois que o índice sai da tela (assets/app.js) — no topo ele não
   teria função. */
.sb-topo {
  position: fixed; right: 24px; bottom: 92px; z-index: 60;
  background: var(--sb-surface-3); color: var(--sb-text);
  border: 1px solid var(--sb-border-strong);
  font-size: var(--sb-fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 12px 16px; box-shadow: var(--sb-shadow-fab);
  display: inline-flex; align-items: center; gap: 8px;
  transition: var(--sb-transition), opacity .2s ease, visibility .2s ease;
}
.sb-topo:hover { background: var(--sb-surface-2); color: var(--sb-text-strong); border-color: var(--sb-green); }
/* Escondido de verdade: sem foco de teclado e sem leitura por leitor de tela. */
.sb-topo[hidden] { display: inline-flex; opacity: 0; visibility: hidden; }

/* =========================================================
   HEADER / NAVEGAÇÃO
========================================================= */
.sb-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sb-veil-header);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sb-border);
}
/* Faixa diagonal — assinatura visual da marca */
.sb-header__rule {
  height: 2px;
  background: repeating-linear-gradient(115deg, var(--sb-green-light) 0 14px, var(--sb-bg) 14px 28px);
}
.sb-header__inner {
  max-width: var(--sb-container); margin: 0 auto;
  padding: 12px var(--sb-gutter); min-height: 76px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.sb-header__actions { display: flex; align-items: center; gap: 10px; }

.sb-brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.sb-brand__logo { height: 34px; width: auto; display: block; }
.sb-brand__tag {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono-tag); letter-spacing: .16em;
  color: var(--sb-text-dim); text-transform: uppercase;
  border-left: 1px solid var(--sb-border-subtle); padding-left: 12px;
}

.sb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-left: auto; }
.sb-nav__link {
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sb-text-nav); transition: var(--sb-transition);
}
.sb-nav__link:hover, .sb-nav__link[aria-current="page"] { color: var(--sb-green-light); }

.sb-dropdown { position: relative; display: flex; align-items: center; }
.sb-dropdown__menu {
  position: absolute; top: 100%; left: -14px; padding-top: 18px; min-width: 210px; z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s ease;
}
.sb-dropdown:hover .sb-dropdown__menu,
.sb-dropdown:focus-within .sb-dropdown__menu { opacity: 1; visibility: visible; }
.sb-dropdown__list { background: var(--sb-surface); border: 1px solid var(--sb-border); display: grid; }
.sb-dropdown__item {
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sb-text-nav); padding: 14px 18px; border-bottom: 1px solid var(--sb-border-soft);
  transition: var(--sb-transition);
}
.sb-dropdown__item:last-child { border-bottom: 0; }
.sb-dropdown__item:hover { color: var(--sb-green-light); }

/* O gatilho é <button> (rótulo do grupo, não destino): zera o visual nativo do
   botão para ele ficar idêntico aos demais itens da navegação. */
.sb-dropdown__trigger {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; line-height: inherit; cursor: default;
}
.sb-dropdown__chevron { transition: transform .16s ease; }
.sb-dropdown:hover .sb-dropdown__chevron,
.sb-dropdown:focus-within .sb-dropdown__chevron { transform: translateY(1px); }
.sb-nav__link[aria-current="true"] { color: var(--sb-green-light); }

/* =========================================================
   HAMBÚRGUER E PAINEL LATERAL — `.sb-burger` / `.sb-menu`
   Só abaixo de 760px. No desktop a navegação fica visível na barra
   (docs/decisions.md D7). Abertura e foco em assets/app.js.
========================================================= */
.sb-burger {
  display: none;
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: 1px solid var(--sb-border-subtle);
  place-content: center; gap: 5px; cursor: pointer;
}
.sb-burger__bar { display: block; width: 22px; height: 2px; background: var(--sb-text); }
.sb-burger__rotulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sb-menu { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; }
.sb-menu[hidden] { display: none; }
.sb-menu__veil { position: absolute; inset: 0; background: var(--sb-veil-modal); }
.sb-menu__panel {
  position: relative; width: min(340px, 86vw); height: 100%; overflow: auto;
  background: var(--sb-surface); border-left: 1px solid var(--sb-border);
  padding: 20px var(--sb-gutter) 40px;
  display: grid; align-content: start;
}
.sb-menu__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.sb-menu__eyebrow { margin-bottom: 0; }
.sb-menu__fechar {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--sb-border-subtle); color: var(--sb-text);
  padding: 10px 14px; transition: var(--sb-transition);
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono-xs);
  letter-spacing: .16em; text-transform: uppercase;
}
.sb-menu__fechar:hover { border-color: var(--sb-green-light); color: var(--sb-green-light); }
.sb-menu__link {
  font-size: var(--sb-fs-body); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sb-text-nav); padding: 17px 2px; border-bottom: 1px solid var(--sb-border-soft);
}
.sb-menu__link:hover, .sb-menu__link[aria-current="page"] { color: var(--sb-green-light); }
/* Cabeçalho do grupo no painel lateral: mesma caixa do item de menu, sem
   afordância de clique — a família não tem página. É <div>: a fonte e a
   entrelinha vêm declaradas aqui, não herdadas da regra global de títulos. */
.sb-menu__grupo {
  font-family: var(--sb-font-display); line-height: 1.05;
  font-size: var(--sb-fs-body); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sb-text-dim); margin: 0;
}
.sb-menu__sub {
  display: grid; padding: 0 0 12px 16px; margin-left: 2px;
  border-bottom: 1px solid var(--sb-border-soft); border-left: 2px solid var(--sb-border);
}
.sb-menu__sublink {
  font-size: var(--sb-fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sb-text-dim); padding: 11px 2px;
}
.sb-menu__sublink:hover, .sb-menu__sublink[aria-current="page"] { color: var(--sb-green-light); }
.sb-menu__cta { margin-top: 24px; }

@media (max-width: 760px) {
  .sb-nav { display: none; }
  .sb-burger { display: grid; }
}

/* =========================================================
   HERO DA HOME
========================================================= */
.sb-hero { border-bottom: 1px solid var(--sb-border); position: relative; overflow: hidden; }
.sb-hero__inner {
  max-width: var(--sb-container); margin: 0 auto; padding-inline: var(--sb-gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 56px; align-items: center; min-height: 560px;
}
.sb-hero__copy  { padding-block: 72px; }
.sb-hero__texto { margin-top: 24px; }
.sb-hero__media {
  aspect-ratio: 4/3.4; border: 1px solid var(--sb-border);
  width: 100%; max-width: 596px; height: 671px; max-height: 78vh;
  background-image: var(--sb-hatch);   /* hachura enquanto não há foto */
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: grid; place-items: center; justify-self: end;
}
/* Com foto real, o deslocamento verde entra — é o único elemento com sombra. */
.sb-hero__media--foto { box-shadow: var(--sb-shadow-hero); }
.sb-hero__actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

/* =========================================================
   TÍTULO À ESQUERDA, TEXTO À DIREITA — `.sb-split`
========================================================= */
.sb-split {
  display: grid; gap: 24px 56px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.sb-split__title { font-size: var(--sb-fs-h2-lg); line-height: 1.02; }
.sb-split__text  { font-size: var(--sb-fs-md); }
.sb-missao__lead { font-size: var(--sb-fs-md); margin-bottom: 28px; }

/* =========================================================
   FAIXA DE NÚMEROS — `.sb-stats`
   Prova social do canvas aprovado. Dois números, fundo verde.
========================================================= */
.sb-stats { background: var(--sb-green); color: var(--sb-text-strong); }
.sb-stats__inner {
  max-width: var(--sb-container); margin: 0 auto; padding: 34px var(--sb-gutter);
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.sb-stats__item { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.sb-stats__number {
  font-family: var(--sb-font-display); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 42px); line-height: 1;
}
.sb-stats__label { font-size: var(--sb-fs-sm); font-weight: 600; color: var(--sb-on-green-soft); }

/* =========================================================
   ABERTURA DE SEÇÃO COM RÉGUA — `.sb-section-head`
========================================================= */
.sb-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 40px;
  border-bottom: 1px solid var(--sb-border); padding-bottom: 24px;
}
.sb-section-head__title { font-size: var(--sb-fs-h2-lg); line-height: 1.02; }

/* =========================================================
   LISTA COM TRAÇO + IMAGEM GRANDE — `.sb-duo` / `.sb-marks`
========================================================= */
.sb-duo {
  display: grid; gap: 64px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.sb-duo__title {
  font-size: var(--sb-fs-h2-leve); line-height: 1.02;
  text-transform: none; font-weight: 500; margin-bottom: 28px;
}
.sb-duo__media {
  aspect-ratio: 1/1; border: 1px solid var(--sb-border);
  background: var(--sb-hatch); background-size: cover; background-position: center;
  display: grid; place-items: center;
}

.sb-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.sb-mark  { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.sb-mark__rule { height: 3px; background: var(--sb-green); margin-top: 13px; }
.sb-mark__title { font-size: var(--sb-fs-mark); line-height: 1.15; margin-bottom: 5px; }
.sb-mark__text  { font-size: var(--sb-fs-sm); line-height: 1.5; color: var(--sb-text-muted); }

/* =========================================================
   CARD DE PRODUTO
========================================================= */
.sb-card {
  border: 1px solid var(--sb-border); background: var(--sb-surface);
  display: flex; flex-direction: column;
}
/* Card inteiro é o link para a página do produto. */
.sb-card--link { color: inherit; text-decoration: none; transition: var(--sb-transition); }
.sb-card--link:hover { transform: translateY(-3px); border-color: var(--sb-green-light); }
.sb-card--link:focus-visible { outline: 2px solid var(--sb-green-light); outline-offset: 3px; }
/* <img> e não fundo CSS: só elemento de imagem aceita loading="lazy", e os
   cards ficam abaixo da dobra. A hachura continua atrás, como pouso enquanto
   a foto não chega — a caixa já está reservada pelo aspect-ratio. */
.sb-card__media {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4/3; background: var(--sb-hatch);
  object-fit: cover; object-position: center;
}
.sb-card__body    { padding: 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sb-card__title   { text-align: center; }
.sb-card__text    { font-size: var(--sb-fs-sm); line-height: 1.5; color: var(--sb-text-muted); }
.sb-card__tags    { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sb-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

.sb-tag {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono-xs);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sb-text-dim); border: 1px solid var(--sb-border); padding: 6px 10px;
}

/* =========================================================
   PÁGINA DE PRODUTO — abertura
========================================================= */
.sb-produto-hero { border-bottom: 1px solid var(--sb-border); background: var(--sb-surface); }
.sb-produto-hero__inner { padding-block: clamp(28px, 4vw, 44px) clamp(40px, 5vw, 60px); }
.sb-produto-hero h1 { font-size: min(var(--sb-fs-h1-interna), 46px); line-height: .98; margin-bottom: 20px; }
.sb-produto-hero__duo {
  display: grid; gap: 56px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
/* A coluna de copy estica até a altura da linha para que o botão de orçamento
   caia na mesma faixa do selo do CREA, como no canvas. */
.sb-produto-hero__duo > div:first-child { display: flex; flex-direction: column; }
.sb-produto-hero__duo .sb-btn--largo { margin-top: auto; }
.sb-produto-hero__texto { margin-bottom: 32px; }
.sb-produto-hero__texto .sb-lead { font-size: 18px; max-width: 50ch; }
.sb-produto-hero__coluna { display: grid; gap: 16px; align-content: start; }
.sb-produto-hero__foto {
  aspect-ratio: 4/3.2;
  position: relative; container-type: size;
}
/* A foto é <img>, não fundo CSS: o buscador indexa a imagem e o alt. A caixa
   continua sendo o .sb-produto-hero__foto; object-fit faz o papel do antigo
   background-size (contain aqui, cover na rampa). */
.sb-produto-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
/* Selo de garantia sobre a foto — ajuste o recuo em --sb-selo-recuo. */
.sb-selo-garantia {
  --sb-selo-recuo: 25px;
  /* A foto é quadrada e centralizada (contain): desconta a sobra lateral da caixa. */
  position: absolute; bottom: var(--sb-selo-recuo);
  right: calc(max(0px, (100cqw - 100cqh) / 2) + var(--sb-selo-recuo));
  width: clamp(80px, 22%, 130px); height: auto;
  animation: sb-selo-pulso 1.2s ease-in-out infinite;
}
@keyframes sb-selo-pulso {
  0%, 100% { transform: scale(1) rotate(0deg);     filter: drop-shadow(0 0 0 rgba(22, 196, 90, 0)); }
  50%      { transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 0 14px rgba(22, 196, 90, .75)); }
}
/* Movimento reduzido: só um pulso suave, sem giro. */
@keyframes sb-selo-pulso-suave {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .sb-selo-garantia { animation: sb-selo-pulso-suave 1.5s ease-in-out infinite; } }
/* Rampa: o equipamento é largo e a foto ocupa a largura inteira. */
.sb-produto-hero__foto--larga {
  aspect-ratio: 1200/569;
  border: 1px solid var(--sb-border); margin-bottom: 28px;
}
.sb-produto-hero__foto--larga .sb-produto-hero__img { object-fit: cover; }
/* Rampas: foto panorâmica (1192x350). */
.sb-produto-hero__foto--panoramica { aspect-ratio: 1192/350; }

/* Orçamento e selo do CREA na mesma faixa. */
.sb-acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.sb-acoes__btn  { flex: 0 1 300px; display: flex; align-items: center; justify-content: center; }
.sb-acoes__selo { flex: 1 1 340px; display: flex; align-items: center; }

/* =========================================================
   BADGE / DESTAQUE COM BARRA VERDE
========================================================= */
.sb-badge {
  border-left: 3px solid var(--sb-green);
  background: var(--sb-surface-deep);
  padding: 20px 22px;
}
/* Selo do CREA: contorno verde com barra esquerda reforçada. */
.sb-badge--crea { border: 1px solid var(--sb-green); border-left-width: 6px; text-align: center; justify-content: center; }
.sb-badge__title { font-size: var(--sb-fs-h4); line-height: 1.25; }
.sb-badge--opcionais {
  border: 1px solid var(--sb-border); border-left: 3px solid var(--sb-green);
  background: var(--sb-surface); padding: 26px 28px; margin-top: 32px;
}
.sb-opcionais__texto { font-size: var(--sb-fs-md); line-height: 1.55; color: var(--sb-text); }

/* =========================================================
   DIFERENCIAIS EM CARTÃO — `.sb-diffs` / `.sb-diff`
   Cartão com barra verde à esquerda, um por item.
========================================================= */
.sb-diffs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sb-diff {
  border: 1px solid var(--sb-border); border-left: 4px solid var(--sb-green);
  padding: 12px 14px;
  font-family: var(--sb-font-display); font-size: var(--sb-fs-diff); font-weight: 500;
  line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em;
}

/* =========================================================
   FICHA TÉCNICA
========================================================= */
.sb-spec { width: 100%; font-size: var(--sb-fs-body); }
.sb-spec tr { border-bottom: 1px solid var(--sb-border-soft); }
.sb-spec td { padding-block: 9px; }
.sb-spec td:first-child { color: var(--sb-text-dim); }
.sb-spec td:last-child  { font-weight: 600; text-align: right; }

@media (max-width: 640px) {
  .sb-spec td { display: block; padding: 0; }
  /* Especificidade casada com td:last-child — senão o valor continua à direita */
  .sb-spec td:first-child,
  .sb-spec td:last-child { text-align: left; }
  .sb-spec td:first-child {
    padding-top: 14px; font-size: var(--sb-fs-xs);
    letter-spacing: .04em; text-transform: uppercase;
  }
  .sb-spec td:last-child { padding-bottom: 14px; font-size: 18px; }
}

/* Nota abaixo da ficha técnica */
.sb-spec__nota { margin-top: 16px; color: var(--sb-text-dim); }

/* =========================================================
   PROVAS DE ENGENHARIA — `.sb-proof`
   Quatro imagens técnicas, cada uma abrindo o detalhe em modal.
========================================================= */
.sb-proof {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.sb-proof--5 { gap: 20px; }
@media (min-width: 1100px) {
  .sb-proof--5 { grid-template-columns: repeat(5, 1fr); }
  .sb-proof--5 .sb-proof__caption { font-size: 17px; }
}
.sb-proof__item { margin: 0; display: grid; gap: 14px; }
.sb-proof__botao {
  position: relative; display: block; padding: 0; width: 100%;
  background: transparent; border: 1px solid var(--sb-border);
  cursor: pointer; transition: var(--sb-transition);
}
.sb-proof__botao:hover { transform: translateY(-3px); border-color: var(--sb-green-light); }
/* <img> e não fundo CSS, pelo loading="lazy" — as quatro provas ficam abaixo
   da dobra. A caixa continua reservada pelo aspect-ratio. */
.sb-proof__media {
  display: block; width: 100%; height: auto; aspect-ratio: 1/1;
  object-fit: cover; object-position: center;
}
.sb-proof__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--sb-green); color: var(--sb-text-strong);
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono-tag);
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px;
}
.sb-proof__caption {
  font-family: var(--sb-font-display); font-weight: 700; font-size: 19px;
  line-height: 1.15; text-align: center;
}

/* Prova única e larga — composição das rampas. */
.sb-analise { display: grid; gap: 24px; }
/* <img> e não fundo CSS, pelo loading="lazy" — fica no fim da página. */
.sb-analise__media {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1024/256; border: 1px solid var(--sb-border);
  object-fit: cover; object-position: center;
}

/* =========================================================
   CARTÕES DE DOCUMENTO — `.sb-doc`
========================================================= */
.sb-doc {
  border: 1px solid var(--sb-border); background: var(--sb-surface);
  padding: 30px 28px; display: grid; gap: 16px; align-content: start;
  color: var(--sb-text); transition: var(--sb-transition);
}
.sb-doc:hover { border-color: var(--sb-green-light); color: var(--sb-text); }
.sb-doc__icone { color: var(--sb-green-light); }
.sb-doc__title { font-size: var(--sb-fs-doc); margin-bottom: 6px; }
.sb-doc__text  { font-size: var(--sb-fs-sm); line-height: 1.5; color: var(--sb-text-muted); }
.sb-doc__acao  {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--sb-green-light);
}

/* =========================================================
   FIGURA / PLACEHOLDER
========================================================= */
.sb-figure { margin: 0; }
.sb-figure__media {
  aspect-ratio: 3/2; border: 1px solid var(--sb-border);
  background: var(--sb-hatch); background-size: cover; background-position: center;
  display: grid; place-items: center;
}
.sb-figure__ph {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono-xs);
  color: var(--sb-text-dim); text-align: center; padding-inline: 14px; line-height: 1.6;
}
.sb-figure figcaption { font-size: var(--sb-fs-xs); color: var(--sb-text-dim); margin-top: 10px; }


/* =========================================================
   DESTAQUE DE SEGURANÇA — `.sb-seguranca`
   Painel cheio verde, exclusivo das rampas pneumáticas: a válvula de
   retenção é o argumento que precisa ser lido antes das análises.
========================================================= */
.sb-seguranca-wrap { padding-bottom: var(--sb-section-y); }
.sb-seguranca {
  background: var(--sb-green); color: var(--sb-text-strong);
  padding: clamp(26px, 3.4vw, 38px) clamp(24px, 3vw, 40px);
}
.sb-seguranca__title {
  color: #FFFB00;
  font-size: var(--sb-fs-h2);
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.sb-seguranca__texto {
  font-size: var(--sb-fs-md); line-height: 1.6;
  color: var(--sb-on-green-soft); max-width: 86ch; text-wrap: pretty;
}
.sb-seguranca__texto b { color: var(--sb-text-strong); }
/* Rampa: a foto cobre a caixa inteira, sem sobra lateral. */
.sb-produto-hero__foto--larga .sb-selo-garantia { right: var(--sb-selo-recuo); }
/* Ações abaixo do bloco de segurança (rampas). */
.sb-seguranca + .sb-acoes { margin-top: 25px; }
/* Rampa com ações movidas para baixo: segurança a 25px da foto. */
.sb-produto-hero__foto--larga:last-child { margin-bottom: 0; }
.sb-produto-hero__inner:has(.sb-produto-hero__foto--larga:last-child) { padding-bottom: 0; }
.sb-produto-hero:has(.sb-produto-hero__foto--larga:last-child) + main > .sb-seguranca-wrap:first-child { padding-top: 24px; }
.sb-seguranca-wrap:has(.sb-acoes) { padding-bottom: 20px; }

/* =========================================================
   FAIXA DE CTA
========================================================= */
.sb-cta { background: var(--sb-green); color: var(--sb-text-strong); }
.sb-cta__inner {
  max-width: var(--sb-container); margin: 0 auto; padding: 48px var(--sb-gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px;
}
.sb-cta__title { font-size: var(--sb-fs-h2-cta); line-height: 1.02; }

/* =========================================================
   MODAL / LIGHTBOX
   Abertura, Escape, foco preso e retorno ao gatilho: assets/app.js.
========================================================= */
.sb-modal {
  position: fixed; inset: 0; z-index: 200;
  background: var(--sb-veil-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sb-gutter); overflow: auto;
}
.sb-modal[hidden] { display: none; }
.sb-modal__panel {
  position: relative; width: 1080px; max-width: 100%;
  background: var(--sb-surface); border: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow-modal);
  display: grid; grid-template-columns: 1fr 1fr;
}
.sb-modal__media {
  aspect-ratio: 1/1; max-height: 540px;
  position: relative;
}
/* A foto é <img> (indexável, com alt), não fundo CSS; object-fit faz o papel do
   antigo background-size: cover. loading="lazy" dentro do modal oculto: só
   baixa quando o detalhe é aberto, como o fundo fazia. */
.sb-modal__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.sb-modal__body {
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  padding: clamp(20px, 3.4vw, 40px); max-height: 540px; overflow: auto;
}
.sb-modal__title { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.05; }
.sb-modal__fechar {
  position: absolute; top: 0; right: 0; cursor: pointer;
  background: var(--sb-green); color: var(--sb-text-strong); border: 0;
  padding: 12px 14px; line-height: 0; transition: var(--sb-transition);
}
.sb-modal__fechar:hover { background: var(--sb-green-hover); }

@media (max-width: 760px) {
  .sb-modal__panel { grid-template-columns: 1fr; }
  .sb-modal__body  { max-height: none; }
}

/* =========================================================
   CONTATO — canais, informações e notas
========================================================= */
.sb-contato__title { font-size: var(--sb-fs-h1-interna); line-height: .98; max-width: 24ch; margin-bottom: 48px; }
.sb-contato {
  display: grid; gap: 56px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.sb-contato__coluna { display: grid; gap: 18px; align-content: start; }

.sb-canal {
  background: var(--sb-green); border: 1px solid var(--sb-green); color: var(--sb-text-strong);
  padding: 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  transition: var(--sb-transition);
}
.sb-canal:hover { background: var(--sb-green-hover); border-color: var(--sb-green-hover); color: var(--sb-text-strong); }
.sb-canal__eyebrow {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sb-on-green-soft); margin-bottom: 6px;
}
.sb-canal__title {
  font-family: var(--sb-font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 32px); line-height: 1; text-transform: uppercase;
}
.sb-canal__valor { font-size: var(--sb-fs-body); font-weight: 600; margin-top: 6px; }
.sb-canal__seta  { font-family: var(--sb-font-display); font-weight: 700; font-size: 34px; }

.sb-info { border: 1px solid var(--sb-border); padding: 20px; }
.sb-info__rotulo {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sb-text-dim); margin-bottom: 8px;
}
.sb-info__valor { font-size: 18px; font-weight: 600; line-height: 1.4; }

.sb-nota { border: 1px solid var(--sb-border); background: var(--sb-surface); padding: 30px; }
.sb-nota__title { font-size: var(--sb-fs-h3-nota); margin-bottom: 12px; }


/* Coluna direita: o cartão estica até a altura da coluna de canais. */
.sb-contato__coluna--cheia { align-self: stretch; grid-template-rows: 1fr; }
.sb-nota--destaque { display: flex; flex-direction: column; padding: 40px 36px; border-top: 3px solid var(--sb-green); }
.sb-nota--destaque .sb-nota__title { font-size: clamp(28px, 3vw, 38px); line-height: 1; margin: 18px 0 28px; }
.sb-nota__icone { color: var(--sb-green-light); }
.sb-servicos { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; align-content: space-evenly; }
.sb-servico { display: flex; gap: 20px; align-items: flex-start; padding: 26px 0; border-top: 1px solid var(--sb-border); }
.sb-servico__icone {
  flex: none; width: 56px; height: 56px; padding: 12px;
  color: var(--sb-green-light); border: 1px solid var(--sb-green);
}
.sb-servico__title { font-size: 22px; margin-bottom: 4px; }

/* =========================================================
   FOOTER
========================================================= */
.sb-footer { border-top: 1px solid var(--sb-border); background: var(--sb-surface-foot); }
.sb-footer__inner {
  max-width: var(--sb-container); margin: 0 auto;
  padding: 64px var(--sb-gutter) 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 48px;
}
.sb-footer__logo  { height: 30px; width: auto; display: block; margin-bottom: 18px; }
.sb-footer__about { max-width: 42ch; }
.sb-footer__cnpj  { margin-top: 20px; color: var(--sb-text-dim); }
.sb-footer__head {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sb-green-light); margin-bottom: 18px;
}
.sb-footer__list { display: grid; gap: 12px; }
.sb-footer__link { font-size: var(--sb-fs-sm); color: var(--sb-text-nav); }
.sb-footer__link:hover { color: var(--sb-green-light); }
.sb-footer__link--plain { color: var(--sb-text-dim); }
.sb-footer__bottom {
  max-width: var(--sb-container); margin: 0 auto;
  padding: 20px var(--sb-gutter) 88px;  /* espaço para o botão flutuante */
  border-top: 1px solid var(--sb-border-soft);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sb-gutter);
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono); color: var(--sb-text-dim);
}
.sb-footer__bottom a { color: var(--sb-text-dim); }
.sb-footer__bottom a:hover { color: var(--sb-green-light); }

/* =========================================================
   TRILHA DE NAVEGAÇÃO — `.sb-breadcrumb`
========================================================= */
.sb-breadcrumb {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono);
  color: var(--sb-text-dim); margin-bottom: 28px;
}
.sb-breadcrumb a { color: var(--sb-text-dim); }
.sb-breadcrumb a:hover { color: var(--sb-green-light); }

/* Texto de abertura de seção */
.sb-section-lead { max-width: 82ch; margin-bottom: 40px; font-size: var(--sb-fs-md); }

/* =========================================================
   TEXTO CORRIDO LONGO — `.sb-prose`
   Página legal: texto ocupa a largura do container e é justificado.
========================================================= */
.sb-prose__h1 { font-size: var(--sb-fs-h2); margin-bottom: 32px; }
.sb-prose { max-width: none; }   /* ocupa a largura do container (.sb-container) */
/* Justificado com hifenização (html lang="pt-BR") para evitar rios de espaço. */
.sb-prose .sb-text,
.sb-prose__list li { text-align: justify; text-wrap: pretty; hyphens: auto; }
.sb-prose > * + * { margin-top: 16px; }
.sb-prose .sb-section-title { margin-top: 56px; }
.sb-prose__head {
  font-size: var(--sb-fs-h4); margin-top: 40px; margin-bottom: 4px;
  color: var(--sb-text-strong);
}
.sb-prose__subhead {
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sb-green-light);
  margin-top: 32px; margin-bottom: 4px; font-weight: 500;
}
.sb-prose__list {
  margin: 0; padding-left: 20px;
  font-size: var(--sb-fs-sm); line-height: 1.6; color: var(--sb-text-muted);
}
.sb-prose__list li { margin-top: 6px; }
.sb-prose__list li::marker { color: var(--sb-green-light); }

/* =========================================================
   ÍNDICE DA PÁGINA — `.sb-indice`
   Sumário no topo de documento longo (políticas de garantia). Duas colunas a
   partir de 760px: com oito seções, uma coluna só empurraria o texto para baixo
   da dobra sem necessidade.
========================================================= */
/* Onde a âncora para: abaixo do cabeçalho sticky, cuja altura o app.js mede em
   --sb-header-h (ela muda quando a navegação quebra em duas linhas). O valor de
   reserva vale para o caso sem JS, com o cabeçalho na altura mínima. */
:root { --sb-ancora: calc(var(--sb-header-h, 76px) + 20px); }

.sb-indice {
  margin-top: 32px;
  padding: 24px;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-left: 2px solid var(--sb-green);
}
.sb-indice__rotulo {
  scroll-margin-top: var(--sb-ancora);
  font-family: var(--sb-font-mono); font-size: var(--sb-fs-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sb-green-light);
  font-weight: 500; margin: 0 0 14px;
}
.sb-indice__lista {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 10px 32px;
  counter-reset: none;   /* a numeração é do próprio texto do item (1.1, 1.2, ...) */
}
@media (min-width: 760px) {
  .sb-indice__lista { grid-template-columns: 1fr 1fr; }
}
.sb-indice__link {
  display: block;
  font-size: var(--sb-fs-sm); line-height: 1.45;
  color: var(--sb-text-muted); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sb-indice__link:hover,
.sb-indice__link:focus-visible { color: var(--sb-text-strong); border-bottom-color: var(--sb-green); }

.sb-prose__head { scroll-margin-top: var(--sb-ancora); }

/* =========================================================
   SUPERFÍCIES DO NAVEGADOR
   O que não desenhamos também é do design system.
========================================================= */
html { scrollbar-color: var(--sb-border-strong) var(--sb-bg); scrollbar-width: thin; }
::selection { background: var(--sb-green); color: var(--sb-text-strong); }
:root { caret-color: var(--sb-green-light); }

/* Pular para o conteúdo — visível só no foco por teclado */
.sb-skip {
  position: absolute; left: var(--sb-gutter); top: -100px; z-index: 100;
  background: var(--sb-green); color: var(--sb-text-strong);
  font-size: var(--sb-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 12px 18px; transition: top .18s cubic-bezier(.16, 1, .3, 1);
}
.sb-skip:focus-visible { top: 12px; color: var(--sb-text-strong); }

/* =========================================================
   MOMENTO DE ENTRADA — só o hero, uma vez
========================================================= */
@keyframes sb-rise {
  from { opacity: .001; transform: translateY(14px); }
  to   { opacity: 1;    transform: none; }
}
.sb-reveal > * { animation: sb-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
.sb-reveal > *:nth-child(2) { animation-delay: .08s; }
.sb-reveal > *:nth-child(3) { animation-delay: .16s; }

/* =========================================================
   CARROSSEL DO INSTAGRAM — ocupa o lugar da foto do hero
   Os posts são 1080×1350 (4:5). A área da imagem segue essa proporção
   para não cortar arte com texto; a barra de controles fica abaixo,
   fora da imagem.
========================================================= */
.sb-igc {
  /* Largura limitada também pela altura da tela, para o 4:5 caber sem rolar. */
  width: min(100%, 596px, calc((78vh - 64px) * .8));
  height: auto; max-height: none; aspect-ratio: auto;
  display: block; background-image: none; background-color: var(--sb-surface);
}
.sb-igc__track {
  /* --igc-r é a proporção do post visível (app.js); 4/5 até a imagem carregar.
     A altura acompanha a imagem, a largura da coluna fica fixa. */
  list-style: none; margin: 0; padding: 0; width: 100%; aspect-ratio: var(--igc-r, 0.8);
  max-height: calc(78vh - 64px); transition: aspect-ratio .3s ease;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.sb-igc__track::-webkit-scrollbar { display: none; }
.sb-igc__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.sb-igc__slide a { position: relative; display: block; height: 100%; }
/* contain: a imagem inteira sempre aparece, seja qual for a proporção do post
   (4:5, quadrado, paisagem, capa de vídeo). Sobra faixa escura, nunca corte. */
.sb-igc__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sb-igc__slide { background: var(--sb-surface-deep); }
.sb-igc__video {
  position: absolute; top: 12px; left: 12px; padding: 4px 8px;
  background: rgba(19, 21, 23, .8); color: var(--sb-text);
  font: 500 12px/1 var(--sb-font-mono); text-transform: uppercase; letter-spacing: .06em;
}
.sb-igc__bar {
  height: 64px; padding-inline: 16px; border-top: 1px solid var(--sb-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sb-igc__perfil { color: var(--sb-text-strong); font: 600 15px/1 var(--sb-font-display); text-transform: uppercase; letter-spacing: .06em; }
.sb-igc__nav { display: flex; gap: 8px; }
.sb-igc__btn {
  width: 44px; height: 44px; border: 1px solid var(--sb-border-strong); border-radius: 0;
  background: var(--sb-bg); color: var(--sb-text-strong); font-size: 20px; cursor: pointer;
}
.sb-igc__btn:hover { background: var(--sb-green); border-color: var(--sb-green); }
.sb-igc__btn:focus-visible, .sb-igc__perfil:focus-visible, .sb-igc__slide a:focus-visible { outline: 2px solid var(--sb-green-light); outline-offset: -2px; }
/* O deslize é feito em assets/app.js; scroll-behavior aqui brigaria com ele. */