/* ==========================================================================
   THAYER TAROT MANDALA • PORTADA DE LUJO (portada.css v3.0)
   Diseño de Alta Estética Ceremonial, Mística y Geometría Sagrada
   ========================================================================== */

:root {
  --bg-deep: #05050a;
  --bg-space: radial-gradient(circle at 50% 32%, #181630 0%, #0c0b18 45%, #05050a 100%);
  --gold: #d4af37;
  --gold-light: #fbecc2;
  --gold-vivid: #eac56a;
  --gold-dark: #82631a;
  --gold-glow: rgba(212, 175, 55, 0.38);
  --gold-glow-intense: rgba(234, 197, 106, 0.75);
  --border-gold: rgba(212, 175, 55, 0.32);
  --border-gold-fine: rgba(212, 175, 55, 0.16);
  
  --text-main: #f3effe;
  --text-muted: #a49fc0;
  --text-gold: #edd18a;
  
  --font-title: "Cinzel", serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Montserrat", system-ui, -apple-system, sans-serif;
  
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body.portada-clean {
  font-family: var(--font-sans);
  color: var(--text-main);
  background: var(--bg-space);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 100vh;
}

/* ==========================================================================
   Atmósfera Estelar & Nebulosas
   ========================================================================== */
.stars-canvas-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

#starsCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ambient-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

.glow-top-center {
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 850px;
  height: 550px;
  background: radial-gradient(circle, rgba(142, 68, 173, 0.45) 0%, rgba(212, 175, 55, 0.22) 50%, transparent 80%);
}

.glow-bottom-left {
  bottom: -100px;
  left: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, rgba(30, 70, 150, 0.18) 60%, transparent 80%);
}

.glow-bottom-right {
  bottom: -100px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(155, 89, 182, 0.25) 0%, rgba(212, 175, 55, 0.16) 60%, transparent 80%);
}

/* ==========================================================================
   Header de Lujo
   ========================================================================== */
.clean-header {
  width: 100%;
  max-width: 1200px;
  padding: 1.4rem 2.2rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
}

.header-seal {
  color: var(--gold-light);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 8px var(--gold));
  opacity: 0.85;
}

.audio-pill-btn {
  background: rgba(22, 20, 36, 0.65);
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  border-radius: 40px;
  padding: 0.45rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition);
}

.audio-pill-btn:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold-vivid);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--gold-glow);
}

.audio-lbl {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cf-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.15rem;
  border-radius: 40px;
  background: rgba(5, 206, 120, 0.12);
  border: 1px solid rgba(5, 206, 120, 0.45);
  color: #3bf19a;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition);
}

.cf-header-pill:hover {
  background: rgba(5, 206, 120, 0.25);
  border-color: #05ce78;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(5, 206, 120, 0.35);
  color: #ffffff;
}

.cf-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #05ce78;
  box-shadow: 0 0 8px #05ce78;
  animation: pulseKickstarter 2s infinite ease-in-out;
}

@keyframes pulseKickstarter {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px #05ce78; }
  50% { opacity: 0.4; transform: scale(0.8); box-shadow: 0 0 2px #05ce78; }
}

/* ==========================================================================
   Main Cover
   ========================================================================== */
.portal-main-cover {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1000px;
  margin: auto 0;
  padding: 0.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cover-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ==========================================================================
   Título Sagrado & Adornos
   ========================================================================== */
.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.2rem;
}

.sacred-sparkle-top {
  color: var(--gold-light);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 8px var(--gold));
  animation: pulseSparkle 4s ease-in-out infinite;
}

@keyframes pulseSparkle {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 14px var(--gold-vivid)); }
}

.hero-title-pure {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.18;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.hero-title-pure .gold-text {
  background: linear-gradient(135deg, #ffffff 0%, #fbeec5 28%, #e3c069 60%, #c49b3c 85%, #926a1b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 25px rgba(212, 175, 55, 0.42));
}

.sacred-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 220px;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}

.divider-symbol {
  color: var(--gold);
  font-size: 0.75rem;
  filter: drop-shadow(0 0 4px var(--gold));
}

/* ==========================================================================
   Mandala Stage 3D & Anillos Celestiales
   ========================================================================== */
.hero-stage {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.mandala-altar-glow {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.36) 0%, rgba(142, 68, 173, 0.22) 50%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  animation: pulseGlow 7s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50% { opacity: 0.95; transform: scale(1.08); }
}

/* Anillo Exterior Giratorio (Horario) */
.celestial-orbit-ring.outer-ring {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.45);
  pointer-events: none;
  animation: rotateOuter 110s linear infinite;
}

.celestial-orbit-ring.outer-ring::before,
.celestial-orbit-ring.outer-ring::after {
  content: "✦";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold-light);
  font-size: 0.82rem;
  filter: drop-shadow(0 0 8px var(--gold));
}
.celestial-orbit-ring.outer-ring::before { top: -8px; }
.celestial-orbit-ring.outer-ring::after { bottom: -8px; }

/* Anillo Interior Giratorio (Antihorario) */
.celestial-orbit-ring.inner-ring {
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  border: 1px dotted rgba(212, 175, 55, 0.28);
  pointer-events: none;
  animation: rotateInner 75s linear infinite;
}

@keyframes rotateOuter {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateInner {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Card Wrapper con levitación sutil y tilt */
.mandala-card-wrapper {
  position: relative;
  width: 265px;
  height: 265px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.88));
  animation: levitateFloat 6s ease-in-out infinite;
}

@keyframes levitateFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

.mandala-card-wrapper:hover {
  filter: drop-shadow(0 25px 50px rgba(212, 175, 55, 0.55));
}

.mandala-card-frame {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 4px solid #dfbb60;
  box-shadow: 
    0 0 35px var(--gold-glow),
    inset 0 0 25px rgba(0, 0, 0, 0.8),
    0 0 0 2px rgba(255, 255, 255, 0.2);
  background: #100f1c;
}

.mandala-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  transition: transform 0.6s ease;
}

.mandala-card-wrapper:hover .mandala-card-frame img {
  transform: scale(1.05) rotate(4deg);
}

/* Reflejo de luz y barrido */
.mandala-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, transparent 60%);
  pointer-events: none;
}

.mandala-shimmer-sweep {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 55%
  );
  border-radius: 50%;
  pointer-events: none;
  animation: sweepGleam 8s ease-in-out infinite;
}

@keyframes sweepGleam {
  0% { transform: translate(-100%, -100%) rotate(45deg); }
  25%, 100% { transform: translate(100%, 100%) rotate(45deg); }
}

/* ==========================================================================
   Tarjeta de Crowdfunding / Kickstarter
   ========================================================================== */
.crowdfunding-banner {
  width: 100%;
  max-width: 620px;
  margin: 1.6rem auto 1.8rem;
  background: linear-gradient(145deg, rgba(28, 22, 54, 0.72) 0%, rgba(14, 12, 26, 0.88) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 24px;
  padding: 1.7rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(212, 175, 55, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: var(--transition);
}

.crowdfunding-banner:hover {
  border-color: var(--gold-vivid);
  box-shadow: 
    0 18px 48px rgba(0, 0, 0, 0.75),
    0 0 38px rgba(212, 175, 55, 0.22);
}

.cf-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.95rem;
  border-radius: 30px;
  background: rgba(5, 206, 120, 0.12);
  border: 1px solid rgba(5, 206, 120, 0.45);
  color: #3bf19a;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.cf-badge-icon {
  color: var(--gold-light);
  font-size: 0.8rem;
}

.cf-headline {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.06em;
  margin-bottom: 0.7rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.cf-pitch {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.6;
  color: #d6d0ea;
  max-width: 500px;
  margin: 0 auto 1.35rem;
}

.cf-pitch strong {
  color: var(--gold-vivid);
  font-weight: 600;
}

.cf-kickstarter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.9rem 2.1rem;
  border-radius: 40px;
  background: linear-gradient(135deg, #05ce78 0%, #02945d 100%);
  color: #031e13;
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid #4df5a8;
  box-shadow: 
    0 8px 24px rgba(5, 206, 120, 0.38),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: var(--transition);
}

.cf-kickstarter-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 
    0 12px 32px rgba(5, 206, 120, 0.55),
    0 0 20px rgba(5, 206, 120, 0.35);
  color: #000000;
}

.cf-btn-arrow {
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.cf-kickstarter-btn:hover .cf-btn-arrow {
  transform: translate(2px, -2px);
}

.cta-invitation-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  color: var(--gold-light);
  letter-spacing: 0.04em;
  margin-bottom: 0.95rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Botón Principal de Llamada a la Acción (CTA)
   ========================================================================== */
.cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main-cta-btn {
  position: relative;
  background: linear-gradient(135deg, #fdf3d4 0%, #e6c469 32%, #c99f46 68%, #976f21 100%);
  color: #0b0914;
  padding: 1.3rem 3rem;
  border-radius: 60px;
  font-family: var(--font-title);
  font-size: clamp(0.98rem, 1.8vw, 1.16rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  box-shadow: 
    0 10px 35px rgba(223, 187, 96, 0.45),
    0 0 20px rgba(223, 187, 96, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
  transition: var(--transition);
  overflow: hidden;
  border: 1px solid #fff2cc;
}

.main-cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: 0.6s;
}

.main-cta-btn:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 
    0 18px 50px rgba(223, 187, 96, 0.7),
    0 0 30px rgba(223, 187, 96, 0.5),
    inset 0 1px 1px #ffffff;
  color: #000000;
}

.main-cta-btn:hover::before {
  left: 100%;
}

.cta-sparkle {
  font-size: 1.2rem;
  color: #4b3605;
  animation: spinSparkle 6s linear infinite;
}

@keyframes spinSparkle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Footer Limpio y Elegante
   ========================================================================== */
.clean-footer {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 1.5rem 1rem 1.8rem;
  text-align: center;
}

.clean-footer .footer-copyright {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.clean-footer .footer-copyright a {
  color: var(--gold-light);
  text-decoration: none;
  transition: var(--transition);
}

.clean-footer .footer-copyright a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--gold);
}

/* ==========================================================================
   Responsividad Móvil
   ========================================================================== */
@media (max-width: 768px) {
  .clean-header {
    padding: 0.8rem 1rem 0;
  }
  
  .cf-header-pill {
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    gap: 0.35rem;
  }

  .cf-header-pill .cf-pill-text {
    font-size: 0.7rem;
  }
  
  .audio-lbl {
    display: none;
  }
  
  .audio-pill-btn {
    padding: 0.45rem 0.65rem;
    border-radius: 50%;
  }

  .title-container {
    margin-bottom: 1.5rem;
  }

  .hero-title-pure {
    font-size: 1.85rem;
    letter-spacing: 0.11em;
  }
  
  .sacred-divider {
    width: 160px;
  }
  
  .hero-stage {
    width: 230px;
    height: 230px;
    margin-bottom: 1.6rem;
  }
  
  .mandala-card-wrapper {
    width: 190px;
    height: 190px;
  }
  
  .celestial-orbit-ring.outer-ring {
    width: 255px;
    height: 255px;
  }
  
  .celestial-orbit-ring.inner-ring {
    width: 220px;
    height: 220px;
  }

  /* Crowdfunding Responsive */
  .crowdfunding-banner {
    padding: 1.3rem 1.1rem;
    margin: 1.2rem auto 1.5rem;
    border-radius: 18px;
  }

  .cf-headline {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .cf-pitch {
    font-size: 0.88rem;
    margin-bottom: 1.1rem;
    line-height: 1.5;
  }

  .cf-kickstarter-btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.84rem;
    width: 100%;
  }

  .cta-invitation-quote {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    padding: 0 0.5rem;
  }
  
  .main-cta-btn {
    padding: 1.1rem 1.9rem;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    gap: 0.7rem;
    width: 100%;
    max-width: 320px;
  }
}