/* ==========================================================================
   Seções reformuladas

   Fontes de receita com ícone, comparativo em cards, jornada da parceria,
   entregas da Universidade e o ecossistema com as duas soluções.
   ========================================================================== */

/* ==========================================================================
   Fontes de receita
   Cada fonte explica de onde sai o dinheiro e qual o argumento de venda.
   ========================================================================== */

.fontes {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .fontes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .fontes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fonte {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  min-width: 0;
}

.fonte__topo {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.fonte__nome {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--txt);
  line-height: 1.25;
}

.fonte__tipo {
  display: block;
  margin-top: 5px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--txt-2);
}

/* Recorrente é a tese: ganha o acento. Única fica neutra. */
.fonte[data-tipo='recorrente'] .fonte__tipo { color: var(--acento); }

.fonte__como {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--txt-2);
}

.fonte__venda {
  margin-top: auto;
  padding-top: var(--e-2);
  border-top: 1px solid var(--borda);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--txt);
}

.fonte__venda .ico { width: 18px; height: 18px; color: var(--acento); margin-top: 2px; }

/* Resumo da seção: a conta que fecha o argumento. */
.fontes__resumo {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
  margin-top: var(--e-4);
}

@media (min-width: 768px) {
  .fontes__resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.resumo-num {
  display: grid;
  gap: 8px;
  padding: var(--e-3);
  border: 1px solid var(--borda);
  background: var(--fundo-2);
}

.resumo-num b {
  font-size: var(--t-impacto-menor);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.resumo-num span { font-size: 0.875rem; color: var(--txt-2); line-height: 1.5; }

/* ==========================================================================
   Comparativo em cards
   Três modelos lado a lado. O white label é o único destacado.
   ========================================================================== */

.comp {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .comp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.comp__card {
  display: grid;
  gap: 0;
  min-width: 0;
}

/* O card da casa: acento no topo e fundo levemente esverdeado. */
.comp__card--vencedor {
  border-color: var(--acento);
  border-top-width: 3px;
  background:
    linear-gradient(180deg, var(--lavagem-acento), transparent 40%),
    var(--fundo-2);
}

.comp__cabeca {
  display: grid;
  gap: 10px;
  padding: var(--e-3);
  border-bottom: 1px solid var(--borda);
}

.comp__card--vencedor .comp__cabeca { border-bottom-color: var(--acento-linha); }

.comp__nome {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--txt);
}

.comp__card--vencedor .comp__nome { color: var(--acento); }

.comp__resumo { font-size: 0.875rem; line-height: 1.55; color: var(--txt-2); }

.comp__linhas { display: grid; }

.comp__linha {
  display: grid;
  gap: 4px;
  padding: 13px var(--e-3);
  border-bottom: 1px solid var(--borda);
}

.comp__linha:last-child { border-bottom: 0; }

.comp__rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--txt-2);
}

/* O valor precisa ler bem: branco no neutro, lime no card da casa. */
.comp__valor {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--txt);
  line-height: 1.45;
}

.comp__valor .ico { width: 17px; height: 17px; flex: none; }
.comp__valor--sim .ico { color: var(--acento); }
.comp__valor--nao .ico { color: var(--sinal-erro); }

.comp__card--vencedor .comp__valor { color: var(--acento); font-weight: 600; }

.comp__pe { padding: var(--e-3); border-top: 1px solid var(--borda); }
.comp__card--vencedor .comp__pe { border-top-color: var(--acento-linha); }

/* ==========================================================================
   Jornada da parceria
   Seis etapas afastadas, com linha ligando uma na outra.
   ========================================================================== */

.jornada {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 700px) {
  .jornada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-8); }
}

@media (min-width: 1100px) {
  .jornada { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.jornada__etapa {
  position: relative;
  display: grid;
  gap: var(--e-2);
  align-content: start;
  min-width: 0;
}

/* A linha que liga uma etapa na próxima. Só no desktop, onde há linha. */
@media (min-width: 1100px) {
  /* 54px = os 32 de padding do card mais metade do selo de 44. E o que
     coloca a linha na altura do icone, e nao boiando acima dele. */
  .jornada__etapa::after {
    content: '';
    position: absolute;
    top: 54px;
    left: calc(100% + 1px);
    width: var(--e-8);
    height: 1px;
    background: linear-gradient(90deg, var(--borda-forte), transparent);
    pointer-events: none;
  }

  /* Fim de linha não puxa para o vazio. */
  .jornada__etapa:nth-child(3n)::after { display: none; }

  /* A etapa 3 desce e liga na 4, que começa a segunda fileira. */
  .jornada__etapa:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 54px;
    right: -1px;
    width: 1px;
    height: calc(100% + var(--e-6) - 54px);
    background: linear-gradient(180deg, var(--borda-forte), transparent);
    pointer-events: none;
  }
}

.jornada__topo {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.jornada__n {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  letter-spacing: normal;
  color: var(--txt-2);
}

.jornada__prazo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--acento);
}

.jornada__prazo .ico { width: 14px; height: 14px; }

.jornada__texto { font-size: 0.9375rem; line-height: 1.65; color: var(--txt-2); }

/* ==========================================================================
   Universidade: o que entrega
   ========================================================================== */

/* Esta grade tem sempre QUATRO itens, e é isso que decide o número de
   colunas. Quatro colunas dentro dos 70% de container davam 230px por card
   e 166px de texto: parágrafo virava coluna de jornal. Três colunas
   consertavam a largura mas deixavam o quarto card órfão numa fileira
   sozinho. Duas colunas fecham 2x2 sem sobra, com 424px de texto por card.
   Quatro só volta quando a tela é larga o bastante para o card não
   estrangular de novo. */
.entregas {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .entregas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1800px) {
  .entregas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.entrega {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.entrega__titulo {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--txt);
  line-height: 1.3;
}

.entrega__texto { font-size: 0.875rem; line-height: 1.6; color: var(--txt-2); }

/* Faixa de gratuidade: o argumento que não pode passar batido. */
.gratis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--acento);
  background: var(--lavagem-acento);
  margin-bottom: var(--e-4);
}

.gratis .ico-selo { border-color: var(--acento); }

/* Sem flex:none aqui. Ele impedia o texto de encolher e estourava a
   viewport em 320px. */
.gratis b {
  font-size: 1.0625rem;
  min-width: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--acento);
}

/* 113ch de medida na faixa cheia. Trava em medida de leitura. */
.gratis span {
  font-size: 0.9375rem;
  color: var(--txt);
  line-height: 1.55;
  max-inline-size: 62ch;
}

/* ==========================================================================
   Ecossistema: as duas soluções com mockup
   ========================================================================== */

.solucao {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 1000px) {
  .solucao { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-8); }
  .solucao--inversa .solucao__texto { order: 2; }
}

.solucao + .solucao { margin-top: var(--e-12); }

.solucao__texto { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.solucao__texto .selo { justify-self: start; }
.solucao__visual { min-width: 0; }

.solucao__recursos {
  display: grid;
  gap: 10px;
  margin-top: var(--e-1);
}

.solucao__recursos li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--txt-2);
  list-style: none;
}

.solucao__recursos .ico { width: 20px; height: 20px; color: var(--acento); margin-top: 1px; }
.solucao__recursos b { color: var(--txt); font-weight: 600; }

/* Verticais: onde o modelo se aplica. */
.verticais {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: 1fr;
  margin-top: var(--e-8);
}

@media (min-width: 700px) {
  .verticais { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vertical-item {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.vertical-item b {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--txt);
  display: block;
  line-height: 1.3;
}

.vertical-item span {
  display: block;
  margin-top: 4px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--txt-2);
}

/* ==========================================================================
   Manifesto reorganizado
   Duas colunas de troca, uma de cada lado, com o fecho embaixo.
   ========================================================================== */

.troca {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .troca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.troca__lado {
  display: grid;
  gap: var(--e-3);
  align-content: start;
  min-width: 0;
}

.troca__rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--txt-2);
}

.troca__lado--voce .troca__rotulo { color: var(--acento); }

.troca__itens { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }

.troca__itens li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--txt);
}

.troca__itens .ico { width: 18px; height: 18px; color: var(--txt-2); }
.troca__lado--voce .troca__itens .ico { color: var(--acento); }

.manifesto__intro { display: grid; gap: var(--e-2); margin-bottom: var(--e-6); }

/* ==========================================================================
   News: cards com capa
   Sem imagem real ainda. A capa e gerada por eixo: composicao geometrica
   com a grade da marca e o numero do eixo em mono. Le como design, nao como
   imagem faltando. Quando houver arte, troca o bloco pela <img>.
   ========================================================================== */

.posts {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.post {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-width: 0;
}

.post__capa {
  position: relative;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--borda);
  overflow: hidden;
  background: var(--fundo);
  display: grid;
  place-items: center;
}

.post__capa::before {
  /* Estas duas linhas NAO viram token de propósito: a capa e sempre um
     degrade escuro, entao a grade sobre ela e sempre clara. */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(237, 239, 236, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237, 239, 236, .06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Um degrade por eixo, para os cards nao virarem todos iguais. */
.post__capa[data-eixo='1'] { background-image: linear-gradient(150deg, #0C1733, #1E3E74); }
.post__capa[data-eixo='2'] { background-image: linear-gradient(150deg, #141414, #25479D); }
.post__capa[data-eixo='3'] { background-image: linear-gradient(150deg, #0C1733, #435D04); }
.post__capa[data-eixo='4'] { background-image: linear-gradient(150deg, #1C1C1C, #1E3E74); }
.post__capa[data-eixo='5'] { background-image: linear-gradient(150deg, #0C1733, #1C1C1C); }
.post__capa[data-eixo='6'] { background-image: linear-gradient(150deg, #141414, #0C1733); }
.post__capa[data-eixo='7'] { background-image: linear-gradient(150deg, #1E3E74, #0C1733); }

.post__marca {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: center;
  /* A capa e sempre um degrade escuro, mesmo com a pagina clara: le como
     arte de capa, nao como bloco vazado. Por isso o texto aqui e claro
     fixo, e nao --txt, que no tema claro seria quase preto e sumiria. */
  color: var(--txt-azul);
}

.post__marca .ico { width: 30px; height: 30px; opacity: .9; }

.post__eixo-n {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--txt-azul);
}

.post__corpo {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: var(--e-3);
}

.post__eixo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--txt-2);
}

.post__eixo[data-classe='produto'] { color: var(--acento); }

.post__titulo {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--txt);
}

.post__resumo {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--txt-2);
}

.post__pe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--acento);
}

.post__pe .ico { width: 15px; height: 15px; transition: transform var(--dur-ui) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .post:hover .post__pe .ico { transform: translate3d(3px, 0, 0); }
}

/* --- artigo: leitura mais sugeridos a direita ---------------------------- */

.leitura {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1100px) {
  .leitura { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-8); }
}

.leitura__aside { display: grid; gap: var(--e-3); align-content: start; min-width: 0; }

.sugerido {
  display: grid;
  gap: 8px;
  padding: var(--e-3);
  min-width: 0;
}

.sugerido__eixo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--txt-2);
}

.sugerido__titulo {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--txt);
}

/* Hero do artigo com metadados. */
.artigo__hero {
  background: var(--grad-profundidade);
  border-bottom: 1px solid var(--borda);
  padding-block: var(--e-8);
}

@media (min-width: 768px) {
  .artigo__hero { padding-block: var(--e-12); }
}

.artigo__hero .artigo__meta { color: var(--txt-azul); }
.artigo__hero .h2 { color: var(--txt); max-inline-size: 32ch; }

/* ==========================================================================
   Painel de artigos, em /admin
   Nao e parte do site publico. Reaproveita card, campo e botao.
   ========================================================================== */

.admin-entrar {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e-4);
}

.admin-caixa {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: var(--e-3);
  padding: var(--e-6);
  border: 1px solid var(--borda);
  background: var(--fundo-2);
}

.admin-marca { display: block; margin-bottom: var(--e-2); }
.admin-marca img { width: 148px; height: 33px; }

.admin-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.admin-tabela { display: grid; gap: var(--e-2); }

.admin-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3);
}

.admin-linha__info { display: grid; gap: 5px; min-width: 0; flex: 1 1 320px; }

.admin-linha__eixo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--txt-2);
}

.admin-linha__titulo {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--txt);
}

.admin-linha__slug {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  color: var(--txt-2);
  word-break: break-all;
}

.admin-linha__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  flex: none;
}

.admin-form { max-width: 860px; }

.admin-corpo {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  line-height: 1.6;
  min-height: 340px;
}

/* Pauta ainda sem texto escrito. Diferencia do artigo pronto sem esconder. */
.post__estado {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono-p);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--sinal-aviso);
  font-weight: 400;
}

.post__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}