/**
 * Legado (LULA+) — só o miolo.
 *
 * Vitrine escura no formato de streaming: hero de destaque, três fileiras de
 * cards roláveis e um modal de vídeo.
 *
 * 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.
 *
 * Caminhos de imagem sempre relativos (CLAUDE.md: nunca `/img/...`).
 */

/* ----------------------------------------------- paleta escura da página */

/*
 * Mesma decisão do Editorial: o miolo é escuro, o topo e o rodapé
 * compartilhados são os da /campanha e continuam claros. A troca de paleta
 * acontece no `main`, não no `:root` — redefinir `--cor-fundo` globalmente
 * pintaria a barra da marca de azul-quase-preto.
 *
 * O modal é irmão do `main`, não filho, então recebe a paleta junto.
 */
main,
.modal {
  --cor-fundo: var(--cor-fundo-legado);
  --cor-texto: var(--cor-texto-legado);
  --cor-texto-suave: var(--cor-texto-suave-legado);
}

main {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
}

/* ---------------------------------------------------------------- hero */

/* Foto 1920×1094 no artboard de 2738; o texto senta sobre ela. */
.hero {
  position: relative;
  margin-top: -83px; /* o header flutua por cima */
  padding-top: 83px;
  isolation: isolate;
}

.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}

/*
 * Degradê que garante contraste do texto sobre a foto. No PSD é uma camada
 * de preenchimento; aqui é CSS, para não gravar o gradiente no JPEG e poder
 * ajustar sem reexportar.
 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, var(--cor-fundo) 12%, rgb(0 7 27 / 0.55) 45%, transparent 72%),
    linear-gradient(to top, var(--cor-fundo) 2%, transparent 40%);
}

/*
 * O limite de 46rem é da LINHA, não do bloco. Posto no próprio
 * `.hero__conteudo` ele encolhia o `.container` para 736px e o
 * `margin-inline: auto` centralizava o texto no meio da tela — o layout quer
 * ele começando na margem do container, como o resto da página.
 */
.hero__conteudo {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--espaco-2);
  min-height: min(52.6vw, 900px);
  padding-block: var(--espaco-5);
}

.hero__conteudo > * {
  max-width: 46rem;
}

.lula-mais {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 1.98vw, 2.375rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lula-mais span {
  color: var(--cor-marca-terciaria);
}

.hero__destaque {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 43px;
  padding-inline: 0.875rem;
  background: rgb(255 255 255 / 0.16);
  border-radius: var(--raio-s);
  font-size: var(--texto-destaque);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-hero);
  font-style: italic;
  font-weight: 600;
  line-height: var(--lh-hero);
  text-wrap: balance;
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: var(--texto-hero-metrica);
  color: var(--cor-verde);
}

.hero__chip {
  padding: 0.15rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: var(--raio-s);
  font-size: 0.8em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.hero__apoio {
  max-width: 40ch;
  font-size: var(--texto-hero-apoio);
  line-height: 1.38;
}

.hero__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: var(--espaco-1);
  padding-inline: var(--espaco-4);
  background: var(--cor-marca-primaria);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

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

.hero__botao:active {
  transform: scale(0.97);
}

/* ----------------------------------------------------------- container */

/*
 * O HTML usa `.container` em dois lugares (hero e fileiras), mas a classe não
 * existia nesta folha — resquício da migração de 07/08/2026, quando o
 * `.container` ficou só no CSS da notícia interna. Sem ela o conteúdo encostava
 * nas duas bordas da janela.
 */
.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* ------------------------------------------------------------ fileiras */

/*
 * `minmax(0, 1fr)` e não `1fr`: item de grid tem `min-width: auto`, então a
 * trilha de 5 cards (5×295 + 4×17 = 1543px) empurrava a seção para além do
 * container e a página inteira ganhava scroll horizontal. Com o minmax o item
 * pode encolher e a rolagem fica onde deve, dentro da trilha.
 */
.fileiras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 3.75vw, 4.5rem);
  padding-block: clamp(2rem, 3.75vw, 4.5rem);
}

.fileiras > section {
  min-width: 0;
}

/* `center` e não `baseline`: as setas são caixas de 44px e alinhá-las pela
   linha de base do título deixaria o par pendurado. */
.fileira__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-3);
}

.fileira__titulo {
  font-size: var(--texto-fileira);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/*
 * As setas ocupam o lugar que era do "Veja todos". Quem decide se elas
 * aparecem é o JS, pelo atributo `hidden` no grupo — aqui só o desenho.
 */
.fileira__setas {
  display: flex;
  gap: 0.5rem;
}

.fileira__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cor-texto);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  transition:
    background-color var(--dur-rapida) var(--ease-padrao),
    transform var(--dur-rapida) var(--ease-padrao);
}

.fileira__seta:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.18);
  transform: scale(1.06);
}

/*
 * Desabilitada continua VISÍVEL, só apagada: sumir com o botão ao chegar na
 * ponta faria o par de setas dançar de posição a cada rolagem.
 */
.fileira__seta:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/*
 * Rolagem horizontal com encaixe, como em catálogo de streaming. Em telas
 * largas os cards cabem todos e a rolagem simplesmente não aparece.
 */
/*
 * `grid-auto-columns` FIXO, sem `1fr`.
 *
 * Com `minmax(var(--card-largura), 1fr)` a coluna esticava para ocupar o
 * espaço sobrando: a fileira de 3 itens virava cards de 450px (contra os 295
 * do layout), o conteúdo nunca estourava a trilha e a rolagem simplesmente não
 * existia — as setas ficavam desabilitadas para sempre. Era esse o "último
 * carrossel não funciona".
 *
 * Com a largura fixa, todo card tem a mesma medida e a trilha rola sempre que
 * o conjunto passa da largura disponível. Fileira curta deixa espaço à direita,
 * que é o comportamento normal de catálogo de streaming.
 */
.fileira__trilha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-largura);
  gap: var(--card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Barra escondida: quem indica que dá para rolar agora são as setas e o card
     cortado na borda. A barra fina que havia aqui, escura sobre fundo escuro,
     lia-se como um traço solto embaixo da fileira. A rolagem continua inteira
     no dedo, na roda e no teclado — só o desenho da barra some. */
  scrollbar-width: none;
  margin: 0;
}

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

.fileira__trilha > li {
  scroll-snap-align: start;
}

/* -------------------------------------------------------------- card */

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: start;
  background: var(--cor-card);
  border-radius: var(--raio-m);
  overflow: hidden;
  transition: transform var(--dur-media) var(--ease-pop);
}

.card:hover,
.card:focus-visible {
  transform: scale(1.04);
}

.card__capa {
  position: relative;
}

.card__capa img {
  width: 100%;
  height: auto;
  aspect-ratio: 295 / 176;
  object-fit: cover;
}

/*
 * O play é desenhado aqui, não embutido na foto: assim ganha hover, estado
 * de pressionado e acompanha o tema. As capas foram reexportadas do PSD com
 * a camada `play-button` oculta justamente para isto.
 */
.card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform var(--dur-media) var(--ease-pop);
}

.card__play svg {
  width: clamp(38px, 2.9vw, 56px); /* 56px no artboard de 1920 */
  height: auto;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.5));
}

.card:hover .card__play,
.card:focus-visible .card__play {
  transform: scale(1.12);
}

.card:active .card__play {
  transform: scale(0.95);
}

.card__corpo {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 0.95rem 1.1rem;
}

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

.card__linha {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: var(--texto-card-meta);
  color: var(--acento, var(--acento-amarelo));
}

.card__tag {
  padding: 0.1rem 0.4rem;
  background: rgb(255 255 255 / 0.16);
  border-radius: 2px;
  font-size: 0.85em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

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

.card__chamada {
  display: flex;
  align-items: start;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: var(--texto-card-chamada);
  font-style: italic;
  line-height: 1.23;
  color: var(--acento, var(--acento-amarelo));
}

.card__chamada svg {
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* -------------------------------------------------------------- modal */

.modal[hidden] {
  display: none;
}

/*
 * Experiência de streaming: tela cheia, fundo 100% preto e opaco (pedido
 * explícito) e só o vídeo. Sem padding e sem chapa em volta — nada disputa
 * espaço com a imagem.
 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--cor-modal);
  animation: modal-entra var(--dur-media) var(--ease-padrao);
}

@keyframes modal-entra {
  from {
    opacity: 0;
  }
}

/*
 * Maior retângulo 16:9 que cabe na viewport: limitado pela largura em telas
 * baixas e pela altura em telas largas. `dvh` na segunda linha para o mobile,
 * onde a barra de endereço muda a altura; a primeira fica de reserva.
 */
.modal__caixa {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
}

/* Fixo na viewport, não na caixa: em tela larga a caixa é mais estreita que
   a janela e o X ficaria flutuando longe do canto. */
.modal__fechar {
  position: fixed;
  top: var(--espaco-2);
  right: var(--espaco-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgb(255 255 255 / 0.15);
  border-radius: 50%;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}

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

/*
 * O iframe do YouTube só é criado quando o modal abre e é destruído ao
 * fechar — assim a página não carrega nada do YouTube antes da hora e o
 * vídeo para de tocar de verdade quando o usuário fecha.
 */
/* Preenche a caixa, que já é o retângulo 16:9 máximo da viewport. */
.modal__video {
  position: absolute;
  inset: 0;
  background: #000;
}

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

/* Estado sem vídeo: mensagem no lugar do player, para nunca ficar um buraco. */
.modal__video:empty::after {
  content: 'Vídeo indisponível';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
}


/* ---------------------------------------------------------- responsivo */

@media (width < 48rem) {
  .hero__conteudo {
    min-height: 0;
  }

  /* Abaixo de 48rem o container já é mais estreito que 46rem; o limite de
     linha só atrapalharia. */
  .hero__conteudo > * {
    max-width: none;
  }

  .hero::before {
    background: linear-gradient(to top, var(--cor-fundo) 18%, rgb(0 7 27 / 0.6) 70%);
  }
}