/* Página inicial (/) e a moldura das páginas públicas: o topo e o rodapé, que termos, privacidade e loja também usam.
   Visual do docs/design.md (escuro por padrão, vinho e dourado, cartão redondo de borda fina, botão gordinho), no
   molde de página de entrada: topo fixo com a marca, as âncoras e as ações; abertura com título grande (um trecho
   grifado em dourado), a chamada dourada e os cartões do app inclinados com o Zero; depois o que tem dentro, como
   funciona, os planos e as dúvidas. Só tokens do base.css. Classes da página inicial começam com "in-".
   A página tem que funcionar sem JavaScript: nada aqui depende de classe posta pelo JS pra aparecer. */

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

.pular {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 80;
  padding: 10px 16px;
  border: var(--bw) solid var(--linha-media);
  border-radius: var(--raio-btn);
  background: var(--superficie-elevada);
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* o que só faz sentido pra quem ainda não entrou ("Criar conta", "Já tenho conta"): o inicio.js põe .logado no <html> */
.logado [data-so-visitante] { display: none; }

/* ===== topo (todas as páginas públicas): fixo, fundo da página, fio embaixo ===== */
.topo-inicio {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  border-bottom: var(--bw-fio) solid var(--linha);
  background: var(--fundo);
}
.topo-inicio .wrap { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.topo-acoes { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 559px) { .topo-criar { display: none; } }
@media (max-width: 380px) { .topo-acoes .btn.pequeno:not(.redondo) { padding: 0 12px; } }

/* âncoras do topo: só no computador (no celular a página é uma coluna só e as seções vêm na ordem) */
.topo-nav { display: none; }
@media (min-width: 900px) {
  .topo-nav { display: flex; gap: 4px; margin-left: auto; }
  .topo-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--raio-2);
    color: var(--texto-2);
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s, background-color .15s;
  }
  .topo-nav a[aria-current="page"] { background: var(--superficie-2); color: var(--texto); }
}
@media (hover: hover) and (min-width: 900px) { .topo-nav a:hover { color: var(--texto); } }

/* ===== peças comuns das seções =====
   A coluna é a do base.css (--wrap de 1120), a mesma do topo e do rodapé das outras páginas públicas: a marca não
   muda de lugar quando a pessoa passa da inicial pros termos ou pra loja. */
.in-secao { padding: 52px 0; }
@media (min-width: 821px) { .in-secao { padding: 84px 0; } }
/* seção num tom acima, com fio em cima e embaixo (alterna com o fundo da página) */
.in-banda { border-block: var(--bw-fio) solid var(--linha); background: var(--fundo-2); }
.in-cabeca { display: grid; gap: 10px; max-width: 640px; margin-bottom: 28px; }
.in-cabeca h2 { font-size: clamp(26px, 6.4vw, 38px); letter-spacing: -.025em; line-height: 1.1; }
/* a frase da cabeça tem duas ou três linhas: saem equilibradas (com "pretty" sobrava "paga outro." sozinho na última) */
.in-cabeca > p:last-child:not(.sobretitulo) { color: var(--texto-2); font-size: 16.5px; text-wrap: balance; }
@media (min-width: 821px) { .in-cabeca { margin-bottom: 36px; } }

/* ===== abertura ===== */
.in-heroi { padding: calc(64px + 28px + env(safe-area-inset-top)) 0 52px; overflow: hidden; }
/* as colunas são minmax(0, 1fr): sem isso a coluna cresce até a frase mais comprida e a página vaza no celular */
.in-heroi-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.in-heroi-texto { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; min-width: 0; }
.in-heroi-chip { margin: 0; }
.in-heroi-chip b { color: var(--texto); }
.in-heroi h1 { font-size: clamp(34px, 9.6vw, 58px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
/* o trecho grifado do título: letra dourada com um risco dourado embaixo (imagem chapada de uma cor só) */
.in-grifo {
  padding-bottom: .04em;
  background: linear-gradient(var(--ouro), var(--ouro)) 0 100% / 100% .08em no-repeat;
  color: var(--ouro-texto);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.in-heroi-linha { max-width: 33em; color: var(--texto-2); font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.in-heroi-botao { width: 100%; margin-top: 6px; }
.in-heroi-apoio { display: flex; flex-wrap: wrap; gap: 0 22px; }
.in-heroi-apoio a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--linha-forte);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
@media (hover: hover) { .in-heroi-apoio a:hover { text-decoration-color: currentColor; } }
/* dois fatos curtos, cada um com o seu visto: lado a lado quando cabem, um embaixo do outro no celular */
.in-heroi-nota { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; color: var(--texto-2); font-size: 14.5px; list-style: none; }
.in-heroi-nota li { display: flex; align-items: flex-start; gap: 8px; }
.in-heroi-nota .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--bom-texto); stroke-width: 2.6; }
@media (min-width: 560px) { .in-heroi-botao { width: auto; } }
@media (min-width: 960px) {
  .in-heroi { padding: calc(64px + 84px) 0 80px; }
  .in-heroi-grade { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 64px; }
  .in-heroi-texto { gap: 18px; }
  /* com os cartões ao lado a coluna do título é metade da página: na janela estreita (960 a 1260px) a letra
     acompanha a largura, senão "Feche o semestre" não cabe numa linha e o título vira quatro linhas tortas */
  .in-heroi h1 { font-size: clamp(42px, 4.6vw, 58px); }
  .in-heroi-linha { font-size: 18px; }
}

/* os cartões do app, inclinados (só ilustração: ninguém clica nem seleciona). São as peças de verdade do sistema
   (cartão de destaque com o Zero, cartão, placa, barra, atalho), em tamanho de miniatura. */
.in-vitrine {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: min(100% - 12px, 440px);
  margin-inline: auto;
  transform: rotate(1.4deg);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 960px) { .in-vitrine { gap: 14px; margin-right: 6px; transform: rotate(2.4deg); } }
/* os rabiscos do destaque (balança, livro, martelo) foram postos pro cartão largo do Painel; na miniatura do
   computador eles caíam atrás da frase e dos chips: vão pro canto de cima, como o sistema já faz no celular */
.in-v-ola.cartao.destaque { padding: 20px 20px 20px 22px; background-position: right -36px top -10px, 0 0; background-size: 230px auto, auto; }
.in-v-ola .in-v-titulo { color: var(--texto); font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.in-v-ola .destaque-texto p:not(.in-v-titulo) { font-size: 13.5px; }
.in-v-ola .destaque-acoes { gap: 8px; margin-top: 8px; }
.in-v-ola .chip { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.in-v-ola .chip .ic { width: 15px; height: 15px; }
.in-v-ola .destaque-mascote { width: clamp(84px, 25vw, 116px); }
.in-v-simulado.cartao { display: grid; gap: 14px; padding: 18px 20px; }
.in-v-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.in-v-cabeca b { min-width: 0; font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 600; }
.in-v-corpo { display: flex; align-items: center; gap: 18px; }
.in-v-barras { display: grid; flex: 1; gap: 9px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.in-v-barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; color: var(--texto-2); font-family: var(--fonte-titulo); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.in-v-barras .num { color: var(--texto-3); font-weight: 600; }
.in-v-barras progress { grid-column: 1 / -1; }
.in-v-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.in-v-dupla .atalho { gap: 10px; min-height: 66px; padding: 12px; }
.in-v-dupla .caixa-ic { width: 38px; height: 38px; border-radius: 11px; }
.in-v-dupla .caixa-ic .ic { width: 20px; height: 20px; }
.in-v-dupla .atalho b { font-size: 14px; }
/* a miniatura é estreita no celular: a linha de baixo quebra em vez de acabar em reticências */
.in-v-dupla .atalho small { overflow: visible; font-size: 12px; text-overflow: clip; white-space: normal; }
@media (min-width: 960px) { .in-v-dupla { gap: 14px; } }

/* ===== o que tem dentro ===== */
.in-recursos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .in-recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
/* quatro linhas: ícone, nome, texto e chips. A do texto estica, então os chips ficam no pé do cartão */
.in-recurso { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: start; gap: 10px; }
/* lado a lado, as quatro linhas são as mesmas nos dois cartões da fileira: quando o nome de um quebra em duas linhas
   (tablet em pé) ou o texto de um é mais curto, o texto e os chips do vizinho continuam na mesma altura */
@media (min-width: 760px) {
  @supports (grid-template-rows: subgrid) {
    .in-recurso { grid-row: span 4; grid-template-rows: subgrid; }
  }
}
.in-recurso .caixa-ic { margin-bottom: 4px; }
.in-recurso h3 { font-size: 19px; letter-spacing: -.015em; }
.in-recurso > p { color: var(--texto-2); font-size: 15.5px; }
/* align-self: start: quando os chips do cartão vizinho ocupam duas linhas, estes não esticam pra altura da fileira */
.in-fatos { display: flex; flex-wrap: wrap; align-self: start; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.in-fatos .chip { min-height: 30px; font-size: 13px; }
.in-duvida-marca { color: var(--atencao-texto); font-family: var(--fonte-titulo); font-weight: 700; }
.in-tambem { max-width: 72ch; margin-top: 24px; color: var(--texto-2); font-size: 15.5px; }

/* ===== como funciona: um trilho de três passos =====
   É uma sequência, então não vem em três caixas iguais: os números ficam ligados por um fio tracejado (o mesmo
   fio da cabeça dos cartões). No celular o trilho desce pela esquerda; no computador ele corre deitado. */
.in-passos { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.in-passo { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; gap: 2px 16px; padding-bottom: 30px; }
.in-passo:last-child { padding-bottom: 0; }
.in-passo:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 54px;
  bottom: 10px;
  left: 21px;
  border-left: var(--bw) dashed var(--linha-forte);
}
.in-passo-num {
  display: grid;
  grid-row: 1 / span 2;
  align-self: start;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--bw) solid var(--acento-linha);
  border-radius: 13px;
  background: var(--acento-suave);
  color: var(--acento);
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.in-passo h3 { align-self: center; min-height: 44px; display: flex; align-items: center; font-size: 18px; letter-spacing: -.015em; }
.in-passo > p { grid-column: 2; color: var(--texto-2); font-size: 15.5px; }
@media (min-width: 820px) {
  .in-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; }
  .in-passo { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 0; }
  /* o fio sai do número e vai até o número do passo seguinte */
  .in-passo:not(:last-child)::before { top: 21px; right: -32px; bottom: auto; left: 56px; border-top: var(--bw) dashed var(--linha-forte); border-left: 0; }
  .in-passo-num { grid-row: auto; margin-bottom: 10px; }
  .in-passo h3 { display: block; align-self: start; min-height: 0; }
  .in-passo > p { grid-column: auto; max-width: 30em; }
  /* número, nome e texto nas mesmas três linhas nos três passos: no tablet em pé o nome do passo 2 quebra em duas
     linhas e o texto dele começava mais baixo que o dos vizinhos (os nomes ficam alinhados por cima) */
  @supports (grid-template-rows: subgrid) {
    .in-passo { grid-row: span 3; grid-template-rows: subgrid; }
  }
}

/* ===== planos ===== */
.in-planos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .in-planos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.in-plano { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; }
/* a linha do nome tem a altura da etiqueta ("mais em conta", 26px): com ou sem ela, nome, preço e fio ficam na mesma
   altura nos três (sem isso o nome do plano com etiqueta descia 2px em relação aos outros) */
.in-plano h3 { display: flex; flex-wrap: wrap; align-content: start; align-items: center; gap: 8px 10px; min-height: 26px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 26px; }
.in-plano-preco { display: grid; align-content: start; gap: 4px; }
/* lado a lado, as quatro linhas (nome, preço, lista, botão) são as mesmas nos três cartões: quando a nota do preço
   de um quebra em duas linhas (janela de 900 a 1010px), o fio e a lista dos outros descem junto */
@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .in-plano { grid-row: span 4; grid-template-rows: subgrid; }
  }
}
.in-plano-preco .num { font-size: 34px; letter-spacing: -.02em; line-height: 1.05; }
.in-plano-preco small { color: var(--texto-3); font-size: 14px; }
.in-plano-lista { display: grid; align-content: start; gap: 9px; margin: 0 0 6px; padding: 14px 0 0; border-top: var(--bw-fio) dashed var(--linha-media); list-style: none; }
.in-plano-lista li { display: flex; align-items: flex-start; gap: 9px; color: var(--texto-2); font-size: 15px; line-height: 1.4; }
.in-plano-lista .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--bom-texto); stroke-width: 2.6; }
/* o plano que a gente indica: contorno vinho (o resto do cartão é igual aos outros) */
.in-plano-escolha { border-color: var(--vinho); }
.in-planos-nota { max-width: 72ch; margin-top: 22px; color: var(--texto-2); font-size: 15px; }

/* ===== dúvidas: sanfona de <details> (abre sem JavaScript) num cartão só, linhas separadas por um fio =====
   No computador o título fica à esquerda, no mesmo eixo das outras seções, e a sanfona à direita. */
@media (min-width: 900px) {
  .in-perguntas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 56px; }
  /* o título acompanha a rolagem enquanto a sanfona (mais alta, ainda mais com uma dúvida aberta) passa */
  .in-perguntas .in-cabeca { position: sticky; top: 96px; margin-bottom: 0; padding-top: 6px; }
}
.in-duvidas { overflow: hidden; border: var(--bw) solid var(--linha); border-radius: var(--raio-4); background: var(--superficie); }
.in-duvida + .in-duvida { border-top: var(--bw-fio) solid var(--linha); }
.in-duvida summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 14px 18px;
  font-family: var(--fonte-titulo);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  /* pergunta que não cabe numa linha quebra no meio, sem deixar uma palavra sozinha embaixo ("antigas?", "letra?") */
  text-wrap: balance;
  list-style: none;
  cursor: pointer;
}
.in-duvida summary::-webkit-details-marker { display: none; }
.in-duvida summary:focus-visible { outline-offset: -4px; border-radius: var(--raio-3); }
.in-duvida summary .ic { width: 20px; height: 20px; color: var(--texto-3); transition: transform .2s var(--ease); }
.in-duvida[open] summary .ic { transform: rotate(180deg); }
@media (hover: hover) { .in-duvida summary:hover { background: var(--superficie-2); } }
.in-duvida > p { max-width: 66ch; padding: 0 18px 18px; color: var(--texto-2); font-size: 15.5px; }

/* a chamada do fim: um cartão calmo, na largura da página, com o § de marca d'água e o botão vinho */
.in-final { display: grid; justify-items: center; gap: 10px; margin-top: 36px; padding: 36px 22px 40px; text-align: center; }
.in-final h2 { font-size: clamp(22px, 5.4vw, 28px); letter-spacing: -.02em; }
.in-final p { color: var(--texto-2); text-wrap: balance; }
.in-final .btn { margin-top: 12px; }
@media (min-width: 821px) { .in-final { margin-top: 56px; padding: 44px 32px 48px; } }
@media (max-width: 559px) {
  .in-final .btn { width: 100%; }
  /* no celular o § caía atrás do botão: fica só do tablet pra cima (como no cartão de destaque do sistema) */
  .in-final.com-paragrafo::after { content: none; }
}

/* ===== rodapé (todas as páginas públicas) ===== */
.rodape-inicio { padding: 36px 0 calc(30px + env(safe-area-inset-bottom)); border-top: var(--bw-fio) solid var(--linha); background: var(--fundo); }
.in-banda + .rodape-inicio, main:has(> .in-banda:last-child) + .rodape-inicio { border-top: 0; }
.rodape-inicio .wrap { display: grid; gap: 14px; }
.rodape-marca { display: grid; justify-items: start; gap: 2px; }
.rodape-marca p { color: var(--texto-2); font-size: 15px; text-wrap: balance; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
/* no celular os cinco links não cabem numa linha e o último caía sozinho na de baixo: aqui eles correm como texto e
   quebram em linhas equilibradas (2 + 3) */
@media (max-width: 559px) {
  .rodape-links { display: block; text-wrap: balance; }
  .rodape-links a { margin-right: 18px; }
}
.rodape-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-2);
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
@media (hover: hover) { .rodape-links a:hover { color: var(--texto); } }
.rodape-fim { padding-top: 16px; border-top: var(--bw-fio) solid var(--linha); color: var(--texto-3); font-size: 14px; line-height: 1.55; }