/* Tema Futuro (s145, versão Lucas, 09/10): visual do mockup do Lucas por cima do Estúdio.
   Violeta, Manrope, abertura centralizada com o logo 3D, estrelas, faixa de frases, processo em botões.
   Sem botão de tema, sem linha em degradê no topo, sem faixa de fotos. Preço, catálogo e carrinho não mudam. */
:root{
  --preto:#07060e;--fundo:#07060e;--surf:#100d19;--surf-2:#171020;--painel:#100d19;
  --txt:#f4f1ff;--txt-mudo:#b1acc5;--neon:#c7b4e8;--acento:#8e50d2;--acento-hover:#7543c5;--magenta:#f155cf;--roxo:#a47aff;
  --grad:#8e50d2;--grad-linha:linear-gradient(90deg,#7543c5,#a47aff,#f155cf);--borda:rgba(211,166,255,.14);
  --cz-acento3d:#a47aff;--c1:rgba(211,172,255,.30);--c2:rgba(106,54,168,.34);--borda3d:rgba(216,188,255,.55);--halo:rgba(150,101,246,.22);
  --topo-h:86px}
@media (max-width:560px){:root{--topo-h:72px}}
h1,h2,h3,.hero__h1,body,button,input,select,textarea{font-family:Manrope,Arial,sans-serif}
body{background:#07060e}

/* topo (print 2 dela): transparente sobre as estrelas, escurece ao rolar */
#tema-alternar,.faixa{display:none}
.topo{background:transparent;backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.06);transition:background .3s}
html[data-rolou] .topo{background:rgba(7,6,14,.82);backdrop-filter:blur(14px)}
.topo::after{display:none}
.topo__in{min-height:var(--topo-h)}
.marca__txt{white-space:normal;font-size:17px;font-weight:750;letter-spacing:-.02em;line-height:1.1;color:var(--txt-forte)}
.marca__txt strong{color:inherit;font-weight:inherit;margin-left:.28em}
.marca__txt em{display:block;margin-top:4px;font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--txt-mudo)}
.menu a{font-weight:500;font-size:13px}
.topo__acoes .btn--ouro{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.16);color:var(--txt-forte);box-shadow:none;font-weight:600;min-height:46px;padding:0 16px}
.topo__acoes .btn--ouro:hover{background:rgba(255,255,255,.06)}
@media (max-width:560px){.marca__txt{font-size:14px}}

/* abertura: sobe por baixo do topo; estrelas, arco de luz e logo 3D atrás do título */
main>.hero:first-child{margin-top:calc(-1 * var(--topo-h))}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(72px + var(--topo-h)) 0 96px;min-height:min(760px,100svh)}
.hero>.wrap{position:relative;z-index:2}
.hero__grade{display:block;text-align:center}
.hero__olho{color:#c7b4e8;font-size:11px;letter-spacing:.27em}
.hero__h1{max-width:none;margin:0 auto;font-size:clamp(52px,8.3vw,108px);line-height:1.02;letter-spacing:-.055em;font-weight:750;
  background:linear-gradient(176deg,#fff 9%,#d7cfea 34%,#fcfbff 47%,#796b98 69%,#e9d9ff 91%);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 2px #07060e) drop-shadow(0 0 14px #07060eaa)}
.hero__h1 span{display:block;color:inherit;-webkit-text-fill-color:transparent}
.hero__sub{margin:20px auto 28px;max-width:470px;font-size:15px;color:#ded6ec;text-shadow:0 2px 8px #07060e,0 0 14px #07060e}
.hero__ctas{justify-content:center}
.btn--ouro{background:linear-gradient(110deg,#7543c5,#8e50d2 48%,#ad59c8);border:1px solid rgba(196,147,255,.46);box-shadow:0 0 25px rgba(141,67,223,.27)}
.btn--ghost{background:rgba(18,16,28,.5)}
.secao__num,.escolha__card small,.vale small{color:#a47aff}
.card{background:linear-gradient(150deg,#1b1427,#0c0a12);border-color:rgba(211,166,255,.12)}

.cz-estrelas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.8}
.cz-luz{position:absolute;z-index:-1;pointer-events:none;left:50%;top:-330px;width:900px;max-width:140%;height:620px;border-radius:50%;transform:translateX(-50%);
  border-bottom:1px solid #d5c3ff77;background:radial-gradient(ellipse at 50% 87%,#bf8cff30 0,#6734af18 24%,transparent 67%);
  box-shadow:0 35px 55px -24px #bc79ff,0 90px 110px -80px #e3bcff;animation:cz-respira 7s ease-in-out infinite}
.cz-hero-logo{position:absolute;z-index:-1;pointer-events:none;aspect-ratio:1;left:50%;top:10px;width:min(78%,800px);transform:translateX(-50%);opacity:.72}
.cz-hero-logo::before{content:"";position:absolute;inset:12%;background:radial-gradient(ellipse,var(--halo),transparent 68%);filter:blur(30px)}
.cz-logo-canvas{position:relative;width:100%;height:100%;display:block;filter:drop-shadow(0 0 18px #9c68ff55)}
.cz-logo-reserva{width:100%;height:100%;object-fit:contain;opacity:.3}
@media (max-width:780px){.cz-hero-logo{top:60px;width:105%;max-width:700px}}

/* botão pausar */
.cz-pausa{position:absolute;right:max(16px,calc((100% - 1200px)/2));bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 0;
  border:0;background:none;color:var(--txt-mudo);font:inherit;font-size:12px;cursor:pointer}
.cz-pausa i{width:6px;height:6px;border-radius:50%;background:var(--cz-acento3d);box-shadow:0 0 8px var(--cz-acento3d)}
html[data-pausado] *,html[data-pausado] *::before,html[data-pausado] *::after{animation-play-state:paused!important}

/* faixa de frases */
.cz-ticker{display:flex;height:54px;align-items:center;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-mudo)}
.cz-ticker__trilho{display:flex;width:max-content;animation:cz-corre 38s linear infinite}
.cz-ticker__trilho span{display:inline-flex;align-items:center;gap:40px;padding-right:40px}
.cz-ticker b{color:var(--cz-acento3d);font-weight:400;font-size:15px}

/* processo em 3 botões (substitui a lista; a lista fica no HTML para quem não roda script) */
.cz-proc{border:1px solid var(--borda);border-radius:14px;background:var(--surf);padding:24px;margin:8px 0 24px;max-width:760px}
.etapas.cz-escondida{display:none}
.cz-proc__nav{display:flex;gap:6px;border-bottom:1px solid var(--borda);padding-bottom:16px}
.cz-proc__nav button{flex:1;border:0;border-radius:8px;padding:12px 10px;background:none;color:var(--txt-mudo);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.cz-proc__nav button small{color:var(--cz-acento3d);margin-right:6px}
.cz-proc__nav button[aria-pressed="true"]{color:var(--txt-forte);background:rgba(255,255,255,.06)}
.cz-proc__arte{height:110px;display:flex;align-items:center;justify-content:center;gap:10px}
.cz-proc__arte i{width:44px;height:44px;transform:rotate(45deg);border-radius:8px;border:1px solid var(--borda3d);background:linear-gradient(140deg,var(--c1),transparent);transition:transform .6s}
.cz-proc__arte i:nth-child(2){width:56px;height:56px}
.cz-proc[data-passo="1"] .cz-proc__arte i:first-child{transform:translateX(28px) rotate(45deg)}
.cz-proc[data-passo="1"] .cz-proc__arte i:last-child{transform:translateX(-28px) rotate(45deg)}
.cz-proc[data-passo="2"] .cz-proc__arte i{transform:rotate(45deg) scale(.8);background:linear-gradient(140deg,var(--c1),var(--c2))}
.cz-proc h3{font-size:20px;margin:6px 0 8px}
.cz-proc p{color:var(--txt-mudo);margin:0;min-height:72px}
.cz-proc__prox{margin-top:14px;border:0;background:none;color:var(--txt-forte);font:inherit;font-weight:700;cursor:pointer;padding:8px 0}

@keyframes cz-corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cz-respira{0%,100%{opacity:.68}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.cz-ticker__trilho,.cz-luz{animation:none}}

/* site em páginas (s146, 09/10): nas páginas sem abertura o topo é sólido e o conteúdo desce um pouco */
.sem-abertura .topo{background:rgba(7,6,14,.92);backdrop-filter:blur(14px)}
.sem-abertura main{padding-top:24px}
.menu a[aria-current="page"]{color:var(--txt-forte);box-shadow:inset 0 -2px 0 var(--cz-acento3d)}
.pagina-cab{padding:56px 0 8px}
.pagina-cab h1{font-size:clamp(34px,5vw,52px);letter-spacing:-.04em;margin:8px 0 0}
.pagina-cab p{color:var(--txt-mudo);max-width:60ch;margin:12px 0 0}

/* Início: peças em destaque e chamada de sob medida */
.destaque__mais{display:flex;justify-content:center;margin-top:24px}
.chamada{border-top:1px solid var(--borda);background:radial-gradient(ellipse at 92% 40%,rgba(108,56,163,.15),transparent 52%)}
.chamada__in{display:grid;gap:20px;max-width:640px}
.chamada h2{font-size:clamp(30px,4vw,40px);letter-spacing:-.04em;margin:0}
.chamada p{color:var(--txt-mudo);margin:0}

/* Cliente → Meus pedidos */
.cliente__form{max-width:520px}
.pedidos{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px;max-width:760px}
.pedido{border:1px solid var(--borda);border-radius:12px;background:var(--surf);padding:16px;display:grid;gap:8px;justify-items:start}
.pedido__cab{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline}
.pedido__cab span,.pedido__itens{color:var(--txt-mudo);margin:0}
.pedido__situacao{margin:0;font-weight:700}

/* céu de estrelas em todas as páginas (dela, 09/10): fundo fixo; seções e rodapé translúcidos para as estrelas aparecerem */
.cz-ceu{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:.85}
.cz-estrelas{display:none}
.secao--alt,.rodape{background:rgba(16,13,25,.55)}
.cz-pausa--fixa{position:fixed;left:16px;right:auto;bottom:16px;z-index:30;padding:8px 12px;border-radius:999px;background:rgba(7,6,14,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08)}
@media (prefers-reduced-motion:reduce){.cz-pausa--fixa{display:none}}
/* o fundo fica no html e o body transparente: senão o fundo do body cobre o céu (z-index -1) */
html{background:#07060e}
body{background:transparent}

/* rodapé (dela, 10/10): logo centralizado sobre a frase; "Navegação" e "Contato" em colunas (antes saía em linha corrida) */
.rodape__in{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:40px;align-items:start}
.rodape__marca{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;justify-self:start}
.rodape__logo{width:104px;height:auto}
.rodape__frase{margin:0}
.rodape__col{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.rodape__col>strong{color:var(--txt-forte);font-size:14px;margin-bottom:4px}
.rodape__col>a{color:var(--txt-mudo);font-size:14px}
.rodape__col>a:hover{color:var(--txt-forte)}
@media (max-width:780px){.rodape__in{grid-template-columns:1fr;gap:28px}.rodape__marca{justify-self:center}}

/* abertura (dela, 10/10: "a Lua está confrontando com o logo em camadas"): o arco com borda sai;
   fica um halo suave atrás do logo, sem contorno, para o logo 3D ser o único protagonista */
.cz-luz{top:calc(var(--topo-h) - 40px);width:min(1000px,140%);height:760px;max-width:none;border:0;box-shadow:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(164,122,255,.26),rgba(117,67,197,.12) 45%,rgba(7,6,14,0) 100%);filter:blur(8px);animation:cz-respira 9s ease-in-out infinite}
@media (max-width:780px){.cz-luz{top:calc(var(--topo-h) + 10px);height:560px}}

/* lua suave (dela, 10/10: "e se fizer a lua suave?"): volta o arco como cenário, bem apagado e desfocado,
   atrás do halo; o logo 3D segue como o ponto mais claro da abertura */
.cz-luz::before{content:"";position:absolute;left:50%;top:-52%;width:125%;height:80%;transform:translateX(-50%);border-radius:50%;
  border-bottom:1px solid rgba(213,195,255,.22);box-shadow:0 26px 50px -30px rgba(188,121,255,.40),0 70px 90px -70px rgba(227,188,255,.25);
  background:radial-gradient(ellipse at 50% 92%,rgba(191,140,255,.10),rgba(103,52,175,.04) 30%,transparent 62%)}
@media (max-width:780px){.cz-luz::before{width:150%;top:-58%}}
/* lua mais presente (dela, 10/10): borda mais visível, ainda atrás do halo e sem brilho maior que o logo */
.cz-luz::before{border-bottom:1.5px solid rgba(213,195,255,.45);box-shadow:0 30px 55px -26px rgba(188,121,255,.60),0 80px 100px -70px rgba(227,188,255,.40)}

/* cenário da abertura = Órbitas (dela, 10/10, s149): a lua sai; anéis finos no ângulo das camadas abraçam o logo
   em vez de cortá-lo (vinham do palco do 1º mockup do Lucas). O halo segue atrás do logo. */
.cz-luz{top:calc(var(--topo-h) + 20px);height:640px;filter:none}
.cz-luz::before,.cz-luz::after{content:"";position:absolute;left:50%;border-radius:50%;
  border:1px solid rgba(172,119,254,.42);border-top-color:rgba(184,153,255,.06);box-shadow:0 14px 40px -26px rgba(203,176,255,.8);background:none}
.cz-luz::before{top:46%;width:78%;height:20%;transform:translateX(-50%) rotate(-8deg)}
.cz-luz::after{top:52%;width:60%;height:15%;transform:translateX(-50%) rotate(12deg);opacity:.55}
@media (max-width:780px){.cz-luz{top:calc(var(--topo-h) + 40px);height:520px}.cz-luz::before{width:96%}.cz-luz::after{width:74%}}

/* As peças (21/10, auditoria dela: "Ajustar AS PEÇAS = Horrível"): grade uniforme, sem a 1ª peça gigante;
   foto quadrada igual em todas; nome, resumo e preço dentro do cartão, com o preço sempre na mesma linha */
@media (min-width:900px){
  .grid .card:first-child{grid-column:auto;grid-row:auto;display:flex}
  .grid .card:first-child .card__foto{aspect-ratio:1/1;height:auto;min-height:0}
  .grid .card:first-child .card__nome{font-size:15px}
}
.grid .card{display:flex;flex-direction:column;border:1px solid rgba(211,166,255,.12);border-radius:var(--raio);overflow:hidden}
.grid .card__foto{aspect-ratio:1/1;border-radius:0}
.grid .card__corpo{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:6px}
.grid .card__resumo{flex:0 0 auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid .card__preco{margin-top:auto;padding-top:6px}
.grid .card__preco b{font-size:19px}