/* tryaskora.app — a landing e as páginas legais. As cores e as fontes são as
   do app (web/index.html): o roxo da noite, o dourado das molduras, Cormorant
   nos títulos e Jost no texto. */
:root{
  --fundo:#12041C; --roxo:#2A0D3F; --linha:#4C2A6E;
  --texto:#F6EFE2; --suave:#C6B4D6; --ouro:#E8C767; --ouro2:#F3DB8E; --ouro-escuro:#B8862F;
  --vidro:linear-gradient(180deg,rgba(74,20,102,.42),rgba(24,10,41,.9));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--texto);background-color:var(--fundo);
  font:400 17px/1.65 "Jost","Avenir Next",system-ui,sans-serif;
  /* o céu: dois clarões roxos e um punhado de estrelas, sem imagem */
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%,#fff8 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 12%,#fff7 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 64% 46%,#ffe9a888 50%,transparent 51%),
    radial-gradient(1px 1px at 30% 72%,#fff6 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 80%,#fff7 50%,transparent 51%),
    radial-gradient(1px 1px at 46% 28%,#fff5 50%,transparent 51%),
    radial-gradient(60vmax 60vmax at 85% -10%,#5b1f86aa,transparent 60%),
    radial-gradient(50vmax 50vmax at -10% 60%,#3a1260aa,transparent 60%);
  background-attachment:fixed}
a{color:var(--ouro)}
a:hover{color:var(--ouro2)}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- topo e rodapé ----------------------------------------------------- */
.topo{max-width:1120px;height:68px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);
  font:700 22px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.01em}
/* O letreiro do Ask Ora é a arte do logo do app — o nome já vem pintado nela. */
.marca img{height:52px;width:auto;display:block}
.idioma{font:500 14px/1 "Jost",system-ui,sans-serif;text-decoration:none;color:var(--suave);
  border:1px solid var(--linha);border-radius:999px;padding:8px 14px}
.idioma:hover{color:var(--ouro);border-color:var(--ouro)}
.rodape{max-width:1120px;margin:0 auto;padding:36px 20px 44px;color:var(--suave);font-size:14px;
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;border-top:1px solid #4C2A6E66}
.rodape nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.rodape a{color:var(--suave);text-decoration:none}
.rodape a:hover{color:var(--ouro)}

/* ---- a landing --------------------------------------------------------- */
/* A ABERTURA cabe inteira na primeira tela — marca, título, texto e botões —
   em qualquer altura: por isso os tamanhos seguem também a altura da janela
   (vh), e não só a largura. Num notebook de tela baixa o título encolhe em
   vez de empurrar o texto para baixo da dobra. */
.hero{max-width:1120px;min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);margin:0 auto;
  padding:1.5vh 20px 3vh;display:grid;gap:min(3vh,24px);align-content:center;align-items:center;
  grid-template-columns:1fr}
/* height:auto é o que guarda a proporção: com a altura do atributo, a arte
   esticava quando a largura encolhia. */
.hero .arte{width:auto;height:auto;max-width:min(72vw,360px);max-height:34vh;max-height:34svh;margin:0 auto;
  filter:drop-shadow(0 14px 40px #8a3ccf66)}
@media (prefers-reduced-motion:no-preference){
  .hero .arte{animation:flutua 6s ease-in-out infinite}
  @keyframes flutua{50%{transform:translateY(-10px)}}
}
.eyebrow{margin:0 0 min(1.4vh,10px);color:var(--ouro);font:600 12px/1.2 "Jost",system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;line-height:1.08;margin:0}
.hero h1{font-size:clamp(30px,min(8vw,6.4vh),56px);color:var(--texto)}
.hero h1 em{font-style:normal;color:var(--ouro)}
.hero p.sub{margin:min(2vh,16px) 0 0;font-size:clamp(15px,min(4vw,2.3vh),18px);line-height:1.55;color:var(--suave);max-width:32em}
.lojas{display:flex;flex-wrap:wrap;gap:10px;margin-top:min(3vh,24px)}
/* Os botões das lojas. Quando os selos oficiais estiverem em assets/lojas/
   (veja o LEIA-ME), eles entram no lugar destes. */
.loja{display:inline-flex;flex-direction:column;justify-content:center;flex:1 1 140px;max-width:190px;min-height:52px;
  padding:7px 18px;border-radius:13px;text-decoration:none;line-height:1.15}
.loja small{font:500 11px/1.2 "Jost",system-ui,sans-serif;letter-spacing:.04em}
.loja b{font:600 clamp(15px,4.4vw,18px)/1.2 "Jost",system-ui,sans-serif;white-space:nowrap}
.loja.ativa{background:linear-gradient(180deg,var(--ouro),var(--ouro-escuro));color:#2A0D3F;
  box-shadow:0 8px 24px #b8862f55}
.loja.ativa:hover{color:#2A0D3F;filter:brightness(1.06)}
.loja.breve{border:1px solid var(--linha);color:var(--suave);background:#1F0B3188;cursor:default}

.recursos{max-width:1120px;margin:0 auto;padding:12px 20px 40px}
.recursos h2{font-size:clamp(30px,5vw,44px);text-align:center;margin-bottom:28px}
.grade{display:grid;gap:16px;grid-template-columns:1fr}
.cartao{background:var(--vidro);border:1px solid var(--linha);border-radius:22px;padding:24px}
.cartao .simbolo{font-size:26px;line-height:1;color:var(--ouro)}
.cartao h3{font-size:26px;color:var(--ouro2);margin:12px 0 6px}
.cartao p{margin:0;color:var(--suave);font-size:16px}

.chamada{max-width:760px;margin:24px auto 64px;padding:36px 24px;text-align:center;
  background:var(--vidro);border:1px solid var(--ouro);border-radius:28px;box-shadow:0 0 40px #e8c76714}
.chamada h2{font-size:clamp(30px,5vw,42px)}
.chamada p{color:var(--suave);margin:12px 0 0}
.chamada .lojas{justify-content:center}

@media (min-width:760px){
  .grade{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:980px){
  .hero{grid-template-columns:1.1fr .9fr;gap:40px}
  .hero .arte{order:2;max-width:100%;max-height:min(64vh,440px)}
  .grade{grid-template-columns:repeat(3,1fr)}
}

/* ---- as páginas legais ------------------------------------------------- */
.legal{max-width:760px;margin:0 auto;padding:12px 20px 56px}
.legal h1{font-size:clamp(34px,6vw,44px);color:var(--ouro);margin:8px 0 6px}
.legal h2{font-size:24px;color:var(--ouro);margin:34px 0 8px}
.legal .muted{color:var(--suave);font-size:14px}
.legal li{margin:5px 0}
.legal p,.legal li{font-size:16.5px}
.preencher{background:#4C2A6E;padding:0 5px;border-radius:4px}