.home-content { max-width: 960px; margin: 0 auto; padding: 0 var(--e5) 80px; }

/* Wordmark empilhado: lê como lockup, não como título de página — é o que
   o distingue do nome do festival, que usa a mesma fonte e o mesmo peso.
   A régua vertical repete o gesto que organiza o resto da página: a borda
   esquerda que marca estado no card e o chip que ancora a régua de tempo.
   A mesma barra aparecendo nos três lugares é o que amarra o sistema. */
.wordmark {
  display: inline-block;
  margin: 0;
  padding-left: var(--e4);
  border-left: 8px solid var(--marca);
  font-family: var(--fonte-display);
  font-size: var(--t-wordmark);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--tinta);
}

.wordmark span { display: block; }
.wordmark-line { color: var(--marca); }

/* Marca e promessa dividem a primeira linha. O empilhamento do lockup fica:
   é ele que faz o nome ler como marca em vez de título de página (ver o
   comentário acima), e perdê-lo para ganhar uma linha seria trocar
   identidade por altura.
   Escopado em home.css de propósito: templates/404.html usa .app-header e
   carrega só base.css, então uma regra de flex lá mudaria a 404 junto. */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--e5);
  flex-wrap: wrap;
}

.promessa {
  margin: 0;
  font-size: var(--t-corpo);
  color: var(--tinta-suave);
}

/* Dentro de .home-content, alinhado com a grade de cards: o herói é o card
   do próximo festival, aumentado. Faixa sangrando de ponta a ponta ficaria
   descolada dos cards, que param em 960px. A régua roxa de 8px é o mesmo
   gesto da faixa da página de festival e do wordmark acima. */
.heroi-caixa { margin-bottom: var(--e6); }

.heroi {
  display: flex;
  align-items: center;
  gap: var(--e5);
  flex-wrap: wrap;
  padding: var(--e5);
  border-left: 8px solid var(--marca);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-repouso);
  text-decoration: none;
}

.heroi:hover { box-shadow: var(--sombra-flutuante); }

.heroi-capa {
  flex: 0 0 132px;
  height: 92px;
  display: grid;
  place-items: center;
}

.heroi-logo { max-width: 100%; max-height: 92px; object-fit: contain; display: block; }

.heroi-inicial {
  font-family: var(--fonte-display);
  font-size: var(--t-titulo);
  font-weight: 800;
}

.heroi-txt { flex: 1; min-width: 190px; }

.heroi-nome {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-display);
  font-size: var(--t-faixa);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  /* Nome longo quebra dentro da coluna em vez de empurrar a contagem para
     fora do bloco. Mesmo motivo do .faixa-festival h1. */
  overflow-wrap: break-word;
}

.heroi-datas { margin: 0; font-size: var(--t-atracao); }
.heroi-local { margin: 2px 0 0; font-size: var(--t-atracao); opacity: .72; }

/* Contagem em cima, botão embaixo: a contagem é a informação, o botão é a
   ação que ela justifica. */
.heroi-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e3);
  flex: 0 0 auto;
}

.heroi-contagem { border-left: 6px solid var(--marca); padding-left: var(--e3); }

.heroi-contagem-rot {
  display: block;
  font-size: var(--t-rotulo-menor);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

/* Sem `color` própria: herda a tinta de contraste que .heroi já calculou
   (inline, no elemento raiz). var(--marca) foi um erro do plano aqui — a
   contagem senta sobre a COR DO FESTIVAL, não sobre o papel branco onde o
   selo do card usa essa mesma marca. Roxo sobre um festival escuro
   (Tomorrowland #1b1033, João Rock #171717, Bangers #141821) mede
   2.5:1, abaixo do piso de 3:1 da WCAG mesmo para texto grande; a tinta de
   contraste herdada mede 14–18:1 nos nove festivais. */
.heroi-contagem-val {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--t-titulo);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.05em;
  /* Os dígitos mudam todo dia; sem largura tabular o bloco dança de largura
     na virada de 9 para 10. */
  font-variant-numeric: tabular-nums;
}

.heroi-contagem-un,
.heroi-contagem-texto {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--t-palco);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Invertido, como o botão de ingressos da faixa: fundo na tinta de
   contraste, texto na cor do festival. Funciona nos dois extremos
   (#ffffff do Lollapalooza a #1b1033 do Tomorrowland) sem uma terceira cor.
   currentColor NÃO resolve isto: dentro de uma mesma regra, `color` e
   qualquer `currentColor` usado nela sempre resolvem para o MESMO valor
   final do elemento — não existe jeito de fazer `background: currentColor`
   e `color: X` apontarem para tintas diferentes no mesmo seletor. Por isso
   as duas cores chegam prontas do JS como custom properties (heroi.js
   grava --heroi-cor e --heroi-tinta no elemento raiz do herói), e aqui é
   só leitura direta — sem currentColor nenhum. */
.heroi-btn {
  display: inline-block;
  padding: var(--e2) var(--e4);
  border-radius: var(--raio-chip);
  background: var(--heroi-tinta);
  color: var(--heroi-cor);
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: var(--t-rotulo);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.secao-festivais { margin-bottom: var(--e7); }
.secao-festivais h2 {
  margin: 0 0 var(--e4);
  font-size: var(--t-rotulo-menor);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.cards {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card-festival {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--raio-card);
  background: var(--superficie);
  box-shadow: var(--sombra-repouso);
  color: inherit;
  text-decoration: none;
}

.card-festival:hover {
  box-shadow: var(--sombra-flutuante);
}

/* Altura fixa em vez de aspect-ratio: é ela que mantém todos os cards
   alinhados, com logo em retrato ou em paisagem. Os 180 menos os 2 x 16 de
   padding dão os 148 do max-height do logo abaixo — se mexer num, mexa no
   outro. */
.card-capa {
  display: grid;
  place-items: center;
  height: 180px;
  padding: var(--e4);
}

/* O limite vertical é absoluto de propósito. Com max-height: 100% o logo
   vaza por cima do texto do card: a porcentagem não resolve contra a
   altura da capa aqui, nem com grid-template-rows: 1fr — verificado lado
   a lado no navegador. */
.card-logo {
  max-width: 100%;
  max-height: 148px;
  object-fit: contain;
  display: block;
}

/* A capa vira o contexto de posicionamento do selo. Ela já é grid com
   place-items: center para o logo; position: relative não interfere nisso. */
.card-capa { position: relative; }

/* Cor da marca com texto branco, e NÃO a cor do festival: o selo precisa ser
   legível sobre nove capas de cores diferentes, de #ffffff a #141821.
   Derivar contraste por capa seria uma regra a mais para manter, e a cor da
   marca resolve as nove de uma vez — além de amarrar o selo ao roxo que já
   marca a régua do wordmark e do herói. */
.card-dias {
  position: absolute;
  top: var(--e2);
  right: var(--e2);
  padding: 3px 8px;
  border-radius: var(--raio-chip);
  background: var(--marca);
  color: var(--superficie);
  font-family: var(--fonte-display);
  font-size: var(--t-rotulo-menor);
  font-weight: 800;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}

.card-capa-vazia {
  color: var(--superficie);
  font-family: var(--fonte-display);
  font-size: var(--t-titulo);
  font-weight: 800;
}

.card-aviso {
  margin: var(--e2) 0 0;
  font-size: var(--t-rotulo-menor);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.card-corpo { padding: var(--e3) var(--e4) var(--e4); }

.card-corpo h3 {
  margin: 0 0 var(--e1);
  font-family: var(--fonte-display);
  font-size: var(--t-secao);
  font-weight: 800;
  letter-spacing: -.015em;
}

.card-datas {
  margin: 0 0 2px;
  font-size: var(--t-atracao);
  font-weight: 700;
  color: var(--marca);
}

.card-local { margin: 0; font-size: var(--t-atracao); color: var(--tinta-suave); }

#passados .card-festival { opacity: 0.72; }
#passados .card-festival:hover { opacity: 1; }

.vazio { margin: 0; color: var(--tinta-suave); font-size: var(--t-corpo); }

/* Único corte de mobile do site (767px, ver tests/estilo/sistema.test.js).
   Fica no fim do arquivo de propósito: cada regra aqui tem a MESMA
   especificidade da regra desktop que ela ajusta (mesmo seletor, sem
   classe extra), então é a ordem no CSS que decide quem vence numa tela
   estreita — se este bloco viesse antes das regras acima, a cascata
   devolvia a versão desktop por cima da mobile e a media query virava
   letra morta. */
@media (max-width: 767px) {
  /* Entre ~600 e ~767px a frase caberia ao lado do lockup só quebrando em
     duas linhas, que é a composição mais feia das três possíveis.
     flex-basis: 100% pula essa faixa: a frase vai direto de "uma linha ao
     lado" para "empilhada sob a marca". 767px é o mesmo corte de
     festival.css e do MOBILE_QUERY de assets/js/festival/main.js — o site
     tem um só. */
  .promessa { flex-basis: 100%; }

  /* O herói passa a ter a anatomia dos cards da grade, ampliada. É só CSS
     porque o DOM que montarHeroi produz já tem a ordem certa: capa, texto,
     e o bloco lateral que aqui vira o rodapé.
     No desktop os três ficam lado a lado; aqui a capa é uma faixa larga com
     o logo, a contagem sai do fluxo e vira o selo do canto, e o botão fica
     sozinho no .heroi-lado ocupando a largura toda. */
  .heroi {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
  }

  .heroi-capa {
    flex-basis: auto;
    height: 130px;
    padding: var(--e4);
  }

  .heroi-logo { max-height: 100px; }

  /* Superfície E tinta explícitas, as duas — não só a primeira. heroi.js
     pinta o <a>.heroi inteiro com a cor do festival (heroi.style.background)
     e com a tinta de contraste correspondente (heroi.style.color), herdada
     por qualquer filho que não redeclare `color`. Sem background aqui, a
     capa colorida e o corpo ficam a mesma laje, sem a "faixa larga com o
     logo, corpo branco embaixo" que a §2.1 pede; e background sozinho, sem
     `color: var(--tinta)` para substituir a tinta herdada, deixa nome, datas
     e local BRANCOS sobre esse branco em Tomorrowland (#1b1033), Bangers
     (#141821) e João Rock (#171717) — os três em que textoDeContraste
     devolve #ffffff. */
  .heroi-txt {
    padding: var(--e3) var(--e4) 0;
    background: var(--superficie);
    color: var(--tinta);
  }

  .heroi-nome { font-size: var(--t-faixa-compacta); }

  /* Canto superior direito da capa, como o selo de dias do card. Âncora é
     .heroi, que ganhou position: relative acima. */
  .heroi-contagem {
    position: absolute;
    top: var(--e2);
    right: var(--e2);
    border-left: 0;
    padding: 5px var(--e3);
    border-radius: var(--raio-chip);
    background: var(--marca);
    text-align: center;
  }

  /* Escondido da vista, não da árvore de acessibilidade: sem ele o selo lê
     como "20 dias" solto, sem dizer para quê. Mesma técnica de
     .apenas-leitor em base.css. */
  .heroi-contagem-rot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .heroi-contagem-val { font-size: var(--t-secao); color: var(--superficie); }

  .heroi-contagem-un,
  .heroi-contagem-texto {
    font-size: var(--t-nota);
    letter-spacing: .08em;
    color: var(--superficie);
  }

  /* Mesmo motivo de .heroi-txt acima: sem os dois, o rodapé (que hospeda o
     botão) continua sobre a cor do festival em vez do corpo branco, e herda
     a tinta de contraste — invisível nos três festivais escuros. */
  .heroi-lado {
    display: block;
    padding: var(--e3) var(--e4) var(--e4);
    background: var(--superficie);
    color: var(--tinta);
  }

  /* O tratamento invertido do desktop (fundo na tinta de contraste do
     festival, texto na cor dele) existe porque lá o botão fica SOBRE a cor
     do festival. Aqui ele passou a ficar sobre o corpo branco, e nos três
     festivais escuros --heroi-tinta é #ffffff: a pílula sairia branca sobre
     branca, a 1,00:1. O texto continuaria legível e o botão deixaria de
     parecer botão. Sobre branco vale o tratamento normal do site — 16,25:1
     em qualquer festival, porque não depende da cor dele. */
  .heroi-btn {
    display: block;
    text-align: center;
    padding: 11px;
    background: var(--tinta);
    color: var(--papel);
  }

  /* Logo à esquerda, texto no meio, selo à direita: cabem quase três na
     altura de um card em pé. Com nove festivais é a diferença entre rolar
     duas telas e rolar seis. O custo aceito é o logo cair de 148px para
     ~42px — ele é o charme da home, e aqui cede lugar à densidade. */
  .cards {
    display: flex;
    flex-direction: column;
    gap: var(--e2);
  }

  .card-festival {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: var(--e3);
    padding: var(--e2);
  }

  /* position: static devolve a âncora do selo para o card. Sem isto ele
     continuaria preso a uma capa de 66px e vazaria dela. É o que evita
     mexer em montarCard.
     O raio usa --raio-chip (6px), não os 7px do rascunho original: é o
     valor mais próximo dos três que a suíte de estilo permite (ver
     "existem três raios" em tests/estilo/sistema.test.js) — inventar um
     quarto reprova o teste, e a diferença de 1px é imperceptível num
     retângulo de 66x56. */
  .card-capa {
    position: static;
    flex: 0 0 66px;
    height: 56px;
    padding: 0;
    border-radius: var(--raio-chip);
  }

  .card-logo { max-height: 42px; }

  /* Dormente hoje — os nove festivais de data/ têm logo —, mas montarCard
     suporta festival sem logo, e sem isto a inicial continua em --t-titulo
     (62px) numa capa que caiu para 56px de altura: o primeiro festival sem
     logo a entrar ganha uma letra maior que a própria capa, cortada pelo
     overflow: hidden do card. --t-secao (19px) guarda a razão aproximada de
     antes (62px numa capa de 180px). */
  .card-capa-vazia { font-size: var(--t-secao); }

  .card-corpo { flex: 1; min-width: 0; padding: 0; }

  .card-corpo h3 { font-size: var(--t-corpo); }

  /* O selo encolhe: no card deitado ele divide a linha com o texto em vez
     de flutuar sobre uma capa de 180px. */
  .card-dias {
    top: 50%;
    right: var(--e3);
    transform: translateY(-50%);
    padding: 2px 6px;
  }
}