/* Luna e os Planetas — azul-meia-noite, latão e creme. Mobile first, sem build. */

@font-face {
  font-family: "Cormorant";
  src: url("/assets/fontes/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("/assets/fontes/cormorant-italico.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fontes/lato.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fontes/lato-negrito.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* glifos astrológicos sempre como texto (nunca emoji) */
@font-face {
  font-family: "Simbolos";
  src: url("/assets/fontes/simbolos.woff2") format("woff2");
  unicode-range: U+260C, U+263D-2642;
  font-display: swap;
}
@font-face {
  font-family: "Simbolos";
  src: url("/assets/fontes/simbolos2.woff2") format("woff2");
  unicode-range: U+2609, U+25B3, U+2726;
  font-display: swap;
}

:root {
  --noite: #111733;
  --noite-2: #1b2347;
  --noite-3: #28315c;
  --latao: #b8914a;
  --latao-claro: #d9b56c;
  --creme: #f7f0e3;
  --creme-2: #efe5d2;
  --tinta: #1d2140;
  --tinta-suave: #4a4f6e;
  --erro: #9b3b32;
  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --largura: 68rem;
  --raio: 14px;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--latao); }

:focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; border-radius: 4px; }

.pular {
  position: absolute; left: -999px; top: 0;
  background: var(--creme); color: var(--tinta); padding: .5rem 1rem; z-index: 10;
}
.pular:focus { left: 1rem; top: 1rem; }

.conteiner { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }
.estreito { width: min(100% - 2.5rem, 40rem); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); }
h3 { font-size: 1.5rem; font-weight: 600; }
p { margin: 0 0 1em; }
em, .italico { font-family: var(--serif); font-style: italic; font-size: 1.12em; }

.sobretitulo {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--latao);
  margin-bottom: 1.2rem;
  font-weight: 700;
}

/* ------------------------------------------------------------ topo */
.topo {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  padding: 1.1rem 0;
}
.topo.solido { position: static; background: var(--noite); }
.topo .conteiner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--serif); font-size: 1.35rem; font-weight: 500;
  color: var(--creme); text-decoration: none; letter-spacing: .02em;
}
.marca:hover { color: var(--creme); }
.marca svg { width: 28px; height: 28px; }
.topo nav { display: flex; gap: 1.2rem; font-size: .9rem; }
.topo nav a { color: var(--creme-2); text-decoration: none; }
.topo nav a:hover { color: var(--latao-claro); }
.topo nav .so-largo { display: none; }

/* ------------------------------------------------------------ céu (fundo escuro) */
.ceu {
  position: relative;
  color: var(--creme);
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(247,240,227,.8), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(247,240,227,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 38%, rgba(217,181,108,.9), transparent 60%),
    radial-gradient(1px 1px at 30% 70%, rgba(247,240,227,.6), transparent 60%),
    radial-gradient(1px 1px at 88% 64%, rgba(247,240,227,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 46% 86%, rgba(247,240,227,.5), transparent 60%),
    radial-gradient(1px 1px at 6% 90%, rgba(217,181,108,.7), transparent 60%),
    radial-gradient(120% 80% at 70% 0%, var(--noite-3) 0%, var(--noite-2) 35%, var(--noite) 75%);
  overflow: hidden;
}
.ceu a:hover { color: var(--latao-claro); }

.heroi { padding: 7.5rem 0 4.5rem; }
.heroi .texto { max-width: 36rem; position: relative; z-index: 1; }
.heroi p.lead { font-size: 1.15rem; color: var(--creme-2); max-width: 32rem; }
.heroi .orbita {
  position: absolute; right: -9rem; top: 4rem; width: 26rem; height: 26rem; opacity: .35;
  pointer-events: none;
}

.acoes { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-top: 2rem; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .8rem 1.6rem;
  font: 700 .95rem/1.2 var(--sans); letter-spacing: .04em;
  color: var(--noite); background: var(--latao-claro);
  border: 1px solid var(--latao-claro); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.botao:hover { background: var(--creme); border-color: var(--creme); color: var(--noite); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .6; cursor: progress; }
.botao.contorno { background: transparent; color: var(--tinta); border-color: var(--latao); }
.botao.contorno:hover { background: var(--latao); color: var(--creme); }
.ceu .botao.contorno { color: var(--creme); border-color: rgba(217,181,108,.6); }
.botao.largo { width: 100%; }
.link-discreto {
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  font: inherit; font-size: .92rem; color: var(--tinta-suave); text-decoration: underline;
}
.ceu .link-discreto { color: var(--creme-2); }

/* ------------------------------------------------------------ seções claras */
.secao { padding: 4.5rem 0; }
.secao.creme-2 { background: var(--creme-2); }
.filete {
  width: 4rem; height: 1px; background: var(--latao); border: 0; margin: 0 0 1.6rem;
}
.centro { text-align: center; }
.centro .filete { margin-inline: auto; }
.centro .acoes { justify-content: center; }

.grade { display: grid; gap: 1.2rem; margin-top: 2rem; }
.cartao {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(184,145,74,.35);
  border-radius: var(--raio);
  padding: 1.5rem 1.4rem;
}
.cartao h3 { margin-bottom: .35em; }
.cartao p { margin: 0; color: var(--tinta-suave); }
.glifo {
  font-family: "Simbolos", var(--serif); font-size: 1.6rem; color: var(--latao); line-height: 1;
  margin-bottom: .6rem; display: block;
}

.passos { counter-reset: passo; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.6rem; }
.passos li { counter-increment: passo; position: relative; padding-left: 3.4rem; }
.passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -.1rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--latao); color: var(--latao);
  font: 500 1.3rem/2.3rem var(--serif); text-align: center;
}
.passos strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }

.nota {
  border-left: 2px solid var(--latao);
  padding: .4rem 0 .4rem 1.2rem; margin: 2.4rem 0 0; color: var(--tinta-suave);
}

.citacao {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 5vw, 2.3rem);
  line-height: 1.3; max-width: 38rem; margin: 0 auto 2rem;
}

/* ------------------------------------------------------------ rodapé */
.rodape { background: var(--noite); color: var(--creme-2); padding: 3rem 0 2.5rem; font-size: .9rem; }
.rodape .conteiner { display: grid; gap: 1.4rem; }
.rodape a { color: var(--creme); }
.rodape .aviso { color: rgba(239,229,210,.7); font-size: .82rem; max-width: 40rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }

/* ------------------------------------------------------------ texto longo (privacidade) */
.documento { padding: 3.5rem 0 4.5rem; }
.documento h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); }
.documento h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.documento ul { padding-left: 1.2rem; }
.documento li { margin-bottom: .4rem; }
.documento .data { color: var(--tinta-suave); font-size: .9rem; }

/* ------------------------------------------------------------ Meu mapa */
.area { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.area main { flex: 1; padding: 3rem 0 4rem; }
.painel {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(184,145,74,.4);
  border-radius: 20px;
  padding: 2rem 1.4rem;
  box-shadow: 0 20px 50px -30px rgba(17,23,51,.35);
}
.painel h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
.campo { display: grid; gap: .35rem; margin-bottom: 1.2rem; }
.campo label { font-weight: 700; font-size: .92rem; }
.campo .ajuda { font-size: .85rem; color: var(--tinta-suave); }
.campo input {
  width: 100%; min-height: 3.1rem; padding: .7rem 1rem;
  font: 1.05rem var(--sans); color: var(--tinta);
  background: #fffdf8; border: 1px solid #cdbf9f; border-radius: 10px;
}
.campo input:focus { outline: 2px solid var(--latao); outline-offset: 1px; border-color: var(--latao); }
.mensagem { min-height: 1.5rem; margin: 1rem 0 0; font-size: .95rem; }
.mensagem.erro { color: var(--erro); }

.mapa-item {
  border-top: 1px solid rgba(184,145,74,.35);
  padding: 1.6rem 0 .4rem;
}
.mapa-item:first-of-type { border-top: 0; padding-top: .6rem; }
.mapa-item h2 { font-size: 1.8rem; margin-bottom: .4rem; }
.mapa-item .acoes { margin-top: 1.2rem; }
.estado { display: flex; gap: .9rem; align-items: flex-start; color: var(--tinta-suave); }
.lua-girando { width: 2.2rem; height: 2.2rem; flex: none; animation: girar 6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lua-girando { animation: none; }
  html { scroll-behavior: auto; }
}
.oculto { display: none !important; }
.saudacao { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ telas maiores */
@media (min-width: 640px) {
  .grade { grid-template-columns: repeat(2, 1fr); }
  .painel { padding: 2.6rem 2.4rem; }
  .topo nav .so-largo { display: inline; }
}
@media (min-width: 960px) {
  .heroi { padding: 10rem 0 7rem; }
  .heroi .orbita { right: 4%; top: 6rem; width: 30rem; height: 30rem; opacity: .55; }
  .grade.tres { grid-template-columns: repeat(3, 1fr); }
  .secao { padding: 6rem 0; }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
  .passos li { padding-left: 0; padding-top: 3.6rem; }
  .rodape .conteiner { grid-template-columns: 1fr auto; align-items: end; }
}