/* ============================================================
   INSTITUTO CRIANÇAS DE FUTURO — MARCA V1 · PÁGINA INSTITUCIONAL
   Composição das 19 seções. Carregar depois de tokens.css e base.css.
   ============================================================ */

/* ---------- GRAFISMOS ----------
   §13 — círculos e curvas nas cores da marca, opacidade entre 8% e 18%.
   Ficam ATRÁS de tudo e nunca sob um texto: passam pelas bordas da
   seção, não pelo miolo. A seção precisa de overflow:hidden, senão a
   forma se ancora no viewport e cria rolagem horizontal no mobile. */
.hero, .metodo, .cta-final { overflow: hidden; }
.hero > .wrap, .metodo > .wrap, .cta-final > .wrap-text { position: relative; z-index: 1; }

.gr { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.gr-a { top: -28%; right: -8%;  width: 42%; aspect-ratio: 1; background: var(--teal);   opacity: .12; }
.gr-b { bottom: -46%; left: -12%; width: 30%; aspect-ratio: 1; background: var(--yellow); opacity: .16; }
/* Sobre navy só o teal se sustenta em opacidade baixa: ele é análogo ao
   fundo, então a mistura continua sendo cor. Amarelo e coral são
   complementares e viram cinza — medido, 13% de amarelo sobre navy dá
   um cinza-azulado sem saturação nenhuma. */
.gr-c { top: -34%; right: -6%;  width: 34%; aspect-ratio: 1; background: var(--teal); opacity: .18; }
.gr-d { top: -30%; left: -8%;   width: 26%; aspect-ratio: 1; background: var(--teal); opacity: .16; }
.gr-e { bottom: -40%; right: -6%; width: 28%; aspect-ratio: 1; background: var(--teal); opacity: .12; }

/* ---------- 02 HERO · §13 ---------- */
.hero { min-height: 720px; display: flex; align-items: center; padding-block: var(--s-13); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: var(--s-6); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-8); }

.selo {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-8);
  padding: var(--s-3) var(--s-5);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(13, 27, 61, .10);
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: var(--fs-small); font-weight: 500;
  color: var(--navy);
  max-width: none;
}
.selo-ic {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: var(--r-circle);
  background: var(--teal); color: var(--navy);
}
.asset-hero { max-width: 440px; margin-inline: auto; width: 100%; }

/* ---------- 03 PRINCÍPIOS · §14 ---------- */
.principios .card { min-height: 210px; padding: var(--s-7); }
.principios h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }

/* ---------- 04 PROBLEMA · §15 ----------
   A página inteira empilha blocos no mesmo eixo: rótulo, título e texto
   sempre começando na mesma vertical, dezessete vezes. Aqui o eixo
   quebra — o título ocupa a largura toda e o texto recua para a segunda
   metade, criando um degrau.

   É a mesma grade e o mesmo container: o que muda é onde o texto
   começa. Assimetria feita com deslocamento, não com elemento novo. */
.titulo-largo {
  max-width: 15ch;
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.4rem);
  letter-spacing: -.03em;
}
.problema-txt { max-width: 620px; margin-top: var(--s-8); }
.problema-txt p + p { margin-top: var(--s-4); }
.problemas { margin-top: var(--s-11); }
.problemas h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }

@media (min-width: 1024px) {
  /* O recuo é de uma coluna e meia da grade de 12 — o bastante para o
     olho perceber o degrau, pouco o bastante para o texto não parecer
     desgarrado do título. */
  .problema-txt { margin-left: 38%; }
  .titulo-largo { max-width: 17ch; }
}

/* O fechamento é o único bloco navy desta seção clara: fecha o
   argumento com peso, sem precisar de mais uma seção escura. */
.fechamento {
  margin-top: var(--s-10);
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
  border-radius: var(--r-lg);
  font-family: var(--font-head);
  font-size: var(--fs-h3); font-weight: 600;
  line-height: 1.35; letter-spacing: var(--ls-title);
  color: var(--white);
  max-width: none;
}

/* ---------- 05 O INSTITUTO · §16 ---------- */
.mv { margin-top: var(--s-8); }
.mv h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }
.mv .card { padding: var(--s-6); }

/* ---------- 06 VALORES · §17 ---------- */
.valores { margin-top: var(--s-10); }
.valor {
  padding-top: var(--s-5);
  border-top: 2px solid var(--border);
}
.valor-n {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .1em;
  color: var(--teal);
  margin-bottom: var(--s-3);
}
.valor h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }

/* ---------- 07 INTRODUÇÃO AOS PROGRAMAS · §18 ---------- */
.prog-intro { max-width: 820px; }

.abas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4); margin-top: var(--s-10);
}
.aba {
  display: grid; gap: var(--s-1);
  padding: var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  border-left: 4px solid var(--c);
  background: var(--surface);
  transition: box-shadow var(--dur-state) ease, transform var(--dur-state) ease;
}
.aba:hover { box-shadow: var(--sh-card); transform: translateY(-2px); }
.aba strong { font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 600; color: var(--navy); }
.aba span { font-size: var(--fs-small); color: var(--txt-secondary); }

/* ---------- 08–10 PROGRAMAS · §19 §20 §21 ---------- */
.prog-cta { margin-top: var(--s-8); }
/* Lista de tópicos em duas colunas quando são muitos itens: em coluna
   única, oito linhas curtas viram uma escada estreita ao lado de um
   vazio grande. */
.g-2-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nota {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: rgba(13, 27, 61, .04);
  border-left: 3px solid var(--c, var(--navy));
  font-size: var(--fs-small);
  color: var(--txt-secondary);
}

/* ---------- 11 MÉTODO G3A · §22 ---------- */
.metodo-topo { max-width: 760px; }

.pilares {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-11);
  position: relative;
}
/* A linha que conectava os quatro pilares saiu. Ela existia para dizer
   "isto é uma sequência" quando os cards eram iguais e discretos. Com o
   numeral grande marcando a ordem em cada card, ela virou um segundo
   sinal para a mesma informação — e um traço atravessando quatro blocos
   coloridos lê como ruído, não como conexão. */
/* ---------- O PILAR É O MOMENTO DA PÁGINA ----------
   Esta é a única seção escura do miolo e a que carrega o conceito
   proprietário da marca. Antes eram quatro cards iguais, com a cor
   reduzida a uma borda de ícone — informava e não marcava.

   O que mudou é só ESCALA E PESO, sem elemento novo: o numeral do
   pilar entra em tipografia grande atrás do conteúdo, e a cor sai da
   borda para o fundo. Nenhuma cor, fonte ou forma foi inventada. */
.pilar {
  position: relative; z-index: 1; overflow: hidden;
  padding: var(--s-7) var(--s-6) var(--s-6);
  border-radius: var(--r-md);
  /* A cor do pilar passa a banhar o card inteiro, em vez de aparecer só
     no contorno de um ícone de 56px. */
  background: color-mix(in srgb, var(--c) 12%, rgba(255, 255, 255, .05));
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  transition: background var(--dur-state) ease, transform var(--dur-state) ease;
}
.pilar:hover { background: color-mix(in srgb, var(--c) 18%, rgba(255, 255, 255, .06)); }

/* O numeral vive atrás do texto, alto e cortado pela borda do card.
   Escala é o que cria hierarquia quando a paleta é fechada — e é o
   recurso mais barato que existe: nenhuma imagem, nenhum peso extra. */
.pilar-n {
  position: absolute; top: -.18em; right: .06em;
  z-index: -1;
  font-family: var(--font-head);
  font-size: clamp(5rem, 4rem + 6vw, 8.5rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -.06em;
  color: var(--c);
  opacity: .17;
  pointer-events: none;
}

.pilar-ic {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-circle);
  background: color-mix(in srgb, var(--c) 26%, transparent);
  color: var(--c);
  margin-bottom: var(--s-6);
}
.pilar h3 {
  color: var(--c);
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  letter-spacing: -.03em;
  margin-bottom: var(--s-3);
}
.pilar p { color: rgba(255, 255, 255, .82); font-size: var(--fs-small); }

.metodo-fecho {
  margin-top: var(--s-10);
  padding-top: var(--s-7);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-head);
  font-size: var(--fs-h3); font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, .78);
  max-width: 62ch;
}
.metodo-fecho strong { color: var(--white); font-weight: 600; }

/* ---------- 12 JORNADA · §23 ----------
   Timeline horizontal no desktop, vertical no mobile. */
.etapas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-10);
  position: relative;
}
.etapas::before {
  content: ""; position: absolute;
  top: 22px; left: 10%; right: 10%; height: 2px;
  background: var(--border);
  z-index: 0;
}
.etapa { position: relative; z-index: 1; }
.etapa-n {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-circle);
  background: var(--navy); color: var(--white);
  font-family: var(--font-head);
  font-size: var(--fs-small); font-weight: 600;
  margin-bottom: var(--s-5);
}
.etapa h3 { font-size: var(--fs-h4); margin-bottom: var(--s-3); }

.nota-larga {
  margin-top: var(--s-10);
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: var(--fs-body);
  color: var(--txt-secondary);
  max-width: none;
}

/* ---------- 13 MINHA MESADA · §24 ---------- */
.app-listas { margin-top: var(--s-8); gap: var(--s-7); }
.app-listas h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.app-listas .lista-check { margin-top: var(--s-4); }

.aviso {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-8);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: rgba(13, 27, 61, .05);
  border: 1px solid rgba(13, 27, 61, .12);
  font-size: var(--fs-small);
  color: var(--txt-secondary);
  max-width: none;
}
.aviso-ic { flex: none; color: var(--navy); margin-top: 1px; }

/* Três telas, a do meio maior e à frente. Rotação de no máximo 4 graus,
   conforme o §24 — acima disso lê como enfeite, não como pilha. */
.mockups {
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--s-4) * -1);
}
.asset-tela { width: 30%; min-width: 0; padding: var(--s-4); }
.asset-tela .asset-id { font-size: 11px; letter-spacing: .08em; }
.asset-tela .asset-meta { font-size: 11px; }
.mockups .centro { width: 38%; z-index: 2; box-shadow: var(--sh-card); background: var(--white); }
.mockups .lateral { z-index: 1; }
.mockups .lateral:first-child { transform: rotate(-4deg) translateX(8%); }
.mockups .lateral:last-child  { transform: rotate(4deg)  translateX(-8%); }

/* ---------- 14 NÚMEROS · §25 ----------
   Vem depois do bloco escuro do G3A e antes do fundador: é o respiro
   entre dois blocos densos. Para funcionar como respiro precisa de
   ESCALA — em corpo pequeno, virava mais uma grade de cards e a página
   seguia no mesmo tom do começo ao fim.

   A régua de cor no topo é o que dá a cada número a identidade da sua
   jornada sem precisar de ícone nem de caixa. */
.metricas { margin-top: var(--s-11); gap: var(--s-7) var(--s-6); }
/* Grid de duas faixas: o número ocupa a primeira, a descrição a segunda.
   Sem isto as descrições ficam em alturas diferentes — "4 pilares" cabe
   numa linha e os outros três quebram em duas, então o texto de baixo
   sobe só nesse e a régua de leitura desmonta. */
.metrica {
  padding-top: var(--s-6);
  border-top: 4px solid var(--c);
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
.metrica-v {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  font-weight: 700; line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--navy);
  margin-bottom: var(--s-3);
  max-width: none;
  /* tabular-nums alinha os algarismos entre as quatro colunas: sem
     isso o "1" do "12 meses" fica mais estreito e a linha desalinha. */
  font-variant-numeric: tabular-nums;
  /* Duas linhas de altura reservadas: três dos quatro números quebram
     em duas, e sem a reserva o quarto puxaria a descrição para cima. */
  min-height: 2.04em;
}
.metrica p:not(.metrica-v) { font-size: var(--fs-small); max-width: 22ch; }

/* ---------- 17 FUNDADOR · §28 ----------
   Sem retrato, por decisão do cliente. O título fica grudado no topo
   enquanto o texto rola ao lado — é o que dá peso de declaração
   institucional a uma seção que perdeu o elemento visual. */
.fundador .split { align-items: start; }
.fundador h2 { max-width: 16ch; }
.fundador-txt > * + * { margin-top: var(--s-4); }

@media (min-width: 1024px) {
  .fundador .split > :first-child { position: sticky; top: calc(80px + var(--s-8)); }
}

/* ---------- 18 CTA FINAL · §29 ---------- */
.cta-final { text-align: center; }
.cta-final .wrap-text { max-width: 820px; }
.cta-final .lead { margin-inline: auto; }
.cta-acoes {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: center; margin-top: var(--s-9);
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1023px) {
  .hero { min-height: 0; }

  /* §13 — a ordem no mobile é: texto → botões → IMAGEM → selo.
     O selo mora dentro de .hero-txt para ficar na coluna da esquerda no
     desktop. Aqui `display: contents` dissolve esse contêiner e promove
     os filhos dele a itens do flex, o que permite reordenar só a foto e
     o selo sem duplicar markup nem repetir o slogan em dois lugares. */
  /* `align-items: stretch` é obrigatório aqui: o .hero-grid do desktop
     tem `align-items: center`, que como flex column deixa de centralizar
     verticalmente e passa a centralizar na HORIZONTAL — foi o que
     encolheu os botões e tirou a largura total deles. */
  /* `gap: 0` é obrigatório junto com o display:contents abaixo. O gap
     do grid vale entre ITENS do flex — e com o .hero-txt dissolvido,
     eyebrow, título, texto e botões viram itens, cada um herdando os
     48px. Somados à margem, davam quase 70px entre o rótulo e o
     título, e o hero abria um vão que não existia no desktop.
     Aqui o espaçamento volta a ser declarado item a item. */
  .hero-grid {
    display: flex; flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hero-txt { display: contents; }
  .hero-txt > * + * { margin-top: var(--s-5); }

  /* ---------- A FOTO VEM PRIMEIRO NO MOBILE ----------
     Medido em 2026-07-31, com o texto vindo antes: no iPhone 14 só 77px
     de 251px da foto entravam na primeira dobra, e no iPhone SE ela
     ficava 100% fora. O hero gastava 767px de texto antes de qualquer
     imagem — a página abria muda.

     `order: -1` põe a imagem como a primeira coisa que se vê. É mais
     forte que usar a foto como fundo e não cobra o preço daquilo: sem
     escurecimento por cima, sem risco de contraste, e sem a estética de
     texto-sobre-foto que o §5 lista no NÃO PARECER.

     A ordem do DOCUMENTO continua texto → imagem, então leitor de tela
     e navegação por teclado não mudam de comportamento. */
  .foto-hero {
    order: -1;
    margin-top: 0;
    margin-bottom: var(--s-8);
  }
  .hero-acoes { order: 10; margin-top: var(--s-7); }
  /* O selo é pílula, não barra: não deve esticar com o stretch acima. */
  .selo { order: 30; margin-top: var(--s-6); align-self: flex-start; }

  .hero h1 { max-width: 18ch; }
  .asset-hero { max-width: 380px; }

  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .pilares::before { display: none; }

  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  .etapas::before { display: none; }

  .abas { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 767px) {
  /* Sem respiro em cima: a foto sangra e encosta no cabeçalho, virando
     uma faixa. Um padding aqui abriria uma tira de fundo entre o header
     e a imagem, que leria como desalinhamento. */
  .hero { padding-block: 0 var(--s-11); }
  .hero h1 { max-width: none; }
  .hero-acoes { flex-direction: column; align-items: stretch; }
  .selo { align-items: flex-start; text-align: left; border-radius: var(--r-md); }

  .g-2-lista { grid-template-columns: minmax(0, 1fr); }

  /* §22 — o G3A fica vertical, com a linha ligando os pilares. */
  .pilares { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); position: relative; }
  .pilares::before {
    display: block;
    top: 32px; bottom: 32px; left: 28px; right: auto;
    width: 2px; height: auto;
  }
  .pilar { padding-left: var(--s-9); }
  .pilar-ic { position: absolute; left: calc(var(--s-6) * -1 + 4px); top: var(--s-6); width: 48px; height: 48px; margin: 0; }
  .pilar { position: relative; padding-left: var(--s-13); }
  .pilar-ic { left: var(--s-5); }

  /* Timeline vertical, com a régua à esquerda. */
  .etapas { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .etapas::before {
    display: block;
    top: 22px; bottom: 22px; left: 21px; right: auto;
    width: 2px; height: auto;
  }
  .etapa { padding-left: var(--s-10); position: relative; }
  .etapa-n { position: absolute; left: 0; top: 0; margin: 0; }

  /* §41 — os mockups precisam continuar legíveis. Empilhados em
     duas telas, sem rotação: em 4 graus numa largura de 390px o
     texto do placeholder já começa a brigar com a borda. */
  .mockups { gap: var(--s-4); }
  .mockups .lateral:first-child { transform: none; }
  .mockups .lateral:last-child { display: none; }
  .asset-tela { width: 50%; }
  .mockups .centro { width: 50%; }

  .fechamento { font-size: var(--fs-h4); }
  .metodo-fecho { font-size: var(--fs-h4); }
}