/* =========================================================
   Seções novas da home — em avaliação.

   Arquivo separado de propósito: enquanto o desenho não estiver aprovado,
   nada em site-home.css é tocado. Na migração isto vira um <link> a mais.

   Depende dos tokens de site-home.css (--home-*). Não redefine nenhum.

   Direção: a seção do problema é uma MESA DE REDAÇÃO — o déficit entra
   como manchete e as matérias como recortes de jornal (papel, fita,
   rotação). O recorte é artefato do mundo real: é ele que prova que o
   dado não é marketing da instituição. Por isso os recortes usam serifa
   de jornal (Newsreader), e não a fonte da marca — eles vêm de fora.
   ========================================================= */

/* ---------------------------------------------------------
   1. A manchete do déficit
   Um título, um fato, a prova. O número encosta na frase que lhe dá
   sentido e conta de 0 a 850 quando entra na tela.
   --------------------------------------------------------- */
/* Título centralizado em dois pesos: a resposta em cima, menor e em creme
   apagado; o problema embaixo, grande e branco. A hierarquia vem do contraste
   entre os dois, não de mais uma cor. */
/* Uma frase só, correndo em linha: empilhar as duas partes em tamanhos
   diferentes dobrava a altura do bloco. Aqui o corpo é o mesmo e a hierarquia
   vem da cor — a resposta em creme apagado, o problema em branco. */
.abre-problema h2 {
  margin: 0 auto;
  max-width: 30ch;
  font-size: clamp(1.8rem, 2.7vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.038em;
  text-align: center;
  text-wrap: balance;
}

.abre-problema__intro {
  color: rgba(255, 253, 247, 0.58);
}

.abre-problema__tese {
  color: var(--home-white);
}

.dado-manchete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 2.6vw, 34px);
  max-width: 680px;
  margin: clamp(30px, 4vw, 48px) 0 clamp(40px, 5vw, 66px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 2px solid rgba(255, 253, 247, 0.3);
}

.dado-manchete > b {
  color: var(--home-peach);
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 7.4vw, 6.8rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.78;
  font-variant-numeric: tabular-nums;
}

.dado-manchete p {
  margin: 0;
  color: rgba(255, 253, 247, 0.95);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.55vw, 1.38rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.dado-manchete p strong { color: var(--home-white); }

.dado-manchete__nota {
  margin: 8px 0 0 !important;
  color: rgba(255, 253, 247, 0.62) !important;
  font-family: var(--font-body) !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
}

/* a fonte vira uma etiqueta, não uma nota de rodapé escondida */
.dado-manchete small {
  display: inline-flex;
  margin-top: 12px;
  padding: 4px 11px;
  border: 1px solid rgba(255, 253, 247, 0.3);
  border-radius: 999px;
  color: rgba(255, 253, 247, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
   2. A mesa de recortes
   Cabeçalho com filete duplo de jornal; cada matéria é um pedaço de
   papel creme preso com fita, levemente girado. No hover o recorte
   endireita e levanta — como pegar o papel da mesa.
   --------------------------------------------------------- */
.jornal {
  margin-top: clamp(38px, 5vw, 66px);
  margin-bottom: clamp(44px, 5.6vw, 76px);
}

.jornal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  align-items: stretch;
}

/* --------- o recorte --------- */
.recorte {
  --recorte-giro: 0deg;
  --recorte-fita: rgba(233, 175, 199, 0.6);
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 28px 18px 22px;
  /* papel: cantos levemente irregulares, como corte de tesoura */
  border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px;
  background:
    linear-gradient(168deg, #fffdf4 0%, #faf3e0 78%, #f3ead2 100%);
  box-shadow:
    0 1px 2px rgba(16, 20, 50, 0.35),
    0 14px 26px rgba(10, 14, 40, 0.35);
  color: #2a2a33;
  transform: rotate(var(--recorte-giro));
}

/* colagem: giros e alturas alternados, nada perfeitamente alinhado */
.jornal__grid .recorte:nth-child(1) { --recorte-giro: -1.7deg; --recorte-fita: rgba(233, 175, 199, 0.62); }
.jornal__grid .recorte:nth-child(2) { --recorte-giro: 1.3deg; --recorte-fita: rgba(169, 211, 173, 0.62); margin-top: 14px; }
.jornal__grid .recorte:nth-child(3) { --recorte-giro: -0.9deg; --recorte-fita: rgba(166, 216, 228, 0.66); margin-top: 4px; }
.jornal__grid .recorte:nth-child(4) { --recorte-giro: 1.9deg; --recorte-fita: rgba(194, 170, 208, 0.62); margin-top: 18px; }

/* a fita adesiva que prende o recorte na mesa */
.recorte::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 74px;
  height: 20px;
  background: var(--recorte-fita);
  box-shadow: 0 1px 2px rgba(16, 20, 50, 0.18);
  transform: translateX(-50%) rotate(calc(var(--recorte-giro) * -1.6));
  /* pontas da fita rasgadas */
  clip-path: polygon(3% 0, 97% 6%, 100% 48%, 96% 100%, 4% 94%, 0 52%);
}

/* Cabeçalho do recorte: o masthead do veículo, como no alto de uma página de
   jornal. Aceita logo ou wordmark — altura fixa para os quatro alinharem
   mesmo com proporções diferentes de arquivo. */
.recorte__veiculo {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding-bottom: 11px;
  border-bottom: 1.5px solid #2a2a33;
}

.recorte__veiculo img {
  max-width: 100%;
  max-height: 42px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

/* Sem arquivo de logo, o nome vira placa de masthead — preto com serifa
   branca, o mesmo peso visual do logo real, para os quatro cabeçalhos
   pesarem igual. É tipografia nossa assumida, não um logo inventado. */
.recorte__veiculo span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 9px;
  background: #17171d;
  color: #fdfaf0;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.16;
  text-transform: uppercase;
  text-wrap: balance;
}

/* a manchete em serifa de jornal: o recorte fala a língua dele, não a nossa */
.recorte__manchete {
  margin: 0 0 auto;
  color: #1c1c24;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 1.24vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.22;
  text-wrap: pretty;
}

/* entrada em cascata: os recortes caem na mesa um depois do outro */
[data-reveal] .recorte {
  opacity: 0;
  transform: rotate(var(--recorte-giro)) translateY(18px);
}

[data-reveal].is-revealed .recorte {
  opacity: 1;
  transform: rotate(var(--recorte-giro)) translateY(0);
  transition:
    opacity 460ms var(--home-ease),
    transform 460ms var(--home-ease),
    box-shadow 260ms ease;
}

[data-reveal].is-revealed .recorte:nth-child(2) { transition-delay: 90ms; }
[data-reveal].is-revealed .recorte:nth-child(3) { transition-delay: 180ms; }
[data-reveal].is-revealed .recorte:nth-child(4) { transition-delay: 270ms; }

/* ---------------------------------------------------------
   3. O HC que já existe
   Única fotografia real da home. Editorial claro: foto com selo de
   aniversário, números que contam ao entrar, marcos como índice.
   --------------------------------------------------------- */
/* sem padding: a faixa vermelha ocupa a seção inteira e encosta nas vizinhas,
   sem tira branca em cima nem embaixo */
.home-heritage {
  padding: 0;
  background: var(--home-white);
}

/* --------- a faixa: caixa vermelha 1/4 + foto 3/4, de borda a borda ---------
   O #7C0002 é o vermelho do próprio edifício — as faixas das fachadas e a
   tarja "HC UFPR" no alto. A caixa cita o prédio que está na foto ao lado. */
.heritage-faixa {
  --heritage-vermelho: #7c0002;
  display: grid;
  grid-template-columns: minmax(340px, 1.12fr) 3fr;
  align-items: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.heritage-faixa__caixa {
  display: grid;
  align-content: space-between;
  gap: clamp(26px, 3vw, 42px);
  /* O respiro à esquerda acompanha a coluna de conteúdo do resto da página.
     O min() é o teto: sem ele, em tela muito larga (ou com zoom reduzido)
     o termo 50vw - 640px crescia mais rápido que a caixa e sobrava uma
     fresta para o texto — o título vazava por baixo da foto. Passando de
     22% da caixa, o alinhamento com a coluna cede lugar à leitura. */
  padding:
    clamp(26px, 3.2vw, 44px)
    clamp(22px, 2.4vw, 34px)
    clamp(26px, 3.2vw, 44px)
    min(max(clamp(24px, 4vw, 72px), calc(50vw - 640px + clamp(24px, 4vw, 72px))), 22%);
  background: var(--heritage-vermelho);
  color: var(--home-white);
}

.heritage-faixa__caixa .home-kicker { color: var(--home-peach); }
.heritage-faixa__caixa .home-kicker::before,
.heritage-faixa__caixa .home-kicker__dots {
  background: var(--home-peach);
  box-shadow: 12px 0 var(--home-white), 24px 0 rgba(255, 253, 247, 0.55);
}

.heritage-faixa__caixa h2 {
  margin: 0;
  color: var(--home-white);
  /* na coluna estreita o tamanho padrão de h2 da home viraria dez linhas */
  font-size: clamp(1.34rem, 1.78vw, 1.92rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.heritage-faixa__caixa h2 em {
  color: var(--home-peach);
  font-style: normal;
}

.heritage-faixa__topo { display: grid; gap: 14px; justify-items: start; }

/* --------- os números, empilhados na caixa --------- */
.heritage-numeros {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.heritage-numeros li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 13px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 253, 247, 0.24);
}

/* mesma escala e mesmo aperto de letra dos números da seção do projeto
   (.home-data strong): é o que dá o peso de big number */
.heritage-numeros b {
  color: var(--home-peach);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.78;
  font-variant-numeric: tabular-nums;
}

.heritage-numeros li > span {
  max-width: 17ch;
  color: rgba(255, 253, 247, 0.86);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.14;
}

/* o fecho: diz que a lista não termina aqui */
.heritage-numeros__mais {
  grid-template-columns: 1fr !important;
  color: rgba(255, 253, 247, 0.6);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  font-style: italic;
}

/* --------- a foto, ocupando os 3/4 --------- */
.heritage-faixa__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  /* piso da faixa; o teto é o conteúdo da caixa vermelha */
  min-height: clamp(300px, 29vw, 440px);
}

/* absoluta de propósito: com height:100% numa figure sem altura definida, a
   imagem caía no tamanho natural (932x621) e era ela que esticava a faixa */
.heritage-faixa__foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mantém a tarja "HC UFPR" no alto do edifício, que é o que identifica */
  object-position: center 34%;
  /* aproxima o prédio sem mexer no enquadramento vertical */
  transform: scale(1.12);
  transform-origin: center 40%;
}

/* --------- a virada: parece só para crianças, não é --------- */
.home-heritage__turn {
  margin: clamp(38px, 4.8vw, 64px) 0 0;
  padding: clamp(28px, 3.6vw, 50px);
  border-radius: 36px 36px 62px 36px;
  background: var(--home-green);
  color: var(--home-ink-deep);
}

.home-heritage__turn h3 {
  max-width: 22ch;
  margin: 0;
  color: var(--home-ink-deep);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}

.home-heritage__turn > p {
  max-width: 60ch;
  margin: 13px 0 0;
  color: #2f5c3f;
  font-size: clamp(0.96rem, 1.15vw, 1.06rem);
  font-weight: 700;
  line-height: 1.55;
}

.home-heritage__turn > p strong { color: var(--home-ink-deep); }

/* a equação: criança → adulto → Paraná, com as setas no papel certo */
.home-heritage__equacao {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.06fr;
  align-items: start;
  gap: clamp(12px, 1.8vw, 24px);
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.home-heritage__equacao li {
  padding-top: 14px;
  border-top: 2px solid rgba(29, 40, 95, 0.26);
  color: #2f5c3f;
  font-family: var(--font-display);
  font-size: clamp(0.96rem, 1.15vw, 1.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.home-heritage__equacao li:last-of-type {
  border-top-color: var(--home-ink-deep);
  color: var(--home-ink-deep);
  font-size: clamp(1.02rem, 1.3vw, 1.24rem);
}

.home-heritage__equacao .seta {
  align-self: center;
  color: rgba(29, 40, 95, 0.55);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.home-heritage__acao {
  margin: clamp(24px, 3vw, 34px) 0 0;
}

/* ---------------------------------------------------------
   Breakpoints — a escada da home é max-width (920 → 620); o tamanho
   fluido fica no clamp() e os @media só reorganizam grade.
   --------------------------------------------------------- */
@media (max-width: 920px) {
  .jornal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a caixa passa para cima da foto, em largura cheia */
  .heritage-faixa { grid-template-columns: 1fr; }
  .heritage-faixa__caixa { padding: clamp(30px, 5vw, 46px) clamp(24px, 6vw, 48px); }
  .heritage-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  /* a proporção vai na figure: a imagem virou absoluta e não dimensiona o pai */
  /* Altura por padding percentual, NÃO por aspect-ratio.

     A moldura não tem conteúdo em fluxo — a imagem dentro dela é absoluta —
     e nesse arranjo o WebKit do iPhone resolve o aspect-ratio como altura
     zero. A foto some, e só ela: a caixa vermelha ao lado tem conteúdo
     próprio e continua de pé, que é exatamente o que estava sendo relatado.

     Não dá para tratar isso com @supports: o navegador responde que suporta
     aspect-ratio, aceita a regra e mesmo assim entrega zero — a rede de
     proteção nunca era acionada.

     Padding percentual é medido sobre a LARGURA do elemento, funciona em
     todo navegador desde sempre e não depende de o filho estar em fluxo.
     56.25% = 9/16. */
  .heritage-faixa__foto {
    min-height: 0;
    aspect-ratio: auto;
    padding-top: 56.25%;
  }
}

@media (max-width: 620px) {
  .dado-manchete { grid-template-columns: 1fr; gap: 12px; }

  /* a mesa vira rolagem: um recorte por vez, com o próximo espiando */
  .jornal__grid {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    overflow-x: auto;
    /* proximity, e não mandatory: os recortes são o alvo do snap e têm
       transform: rotate(). Com mandatory a área de snap é a caixa girada,
       maior e desalinhada do card — o dedo arrasta e o navegador devolve
       para o mesmo lugar, o que parece um carrossel travado. */
    scroll-snap-type: x proximity;
    /* a faixa sangra para fora da tela dos dois lados; sem conter o
       overscroll, o arrasto que começa perto da borda vira gesto de voltar
       do navegador e o carrossel não anda */
    overscroll-behavior-x: contain;
    margin-inline: calc(-1 * clamp(24px, 8vw, 72px));
    padding: 12px clamp(24px, 8vw, 72px) 18px;
    scrollbar-width: none;
  }
  .jornal__grid::-webkit-scrollbar { display: none; }
  /* Sem giro no celular: a colagem torta é um efeito de mesa cheia, e aqui
     aparece um card por vez. Reto, a caixa do snap coincide com o card. */
  .recorte {
    scroll-snap-align: center;
    margin-top: 0 !important;
    --recorte-giro: 0deg !important;
  }

  .heritage-numeros { grid-template-columns: 1fr; }
  /* 75% = 3/4, pelo mesmo motivo do bloco acima */
  .heritage-faixa__foto { padding-top: 75%; }

  /* a equação empilha e as setas apontam para baixo */
  .home-heritage__equacao { grid-template-columns: 1fr; gap: 10px; }
  .home-heritage__equacao .seta { justify-self: start; transform: rotate(90deg); }
  .home-heritage__acao .home-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .recorte { opacity: 1; transform: rotate(var(--recorte-giro)); transition: none; }
}

/* =========================================================
   4. A faixa dos argumentos — uma peça só, de borda a borda.
   O azul do painel é o mesmo #92ccdd do fundo da ilustração (medido no
   arquivo), então a arte flutua dentro da faixa sem emenda visível. Antes
   eram duas coisas soltas sobre o azul escuro: a ilustração de um lado e
   uma lista de linhas do outro.
   ========================================================= */
/* a faixa fecha a seção do projeto, encostada no rodapé dela */
.home-project:has(.mosaico) { padding-bottom: 0; }

.mosaico {
  /* Mais claro que o #92ccdd que veio da arte anterior: aquela trazia o
     próprio fundo embutido, esta é traço transparente e o azul do prédio
     encostava no da faixa nos andares baixos. */
  --mosaico-azul: #d3eaf2;
  position: relative;
  display: grid;
  /* a arte fica com a coluna maior: sem corte, é a largura que define o
     tamanho dela */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: stretch;
  /* sangra até as bordas da janela, saindo do limite do .home-shell */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--mosaico-azul);
}

/* A ilustração é traço com fundo transparente: não há retângulo para
   esconder, então o degradê e o recorte que existiam para a arte anterior
   saíram junto com ela. */
.mosaico__arte {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(18px, 2.4vw, 34px) 0 clamp(18px, 2.4vw, 34px) clamp(10px, 1.6vw, 24px);
  min-height: 100%;
}

.mosaico__arte img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  /* contain: o prédio precisa aparecer inteiro, sem corte */
  object-fit: contain;
}

/* --------- o mosaico 2×2 --------- */
.mosaico__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  padding:
    clamp(30px, 4vw, 58px)
    max(clamp(24px, 4vw, 72px), calc(50% - 640px + clamp(24px, 4vw, 72px)))
    clamp(30px, 4vw, 58px)
    clamp(20px, 2.4vw, 36px);
  list-style: none;
}

.mosaico__cards li {
  --mosaico-acento: var(--home-pink-deep);
  display: grid;
  align-content: start;
  gap: 7px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 22px 22px 34px 22px;
  background: var(--home-white);
  box-shadow: 0 12px 26px rgba(16, 24, 70, 0.12);
  transition: transform 220ms var(--home-ease), box-shadow 220ms ease;
}

/* cada quadrante gira o canto grande e troca o acento — é o que faz a
   grade parecer mosaico e não tabela */
.mosaico__cards li:nth-child(1) { --mosaico-acento: var(--home-pink-deep); border-radius: 34px 22px 22px 22px; }
.mosaico__cards li:nth-child(2) { --mosaico-acento: var(--home-green-deep); border-radius: 22px 34px 22px 22px; }
.mosaico__cards li:nth-child(3) { --mosaico-acento: #1d6a80; border-radius: 22px 22px 22px 34px; }
.mosaico__cards li:nth-child(4) { --mosaico-acento: var(--home-lilac-deep); border-radius: 22px 22px 34px 22px; }

.mosaico__cards li:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px rgba(16, 24, 70, 0.2);
}

.mosaico__cards b {
  color: var(--mosaico-acento);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.mosaico__cards h3 {
  margin: 0;
  /* roxo em vez do azul: os cards ficam sobre creme, e o azul aqui era o
     último resquício da paleta antiga nesta seção. 7,9:1 sobre o creme. */
  color: var(--roxo-marca, #5b4488);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.32vw, 1.24rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.14;
  text-wrap: balance;
}

.mosaico__cards p {
  margin: 0;
  color: var(--home-text);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}

/* o que o espaço liberado vira, em etiquetas: são duas conquistas concretas,
   não uma continuação da frase */
.mosaico__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.mosaico__badges li {
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mosaico-acento) 13%, transparent);
  color: var(--mosaico-acento);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

@media (max-width: 920px) {
  .mosaico { grid-template-columns: 1fr; }
  .mosaico__arte { min-height: 0; padding: clamp(20px, 5vw, 34px) clamp(20px, 6vw, 40px) 0; }
  .mosaico__arte img { aspect-ratio: 16 / 10; height: auto; }
  .mosaico__cards {
    padding: clamp(24px, 4vw, 40px) clamp(24px, 6vw, 48px) clamp(30px, 5vw, 48px);
  }
}

@media (max-width: 620px) {
  .mosaico__cards { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mosaico__cards li { transition: none; }
  .mosaico__cards li:hover { transform: none; }
}

/* --------- variações de logo dos veículos ---------
   Cada arquivo chegou num tratamento diferente e nenhum serve direto no papel
   creme. Em vez de encaixotar cada um numa placa preta, o recorte converte
   todos para marca escura sobre o papel — reprodução monocromática, que é
   prática normal de veiculação e não deturpa marca nenhuma. */

/* branco sobre preto (Gazeta): inverter dá preto sobre branco, e o multiply
   dissolve esse branco no papel */
.recorte__veiculo--inverte img {
  filter: invert(1);
  mix-blend-mode: multiply;
  max-height: 40px;
}

/* branco sobre transparente (CRM-PR): sumiria no papel; brightness(0) leva
   tudo para preto sem tocar na transparência */
.recorte__veiculo--escurece img {
  filter: brightness(0);
  max-height: 26px;
}

/* JPEG com fundo branco (SBP): multiply dissolve o fundo e preserva o traço.
   Lockup quadrado com o nome miúdo — vai ao limite que a linha comporta; o
   nome só fica legível com a versão horizontal da marca. */
.recorte__veiculo--multiplica img {
  mix-blend-mode: multiply;
  max-height: 60px;
}

/* --------- encaixes com o que já existia na home --------- */

/* o CTA do projeto passou a ficar logo acima da faixa azul-clara e estava
   colado nela */
.home-project .mosaico { margin-top: clamp(38px, 5.2vw, 78px); }

/* A arte do CTA final ocupava um quarto da cena: medi que a criança e o
   cachorro ficam entre 30,3% e 56,5% da largura e 36,7% e 74% da altura. Em
   vez de aproximar por transform — que dependia da caixa e cortava —, o
   recorte foi feito no arquivo, com margem folgada em volta dos dois. */
.home-final__signature { position: relative; aspect-ratio: 1200 / 796; }

/* O verde da arte e o do card são o mesmo (#b6dfb7 contra #b6deb6), mas o
   recorte fatia a nuvem e o chão, e é esse traço reto que aparece. Um degradê
   do verde do card para dentro dissolve as quatro bordas. */
.home-final__signature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--home-final-scene) 0, transparent 15%),
    linear-gradient(270deg, var(--home-final-scene) 0, transparent 12%),
    linear-gradient(180deg, var(--home-final-scene) 0, transparent 14%),
    linear-gradient(0deg, var(--home-final-scene) 0, transparent 12%);
}

/* =========================================================
   Escala tipográfica da home
   Os títulos estavam em quatro corpos diferentes. Três degraus, e só três:

   1. Título de seção .... clamp(2.2rem, 3.8vw, 3.8rem) / 800 / lh .98
      — usado por todas as seções de largura cheia
   2. Título em coluna estreita ... clamp(1.7rem, 2.5vw, 2.5rem) / 800
      — só onde a coluna não comporta o degrau 1 (a caixa vermelha do HC)
   3. Título de card ..... clamp(1rem, 1.32vw, 1.24rem) / 800

   Apoio de seção ........ clamp(1rem, 1.25vw, 1.15rem) / 700 / lh 1.6
   Corpo ................. .95rem / 600 / lh 1.5
   ========================================================= */
.abre-problema h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.8rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

/* a caixa vermelha é estreita: o título usa o degrau de baixo da escala, o
   mesmo dos títulos de card, e não o de seção */
.heritage-faixa__caixa h2 {
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

/* --------- a seção do problema é curta: título e recortes --------- */
.home-complexity:has(.abre-problema) {
  padding: clamp(46px, 5.6vw, 82px) 0;
}

/* o CTA final ficava 4px abaixo do degrau 1, sem motivo */
.home-final h2 { font-size: clamp(2.2rem, 3.8vw, 3.8rem); }

/* =========================================================
   Revisão de responsividade — celular e tablet
   ========================================================= */

@media (max-width: 920px) {
  /* Os quatro cards de ajuda ficavam em quatro colunas até 620px: a regra de
     duas colunas do breakpoint é .home-help__grid, e .home-hero
     .home-help__grid tem especificidade maior e vencia. Entre 621 e 920px
     cada card ficava com ~170px. */
  .home-hero__support .home-help__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-hero__support .home-help-card p { max-width: 24ch; font-size: 0.86rem; }
  .home-hero__support .home-help-card strong { max-width: 15ch; }

  /* empilhada, a caixa vermelha ocupa a largura toda: o degrau reduzido do
     título existia só por causa da coluna estreita */
  .heritage-faixa__caixa h2 {
    font-size: clamp(2.2rem, 3.8vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }

  /* Empilhada, a caixa ocupa a largura toda e o conteúdo alinha à esquerda,
     como no desktop: título centralizado sobre números à esquerda ficava
     incoerente, e bloco de texto longo lê melhor alinhado. */
  .heritage-faixa__caixa { justify-items: start; text-align: left; }
  .heritage-faixa__topo { justify-items: start; }
  .heritage-numeros { width: 100%; }
  .heritage-numeros li { justify-content: start; }
  .heritage-numeros li > span { text-align: left; }
  .heritage-numeros__mais { justify-content: start; grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .home-hero__support .home-help-card p { max-width: 20ch; font-size: 0.82rem; line-height: 1.4; }
  .home-hero__support .home-help-card strong { font-size: 1.24rem; }
  .home-hero__support .home-help-card b { font-size: 0.72rem; }
}

/* As ilustrações dos cards de ação levam width/height no HTML para o navegador
   reservar o espaço antes de carregar. O CSS só define a largura, e o atributo
   height vira dica de apresentação — sem isto a arte saía esticada. */
.home-help-card img { height: auto; }

/* Os três primeiros cards trazem rostos: são artes fechadas, redondas, e a
   posição herdada (sangrando pelo canto) as fatiava. Ficam contidas.
   O quarto é personagem de corpo inteiro e continua apoiado na borda. */
.home-hero__support .home-help-card:nth-child(-n + 3) img {
  right: 2px;
  bottom: 2px;
  width: 45%;
}

/* O quarto card traz personagem de corpo inteiro, e o PNG tem muita margem
   transparente: o desenho ocupa 59% da largura e 68% da altura do arquivo.
   Por isso ele parecia pequeno e solto — metade da caixa era vazio.
   Os deslocamentos negativos descontam essa margem, em porcentagem da largura
   do card para escalar junto: o personagem cresce e encosta na borda sem
   nenhum corte. margin-bottom em % também mede a largura, então o pé
   acompanha a mesma escala do resto. */
.home-hero__support .home-help-card:nth-child(4) img {
  width: 82%;
  right: -9.5%;
  bottom: 0;
  margin-bottom: -11.5%;
}

@media (max-width: 620px) {
  /* Em duas colunas o card fica com ~163px: a arte no canto e o botão na
     mesma linha se atropelavam, e o botão cobria metade do rosto. A arte sobe
     para cima da linha do botão. */
  .home-hero__support .home-help-card:nth-child(-n + 3) img,
  .home-hero__support .home-help-card:nth-child(4) img {
    right: 6px;
    bottom: 52px;
    width: 36%;
  }
}

/* =========================================================
   HERO EM VÍDEO
   O tour 3D do projeto ocupa a primeira tela. Para voltar à versão com
   ilustração, veja docs/backups/hero-ilustracao.md — o CSS daquela
   (.home-hero*) continua todo em site-home.css, nada foi removido.
   ========================================================= */
.home-vhero {
  position: relative;
  isolation: isolate;
  /* 100svh menos o que estiver acima. A tarja de avisos e o cabeçalho ocupam
     espaço de fluxo (o header é sticky, que reserva altura), então um hero de
     100svh cheio terminava 122px abaixo da dobra e cortava os botões. O
     site.js mede e escreve --home-topo; sem ele o valor cai para 0 e o
     comportamento é o de antes. */
  min-height: calc(100svh - var(--home-topo, 0px));
  display: grid;
  align-content: end;
  overflow: hidden;
  background: var(--home-lilac-deep);
}

.home-vhero video,
.home-vhero__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-vhero__poster { display: none; }

/* Véu no roxo da marca, reforçado à esquerda: o tour atravessa interiores
   claros e sem isso o kicker e o lead perdiam contraste nesses trechos. */
.home-vhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(200deg, rgba(74, 55, 104, 0.22) 0%, transparent 34%),
    linear-gradient(90deg, rgba(58, 42, 84, 0.5) 0%, transparent 55%),
    linear-gradient(4deg, rgba(58, 42, 84, 0.94) 0%, rgba(103, 80, 131, 0.55) 38%, transparent 68%);
}

.home-vhero__conteudo {
  position: relative;
  z-index: 2;
  width: min(100% - clamp(48px, 8vw, 144px), 1280px);
  margin-inline: auto;
  /* O bloco é ancorado embaixo (align-content: end no .home-vhero), então
     tirar o badge do topo empurrou título e botões para baixo. Este respiro
     maior devolve a altura de antes e sobe um pouco mais. */
  padding: 0 0 clamp(74px, 11vh, 136px);
  display: grid;
  justify-items: start;
  gap: 18px;
}

.home-vhero h1 {
  margin: 0;
  max-width: 15ch;
  color: var(--home-white);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.94;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(58, 42, 84, 0.5);
}

.home-vhero h1 em { font-style: normal; color: var(--home-lilac); }

.home-vhero__lead {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 253, 247, 0.88);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 700;
  line-height: 1.55;
}

.home-vhero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* botão secundário translúcido, para não brigar com o vídeo atrás */
/* O CTA principal da hero era rosa e disputava atenção com o botão fixo de
   doação, também rosa. Em roxo ele se ancora no véu do vídeo e o rosa volta a
   significar uma coisa só na página. */
.home-button--roxo {
  color: #fffdf7;
  background: linear-gradient(135deg, #8f6fc4, #6b4f96);
  box-shadow: 0 14px 30px rgba(31, 20, 51, 0.42);
}

.home-button--roxo:hover { background: linear-gradient(135deg, #9d80cf, #7a5ca6); }

.home-button--vidro {
  border: 1.5px solid rgba(255, 253, 247, 0.5);
  color: var(--home-white);
  background: rgba(58, 42, 84, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.home-button--vidro:hover { background: rgba(58, 42, 84, 0.55); }

/* --------- os quatro caminhos de apoio, agora em seção própria --------- */
.home-ajuda {
  padding: clamp(34px, 4.6vw, 64px) 0 clamp(40px, 5vw, 72px);
}

.home-ajuda .home-hero__support { margin-top: 0; }

@media (max-width: 620px) {
  /* 100svh, e não 92: com 92 sobrava uma faixa da seção seguinte espiando
     no rodapé e a primeira tela não fechava. Descontando o cabeçalho, o
     hero termina exatamente na dobra. svh é a altura com a barra do
     navegador à vista, que é o pior caso. */
  .home-vhero { min-height: calc(100svh - var(--home-topo, 0px)); }
  .home-vhero h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }

  /* No desktop o bloco sobe para caber na primeira dobra junto com o vídeo.
     No celular a tela é estreita e alta: o mesmo respiro empurra o texto para
     o meio e tapa justamente o prédio. Aqui ele desce e encosta embaixo,
     liberando a parte de cima do vídeo. */
  .home-vhero__conteudo {
    padding-bottom: clamp(24px, 4vh, 40px);
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-vhero video { display: none; }
  .home-vhero__poster { display: block; }
}

/* ---------------------------------------------------------
   CTA da seção do problema
   Azul claro sobre o azul escuro da seção: o único elemento
   claro e sólido depois dos recortes, então é para onde o
   olho vai quando termina de ler as manchetes.
   --------------------------------------------------------- */
.jornal__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.home-button--claro {
  color: var(--home-ink-deep);
  background: var(--home-teal);
  box-shadow: 0 14px 30px rgba(10, 14, 58, 0.28);
}

.home-button--claro:hover {
  color: var(--home-ink-deep);
  background: #c3e6ef;
}

/* =========================================================
   Renderização adiada das seções
   A home tem ~6.500px de altura. Sem isto o navegador calcula layout,
   estilo e pintura das nove seções antes de mostrar a primeira tela.
   content-visibility: auto deixa o navegador pular esse trabalho até a
   seção chegar perto da viewport; contain-intrinsic-size: auto <altura>
   reserva o espaço e, depois da primeira renderização, guarda a altura
   real — a barra de rolagem não pula.

   Ficam de fora: a hero (primeira tela), a faixa do HC e o CTA final,
   porque nas duas a arte ultrapassa a caixa da seção de propósito e
   content-visibility recorta o que passa da borda.
   ========================================================= */
/* Os valores são a caixa de CONTEÚDO medida em 1280px — contain-intrinsic-size
   não conta padding nem borda, e a seção somava os dois por cima: reservava
   205px a mais em .home-partners e a página encolhia ao rolar.
   O "auto" faz o navegador guardar a altura real depois da primeira
   renderização, então o palpite só vale na primeira visita. */
.home-complexity { content-visibility: auto; contain-intrinsic-size: auto 526px; }
.home-project { content-visibility: auto; contain-intrinsic-size: auto 1564px; }
.home-manifesto { content-visibility: auto; contain-intrinsic-size: auto 405px; }
.home-partners { content-visibility: auto; contain-intrinsic-size: auto 1198px; }
.home-news { content-visibility: auto; contain-intrinsic-size: auto 573px; }

/* empilhado tudo cresce: no celular a mesma seção chega a ter o dobro */
@media (max-width: 620px) {
  .home-complexity { contain-intrinsic-size: auto 562px; }
  .home-project { contain-intrinsic-size: auto 2249px; }
  .home-manifesto { contain-intrinsic-size: auto 676px; }
  .home-partners { contain-intrinsic-size: auto 1671px; }
  .home-news { contain-intrinsic-size: auto 1265px; }
}

/* =========================================================
   Popup de entrada
   Conteúdo definido no painel. Cartão pequeno e centrado — é um convite,
   não uma página; qualquer coisa maior que isso vira obstáculo.
   ========================================================= */
/* O atributo hidden sozinho não basta: `display: grid` abaixo é regra de
   autor e vence o `[hidden] { display: none }` do navegador. Sem esta linha
   o popup fechado continua no layout — invisível, mas cobrindo a tela
   inteira e engolindo todo clique da home, inclusive o X do popup de saída.
   É o mesmo defeito que a tarja de avisos tinha. */
.home-entrada[hidden] { display: none; }

.home-entrada {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 40px);
  background: rgba(45, 32, 66, 0.62);
  opacity: 0;
  /* visibility além do hidden: durante os 240ms de saída o bloco ainda está
     no layout, e só com opacity: 0 ele continuaria engolindo cliques. É a
     mesma proteção que o popup de saída já tinha. */
  visibility: hidden;
  transition: opacity 240ms var(--home-ease, ease), visibility 240ms;
}

.home-entrada.is-open { opacity: 1; visibility: visible; }

.home-entrada__card {
  position: relative;
  width: min(100%, 460px);
  padding: clamp(30px, 5vw, 44px) clamp(24px, 4vw, 38px) clamp(26px, 4vw, 36px);
  border-radius: clamp(22px, 3vw, 30px);
  background: var(--home-white);
  box-shadow: 0 30px 80px rgba(45, 32, 66, 0.34);
  text-align: center;
  transform: translateY(14px) scale(0.98);
  transition: transform 260ms var(--home-ease, ease);
}

.home-entrada.is-open .home-entrada__card { transform: none; }

.home-entrada__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(44, 55, 127, 0.08);
  color: var(--home-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}

.home-entrada__close:hover { background: rgba(44, 55, 127, 0.16); }

.home-entrada__card h2 {
  margin: 0;
  color: var(--home-ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.home-entrada__card p {
  margin: 12px 0 0;
  color: var(--home-text);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
}

.home-entrada__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: clamp(18px, 3vw, 24px);
  padding: 0 26px;
  border-radius: 999px;
  background: var(--home-pink-deep);
  color: var(--home-white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, filter 180ms ease;
}

.home-entrada__cta:hover { transform: translateY(-2px); filter: brightness(1.07); }

/* Contagem discreta: informa sem competir com o convite. aria-hidden porque
   um número mudando a cada segundo é anunciado sem parar por leitor de tela;
   quem usa teclado fecha no Esc ou no X, que continuam lá. */
.home-entrada__contagem {
  margin-top: 14px !important;
  color: var(--home-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

body.tem-popup-entrada { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .home-entrada,
  .home-entrada__card,
  .home-entrada__cta { transition: none; }
  .home-entrada__card { transform: none; }
  .home-entrada__cta:hover { transform: none; }
}