/* Layout por estado (s-tela, s-<tela>; render.js põe data-state no #app). Só var(--*) de tokens.css. */
.s-tela {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-4);
}

/* Carregando: só o esqueleto, sem texto. */
.s-carregando {
  gap: var(--space-6);
}

/* Link inválido e falhas: frase calma no meio da tela, nada mais. */
.s-link-invalido {
  justify-content: center;
}

/* Confirmação curta ("Pronto, vou te avisar"). */
.s-aviso-ligado .c-bloco-calmo {
  text-align: center;
}

/* Guia do iPhone: título centrado como no mockup F1.3. */
.s-ios-guia-instalar .c-texto--forte {
  text-align: center;
}

/* Chamada: o vídeo ocupa a tela inteira, sem a coluna nem o respiro da página. */
#app[data-state="chamada"] {
  max-width: none;
  padding: 0;
  gap: 0;
}

.s-chamada {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--tela-cheia);
  min-height: var(--tela-cheia-dvh);
  overflow: hidden;
  background: var(--color-text-primary);
}

/* Fim de chamada: mesmo ritmo das outras, botão Fechar no rodapé. */
.s-chamada-socorro .c-faixa--socorro {
  align-items: flex-start;
}

/* Privacidade: leitura longa, rola a página; botão Voltar no fim. */
.s-privacidade {
  gap: var(--space-6);
}