/* ═════════════════════════════════════════════════════════════════
   RIVIO — Faro (faro.html) · desde 2026-11-10

   A página da Faro, a primeira empresa do Grupo Rivio: o braço de
   operações que opera o ciclo de receita e treina os modelos. Família
   HOME (DIRETRIZES § 3.5): herói, cabeçalho empilhado claro
   (`cabeca-pilha`), `dark-section`, eyebrow, `cta-seta` e o CTA
   fotográfico vêm da `componentes.css`. O que mora aqui é só o que o
   site não tinha:

   · a COR DA FARO (#2E27F3, o azul da marca, mais violeta que o
     Brand/Blue da Rivio) — não é token do design system, fica
     escopada no `.faro-pagina`, como as cores do cartaz do Founders
     Fellow. Ela aparece em dois lugares: nas etiquetas das seções
     claras e na faixa da marca. É a "diferença só para ser uma marca
     diferente" que o Matheus pediu; o resto é o site;
   · o véu do herói, mais fechado no pé (a foto do chip é clara);
   · os quatro passos da seção escura (`.faro-passos`);
   · a faixa da marca com o lockup "Faro, part of Rivio" (`.faro-marca`);
   · os três fatos do grupo (`.faro-grupo`).

   Medidas na grade de 8 (§ 3.13); os tipos são os do site.
   ═════════════════════════════════════════════════════════════════ */

.faro-pagina {
  --faro-azul: #2e27f3;
  background: #fff;
}

/* ── O herói ─────────────────────────────────────────────────────
   O chip sobre um campo azul-cinza claro: o véu do site (0,42 → 0,58)
   deixava a etiqueta (branca a 64%) e o "Scroll to explore" abaixo de
   4,5:1 sobre o campo claro do pé. Este fecha mais embaixo, em curva
   suave (§ 3.14): leve na tela toda, e da metade para o pé sobe até
   0,72. Medido no pixel p95 atrás de cada texto a 1440 × 816, 1920 ×
   1080, 1280 × 660 e 375 × 812 (HISTORICO s103). */
.faro-hero .hero__media::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.36) 0%,
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.28) 62%,
    rgba(0, 0, 0, 0.42) 74%,
    rgba(0, 0, 0, 0.58) 86%,
    rgba(0, 0, 0, 0.7) 96%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

/* ── As seções claras ───────────────────────────────────────────── */
.faro-sec {
  padding: 120px 0;
  background: #fff;
}

/* A etiqueta no azul da Faro (7,8:1 sobre o branco). A medida vem do
   `.eyebrow`; só a cor é daqui — como manda o padrão da tag. */
.faro-eyebrow { color: var(--faro-azul); }

/* ── § 3 · Os quatro passos ──────────────────────────────────────
   Na seção escura, dentro da coluna do `dark-section__head` (o mesmo
   recuo, a mesma largura). Fio de 1px em cima de cada passo (a exceção
   do fio, § 3.13), o número em etiqueta, o título a 22 e o texto a
   16/1,5/300. */
.faro-passos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  width: min(1216px, calc(100% - 2 * var(--dark-pad)));
  margin: 0 0 0 var(--dark-pad);
  padding: 0;
  list-style: none;
}

.faro-passos__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--light-16);
}

.faro-passos__num {
  margin: 0;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--light-64);
}

.faro-passos__tit {
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.24;
  color: var(--light-01);
}

.faro-passos__txt {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
  text-wrap: pretty;
}

/* ── § 4 · A faixa da marca ──────────────────────────────────────
   O azul da Faro de borda a borda, o lockup no centro: o logo (o vetor
   da marca, 5190 × 1620 de caixa) com 560 de largura a 1440, e embaixo
   "part of" com o logo da Rivio. Branco sobre #2E27F3: 7,8:1. */
.faro-marca {
  padding: 160px var(--gutter);
  background: var(--faro-azul);
  color: #fff;
}

.faro-marca__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: min(1216px, 100%);
  margin: 0 auto;
}

.faro-marca__logo {
  display: block;
  width: clamp(200px, 38.888vw, 560px);
  height: auto;
  aspect-ratio: 5190 / 1620;
}

.faro-marca__de {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--light-80);
}

.faro-marca__rivio {
  display: block;
  width: 96px;
  height: auto;
  color: #fff;
}

/* ── § 5 · Os três fatos do grupo ────────────────────────────────
   Abaixo do cabeçalho empilhado, três colunas na coluna de 1216: fio
   de 1px em cima, título a 22 em Dark-01, texto a 16/1,5/300 em
   Dark-03 (o corpo das páginas, § 8). */
.faro-grupo__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 72px auto 0;
  padding: 0;
  list-style: none;
}

.faro-grupo__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(24, 27, 31, 0.12);
}

.faro-grupo__tit {
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.24;
  color: var(--dark-01);
}

.faro-grupo__txt {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-03);
  text-wrap: pretty;
}

/* ── A faixa entre o tablet e o celular ─────────────────────────── */
@media (max-width: 1100px) {
  .faro-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── O estreito ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .faro-sec { padding: 80px 0; }
  .faro-passos { gap: 24px; }
  .faro-passos__tit,
  .faro-grupo__tit { font-size: 18px; }
  .faro-passos__txt,
  .faro-grupo__txt { font-size: var(--p-mobile); }
  .faro-marca { padding: 96px var(--gutter); }
  .faro-marca__inner { gap: 32px; }
  .faro-marca__de { font-size: 16px; gap: 12px; }
  .faro-marca__rivio { width: 72px; }
  .faro-grupo__lista { gap: 24px; margin-top: 48px; }
}

@media (max-width: 700px) {
  .faro-passos,
  .faro-grupo__lista { grid-template-columns: minmax(0, 1fr); }
}