/*
 * Maná Kids — Estilos base (main.css)
 * Identidade visual: roxo bíblico + dourado + verde, fundo creme suave.
 * Tipografia: Nunito (títulos), Nunito Sans (corpo), Syne (números/pontos).
 * Fontes importadas via Google Fonts (preconnect no index.html).
 */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Nunito+Sans:wght@400;600;700&family=Syne:wght@700;800&display=swap");

:root {
  /* Paleta principal */
  --cor-primaria: #6C3FC8;   /* roxo bíblico — espiritualidade */
  --cor-secundaria: #F5A623; /* dourado — estrelas, conquistas */
  --cor-acento: #4CAF82;     /* verde — vida, natureza */
  --cor-fundo: #FFF8F0;      /* creme suave — não cansa os olhos */
  --cor-texto: #2D1B69;      /* roxo escuro */
  --cor-card: #FFFFFF;

  /* Apoio */
  --cor-erro: #E0455B;
  --cor-sucesso: #4CAF82;
  --cor-texto-suave: #6b5e8f;
  --cor-borda: #ece4f5;

  /* Tipografia */
  --fonte-titulo: "Nunito", system-ui, sans-serif;
  --fonte-corpo: "Nunito Sans", system-ui, sans-serif;
  --fonte-numeros: "Syne", system-ui, sans-serif;

  /* Forma e profundidade */
  --raio: 18px;
  --raio-grande: 28px;
  --sombra-card: 0 8px 24px rgba(108, 63, 200, 0.10);
  --sombra-flutuante: 0 12px 32px rgba(108, 63, 200, 0.18);

  /* Alvo de toque mínimo (dedos pequenos) */
  --toque-min: 48px;

  /* Transições suaves */
  --transicao: 200ms ease;
}

/* Reset mínimo */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* O atributo [hidden] SEMPRE esconde — vence classes com display (grid/flex).
   Sem isso, .conquistas-grid/.loading-game/.hud sobrepõem o `hidden` e o
   elemento continua visível (ex.: calendário sobre a aula, spinner girando). */
[hidden] { display: none !important; }

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

body {
  font-family: var(--fonte-corpo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;
  min-height: 100vh;
  font-size: 1.05rem;
}

/* Títulos arredondados e amigáveis */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cor-texto);
}

h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }

p { color: var(--cor-texto); }

a { color: var(--cor-primaria); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

ul { list-style-position: inside; }

/* Container central das páginas */
#app { width: 100%; }

.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Números de gamificação com a fonte Syne */
.num { font-family: var(--fonte-numeros); font-weight: 800; }

/* Acessibilidade: foco sempre visível */
:focus-visible {
  outline: 3px solid var(--cor-secundaria);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Link "pular para o conteúdo" (acessibilidade): visível só ao focar */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  z-index: 1000;
  background: var(--cor-primaria);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--raio) var(--raio);
  font-weight: 800;
  transition: top 150ms ease;
}
.skip-link:focus { top: 0; text-decoration: none; }

/* Utilitário para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Seções com respiro generoso */
section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }