/**
 * Mobilização — 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 (V4_MOBILIZACAO.psd, artboard 1920×3157):
 *
 *    128→ 797  hero: foto, chamada e as três portas de entrada
 *    796→1382  faixa vermelha "quero ser um porta-voz"
 *   1379→1506  barra de contagem (estática desde 11/08/2026)
 *   1511→2149  "quero produzir conteúdo" — quatro cartões
 *   2147→2732  faixa verde "quero juntar minha turma e montar um comitê"
 *
 * TIPOGRAFIA. A partir da V4 a página usa a Transducer de verdade, nos três
 * cortes que o PSD pede: Condensed Black no hero, nos títulos das faixas e na
 * contagem; Condensed Bold no título dos cartões e no convite que fecha a
 * contagem (V5); Transducer Regular (largura normal) no texto e no botão dos
 * cartões. Só o apoio das faixas e os botões do hero são Gotham — é o que está
 * no arquivo.
 *
 * Caminhos de imagem sempre relativos (regra do CLAUDE.md).
 */

.mob {
  background: var(--m-creme);
  color: var(--m-texto);
}

/* Container do miolo. As duas faixas e a seção de cartões usam o mesmo. */
.mob__container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* ==========================================================================
   hero — foto, chamada e as três portas de entrada
   --------------------------------------------------------------------------
   A foto já vem do PSD com o véu azul aplicado; não há camada de cor separada
   e por isso não há overlay em CSS. Se um dia a arte vier limpa, o véu volta
   para cá.
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.75rem);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  /* Proporção da faixa no artboard: 1920×669. */
  aspect-ratio: 1920 / 669;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

/*
 * A foto é o primeiro filho e fica no fluxo de empilhamento normal; o conteúdo
 * sobe com `z-index: 1`. NÃO usar `z-index: -1` aqui: negativo joga a imagem
 * para trás do fundo do ancestral pintado (`.mob`), e o hero aparecia creme.
 */
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero > :not(.hero__foto) {
  position: relative;
  z-index: 1;
}

.hero__emoji {
  width: clamp(3.5rem, 6.77vw, 8.125rem); /* 130 no artboard */
  height: auto;
}

.hero__titulo {
  font-family: var(--fonte-display);
  font-size: var(--m-texto-hero);
  font-weight: 900;
  line-height: var(--m-lh-hero);
  letter-spacing: var(--m-track-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__portas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Vão medido entre as PÍLULAS (49 e 60 no artboard); o emoji sai do fluxo. */
  gap: var(--m-porta-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Pílula de 310×66 no PSD, com um emoji encostado na ponta esquerda.
 *
 * `min-height` em vez de altura fixa porque o rótulo tem duas linhas e, com a
 * fonte aumentada pela barra de acessibilidade, uma altura travada cortaria a
 * segunda. `min-width` segura a pílula mais curta no tamanho do layout — sem
 * ela "QUERO SER / PORTA-VOZ" encolheria para dois terços das outras.
 */
.porta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--m-porta-min);
  min-height: 44px;
  padding: var(--m-porta-pad);
  font-size: var(--m-texto-hero-botao);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--m-track-display);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--m-porta-cor, var(--m-vermelho));
  border-radius: var(--m-raio-botao);
  transition: transform var(--dur-rapida) var(--ease-pop);
}

/*
 * O emoji sai do fluxo para não empurrar o rótulo: no PSD ele monta em cima da
 * ponta esquerda da pílula e transborda para fora dela. Largura e transbordo
 * viajam no HTML, em `em`, porque são medidas da ARTE — cada emoji tem um
 * tamanho próprio no arquivo (108, 97 e 156px).
 */
.porta__emoji {
  position: absolute;
  top: 50%;
  left: var(--m-porta-emoji-x, -2.3em);
  width: var(--m-porta-emoji-w, 5.7em);
  height: auto;
  translate: 0 -50%;
}

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

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

/* ==========================================================================
   faixas de convite — "quero ser um porta-voz" e "quero distribuir materiais"
   --------------------------------------------------------------------------
   A mesma peça duas vezes: arte à esquerda, texto à direita. Só mudam a cor de
   fundo, a arte e a cor do texto do botão — tudo por modificador.
   ========================================================================== */

.faixa {
  /* 67px acima e 70 abaixo da arte, que é a peça mais alta das duas colunas. */
  padding-block: clamp(2.5rem, 3.5vw, 4.2rem);
  background: var(--m-faixa-fundo, var(--m-vermelho));
  color: #fff;
}

.faixa--porta-voz {
  --m-faixa-fundo: var(--m-vermelho);
  --m-faixa-acao-texto: var(--m-vermelho-texto);
}

.faixa--distribuir {
  --m-faixa-fundo: var(--m-verde);
  --m-faixa-acao-texto: var(--m-verde-texto);
}

/*
 * Duas colunas iguais dentro do container de 1560. O vão de 70px é o que faz a
 * coluna de texto começar em x=995, que é onde o PSD a começa nas duas faixas.
 */
.faixa__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.5rem, 3.65vw, 4.375rem); /* 70 no artboard */
}

/* A arte é composta: uma peça grande e emojis soltos em volta, como no PSD.
   `position: relative` porque os emojis são absolutos em cima dela. */
/*
 * A caixa é a PEÇA, e os emojis se posicionam em % dela. `margin-inline` abre
 * o espaço que eles ocupam para fora da peça — sem isso, o emoji da esquerda
 * do porta-voz encostaria na borda da tela em telas médias.
 */
/*
 * A margem desloca a peça dentro da coluna. Com `justify-self: center` o que
 * fica centrado é a caixa INTEIRA (peça + margem), então a peça anda metade da
 * margem — e a margem em % é lida sobre a COLUNA (745px), não sobre a peça.
 * O balão precisa de +69px para pousar em x=394 e o lettering de +57 para
 * pousar em 347: 138 e 114px de margem, ou 18.5% e 15.3% da coluna.
 */
.faixa__arte {
  position: relative;
  justify-self: center;
  width: min(100%, 23.1vw); /* 443 no artboard, a largura do balão */
  margin-inline: 18.5% 0;
}

.faixa--distribuir .faixa__arte {
  width: min(100%, 26.7vw); /* 513, a largura do lettering */
  margin-inline: 15.3% 0;
}

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

.faixa__emoji {
  position: absolute;
  height: auto;
}

/*
 * Posições em % da PEÇA (o balão, o lettering), não de uma caixa inventada:
 * assim a composição inteira escala junta. Os números saem do layout.json.
 *
 *   balão do porta-voz  x394..837 (443)  y863..1312 (449)
 *     emoji 1  x218 w218 → left −39.7%  w 49.2%  · base junto com a do balão
 *     emoji 2  x303 w54  → left −20.5%  w 12.2%  · 44.3% acima da base
 *     emoji 3  x365 w79  → left  −6.5%  w 17.8%  · 49.7% acima da base
 *
 *   lettering do comitê  x347..860 (513)  y2197..2642 (445)
 *     emoji    x656 w232 → left  60.2%  w 45.2%  · 11.9% ABAIXO da base
 *
 * `left` negativo é de propósito: no layout os emojis escapam do balão pela
 * esquerda. Nada de `overflow: hidden` na caixa, por isso.
 */
.faixa--porta-voz .faixa__emoji--1 {
  left: -39.7%;
  bottom: 0.4%;
  width: 49.2%;
}

.faixa--porta-voz .faixa__emoji--2 {
  left: -20.5%;
  bottom: 44.3%;
  width: 12.2%;
}

.faixa--porta-voz .faixa__emoji--3 {
  left: -6.5%;
  bottom: 49.7%;
  width: 17.8%;
}

.faixa--distribuir .faixa__emoji--1 {
  left: 60.2%;
  bottom: -11.9%;
  width: 45.2%;
}

.faixa__titulo {
  font-family: var(--fonte-display);
  font-size: var(--m-texto-faixa);
  font-weight: 900;
  /* O PSD aperta o entrelinha bem abaixo do corpo: 59.18 sobre 69.03. */
  line-height: var(--m-lh-faixa);
  letter-spacing: var(--m-track-faixa);
  text-transform: uppercase;
  color: var(--m-amarelo);
}

/*
 * A faixa verde tem quatro linhas de título e o layout reduz o corpo para
 * caberem: 72px contra os 92 da vermelha. Não é o mesmo texto em outro tamanho
 * — são dois tamanhos desenhados no arquivo.
 */
.faixa__titulo--menor {
  font-size: var(--m-texto-faixa-2);
  line-height: var(--m-lh-faixa-2);
}

/*
 * Caixa alta: no PSD o apoio é um texto em minúsculas com "All Caps" aplicado
 * por estilo — quem lê vê maiúsculas. O `text-transform` reproduz isso sem
 * gritar no HTML, que segue com a frase em caixa normal para o leitor de tela.
 */
.faixa__texto {
  margin-top: clamp(0.75rem, 1.46vw, 1.75rem); /* 28 no artboard */
  font-size: var(--m-texto-faixa-apoio);
  font-weight: 500;
  line-height: var(--m-lh-apoio);
  letter-spacing: var(--m-track-apoio);
  text-transform: uppercase;
}

/* Pílula de 235×50 no PSD, em creme (não branco), com o texto na cor da faixa. */
.faixa__acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: clamp(1rem, 1.3vw, 1.563rem); /* 25 no artboard */
  /* 235×50 no PSD: 1.3em de cada lado é o que sobra em volta do rótulo. */
  padding: 0.6em 1.3em;
  font-size: var(--m-texto-faixa-botao);
  font-weight: 700;
  letter-spacing: var(--m-track-apoio);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--m-faixa-acao-texto);
  background: var(--m-botao-claro);
  border-radius: var(--m-raio-botao);
  transition: transform var(--dur-rapida) var(--ease-pop);
}

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

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

/* ==========================================================================
   barra de contagem
   ========================================================================== */

/*
 * A faixa NÃO corre mais (pedido de 11/08/2026): frase única, parada, centrada
 * — e a V4 desenha exatamente isso, com uma estrela em cada ponta em vez da
 * estrela entre duas cópias que a V3 tinha.
 *
 * O corpo (59.7px) sai da mancha de 1380px que a frase ocupa no artboard, agora
 * medida na própria Transducer Condensed Black. Cabe: 1380 + as duas estrelas
 * dão 1499px dentro dos 1856 úteis a 1920.
 */
.contagem {
  display: grid;
  align-content: center;
  /* 129px de faixa no artboard de 1920 — a altura é do layout, não do texto. */
  min-height: 6.72vw;
  padding: 0.75rem var(--gutter);
  background: var(--m-azul);
  color: #fff;
}

.contagem__frase {
  font-family: var(--fonte-display);
  font-size: var(--m-texto-contagem);
  font-weight: 900;
  /* O 0.01em é do PSD e entra na conta da mancha acima. */
  letter-spacing: var(--m-track-display);
  line-height: var(--m-lh-contagem);
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.contagem__frase strong {
  font-weight: inherit;
  color: var(--m-amarelo);
}

/*
 * O convite que fecha a frase (V5, 13/08/2026): mesma família, mesmo corpo,
 * mesma cor — só o peso muda, de Condensed Black para Condensed Bold. Os dois
 * cortes já vinham declarados em `compartilhado/css/fontes.css`, então isto não
 * baixa arquivo novo.
 *
 * Vale para a estrela também, que está dentro do span: o desenho dela é o mesmo
 * (é SVG, não glifo), e a altura continua presa ao `em` do texto.
 */
.contagem__convite {
  font-weight: 700;
}

/*
 * Remate das duas pontas. `0.55em` de ALTURA é o tamanho que a estrela tinha
 * enquanto a faixa corria (~21px a 1920) — mantém a mesma relação com a altura
 * de maiúscula que ela tem no PSD. O `vertical-align` centra-a nessa altura, e
 * não na linha de base, senão ela desce abaixo do texto.
 */
.contagem__estrela {
  /* O reset do compartilhado dá `display: block` a todo `svg` — sem desfazer
     isso a estrela sai da linha e vai parar sozinha na esquerda da faixa. */
  display: inline-block;
  width: auto;
  height: 0.55em;
  /* Somado ao ` ` do HTML dá o vão de ~0.4em que o PSD abre ao lado dela. */
  margin-inline: 0.15em;
  vertical-align: 0.08em;
  fill: currentColor;
}

/* Estrela + palavra vizinha andam juntas. Ver o comentário de `remate()`. */
.contagem__remate {
  white-space: nowrap;
}

/* ==========================================================================
   quero produzir conteúdo — quatro cartões
   ========================================================================== */

.produzir {
  padding-block: clamp(2.5rem, 4vw, 3.9rem) clamp(2.5rem, 3.5vw, 3.5rem);
  background: var(--m-creme);
}

/*
 * O título é LETTERING, não texto: no PSD ele vem vetorizado, com o acento do
 * "Ú" desenhado torto de propósito. Entra como imagem decorativa, com um `h2`
 * real oculto ao lado — mesma solução dos selos de seção da /campanha.
 */
.produzir__lettering {
  display: block;
  width: min(100% - 2 * var(--gutter), 32.45vw); /* 623 no artboard */
  min-width: 15rem;
  height: auto;
  /*
   * 70px é a distância do pé do lettering ao topo do cartão no PSD. A
   * ilustração mais alta sobe 129px acima do cartão e portanto invade essa
   * faixa — mas o lettering é centrado e as artes ficam à esquerda de cada
   * cartão, então elas passam ao lado, como no arquivo. Nada de `overflow`
   * aqui, senão a claquete some.
   */
  margin: 0 auto clamp(1.5rem, 3.65vw, 4.375rem);
}

/*
 * Quatro cartões. Grade, não trilha que rola: os cartões têm texto e botão, e
 * ler isso arrastando de lado é pior do que empilhar. Abaixo de 60rem viram
 * dois por linha; abaixo de 36rem, um.
 */
.cartoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--m-cartao-gap);
  align-items: stretch;
  width: min(
    100% - 2 * var(--gutter),
    calc(4 * var(--m-cartao-largura) + 3 * var(--m-cartao-gap))
  );
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

/*
 * O cartão é uma coluna: tarja de cor com o título, corpo claro com a descrição
 * e o botão no pé. `padding-top` reserva o espaço da ilustração, que transborda
 * a tarja pelo alto e pela esquerda.
 */
.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--m-cartao-fundo);
  border-radius: var(--m-raio);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.09);
}

/*
 * `aspect-ratio` no lugar de altura fixa: a tarja acompanha a largura do
 * cartão, como no PSD (114 de 395). `min-height: auto` para o título de duas
 * linhas poder empurrá-la quando a fonte cresce pela barra de acessibilidade —
 * `aspect-ratio` sozinho não cede, e o texto vazaria.
 */
.cartao__tarja {
  /* bloco de referência da ilustração, que pendura pela BASE da tarja */
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 395 / 114;
  min-height: fit-content;
  /* O título encosta no pé da tarja: 3px de sobra no PSD, e o que separa de
     fato é o vão do descendente da própria linha. */
  padding: clamp(0.5rem, 0.8vw, 0.8rem) 0 0.1vw;
  background: var(--m-cartao-cor, var(--m-cartao-vermelho));
  border-radius: var(--m-raio) var(--m-raio) 0 0;
}

/*
 * CENTRALIZADO no cartão, no pé da tarja — medido nos quatro: o título fica no
 * centro com ±10px. O recuo simétrico de 17% não é estética, é o que sobra
 * depois da ilustração, que ocupa o canto esquerdo; em 17% ainda cabem os
 * 253px de "ORGANIZE GRUPOS", o título mais largo do lote (no PSD ele fecha em
 * 71px de recuo, no limite — 17% dá 4px de folga contra o arredondamento).
 *
 * Até a V3 este recuo era assimétrico (16%/4%) para fugir da ilustração — o que
 * empurrava todo título curto para a direita do que o layout desenha. Com a
 * Transducer condensada a mancha encolheu e o recuo pôde voltar a ser o do PSD.
 */
.cartao__titulo {
  /* Item de flex: sem isto ele encolhe para o próprio conteúdo e o recuo em %
     passa a ser lido sobre uma caixa menor que o cartão. */
  width: 100%;
  padding-inline: 17%;
  font-family: var(--fonte-display);
  font-size: var(--m-texto-cartao);
  font-weight: 700;
  line-height: var(--m-lh-cartao);
  letter-spacing: var(--m-track-cartao);
  text-align: center;
  text-transform: uppercase;
  color: var(--m-cartao-contraste);
}

.cartao--titulo-duplo .cartao__titulo {
  font-size: var(--m-texto-cartao-2l);
  line-height: var(--m-lh-cartao-2l);
}

/*
 * A ilustração transborda o cartão pelo alto e pela esquerda, como no PSD. As
 * medidas mudam muito de cartão para cartão — a claquete do "faça cortes" tem
 * 310px e a do WhatsApp 175 — então largura e deslocamento viajam no HTML: são
 * conteúdo da arte, não decisão de estilo.
 *
 * ELA PENDURA PELA BASE DA TARJA, não pelo topo do cartão. No PSD as quatro
 * pousam na mesma linha — a borda de baixo da faixa de cor — e é isso que
 * precisa sobreviver, não a distância até o topo.
 *
 * Até 14/08/2026 a âncora era o topo do cartão, com `--m-arte-y` valendo a
 * fração da arte que ficava acima dele. Aquilo só acertava enquanto a tarja
 * tivesse exatamente a proporção 395/114 do artboard: bastava ela crescer para
 * a arte ficar pairando no ar. E ela cresce em três situações que não são
 * exceção — título de duas linhas, corpo aumentado pela barra de
 * acessibilidade, e a faixa inteira abaixo de 60rem, onde `aspect-ratio` sai
 * de cena. Era o "parece que está voando" que o cliente apontou.
 *
 * `--m-arte-base` é a CAUDA TRANSPARENTE do arquivo: a fração da altura do PNG
 * que sobra abaixo do último pixel opaco. Com `bottom: 0` a caixa da imagem
 * encosta na base da tarja e essa fração desce a caixa até a arte VISÍVEL
 * pousar ali. É medida do arquivo, não do layout — vale em qualquer largura,
 * com qualquer altura de tarja.
 */
.cartao__arte {
  position: absolute;
  bottom: 0;
  left: var(--m-arte-x, -10%);
  z-index: 1;
  width: var(--m-arte-w, 48%);
  height: auto;
  translate: 0 var(--m-arte-base, 0%);
}

/*
 * Medidas do PSD, em % do cartão de 395: 29px da tarja ao texto, 27 do texto ao
 * botão, 6 do botão ao pé e 10 de cada lado. O recuo lateral é o do BOTÃO, que
 * é o elemento largo; o texto recua mais, na própria regra.
 */
.cartao__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(0.6rem, 1.41vw, 1.688rem);
  padding: clamp(0.75rem, 1.51vw, 1.813rem) 2.5% clamp(0.25rem, 0.31vw, 0.375rem);
}

/*
 * A LARGURA da caixa de texto é o que produz as quebras do layout ("Produza
 * cards, banners, / ilustrações e outras artes gráficas / para as redes.") — e
 * no PSD ela muda de cartão para cartão: 270px no "grave vídeos" contra 321 no
 * "faça cortes". Por isso viaja no HTML, como a arte: é medida do conteúdo.
 *
 * Em `em` do próprio texto, e não em %, para a quebra sobreviver: encolhendo a
 * fonte junto com a viewport, a caixa encolhe na mesma proporção e as linhas
 * continuam caindo onde o layout as põe. Só quando o cartão fica mais estreito
 * que a caixa é que o `min()` assume e o texto quebra sozinho.
 */
.cartao__texto {
  flex: 1;
  width: min(100%, var(--m-texto-w, 19em));
  margin-inline: auto;
  font-family: var(--fonte-display-texto);
  font-size: var(--m-texto-cartao-apoio);
  line-height: var(--m-lh-cartao-apoio);
  text-align: center;
  color: var(--m-cartao-texto);
}

/* Pílula de 370×44 no pé. Os 44 do PSD são, por acaso, o alvo mínimo de toque. */
.cartao__acao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5em 0.7em;
  font-family: var(--fonte-display-texto);
  font-size: var(--m-texto-cartao-botao);
  font-weight: 400;
  letter-spacing: var(--m-track-cartao);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--m-cartao-contraste);
  background: var(--m-cartao-cor, var(--m-cartao-vermelho));
  border-radius: var(--m-raio-botao);
  transition: transform var(--dur-rapida) var(--ease-pop);
}

.cartao__acao:hover,
.cartao__acao:focus-visible {
  transform: scale(1.03);
}

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

/* O amarelo precisa de texto escuro: branco sobre #FFC600 dá 1.8:1. */
.cartao--amarelo .cartao__titulo,
.cartao--amarelo .cartao__acao {
  color: var(--m-botao-3-texto);
}

/* ==========================================================================
   responsivo
   ========================================================================== */

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

  /*
   * Com uma ou duas colunas o cartão fica bem mais largo que os 395px do
   * artboard, e aí o recuo em PORCENTAGEM joga a arte para fora da tela: a
   * claquete quer −19,5% do cartão, o que a 340px de cartão dá −66px, mais do
   * que o gutter tem para ceder. Aqui ela passa a ancorar por medida fixa, e a
   * largura para de acompanhar o cartão.
   */
  .cartao__arte {
    left: -0.75rem;
    width: min(var(--m-arte-w, 48%), 7.5rem);
  }

  /* O recuo do título deixa de ser proporcional pelo mesmo motivo: agora ele
     reserva a largura real da arte. */
  .cartao__titulo {
    padding-inline: 6.25rem 0.75rem;
  }

  /* Empilhado, a arte à esquerda do texto some no vão: a faixa vira uma coluna
     só, com a arte primeiro. */
  .faixa__grade {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .faixa__texto {
    margin-inline: auto;
  }

  /*
   * As quebras do PSD saem de cena aqui. Elas foram desenhadas para uma coluna
   * de 745px; num celular, "DA CAMPANHA DO LULA PARA DISTRIBUIR" numa linha só
   * passa da largura da tela. Sem os `<br>` o texto quebra sozinho, onde couber.
   */
  .faixa__texto br {
    display: none;
  }

  /* A ilustração do primeiro cartão sobe até 50px acima dele e, com uma ou duas
     colunas, passa a ficar embaixo do lettering — que aqui é centrado. */
  .produzir__lettering {
    margin-bottom: clamp(3rem, 8vw, 5rem);
  }

  /*
   * Numa coluna só a peça mede em % da linha inteira, não em vw: `23.1vw` daria
   * 92px num celular de 400. As margens reservam o lado por onde os emojis
   * escapam — esquerda no porta-voz, direita no comitê. Sem elas, o emoji sai
   * da tela.
   */
  .faixa__arte {
    width: 60%;
    margin-inline: 40% 0;
  }

  .faixa--distribuir .faixa__arte {
    width: 62%;
    margin-inline: 0 38%;
  }

  /*
   * A tarja perde a proporção fixa: num cartão que ocupa a linha inteira,
   * 395/114 vira uma faixa de cor quase vazia com o título perdido no pé.
   */
  .cartao__tarja {
    aspect-ratio: auto;
    padding-block: 1.5rem 0.9rem;
  }

  /*
   * Com uma ou duas colunas o cartão fica bem mais largo que os 395px do
   * artboard, e o corpo escalado pela viewport encolhe junto — o título de duas
   * linhas chegava a 17px num cartão de 445. Aqui a escala volta a ser da
   * LARGURA DA TELA, não da proporção do artboard. Só depois de 60rem, quando
   * as quatro colunas voltam e o cartão aperta, é que os tamanhos do PSD valem.
   */
  .cartao__titulo {
    font-size: clamp(1.5rem, 5.5vw, 2.25rem);
  }

  .cartao--titulo-duplo .cartao__titulo {
    font-size: clamp(1.25rem, 4.6vw, 1.875rem);
  }

  .cartao__texto {
    font-size: clamp(0.9375rem, 3.2vw, 1.125rem);
  }

  .cartao__acao {
    font-size: clamp(0.9375rem, 3.4vw, 1.188rem);
  }

  /*
   * As três portas empilham. Lado a lado elas precisam de ~700px só para os
   * rótulos no corpo mínimo, e antes disso a da esquerda encostava na borda da
   * tela com o emoji para fora. Empilhadas, a coluna fica com no máximo 32rem
   * para não virar três tarjas atravessando um tablet.
   *
   * O emoji perde o transbordo aqui: num botão que já toca a margem, ele sairia
   * do container. O recuo de 4.1em à esquerda continua sendo o espaço dele.
   *
   * `width: 100%` na pílula só funciona com o `li` esticando junto — num item
   * de flex dimensionado pelo conteúdo, não estica nada.
   */
  .hero__portas {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 32rem);
  }

  .porta {
    width: 100%;
  }

  .porta__emoji {
    left: 0.2em;
    width: min(var(--m-porta-emoji-w, 5.7em), 4.4em);
  }

  .hero {
    /* A 2.87:1 a faixa vira uma tirinha e a chamada não cabe. */
    aspect-ratio: auto;
    min-height: 60vh;
  }
}

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

/* ==========================================================================
   alto contraste
   --------------------------------------------------------------------------
   O tema de alto contraste pinta tudo de preto e o lettering do "quero produzir
   conteúdo" é um PNG vermelho-escuro: sobra 1.5:1, ilegível. Como o `h2` de
   verdade já existe ao lado da imagem (ele é que carrega o texto para o leitor
   de tela), aqui a imagem sai e o `h2` assume o lugar dela.
   ========================================================================== */

:root[data-contraste='alto'] .produzir__lettering {
  display: none;
}

:root[data-contraste='alto'] .produzir__titulo {
  /* desfaz o `so-leitor` do compartilhado */
  position: static;
  width: auto;
  height: auto;
  margin: 0 auto clamp(1.5rem, 3.65vw, 4.375rem);
  padding: 0;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  font-family: var(--fonte-display);
  font-size: var(--m-texto-faixa-2);
  font-weight: 900;
  line-height: var(--m-lh-faixa-2);
  letter-spacing: var(--m-track-display);
  text-align: center;
  text-transform: uppercase;
  color: var(--m-amarelo);
}

@media (prefers-reduced-motion: reduce) {
  .porta,
  .faixa__acao,
  .cartao__acao {
    transition: none;
  }
}