/**
 * Home — só o miolo.
 *
 * Reset, base e utilitários vêm de `compartilhado/css/base.css`; topo e
 * rodapé de `topo.css` e `rodape.css`. Esta folha entra depois deles e depois
 * do `tokens.css` desta pasta.
 *
 * Ordem das seções = ordem do layout. Caminhos de imagem sempre relativos.
 */

/* ==========================================================================
   carrossel modular ("vitrola")
   --------------------------------------------------------------------------
   REDESENHO de 11/08/2026. Cada destaque tem duas artes — 1020×833 na
   horizontal e 450×833 na vertical — e o carrossel troca de arte conforme o
   slide é o central ou um vizinho. Como 450 + 1020 + 450 fecha 1920, os três
   cabem inteiros na tela: o vizinho não é mais um pedaço cortado de imagem, é
   o recado completo em formato de retrato.

   Isso faz a LARGURA do slide mudar quando ele vira o central. Duas
   consequências, e as duas estão resolvidas aqui e no `home.js`:

     1. a altura precisa ficar constante, senão a fita pula — por isso a
        proporção mora no PALCO e o slide só tem `height: 100%`;
     2. o alvo do scroll muda enquanto a largura transiciona — por isso o JS
        anima `scrollLeft` num rAF em vez de usar `behavior: smooth`.

   A mecânica continua sendo scroll-snap, não transform: arrastar com o dedo e
   a roda do mouse funcionam sem uma linha de JS.
   ========================================================================== */

.vitrola {
  position: relative;
  /* Zero: os controles passaram a viver DENTRO do palco, sobre a imagem, então
     não há mais barra abaixo dela para acomodar. */
  padding-block: 0;
  /* Preto por baixo de tudo: é ele que aparece através do alfa dos vizinhos e
     os deixa mais escuros que o central, como pede o layout. */
  background: var(--cor-vitrola-fundo);
}

/* A proporção vive aqui, não no slide: assim a altura da fita não depende de
   qual slide é o central, e a largura pode transicionar sem sacudir nada. */
.vitrola__palco {
  /* Referência dos controles, que são absolutos e ficam sobre a imagem. */
  position: relative;
  aspect-ratio: var(--slide-proporcao);
}

.vitrola__trilho {
  display: flex;
  height: 100%;
  gap: var(--slide-gap);
  margin: 0;
  padding-block: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /*
   * O respiro nas pontas é o que permite o PRIMEIRO e o ÚLTIMO slide ficarem
   * centralizados. Sem ele não existe rolagem antes do primeiro (scrollLeft
   * não fica negativo), então ele encostava à esquerda e só "consertava"
   * depois que o usuário rolava uma vez.
   *
   * O respiro vem de dois espaçadores em pseudo-elemento, não de padding:
   * padding percentual com `var()` dentro não resolveu aqui (medido: 0px),
   * enquanto `flex-basis` percentual resolve. A conta usa a largura do
   * CENTRAL, que é quem fica centralizado.
   */
}

.vitrola__trilho::before,
.vitrola__trilho::after {
  content: '';
  flex: 0 0 calc((100% - var(--slide-largura)) / 2);
}

.vitrola__trilho::-webkit-scrollbar {
  display: none;
}

/*
 * Sem raio e sem gap: no layout os painéis se encostam e sangram até a borda
 * da tela. É o que dá a leitura de faixa contínua, não de cards soltos.
 *
 * O slide nasce VIZINHO (estreito) e só o central abre. A transição de largura
 * usa a mesma duração e a mesma curva que o JS aplica ao scroll — é o que faz
 * o conjunto parecer um movimento só.
 */
.slide {
  position: relative;
  flex: 0 0 var(--slide-largura-lateral);
  height: 100%;
  scroll-snap-align: center;
  overflow: hidden;
  background: var(--slide-fundo, var(--cor-vitrola-fundo));
  /*
   * Contêiner de consulta. É o que permite o texto do slide ser dimensionado
   * em `cqw` — fração da largura DO CARD, não da tela. Sem isso não haveria
   * como a mesma manchete caber legível nos 1020px do central e nos 450px do
   * vizinho: um valor em vw serviria a um e estouraria o outro.
   */
  container-type: inline-size;
  /* os vizinhos ficam apagados para o centro ganhar o olho */
  opacity: 0.55;
  transition:
    flex-basis var(--dur-slide-tamanho) var(--ease-slide),
    opacity var(--dur-slide-tamanho) var(--ease-slide);
}

.slide[data-atual] {
  flex-basis: var(--slide-largura);
  opacity: 1;
}

/* Ligado pelo JS só durante o salto de volta ao bloco do meio: ali a geometria
   muda de clone para original sem mudar um pixel na tela, e animar isso seria
   inventar um movimento que ninguém pediu. Ver `normalizar()` no home.js. */
.vitrola__trilho[data-sem-transicao] .slide {
  transition: none;
}

/*
 * Enquanto a rolagem é nossa, o snap sai de cena.
 *
 * `scroll-snap-type: mandatory` reage a QUALQUER escrita em `scrollLeft`
 * decidindo para onde a rolagem "deveria" parar. Como a nossa animação começa
 * devagar (easing), os primeiros quadros mexem 2 ou 3px — e o navegador
 * desfazia cada um deles, prendendo a fita no ponto antigo até o deslocamento
 * ficar grande o bastante para ele saltar de uma vez para o destino. Era essa a
 * "movimentação estranha": um tempo morto seguido de um pulo.
 *
 * Desligado durante a animação, a fita obedece quadro a quadro. Religa no fim,
 * já em cima do ponto de snap, então nada se mexe na volta — e o arrasto com o
 * dedo continua com o snap de sempre.
 */
.vitrola__trilho[data-animando] {
  scroll-snap-type: none;
}

/* ---------- as duas artes ----------
   As duas ficam no HTML e o CSS decide qual aparece. `display: none` é de
   propósito: além de esconder, tira a imagem oculta da árvore de
   acessibilidade, então o leitor de tela nunca anuncia o mesmo destaque duas
   vezes — as duas artes carregam o mesmo `alt`. */

/* Absoluta para o texto do slide poder entrar por cima dela. As larguras dos
   slides são as proporções naturais das artes, então `cover` não corta nada —
   só cobre a fração de pixel do meio da transição. */
.slide__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide__arte--horz {
  display: none;
}

.slide[data-atual] .slide__arte--horz {
  display: block;
}

.slide[data-atual] .slide__arte--vert {
  display: none;
}

/*
 * TRÊS VARIANTES, e só três. Quem escolhe é `data-variante` no <li>:
 *
 *   destaque      A arte É o slide. A imagem cobre 100% do card e o card
 *                 inteiro é um link. Nenhum texto em HTML — os painéis do PSD
 *                 já trazem o texto dentro da arte, e repetir por cima
 *                 sobreporia duas manchetes. O título vive no `alt`.
 *   noticia       Fundo de COR (`--slide-fundo`) com a imagem no tamanho
 *                 natural dela, ancorada do lado OPOSTO ao texto: `data-posicao`
 *                 diz onde o texto fica, a imagem vai para o contrário.
 *   noticia-full  Mesmo conteúdo de `noticia`, só que a imagem preenche o card
 *                 como fundo e o texto entra por cima, com véu.
 *
 * Não há quarta. `marca` e `chapeu` saíram nesta reestruturação.
 */

/* ---------- destaque ---------- */

/* O link cobre o card todo: a área de clique é a arte inteira, não um botão. */
.slide__link {
  position: absolute;
  inset: 0;
  display: block;
}

.slide__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- noticia ---------- */

.slide[data-variante='noticia'] {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1rem, 2.5vw, 2.5rem);
  background: var(--slide-fundo, var(--cor-noticia-titulo));
}

/*
 * "No tamanho que ela é": sem `cover` e sem esticar. O `max-*` existe só para
 * a arte não estourar o card em tela estreita — nunca para ampliar.
 */
.slide__foto {
  flex: 0 0 auto;
  width: auto;
  max-width: 45%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* A imagem vai para o lado oposto ao texto — é o "inversamente" do briefing. */
.slide[data-variante='noticia'][data-posicao$='esquerda'] .slide__foto {
  order: 2;
}

.slide[data-variante='noticia'][data-posicao$='direita'] .slide__foto {
  order: -1;
}

/* Texto centralizado: empilha, e a inversão passa a valer no eixo vertical. */
.slide[data-variante='noticia'][data-posicao$='centro'] {
  flex-direction: column;
  justify-content: center;
}

.slide[data-variante='noticia'][data-posicao$='centro'] .slide__foto {
  max-width: 100%;
  max-height: 55%;
}

.slide[data-variante='noticia'][data-posicao^='topo'] {
  align-items: flex-start;
}

.slide[data-variante='noticia'][data-posicao^='base'] {
  align-items: flex-end;
}

.slide[data-variante='noticia'][data-posicao^='topo'][data-posicao$='centro'] {
  align-items: center;
  justify-content: flex-start;
}

.slide[data-variante='noticia'][data-posicao^='topo'][data-posicao$='centro'] .slide__foto {
  order: 2;
}

.slide[data-variante='noticia'][data-posicao^='base'][data-posicao$='centro'] {
  align-items: center;
  justify-content: flex-end;
}

.slide[data-variante='noticia'][data-posicao^='base'][data-posicao$='centro'] .slide__foto {
  order: -1;
}

/* Aqui o texto ocupa o fluxo, não a camada de cima. */
.slide[data-variante='noticia'] .slide__texto {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* ---------- noticia-full ---------- */

/*
 * Véu só na variante que põe texto SOBRE a foto — escurecer a imagem inteira
 * apagaria a foto sem necessidade.
 *
 * O padrão é de BAIXO para cima, porque é o que serve ao card vertical: nos
 * 450px do vizinho não há largura para um véu lateral deixar o texto legível,
 * e é lá embaixo que o texto cai. As variantes por lado só entram no card
 * central do desktop, mais adiante.
 */
.slide[data-variante='noticia-full']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.82) 0%, rgb(0 0 0 / 0.35) 45%, transparent 85%);
}

.slide__texto {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 0.5rem;
  /* Em `cqw` pelo mesmo motivo do corpo do texto: o recuo tem que ser
     proporcional ao card, não à tela. O pé é separado porque o card central
     precisa de mais espaço ali — ver logo abaixo. */
  padding: var(--slide-recuo, 6cqw);
  padding-bottom: var(--slide-recuo-pe, 6cqw);
  color: #fff;
  text-align: start;
}

/*
 * Só o card central tem os traços por cima, e é só nele que o texto precisa
 * recuar no pé para não encostar neles. Sem isto o "Saiba mais" do slide de
 * posição `base centro` cai exatamente em cima da fileira de traços.
 */
.slide[data-atual] .slide__texto {
  --slide-recuo-pe: 4rem;
}

/*
 * As nove combinações que o briefing pediu, em duas linhas de CSS cada.
 * `data-posicao="<vertical> <horizontal>"`.
 */
.slide[data-posicao^='topo'] .slide__texto {
  align-content: start;
}
.slide[data-posicao^='base'] .slide__texto {
  align-content: end;
}
.slide[data-posicao$='centro'] .slide__texto {
  justify-items: center;
  text-align: center;
}
.slide[data-posicao$='direita'] .slide__texto {
  justify-items: end;
  text-align: end;
}

/*
 * ESCALA DO TEXTO — em `cqw`, fração da largura do próprio card.
 *
 * Os valores abaixo são os do card VERTICAL (450px), que é o caso apertado:
 * é o vizinho, e é também o formato de todos os slides no celular. Mais
 * adiante, num `@media`, o card central do desktop recebe a escala do PSD.
 *
 * O piso em `rem` existe para o celular, onde o card central mede ~275px: sem
 * ele a manchete cairia para 20px e o apoio para 8px.
 */
.slide__tag {
  font-family: var(--fonte-titulo);
  font-size: clamp(0.75rem, 4cqw, 1.849rem);
  font-weight: 500;
  color: var(--cor-slide-tag);
  text-transform: uppercase;
}

.slide__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 7.4cqw, 3.322rem);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}

/* Manchete de notícia não é chamada de campanha: fonte de texto, não a de
   título, nas duas variantes de notícia. */
.slide[data-variante='noticia'] .slide__titulo,
.slide[data-variante='noticia-full'] .slide__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--texto-slide-lateral);
  font-weight: 800;
  line-height: 1.05;
}

.slide__apoio {
  max-width: 34ch;
  font-size: clamp(0.8125rem, 3.1cqw, 0.986rem);
  line-height: 1.4;
}

.slide__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  margin-top: 0.25rem;
  padding-inline: 1rem;
  font-size: clamp(0.6875rem, 2.5cqw, 0.739rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--cor-marca-secundaria);
  border-radius: 999px;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.slide__acao:hover {
  transform: scale(1.04);
}

/*
 * O CARD CENTRAL DO DESKTOP — e só ele.
 *
 * Aqui o card volta a ser horizontal (1020×833) e a tipografia volta a ser a do
 * PSD: 53.15 na manchete, 29.58 na tag, 15.78 no apoio, 11.83 na ação. Em `cqw`
 * sobre os 1020px do card, é exatamente o que esses valores dão.
 *
 * No celular esta regra não vale: lá o central também é vertical, e quem manda
 * é a escala de retrato declarada acima.
 */
@media (width >= 48rem) {
  .slide[data-atual] .slide__tag {
    font-size: clamp(1rem, 2.9cqw, 1.849rem);
  }

  .slide[data-atual] .slide__titulo {
    font-size: clamp(1.75rem, 5.21cqw, 3.322rem);
  }

  .slide[data-atual] .slide__apoio {
    font-size: clamp(0.8125rem, 1.55cqw, 0.986rem);
  }

  .slide[data-atual] .slide__acao {
    font-size: clamp(0.6875rem, 1.16cqw, 0.739rem);
  }

  .slide[data-atual] .slide__texto {
    --slide-recuo: 3.5cqw;
  }

  /* Com 1020px de largura o véu lateral volta a fazer sentido: escurece só o
     lado onde o texto cai e devolve a foto do outro lado. */
  .slide[data-atual][data-variante='noticia-full'][data-posicao$='esquerda']::after {
    background: linear-gradient(to right, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.2) 55%, transparent 82%);
  }

  .slide[data-atual][data-variante='noticia-full'][data-posicao$='direita']::after {
    background: linear-gradient(to left, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.2) 55%, transparent 82%);
  }
}

/* ---------- controles ---------- */

/*
 * Os controles vivem SOBRE a imagem central, não numa barra abaixo dela
 * (revisão de 11/08/2026, no estilo do carrossel da conexaoesportiva.org).
 *
 * Absoluto dentro do palco e centrado: como o slide central é sempre o do meio
 * do palco, centralizar aqui é ficar em cima dele em qualquer largura — no
 * desktop e no celular, onde o central mede 70% da tela.
 *
 * O `drop-shadow` não é enfeite: os traços caem sobre foto, e branco sobre um
 * céu claro sumiria. A sombra garante a borda em qualquer imagem sem precisar
 * de uma tarja atrás.
 */
.vitrola__controles {
  position: absolute;
  left: 50%;
  /* O botão tem 44px de alvo e o traço visível mora no meio dele, então a
     distância REAL do traço até a base é este valor + 22px. Com 1.25rem o
     traço fica a ~42px do pé da imagem: os mesmos ~9% de altura da referência. */
  bottom: 1.25rem;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.45));
}

.vitrola__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.vitrola__seta:hover:not(:disabled) {
  transform: scale(1.08);
}

.vitrola__seta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.vitrola__seta-icone--esquerda {
  transform: rotate(180deg);
}

.vitrola__tracos {
  display: flex;
  align-items: center;
  gap: var(--traco-vao);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * O traço. A LARGURA é o estado: o inativo é curto e branco translúcido, o
 * atual é longo e vermelho. Por isso a transição anima `width` e cor, e nada
 * mais — nem opacidade, nem escala.
 *
 * O botão tem 44px de altura para o alvo de toque; o traço visível tem 5px e
 * mora no ::before, centrado. Mesmo arranjo que as bolinhas tinham antes: o
 * piso de acessibilidade não engorda o desenho.
 */
.vitrola__traco {
  position: relative;
  width: var(--traco-largura);
  height: 44px;
  transition: width var(--dur-traco) var(--ease-traco);
}

.vitrola__traco::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 0;
  translate: 0 -50%;
  width: 100%;
  height: var(--traco-altura);
  border-radius: 3px;
  background: rgb(255 255 255 / 0.55);
  transition: background-color var(--dur-traco) var(--ease-traco);
}

.vitrola__traco:hover::before {
  background: rgb(255 255 255 / 0.85);
}

.vitrola__traco[aria-current='true'] {
  width: var(--traco-largura-atual);
}

.vitrola__traco[aria-current='true']::before {
  background: var(--cor-marca-primaria);
}

/* Discreto de propósito: existe para cumprir o "pausar" (WCAG 2.2.2) sem
   disputar atenção com os traços, que são o controle de verdade. */
.vitrola__pausa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgb(255 255 255 / 0.75);
  transition: color var(--dur-rapida) var(--ease-padrao);
}

.vitrola__pausa:hover,
.vitrola__pausa:focus-visible {
  color: #fff;
}

/* Duas barras = pausar; vira triângulo quando já está pausado. */
.vitrola__pausa-icone {
  width: 9px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

.vitrola__pausa[aria-pressed='true'] .vitrola__pausa-icone {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/*
 * Mobile. O central aparece INTEIRO e sobra 15% de tela de cada lado para os
 * vizinhos espiarem — que é o resultado direto de um slide de 70% centralizado.
 *
 * Aqui todos usam a arte vertical, o central inclusive: numa tela de retrato a
 * arte horizontal só caberia inteira se encolhesse a ponto de o texto dentro
 * dela sumir. Como as três larguras passam a ser iguais, não há mais transição
 * de largura nenhuma no celular — o carrossel volta a ser o de sempre.
 */
@media (width < 48rem) {
  .vitrola__palco {
    aspect-ratio: var(--slide-proporcao-movel);
  }

  .vitrola__trilho::before,
  .vitrola__trilho::after {
    flex-basis: calc((100% - var(--slide-largura-movel)) / 2);
  }

  .slide,
  .slide[data-atual] {
    flex-basis: var(--slide-largura-movel);
  }

  /* A arte horizontal não entra em campo no celular, nem no slide central. */
  .slide[data-atual] .slide__arte--horz {
    display: none;
  }

  .slide[data-atual] .slide__arte--vert {
    display: block;
  }

  /* Lado a lado em retrato não sobra largura para manchete nenhuma: empilha, e
     a imagem vai para baixo do texto qualquer que seja a `posicao`. Vale só
     para as variantes de texto, que continuam disponíveis para quem edita. */
  .slide[data-variante='noticia'] {
    flex-direction: column;
    justify-content: center;
  }

  .slide[data-variante='noticia'] .slide__foto {
    order: 2;
    max-width: 100%;
    max-height: 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide__acao,
  .vitrola__seta,
  .vitrola__traco,
  .vitrola__traco::before,
  .vitrola__pausa {
    transition: none;
  }
}

/* ==========================================================================
   notícias
   ========================================================================== */

.noticias {
  margin-top: 2rem;
  padding-block: clamp(0, 5vw, 4rem);
  background: var(--cor-fundo);
}

.noticias__container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

.noticias__selo {
  margin-bottom: var(--espaco-4);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-noticias-selo);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  color: var(--cor-noticias-selo);
}

/*
 * Três colunas. As cinco notícias com thumbnail preenchem a linha 1 inteira e
 * as duas primeiras células da linha 2; a listagem de títulos ocupa a terceira
 * célula da linha 2.
 *
 * `display: contents` na <ul> das notícias é o que faz os <li> participarem
 * desta grade sem uma <div> extra. O `role="list"` no HTML é obrigatório:
 * `display: contents` derruba a semântica de lista no Safari sem ele.
 */
.noticias__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}

.noticias__cards {
  display: contents;
}

.noticias__lista {
  grid-column: 3;
  grid-row: 2;
}

.noticia__foto {
  width: 100%;
  aspect-ratio: 514 / 342;
  object-fit: cover;
  border-radius: var(--raio-m);
}

.noticia__chapeu {
  margin-top: 0.75rem;
  font-size: var(--texto-noticia-chapeu);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cor-noticia-chapeu);
}

.noticia__titulo {
  margin-top: 0.375rem;
  font-size: var(--texto-noticia-titulo);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cor-noticia-titulo);
}

.noticia__titulo a {
  text-decoration: none;
}

.noticia__titulo a:hover {
  text-decoration: underline;
}

.noticia__resumo {
  margin-top: 0.5rem;
  font-size: var(--texto-noticia-resumo);
  line-height: 1.45;
  color: var(--cor-noticia-texto);
}

.noticia__leia {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--texto-noticia-leia);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-noticia-chapeu);
}

.noticia__leia:hover {
  text-decoration: underline;
}

/* ---------- coluna lateral ---------- */

.noticias__lista {
  display: grid;
  gap: var(--espaco-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.noticia-breve {
  border-bottom: 2px solid var(--cor-marca-primaria);
}

.noticia-breve:last-child {
  border-bottom: 0;
}

.noticia-breve__titulo {
  font-size: var(--texto-noticia-titulo);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cor-noticia-titulo-lista);
  text-wrap: auto;
}

.noticia-breve__titulo a {
  text-decoration: none;
}

.noticia-breve__titulo a:hover {
  text-decoration: underline;
}

.noticia-breve .noticia__leia {
  color: var(--cor-noticia-titulo-lista);
}

.noticias__mais {
  margin-top: var(--espaco-5);
  text-align: center;
}

.botao-verde {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 1.75rem;
  font-size: var(--texto-ver-mais);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--cor-verde);
  /* Canto reto, pedido na revisão de 12/08/2026 — era `999px`. */
  border-radius: 0;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.botao-verde:hover {
  transform: scale(1.04);
}

@media (width < 62rem) {
  .noticias__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* a listagem deixa de ter célula fixa e cai no fim, ocupando as duas colunas */
  .noticias__lista {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (width < 48rem) {
  .noticias__grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Tô com Lula (ex-"aspas")
   --------------------------------------------------------------------------
   V3_ASPAS.psd, artboard 1920×712. O que mudou em relação à versão anterior:

     · a seção ganhou título — "TÔ COM LULA", vermelho, centralizado;
     · o fundo virou branco, e a chapa do card, cinza-claro;
     · o nome saiu do pé do card e subiu para logo abaixo do retrato;
     · o retrato virou um círculo que TRANSBORDA o topo da chapa;
     · a aspa deixou de ser colorida e virou um glifo grande, na cor do texto;
     · a citação fecha com ” no fim;
     · entrou o botão "Leia mais", na cor do card.

   A cor de cada card viaja no HTML (`--acento`), não aqui: é conteúdo, como a
   pill de Materiais na /campanha. `--acento-texto` vem junto porque o card
   amarelo precisa de texto escuro para passar no contraste.
   ========================================================================== */

.aspas {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem);
  background: var(--cor-aspas-fundo);
}

.aspas__titulo {
  margin-bottom: var(--espaco-4);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-aspas-titulo);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  color: var(--cor-marca-primaria);
}

/*
 * Sem container: o trilho tem a largura da tela e os cards seguem para fora do
 * campo de visão dos dois lados. O respiro das pontas é `padding-inline`, não
 * um container centralizado — assim o primeiro card começa alinhado ao resto da
 * página mas o último não para numa borda invisível no meio da tela.
 */
.aspas__trilho {
  display: flex;
  gap: var(--espaco-4);
  width: 100%;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/*
 * `ul.` no seletor, não a classe sozinha: o reset do compartilhado tem
 * `ul[role='list'] { padding: 0 }` (base.css:75), que é MAIS específico que uma
 * classe e zerava este padding. Com o tipo no seletor a especificidade empata e
 * a ordem de carregamento decide — home.css entra depois.
 */
ul.aspas__trilho {
  /*
   * `safe center` e não `center` seco: com folga os cards ficam centralizados,
   * que é o pedido; sem folga o `safe` cai para o início em vez de empurrar o
   * primeiro card para fora do alcance da rolagem — que é o que `center`
   * sozinho faz num contêiner que rola (mesma armadilha comentada na
   * `.maratonar__trilha`).
   */
  justify-content: safe center;
  /*
   * O respiro de cima precisa caber o pedaço do retrato que sai da chapa —
   * daí a conta com `--aspa-transborda` em vez de um espaço fixo. O de baixo é
   * só folga.
   */
  padding-block: calc(var(--aspa-card) * var(--aspa-retrato) * var(--aspa-transborda) + var(--espaco-2))
    var(--espaco-2);
  padding-inline: var(--gutter);
  /* Sem isto o snap alinha o primeiro card à borda do scrollport e engole o
     recuo: a lista nascia rolada 32px, encostada na esquerda. */
  scroll-padding-inline: var(--gutter);
}

.aspas__trilho::-webkit-scrollbar {
  display: none;
}

.aspa {
  position: relative;
  flex: 0 0 var(--aspa-card);
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0 calc(var(--aspa-card) * var(--aspa-recuo)) var(--espaco-4);
  background: var(--cor-aspa-painel);
  /* a cor do acento é o traço de identidade de cada depoimento */
  border-bottom: var(--aspa-barra) solid var(--acento, var(--cor-marca-primaria));
}

/*
 * O círculo sobe para fora da chapa: 43.4% do diâmetro fica acima dela, como no
 * layout. A margem negativa faz o retrato subir e a positiva devolve à chapa a
 * altura que ele ocupa por dentro — os dois números saem do mesmo token, então
 * mudar o transbordo não desalinha o resto.
 */
.aspa__retrato {
  width: calc(var(--aspa-card) * var(--aspa-retrato));
  margin-top: calc(var(--aspa-card) * var(--aspa-retrato) * var(--aspa-transborda) * -1);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--cor-fundo);
}

/* Logo abaixo do retrato e centralizado — foi o que mudou de lugar na V3. */
.aspa__autor {
  justify-self: center;
  margin-top: 0.25rem;
  font-family: var(--fonte-texto);
  font-size: var(--texto-aspas-autor);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--cor-aspas-texto);
}

.aspa__texto {
  justify-self: stretch;
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--texto-aspas);
  font-style: italic;
  line-height: 1.18;
  color: var(--cor-aspas-texto);
  text-align: start;
}

/*
 * A aspa grande do layout, desenhada em texto — sem arquivo, sem requisição.
 * Na V3 ela é da cor do texto, não do acento, e fica numa linha só dela.
 */
.aspa__texto::before {
  content: '\201C';
  display: block;
  margin-bottom: -0.1em;
  /* No PSD o glifo tem 34px de tinta num card de 275 — 12.4% da largura do
     card. Em Georgia a aspa desenha ~0.42em, então 3.6em é o que devolve essa
     mancha. */
  font-size: 3.6em;
  line-height: 0.62;
}

/* Fecha as aspas no fim do parágrafo, colado na última palavra. */
.aspa__texto p::after {
  content: '\201D';
}

/*
 * O botão. No PSD ele tem 26px de altura num artboard de 1920 — abaixo do piso
 * de 44px de alvo de toque. Em vez de engordar o desenho, a área clicável cresce
 * num ::after invisível, mesmo truque dos pontos do carrossel. Sobra folga para
 * os dois lados: são 19px até a última linha da citação e 33px até o pé da chapa.
 */
.aspa__acao {
  position: relative;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin-top: var(--espaco-3);
  padding: 0.5em 0.9em;
  font-size: var(--texto-aspas-acao);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--acento-texto, #fff);
  background: var(--acento, var(--cor-marca-primaria));
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.aspa__acao::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 100%;
  min-width: 44px;
  height: 100%;
  min-height: 44px;
}

.aspa__acao:hover {
  transform: scale(1.05);
}

.aspa__acao:active {
  transform: scale(0.96);
}

/* Mesma regra do /legado e dos super apps: seta só existe se houver o que
   rolar. Quem mede é o `home.js`, que liga o `data-rolavel`. */
.aspas__controles {
  display: none;
  justify-content: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}

.aspas[data-rolavel] .aspas__controles {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .aspa__acao {
    transition: none;
  }
}

/* ==========================================================================
   para maratonar
   ========================================================================== */

.maratonar {
  background: var(--cor-maratonar-fundo);
  color: #fff;
  text-align: center;
}

/*
 * O vídeo em destaque abre a seção e sangra de borda a borda — V3, artboard
 * 1920×1305 com a faixa do vídeo indo de y0 a y694. Antes ele era uma placa de
 * 81.6% da largura, arredondada e depois do título; agora é o topo da seção,
 * sem raio e sem margem.
 */
.maratonar__destaque {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--cor-maratonar-destaque-texto);
}

.maratonar__destaque img {
  width: 100%;
  aspect-ratio: var(--maratonar-destaque-proporcao);
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-padrao);
}

.maratonar__destaque:hover img {
  transform: scale(1.02);
}

/*
 * "VÍDEO MAIOR ▶ EM DESTAQUE": as duas palavras e o play numa linha só, o play
 * no meio. Tudo em vw (ver os tokens), então o trio escala junto com a faixa
 * exatamente como no artboard.
 */
.maratonar__chamada {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--maratonar-destaque-vao);
  /* No PSD o trio fica um pouco acima do meio da faixa: centro em y320 de 694. */
  padding-bottom: 3.5%;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-maratonar-destaque);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.maratonar__play {
  flex: 0 0 auto;
  width: var(--maratonar-destaque-play);
  transition: transform var(--dur-media) var(--ease-padrao);
}

.maratonar__play svg {
  width: 100%;
  height: auto;
}

.maratonar__destaque:hover .maratonar__play {
  transform: scale(1.1);
}

/* O miolo escuro: é ele que tem o container, já que o vídeo sangra. */
.maratonar__corpo {
  padding-block: clamp(2rem, 4vw, 3.75rem) clamp(2rem, 5vw, 4rem);
  /*
   * Largura exata que N cards ocupam. `--cards` chega do PHP com a contagem do
   * array — sem ela a conta teria que adivinhar quantos vídeos existem, e o
   * alinhamento quebraria no dia em que a fileira mudasse de tamanho.
   *
   * O `min(100%, …)` é o que faz a conta valer nos dois regimes: com folga, a
   * fileira tem essa largura e é centralizada; sem folga (mobile, quando os
   * cards estouram) ela vira 100% e tudo alinha na borda do container.
   *
   * Mora aqui, e não na fileira, porque o "LULA+" também se alinha por ela — no
   * layout a marca começa na mesma vertical da primeira capa.
   */
  --fileira: min(
    100%,
    calc(var(--cards, 5) * var(--maratonar-card) + (var(--cards, 5) - 1) * var(--maratonar-gap))
  );
}

/* Alinhada à esquerda da fileira de cards, como no layout — não centralizada. */
.maratonar__marca {
  width: min(var(--fileira), 100% - 2 * var(--gutter));
  margin-inline: auto;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-maratonar-marca);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: start;
  text-transform: uppercase;
}

/*
 * O "+" é ARTE, não glifo (revisão de 12/08/2026) — o desenho tem cantos
 * arredondados e hastes de espessura própria, que nenhum peso da fonte dá.
 *
 * As duas medidas saem do V3_MARATONAR.psd, em proporção da altura de
 * maiúscula do "LULA" (74px ali):
 *
 *   altura   71 / 74 = 0,96 de caixa-alta → ~0,67em na Gotham (caixa-alta 0,7em)
 *   folga     5 / 74 = 0,07 de caixa-alta → ~0,05em
 *   subida   10 / 74 = 0,14 de caixa-alta → ~0,09em acima da linha de base
 *
 * Em `em` para acompanhar o `clamp()` do título sem uma segunda média-query.
 */
.maratonar__mais {
  /* Explícito porque o reset do compartilhado deixa toda `img` em `block` — sem
     isto o "+" cai numa linha própria embaixo do "LULA". */
  display: inline-block;
  height: 0.67em;
  width: auto;
  margin-inline-start: 0.05em;
  vertical-align: 0.09em;
}

/* `--fileira` vem do `.maratonar__corpo`, que é quem alinha também o "LULA+". */
.maratonar__fileira {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin: var(--espaco-4) auto 0;
  text-align: start;
}

/* Título e "Veja todos" na mesma caixa dos cards: um encosta na borda esquerda
   da primeira capa, o outro na borda direita da última. */
.maratonar__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  width: var(--fileira);
  margin-inline: auto;
}

.maratonar__fileira-titulo {
  font-size: var(--texto-maratonar-fileira);
  font-weight: 800;
  text-transform: uppercase;
}

.maratonar__todos {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  font-size: var(--texto-noticia-leia);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: gap var(--dur-rapida) var(--ease-padrao);
}

.maratonar__todos:hover {
  gap: 0.75rem;
}

.maratonar__trilha {
  display: flex;
  gap: var(--maratonar-gap);
  /* `stretch` (o padrão) é o que iguala a altura dos cards: o <li> cresce até a
     altura do maior e o card, sendo flex, ocupa o <li> inteiro. */
  align-items: stretch;
  margin: var(--espaco-2) 0 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/*
 * Fileira centralizada. Não é `justify-content: center` porque num flex que
 * rola isso deixa o começo da lista inalcançável quando os cards estouram a
 * largura. Dois espaçadores que só crescem no espaço SOBRANDO resolvem: com
 * folga eles centralizam, sem folga viram 0 e a rolagem começa no primeiro card.
 */
.maratonar__trilha::before,
.maratonar__trilha::after {
  content: '';
  flex: 1 1 0;
}

.maratonar__trilha::-webkit-scrollbar {
  display: none;
}

/* `display: flex` no <li> para o card herdar a altura esticada — sem isso o li
   estica sozinho e o card fica com a altura do próprio conteúdo. */
.maratonar__trilha > li {
  flex: 0 0 auto;
  display: flex;
  scroll-snap-align: start;
}

/* Card 295×307 no PSD, com capa 295×182 — a mesma medida do /legado. A largura
   subiu na revisão de 08/08/2026; ver `--maratonar-card` no tokens. */
.card {
  display: flex;
  flex-direction: column;
  width: var(--maratonar-card);
  padding: 0;
  text-align: start;
  color: #fff;
  background: #061436;
  border-radius: var(--raio-m);
  overflow: hidden;
}

.card__capa {
  position: relative;
  display: block;
}

.card__capa img {
  width: 100%;
  aspect-ratio: 295 / 182;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-padrao);
}

.card:hover .card__capa img {
  transform: scale(1.04);
}

.card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.card__corpo {
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem 0.875rem 1rem;
}

.card__titulo {
  font-size: var(--texto-card-titulo);
  font-weight: 600;
  text-transform: uppercase;
}

.card__linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.card__meta {
  font-size: var(--texto-card-meta);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--acento, #ffd500);
}

.card__tag {
  padding: 0.125rem 0.5rem;
  font-size: var(--texto-card-meta);
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.card__resumo {
  font-size: var(--texto-card-meta);
  line-height: 1.4;
}

.card__chamada {
  font-size: var(--texto-card-chamada);
  font-style: italic;
  color: var(--acento, #ffd500);
}

/*
 * A faixa do vídeo tem 2.77:1 no artboard. Num celular em pé isso vira uma
 * tirinha de 140px de altura e o cartaz não se lê — então a proporção abre para
 * 4/3 e a chamada empilha, com o play entre as duas palavras virando o segundo
 * item de uma coluna. O `flex-wrap` já estava lá para isto.
 */
@media (width < 48rem) {
  .maratonar__destaque img {
    aspect-ratio: 4 / 3;
  }

  .maratonar__chamada {
    flex-direction: column;
    gap: 0.35em;
    padding-bottom: 0;
    font-size: clamp(1.5rem, 9vw, 3rem);
  }

  .maratonar__play {
    width: clamp(3rem, 16vw, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maratonar__destaque img,
  .maratonar__play,
  .card__capa img,
  .maratonar__todos {
    transition: none;
  }
}

/* ==========================================================================
   banner de campanha
   --------------------------------------------------------------------------
   ARTE NOVA — V4_HOME_CAMPANHA.psd, artboard 1920×631 (12/08/2026). Substitui
   o banner de `HOME_CAMPANHA.psd`; o que sobreviveu foi a mecânica, não a
   composição:

     · saiu o chapéu "VEM CONHECER";
     · a manchete "PARA O BRASIL SEGUIR EM FRENTE" virou "O BRASIL PRONTO PRA
       MAIS", desenhada dentro de uma caixa amarela inclinada — objeto
       inteligente no PSD, imagem aqui (ver o `<h2>` no index.php);
     · o botão continua CSS, e o texto é Transducer Condensed Black de verdade.
       A forma foi lida errado na primeira leitura ("paralelogramo liso"): ele
       é um bloco EXTRUDADO, com espessura da mesma cor. Corrigido em 14/08 —
       ver o comentário da regra `.banner__acao`.

   TODAS as posições são fração do artboard, então a faixa inteira escala junto
   com a janela sem uma única média-query de posição. O parallax de ponteiro na
   dupla vem do `rodape.js` compartilhado, que varre `[data-parallax]`.
   ========================================================================== */

/*
 * `container-type: inline-size` para o corpo do botão poder ser `cqw`: o texto
 * precisa encolher junto com a faixa, e `vw` mediria a JANELA — com barra de
 * rolagem visível os dois divergem, e o texto passava da borda do botão.
 */
.banner {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1920 / 631;
  overflow: hidden;
  background: var(--cor-marca-secundaria);
}

.banner__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * A dupla é uma arte só (Geraldo + Lula remontados dos dois recortes do PSD)
 * numa tela de 1281×631 — o mesmo sistema de coordenadas do artboard. Por isso
 * ela encosta na esquerda e na base sem nenhum ajuste fino: 1281/1920.
 */
.banner__dupla {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 66.72%;
  will-change: transform;
}

/* `block` para não sobrar o espaço de linha-base embaixo da imagem — no mobile
   ele apareceria como uma faixa de céu entre a dupla e o fim da seção. */
.banner__dupla img {
  display: block;
  width: 100%;
  height: auto;
}

.banner__texto {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* PSD: caixa amarela em x1078 y41, 535×522. */
.banner__titulo {
  position: absolute;
  left: 56.15%;
  top: 6.5%;
  width: 27.87%;
  margin: 0;
}

.banner__titulo img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * O botão. No PSD ele NÃO é um paralelogramo liso: é um bloco EXTRUDADO —
 * a face da frente mais uma espessura que sai para a direita e para baixo,
 * pintada da MESMA cor (medida na composição: um único #0034d1, sem sombra e
 * sem face mais escura). O 3D se lê só pela silhueta, que é um hexágono com
 * dois cantos chanfrados — o de baixo à esquerda e o de cima à direita.
 *
 * Medidas tiradas da máscara azul de `referencias/banner-v4/export`:
 *
 *   face da frente   247 × 71, cisalhada (as bordas sobem 52 em 247 de
 *                    largura = −11,82°, o `--banner-inclinacao` da faixa)
 *   profundidade     22 para a direita, 16 para baixo
 *   silhueta total   270 × 139, de (1305, 432) a (1575, 571)
 *
 * Como isso vira CSS: a caixa do elemento é a silhueta ANTES do cisalhamento
 * (270 × 91,6 — o skew não muda vetores verticais, então a profundidade local
 * é 22 × 20,6), e o `clip-path` recorta o hexágono nessa caixa. O `clip-path`
 * é aplicado no espaço local, antes do `transform`, então o skew leva o
 * recorte junto e não é preciso pré-inclinar a mão.
 *
 * A posição volta a ser pelo canto, não pelo centro: com a caixa local sendo a
 * silhueta inteira, o canto superior esquerdo dela já é o vértice de cima da
 * face. `skewY` pivota no centro, então a origem local sai 0,2092 × 135 = 28,2
 * acima do vértice: 484 − 28,2 = 455,8.
 *
 *   esquerda  1305   / 1920 = 67,97%
 *   topo        455,8 /  631 = 72,23%
 *   largura     270  / 1920 = 14,06%
 *   altura       91,6 /  631 = 14,52%
 *
 * O `padding` empurra o texto para o centro da FACE, não da silhueta — sem ele
 * o rótulo cairia 11 × 10 para dentro da espessura. Em `cqw` (e não em %)
 * porque o bloco contenedor do botão é a faixa inteira: `padding: 8%` mediria
 * 8% de 1920.
 *
 * Embaixo o recuo é maior que a espessura: 20,6 dela mais 21 de compensação da
 * CAIXA DE LINHA. O rótulo é caixa-alta e não tem descendente nenhum, mas a
 * linha reserva o espaço dele mesmo assim, e centrar a linha deixa a mancha
 * 10,5 abaixo de onde o PSD a desenha. Os 21 sobem a caixa esses 10,5 — é
 * centragem pela caixa-alta, que é o que o layout faz.
 *
 * O corpo do texto saiu da MEDIÇÃO da caixa-alta na composição — 25px sobre uma
 * caixa-alta de 0,71em na Transducer, logo 35,2px, ou 1,833% da faixa. O número
 * declarado no PSD (47,33) é de antes da escala da camada e não vale.
 */
.banner__acao {
  position: absolute;
  left: 67.97%;
  top: 72.23%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14.06%;
  height: 14.52%;
  padding: 0 1.146cqw 2.167cqw 0;
  /* 247/270 · 20,6/91,6 · 22/270 · 71/91,6 */
  clip-path: polygon(0 0, 91.48% 0, 100% 22.49%, 100% 100%, 8.15% 100%, 0 77.51%);
  font-family: var(--fonte-display);
  font-size: var(--texto-banner-acao);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background: var(--cor-banner-acao);
  transform: skewY(var(--banner-inclinacao));
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

/* mesmo feedback de apertar das pills da /campanha */
.banner__acao:hover {
  transform: skewY(var(--banner-inclinacao)) scale(1.05);
}

.banner__acao:active {
  transform: skewY(var(--banner-inclinacao)) scale(0.96);
}

@media (width < 62rem) {
  /*
   * Empilhado: manchete, botão e imagem — a ordem do HTML. Sem respiro no fim
   * da seção, porque a dupla precisa encostar na base; com padding embaixo ela
   * fica pairando sobre uma faixa de céu.
   *
   * Tudo volta ao fluxo: a composição do PSD depende de sobreposição, e numa
   * tela estreita a caixa amarela cobriria o rosto dos dois.
   */
  .banner {
    display: grid;
    aspect-ratio: auto;
    align-items: end;
    padding-block: var(--espaco-5) 0;
  }

  .banner__texto {
    position: static;
    display: grid;
    justify-items: center;
    gap: var(--espaco-3);
    padding-inline: var(--gutter);
    margin-bottom: var(--espaco-3);
  }

  .banner__titulo {
    position: static;
    width: min(62%, 17.5rem);
  }

  /* Sem a caixa do layout: pílula normal, do tamanho do texto, com o alvo de
     44px garantido. A inclinação fica — é ela que amarra o botão à manchete.
     A extrusão sai junto com a caixa: num botão que se ajusta ao texto ela
     viraria uma aba solta na direita, e o 3D do PSD depende da proporção da
     face que aqui já não existe. */
  .banner__acao {
    position: static;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 0.5rem 1.75rem;
    clip-path: none;
    font-size: clamp(1rem, 4.5vw, 1.5rem);
  }

  /* A arte é paisagem: 70% ficava baixa demais para se ler quem está ali. */
  .banner__dupla {
    position: relative;
    bottom: auto;
    left: auto;
    width: 88%;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner__acao {
    transition: none;
  }
}

/* ==========================================================================
   super apps
   --------------------------------------------------------------------------
   REDESENHADA — V4_HOME_SUPERAPPS.psd, artboard 1920×990 (12/08/2026). Duas
   mudanças, e as duas mexem na estrutura:

     · entrou uma FAIXA de imagem antes do bloco ("Siga as redes do Lula"),
       sangrando de borda a borda, com a manchete desenhada dentro da arte;
     · a fileira única de dez ícones virou TRÊS sub-listas com rótulo vermelho
       — Redes do Lula (7), Parceiros (4) e Páginas especiais (1).

   O que saiu junto: os chips com o nome de cada app (o layout não os desenha
   mais) e, com eles, todo o maquinário de carrossel. Sem rótulo, o ladrilho
   não tem largura mínima de texto para defender, então as sub-listas
   simplesmente QUEBRAM em mais linhas quando a tela aperta — nada rola de
   lado, nem no celular, e as setas deixaram de existir.

   DESVIO: o PSD desenha três ícones IGUAIS em "Páginas especiais". É duplicata
   de layout, não três destinos; publicamos um só (decisão de 12/08/2026).
   ========================================================================== */

.superapps {
  /* Sem respiro no topo: a faixa encosta na seção anterior, como no artboard. */
  padding-block: 0 clamp(2rem, 5vw, 4rem);
  background: var(--cor-fundo);
}

/* ---------- a faixa ---------- */

.superapps__faixa {
  position: relative;
  aspect-ratio: 1920 / 395;
  overflow: hidden;
}

.superapps__faixa-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O celular com o Lula está no terço esquerdo da foto; ancorar ali é o que
     mantém o assunto no quadro quando a faixa é recortada no mobile. */
  object-position: 28% center;
}

/* PSD: manchete em x826 y119, 575×157 sobre 1920×395. */
.superapps__faixa-titulo {
  position: absolute;
  left: 43.02%;
  top: 30.13%;
  width: 29.95%;
  margin: 0;
}

.superapps__faixa-titulo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- o bloco de apps ---------- */

/*
 * As duas colunas são `auto`, não `1fr auto`, e o PAR é que fica centrado.
 *
 * Com `1fr` na esquerda a coluna engolia toda a sobra e a chamada encostava na
 * borda da página, a 300px dos ícones — o dobro do que o layout desenha. O que
 * o PSD fixa não é a margem da esquerda, é a DISTÂNCIA entre uma coisa e outra:
 * "SUPER APPS" acaba em x711 e o primeiro ícone começa em x820, 109px depois
 * (5,68% do artboard). Com as duas colunas do tamanho do conteúdo, esse vão é
 * o `gap`, e o conjunto se centra sozinho em qualquer largura.
 *
 * A distância até a faixa é a do artboard: y461 − y395 = 66, ou 3,44%.
 */
.superapps__container {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: clamp(1.5rem, 5.68vw, 6.813rem);
  align-items: center;
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
  margin-top: clamp(1.5rem, 3.44vw, 4.125rem);
}

/* Transducer Condensed Black, como no PSD — a licença chegou em 12/08/2026 e
   este é o primeiro uso dela no projeto. Ver `--fonte-display`. */
.superapps__titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-superapps);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cor-superapps);
}

.superapps__apoio {
  margin-top: 0.25rem;
  font-size: var(--texto-superapps-apoio);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cor-superapps);
}

/* 12px entre o fim de uma sub-lista e o rótulo da seguinte, medido no PSD
   (y615→627 e y783→799). */
.superapps__grupos {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.grupo-apps__titulo {
  /* 9px entre a base do rótulo e o topo do primeiro ícone (y473→482). */
  margin-bottom: 0.5rem;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-superapps-grupo);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cor-superapps);
}

/*
 * `gap: 0` é MEDIDA, não descuido: o passo entre ícones no PSD é 122px e a
 * arte tem 122 de largura, porque cada PNG já traz 6px de sombra transparente
 * de cada lado. O respiro que se vê é essa sombra. Somar gap aqui abriria o
 * dobro do que o layout desenha.
 */
.grupo-apps__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app {
  display: block;
  text-decoration: none;
  color: var(--cor-texto);
  transition:
    transform var(--dur-rapida) var(--ease-pop),
    filter var(--dur-rapida) var(--ease-padrao);
}

/*
 * Largura fixa, sem encolher: o ladrilho é arte de 122×127 (110 de placa mais
 * a sombra) e reduzi-lo embaçaria o desenho de dentro. Quando não cabem, as
 * sub-listas quebram linha — ver o comentário do cabeçalho.
 */
.app__icone {
  display: block;
  width: var(--app-ladrilho);
  height: auto;
}

/* O deslocamento para cima que o briefing pediu — mesmo gesto do dock. */
.app:hover,
.app:focus-visible {
  transform: translateY(var(--dock-salto));
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.35));
}

/*
 * 78rem, não 62: o corte é a MEDIDA, não um breakpoint escolhido. As duas
 * colunas só valem a pena enquanto os sete ícones de "Redes do Lula" couberem
 * numa linha — 854px, mais o vão de 5,68% e os ~230 da chamada, dá ~1153 de
 * conteúdo. Abaixo de 1248px a fileira quebrava em 5+2 e deixava dois ícones
 * órfãos numa segunda linha, com um vazio à direita: pior do que empilhar.
 *
 * (É o mesmo 78rem do menu do header, por coincidência de aritmética — os dois
 * medem coisas diferentes.)
 */
@media (width < 78rem) {
  /* Empilhado: a chamada em cima, os três grupos embaixo, tudo centralizado —
     com uma coluna só, alinhar à esquerda deixaria a última linha de cada
     sub-lista órfã na borda. */
  .superapps__container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--espaco-4);
    justify-items: center;
    text-align: center;
  }

  .grupo-apps__lista {
    justify-content: center;
  }
}

@media (width < 48rem) {
  /*
   * A faixa fica mais alta e a manchete desce para o pé: a 1920/395 num
   * celular ela mediria uns 100px de largura e viraria um borrão.
   */
  .superapps__faixa {
    aspect-ratio: 16 / 9;
  }

  /* Empurra o quadro para a direita: a tela acesa do aparelho é a parte mais
     clara da foto, e no recorte estreito ela cai bem atrás da manchete. */
  .superapps__faixa-fundo {
    object-position: 34% center;
  }

  /*
   * DESVIO. No layout a manchete branca cai sobre o borrão escuro da direita e
   * o contraste sobra. Recortada para o celular, ela passa a atravessar a tela
   * do aparelho e o cabelo do Lula — os dois quase brancos, e aí o texto some.
   *
   * O véu resolve sem mexer na arte nem no recorte: escurece só o pé, que é
   * onde a manchete está, e some antes de chegar ao rosto. Não existe no
   * desktop, onde não há o que corrigir.
   */
  .superapps__faixa::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 62%;
    background: linear-gradient(to top, rgb(0 0 0 / 0.72), transparent);
  }

  .superapps__faixa-titulo {
    z-index: 1;
    left: 50%;
    top: auto;
    bottom: 8%;
    width: 66%;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app {
    transition: none;
  }
}

/* ==========================================================================
   dock
   --------------------------------------------------------------------------
   DESVIO: no PSD ele é uma placa inline em y943, logo abaixo do carrossel.
   O briefing pede fixo no fim da janela — feito aqui, com respiro no `body`
   para não cobrir o rodapé, e z-index abaixo do modal.
   ========================================================================== */

/* O respiro tem que existir sempre, senão o dock come o fim do rodapé. */
body {
  padding-bottom: calc(var(--dock-icone) + 2.5rem);
}

.dock {
  position: fixed;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  translate: -50% 0;
  /* abaixo do modal (100) e acima do resto */
  z-index: 50;
  padding: 0.5rem 0.75rem;
  background: var(--cor-dock-fundo);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.22);
}

.dock__lista {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dock__link {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--dock-icone);
  height: var(--dock-icone);
  transition:
    transform var(--dur-rapida) var(--ease-pop),
    filter var(--dur-rapida) var(--ease-padrao);
}

.dock__link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* O salto do macOS. O vizinho seguinte sobe menos, o que dá a onda.
   A sombra fica no `filter`, não em `box-shadow`: os ícones são PNG com alfa,
   então a sombra tem que seguir o recorte da arte, não a caixa do elemento. */
.dock__link:hover,
.dock__link:focus-visible {
  transform: translateY(var(--dock-salto)) scale(1.18);
  filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.45));
}

.dock__item:hover + .dock__item .dock__link {
  transform: translateY(calc(var(--dock-salto) / 2.5)) scale(1.07);
}

/* Rótulo em balão, como no macOS: só aparece no hover ou no foco. */
.dock__rotulo {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  translate: -50% 0;
  padding: 0.25rem 0.5rem;
  font-size: var(--texto-card-meta);
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  /* mesma regra do chip dos super apps: a cor vem do HTML quando existe */
  background: var(--cor-chip, var(--cor-marca-primaria));
  border-radius: var(--raio-g);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-rapida) var(--ease-padrao);
}

.dock__link:hover .dock__rotulo,
.dock__link:focus-visible .dock__rotulo {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dock__link,
  .dock__rotulo {
    transition: none;
  }
}

/* ==========================================================================
   modal de vídeo
   ========================================================================== */

body[data-modal-aberto] {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  background: #000;
  animation: surgir var(--dur-media) var(--ease-padrao);
}

.modal[hidden] {
  display: none;
}

@keyframes surgir {
  from {
    opacity: 0;
  }
}

.modal__caixa {
  display: contents;
}

.modal__fechar {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  border-radius: 999px;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

.modal__fechar:hover {
  transform: scale(1.1);
}

/* O maior vídeo que cabe na tela sem cortar: limitado pela largura OU pela
   altura, o que apertar primeiro. */
.modal__video {
  width: min(96vw, calc((100dvh - 6rem) * 16 / 9));
  aspect-ratio: 16 / 9;
}

.modal__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .modal {
    animation: none;
  }

  .modal__fechar {
    transition: none;
  }
}