/* ============================================================================
   shark-web · TIPOGRAFIA E OS TRATAMENTOS DE H1
   ----------------------------------------------------------------------------
   A escala display e os seis tratamentos de titulo de dobra.

   Regra de marcacao que vale para todos: o tratamento e uma CLASSE, nao uma
   tag. Uma pagina tem UM <h1>, e ele fica onde a hierarquia manda, nao onde o
   desenho quer letra grande. Se um <h2> precisa parecer titulo de dobra, ele
   ganha .sw-d1 e continua sendo <h2>. Isso importa para o leitor de tela e
   importa para o agente de IA que le a pagina sem enxergar o layout.
   ========================================================================== */

/* ============================================================================
   ESCALA
   ========================================================================== */

.sw-d1,
.sw-d2,
.sw-d3 {
  font-family: var(--ds-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700;
  color: var(--sw-tinta-1);
  margin: 0;
  text-wrap: balance;
}

.sw-d1 {
  font-size: var(--sw-fs-d1);
  line-height: var(--sw-lh-d1);
  letter-spacing: var(--sw-track-d1);
}

.sw-d2 {
  font-size: var(--sw-fs-d2);
  line-height: var(--sw-lh-d2);
  letter-spacing: var(--sw-track-d2);
}

.sw-d3 {
  font-size: var(--sw-fs-d3);
  line-height: var(--sw-lh-d3);
  letter-spacing: var(--sw-track-d3);
  font-weight: 600;
}

/* Kicker: mono, caixa alta, minusculo, muito espacado. O contraste com o
   display gigante logo abaixo e o efeito. Aumentar os dois nao faz nada. */
.sw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: var(--sw-fs-micro);
  font-weight: 600;
  letter-spacing: var(--sw-track-kicker);
  text-transform: uppercase;
  color: var(--sw-acento);
  margin: 0;
}

/* O ponto do kicker e desenhado em CSS. Escrever um glifo no HTML duplica o
   marcador quando alguem tambem aplica a classe, e some no leitor de tela. */
.sw-kicker--dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.sw-lead {
  font-size: var(--sw-fs-lead);
  line-height: var(--sw-lh-lead);
  letter-spacing: var(--sw-track-lead);
  color: var(--sw-tinta-2);
  max-width: var(--sw-medida-curta);
  margin: 0;
}

.sw-lead--largo { max-width: var(--sw-medida); }

.sw-mono {
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: var(--sw-fs-xs);
  letter-spacing: 0.04em;
  color: var(--sw-tinta-3);
}

/* Numero em texto corrido. font-variant-numeric tabular impede o numero de
   "dancar" quando ele muda por contador: sem isso, o 1 e mais estreito que o
   8 e a linha inteira se reacomoda a cada quadro da animacao. */
.sw-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================================
   OS SEIS TRATAMENTOS DE H1
   ----------------------------------------------------------------------------
   Todos assumem .sw-d1 junto:  class="sw-d1 sw-h1--duas-linhas"
   ========================================================================== */

/* 1 · DUAS LINHAS, ACENTO NA SEGUNDA
   O padrao da casa, no ar na home e no /copy. A segunda linha carrega o acento
   do registro, entao a mesma marcacao sai verde numa dobra de venda e azul
   numa institucional, sem tocar no HTML.

   <h1 class="sw-d1 sw-h1--duas-linhas">
     Opere com quem
     <span>ja opera.</span>
   </h1>                                                                     */
.sw-h1--duas-linhas > span {
  display: block;
  color: var(--sw-acento);
}

/* 2 · OUTLINE
   Display vazado. Funciona como palavra de fundo atras do conteudo (o
   "FRANCHI" gigante da secao Sobre) e como segunda linha de um titulo.

   Perde legibilidade rapido abaixo de ~40px: o traco de 1px vira quase toda a
   letra. Por isso so existe na escala d1 e d2. */
.sw-h1--outline > span,
.sw-d1.sw-h1--outline,
.sw-d2.sw-h1--outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--sw-tinta-3);
  paint-order: stroke fill;
}

.sw-h1--outline--acento > span {
  -webkit-text-stroke-color: var(--sw-acento);
}

/* 3 · KICKER + H1 + SUB
   O tratamento mais denso em informacao e o mais leve de ler: o olho pega
   categoria, promessa e detalhe em tres alturas diferentes sem voltar. */
.sw-h1-bloco {
  display: flex;
  flex-direction: column;
  /* Cresce com a tela. Em 14px fixo o lead cola no display de 104px e o bloco
     perde a hierarquia de tres alturas que e o motivo deste tratamento. */
  gap: clamp(14px, 1.6vw, 24px);
  max-width: var(--sw-medida);
}

.sw-h1-bloco .sw-d1 { max-width: var(--sw-medida-h1); }

.sw-h1-bloco--centro {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* 4 · COM DADO
   O numero entra dentro da frase, em tamanho maior e com o acento. Serve para
   titulo que carrega prova em vez de adjetivo: "US$ 750 devolvidos por conta".

   O numero e um <span>, nao um <strong>: ele nao tem enfase semantica, tem
   destaque visual. Marcar como <strong> mente para o leitor de tela. */
.sw-h1--com-dado > span {
  color: var(--sw-acento);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.05em;
}

/* 5 · SPLIT
   Estado de repouso da revelacao por grafema. O JS (data-sw-split) quebra o
   texto em <span class="sw-char"> e a camada de movimento anima cada um.

   O estado de partida vive AQUI, e nao no JS, por um motivo especifico: se o
   JS nao subir (404, erro antes, bloqueio), o titulo tem que continuar
   visivel. Por isso quem esconde e a classe .is-split, aplicada pelo proprio
   JS depois de quebrar o texto com sucesso. Nunca o contrario. */
.sw-h1--split.is-split .sw-char {
  display: inline-block;
  will-change: transform, opacity;
}

.sw-char-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

/* 6 · MEDIDA
   H1 longo, de pagina de conteudo, com quebra controlada. text-wrap: balance
   distribui as linhas em vez de deixar uma palavra orfa na ultima; o limite de
   caracteres impede a linha de atravessar a tela inteira em monitor largo. */
.sw-h1--medida {
  max-width: var(--sw-medida-h1);
  font-size: var(--sw-fs-d2);
  line-height: var(--sw-lh-d2);
  letter-spacing: var(--sw-track-d2);
  text-wrap: balance;
}

/* ============================================================================
   MARCA-TEXTO
   ----------------------------------------------------------------------------
   Realce dentro de um paragrafo. Usa a tinta do acento, nao branco: quando o
   registro e de conversao o fundo vira verde neon, e texto branco sobre
   #00ff5f da 1,3:1 — ilegivel. A tinta escura no verde da 12,6:1.
   ========================================================================== */

.sw-marca {
  background: var(--sw-acento);
  color: var(--sw-acento-tinta);
  padding: 0.05em 0.3em;
  border-radius: var(--ds-r-xs, 6px);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Sublinhado de acento: o realce discreto, para quando o marca-texto cheio
   pesa demais numa pagina de repouso. */
.sw-sub-acento {
  background-image: linear-gradient(var(--sw-acento), var(--sw-acento));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 2px;
}

/* ============================================================================
   HIERARQUIA DENTRO DE CARD E BLOCO
   ========================================================================== */

.sw-titulo {
  font-family: var(--ds-display, "Space Grotesk", system-ui, sans-serif);
  font-size: var(--sw-fs-lead);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--sw-tinta-1);
  margin: 0;
}

.sw-texto {
  font-size: var(--sw-fs-sm);
  line-height: var(--sw-lh-body);
  color: var(--sw-tinta-2);
  margin: 0;
}

.sw-texto--fraco { color: var(--sw-tinta-3); }