:root {
  --bg: #0a0f1f;
  --card-bg: #131a2c;
  --accent: #ffd166;
  --text: #e8eef8;
}
* { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
main { width: 100%; max-width: 800px; padding: 20px; text-align: center; }
h1,h2 { margin-bottom: 16px; }
p { margin-bottom: 20px; }
.btn {
  padding: 12px 20px; border: none; border-radius: 8px;
  background: var(--accent); color: #000; font-weight: bold; cursor: pointer;
}
.btn:hover { opacity: 0.9; }
.screen { display: none; }
.screen.active { display: block; }
.hidden { display: none; }
.card-container {
  display: flex; justify-content: center; gap: 20px; margin: 20px 0;
}

.qr {
  max-width: 220px; border: 4px solid var(--accent); border-radius: 12px;
  box-shadow: 0 0 20px rgba(255,209,102,0.6); margin-top: 20px;
}

.tarot-card {
  width: 150px;
  height: 220px;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.tarot-card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.card-front img, .card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-back {
  transform: rotateY(180deg);
}
/* --- Ojo Místico --- */
.mystic-eye {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 40px;
}

/* Triángulo detrás */
.triangle {
  position: absolute;
  top: 32%; 
  left: 50%;
  width: 0; 
  height: 0;
  border-left: 140px solid transparent;
  border-right: 140px solid transparent;
  border-top: 240px solid rgba(255, 209, 102, 0.15); /* luz dorada translúcida */
  transform: translate(-50%, -50%) rotate(180deg);
  
  /* ✨ Aura dorada */
  filter: drop-shadow(0 0 20px rgba(255, 209, 102, 0.6))
          drop-shadow(0 0 40px rgba(255, 209, 102, 0.3));

  z-index: 0;
  
  /* Animación de pulso */
  animation: triangleGlow 3s ease-in-out infinite;
}

@keyframes triangleGlow {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(255, 209, 102, 0.6))
            drop-shadow(0 0 35px rgba(255, 209, 102, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(255, 209, 102, 0.9))
            drop-shadow(0 0 55px rgba(255, 209, 102, 0.6));
  }
}



/* Globo ocular */
.eye {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #fdfdfd 0%, #e5e5e5 100%);
  border: 4px solid #222;
  box-shadow: 0 0 25px rgba(0,0,0,0.4), inset 0 0 40px rgba(0,0,0,0.15);
  overflow: hidden;
  z-index: 1;
}
.eyelid {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: blink 3s infinite;
}
/* animación del parpadeo */
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
/* Iris */
.iris {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #4facfe, #04364a);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px; /* la mitad del ancho */
  margin-top: -40px;  /* la mitad del alto */
}


/* Pupila */
.pupil {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: black;
  box-shadow: 0 0 15px rgba(0,0,0,0.8);
}

/* Halo alrededor */
.halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 280px; height: 280px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,209,102,0.25) 0%, transparent 70%);
  z-index: -1;
  animation: pulseHalo 4s infinite ease-in-out;
}

@keyframes pulseHalo {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Partículas flotantes */
.particles {
  position: absolute;
  top: 32%; left: 50%;
  width: 280px;   /* base del triángulo */
  height: 240px;  /* altura del triángulo */
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.8) 2px, transparent 2px);
  background-size: 40px 40px;
  animation: moveParticles 20s linear infinite;
  z-index: -2;
  opacity: 0.3;

  /* 👇 recorte en forma de triángulo */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}


@keyframes moveParticles {
  from { background-position: 0 0; }
  to { background-position: 200px 200px; }
}