/* ==========================================================================
   STHEFANY — a agência
   sobre.css · v0.1.0
   --------------------------------------------------------------------------
   Página institucional. O visitante aqui é quem já decidiu que vai contratar
   alguém e está decidindo se contrata por esta agência. Ele não quer história
   de fundação: quer saber se a Sthefany resolve o problema dele.

   Por isso a página é uma sequência de respostas, não uma narrativa:
   o que a agência faz, como o processo funciona, o que ela entrega junto,
   e prova de que já fez isso antes.
   ========================================================================== */

/* --- abertura ------------------------------------------------------------------
   Fotografia sangrando, com a frase que a própria agência usa há mais de dez
   anos no site antigo. Ela é boa e é verdadeira; não havia por que inventar
   outra. */

.sp-sobre-topo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76svh, 44rem);
  padding-block: calc(var(--sp-cabecalho) + var(--sp-e-6)) var(--sp-e-8);
  overflow: hidden;
  isolation: isolate;
  color: var(--sp-texto);
}

.sp-sobre-topo__fundo { position: absolute; inset: 0; z-index: 0; }
.sp-sobre-topo__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.sp-sobre-topo__tinta {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sp-vinho);
  mix-blend-mode: color;
  opacity: .58;
}

.sp-sobre-topo__veu {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(11, 5, 5, .72), transparent 20%),
    linear-gradient(to right, rgba(11, 5, 5, .88), rgba(11, 5, 5, .18) 62%),
    linear-gradient(to top, rgba(11, 5, 5, .94) 2%, rgba(11, 5, 5, .3) 44%, transparent 76%);
}

.sp-sobre-topo__corpo { position: relative; z-index: 3; }

.sp-sobre-topo__frase {
  max-width: 22ch;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  letter-spacing: -0.03em;
}

.sp-sobre-topo__apoio {
  max-width: 46ch;
  margin-block-start: var(--sp-e-5);
  color: var(--sp-texto-2);
  font-size: 1.1875rem;
}

/* --- números -------------------------------------------------------------------
   Faixa fina logo abaixo da abertura. Número em tipografia grande com rótulo
   pequeno é o tique mais gasto de página institucional — aqui ele se justifica
   porque os três números respondem exatamente o que o contratante pergunta:
   quantos artistas, desde quando, onde já tocaram. */

.sp-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-e-6);
  padding-block: var(--sp-e-8);
  border-block-end: 1px solid var(--sp-linha-clara);
}

.sp-numero__valor {
  font-family: var(--sp-fonte-titulo);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.03em;
  color: var(--sp-acento-texto);
  font-variant-numeric: tabular-nums;
}

.sp-numero__rotulo {
  margin-block-start: var(--sp-e-3);
  max-width: 24ch;
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
}

/* --- o que fazemos -------------------------------------------------------------- */

.sp-sobre-bloco { padding-block: var(--sp-secao-meia); }

.sp-sobre-bloco__topo {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-e-6) var(--sp-e-8);
  align-items: start;
  margin-block-end: var(--sp-e-7);
}

.sp-sobre-bloco__titulo { max-width: 16ch; }

.sp-sobre-bloco__texto {
  max-width: 52ch;
  color: var(--sp-tinta-2);
}
.sp-sobre-bloco__texto p + p { margin-block-start: var(--sp-e-4); }

/* --- processo -------------------------------------------------------------------
   Aqui os marcadores numerados são legítimos: é uma sequência de verdade, e a
   ordem importa para quem nunca contratou show. */

.sp-passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-e-6);
  counter-reset: passo;
}

.sp-passo { counter-increment: passo; }

.sp-passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  margin-block-end: var(--sp-e-4);
  padding-block-end: var(--sp-e-3);
  border-block-end: 1px solid var(--sp-acento);
  font-family: var(--sp-fonte-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sp-acento-texto);
  font-variant-numeric: tabular-nums;
}

.sp-passo__titulo {
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
  font-weight: 600;
  line-height: 1.15;
}

.sp-passo__texto {
  margin-block-start: var(--sp-e-3);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
}

/* --- o que vai junto ------------------------------------------------------------ */

.sp-inclui {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-e-6);
}

.sp-inclui__item { display: grid; gap: var(--sp-e-3); align-content: start; }
.sp-inclui__item i { font-size: 1.75rem; color: var(--sp-acento-texto); }

.sp-inclui__titulo {
  font-family: var(--sp-fonte-titulo);
  font-size: 1.125rem;
  font-weight: 600;
}

.sp-inclui__texto { color: var(--sp-tinta-2); font-size: var(--sp-t-peq); }

/* --- faixa escura de prova ------------------------------------------------------ */

.sp-prova { padding-block: var(--sp-e-9); margin-block: var(--sp-e-8); }

.sp-prova__interno {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-e-8);
  align-items: center;
}

.sp-prova__foto { border-radius: var(--sp-raio-bloco); aspect-ratio: 4 / 3; }

.sp-prova__citacao {
  font-family: var(--sp-fonte-titulo);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 26ch;
}

.sp-prova__quem {
  margin-block-start: var(--sp-e-5);
  color: var(--sp-texto-2);
  font-size: var(--sp-t-peq);
}

@media (max-width: 64rem) {
  .sp-sobre-bloco__topo,
  .sp-prova__interno { grid-template-columns: minmax(0, 1fr); }
  .sp-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-e-4); }
}

@media (max-width: 48rem) {
  .sp-sobre-topo {
    min-height: auto;
    padding-block: calc(var(--sp-cabecalho-min) + var(--sp-e-8)) var(--sp-e-7);
  }
  /* Três números em 360px viram três colunas de duas letras. */
  .sp-numeros { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-5); }
  .sp-numero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-e-4); align-items: center; }
  .sp-numero__rotulo { margin-block-start: 0; }
}

/* --- citação -----------------------------------------------------------------
   Uma só na página, e de fonte externa citável. Fio no acento à esquerda, como
   no corpo do artigo: é o mesmo gesto, e repetir o gesto é o que faz o sistema
   parecer um sistema. */

.sp-citacao {
  margin: var(--sp-e-8) 0 0;
  padding-inline-start: var(--sp-e-6);
  border-inline-start: 2px solid var(--sp-acento);
  max-width: 46ch;
}

.sp-citacao blockquote {
  margin: 0;
  font-family: var(--sp-fonte-titulo);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.sp-citacao figcaption {
  margin-block-start: var(--sp-e-4);
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-peq);
}