/**
 * /propostas — "Propostas do Lula".
 *
 * Porte do layout aprovado (o protótipo em `propostas-lula-0c60da.vercel.app`)
 * para dentro do tema. Três mudanças em relação ao protótipo, e só três:
 *
 * 1. **Tudo escopado em `.propostas`.** O protótipo era uma página solta e
 *    podia estilizar `body`, `*` e nomes curtos como `.card` e `.hero`. Aqui
 *    ele divide o documento com o topo e o rodapé compartilhados — `.card`
 *    solto pegaria cartão de notícia, `.hero` pegaria o hero de outra página se
 *    um dia as folhas se cruzarem. O prefixo resolve sem renomear nada.
 *
 * 2. **O reset do protótipo saiu.** `base.css` já faz `box-sizing`,
 *    `margin: 0`, `img { display: block }` e o reset de `button` e de títulos.
 *    O que NÃO faz é `padding: 0` universal — então toda `ul` daqui zera o
 *    padding na própria regra. Sem isso o recuo de 40px do navegador voltaria
 *    e empurraria as listas dos cards.
 *
 * 3. **Fontes do tema.** Anton virou Transducer Condensed (`--display`) e
 *    Archivo virou Gotham (`--texto`); ver a nota no `tokens.css` desta pasta.
 *    Transducer Condensed não tem o corte de peso 400 que a Anton usava — o
 *    peso do display aqui é 800, que é o Black.
 *
 * A ordem das seções segue a da página: hero · eixos · destaques · temas · fim.
 */

.propostas {
  background: var(--branco);
  color: var(--preto);
  font-family: var(--texto);
}

/* ==========================================================================
   hero
   ========================================================================== */

.propostas .hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 40px 64px;
  text-align: left;
}

.propostas .hero .kicker {
  font-family: var(--texto);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin-bottom: 28px;
}

.propostas .hero .kicker span {
  color: var(--apagado);
  margin: 0 10px;
}

.propostas .hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(52px, 8vw, 118px);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--vermelho);
  letter-spacing: 0;
  /* `base.css` equilibra títulos com `text-wrap: balance`. Aqui a quebra é
     manual (o `<br>` entre "Propostas" e "do Lula") e o balance brigava com
     ela, jogando o emoji para a segunda linha em certas larguras. */
  text-wrap: nowrap;
}

.propostas .hero h1 .l4 {
  white-space: nowrap;
}

.propostas .hero h1 .h1-emojis {
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  vertical-align: bottom;
  margin-left: 0.03em;
}

/* Emojis soltos: a pessoa arrasta cada um para onde quiser. O `--dx`/`--dy`
   vem do JS; o resto do transform é desta folha, para o repouso continuar
   inclinado mesmo sem nunca ter sido arrastado. */
.propostas .hero h1 .h1-emojis img {
  height: 0.95em;
  width: auto;
  position: relative;
  z-index: 50;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) translateY(-0.12em) rotate(8deg);
  transition: transform 380ms var(--ease-pop-forte);
}

.propostas .hero h1 .h1-emojis img:hover {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) translateY(-0.12em) rotate(0deg) scale(1.1);
}

/* O Lula fica sempre na frente do Alckmin quando os dois se sobrepõem. */
.propostas .hero h1 .h1-emojis img:first-child {
  z-index: 51;
}

.propostas .hero h1 .h1-emojis img:last-child {
  height: 0.86em;
}

.propostas .hero h1 .h1-emojis img.arrastando {
  cursor: grabbing;
  transition: none;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) translateY(-0.12em) rotate(-4deg) scale(1.12);
  filter: drop-shadow(0 18px 22px rgba(16, 16, 20, 0.28));
}

.propostas .hero .sub {
  margin-top: 26px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: var(--preto);
  max-width: 640px;
  line-height: 1.4;
}

/* ==========================================================================
   eixos — a faixa cinza dos três compromissos
   ========================================================================== */

.propostas .eixos {
  background: var(--cinza-menu);
  color: var(--preto);
  margin-bottom: 100px;
}

.propostas .eixos-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.propostas .eixo {
  padding: 36px 28px 40px;
  border-right: 1px solid rgba(16, 16, 20, 0.12);
}

.propostas .eixo:first-child {
  padding-left: 40px;
}

.propostas .eixo:last-child {
  border-right: 0;
  padding-right: 40px;
}

.propostas .eixo h3 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--vermelho);
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0;
}

.propostas .eixo p {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  max-width: 30em;
}

/* ==========================================================================
   destaques — os seis cards que viram no clique
   ========================================================================== */

.propostas .destaques {
  max-width: 1200px;
  margin: 0 auto 100px;
  padding: 0 40px;
}

.propostas .destaques-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 3.8vw, 52px);
  text-transform: uppercase;
  color: var(--vermelho);
  letter-spacing: 0.005em;
}

.propostas .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
  /* `role="list"` no HTML pede o reset de `base.css`, mas o padding do
     navegador só cai lá para `ul[role='list']` — esta é `ul` mesmo. */
  padding: 0;
  list-style: none;
}

.propostas .card {
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.propostas .card-face {
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
}

/* Sem JS as duas faces ficam EMPILHADAS, frente e depois verso, e o cartão
   vira um bloco de texto comum. É o mesmo princípio do acordeão: não há flip
   para dar, então o que seria o verso não pode sumir — são três das cinco
   propostas de cada card. Quem monta o 3D é o `propostas--js`. */
.propostas--js .card {
  perspective: 1400px;
  cursor: pointer; /* a superfície inteira vira o cartão — ver `cards()` no JS */
}

.propostas--js .card-inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.35, 0.1, 0.2, 1);
}

.propostas--js .card.flip .card-inner {
  transform: rotateY(180deg);
}

.propostas--js .card-face {
  grid-area: 1/1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.propostas .card-frente {
  background: var(--creme-card);
  border: 1px solid var(--linha);
  align-items: flex-start;
  transition:
    border-color var(--dur-rapida) var(--ease-padrao),
    box-shadow var(--dur-rapida) var(--ease-padrao);
}

/* `:focus-within` e não `:focus-visible`: quem recebe o foco é o botão lá
   embaixo, e o realce precisa aparecer na moldura inteira. */
.propostas--js .card:hover .card-frente,
.propostas .card:focus-within .card-frente {
  border-color: var(--vermelho);
  box-shadow: 0 18px 30px -20px rgba(163, 17, 8, 0.35);
}

.propostas .card-frente .card-emoji {
  height: 88px;
  width: auto;
  transition: transform 380ms var(--ease-pop-forte);
}

.propostas--js .card:hover .card-emoji,
.propostas .card:focus-within .card-emoji {
  transform: scale(1.12) rotate(-8deg);
}

.propostas .card-frente h3 {
  margin-top: 20px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.propostas .card-frente .frase {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cinza);
}

.propostas .card-frente .previa {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--linha);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.propostas .card-frente .previa li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}

.propostas .card-frente .previa li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vermelho);
}

/* Os dois botões que viram o cartão. O clique na superfície inteira é do JS;
   estes existem para o teclado e o leitor de tela, e por isso têm texto curto
   e `text-align: left` — herdar o `center` de `<button>` os desalinharia do
   resto da face. */
.propostas .card-cta,
.propostas .card-verso .voltar {
  margin-top: auto;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  display: block;
}

.propostas .card-cta {
  padding: 22px 0 0;
  letter-spacing: 0.1em;
  color: var(--vermelho);
}

.propostas .card-cta::after {
  content: ' →';
  white-space: nowrap;
}

.propostas .card-verso {
  background: var(--vermelho);
  color: var(--sobre-vermelho);
}

.propostas--js .card-verso {
  transform: rotateY(180deg);
}

.propostas .card-verso ul {
  margin: 6px 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.propostas .card-verso li {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
}

.propostas .card-verso .voltar {
  padding: 18px 0 0;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

.propostas .card-verso .voltar::after {
  content: ' ↩';
}

/* ==========================================================================
   temas — o acordeão, uma linha aberta por vez
   ========================================================================== */

.propostas .temas {
  max-width: 1200px;
  margin: 0 auto 140px;
  padding: 0 40px;
}

.propostas .temas-rotulo {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cinza);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--preto);
}

.propostas .tema {
  border-bottom: 1px solid var(--linha);
}

.propostas .tema h2 {
  font-size: inherit;
  font-weight: inherit;
}

.propostas .tema-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  text-align: left;
  position: relative;
  transition:
    background var(--dur-rapida) var(--ease-padrao),
    color var(--dur-rapida) var(--ease-padrao),
    box-shadow var(--dur-rapida) var(--ease-padrao);
}

.propostas .tema-nome {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Item de flex nasce com `min-width: auto` e se recusa a ficar menor que a
     maior palavra. "EMPREENDEDORISMO" empurrava o emoji para fora da tela em
     vez de quebrar; os dois juntos são o que devolve a quebra. */
  min-width: 0;
  overflow-wrap: break-word;
}

.propostas .tema-emoji {
  height: clamp(64px, 7.5vw, 100px);
  width: auto;
  flex-shrink: 0;
  transition: transform 380ms var(--ease-pop-forte);
}

/* Linha ativa: vermelho liso, como o dia selecionado de um calendário — e o
   emoji dá um pulo. O `:focus-visible` entra junto com o `:hover` para quem
   navega por teclado ver o mesmo destaque. */
.propostas .tema-btn:hover,
.propostas .tema-btn:focus-visible,
.propostas .tema.aberto .tema-btn {
  background: var(--vermelho);
  color: var(--sobre-vermelho);
}

.propostas .tema-btn:hover .tema-emoji,
.propostas .tema-btn:focus-visible .tema-emoji,
.propostas .tema.aberto .tema-btn .tema-emoji {
  transform: scale(1.16) rotate(-8deg);
}

.propostas .tema.aberto .tema-btn {
  box-shadow: 0 26px 30px -22px rgba(163, 17, 8, 0.5);
  z-index: 2;
}

/* Painel recolhível por `grid-template-rows: 0fr → 1fr`: anima a altura sem
   `max-height` chutado, e o conteúdo continua no fluxo.

   O padrão é ABERTO, e é de propósito. Esta página é 90% texto dentro dos
   painéis: recolhida por CSS, uma visita sem JS não veria proposta nenhuma —
   muito pior que as duas setas mortas que o `legado.js` evita. Quem recolhe é
   a classe `propostas--js`, que só existe quando há JS para reabrir. */
.propostas .painel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-media) var(--ease-padrao);
}

.propostas--js .tema:not(.aberto) .painel {
  grid-template-rows: 0fr;
}

.propostas .painel-clip {
  overflow: hidden;
}

.propostas .painel-inner {
  padding: 44px 20px 56px;
}

.propostas .painel .intro {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500;
  line-height: 1.45;
  max-width: 720px;
  margin-bottom: 40px;
}

/* ---- tabela Proposta | O que muda na vida ---- */

.propostas .tabela {
  width: 100%;
  border-collapse: collapse;
}

.propostas .tabela th {
  font-family: var(--texto);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vermelho);
  text-align: left;
  padding: 0 24px 12px 0;
  border-bottom: 2px solid var(--preto);
}

.propostas .tabela td {
  padding: 20px 24px 20px 0;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
  font-size: 16.5px;
  line-height: 1.5;
}

.propostas .tabela tr:last-child td {
  border-bottom: 0;
}

.propostas .tabela td.p {
  font-weight: 700;
  width: 38%;
  padding-right: 40px;
}

.propostas .tabela td.m {
  color: var(--cinza);
  font-weight: 400;
}

/* ==========================================================================
   fim — a assinatura antes do rodapé do site
   ========================================================================== */

.propostas .fim {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 90px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* ==========================================================================
   telas estreitas
   ========================================================================== */

@media (max-width: 1000px) {
  .propostas .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .propostas .eixos-inner {
    grid-template-columns: 1fr;
  }

  .propostas .eixo,
  .propostas .eixo:first-child,
  .propostas .eixo:last-child {
    padding: 26px 40px 30px;
    border-right: 0;
    border-bottom: 1px solid rgba(16, 16, 20, 0.12);
  }

  .propostas .eixo:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .propostas .hero {
    padding: 56px 20px 44px;
  }

  /*
   * "PROPOSTAS" é uma palavra só e os dois emojis vêm grudados nela: nada
   * disso pode quebrar, então a primeira linha é uma medida rígida de ~6,2em.
   * Com o piso de 52px do `clamp` do desktop ela media 358px num iPhone SE de
   * 320px, e a página inteira ganhava rolagem lateral — medido em 12/09/2026.
   *
   * O piso cai para 42px e os emojis encolhem junto; de ~400px para cima o
   * `13vw` assume e o hero volta a crescer com a tela.
   */
  .propostas .hero h1 {
    font-size: clamp(42px, 13vw, 118px);
  }

  .propostas .hero h1 .h1-emojis img {
    height: 0.72em;
  }

  .propostas .hero h1 .h1-emojis img:last-child {
    height: 0.65em;
  }

  .propostas .eixos {
    margin-bottom: 70px;
  }

  .propostas .eixo,
  .propostas .eixo:first-child,
  .propostas .eixo:last-child {
    padding: 22px 20px 26px;
  }

  .propostas .destaques {
    padding: 0 20px;
    margin-bottom: 70px;
  }

  .propostas .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .propostas .card-face {
    min-height: 280px;
    padding: 22px;
  }

  .propostas .card-frente .card-emoji {
    height: 72px;
  }

  .propostas .temas {
    padding: 0 20px;
    margin-bottom: 90px;
  }

  .propostas .tema-btn {
    padding: 14px;
    gap: 14px;
  }

  /* Encolhe antes de precisar quebrar: o `break-word` da regra de cima é a
     rede de segurança, não o plano. O teto de 24px é o mesmo valor que o
     `clamp` do desktop dá em 721px, para não haver salto na fronteira. */
  .propostas .tema-nome {
    font-size: clamp(18px, 5vw, 24px);
  }

  .propostas .tema-emoji {
    height: 52px;
  }

  .propostas .painel-inner {
    padding: 30px 14px 40px;
  }

  /* A tabela vira lista: sem o cabeçalho, cada linha é um bloco com a proposta
     em negrito por cima e o efeito na vida embaixo. Duas colunas de 16px de
     texto em 360px de tela seriam duas colunas de uma palavra. */
  .propostas .tabela,
  .propostas .tabela tbody {
    display: block;
  }

  .propostas .tabela thead {
    display: none;
  }

  .propostas .tabela tr {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--linha);
  }

  .propostas .tabela tr:last-child {
    border-bottom: 0;
  }

  .propostas .tabela td {
    display: block;
    border: 0;
    padding: 0;
    width: auto;
  }

  .propostas .tabela td.p {
    width: auto;
    padding: 0 0 6px;
  }

  .propostas .fim {
    padding: 0 20px 60px;
  }
}