/* ==========================================================================
   A Menina que Veio das Estrelas
   Identidade visual derivada da capa do livro (cores amostradas do arquivo).
   ========================================================================== */

:root{
  /* céu — gradiente real da capa, de cima para baixo */
  --ceu-alto:      #102F60;
  --ceu:           #17427D;
  --ceu-medio:     #1A4A84;
  --ceu-baixo:     #23528C;
  --ceu-horizonte: #3D74AE;

  /* estrelas e título */
  --estrela:       #F8DC96;
  --estrela-forte: #F2CE6E;
  --estrela-brilho:#FFF2C9;

  /* elementos da ilustração */
  --nuvem:  #EEF3FB;
  --grama:  #B6BA5A;
  --telha:  #EC8748;
  --rosa:   #F3A8B8;
  --pele:   #F7D9BE;

  /* texto */
  --tinta:       #FFFFFF;
  --tinta-suave: rgba(255,255,255,.74);
  --tinta-fraca: rgba(255,255,255,.48);

  /* superfícies */
  --vidro:       rgba(255,255,255,.07);
  --vidro-forte: rgba(255,255,255,.12);
  --borda:       rgba(255,255,255,.16);

  --raio:    18px;
  --raio-sm: 12px;
  --gutter:  clamp(16px, 4vw, 48px);
  --max:     1180px;

  --sombra: 0 18px 50px rgba(6,20,46,.45);
}

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

/* Várias caixas daqui usam display:grid/flex, o que passa por cima do
   display:none que o atributo [hidden] traz de fábrica. Sem esta linha,
   o "abrindo o desenho…" nunca sai da frente da tela de pintura. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-weight:500;
  color:var(--tinta);
  background:var(--ceu);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--estrela); }

h1,h2,h3{ font-weight:700; line-height:1.08; margin:0; letter-spacing:-.01em; }
p{ line-height:1.65; margin:0; }

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

/* --------------------------------------------------------------- navegação */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:14px var(--gutter);
  background:linear-gradient(to bottom, rgba(16,47,96,.9), rgba(16,47,96,0));
  backdrop-filter:blur(6px);
}
.nav__marca{
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:.95rem; color:var(--tinta);
  text-decoration:none; margin-right:auto;
}
.nav__marca svg{ width:22px; height:22px; flex:none; }
.nav__links{ display:flex; gap:4px; align-items:center; }
.nav__links a{
  color:var(--tinta-suave); text-decoration:none; font-size:.9rem; font-weight:600;
  padding:8px 14px; border-radius:999px; transition:background .2s, color .2s;
  white-space:nowrap;
}
.nav__links a:hover{ color:var(--tinta); background:var(--vidro); }
.nav__links a[aria-current="page"]{ color:var(--ceu-alto); background:var(--estrela); }

.nav__toggle{
  display:none; background:none; border:0; color:var(--tinta);
  font-size:1.5rem; cursor:pointer; padding:6px 10px; line-height:1;
}

@media (max-width:820px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:absolute; top:100%; right:var(--gutter); left:var(--gutter);
    flex-direction:column; align-items:stretch; gap:2px;
    background:#14396E; border:1px solid var(--borda); border-radius:var(--raio);
    padding:8px; box-shadow:var(--sombra);
    display:none;
  }
  .nav__links.aberto{ display:flex; }
  .nav__links a{ padding:12px 14px; }
}

/* ------------------------------------------------------------------- botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:999px; border:1px solid transparent;
  font:inherit; font-weight:700; font-size:.95rem;
  text-decoration:none; cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, background .2s, color .2s;
}
.btn:active{ transform:translateY(1px); }
.btn--estrela{
  background:var(--estrela); color:#5A4212;
  box-shadow:0 10px 30px rgba(248,220,150,.28);
}
.btn--estrela:hover{ background:var(--estrela-brilho); box-shadow:0 14px 38px rgba(248,220,150,.4); }
.btn--fantasma{ background:var(--vidro); color:var(--tinta); border-color:var(--borda); }
.btn--fantasma:hover{ background:var(--vidro-forte); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* -------------------------------------------------------------------- hero */
/* A capa aparece inteira, sem corte nenhum — é ela que carrega o layout
   original. O céu animado, a lua e a estrela-guia ficam em volta, repetindo
   o ambiente da ilustração sem competir com ela. */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  padding:clamp(104px,13vh,152px) 0 clamp(88px,12vh,132px);
  background:linear-gradient(to bottom,
    #0E2A57 0%, var(--ceu) 40%, var(--ceu-medio) 72%, #14396E 100%);
  overflow:hidden; isolation:isolate;
}

#ceu-hero{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }

.hero__grade{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}

.hero__conteudo{ text-align:left; }

/* o livro, inteiro e sem deformar */
.hero__livro{
  position:relative; justify-self:center;
  /* O 56vh impede que a capa fique alta demais em telas baixas e
     empurre a sombra para fora da área visível do hero. */
  width:min(100%, 372px, 56vh);
}
.hero__livro img{
  width:100%; border-radius:12px;
  box-shadow:0 22px 50px rgba(5,17,40,.6), 0 3px 12px rgba(5,17,40,.38);
  transform:rotate(-2.4deg);
  transition:transform .55s cubic-bezier(.2,.8,.3,1);
}
.hero__livro:hover img{ transform:rotate(0deg) translateY(-8px); }
/* brilho quente atrás da capa, como a estrela da ilustração */
.hero__livro::before{
  content:''; position:absolute; inset:-14% -12%;
  background:radial-gradient(ellipse at 62% 22%, rgba(248,220,150,.3), rgba(248,220,150,0) 62%);
  z-index:-1; pointer-events:none;
}

/* título fiel à capa: linha 1 branca, linha 2 amarela */
.titulo-capa{
  font-size:clamp(2.3rem, 5.6vw, 4.2rem);
  line-height:1; letter-spacing:-.018em;
  text-shadow:0 4px 26px rgba(8,26,58,.5);
}
.titulo-capa .l1{ display:block; color:#fff; }
.titulo-capa .l2{ display:block; color:var(--estrela); }

.hero__selo{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:20px; font-size:.8rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--estrela);
}
.hero__linha{
  max-width:42ch; margin:16px 0 0;
  color:var(--tinta-suave); font-size:clamp(1rem,2.2vw,1.12rem);
  text-shadow:0 2px 14px rgba(8,26,58,.6);
}
.hero__acoes{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* lua e estrela-guia, nos mesmos cantos da capa */
.lua,.estrela-guia{ position:absolute; z-index:2; pointer-events:none; }
.lua{ top:15vh; left:clamp(8px,3vw,62px); width:clamp(46px,5.4vw,80px); opacity:.9; }
.estrela-guia{ top:10vh; right:clamp(8px,3vw,54px); width:clamp(58px,7.5vw,118px); opacity:.95; }
.estrela-guia .brilho{ transform-origin:50% 50%; animation:pulsar 5s ease-in-out infinite; }
@keyframes pulsar{ 0%,100%{opacity:.5; transform:scale(.9);} 50%{opacity:1; transform:scale(1.08);} }

@media (max-width:860px){
  .hero{ padding-top:clamp(96px,12vh,130px); }
  .hero__grade{ grid-template-columns:1fr; gap:36px; }
  .hero__conteudo{ text-align:center; }
  .hero__linha{ margin-inline:auto; }
  .hero__acoes{ justify-content:center; }
  .hero__livro{ width:min(78%, 300px); order:-1; }
  .lua{ width:42px; top:auto; bottom:6vh; left:4vw; opacity:.7; }
  .estrela-guia{ width:54px; top:12vh; right:3vw; opacity:.8; }
}

/* ------------------------------------------------------------------ seções */
.secao{ padding:clamp(72px,11vw,124px) 0; position:relative; }
.secao--claro{ background:#14396E; }
.secao--fundo{ background:var(--ceu-alto); }

.secao__rotulo{
  font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--estrela); margin-bottom:14px;
}
.secao__titulo{ font-size:clamp(1.8rem,4.4vw,2.9rem); margin-bottom:18px; }
.secao__texto{ color:var(--tinta-suave); max-width:60ch; font-size:1.05rem; }
.secao__texto + .secao__texto{ margin-top:14px; }

.grade-2{
  display:grid; gap:clamp(32px,6vw,72px);
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  align-items:center;
}

.cartoes{
  display:grid; gap:18px; margin-top:44px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.cartao{
  background:var(--vidro); border:1px solid var(--borda);
  border-radius:var(--raio); padding:26px 24px;
}
.cartao__num{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:16px;
  background:var(--estrela); color:#5A4212; font-weight:700; font-size:.95rem;
}
.cartao h3{ font-size:1.12rem; margin-bottom:8px; }
.cartao p{ color:var(--tinta-suave); font-size:.94rem; }

.livro-capa{
  border-radius:14px; box-shadow:var(--sombra);
  transform:rotate(-2.2deg); transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.livro-capa:hover{ transform:rotate(0deg) translateY(-6px); }

/* --------------------------------------------------------- céu das estrelas */
.ceu-palco{
  position:relative;
  height:clamp(460px, 68vh, 760px);
  border-radius:var(--raio);
  overflow:hidden;
  background:linear-gradient(to bottom, #0C2551, var(--ceu) 55%, var(--ceu-medio));
  border:1px solid var(--borda);
}
.ceu-palco canvas{ display:block; width:100%; height:100%; }
.ceu-palco__vazio{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  padding:30px; color:var(--tinta-suave); pointer-events:none;
}

.ceu-barra{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.busca{ flex:1 1 240px; max-width:340px; position:relative; }
.busca input{ padding-left:40px; }
.busca svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:.5; pointer-events:none;
}
.contador{ color:var(--tinta-suave); font-size:.92rem; font-weight:600; }
.contador b{ color:var(--estrela); font-size:1.05rem; }

.ceu-dica{
  position:absolute; z-index:5; pointer-events:none;
  padding:7px 13px; border-radius:999px;
  background:rgba(10,30,66,.94); border:1px solid var(--borda);
  font-size:.85rem; font-weight:700; white-space:nowrap;
  transform:translate(-50%,-150%); opacity:0; transition:opacity .15s;
}
.ceu-dica.visivel{ opacity:1; }

/* painel lateral da estrela selecionada */
.painel{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:min(420px, 100%);
  background:#0F2F62; border-left:1px solid var(--borda);
  box-shadow:-24px 0 60px rgba(4,14,34,.5);
  transform:translateX(102%); transition:transform .36s cubic-bezier(.2,.8,.3,1);
  display:flex; flex-direction:column;
}
.painel.aberto{ transform:none; }
.painel__topo{
  display:flex; align-items:center; gap:12px;
  padding:20px 22px; border-bottom:1px solid var(--borda);
}
.painel__topo h3{ font-size:1.05rem; margin-right:auto; }
.painel__corpo{ padding:24px 22px 34px; overflow-y:auto; }
.painel__nome{ font-size:1.7rem; color:var(--estrela); margin-bottom:6px; }
.painel__meta{ color:var(--tinta-fraca); font-size:.85rem; font-weight:600; margin-bottom:20px; }
.painel__msg{
  color:var(--tinta-suave); font-size:1rem; line-height:1.7;
  padding:18px 20px; border-radius:var(--raio-sm);
  background:var(--vidro); border:1px solid var(--borda);
  font-style:italic;
}
.painel__pintura{ margin-top:22px; }
.painel__pintura img{ border-radius:var(--raio-sm); border:1px solid var(--borda); background:#fff; }
.fechar{
  background:var(--vidro); border:1px solid var(--borda); color:var(--tinta);
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  font-size:1.1rem; line-height:1; display:grid; place-items:center;
}
.fechar:hover{ background:var(--vidro-forte); }

/* ------------------------------------------------------------- formulário */
.form{ display:grid; gap:18px; max-width:560px; }
.campo{ display:grid; gap:7px; }
.campo label{ font-size:.88rem; font-weight:700; color:var(--tinta-suave); }
.campo .ajuda{ font-size:.8rem; color:var(--tinta-fraca); font-weight:500; }
input,textarea,select{
  width:100%; font:inherit; font-weight:500; color:var(--tinta);
  background:var(--vidro); border:1px solid var(--borda);
  border-radius:var(--raio-sm); padding:13px 16px;
  transition:border-color .2s, background .2s;
}
input::placeholder,textarea::placeholder{ color:var(--tinta-fraca); }
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--estrela); background:rgba(255,255,255,.11);
}
textarea{ resize:vertical; min-height:110px; line-height:1.6; }
select option{ background:#14396E; color:#fff; }

.aviso{ padding:16px 18px; border-radius:var(--raio-sm); font-size:.92rem; line-height:1.6; font-weight:600; }
.aviso--ok{ background:rgba(182,186,90,.18); border:1px solid rgba(182,186,90,.45); color:#E4E9A8; }
.aviso--erro{ background:rgba(236,135,72,.16); border:1px solid rgba(236,135,72,.45); color:#FFC9A6; }
.aviso--info{ background:var(--vidro); border:1px solid var(--borda); color:var(--tinta-suave); }

/* ---------------------------------------------------------------- ateliê */
.atelie{
  display:grid; gap:20px;
  grid-template-columns:280px minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){ .atelie{ grid-template-columns:1fr; } }

.paleta-caixa{
  background:var(--vidro); border:1px solid var(--borda);
  border-radius:var(--raio); padding:20px; position:sticky; top:82px;
}
@media (max-width:900px){ .paleta-caixa{ position:static; } }

.paleta-caixa h3{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--estrela); margin-bottom:14px;
}
.paleta-caixa h3 + h3{ margin-top:22px; }
.paleta{ display:grid; grid-template-columns:repeat(8,1fr); gap:7px; }
.paleta button{
  aspect-ratio:1; border-radius:8px; border:2px solid rgba(255,255,255,.18);
  cursor:pointer; padding:0; transition:transform .14s, border-color .14s;
}
.paleta button:hover{ transform:scale(1.14); }
.paleta button[aria-pressed="true"]{ border-color:#fff; transform:scale(1.16); }

.ferramentas{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.ferramenta{
  flex:1 1 0; min-width:62px;
  display:grid; place-items:center; gap:5px; padding:11px 6px;
  background:var(--vidro); border:1px solid var(--borda); border-radius:var(--raio-sm);
  color:var(--tinta-suave); cursor:pointer; font:inherit; font-size:.72rem; font-weight:700;
  transition:background .18s, color .18s, border-color .18s;
}
.ferramenta svg{ width:19px; height:19px; }
.ferramenta:hover{ background:var(--vidro-forte); color:var(--tinta); }
.ferramenta[aria-pressed="true"]{ background:var(--estrela); color:#5A4212; border-color:var(--estrela); }

.controle{ margin-top:6px; }
.controle label{ display:block; font-size:.76rem; font-weight:700; color:var(--tinta-fraca); margin-bottom:8px; }
.controle input[type=range]{ padding:0; background:none; border:0; accent-color:var(--estrela); }

.tela-caixa{ background:var(--vidro); border:1px solid var(--borda); border-radius:var(--raio); padding:16px; }
.tela-palco{
  position:relative; background:#fff; border-radius:var(--raio-sm);
  overflow:hidden; display:grid; place-items:center; min-height:320px;
}
.tela-palco canvas{ display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; }
.tela-carregando{
  position:absolute; inset:0; display:grid; place-content:center;
  background:#fff; color:#8AA0BE; font-weight:700; font-size:.9rem;
}

.miniaturas{
  display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  margin-top:16px;
}
.miniaturas button{
  padding:0; border-radius:9px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:#fff; transition:border-color .16s, transform .16s;
}
.miniaturas button:hover{ transform:translateY(-3px); }
.miniaturas button[aria-pressed="true"]{ border-color:var(--estrela); }
.miniaturas img{ aspect-ratio:2/3; object-fit:cover; }

.acoes-tela{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* ------------------------------------------------------------------ admin */
.tabela{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tabela th{
  text-align:left; padding:12px 14px; font-size:.73rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-fraca); border-bottom:1px solid var(--borda);
}
.tabela td{ padding:14px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.tabela tr:hover td{ background:var(--vidro); }
.rotulo{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:.73rem; font-weight:700; }
.rotulo--pendente{ background:rgba(236,135,72,.2); color:#FFC49B; }
.rotulo--aprovada{ background:rgba(182,186,90,.2); color:#DDE49E; }
.rotulo--recusada{ background:rgba(255,255,255,.1); color:var(--tinta-fraca); }
.mini-btn{
  padding:7px 13px; border-radius:999px; font:inherit; font-size:.8rem; font-weight:700;
  border:1px solid var(--borda); background:var(--vidro); color:var(--tinta); cursor:pointer;
}
.mini-btn:hover{ background:var(--vidro-forte); }
.mini-btn--ok{ background:var(--estrela); color:#5A4212; border-color:var(--estrela); }
.rolagem{ overflow-x:auto; }
.abas{ display:flex; gap:7px; margin-bottom:20px; flex-wrap:wrap; }
.campo-recado{ font-size:.9rem; padding:10px 12px; min-height:auto; }


/* --------------------------------------------------------------- compra */
.historia{
  font-size:clamp(1.05rem,2.3vw,1.22rem); line-height:1.85;
  color:var(--tinta-suave); max-width:60ch;
}
.historia p + p{ margin-top:1.1em; }
.historia strong{ color:var(--tinta); font-weight:600; }
.historia .convite{
  margin-top:1.6em; padding-top:1.4em;
  border-top:1px solid var(--borda);
  color:var(--estrela); font-style:italic;
}

.pix{
  background:var(--vidro); border:1px solid var(--borda);
  border-radius:var(--raio); padding:26px 24px; margin-top:26px;
}
.pix h3{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--estrela); margin-bottom:14px;
}
.pix__linha{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pix__chave{
  flex:1 1 260px; font-family:ui-monospace,'Consolas',monospace;
  font-size:1rem; font-weight:600; color:var(--tinta);
  background:rgba(0,0,0,.22); border:1px solid var(--borda);
  border-radius:var(--raio-sm); padding:13px 16px;
  overflow-wrap:anywhere;
}
.pix__aviso{ margin-top:14px; font-size:.9rem; color:var(--tinta-fraca); line-height:1.6; }

.formulario{
  background:#fff; border-radius:var(--raio); overflow:hidden;
  margin-top:26px; box-shadow:var(--sombra);
}
.formulario iframe{ display:block; width:100%; border:0; min-height:820px; }

.contato-caixa{
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:30px;
}
.contato-item{
  display:flex; align-items:center; gap:13px;
  background:var(--vidro); border:1px solid var(--borda);
  border-radius:var(--raio); padding:18px 20px;
  color:var(--tinta); text-decoration:none;
  transition:background .2s, transform .16s;
}
.contato-item:hover{ background:var(--vidro-forte); transform:translateY(-2px); }
.contato-item svg{ width:22px; height:22px; flex:none; color:var(--estrela); }
.contato-item b{ display:block; font-size:.95rem; }
.contato-item span{ font-size:.85rem; color:var(--tinta-fraca); overflow-wrap:anywhere; }

/* ------------------------------------------------------------------ rodapé */
.rodape{
  background:var(--ceu-alto); border-top:1px solid var(--borda);
  padding:52px 0 40px; color:var(--tinta-fraca); font-size:.9rem;
}
.rodape__grade{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
.rodape__links{ display:flex; gap:20px; margin-left:auto; flex-wrap:wrap; }
.rodape a{ color:var(--tinta-suave); text-decoration:none; }
.rodape a:hover{ color:var(--estrela); }

.topo-pagina{ padding:clamp(108px,15vh,150px) 0 12px; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}