/*
 * O site do mypatia.com (Entrega B38). Os tokens são os do app
 * (apps/mobile/src/theme/tokens.ts, docs/design/fundamentos.dc.html), nos dois
 * temas, pelo prefers-color-scheme. Fonte do sistema, sem framework.
 */

:root {
  --fundo: #F7F6FA;
  --superficie: #FFFFFF;
  --borda: #E7E5EF;
  --texto: #1A1523;
  --texto2: #6B6577;
  --texto3: #A6A1B3;
  --primaria: #6C3CE9;
  --primaria-texto: #6C3CE9;
  --primaria-forte: #4F2AB4;
  --primaria-tom: #E7DEFB;
  --moeda: #F5A623;
  --moeda-texto: #C97F0A;
  --pendente-fundo: #FDF3E1;
  --sobre-primaria: #FFFFFF;
  --veu: #1A1523;

  /* espaçamento: xs 4 · sm 8 · md 16 · lg 24 · xl 32 · xxl 48 */
  --e-xs: 4px; --e-sm: 8px; --e-md: 16px; --e-lg: 24px; --e-xl: 32px; --e-xxl: 48px;
  /* raio: sm 6 · md 12 · lg 20 · pill */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121016;
    --superficie: #1C1922;
    --borda: #332E3D;
    --texto: #F4F2F8;
    --texto2: #B3ADBF;
    --texto3: #8A8396;
    --primaria-texto: #A98BFF;
    --primaria-forte: #C9B6FF;
    --primaria-tom: #2E2446;
    --moeda-texto: #F5B94A;
    --pendente-fundo: #3A2B12;
  }
}

*, *::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, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

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

a { color: var(--primaria-texto); text-underline-offset: 2px; }
a:hover { color: var(--primaria-forte); }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--primaria-texto);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0; }

.largura { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--e-md); }
.largura-texto { max-width: 720px; }

.pular {
  position: absolute; left: var(--e-md); top: -60px; z-index: 10;
  background: var(--superficie); color: var(--primaria-texto);
  padding: var(--e-sm) var(--e-md); border-radius: var(--r-md);
}
.pular:focus { top: var(--e-sm); }

/* ---- barra de cima ---- */
.barra { border-bottom: 1px solid var(--borda); background: var(--superficie); }
.barra-dentro { display: flex; align-items: center; justify-content: space-between; gap: var(--e-md); min-height: 64px; }
.marca { text-decoration: none; color: var(--texto); display: inline-flex; align-items: center; min-height: 48px; }
.marca:hover { color: var(--texto); }
/* O logo: o nome escrito até o arquivo existir (configuracao.php, 'logo'). */
.nome-da-marca { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.nome-da-marca::first-letter { color: var(--primaria-texto); }
.logo { height: 28px; width: auto; }

/* ---- botões ---- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--e-lg);
  border-radius: var(--r-md);
  background: var(--primaria); color: var(--sobre-primaria);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.botao:hover { background: var(--primaria-forte); color: var(--sobre-primaria); }
@media (prefers-color-scheme: dark) {
  /* No escuro, a primaria-forte é clara: o botão continua na cor da marca. */
  .botao:hover { background: var(--primaria); box-shadow: inset 0 0 0 2px var(--primaria-forte); }
}
.botao-pequeno { min-height: 44px; padding: 0 var(--e-md); font-size: 14px; }

.nota { font-size: 14px; color: var(--texto2); }
.chamada { font-size: 18px; color: var(--texto2); }

/* ---- topo ---- */
.topo { padding: var(--e-xl) 0 var(--e-xxl); }
.topo-dentro { display: grid; gap: var(--e-xl); align-items: center; }
.topo-texto { display: grid; gap: var(--e-md); }
.topo h1 { font-size: 32px; letter-spacing: -0.01em; }
.acoes { display: grid; gap: var(--e-sm); justify-items: start; margin-top: var(--e-sm); }

.celular {
  justify-self: center;
  width: min(280px, 78vw);
  padding: 10px;
  border-radius: 40px;
  background: var(--veu);
  box-shadow: 0 0 0 1px var(--borda), 0 24px 48px rgba(26, 21, 35, 0.18);
}
.celular img { width: 100%; border-radius: 30px; }

/* ---- seções ---- */
.secao { padding: var(--e-xxl) 0; }
.secao-primeira { padding-top: var(--e-xl); }
.secao-alternada { background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.secao h2 { margin-bottom: var(--e-lg); }
.secao-intro { color: var(--texto2); margin: calc(-1 * var(--e-md)) 0 var(--e-lg); }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: var(--e-lg);
}
.secao-alternada .cartao { background: var(--fundo); }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-md); }
.passo { display: grid; gap: var(--e-sm); position: relative; }
.passo h3 { margin-top: var(--e-sm); }
.passo p { color: var(--texto2); }
.passo-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: var(--primaria-tom); color: var(--primaria-forte);
  font-size: 14px; font-weight: 700;
}
.passo .passo-numero { position: absolute; top: var(--e-lg); right: var(--e-lg); }
.passo-icone, .recurso-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--primaria-tom); color: var(--primaria-texto);
}
.passo-icone.moeda, .recurso-icone.moeda { background: var(--pendente-fundo); color: var(--moeda-texto); }
.icone { width: 24px; height: 24px; }

.selo {
  display: inline-block; vertical-align: middle;
  padding: 1px var(--e-sm); border-radius: var(--r-pill);
  /* texto (e não moeda-texto): o âmbar sobre o fundo do selo fica abaixo de 4,5:1 */
  background: var(--pendente-fundo); color: var(--texto); border: 1px solid var(--moeda);
  font-size: 12px; font-weight: 600; line-height: 1.5;
}

.recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-lg); }
.recurso { display: grid; grid-template-columns: 48px 1fr; gap: var(--e-md); align-items: start; }
.recurso h3 { font-size: 16px; }
.recurso p { color: var(--texto2); margin-top: var(--e-xs); }

/* ---- perguntas ---- */
.perguntas { display: grid; gap: var(--e-sm); }
.pergunta { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-md); }
.pergunta summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-md);
  min-height: 56px; padding: var(--e-sm) var(--e-md);
  font-weight: 600;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--texto2); border-bottom: 2px solid var(--texto2);
  transform: rotate(45deg) translateY(-3px);
}
.pergunta[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.pergunta p { padding: 0 var(--e-md) var(--e-md); color: var(--texto2); }

/* ---- baixar ---- */
.baixar { display: grid; gap: var(--e-xl); }
.baixar-android { display: grid; gap: var(--e-md); align-content: start; }
.baixar-android h2 { margin: var(--e-lg) 0 0; }
.versao { margin: var(--e-sm) 0 0; font-size: 12px; color: var(--texto2); display: grid; gap: var(--e-xs); }
.versao div { display: flex; flex-wrap: wrap; gap: var(--e-xs); }
.versao dt { font-weight: 600; }
.versao dd { margin: 0; }
.hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

.instalar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-md); }
.instalar-passo { display: grid; gap: var(--e-md); }
.instalar-passo img { width: 100%; max-width: 240px; border-radius: var(--r-md); background: var(--fundo); }
.instalar-passo h3 { display: flex; align-items: center; gap: var(--e-sm); margin-bottom: var(--e-sm); }
.instalar-passo p { color: var(--texto2); }

.aviso {
  margin-top: var(--e-md);
  border-left: 4px solid var(--primaria);
  background: var(--primaria-tom);
  border-radius: var(--r-md);
  padding: var(--e-md);
}
.aviso h2 { font-size: 18px; margin: 0 0 var(--e-sm); }

.outro-aparelho { display: grid; gap: var(--e-md); align-content: start; }
.outro-aparelho h2 { font-size: 18px; margin: 0; }
.outro-aparelho p { color: var(--texto2); }
.qr { margin: 0; display: grid; justify-items: center; gap: var(--e-sm); }
.qr img { width: 200px; background: #FFFFFF; border-radius: var(--r-md); padding: var(--e-sm); }
.qr figcaption { font-size: 14px; color: var(--texto2); }

/* ---- documentos ---- */
.documento { display: grid; gap: var(--e-md); }
.documento h2 { font-size: 20px; margin: var(--e-lg) 0 var(--e-sm); }
.documento section { display: grid; gap: var(--e-sm); }
.documento ul, .documento ol { margin: 0; padding-left: var(--e-lg); display: grid; gap: var(--e-sm); }
.faixa-provisoria {
  background: var(--pendente-fundo); color: var(--texto);
  border: 1px solid var(--moeda);
  border-radius: var(--r-md); padding: var(--e-sm) var(--e-md);
  font-size: 14px;
}
.lacuna {
  background: var(--pendente-fundo); color: var(--texto);
  box-shadow: inset 0 -2px 0 var(--moeda);
  border-radius: var(--r-sm); padding: 0 var(--e-xs);
  font-weight: 600;
}
.voltar { margin-top: var(--e-lg); }

/* ---- rodapé ---- */
.rodape { border-top: 1px solid var(--borda); background: var(--superficie); padding: var(--e-xl) 0; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 0 var(--e-lg); }
.rodape-links a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; text-decoration: none; }
.rodape-contato { margin-top: var(--e-sm); color: var(--texto2); font-size: 14px; }
.rodape-contato a { display: inline-block; padding: 12px 0; }
.rodape-fase { margin-top: var(--e-xs); color: var(--texto2); font-size: 12px; }

/* ---- computador ---- */
@media (min-width: 760px) {
  .largura { padding: 0 var(--e-lg); }
  .topo { padding: var(--e-xxl) 0; }
  .topo-dentro { grid-template-columns: 1fr auto; gap: var(--e-xxl); }
  .topo h1 { font-size: 44px; }
  .celular { width: 300px; }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .recursos { grid-template-columns: repeat(2, 1fr); gap: var(--e-lg) var(--e-xl); }
  .instalar-passo { grid-template-columns: 200px 1fr; align-items: start; }
  .baixar { grid-template-columns: 1fr 320px; align-items: start; }
  .outro-aparelho { position: sticky; top: var(--e-lg); }
}