/* O Poder do Som - página de download.
   Paleta e medidas vindas do aplicativo. Sem gradiente, sem sombra, sem ícone. */

:root {
  --fundo:        #0D0D0D;
  --cartao:       #1C1C1E;
  --cartao-alto:  #2C2C2E;
  --separador:    #38383A;
  --texto:        #FFFFFF;
  --texto-2:      #8E8E93;
  --texto-3:      #636366;

  --r-p: 10px;
  --r-m: 14px;
  --r-g: 20px;
  --r-pilula: 999px;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;

  --toque: 48px;

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

/* O foco precisa ser visível: a página é aberta em tablet, às vezes com teclado. */
a:focus-visible,
:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 3px;
}

.coluna {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--e-5) var(--e-5) calc(var(--e-5) * 2);
}

/* ---- topo ---- */

.topo {
  padding: calc(var(--e-5) * 1.5) 0 var(--e-5);
  border-bottom: 1px solid var(--separador);
}

h1 {
  margin: 0 0 var(--e-3);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.linha {
  margin: 0;
  color: var(--texto-2);
  font-size: 16px;
}

/* ---- blocos ---- */

.bloco { padding: calc(var(--e-5) * 2) 0 0; }

h2 {
  margin: 0 0 var(--e-4);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}

h3 {
  margin: calc(var(--e-5) * 1.5) 0 var(--e-3);
  font-size: 17px;
  font-weight: 500;
}

p { margin: 0 0 var(--e-4); }

b { font-weight: 500; }

.intro { color: var(--texto-2); }

/* ---- avisos ---- */

.aviso,
.nota {
  margin: 0 0 var(--e-4);
  padding: var(--e-4);
  border: 1px solid var(--separador);
  border-radius: var(--r-m);
  background: var(--cartao);
  font-size: 16px;
}

.nota { background: var(--cartao-alto); }

/* ---- botão: o único ponto focal da página ---- */

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-m);
  background: var(--texto);
  color: var(--fundo);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.botao:active { background: #D1D1D6; }

.meta {
  margin: var(--e-3) 0 0;
  color: var(--texto-2);
  font-size: 15px;
}

/* ---- passos ---- */

.passos {
  margin: 0;
  padding-left: var(--e-5);
}

.passos li {
  margin-bottom: var(--e-5);
  padding-left: var(--e-2);
}

.passos li:last-child { margin-bottom: 0; }

.passos li::marker {
  color: var(--texto-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --texto-3 (#636366) fica fora de texto: sobre #0D0D0D dá 3,25:1 e reprova no
   AA. Ele existe no app sobre superfícies mais claras; aqui o secundário resolve. */

/* Texto que o Android mostra na tela, citado literalmente. O padding é apertado
   de propósito: solto demais, a vírgula ou o ponto seguinte parecem soltos no ar.
   O clone mantém o arredondamento nas duas metades quando a citação quebra linha. */
.tela {
  padding: 1px 6px;
  border-radius: var(--r-p);
  background: var(--cartao-alto);
  quotes: "\201C" "\201D";
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- versão ---- */

.cartao {
  margin: 0;
  padding: var(--e-5);
  border-radius: var(--r-g);
  background: var(--cartao);
}

.par + .par {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--separador);
}

dt {
  color: var(--texto-2);
  font-size: 14px;
}

dd {
  margin: var(--e-1) 0 0;
  font-size: 17px;
}

/* ---- rodapé ---- */

.rodape {
  margin-top: calc(var(--e-5) * 2);
  padding-top: var(--e-5);
  border-top: 1px solid var(--separador);
  color: var(--texto-2);
  font-size: 14px;
}

.rodape p { margin: 0; }

/* ---- telas maiores: mais respiro, nada de nova estrutura ---- */

@media (min-width: 700px) {
  .coluna { padding: calc(var(--e-5) * 2) var(--e-5) calc(var(--e-5) * 3); }
  h1 { font-size: 40px; }
  .linha { font-size: 17px; }
  .bloco { padding-top: calc(var(--e-5) * 2.5); }
}

/* ============================================================================
   PORTA DE ENTRADA (index.html)

   A landing separa quem entra: professor vai para o download, secretaria vai
   para o painel. Ela não é página institucional — quem procura a escola acha
   o Instagram e o telefone, não isto aqui. Por isso não tem endereço, nem
   telefone, nem "sobre nós": três linhas e duas portas.
   ========================================================================= */

.marca {
  padding: calc(var(--e-5) * 1.5) 0 var(--e-5);
  text-align: center;
  border-bottom: 1px solid var(--separador);
}

/* O arquivo é branco sobre transparente, então ele já nasce certo no escuro.
   Altura fixa e largura automática: a clave é alta e estreita (898x1564). */
.logo {
  display: block;
  width: auto;
  height: 140px;
  margin: 0 auto var(--e-4);
}

.marca h1 { margin-bottom: var(--e-2); }

.pergunta {
  margin: calc(var(--e-5) * 2) 0 var(--e-4);
  color: var(--texto-2);
  font-size: 16px;
  font-weight: 400;
}

.portas {
  display: grid;
  gap: var(--e-4);
}

.porta {
  display: block;
  padding: var(--e-5);
  border: 1px solid var(--separador);
  border-radius: var(--r-g);
  background: var(--cartao);
  color: var(--texto);
  text-decoration: none;
}

.porta:active { background: var(--cartao-alto); }

.porta-titulo {
  display: block;
  margin-bottom: var(--e-2);
  font-size: 21px;
  font-weight: 500;
}

.porta p {
  margin: 0;
  color: var(--texto-2);
  font-size: 16px;
}

/* Sem opacidade e sem cinza mais escuro: os dois reprovariam o contraste, e o
   "em breve" já diz o que precisa ser dito. A porta inativa só não reage ao
   toque. */
.porta-inativa { cursor: default; }
.porta-inativa:active { background: var(--cartao); }

/* Fundo transparente de propósito. Sobre o cartão (#1C1C1E) o cinza
   secundário dá 5,0:1 e passa no AA; sobre #2C2C2E cairia para 4,0:1. */
.etiqueta {
  display: inline-block;
  margin-top: var(--e-3);
  padding: 2px 10px;
  border: 1px solid var(--separador);
  border-radius: var(--r-pilula);
  color: var(--texto-2);
  font-size: 13px;
}

@media (min-width: 700px) {
  .portas { grid-template-columns: 1fr 1fr; }
  .logo { height: 168px; }
}