/* ══════════════════════════════════════════════════════════
   LUA-HOJE.CSS — Componente "🌙 Lua de Hoje"
   Reaproveita as variáveis de cor já usadas no site
   (--navy, --gold, --white etc.). Se este arquivo for incluído
   numa página que já define essas variáveis em :root, os tons
   ficam automaticamente consistentes com o restante do site.
   ══════════════════════════════════════════════════════════ */

:root {
  --lh-black: #050810;
  --lh-navy: #060d1f;
  --lh-navy-mid: #0a1535;
  --lh-gold: #c9a227;
  --lh-gold-light: #e8c84a;
  --lh-gold-bright: #f5d76e;
  --lh-gold-dim: #7a6010;
  --lh-white: #f0ead8;
}

#lua-de-hoje { position: relative; z-index: 2; padding: 20px 48px; }

.lua-hoje-card {
  max-width: 780px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(10,21,53,0.92), rgba(6,13,31,0.97));
  border: 1px solid rgba(201,162,39,0.28);
  padding: 36px 40px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--lh-white, #f0ead8);
}

.lua-hoje-fadein {
  animation: luaHojeFadeIn 0.9s ease both;
}
@keyframes luaHojeFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.lua-hoje-header {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 22px; padding-bottom: 22px;
  border-bottom: 1px solid rgba(201,162,39,0.18);
}
.lua-hoje-emoji {
  font-size: 2.6rem; line-height: 1;
  filter: drop-shadow(0 0 12px rgba(201,162,39,0.4));
}
.lua-hoje-titulo-wrap { display: flex; flex-direction: column; gap: 4px; }
.lua-hoje-titulo {
  font-family: 'Cinzel Decorative', serif; font-size: 1.15rem;
  color: var(--lh-gold-bright, #f5d76e); letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(201,162,39,0.35);
}
.lua-hoje-data {
  font-family: 'Cinzel', serif; font-size: 0.7rem;
  letter-spacing: 1.5px; color: rgba(201,162,39,0.6);
  text-transform: uppercase;
}

.lua-hoje-fase-nome {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--lh-gold, #c9a227); margin-bottom: 20px;
  text-shadow: 0 0 20px rgba(201,162,39,0.25);
}

.lua-hoje-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.lua-hoje-stat {
  border: 1px solid rgba(201,162,39,0.16);
  background: rgba(255,255,255,0.02);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.stat-rotulo {
  font-family: 'Cinzel', serif; font-size: 0.62rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(201,162,39,0.65);
}
.stat-valor {
  font-family: 'Cinzel Decorative', serif; font-size: 1.2rem;
  color: var(--lh-white, #f0ead8);
}

.lua-hoje-interpretacao {
  font-style: italic; font-size: 0.95rem;
  color: rgba(240,234,216,0.75); line-height: 1.8;
  margin-bottom: 22px;
  border-left: 2px solid rgba(201,162,39,0.35);
  padding-left: 18px;
}

.lua-hoje-extra {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-bottom: 18px;
}
.extra-item {
  font-size: 0.82rem; color: rgba(240,234,216,0.65);
}
.extra-item strong { color: var(--lh-gold-bright, #f5d76e); font-weight: 600; }

.lua-hoje-disclaimer {
  font-size: 0.68rem; color: rgba(201,162,39,0.4);
  letter-spacing: 0.3px; line-height: 1.6;
  font-family: 'Cinzel', serif;
  padding-top: 16px; border-top: 1px solid rgba(201,162,39,0.12);
}

.lua-hoje-erro {
  max-width: 780px; margin: 0 auto; text-align: center;
  padding: 40px 24px; border: 1px dashed rgba(201,162,39,0.3);
  color: rgba(201,162,39,0.6); font-family: 'Cinzel', serif;
  font-size: 0.8rem; letter-spacing: 1px;
}

@media (max-width: 768px) {
  #lua-de-hoje { padding: 16px 18px; }
  .lua-hoje-card { padding: 28px 24px; }
  .lua-hoje-header { flex-wrap: wrap; }
  .lua-hoje-extra { flex-direction: column; gap: 8px; }
}