/*
 * Fight Way — folha de estilo do site público.
 *
 * As cores vêm de `mobile/src/design/tokens.ts` (lightColors e darkColors),
 * copiadas valor a valor para o site não divergir do app. Aqui pode haver hex
 * cru: isto é HTML, fora do alcance do teste de regressão do aplicativo.
 *
 * As regras do design system valem igual:
 * · tema CLARO é o canônico; branco com UM vermelho
 * · card separa por FIO de 1px — sombra só para o que flutua
 * · no escuro, elevação é TOM e não existe sombra
 * · o vermelho é gesto, nunca superfície
 * · escala de espaço de 6 passos: 4 · 8 · 12 · 16 · 24 · 40
 */

/* ------------------------------------------------------------------ tokens */

:root {
  /* lightColors */
  --fundo: #ffffff;
  --superficie: #f6f6f8;
  --superficie-alta: #ffffff;
  --fio: #e6e6eb;
  --fio-forte: #d3d3da;

  --texto: #101014;
  --texto-secundario: #5a5a62;
  /*
   * `--texto-suave` espelha `textMuted` dos tokens, mas o site quase não o
   * usa: no claro ele dá 3,4:1 sobre branco e no escuro 4,47:1 sobre a lona,
   * e os dois reprovam o mínimo de 4,5:1 da WCAG AA para texto pequeno. Aqui
   * o texto de apoio (olho, data, rodapé, cabeçalho de tabela) é todo miúdo,
   * então usa `--texto-secundario`, que passa nos dois temas.
   */
  --texto-suave: #8b8b94;

  --primaria: #e01b2d;
  --primaria-pressionada: #a5111f;
  --sobre-primaria: #ffffff;
  --acento: #b87a0b;

  /* accentText('light') — o vermelho da marca reprova como texto pequeno */
  --primaria-texto: #a5111f;

  --atencao: #b87a0b;
  --atencao-fundo: rgba(184, 122, 11, 0.1);
  /*
   * Âmbar como TEXTO pequeno pede tom mais profundo, pelo mesmo motivo que o
   * vermelho pede em `accentText()`: #B87A0B sobre a tarja dá 3,23:1 e reprova.
   * #8A5A08 é o mesmo matiz, dois passos abaixo, e dá 5,31:1. A borda e o fundo
   * continuam no âmbar da marca — ali 3:1 basta, porque não é texto.
   */
  --atencao-texto: #8a5a08;
  --perigo: #a5111f;
  --perigo-fundo: rgba(224, 27, 45, 0.08);
  --brilho: rgba(224, 27, 45, 0.05);

  /* shadows.raised e shadows.float, traduzidas para CSS */
  --sombra-elevada: 0 1px 3px rgba(16, 16, 20, 0.06);
  --sombra-flutuante: 0 4px 16px rgba(16, 16, 20, 0.1);

  /* spacing — os 6 passos */
  --e-xxs: 4px;
  --e-xs: 8px;
  --e-sm: 12px;
  --e-md: 16px;
  --e-lg: 24px;
  --e-xl: 40px;

  /* radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* fonts */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --corpo: "Chivo", "Helvetica Neue", Arial, sans-serif;

  /*
   * Largura de leitura: ~68 caracteres por linha.
   *
   * Não dá para escrever `68ch` e ir embora. O `ch` mede a largura do "0", e
   * em Chivo o zero é bem mais largo que a letra média — `68ch` rendeu 96
   * caracteres por linha quando medido no navegador, que é linha longa demais
   * para documento legal. `29em` foi medido e dá as 68 de verdade.
   *
   * `em` e não `px` de propósito: assim a medida acompanha o corpo do texto e
   * a contagem de caracteres continua a mesma no celular, onde o corpo cai
   * para 16px.
   */
  --medida: 29em;
  --pagina: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* darkColors */
    --fundo: #101014;
    --superficie: #17171c;
    --superficie-alta: #1f1f26;
    --fio: #2a2a33;
    --fio-forte: #3a3a44;

    --texto: #f6f6f8;
    --texto-secundario: #a5a5ae;
    --texto-suave: #7a7a84;

    --primaria: #ff4d5a;
    --primaria-pressionada: #e01b2d;
    --sobre-primaria: #ffffff;
    --acento: #e0a21b;

    /* accentText('dark') */
    --primaria-texto: #ff4d5a;

    --atencao: #e0a21b;
    --atencao-fundo: rgba(224, 162, 27, 0.16);
    /* no escuro o âmbar da marca já dá 6,5:1 sobre a tarja: não precisa desviar */
    --atencao-texto: #e0a21b;
    --perigo: #ff6b77;
    --perigo-fundo: rgba(255, 77, 90, 0.16);
    --brilho: rgba(255, 77, 90, 0.14);

    /* no escuro a elevação é tom: sombra não aparece e não é usada */
    --sombra-elevada: none;
    --sombra-flutuante: none;
  }
}

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--primaria-texto);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--primaria-pressionada);
}

:focus-visible {
  outline: 2px solid var(--primaria);
  outline-offset: 3px;
  border-radius: var(--e-xxs);
}

hr {
  height: 1px;
  border: 0;
  background: var(--fio);
  margin: var(--e-xl) 0;
}

/* --------------------------------------------------------------- estrutura */

.envelope {
  width: 100%;
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 0 var(--e-lg);
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primaria);
  color: var(--sobre-primaria);
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--r-sm);
  font-family: var(--corpo);
  font-weight: 600;
  z-index: 10;
}

.pular:focus {
  left: var(--e-md);
  top: var(--e-md);
  color: var(--sobre-primaria);
}

/* ------------------------------------------------------------------- marca */

.topo {
  border-bottom: 1px solid var(--fio);
  background: var(--fundo);
}

.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-md);
  min-height: 68px;
  flex-wrap: wrap;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  text-decoration: none;
  color: var(--texto);
}

.marca:hover {
  color: var(--texto);
}

.marca-simbolo {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
}

.marca-moldura {
  fill: none;
  stroke: var(--primaria);
  stroke-width: 5.5;
  stroke-linejoin: round;
}

.marca-punho {
  fill: var(--primaria);
}

.marca-nome {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.marca-nome .em-vermelho {
  color: var(--primaria);
}

.topo-links {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  flex-wrap: wrap;
}

.topo-links a {
  font-family: var(--corpo);
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-secundario);
  text-decoration: none;
}

.topo-links a:hover {
  color: var(--texto);
  text-decoration: underline;
}

/* -------------------------------------------------------------- tipografia */

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--texto);
  margin: 0;
}

h1 {
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -1px;
}

h2 {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.6px;
}

h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.olho {
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin: 0 0 var(--e-sm);
}

.olho-vermelho {
  color: var(--primaria-texto);
}

/* -------------------------------------------------------------- hero (home) */

.hero {
  position: relative;
  padding: var(--e-xl) 0 var(--e-xl);
  background: radial-gradient(80% 120% at 12% 0%, var(--brilho), transparent 70%);
}

.hero h1 {
  max-width: 16ch;
}

.hero-simbolo {
  width: 72px;
  height: 72px;
  display: block;
  margin-bottom: var(--e-lg);
}

.hero-texto {
  max-width: var(--medida);
  color: var(--texto-secundario);
  font-size: 19px;
  line-height: 1.55;
  margin: var(--e-lg) 0 0;
}

.fitas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
  margin: var(--e-lg) 0 0;
  padding: 0;
  list-style: none;
}

.fita {
  display: inline-block;
  border: 1px solid var(--fio);
  border-radius: var(--r-pill);
  padding: var(--e-xxs) var(--e-sm);
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto-secundario);
  background: var(--superficie);
}

.hero-nota {
  margin: var(--e-lg) 0 0;
  color: var(--texto-secundario);
  font-size: 13px;
  line-height: 1.4;
}

/* ----------------------------------------------------------------- seções */

.secao {
  padding: var(--e-xl) 0;
  border-top: 1px solid var(--fio);
}

.secao-cabeca {
  max-width: var(--medida);
  margin-bottom: var(--e-lg);
}

.secao-cabeca p {
  color: var(--texto-secundario);
  margin: var(--e-sm) 0 0;
}

/* passos numerados */

.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-md);
  counter-reset: passo;
}

.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--e-md);
  align-items: baseline;
  border-top: 1px solid var(--fio);
  padding-top: var(--e-md);
  max-width: var(--medida);
}

.passos li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--primaria-texto);
  font-variant-numeric: tabular-nums;
}

/* grade de cards */

.grade {
  display: grid;
  gap: var(--e-md);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cartao {
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  background: var(--superficie-alta);
  padding: var(--e-lg);
}

.cartao h3 {
  margin-bottom: var(--e-xs);
}

.cartao p {
  margin: 0;
  color: var(--texto-secundario);
  font-size: 16px;
}

/* cartão que é link — este flutua, então pode ter sombra */

.cartao-link {
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  text-decoration: none;
  color: var(--texto);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.cartao-link:hover,
.cartao-link:focus-visible {
  border-color: var(--fio-forte);
  box-shadow: var(--sombra-flutuante);
  color: var(--texto);
}

@media (prefers-color-scheme: dark) {
  .cartao-link:hover,
  .cartao-link:focus-visible {
    background: var(--superficie-alta);
    border-color: var(--primaria);
  }
}

.cartao-link .seta {
  margin-top: auto;
  padding-top: var(--e-sm);
  color: var(--primaria-texto);
  font-weight: 600;
  font-size: 15px;
}

/* lista do "o que não é" */

.lista-nao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-md);
  max-width: var(--medida);
}

.lista-nao li {
  border-left: 2px solid var(--fio-forte);
  padding-left: var(--e-md);
  color: var(--texto-secundario);
}

.lista-nao strong {
  color: var(--texto);
  font-weight: 600;
}

/* contato */

.contatos {
  display: grid;
  gap: var(--e-md);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0;
  padding: 0;
}

.contatos div {
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  padding: var(--e-md) var(--e-lg);
  background: var(--superficie);
}

.contatos dt {
  font-family: var(--corpo);
  font-weight: 700;
  font-size: 16px;
}

.contatos dd {
  margin: var(--e-xxs) 0 0;
  color: var(--texto-secundario);
  font-size: 15px;
}

/* --------------------------------------------------------------- documento */

.doc-cabeca {
  padding: var(--e-xl) 0 var(--e-lg);
  border-bottom: 1px solid var(--fio);
}

.voltar {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-secundario);
  text-decoration: none;
  margin-bottom: var(--e-lg);
}

.voltar:hover {
  color: var(--texto);
  text-decoration: underline;
}

.doc-cabeca h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  max-width: 20ch;
}

.doc-data {
  margin: var(--e-md) 0 0;
  font-size: 13px;
  letter-spacing: 0.1px;
  color: var(--texto-secundario);
}

/* conteúdo em coluna de leitura */

.doc {
  max-width: var(--medida);
  padding: var(--e-xl) 0 var(--e-xl);
}

.doc h2 {
  font-size: 26px;
  margin: var(--e-xl) 0 var(--e-md);
}

.doc h2:first-child {
  margin-top: 0;
}

.doc h3 {
  font-size: 19px;
  margin: var(--e-lg) 0 var(--e-xs);
}

.doc p {
  margin: 0 0 var(--e-md);
}

.doc ul,
.doc ol {
  margin: 0 0 var(--e-md);
  padding-left: var(--e-lg);
}

.doc li {
  margin-bottom: var(--e-xs);
}

.doc li:last-child {
  margin-bottom: 0;
}

.doc strong {
  font-weight: 700;
}

.doc em {
  font-style: italic;
  color: var(--texto-secundario);
}

.doc .resumo {
  color: var(--texto-secundario);
}

.doc-encerramento {
  margin-top: var(--e-xl);
  padding-top: var(--e-lg);
  border-top: 1px solid var(--fio);
  color: var(--texto-secundario);
  font-size: 15px;
}

.doc-encerramento p {
  margin: 0 0 var(--e-xs);
}

/* aviso de rascunho — precisa ser visto antes do documento */

.rascunho {
  margin: var(--e-lg) 0 0;
  border: 1px solid var(--atencao);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  background: var(--atencao-fundo);
  padding: var(--e-md) var(--e-lg);
  max-width: var(--medida);
}

/* `.rascunho p` é mais específico que `.olho`, então o corpo do olho precisa
   ser reafirmado aqui — senão o rótulo herda os 15px do parágrafo. */
.rascunho p.olho {
  color: var(--atencao-texto);
  font-size: 11px;
  line-height: 1.2;
  margin-bottom: var(--e-xs);
}

.rascunho p {
  margin: 0 0 var(--e-xs);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
}

.rascunho p:last-child {
  margin-bottom: 0;
}

/* citação destacada dentro do documento */

.destaque {
  margin: 0 0 var(--e-md);
  border-left: 3px solid var(--primaria);
  padding: var(--e-xs) 0 var(--e-xs) var(--e-md);
  color: var(--texto);
}

.destaque p {
  margin: 0;
}

/* tabelas */

.tabela-rolagem {
  overflow-x: auto;
  margin: 0 0 var(--e-md);
  border: 1px solid var(--fio);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}

/*
 * Tabela sai da coluna de leitura quando há tela para isso.
 *
 * A coluna é estreita porque texto corrido pede 68 caracteres — mas a tabela
 * de equipamento tem três colunas de listas ("Luva, bandagem, protetor bucal,
 * caneleira, coquilha") e nessa largura ela vira rolagem lateral em telão, o
 * que é pior do que largura demais. A `.doc` é alinhada à esquerda dentro do
 * envelope, então o excedente cresce para a direita sem estourar a página.
 */
@media (min-width: 900px) {
  .doc .tabela-rolagem {
    width: min(46em, 100%);
    max-width: none;
  }

  .doc {
    max-width: none;
  }

  .doc > :not(.tabela-rolagem) {
    max-width: var(--medida);
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 15px;
}

thead th {
  text-align: left;
  font-family: var(--corpo);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-secundario);
  background: var(--superficie);
  padding: var(--e-sm) var(--e-md);
  border-bottom: 1px solid var(--fio);
  white-space: nowrap;
}

tbody td {
  padding: var(--e-sm) var(--e-md);
  border-bottom: 1px solid var(--fio);
  vertical-align: top;
  color: var(--texto-secundario);
}

tbody td:first-child {
  color: var(--texto);
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------- rodapé */

.rodape {
  border-top: 1px solid var(--fio);
  padding: var(--e-lg) 0 var(--e-xl);
  color: var(--texto-secundario);
  font-size: 14px;
}

.rodape-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-md);
  align-items: center;
  justify-content: space-between;
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape-links a {
  color: var(--texto-secundario);
  text-decoration: none;
  font-weight: 600;
}

.rodape-links a:hover {
  color: var(--texto);
  text-decoration: underline;
}

.rodape p {
  margin: 0;
}

/* ------------------------------------------------------------------ telas */

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .envelope {
    padding: 0 var(--e-md);
  }

  .hero {
    padding: var(--e-lg) 0 var(--e-xl);
  }

  .hero-texto {
    font-size: 17px;
  }

  .topo-linha {
    padding: var(--e-sm) 0;
  }

  .cartao {
    padding: var(--e-md);
  }
}

/* ---------------------------------------------------------------- impressão */

@media print {
  .topo,
  .rodape,
  .voltar,
  .pular {
    display: none;
  }

  body {
    background: #ffffff;
    color: #101014;
    font-size: 11pt;
  }

  .doc,
  .doc-cabeca {
    max-width: none;
    padding: 0;
  }

  .rascunho {
    border: 1pt solid #101014;
  }

  a {
    color: #101014;
  }
}