/**
 * Tokens da Home.
 *
 * Todos os valores saem de `referencias/home/texto.md` (escala e cores reais
 * do PSD) e de `referencias/home/layout.json` (medidas). Artboard 1920×6240.
 *
 * Carregar DEPOIS de `compartilhado/css/tokens.css`. Nada que o topo ou o
 * rodapé consumam pode ser redefinido no `:root` aqui — ver o bloco escopado
 * no fim do arquivo e a regra no CLAUDE.md.
 *
 * Conversão para clamp: o vw é o valor do PSD dividido por 1920 (largura do
 * artboard). O piso é escolhido para o texto não sumir no celular.
 */

:root {
  /* ==== Cores medidas no PSD ==== */

  /* Notícias */
  --cor-noticia-chapeu: #0034d2; /* ECONOMIA, LEIA MAIS */
  --cor-noticia-titulo: #012288; /* manchete do card grande */
  --cor-noticia-titulo-lista: #484848; /* manchete da coluna lateral */
  --cor-noticia-texto: #2f2f2f;
  --cor-noticias-selo: #00b923; /* a palavra NOTÍCIAS */

  /* Tô com Lula (ex-"aspas") — V3_ASPAS.psd, artboard 1920×712 */
  --cor-aspas-texto: #5d5c57;
  --cor-aspa-painel: #f7f6f4; /* a chapa clara de cada depoimento */
  --cor-aspas-fundo: #ffffff; /* a seção é branca, não creme */

  /* Carrossel — o chapéu amarelo sobre a arte.
     Herdou o valor do antigo `--cor-portavoz-titulo`, que saiu junto com a
     seção de plataformas em 12/08/2026 e era o único amarelo do topo. */
  --cor-slide-tag: #ffd500;

  /* Para maratonar — um acento por card, como no Legado */
  --cor-maratonar-fundo: #00071b;
  --acento-amarelo: #ffd500;
  --acento-verde: #00b923;
  --acento-azul: #009cff;
  --acento-laranja: #ff9600;
  --acento-rosa: #ff009c;

  /* Banner de campanha — V4. O verde da manchete saiu do CSS junto com o texto:
     ele agora está desenhado dentro de `v4-manchete.webp`. Sobrou o azul do
     botão, amostrado da forma do PSD. */
  --cor-banner-acao: #0033d1;

  /* Super apps */
  --cor-superapps: #fd0000;

  /* Dock */
  --cor-dock-fundo: #007bf1;

  /* ==== Escala tipográfica ====
   * PSD → vw sobre 1920. Os nomes dizem onde o valor aparece, não o tamanho:
   * `--texto-slide-titulo` continua válido se o layout mudar de 53px para 60.
   */

  /* carrossel */
  --texto-slide-titulo: clamp(1.75rem, 2.768vw, 3.322rem); /* 53.15 */
  --texto-slide-lateral: clamp(1.25rem, 2.054vw, 2.465rem); /* 39.44 */
  --texto-slide-tag: clamp(1rem, 1.541vw, 1.849rem); /* 29.58 — era "marca" */
  --texto-slide-apoio: clamp(0.8125rem, 0.822vw, 0.986rem); /* 15.78 */
  --texto-slide-acao: clamp(0.6875rem, 0.616vw, 0.739rem); /* 11.83 */

  /* notícias */
  --texto-noticias-selo: clamp(2rem, 2.568vw, 3.082rem); /* 49.31 */
  --texto-noticia-titulo: clamp(1.125rem, 1.284vw, 1.541rem); /* 24.65 */
  --texto-noticia-chapeu: clamp(0.6875rem, 0.719vw, 0.863rem); /* 13.81 */
  --texto-noticia-resumo: clamp(0.8125rem, 0.822vw, 0.986rem); /* 15.78 */
  --texto-noticia-leia: clamp(0.6875rem, 0.616vw, 0.739rem); /* 11.83 */
  --texto-ver-mais: clamp(0.8125rem, 0.924vw, 1.109rem); /* 17.75 */

  /*
   * Tô com Lula — V3_ASPAS.psd. Os três valores saem de MEDIÇÃO na fatia, não
   * do tamanho declarado: as camadas estão escaladas (regra do CLAUDE.md).
   * Gotham tem cap height de 0.70em exatos (lido do arquivo), então
   * `font-size = altura-de-maiúscula / 0.70`.
   *
   *   citação  passo entre linhas de 26.2px sobre 19.73 declarados → ×1.328
   *            → 22.3px, e line-height 26.2/22.3 = 1.18
   *   autor    maiúscula de 13px → 18.6px
   *   botão    maiúscula de 9px → 12.9px
   */
  --texto-aspas: clamp(1rem, 1.161vw, 1.394rem); /* 22.3 */
  --texto-aspas-autor: clamp(0.8125rem, 0.969vw, 1.163rem); /* 18.6 */
  --texto-aspas-acao: clamp(0.6875rem, 0.672vw, 0.806rem); /* 12.9 */
  /*
   * O título "TÔ COM LULA" é Transducer CondensedBlack no PSD, com maiúscula de
   * ~48px. Em Gotham Black isso daria 68px e uma mancha de 26% da largura do
   * artboard contra os 13.7% do layout — a substituição de uma condensada por
   * uma normal sempre alarga (mesma conta da pendência #46 no Editorial).
   *
   * Fica na MESMA escala do selo "Notícias", que é a outra chamada de seção da
   * página e tem exatamente o mesmo corte no PSD. Assim as duas continuam
   * pesando igual na leitura da home, que é o que o layout quer dizer.
   */
  --texto-aspas-titulo: clamp(1.75rem, 2.568vw, 3.082rem); /* 49.31 */

  /* Geometria do card, do V3_ASPAS.psd (card 275×430 no artboard de 1920) */
  --aspa-card: clamp(15rem, 14.32vw, 17.19rem); /* 275 */
  /* Fatores sem unidade, para entrarem em calc() com `--aspa-card`. Fração da
     LARGURA DO CARD, e não do conteúdo — o recuo interno não conta. */
  --aspa-retrato: 0.687; /* círculo de 189 sobre o card de 275 */
  --aspa-transborda: 0.434; /* 82 dos 189 do círculo ficam acima da chapa */
  /*
   * Também sem unidade, e por um motivo específico: `padding: …%` num item de
   * flex resolve contra a largura do CONTÊINER, não contra a do próprio item.
   * Escrito como 14.9% dava 226px de recuo num card de 240 — o card inchava
   * para 543px e o texto ficava numa coluna de 90. Em calc sobre `--aspa-card`
   * a conta é a que se lê.
   */
  --aspa-recuo: 0.149; /* 41 de recuo interno sobre os 275 */
  --aspa-barra: 6px; /* a faixa de cor no pé da chapa */

  /* ==== Fileira de vídeos do "para maratonar" ====
   * O card do PSD é 295×307; a largura pedida na revisão de 08/08/2026 é um
   * pouco maior. Os dois moram aqui porque o topo da seção calcula a largura da
   * fileira a partir deles, para o título e o "Veja todos" alinharem com a
   * primeira e a última capa.
   */
  --maratonar-card: clamp(13rem, 17.4vw, 300px);
  --maratonar-gap: 1rem;

  /* para maratonar — V3_MARATONAR.psd, artboard 1920×1305 */

  /*
   * "LULA+". Medido, não declarado: a maiúscula do L tem 73px na fatia, o que
   * em Gotham (cap 0.70em) dá 104px — bem acima dos 62.12 que a camada
   * reporta. É a mesma escala de camada de sempre.
   */
  --texto-maratonar-marca: clamp(2.75rem, 5.43vw, 6.52rem); /* 104.3 */

  /*
   * "VÍDEO MAIOR ▶ EM DESTAQUE", sobre o vídeo de largura total.
   *
   * Aqui o tamanho é ancorado pela LARGURA, não pela maiúscula: as duas
   * palavras somam 1104px no PSD e, em Gotham Black, 14.774em juntas. Ancorar
   * pela maiúscula (74px → 106px de corpo) daria 1566px de texto e estouraria a
   * faixa. Pela largura, a composição sai idêntica à do layout — o que se perde
   * é peso de mancha, não posição.
   *
   * O play e os vãos também vão em vw pelo mesmo motivo: assim o trio inteiro
   * escala junto com a faixa, exatamente como no artboard.
   */
  --texto-maratonar-destaque: clamp(1.375rem, 3.89vw, 4.67rem); /* 74.7 */
  --maratonar-destaque-play: 6.56vw; /* 126 */
  --maratonar-destaque-vao: 1.82vw; /* 35 */
  --maratonar-destaque-proporcao: 1920 / 694;
  --cor-maratonar-destaque-texto: #e7e7e7;
  --texto-maratonar-fileira: clamp(1.125rem, 1.233vw, 1.479rem); /* 23.67 */
  --texto-card-titulo: clamp(0.875rem, 0.872vw, 1.046rem); /* 16.74 */
  --texto-card-meta: clamp(0.625rem, 0.565vw, 0.678rem); /* 10.85 */
  --texto-card-chamada: clamp(0.6875rem, 0.668vw, 0.801rem); /* 12.82 */

  /* banner — V4_HOME_CAMPANHA.psd, artboard 1920×631 */
  /*
   * A inclinação. No V2 ela vinha da matriz das camadas de texto, que eram um
   * cisalhamento vertical puro (yx = 0, xy ≠ 0). No V4 a manchete é imagem e
   * sobrou o botão, que foi MEDIDO na composição: as bordas de cima e de baixo
   * do paralelogramo sobem 31px a cada 149 de largura, ou −11,75°.
   *
   * O valor abaixo é o de antes, −11,82°, e fica: a diferença é de 0,07° e ele
   * é o mesmo do resto da campanha.
   */
  --banner-inclinacao: -11.82deg;

  /*
   * "ACESSE AGORA". MEDIDO na composição, não lido do PSD: a caixa-alta desenha
   * 25px, e a Transducer Condensed Black tem caixa-alta de 0,71em — logo 35,2px
   * de corpo, ou 1,833% da largura da faixa. O 47,33 que o `texto.md` reporta é
   * de antes da escala da camada.
   *
   * `cqw` e não `vw`: o contêiner é a própria faixa (ver `container-type` no
   * `.banner`). Com barra de rolagem visível `vw` mede alguns pixels a mais, e
   * é o bastante para o texto encostar na borda do botão.
   */
  --texto-banner-acao: 1.833cqw;

  /* super apps — V4_HOME_SUPERAPPS.psd, artboard 1920×990 */
  --texto-superapps: clamp(2.25rem, 3.235vw, 3.883rem); /* 62.12 */
  --texto-superapps-apoio: clamp(0.8125rem, 0.822vw, 0.986rem); /* 15.78 */
  /* "REDES DO LULA", "PARCEIROS", "PÁGINAS ESPECIAIS". Mesmo corpo do apoio,
     token próprio porque o papel é outro — e o peso, também (Black × Book). */
  --texto-superapps-grupo: clamp(0.8125rem, 0.822vw, 0.986rem); /* 15.78 */
  /*
   * O ladrilho é a ARTE INTEIRA, 122×127: 110px de placa mais a sombra, que no
   * PSD ocupa 6px de cada lado e 17px embaixo. O passo entre um ícone e o
   * vizinho também é 122 — por isso a lista tem `gap: 0`.
   *
   * Saíram daqui, com os chips de nome que o V4 não desenha mais:
   * `--app-icone` (teto do ícone dentro do ladrilho), `--app-ladrilho-min`
   * (piso que existia por causa da largura do chip) e `--texto-app-rotulo`.
   */
  --app-ladrilho: 122px;

  /* ==== Geometria do carrossel ====
   *
   * Revisão de 11/08/2026: cada destaque passou a ter DUAS artes, e é a
   * geometria que muda junto.
   *
   *   horizontal  1020×833  — o slide do meio
   *   vertical     450×833  — os dois vizinhos
   *
   * As três somam 450 + 1020 + 450 = 1920: exatamente a largura do artboard.
   * Não é coincidência, é o ponto do redesenho — as artes laterais cabem
   * INTEIRAS na tela, então o recado do card vizinho se lê sem precisar
   * arrastar. Por isso as duas larguras abaixo são frações de 1920, e o vão
   * entre slides é zero.
   *
   * A altura é a mesma nas duas artes (833), o que faz a fita ter altura
   * constante enquanto a largura do central cresce e a do vizinho encolhe.
   */
  --slide-largura: 53.125%; /* 1020 de 1920 — o slide central */
  --slide-largura-lateral: 23.4375%; /* 450 de 1920 — os vizinhos */
  --slide-proporcao: 1920 / 833; /* proporção do PALCO, não de um slide */
  --slide-gap: 0px; /* colado: os painéis se encostam no layout */

  /*
   * Mobile. O central aparece inteiro e sobra 15% de tela de cada lado para os
   * vizinhos — daí os 70%. Aí TODOS usam a arte vertical, inclusive o do meio:
   * é o que "acompanhar o tamanho da imagem vertical" pede, e é o único jeito
   * de a foto do meio caber inteira numa tela de retrato.
   *
   * A proporção é a do PALCO, não a da arte, e a conta é:
   *
   *   altura = 70% da largura do palco × 833/450
   *   logo   largura : altura = 450 : (0.7 × 833) = 450 : 583.1
   *
   * O mesmo raciocínio do desktop, onde 1920/833 sai de 53.125% × 833/1020.
   */
  --slide-largura-movel: 70%;
  --slide-proporcao-movel: 450 / 583.1;

  --cor-vitrola-fundo: #000000; /* preto sob os slides: o alfa dos vizinhos escurece */

  /* ==== Traços do carrossel ====
   * Os controles deixaram de ser setas + bolinhas numa barra abaixo da imagem e
   * viraram traços sobre a imagem central (revisão de 11/08/2026, referência:
   * o carrossel da conexaoesportiva.org). As medidas são as de lá, que é onde o
   * desenho foi aprovado: 26×5 no inativo, 40×5 no atual, 8px de vão, raio 3.
   *
   * A cor é a nossa: branco translúcido no inativo, vermelho da marca no atual.
   */
  --traco-largura: 26px;
  --traco-largura-atual: 40px;
  --traco-altura: 5px;
  --traco-vao: 8px;
  --dur-traco: 180ms;
  --ease-traco: cubic-bezier(0.22, 1, 0.36, 1);

  /* ==== Dock ====
   * Ícones de 78×82 no PSD, numa placa de 505×102.
   */
  --dock-icone: clamp(2.5rem, 4.06vw, 3.25rem);
  --dock-salto: -0.75rem; /* deslocamento no hover, estilo macOS */

  /* ==== Movimento ====
   *
   * O carrossel anda em DOIS TEMPOS, e a ordem é o ponto: primeiro os cards
   * trocam de tamanho com a fita parada (`--dur-slide-tamanho`), só depois a
   * fita desliza (`--dur-slide`). Fazer as duas coisas juntas — que era como
   * estava até 11/08/2026 — dá a impressão de que o carrossel escorrega
   * enquanto muda de forma, porque o alvo da rolagem se move junto com a
   * largura. Ver `deslizar()` no home.js.
   */
  --dur-slide-tamanho: 330ms;
  --dur-slide: 520ms;
  --ease-slide: cubic-bezier(0.4, 0, 0.2, 1);
  /* PENDENTE: intervalo do autoplay não existe no PSD. 6s dá tempo de ler o
     título do slide central antes de virar. Ajustar se ficar apressado. */
  --autoplay-slide: 6000ms;
}

/*
 * Escopados ao miolo, não ao :root.
 *
 * O topo e o rodapé compartilhados consomem estes mesmos nomes. Deixá-los no
 * :root repintaria o header com a grade desta página — mesmo problema que já
 * mordeu no legado e na notícia.
 */
main {
  /* A home alterna seções claras e escuras; o creme do compartilhado não vale
     aqui. Cada seção pinta o seu fundo. */
  --cor-fundo: #ffffff;
  background: var(--cor-fundo);
}