/* =========================================================
   LIKE · página institucional
   Página "sobre" que quase ninguém lê costuma ser um texto só.
   Aqui o ritmo alterna: bloco de leitura, declaração cheia, prova
   em número, lista. O olho descansa e a pessoa chega ao fim.
   ========================================================= */

/* ------------------------------------------------------- capa */

.sb-capa {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: flex-end;
  background: #0b0b0c;
  color: #fbfaf6;
  overflow: clip;
  padding: var(--s9) 0 var(--s8);
}

.sb-capa-fundo { position: absolute; inset: 0; }

.sb-capa-fundo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 55%; display: block;
}

.sb-capa-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.28) 40%, rgba(11,11,12,.9) 100%);
}

.sb-capa-txt {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding-inline: var(--gutter);
}

.sb-capa h1 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -.028em;
  margin: 0 0 var(--s5);
  max-width: 16ch;
  text-wrap: balance;
}

.sb-capa p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: rgba(251, 250, 246, .8);
  margin: 0;
  max-width: 52ch;
}

/* ------------------------------------------------- blocos */

.sb { background: var(--paper, #f6f4ef); color: var(--ink, #14140f); }

.sb-bloco {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--s9) var(--gutter);
}

.sb-bloco h2 {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 var(--s5);
  max-width: 18ch;
}

.sb-bloco p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(20, 20, 15, .8);
  margin: 0 0 var(--s5);
  max-width: 66ch;
}

.sb-lead {
  font-size: clamp(18px, 1.6vw, 21px) !important;
  line-height: 1.65 !important;
  color: rgba(20, 20, 15, .92) !important;
}

.sb-bloco strong { font-weight: 500; color: rgba(20, 20, 15, .96); }

/* ------------------------------------------- declaração da regra */

.sb-regra {
  background: #0b0b0c;
  color: #fbfaf6;
  padding: var(--s9) 0;
}

.sb-regra-int {
  max-width: 900px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.sb-frase {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.24;
  letter-spacing: -.02em;
  margin: var(--s4) 0 var(--s6);
}

.sb-frase em { font-style: normal; color: var(--lk-gold); }

.sb-regra-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(251, 250, 246, .68);
  margin: 0 auto;
  max-width: 56ch;
}

.sb-regra .art-tag { color: var(--lk-gold); }

/* ------------------------------------------------- exemplos */

.sb-exemplos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6) var(--s7);
}

.sb-exemplos b {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(20, 20, 15, .96);
  margin-bottom: var(--s2);
}

.sb-exemplos p { font-size: 15.5px; line-height: 1.72; margin: 0; }

/* -------------------------------------------------- números */

.sb-numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s9);
  border-top: 1px solid rgba(20, 20, 15, .14);
  padding-top: var(--s7);
}

.sb-num b {
  display: block;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: var(--s2);
}

.sb-num span {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(20, 20, 15, .62);
}

/* --------------------------------------------------- valores */

.sb-valores {
  list-style: none;
  counter-reset: v;
  margin: 0;
  padding: 0;
}

.sb-valores li {
  counter-increment: v;
  border-top: 1px solid rgba(20, 20, 15, .14);
  padding: var(--s5) 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--s4);
}

.sb-valores li::before {
  content: counter(v, decimal-leading-zero);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: #8a6320;
  padding-top: 4px;
}

.sb-valores b {
  display: block;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.25;
  margin-bottom: var(--s2);
}

.sb-valores p { font-size: 15.5px; margin: 0; }

/* ------------------------------------------------ o que vende */

.sb-linhas { display: grid; gap: 0; }

.sb-linhas a {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--s5);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(20, 20, 15, .14);
  padding: var(--s5) 0;
  min-height: 44px;
  transition: background .25s ease, padding-left .25s ease;
}

.sb-linhas a:last-child { border-bottom: 1px solid rgba(20, 20, 15, .14); }

.sb-linhas a:hover {
  background: rgba(200, 149, 74, .07);
  padding-left: var(--s3);
}

.sb-linhas b {
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.2;
}

.sb-linhas span {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(20, 20, 15, .72);
}

/* ---------------------------------------------------- mobile */

@media (max-width: 820px) {
  .sb-capa { min-height: 0; padding: var(--s8) 0 var(--s7); }
  .sb-capa h1 { max-width: none; }
  .sb-bloco { padding: var(--s8) var(--gutter); }
  .sb-bloco h2 { max-width: none; }
  .sb-exemplos { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .sb-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
  .sb-valores li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .sb-valores li::before { padding-top: 0; }
  .sb-linhas a { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .sb-regra-int { text-align: left; }
}

/* O `.sb-bloco p` pintava de tinta escura também o parágrafo dentro da
   caixa preta do CTA: texto escuro sobre fundo escuro, 1,06:1. */
.sb-bloco .art-cta p { color: rgba(251, 250, 246, .72); max-width: 52ch; }
.sb-bloco .art-cta h2 { color: #fbfaf6; max-width: none; }