/* =============================================================================
   PROGRAMA JORNADA PARA O SENTIDO — site de venda para escolas
   13/10/2026

   A DIREÇÃO: gravidade editorial no tipo, calor solar na cor. O assunto é duro
   (saúde mental de adolescentes) e quem lê é um diretor decidindo uma compra —
   não pode parecer material infantil. Mas a marca é um sol, e a página precisa
   terminar em esperança. Daí a tensão: serif editorial + dourado da marca.

   AS CORES SAÍRAM DA LOGO, medidas no manual de identidade (pixel a pixel):
   o círculo do sol é #DC982F, o sol interno #FCC64F, a palavra "Jornada"
   #512C21. Nada aqui é inventado. ⚠️ NUNCA AZUL — regra antiga do cliente.

   A ESTRUTURA espelha o site modelo que o Leo escolheu (Oficina das Finanças):
   faixas de cor alternadas separadas por ondas, cards brancos arredondados
   sobre fundo colorido, título em duas linhas (leve + bold), botões pill,
   menu fixo com a plataforma destacada e o WhatsApp flutuante.

   ⚠️ TEMA ÚNICO, de propósito: é um site publicado com identidade de marca,
   não um documento que acompanha o tema do aparelho. Por isso todo fundo e
   toda cor de texto são explícitos — a página não herda nada do navegador.
   ============================================================================= */

:root {
  /* --- a marca, medida da logo --- */
  --dourado:      #DC982F;
  --dourado-esc:  #B87A1C;
  /* dourado so para TEXTO: o #B87A1C nao alcanca 4,5 em corpo pequeno */
  --dourado-texto: #8A5A14;
  --sol:          #FCC64F;
  --sol-claro:    #F2D58C;   /* o amarelo da tela de entrada */
  --marrom:       #512C21;
  --marrom-esc:   #35190F;
  --creme:        #FFFDFA;
  --textura:      #F9F4D5;

  /* --- derivados para texto e superfície --- */
  --tinta:        #2E1810;
  --tinta-media:  #6B4A3C;
  --tinta-suave:  #8C7064;
  --branco:       #FFFFFF;
  --linha:        #EADFC8;

  /* --- sobre fundo escuro --- */
  --claro:        #FBF3E4;
  --claro-medio:  #D8C3A5;

  --sombra-card:  0 1px 2px rgba(53, 25, 15, .06), 0 12px 28px -12px rgba(53, 25, 15, .22);
  --sombra-alta:  0 2px 6px rgba(53, 25, 15, .10), 0 28px 60px -24px rgba(53, 25, 15, .38);

  --larg:         1140px;
  --gutter:       20px;
}

/* ============================================================== fundamentos */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: Figtree, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.012em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 4px;
}

.env {
  width: 100%;
  max-width: var(--larg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.env--estreito { max-width: 820px; }

/* ================================================================= o título
   O padrão do site modelo: linha leve por cima, linha pesada embaixo. Aqui a
   linha leve virou um "chapéu" em caixa alta e a pesada é a serif grande. */
.chapeu {
  font-family: Figtree, sans-serif;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  margin: 0 0 .85rem;
  display: block;
}
.chapeu--claro { color: var(--sol); }
/* ⚠️ No topo claro o chapéu precisa de um dourado MAIS ESCURO que o resto da
   página: sobre o amarelo #F2D58C, o #8A5A14 cai para 4,13 — passaria num
   título grande, não num chapéu miúdo. Este tom dá 5,02. */
.hero .chapeu { color: #7A4E10; }

.titulo    { font-size: clamp(1.85rem, 4.2vw, 3rem); }
.titulo--g { font-size: clamp(2.2rem, 5.6vw, 3.9rem); }
.sub {
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  color: var(--tinta-media);
  max-width: 62ch;
}
.sub--claro { color: var(--claro-medio); }

/* ⚠️ TODO grid desta pagina usa `minmax(min(Xpx, 100%), 1fr)`, nunca
   `minmax(Xpx, 1fr)` puro: o minmax nao conhece a largura disponivel e
   cria uma coluna de X mesmo num container menor — em tela de 320px isso
   faz a pagina inteira rolar de lado. O `min(..., 100%)` segura. */
/* ================================================================= seções */
.secao { position: relative; padding: clamp(68px, 9vw, 112px) 0; }
.secao--creme   { background: var(--creme); }
.secao--textura { background: var(--textura); }
.secao--branco  { background: var(--branco); }
.secao--escura  { background: var(--marrom-esc); color: var(--claro); }
.secao--escura .sub { color: var(--claro-medio); }
/* ⚠️ LETRA MARROM, nao branca: branco sobre o dourado da marca da 2,45 de
   contraste. Marrom escuro da 6,77 no topo do gradiente e 4,61 no pe —
   passa nos dois extremos. E foi a olho que isso apareceu: medidor
   automatico le background-color, e aqui o fundo e um gradiente. */
.secao--dourada { background: linear-gradient(165deg, var(--dourado) 0%, #C98A22 100%); color: var(--marrom-esc); }
.secao--dourada .sub { color: var(--marrom); }
.secao--dourada .titulo, .secao--dourada .chapeu { color: var(--marrom-esc); }
.secao--dourada .pendente { background: var(--marrom-esc); color: var(--sol); }

.centro { text-align: center; }
.centro .sub { margin-inline: auto; }

/* ============================================================== as ONDAS
   O divisor curvo entre faixas — a assinatura visual do site modelo.

   ⚠️ COMO FUNCIONA, porque errar isso inverte o desenho (foi o que aconteceu
   na primeira versão e o Leo viu na hora): a onda mora NO TOPO da seção de
   baixo e é pintada com a COR DA SEÇÃO DE CIMA. Assim a cor de cima "escorre"
   para dentro da de baixo, e a curva fecha certo.

   Nada de `transform: rotate(180deg)` para reaproveitar o mesmo path: era isso
   que desenhava a faixa de cima DEPOIS da de baixo, criando aquele degrau. Cada
   onda tem o seu próprio traçado, escrito para o lugar onde fica. */
.onda {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(38px, 5vw, 72px);
  display: block;
  pointer-events: none;
  z-index: 2;
}
/* a seção precisa ter espaço para a onda não comer o título */
.secao { padding-top: clamp(84px, 10vw, 128px); }

/* ================================================================ botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: Figtree, sans-serif;
  font-weight: 700;
  font-size: .97rem;
  letter-spacing: .01em;
  padding: .92rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn--sol {
  background: var(--sol);
  color: var(--marrom-esc);
  box-shadow: 0 8px 22px -8px rgba(220, 152, 47, .75);
}
.btn--sol:hover { background: #FFD472; box-shadow: 0 12px 28px -8px rgba(220, 152, 47, .9); }

/* ⚠️ letra MARROM, nao branca: branco sobre o dourado da marca da 2,45 de
   contraste e e ilegivel ao sol do celular. Marrom escuro da 4,95. */
.btn--dourado { background: var(--dourado); color: var(--marrom-esc); box-shadow: 0 8px 22px -10px rgba(220,152,47,.9); }
.btn--dourado:hover { background: var(--sol); color: var(--marrom-esc); }

.btn--contorno-claro { border-color: rgba(251, 243, 228, .5); color: var(--claro); }
.btn--contorno-claro:hover { border-color: var(--sol); color: var(--sol); }

.btn--contorno { border-color: var(--dourado); color: var(--marrom); }
.btn--contorno:hover { background: var(--dourado); color: #fff; }

/* ⚠️ Com o topo CLARO, botão de contorno claro fica invisível — foi o que
   aconteceu com o "Ver como funciona". Este é sólido e tem borda: aparece
   sobre o amarelo sem competir com o botão principal. */
.btn--branco {
  background: #fff;
  color: var(--marrom);
  border-color: var(--dourado);
}
.btn--branco:hover { background: var(--textura); border-color: var(--dourado-esc); }

.btn-linha { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ========================================================== menu fixo */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(255, 253, 250, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo__env {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 72px;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.marca__sol { width: 40px; height: 40px; flex: none; }
.marca__nome {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.04;
  color: var(--marrom);
}
.marca__nome span { display: block; }

.navega { display: flex; align-items: center; gap: 1.45rem; margin-left: auto; }
.navega a {
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta-media);
  transition: color .15s;
  white-space: nowrap;
}
.navega a:hover { color: var(--dourado-esc); }
.navega .btn { padding: .6rem 1.15rem; font-size: .86rem; color: var(--marrom-esc); }
.navega .btn:hover { color: var(--marrom-esc); }

.hamburguer {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid var(--linha);
  border-radius: 10px;
  width: 44px; height: 44px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.hamburguer span,
.hamburguer span::before,
.hamburguer span::after {
  display: block;
  width: 19px; height: 2px;
  background: var(--marrom);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.hamburguer span { position: relative; }
.hamburguer span::before, .hamburguer span::after { content: ''; position: absolute; left: 0; }
.hamburguer span::before { top: -6px; }
.hamburguer span::after  { top: 6px; }
.topo[data-aberto="sim"] .hamburguer span { background: transparent; }
.topo[data-aberto="sim"] .hamburguer span::before { transform: translateY(6px) rotate(45deg); }
.topo[data-aberto="sim"] .hamburguer span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 920px) {
  .hamburguer { display: flex; }
  .navega {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--linha);
    padding: .4rem var(--gutter) 1.1rem;
    display: none;
    box-shadow: var(--sombra-card);
  }
  .topo[data-aberto="sim"] .navega { display: flex; }
  .navega a { padding: .9rem .2rem; border-bottom: 1px solid var(--linha); font-size: 1rem; }
  .navega .btn { margin-top: .9rem; justify-content: center; padding: .85rem 1.2rem; font-size: .95rem; border-bottom: 0; }
}

/* ============================================================= 1. o topo
   CLARO, igual à tela de entrada da plataforma (pedido do Leo em 13/10): o
   mesmo amarelo da marca, o mapa da jornada bem apagado ao fundo e o Sunny na
   lateral. Os parâmetros do mapa e do Sunny são os mesmos do `.sol-scene` do
   solaris.css, para as duas telas parecerem a mesma casa.

   ⚠️ Com fundo claro o texto TEM de ser escuro: marrom sobre este amarelo dá
   11,58 de contraste; o branco de antes daria 1,4 e seria invisível. */
.hero {
  position: relative;
  background:
    radial-gradient(900px 520px at 72% 6%, rgba(255, 255, 255, .55), transparent 62%),
    linear-gradient(170deg, #F7E3AE 0%, var(--sol-claro) 52%, #EFD08A 100%);
  color: var(--tinta);
  padding: calc(72px + clamp(52px, 7vw, 92px)) 0 clamp(92px, 11vw, 140px);
  overflow: hidden;
}

/* ⚠️ O MAPA FICA SÓ ATRÁS DO SUNNY, e não atravessando o topo inteiro.
   Antes ele cruzava a seção e passava por trás da frase principal, sujando a
   leitura. Agora mora dentro da coluna do Sunny e é apagado nas bordas por uma
   máscara: some antes de chegar perto do texto, como na tela de entrada. */
.hero__mapa {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 170%;
  max-width: none;
  opacity: .30;
  filter: saturate(.6);
  -webkit-mask-image: radial-gradient(ellipse 56% 56% at 50% 50%, #000 34%, transparent 74%);
          mask-image: radial-gradient(ellipse 56% 56% at 50% 50%, #000 34%, transparent 74%);
}
/* ⚠️ O SUNNY EM COLUNA PRÓPRIA, não solto por cima do texto.
   Na primeira versão ele era `position: absolute` sobre a seção inteira e
   cobria a frase — o Leo viu na hora, e o texto ficava ilegível. Numa coluna
   da grade ele não tem como invadir: o texto ocupa a dele, ele a sua. É assim
   que a tela de entrada da plataforma faz. */
.hero__grade {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 901px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 2.5rem; }
}
@media (min-width: 1200px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}
.hero__env { min-width: 0; }

/* A COLUNA É O PALCO DO MAPA (que é absoluto dentro dela) e, no celular, É
   ELA QUE SOME — levando o Sunny E o mapa juntos, como o Leo pediu. O topo
   fica só com o amarelo da marca, que é o que deixa o texto mais legível
   numa tela estreita. */
.hero__sunny-col { position: relative; display: none; }
@media (min-width: 901px) {
  .hero__sunny-col { display: block; min-width: 0; }
}
.hero__sunny {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  opacity: .85;
  filter: drop-shadow(0 22px 44px rgba(81, 44, 33, .22));
}

.hero h1 {
  font-size: clamp(2.05rem, 5.3vw, 3.75rem);
  color: var(--marrom-esc);
  margin-bottom: 1.25rem;
}
.hero h1 em {
  font-style: normal;
  /* dourado mais vivo que o do chapéu, para separar bem as duas linhas: aqui
     o texto é grande (exige 3) e este tom dá 4,13 */
  color: var(--dourado-texto);
  display: block;
}
.hero__apoio {
  font-size: clamp(1.04rem, 1.75vw, 1.22rem);
  color: var(--marrom);
  max-width: 60ch;
  margin-bottom: 2.1rem;
}
.hero .btn-linha { margin-bottom: 2.4rem; }

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(81, 44, 33, .22);
  font-size: .88rem;
  color: var(--marrom);
  list-style: none;
  margin: 0;
  padding-left: 0;
  font-weight: 600;
}
.selos li { display: flex; align-items: center; gap: .5rem; }
.selos svg { flex: none; color: var(--dourado-texto); }

/* ====================================================== 2. o problema */
.numeros {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  margin: 2.8rem 0 2.2rem;
}
.numero {
  background: var(--branco);
  border-radius: 18px;
  padding: 1.7rem 1.5rem;
  box-shadow: var(--sombra-card);
  border-top: 5px solid var(--dourado);
  min-width: 0;
}
.numero__valor {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 2.9rem);
  line-height: 1;
  color: var(--dourado-texto);
  display: block;
  margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.numero__texto { font-size: .98rem; color: var(--tinta-media); margin: 0; }
.numero__fonte {
  display: block;
  margin-top: .9rem;
  font-size: .78rem;
  color: var(--tinta-suave);
  font-style: italic;
}

.fecho {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.18rem, 2.3vw, 1.5rem);
  line-height: 1.4;
  color: var(--marrom);
  border-left: 5px solid var(--dourado);
  padding: .3rem 0 .3rem 1.3rem;
  margin: 0;
  max-width: 54ch;
}
.fecho--claro { color: #fff; border-left-color: var(--sol); }
.fecho--centro { margin-inline: auto; }

/* ===================================================== 3. a virada (BNCC) */
.virada__caixa {
  background: var(--branco);
  border-radius: 22px;
  padding: clamp(1.8rem, 3.6vw, 2.9rem);
  box-shadow: var(--sombra-alta);
  margin-top: 2.4rem;
  border: 1px solid var(--linha);
}
.virada__destaque {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.62rem);
  line-height: 1.32;
  color: var(--marrom);
  background: var(--textura);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  margin: 1.8rem 0 0;
}

/* ============================================ 5. o que a escola recebe */
.entregas {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  margin-top: 2.8rem;
}
.entrega {
  background: var(--branco);
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-width: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.entrega:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.entrega__icone {
  width: 54px; height: 54px;
  border-radius: 15px;
  background: var(--textura);
  color: var(--dourado-texto);
  display: grid;
  place-items: center;
  flex: none;
}
.entrega h3 { font-size: 1.14rem; color: var(--marrom); }
.entrega p { font-size: .96rem; color: var(--tinta-media); margin: 0; }

/* ======================================== 6. a plataforma + as 12 fases */
.recursos {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin: 2.6rem 0 3.4rem;
}
.recurso {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(251, 243, 228, .16);
  border-radius: 18px;
  padding: 1.5rem 1.4rem;
  min-width: 0;
}
.recurso--estrela { border-color: var(--sol); background: rgba(252, 198, 79, .11); }
.recurso h3 { font-size: 1.06rem; color: #fff; margin-bottom: .5rem; }
.recurso p { font-size: .93rem; color: var(--claro-medio); margin: 0; }

.fases {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.fase {
  display: flex;
  align-items: center;
  gap: .95rem;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(251, 243, 228, .13);
  border-radius: 13px;
  padding: .82rem 1.05rem;
  min-width: 0;
}
.fase__n {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sol);
  color: var(--marrom-esc);
  display: grid;
  place-items: center;
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.fase__nome { font-size: .95rem; color: var(--claro); min-width: 0; }
.fase__insignia {
  margin-left: auto;
  flex: none;
  font-size: .76rem;
  color: var(--claro-medio);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 560px) { .fase__insignia { display: none; } }

/* ================================================= 7. como funciona */
.passos {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(235px, 100%), 1fr));
  margin: 3rem 0 2.6rem;
  counter-reset: passo;
  list-style: none;
  padding: 0;
}
.passo { position: relative; text-align: center; min-width: 0; }
.passo__circulo {
  width: 92px; height: 92px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--branco);
  border: 3px solid var(--dourado);
  display: grid;
  place-items: center;
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--dourado-texto);
  box-shadow: var(--sombra-card);
  position: relative;
  z-index: 1;
}
.passo h3 { font-size: 1.1rem; color: var(--marrom); margin-bottom: .45rem; }
.passo p { font-size: .94rem; color: var(--tinta-media); margin: 0; }

/* ================================================= 8. fundamentação */
.pilares {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top: 2.8rem;
}
.pilar {
  background: var(--branco);
  border-radius: 20px;
  padding: 1.9rem 1.7rem;
  box-shadow: var(--sombra-card);
  border-bottom: 5px solid var(--dourado);
  min-width: 0;
}
.pilar h3 { font-size: 1.16rem; color: var(--marrom); margin-bottom: .7rem; }
.pilar p { font-size: .96rem; color: var(--tinta-media); margin: 0; }

/* ==================================================== 9. para quem é */
.publicos {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  margin-top: 2.8rem;
}
.publico {
  border-radius: 22px;
  padding: clamp(1.7rem, 3vw, 2.4rem);
  min-width: 0;
}
.publico--publica { background: var(--marrom-esc); color: var(--claro); }
.publico--publica h3 { color: var(--sol); }
.publico--publica p { color: var(--claro-medio); }
.publico--particular { background: var(--branco); box-shadow: var(--sombra-card); border: 1px solid var(--linha); }
.publico--particular h3 { color: var(--marrom); }
.publico--particular p { color: var(--tinta-media); }
.publico h3 { font-size: 1.4rem; margin-bottom: .9rem; }
.publico p { font-size: .99rem; }

.pendente {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  font-family: Figtree, sans-serif;
  background: var(--sol);
  color: var(--marrom-esc);
  border-radius: 7px;
  padding: .3rem .6rem;
  margin-top: .5rem;
}

/* ==================================================== 11. perguntas */
.faq { margin-top: 2.6rem; display: grid; gap: .8rem; }
.pergunta {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 16px;
  overflow: hidden;
}
.pergunta > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--marrom);
  transition: background-color .15s;
}
.pergunta > summary::-webkit-details-marker { display: none; }
.pergunta > summary::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: .5rem; height: .5rem;
  border-right: 2.5px solid var(--dourado);
  border-bottom: 2.5px solid var(--dourado);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}
.pergunta[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
/* ⚠️ o realce leva FUNDO E LETRA juntos — clarear só o fundo some com a
   palavra, armadilha já paga na outra página do domínio */
.pergunta > summary:hover,
.pergunta > summary:focus-visible { background: var(--textura); color: var(--marrom-esc); }
.pergunta__corpo { padding: 0 1.4rem 1.3rem; color: var(--tinta-media); font-size: .98rem; }

/* ==================================================== 12. chamada final */
.formulario {
  background: var(--branco);
  border-radius: 24px;
  padding: clamp(1.8rem, 3.6vw, 2.8rem);
  box-shadow: var(--sombra-alta);
  margin-top: 2.6rem;
  text-align: left;
}
.campos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.campo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: .88rem; font-weight: 700; color: var(--marrom); }
.campo input, .campo textarea, .campo select {
  font-family: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--creme);
  border: 2px solid var(--linha);
  border-radius: 12px;
  padding: .78rem .95rem;
  width: 100%;
  transition: border-color .15s;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--dourado);
}
.campo textarea { resize: vertical; min-height: 84px; }
.formulario .btn { margin-top: 1.4rem; width: 100%; }
@media (min-width: 620px) { .formulario .btn { width: auto; } }

/* ========================================================== rodapé */
.rodape {
  background: var(--marrom-esc);
  color: var(--claro-medio);
  padding: clamp(50px, 7vw, 76px) 0 2rem;
  font-size: .94rem;
}
.rodape__grade {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(251, 243, 228, .14);
}
.rodape h4 {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sol);
  font-family: Figtree, sans-serif;
  font-weight: 700;
  margin-bottom: .9rem;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rodape a { text-decoration: none; transition: color .15s; }
.rodape a:hover { color: var(--sol); }
.rodape__fim {
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: space-between;
  font-size: .84rem;
  color: rgba(216, 195, 165, .72);
}
/* ------------------------------------------------- quem conduz o programa
   Foto à esquerda, texto à direita; no celular a foto sobe e fica centrada. */
.conduz {
  margin-top: 2.4rem;
  display: grid;
  gap: 1.8rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}
@media (min-width: 720px) {
  .conduz {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 2.4rem;
    justify-items: start;
    text-align: left;
  }
}
.conduz__foto {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  /* ⚠️ Nada de `object-position` aqui: o arquivo já é quadrado e o quadro
     também, então `cover` não deixa sobra nenhuma para deslocar e a propriedade
     não faz efeito. O enquadramento foi resolvido no corte do arquivo. */
  border: 5px solid var(--branco);
  box-shadow: 0 16px 38px rgba(81, 44, 33, .20);
}
@media (min-width: 720px) { .conduz__foto { width: 220px; height: 220px; } }
.conduz__texto { min-width: 0; }
.conduz__texto h3 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-bottom: .7rem;
}
.conduz__texto p { margin-bottom: .8rem; }
.conduz__texto p:last-child { margin-bottom: 0; }
.conduz__nota {
  font-size: .95rem;
  color: var(--tinta-media);
  padding-top: .8rem;
  border-top: 1px solid var(--linha);
}

.rodape .marca__nome { color: var(--claro); }
/* contato com ícone: o texto quebra sozinho, e o ícone não encolhe junto.
   ⚠️ `min-width: 0` no link, senão o e-mail (uma palavra longa, sem espaço)
   estoura a coluna no celular em vez de quebrar. */
.rodape__contato { display: flex; align-items: center; gap: .55rem; }
.rodape__contato svg { flex: none; color: var(--sol); }
.rodape__contato a { min-width: 0; word-break: break-word; }

/* =================================================== WhatsApp flutuante */
.zap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px -4px rgba(37, 211, 102, .6), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.zap:hover { transform: scale(1.07); box-shadow: 0 10px 28px -4px rgba(37, 211, 102, .78); }
.zap svg { width: 31px; height: 31px; }
@media (min-width: 620px) { .zap { right: 26px; bottom: 26px; width: 62px; height: 62px; } }

/* ⚠️ A REVELAÇÃO AO ROLAR MORA NO FIM DESTE ARQUIVO, numa seção só.
   Havia aqui uma segunda definição de `.revela`, e ela estava MORTA: a do fim
   do arquivo, com a mesma especificidade e mais abaixo, vencia sempre. Pior,
   a regra de `prefers-reduced-motion` ficava no meio das duas e era desfeita
   pela de baixo — quem pedia menos movimento recebia `opacity: 0` e só não
   via a página em branco porque o JS salvava. Uma definição só, lá embaixo. */
.revela:nth-child(2) { transition-delay: .07s; }
.revela:nth-child(3) { transition-delay: .14s; }
.revela:nth-child(4) { transition-delay: .21s; }

/* =============================================== itens de grade no celular
   ⚠️ Item de grid nasce com `min-width: auto` e se recusa a encolher abaixo
   do próprio conteúdo — é assim que uma palavra longa (um ISBN, um arroba,
   uma URL) empurra a coluna e faz a PÁGINA INTEIRA rolar de lado. */
.numeros > *, .entregas > *, .recursos > *, .fases > *,
.passos > *, .pilares > *, .publicos > *, .campos > * { min-width: 0; }
.fase__nome, .numero__texto, .entrega p { overflow-wrap: anywhere; }

/* =============================================================================
   ACRESCENTADO EM 13/10/2026, na segunda rodada de ajustes do Leo
   ============================================================================= */

/* ------------------------------------------------------------- a LOGO real
   É a mesma imagem da plataforma (library/Imagens/1.png). A primeira versão
   tinha um sol desenhado por mim, que não era a marca. */
.marca__logo {
  height: 56px;
  width: auto;
  flex: none;
}
.marca__logo--pe { height: 62px; margin-bottom: .9rem; }
@media (max-width: 480px) { .marca__logo { height: 40px; } }

/* --------------------------------------------- os DOIS CARROSSÉIS de telas
   Um do computador e um do aplicativo, lado a lado. Rolagem horizontal com
   encaixe (scroll-snap): funciona no dedo sem JavaScript nenhum, e as setas
   são um acréscimo para quem está no computador.

   ⚠️ OS QUADROS TÊM ALTURA FIXA E IGUAL nos dois. Sem isso, uma captura de
   celular (que é altíssima — a primeira tinha 1200×2400) estica o cartão e
   desalinha a fileira inteira. A imagem se encaixa dentro do quadro: a de
   computador preenche pelo topo, a de celular aparece inteira. */
.vitrolas {
  display: grid;
  gap: 2.2rem;
  margin-top: 2.6rem;
  align-items: start;
}
/* as duas colunas com a MESMA largura: os carrosséis ocupam o mesmo espaço */
@media (min-width: 1000px) {
  .vitrolas { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.vitrolas > * { min-width: 0; }

.vitrola__titulo {
  font-size: 1.22rem;
  color: var(--marrom);
  margin-bottom: .3rem;
}
.vitrola__nota {
  font-size: .93rem;
  color: var(--tinta-media);
  margin: 0 0 1rem;
}

.carrossel {
  position: relative;
}
.carrossel__trilho {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .4rem .2rem 1.4rem;
  /* a barra de rolagem fica discreta, mas NÃO some: ela é a pista de que dá
     para deslizar */
  scrollbar-width: thin;
  scrollbar-color: var(--dourado) var(--textura);
}
.carrossel__trilho::-webkit-scrollbar { height: 8px; }
.carrossel__trilho::-webkit-scrollbar-track { background: var(--textura); border-radius: 999px; }
.carrossel__trilho::-webkit-scrollbar-thumb { background: var(--dourado); border-radius: 999px; }

/* ⚠️ O CARTÃO TEM O MESMO TAMANHO NOS DOIS CARROSSÉIS — mesma largura e mesma
   altura. O que muda é só a DIREÇÃO de leitura:

     computador → imagem horizontal em cima, texto embaixo
     aplicativo → imagem vertical à esquerda, texto à direita

   A altura é fixa (e não "o que o conteúdo pedir") porque é ela que mantém as
   duas fileiras alinhadas lado a lado. Sem isso, uma captura de celular — que
   é altíssima — estica o cartão e desalinha tudo. */
.tela {
  flex: 0 0 min(430px, 88%);
  height: 404px;
  scroll-snap-align: center;
  margin: 0;
  background: var(--branco);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sombra-card);
  border: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tela__quadro {
  background: var(--textura);
  overflow: hidden;
  flex: none;
}
.tela__quadro img { width: 100%; height: 100%; display: block; }

/* --- computador: a imagem deitada em cima, o texto embaixo --- */
.vitrola--pc .tela__quadro {
  height: 244px;
  border-bottom: 1px solid var(--linha);
}
.vitrola--pc .tela__quadro img { object-fit: cover; object-position: top center; }

/* --- aplicativo: a imagem em pé à esquerda, o texto à direita --- */
.vitrola--app .tela { flex-direction: row; }
.vitrola--app .tela__quadro {
  height: 100%;
  width: 46%;
  flex: none;
  border-right: 1px solid var(--linha);
  display: grid;
  place-items: center;
}
.vitrola--app .tela__quadro img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: .7rem .5rem;
}
.vitrola--app .tela figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 1.1rem 1.2rem;
}

/* ⚠️ EM TELA ESTREITA O CARTÃO ENCOLHE — nos DOIS carrosséis, senão eles
   deixam de ter o mesmo tamanho. O motivo é a captura do celular: ela é alta
   e estreita (420×908), e numa coluna estreita não há largura para ela crescer
   até os 404px de altura — sobrava uma tarja da textura em cima e embaixo. */
@media (max-width: 999px) {
  .tela { height: 340px; }
  .vitrola--pc .tela__quadro { height: 185px; }
  .vitrola--app .tela__quadro { width: 50%; }
  .vitrola--app .tela__quadro img { padding: .4rem .3rem; }
  .vitrola--app .tela figcaption { padding: .9rem 1rem; }
}
.tela figcaption {
  padding: 1.1rem 1.25rem 1.3rem;
  font-size: .94rem;
  color: var(--tinta-media);
}
.tela figcaption strong {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.08rem;
  color: var(--marrom);
  margin-bottom: .35rem;
}

.carrossel__seta {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--branco);
  color: var(--marrom);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-card);
  transition: background-color .15s, color .15s;
}
.carrossel__seta:hover { background: var(--dourado); color: var(--marrom-esc); }
.carrossel__seta--esq { left: -14px; }
.carrossel__seta--dir { right: -14px; }
/* as setas só no computador: no dedo, deslizar é mais natural */
@media (min-width: 1000px) { .carrossel__seta { display: flex; } }

.carrossel__pontos {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .4rem;
}
.carrossel__ponto {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--linha-forte);
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.carrossel__ponto[aria-selected="true"] { background: var(--dourado); transform: scale(1.35); }

/* ------------------------------------------------- notas do formulário */
.formulario__nota {
  margin: .9rem 0 0;
  font-size: .9rem;
  color: var(--tinta-media);
  max-width: 52ch;
}
.formulario__aviso {
  margin: .9rem 0 0;
  font-size: .94rem;
  font-weight: 600;
  color: var(--marrom);
  background: var(--textura);
  border-radius: 10px;
  padding: .7rem .9rem;
}

/* =============================================================================
   OS EFEITOS DE ENTRADA — "um site mais agradável de ler" (Leo, 13/10/2026)

   Uma orquestração por seção, não efeito espalhado: o bloco de texto sobe,
   os cartões entram em sequência, e as imagens dão uma leve aproximada. O
   conjunto dura menos de um segundo e acontece uma vez só por seção.

   ⚠️ `translate` e `scale` separados, NUNCA `transform`: assim não brigam com
   o `transform` que alguns elementos já usam no hover (o cartão que levanta,
   a seta que gira). Foi essa colisão que, noutra página deste domínio, apagou
   o espelhamento de uma foto.
   ============================================================================= */

/* o bloco de texto: sobe e aparece */
.revela { opacity: 0; translate: 0 22px; transition: opacity .7s cubic-bezier(.22,.68,.3,1), translate .7s cubic-bezier(.22,.68,.3,1); }
.revela.visivel { opacity: 1; translate: 0 0; }

/* os cartões de uma grade entram em cascata, um atrás do outro */
.entregas > .revela:nth-child(1), .recursos > .revela:nth-child(1),
.pilares > .revela:nth-child(1),  .numeros > .revela:nth-child(1) { transition-delay: .04s; }
.entregas > .revela:nth-child(2), .recursos > .revela:nth-child(2),
.pilares > .revela:nth-child(2),  .numeros > .revela:nth-child(2) { transition-delay: .12s; }
.entregas > .revela:nth-child(3), .recursos > .revela:nth-child(3),
.pilares > .revela:nth-child(3),  .numeros > .revela:nth-child(3) { transition-delay: .20s; }
.entregas > .revela:nth-child(4), .recursos > .revela:nth-child(4) { transition-delay: .28s; }
.entregas > .revela:nth-child(5) { transition-delay: .36s; }
.entregas > .revela:nth-child(6) { transition-delay: .44s; }

/* os quatro passos vêm do lado, como quem percorre um caminho */
.passo.revela { translate: -18px 0; }
.passo.revela.visivel { translate: 0 0; }
.passos > .passo:nth-child(2) { transition-delay: .10s; }
.passos > .passo:nth-child(3) { transition-delay: .20s; }
.passos > .passo:nth-child(4) { transition-delay: .30s; }

/* as duas colunas de "para quem é" vêm de fora, cada uma do seu lado */
.publico--publica.revela    { translate: -22px 0; }
.publico--particular.revela { translate:  22px 0; }
.publico.revela.visivel     { translate: 0 0; }

/* as fases acendem em cascata rápida — são doze, então o passo é curto */
.fase { opacity: 0; translate: 0 10px; transition: opacity .5s ease, translate .5s ease; }
.fases.visivel .fase { opacity: 1; translate: 0 0; }
.fases.visivel .fase:nth-child(n+2)  { transition-delay: .03s; }
.fases.visivel .fase:nth-child(n+4)  { transition-delay: .06s; }
.fases.visivel .fase:nth-child(n+7)  { transition-delay: .09s; }
.fases.visivel .fase:nth-child(n+10) { transition-delay: .12s; }

/* o título grande da chamada final dá uma aproximada de leve */
#falar .titulo.revela, #falar h2 { transition: opacity .8s ease, translate .8s ease, scale .8s ease; }
#falar .revela { scale: .985; }
#falar .revela.visivel { scale: 1; }

/* ⚠️ QUEM PEDE MENOS MOVIMENTO CONTINUA VENDO O TEXTO CHEGAR — só que sem
   sair do lugar. É a regra do projeto: nunca parar, só encurtar.

   O que incomoda quem tem sensibilidade a movimento é o DESLOCAMENTO (o bloco
   subindo, a coluna entrando pela lateral), não a opacidade. Então o que sai
   é `translate` e `scale`; o fade fica, mais curto.

   E isto não é teoria: o Windows do Leo responde `reduce`, e foi ele quem
   pediu "uns efeitos do texto chegando". A versão anterior entregava a página
   inteira pronta e ele não via efeito nenhum. */
@media (prefers-reduced-motion: reduce) {
  .revela, .fase, .passo.revela, .publico.revela, #falar .revela {
    translate: none !important;
    scale: none !important;
    transition: opacity .34s ease !important;
  }
  .entrega:hover, .zap:hover { transform: none; }
}

/* ------------------------------------------------- a marca: SÍMBOLO + NOME
   ⚠️ A logo oficial traz o nome DESENHADO. Reduzida à altura de um menu, esse
   nome fica miúdo demais para ler — foi o que o Leo viu. Então aqui entra só o
   símbolo (o mesmo do sistema, sem texto) e o nome em tipo de verdade ao lado,
   que se lê em qualquer tamanho. */
.marca__simbolo {
  height: 44px;
  width: 44px;
  flex: none;
}
.marca__simbolo--pe { height: 52px; width: 52px; }
.marca__nome--pe { color: var(--claro); }
@media (max-width: 480px) { .marca__simbolo { height: 38px; width: 38px; } }