/* ==========================================================================
   Portada alineada con la web app (diseño «Noche») sin cambiar su estructura.
   Se carga después de style.css. Quitar este archivo regresa al diseño anterior.
   ========================================================================== */
:root {
  /* Paleta exacta de la marca (tokens.css) */
  --violet: #5B2A6B;
  --purple: #3A1A45;
  --wine: #4A1F55;
  --gold: #D9B56A;
  --gold-light: #F0D49A;
}

/* ---------- Cabecera de noche, como la app ---------- */
.site-header { background: rgba(12, 16, 42, .86); border-bottom: 1px solid rgba(217, 181, 106, .3); box-shadow: 0 6px 30px rgba(4, 6, 20, .35);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.brand img { filter: drop-shadow(0 0 12px rgba(217, 181, 106, .25)); }
.main-nav a { color: rgba(247, 232, 217, .82); position: relative; }
.main-nav a:hover { color: var(--gold-light); }
.menu-toggle span { background: #F7E8D9; }
.nav-acceso { display: flex; gap: .6rem; flex-shrink: 0; }
.solo-movil { display: none; }

/* ---------- Botones como en la app ---------- */
.btn-primary, .btn-gold { background: linear-gradient(180deg, #F0D49A, #D9B56A); color: #2A1238; border: 1px solid transparent; box-shadow: 0 6px 22px rgba(217, 181, 106, .28); }
.btn-primary:hover, .btn-gold:hover { box-shadow: 0 10px 32px rgba(217, 181, 106, .45); }
.btn-ghost { color: #F7E8D9; border: 1px solid rgba(217, 181, 106, .6); background: rgba(247, 232, 217, .04); }
.btn-ghost:hover { background: rgba(217, 181, 106, .12); }
.btn-outline { border-color: rgba(217, 181, 106, .6); }
.btn-dark { background: #5B2A6B; color: #F7E8D9; border: 1px solid #D9B56A; }
.btn-dark:hover { background: #3A1A45; }

/* ---------- Hero ---------- */
.hero-cuenta { margin-top: 1.1rem; font-size: .92rem; color: rgba(247, 232, 217, .82); }
.hero-cuenta a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Secciones oscuras con estrellas ---------- */
.tarot-section, .newsletter, .cta-banner, .tu-espacio { position: relative; isolation: isolate; }
.tarot-section::before, .newsletter::before, .tu-espacio::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(1px 1px at 8% 18%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 22% 70%, #F0D49A 50%, transparent 51%),
    radial-gradient(1px 1px at 37% 30%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 51% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #F0D49A 50%, transparent 51%), radial-gradient(1.5px 1.5px at 74% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 26%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 93% 78%, #F0D49A 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 90%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 44% 50%, #fff 50%, transparent 51%);
  animation: titilar 6s ease-in-out infinite alternate;
}
@keyframes titilar { to { opacity: .45; } }
.lectura-completa { display: inline-block; margin-top: .9rem; }

/* ---------- Tu espacio (acceso a la app) ---------- */
.tu-espacio { color: #F7E8D9; background:
  radial-gradient(90% 70% at 85% 0%, rgba(91, 42, 107, .6), transparent 60%),
  radial-gradient(80% 60% at 0% 100%, rgba(200, 106, 76, .2), transparent 60%),
  linear-gradient(180deg, #0B1D3F 0%, #160F33 55%, #241238 100%); }
.tu-espacio__cabeza { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.tu-espacio h2 { color: #F7E8D9; }
.tu-espacio h2 em { color: var(--gold-light); }
.tu-espacio__cabeza > p { color: rgba(247, 232, 217, .8); font-size: 1.05rem; }
.tu-espacio__luna { margin-top: .9rem; font: italic 500 1.05rem var(--f-titulos); color: var(--gold-light); }
.tu-espacio__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.espacio-item { padding: 1.75rem 1.5rem; border-radius: 22px; background: rgba(42, 20, 58, .55); border: 1px solid rgba(217, 181, 106, .28);
  box-shadow: 0 20px 60px rgba(4, 6, 20, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.espacio-item__glifo { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; border-radius: 50%;
  font: 1.5rem "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", serif; font-variant-emoji: text; color: #FFE7B0;
  background: radial-gradient(circle at 40% 35%, #5B2A6B, #1B0E2E); box-shadow: 0 0 0 1px #D9B56A, 0 0 22px rgba(217, 181, 106, .3); }
.espacio-item h3 { color: var(--gold-light); font-family: var(--f-titulos); font-style: italic; font-size: 1.25rem; margin-bottom: .5rem; }
.espacio-item p { color: rgba(247, 232, 217, .8); font-size: .95rem; margin: 0; }
.tu-espacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.5rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .nav-acceso { display: none; }
  .solo-movil { display: inline; color: var(--gold-light) !important; }
  .tu-espacio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 790px) {
  .main-nav { background: #0E1030 !important; box-shadow: 0 16px 30px rgba(4, 6, 20, .5) !important; z-index: 60; }
  .main-nav.open { opacity: 1 !important; }
  .main-nav a { border-bottom-color: rgba(217, 181, 106, .18) !important; }
  .solo-movil { display: block; }
  .nav-registro { font-weight: 700; }
}
@media (max-width: 540px) {
  .tu-espacio__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tarot-section::before, .newsletter::before, .tu-espacio::before { animation: none; }
}