/* Página da Lua (/lua): toda em céu. Usa o site.css por baixo. */
:root{--ouro-claro:#e3c27c;--creme:#f3ead2;--t1:#f4f1ea;--t2:#c3c7dc;--t3:#8c91b0;--vidro:rgba(10,14,36,.52);--vidro-l:rgba(255,255,255,.09)}
html{background:#03050f}
html,body{overflow-x:clip}
body{background:transparent;color:var(--t1)}
#ceu{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block}

/* cabeçalho por cima do céu */
.site-cab.pg-cab{background:transparent;border-bottom:1px solid transparent}
.site-cab .logo{filter:brightness(1.45)}
.site-cab nav a{color:rgba(195,199,220,.42);transition:color .4s}
.site-cab nav a.ativo{color:rgba(255,255,255,.7)}
.site-cab nav a:hover{color:#fff}
.site-cab nav a::after{opacity:.6}
.site-cab .logo{opacity:.75;transition:opacity .4s}
.site-cab:hover .logo{opacity:1}
.site-cab .menu-btn{opacity:.6}
.site-cab nav a::after{background:var(--ouro-claro)}
.site-cab .menu-btn{border-color:rgba(255,255,255,.25);color:#fff}
.pg-cab.rolou{background:rgba(5,8,22,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none;border-bottom-color:var(--vidro-l)}
.menu-tel{background:#050816;border-bottom-color:var(--vidro-l)}
.menu-tel a{border-bottom-color:var(--vidro-l);color:var(--t1)}
.site-cab{position:fixed;left:0;right:0;top:0}

.rotulo{color:var(--ouro-claro)}
.t-h2{color:#fff;font-weight:600;text-wrap:balance}
.sec-cab p{color:var(--t2)}
.btn-secundario{color:#fff;border-color:rgba(255,255,255,.28)}
.btn-secundario:hover{border-color:#fff}

/* 1. A LUA HOJE · ocupa o ecrã inteiro */
.hoje{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 20px 90px;position:relative}
.lua-wrap{position:relative;width:var(--tl);height:var(--tl);--tl:min(44vh,74vw,440px);will-change:transform}
.lua-wrap .halo{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(243,234,210,var(--h1,.2)) 0%,rgba(227,194,124,var(--h2,.08)) 28%,rgba(120,140,210,.04) 48%,transparent 68%);pointer-events:none}
.lua-wrap canvas{position:relative;width:100%;height:100%;display:block;animation:paralatico 48s ease-in-out infinite alternate}
@keyframes paralatico{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.hoje .rotulo{margin-top:38px}
.hoje h1{font-size:clamp(36px,5.4vw,60px);font-weight:600;line-height:1.05;letter-spacing:-.6px;margin:12px 0 0;color:#fff}
.hoje .dados{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin:14px 0 0;font-size:14.5px;color:var(--t2)}
.hoje .dados b{color:#fff;font-weight:600}
.hoje .msg{max-width:560px;margin:26px auto 0}
.hoje .msg p{margin:0 0 8px;font-size:17px;color:#dfe2ef;font-weight:400}
.pratica{display:inline-flex;gap:10px;align-items:baseline;margin-top:14px;padding:12px 16px;border:1px solid rgba(227,194,124,.32);border-radius:var(--raio);background:rgba(227,194,124,.05);font-size:15px;color:#eee6d2;text-align:left}
.pratica b{color:var(--ouro-claro);font-weight:600;white-space:nowrap}
.falta{margin:20px auto 0;font-size:15px;color:var(--t2)}
.falta b{display:block;font-size:22px;font-weight:500;color:#fff;margin-top:2px}
.desce{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--t3);font-size:11px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.desce svg{width:18px;height:18px;animation:desce 2.4s ease-in-out infinite}
@keyframes desce{50%{transform:translateY(5px)}}

/* secções por cima do céu */
.camada{position:relative;padding:110px 0}
.camada .sec-cab{margin:0 auto 44px;text-align:center}
.camada .sec-cab .rotulo::before{display:none}
.vidro{background:var(--vidro);border:1px solid var(--vidro-l);border-radius:var(--raio);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* 2. O CICLO: as quatro fases, Luas realistas */
.fases{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:860px;margin:0 auto}
.fases button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;border-radius:var(--raio);text-align:center;transition:background .3s}
.fases button:hover{background:rgba(255,255,255,.04)}
.fases button:focus-visible{box-shadow:var(--foco)}
.fases .aro{position:relative;width:104px;height:104px;border-radius:50%;padding:7px;margin-bottom:8px;transition:box-shadow .4s}
.fases .aro img{width:100%;height:100%}
.fases button.agora .aro{box-shadow:0 0 0 1px rgba(227,194,124,.3)}
.fases button[aria-pressed=true] .aro{box-shadow:0 0 0 1px rgba(227,194,124,.7),0 0 36px rgba(227,194,124,.18)}
.fases b{font-size:15px;font-weight:600;color:#fff;line-height:1.25}
.fases button[aria-pressed=true] b{color:var(--ouro-claro)}
.fases span{font-size:13px;color:var(--t3)}
.fases em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ouro-claro);height:14px}
.fase-txt{max-width:620px;margin:26px auto 0;text-align:center}
.fase-txt .dica{font-size:14px;color:var(--t3)}
#b-ciclo{padding-top:24px}
.fase-txt .quando{font-size:13px;color:var(--t3)}
.fase-txt h3{font-size:22px;font-weight:600;color:#fff;margin:4px 0 12px}
.fase-txt p{margin:0 0 8px;color:#dfe2ef;font-size:16.5px}
@media (max-width:640px){.fases{gap:0}.fases .aro{width:68px;height:68px;padding:4px}.fases b{font-size:12.5px}.fases span{font-size:12px}.fases em{font-size:9px;letter-spacing:1px}}

/* MENSAGEM DA LUA PARA TI (aleatória, da lista da gestão) */
.recado{all:unset;box-sizing:border-box;font-family:var(--f);color:var(--t1);line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:620px;margin:0 auto;padding:38px 28px 32px;text-align:center;cursor:pointer;background:var(--vidro);border:1px solid rgba(227,194,124,.28);border-radius:var(--raio);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .4s,transform .4s,box-shadow .4s}
.recado:hover{border-color:rgba(227,194,124,.6);transform:translateY(-2px);box-shadow:0 0 50px rgba(227,194,124,.08)}
.recado:focus-visible{box-shadow:var(--foco)}
.recado .r-lua{width:92px;height:92px;margin-bottom:14px;border-radius:50%;animation:pulsar 4s ease-in-out infinite}
.recado .r-lua img{width:100%;height:100%;display:block}
@keyframes pulsar{0%,100%{box-shadow:0 0 24px rgba(243,234,210,.12)}50%{box-shadow:0 0 44px rgba(243,234,210,.32)}}
.recado .r-tit{font-size:clamp(21px,2.6vw,26px);font-weight:600;color:#fff;line-height:1.25;text-wrap:balance}
.recado .r-conv{margin-top:6px;font-size:15px;color:var(--t2)}
.recado .r-conv b{color:var(--ouro-claro);font-weight:600}
.recado.leu .r-conv{display:none}
.recado:disabled{cursor:default;transform:none}
.recado:disabled:hover{border-color:rgba(227,194,124,.28);box-shadow:none}
.recado:disabled .r-lua{animation:none;box-shadow:0 0 30px rgba(243,234,210,.2)}
.recado .r-outra{margin-top:16px;font-size:13px;color:var(--t3)}
.recado .papel{margin:18px auto 0;padding:0 8px;font-size:clamp(19px,2.4vw,23px);font-weight:400;line-height:1.5;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .9s,transform .9s}
.recado .papel.ver{opacity:1;transform:none}
.recado .papel::before,.recado .papel::after{content:"";display:block;width:28px;height:1px;background:var(--ouro-claro);margin:0 auto 18px;opacity:.7}
.recado .papel::after{margin:18px auto 0}
.recado .papel:empty{display:none}

/* 3. MEDITAÇÃO DA LUA CHEIA · contador até ao pico, depois abre o vídeo */
.med{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;overflow:hidden;max-width:900px;margin:0 auto}
.med .ecra{position:relative;aspect-ratio:16/9;background:#05071a;overflow:hidden}
.med .ecra img.capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.55) sepia(.15)}
.med .ecra::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,34,.25),rgba(8,12,34,.7));pointer-events:none}
.med .ecra:has(iframe)::after{display:none}
.med .ecra .selo,.med .ecra .tocar{z-index:1}
.med .ecra iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.med.fechada .ecra img.capa{filter:blur(14px) brightness(.45) saturate(.8);transform:scale(1.15)}
.med .selo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}
.med .selo img{width:92px;height:92px}
.med .selo small{font-size:11.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--ouro-claro)}
.med .selo b{font-size:15px;font-weight:500;color:#fff}
.med .tocar{all:unset;position:absolute;inset:0;cursor:pointer;display:grid;place-items:center}
.med .tocar i{width:62px;height:62px;border-radius:50%;background:rgba(5,8,22,.35);border:1px solid rgba(227,194,124,.75);display:grid;place-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .3s,background .3s}
.med .tocar:hover i{transform:scale(1.06);background:rgba(168,134,60,.85)}
.med .tocar svg{width:20px;height:20px;color:var(--ouro-claro);margin-left:3px}
.med .tocar:hover svg{color:#fff}
.med .ecra{align-self:center;margin:18px 0 18px 18px;border-radius:var(--raio-c)}
@media (max-width:860px){.med .ecra{margin:14px 14px 0}}
.med .lado{padding:30px 30px 28px;display:flex;flex-direction:column}
.med h2{font-size:24px;font-weight:600;color:#fff;margin:10px 0 0;line-height:1.2}
.med .lado p{margin:12px 0 0;color:var(--t2);font-size:15.5px}
.contador{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:24px 0 0;padding:16px 0;border-top:1px solid var(--vidro-l);border-bottom:1px solid var(--vidro-l)}
.contador div{text-align:center}
.contador b{display:block;font-size:30px;font-weight:300;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.contador span{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3)}
.med .quando{margin-top:16px;font-size:14px;color:var(--t2)}
.med .quando b{color:#fff;font-weight:600}
.med .pe{margin-top:auto;padding-top:20px;font-size:13px;color:var(--t3)}
.med.aberta .contador,.med.espera .contador{display:none}
.med.espera{grid-template-columns:1fr;max-width:520px}
.med.espera .lado{display:none}
.med.espera .ecra{margin:16px}
.med.abriu .ecra{animation:abriu 2.4s ease-out}
@keyframes abriu{0%{box-shadow:inset 0 0 0 2000px rgba(243,234,210,.9)}100%{box-shadow:inset 0 0 0 2000px rgba(243,234,210,0)}}
@media (max-width:860px){.med{grid-template-columns:1fr}.med .lado{padding:22px 20px}.contador b{font-size:26px}}

/* 4. INTENÇÃO · enviar ao universo */
.intencao{max-width:640px;margin:0 auto;text-align:center}
.intencao .area{min-height:120px;padding:16px 18px;text-align:left;resize:vertical;font-size:16.5px;line-height:1.6;background:rgba(5,8,22,.45);border-color:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity 1s,transform 1.2s,filter 1s}
.intencao .area::placeholder{color:var(--t3)}
.intencao .area:focus{border-color:var(--ouro-claro)}
.intencao .area.a-subir{opacity:0;transform:translateY(-40px) scale(.96);filter:blur(6px)}
.intencao .fila{justify-content:center;margin-top:16px}
.intencao .so-aqui{font-size:13px;color:var(--t3);margin:14px 0 0;text-align:center}
.intencao .enviada{display:none}
.intencao.foi .escrever{display:none}
.intencao.foi .enviada{display:block;animation:surge 1.2s ease}
@keyframes surge{from{opacity:0;transform:translateY(10px)}}
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 auto 26px;max-width:600px}
.passos div{padding:12px 8px;border-top:1px solid rgba(227,194,124,.35);font-size:13.5px;color:var(--t2);line-height:1.4}
.passos b{display:block;font-size:12px;font-weight:600;letter-spacing:1.6px;color:var(--ouro-claro);margin-bottom:4px}
.intencao.foi .passos{display:none}
.enviada h3{font-size:21px;font-weight:600;color:#fff;margin:0 0 8px}
.enviada p{color:var(--t2);margin:0}
.enviada .texto{margin:22px auto 0;padding:20px 22px;max-width:520px;text-align:left;font-size:17px;color:#fff;white-space:pre-line;display:none}
.enviada.reler .texto{display:block}
.enviada .fila{margin-top:20px}
.faisca{position:fixed;z-index:60;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff6dc;box-shadow:0 0 12px 4px rgba(227,194,124,.9),0 0 40px 12px rgba(227,194,124,.35);pointer-events:none}

/* 5. PRÓXIMAS LUAS CHEIAS: lista estreita, nome em cima, dia por baixo, hora à direita */
.cheias{max-width:620px;margin:0 auto}
.cheia-l{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--vidro-l)}
.cheia-l:first-child{border-top:1px solid var(--vidro-l)}
.cheia-l img{width:40px;height:40px}
.cheia-l h3{font-size:16.5px;font-weight:600;color:#fff;margin:0;line-height:1.3}
.cheia-l .d{display:block;font-size:13.5px;color:var(--t3);margin-top:2px}
.cheia-l .h{text-align:right;font-size:15px;font-weight:500;color:#fff;white-space:nowrap}
.cheia-l .etq{display:inline-flex;background:rgba(227,194,124,.12);color:var(--ouro-claro);border-color:transparent;margin-top:6px}
@media (max-width:640px){.cheia-l{grid-template-columns:32px minmax(0,1fr) auto;gap:12px}.cheia-l img{width:32px;height:32px}.cheia-l h3{font-size:15px}}

/* newsletter e rodapé por cima do céu */
.news-ceu{max-width:860px;margin:0 auto;padding:30px;display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center}
.news-ceu h3{font-size:20px;font-weight:600;color:#fff;margin:8px 0 6px}
.news-ceu p{margin:0;color:var(--t2);font-size:15px}
.news-ceu form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.news-ceu .inp{background:rgba(5,8,22,.4);border-color:rgba(255,255,255,.18);color:#fff}
.news-ceu .inp::placeholder{color:var(--t3)}
.news-ceu .btn{grid-column:1/-1}
.news-ceu .opcao{grid-column:1/-1;font-size:13px;color:var(--t3);position:relative}
.news-ceu .opcao input{width:17px;height:17px}
@media (max-width:760px){.news-ceu{grid-template-columns:1fr;padding:22px}.news-ceu form{grid-template-columns:1fr}}
.rodape{background:transparent;border-top:1px solid var(--vidro-l);margin-top:40px}

.news-ceu .aviso{grid-column:1/-1;color:var(--ouro-claro)}
.intencao [hidden]{display:none!important}
