/* Viviane Bastos · Semente da Cocriação
   Entra depois de base.css e secoes.css e muda SÓ o topo.

   Por quê: a página do curso e esta abriam idênticas — mesmo marfim, mesmo arco,
   mesma órbita — e quem chegava achava que era a mesma coisa. Aqui o topo vira
   ametista escuro, que é a cor da própria mesa radiônica. O corpo da página segue
   claro, então as duas continuam sendo da mesma marca, mas a porta é outra. */

:root{
  --ametista:#3E2545;--ametista-noite:#2A1730;--ametista-fundo:#1E1023;
  --ametista-clara:#C6A9CC;--lilas-luz:#E2CBE8;
}

/* ---------- topo em ametista ---------- */
.hero{
  color:var(--creme-2);
  background:
    radial-gradient(ellipse 54% 48% at 74% 40%,rgba(154,104,164,.5),transparent 68%),
    radial-gradient(ellipse 48% 54% at 6% 86%,rgba(181,128,114,.26),transparent 66%),
    radial-gradient(ellipse 72% 44% at 50% 0%,rgba(226,203,232,.16),transparent 64%),
    linear-gradient(165deg,#44294C 0%,#2A1730 54%,#1E1023 100%)}
/* o degradê do pé puxava para o marfim: aqui fecha no próprio ametista */
.hero::after{background:linear-gradient(transparent,rgba(30,16,35,.9))}

.hero h1{color:#FBF4F8}
.hero .kicker{color:var(--ametista-clara)}
.hero .sub{color:rgba(246,237,242,.82)}
.hero .micro{color:rgba(246,237,242,.6)}
.hero .selo-tres b{color:#FBF4F8}
.hero .selo-tres span{color:var(--ametista-clara)}
/* a ênfase itálica precisa brilhar no escuro, não escurecer */
.hero em{background-image:linear-gradient(110deg,#E8C3B8 0%,#F0D9E4 28%,#D9B6E4 54%,#F0D9E4 78%,#E8C3B8 100%)}

/* selo de hora marcada, invertido */
.hero .andamento{color:var(--lilas-luz);background:rgba(226,203,232,.1);
  box-shadow:inset 0 0 0 1px rgba(226,203,232,.34)}
.hero .andamento .ponto{background:var(--lilas-luz)}
.hero .andamento .ponto::after{border-color:var(--lilas-luz)}

/* botões: o cheio clareia para destacar no escuro, o fantasma vira contorno claro */
.hero .btn{color:#2A1730;
  background:linear-gradient(135deg,#F2DCE6,#E0BCB0 52%,#C9A0B4);
  box-shadow:0 18px 38px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.hero .btn:hover{box-shadow:0 26px 48px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.hero .btn::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%)}
.hero .btn-fantasma{color:#FBF4F8;background:transparent;box-shadow:inset 0 0 0 1px rgba(226,203,232,.44)}
.hero .btn-fantasma:hover{background:rgba(226,203,232,.1);box-shadow:inset 0 0 0 1px var(--lilas-luz)}

/* órbita e molduras acesas, como a luz da mesa */
.hero .orbita .anel{border-color:rgba(226,203,232,.3)}
.hero .orbita .anel:nth-child(2){border-color:rgba(224,188,176,.3)}
.hero .orbita .anel:nth-child(3){border-color:rgba(226,203,232,.4)}
.hero .orbita .anel:nth-child(4){border-color:rgba(224,188,176,.34)}
.hero .orbita .anel:nth-child(5){border-color:rgba(242,220,246,.6);box-shadow:0 0 34px -8px rgba(226,203,232,.9)}
.hero .orbita .conta{background:radial-gradient(circle at 36% 32%,#FFFFFF,#F2DCE6 46%,#C9A0C4);
  box-shadow:0 0 16px 5px rgba(226,203,232,.7)}
.hero .moldura{border-color:rgba(226,203,232,.4)}
.hero .moldura.m2{border-color:rgba(224,188,176,.26)}
.hero .arco{background:var(--ametista);
  box-shadow:0 46px 92px -44px rgba(0,0,0,.85),0 0 0 1px rgba(226,203,232,.3),0 0 90px -20px rgba(154,104,164,.7)}

/* ---------- menu sobre o topo escuro ---------- */
.nav .marca{color:#FBF4F8}
.nav .marca small{color:var(--ametista-clara)}
.nav-links a{color:rgba(246,237,242,.8)}
.nav-links a:hover,.nav-links a.ativo{color:#FBF4F8}
.nav-links a::after{background:var(--lilas-luz)}
.nav .btn{color:#2A1730;background:linear-gradient(135deg,#F2DCE6,#E0BCB0 52%,#C9A0B4)}
.menu-btn{color:#FBF4F8;box-shadow:inset 0 0 0 1px rgba(226,203,232,.42)}
/* Ao rolar, o cabeçalho continua ametista em vez de virar marfim: numa página
   que abre escura, uma barra clara aparecendo sobre o topo escuro fica esquisita
   — e o cabeçalho sempre escuro é mais uma coisa que separa esta página da do curso. */
.nav.rolou{background:rgba(42,23,48,.96);border-color:rgba(226,203,232,.18)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav.rolou{background:rgba(42,23,48,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}

@media (max-width:980px){
  /* painel do menu em ametista, igual ao cabeçalho */
  .nav-links{background:var(--ametista-noite);border-top-color:rgba(226,203,232,.16)}
  .nav-links a{color:#FBF4F8;border-bottom-color:rgba(226,203,232,.18)}
}


/* ---------- a mesa, agora em foto ----------
   Antes era desenhada em SVG porque a foto dela so existia em print de WhatsApp.
   Ele mandou os arquivos, entao entra a mesa de verdade. */
.mesa{position:relative;width:min(460px,100%);margin:0 auto;aspect-ratio:auto}
.mesa img{width:100%;height:auto;border-radius:var(--raio-g);
  box-shadow:0 40px 76px -44px rgba(60,38,48,.75),0 0 0 1px rgba(181,128,114,.3)}
.mesa figcaption,.kit figcaption{margin-top:14px;text-align:center;font-size:13px;color:var(--tinta-3);line-height:1.5}
.kit{margin:clamp(40px,5vw,58px) auto 0;width:min(420px,100%)}
.kit img{width:100%;height:auto;border-radius:var(--raio-g);
  box-shadow:0 36px 70px -44px rgba(60,38,48,.72),0 0 0 1px rgba(181,128,114,.26)}