/* ---------------------------------------------------------------- página inicial (tools/inicial.py), 2026-11-06
   Carregado só em "/", logo depois do site.css, que já traz a identidade A (fonte, tokens, topo e a conta como
   demonstrativo). Aqui fica só o desenho da página. Escala de espaço única: 8, 16, 24, 32, 48, 64. Computador: o topo
   em duas colunas 7/5, os números com a foto, os assuntos em cartões de 3 colunas e as notícias em 3 colunas. Celular:
   a ordem do HTML (título, momentos, conta, números, assuntos, notícias). Sem faixa colorida na borda, sem pílula, sem
   sombra. */

.ini h2 { font-size: 24px; line-height: 1.2; margin: 0 0 16px; }
.ini h3 { font-size: 20px; line-height: 1.25; margin: 0; }
.ini p { margin: 0; text-wrap: pretty; }
.ini-mais { margin-top: 16px; }
.ini-mais a, .ini-numeros li > a, .ini-ver { font-weight: 600; }

/* topo */
.ini-topo { display: grid; grid-template-columns: minmax(0, 1fr); }
.ini h1 { font-size: 32px; line-height: 1.1; margin: 24px 0 16px; }
.ini-lead { font-size: 19px; line-height: 1.45; color: var(--suave); max-width: 52ch; }

/* momentos da vida: uma linha por momento, o título leva à página que responde a ele */
.ini-momentos { margin-top: 32px; }
.ini-momentos ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linha); }
.ini-momentos li { padding: 16px 0; border-top: 1px solid var(--linha); }
.ini-momentos h3 { font-size: 21px; margin-bottom: 4px; }
.ini-momentos h3 a { color: var(--azul-forte); text-decoration: none; }
.ini-momentos h3 a::after { content: "\00a0›"; color: var(--azul); }
.ini-momentos h3 a:hover { color: var(--azul); text-decoration: underline; }
.ini-momentos p { font-size: 17px; line-height: 1.5; color: var(--suave); }

/* a conta do salário, com o holerite das calculadoras (o desenho do quadro vem do site.css) */
.ini-conta { margin-top: 48px; padding: 24px 16px; background: var(--azul-palido); border-radius: var(--raio); }
.ini-conta h2 { margin-bottom: 16px; }
.ini-conta .botoes { margin-top: 8px; }
.ini-conta .campo .erro:empty { display: none; }
.ini-conta .caixa:focus-within { box-shadow: 0 0 0 3px var(--azul-claro); }
.ini-conta .resultado { margin-top: 24px; background: var(--campo); overflow: hidden; }
.ini-conta p.resposta { font-size: 22px; line-height: 1.35; }
/* o link da conta completa fecha o quadro, depois da nota (o site.css põe a nota depois do holerite) */
.ini-conta .resultado > p.ini-mais { order: 2; margin: 0; padding: 12px var(--res-x) 16px; }
.ini-conta .resultado > p.nota { margin-top: 12px; }
.ini-conta.esmaecida .resultado { opacity: .45; }

/* números de 2026, numa faixa tingida que vai de uma borda à outra da tela */
.ini-numeros { margin-top: 48px; padding: 32px 0; background: var(--trilho); box-shadow: 0 0 0 100vmax var(--trilho); clip-path: inset(0 -100vmax); }
.ini-numeros ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ini-numeros li { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--tinta); }
.ini-numeros .n { font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; color: var(--azul); white-space: nowrap; }
.ini-numeros li p { font-size: 17px; line-height: 1.45; }
.ini-numeros li > a { margin-top: auto; font-size: 17px; }
.ini-foto { margin: 0 0 24px; }
/* a foto tem fundo branco e é multiplicada pela faixa, então os objetos parecem pousados nela, em qualquer cor de
   --trilho. No celular vem o corte alto, aparado em 5:4, para a cena ocupar a largura */
.ini-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 800; object-fit: cover; mix-blend-mode: multiply; }

/* as contas por assunto: um cartão por seção, com a frase, até 3 contas e o link da seção no pé */
.ini-assuntos { margin-top: 64px; }
.ini-cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ini-assunto { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--campo); }
.ini-assunto h3 { font-size: 21px; color: var(--azul-forte); }
.ini-assunto > p { margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--suave); }
.ini-assunto ul { list-style: none; margin: 16px 0 0; padding: 0; }
.ini-assunto li { border-top: 1px solid var(--linha); }
.ini-assunto li a { display: block; padding: 10px 0; font-size: 18px; font-weight: 500; color: var(--tinta); text-decoration: none; }
.ini-assunto li a:hover { color: var(--azul); text-decoration: underline; }
.ini-ver { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 17px; }
.ini-ver::after { content: "\00a0→"; }

/* novidades */
.ini-novas { margin-top: 64px; }
.ini-novas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ini-novas li { padding: 16px 0; border-top: 1px solid var(--linha); }
.ini-novas h3 { margin-top: 4px; text-wrap: pretty; }
.ini-novas h3 a { color: var(--tinta); text-decoration: none; }
.ini-novas h3 a:hover { color: var(--azul-forte); text-decoration: underline; }
.ini-novas time { display: block; font-size: 15px; font-weight: 600; color: var(--suave); }
.ini-novas li p { margin-top: 8px; font-size: 17px; line-height: 1.45; color: var(--suave); }
.ini-novas li.com-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 16px; border-radius: var(--raio); }

@media (min-width: 600px) {
  .ini h1 { font-size: 40px; }
  .ini-momentos li { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
  .ini-momentos h3 { margin-bottom: 0; font-size: 20px; }
  .ini-conta { padding: 32px; }
  .ini-numeros ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .ini-foto img { aspect-ratio: 16 / 9; }
  /* 2 colunas; com número ímpar de assuntos, o último ocupa a linha toda e põe as contas lado a lado */
  .ini-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ini-assunto:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ini-assunto:last-child:nth-child(odd) ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}

@media (min-width: 960px) {
  .ini-topo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
  /* a conta ocupa as duas linhas da direita; os momentos descem até o pé dela, para as duas colunas fecharem juntas */
  .ini-abre { grid-column: 1; grid-row: 1; }
  .ini-momentos { grid-column: 1; grid-row: 2; align-self: end; }
  .ini-conta { grid-column: 2; grid-row: 1 / span 2; margin-top: 40px; }
  .ini h1 { font-size: 44px; margin-top: 40px; }
  .ini-lead { font-size: 20px; }
  .ini-conta .g-hol .h-final td { font-size: 30px; }
  .ini-numeros { margin-top: 64px; padding: 48px 0; }
  .ini-numeros ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ini-numeros.com-foto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .ini-numeros.com-foto ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ini-numeros.com-foto .ini-foto { margin: 0; }
  .ini-numeros.com-foto .ini-foto img { aspect-ratio: 1000 / 952; }
  /* 3 colunas numa grade de 6: cada cartão ocupa 2. Sobrando 1 no fim, ele ocupa a linha toda; sobrando 2, metade cada */
  .ini-cartoes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .ini-assunto, .ini-assunto:last-child:nth-child(odd) { grid-column: span 2; }
  .ini-assunto:last-child:nth-child(odd) ul { display: block; }
  .ini-assunto:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .ini-assunto:last-child:nth-child(3n + 1) ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .ini-assunto:last-child:nth-child(3n + 2), .ini-assunto:nth-last-child(2):nth-child(3n + 1) { grid-column: span 3; }
  .ini-novas ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
}