/* ==========================================================
   CENTRAL ESOTÉRICA — Style Sheet v2
   ui-ux-pro-max: Glassmorphism | Gold accent | Premium
   ========================================================== */

/* --- TOKENS --- */
:root {
  --purple-deep: #1a0a2e;
  --purple-dark: #2d0f4e;
  --purple: #6B2FA0;
  --purple-hover: #7d3ab8;
  --purple-light: #9b59b6;
  --purple-glow: rgba(107, 47, 160, 0.5);
  --gold: #D4AF37;
  --gold-light: #F5D76E;
  --gold-glow: rgba(212, 175, 55, 0.4);
  --blue-deep: #0d0221;
  --blue-dark: #150534;
  --dark-bg: #0a0018;
  --dark-card: rgba(26, 10, 46, 0.9);
  --glass-bg: rgba(26, 10, 46, 0.55);
  --glass-border: rgba(107, 47, 160, 0.2);
  --glass-border-hover: rgba(107, 47, 160, 0.5);
  --glass-border-gold: rgba(212, 175, 55, 0.3);
  --text-primary: #e8dff5;
  --text-secondary: #ddd6f0;
  --text-muted: #c4b8dc;
  --success: #22c55e;
  --error: #ef4444;
  --warning: #f59e0b;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-cinzel: 'Cinzel', Georgia, serif;
  --sp-2xs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 100px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
  --shadow-glow-purple: 0 0 30px var(--purple-glow);
  --shadow-glow-gold: 0 0 25px var(--gold-glow);
  --transition-f: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition: 300ms cubic-bezier(0.4,0,0.2,1);
  --transition-s: 500ms cubic-bezier(0.4,0,0.2,1);
  --focus-ring: 0 0 0 3px rgba(107,47,160,0.6);
  --z-base: 1;
  --z-header: 1000;
  --z-overlay: 500;
  --z-modal: 600;
  --z-cursor: 9999;
}

/* --- RESET --- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);background:var(--dark-bg);color:var(--text-primary);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
::selection{background:var(--purple);color:#fff}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
input:focus,select:focus,textarea:focus{outline:none}

/* --- SKIP LINK --- */
.skip-link{
  position:absolute;top:-100px;left:var(--sp-md);z-index:var(--z-cursor);
  padding:var(--sp-xs) var(--sp-md);background:var(--gold);color:#000;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);font-size:14px;font-weight:600
}
.skip-link:focus{top:0}

/* --- SCROLLBAR --- */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--blue-deep)}
::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--purple-light)}

/* --- PARTICLES --- */
#particles-canvas{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none
}

/* --- CURSOR GLOW --- */
.cursor-glow{
  position:fixed;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,var(--purple-glow) 0%,transparent 70%);
  pointer-events:none;z-index:var(--z-cursor);
  transform:translate(-50%,-50%);opacity:0;transition:opacity var(--transition)
}
.cursor-glow.active{opacity:1}

/* --- CONTAINER --- */
.container{max-width:1200px;margin:0 auto;padding:0 var(--sp-lg)}

/* --- HEADER --- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  background:rgba(10,0,24,0.8);backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--glass-border);transition:var(--transition)
}
.header.scrolled{background:rgba(10,0,24,0.96)}
.header-container{
  max-width:1200px;margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;
  padding:0 var(--sp-lg);height:64px
}
.logo{display:flex;align-items:center;gap:var(--sp-sm);text-decoration:none}
.logo-icon{
  font-size:22px;color:var(--gold);
  text-shadow:0 0 15px var(--gold-glow);
  animation:logoSpin 10s linear infinite
}
@keyframes logoSpin{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)}
}
.logo-text{
  font-family:var(--font-cinzel);font-size:18px;font-weight:600;letter-spacing:1px
}
.logo-text em{font-style:normal;color:var(--gold)}

/* --- NAV --- */
.nav-list{display:flex;gap:var(--sp-2xs)}
.nav-link{
  padding:var(--sp-xs) var(--sp-sm);border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;color:var(--text-secondary);
  transition:var(--transition);letter-spacing:0.3px;
  min-height:44px;display:flex;align-items:center
}
.nav-link:hover,.nav-link:focus-visible,.nav-link.active{color:var(--gold);background:rgba(212,175,55,0.08)}
.nav-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* --- MENU TOGGLE --- */
.menu-toggle{
  display:none;flex-direction:column;gap:5px;padding:var(--sp-2xs);
  width:44px;height:44px;align-items:center;justify-content:center
}
.menu-toggle span{
  display:block;width:24px;height:2px;
  background:var(--text-primary);border-radius:2px;transition:var(--transition)
}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg)translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)}
.menu-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* --- HERO --- */
.hero{
  position:relative;z-index:var(--z-base);
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--sp-4xl) var(--sp-lg) 60px;
  background:linear-gradient(180deg,var(--blue-deep) 0%,var(--purple-deep) 50%,var(--dark-bg) 100%)
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,var(--purple-glow) 0%,transparent 60%);
  pointer-events:none
}
.hero-content{position:relative;z-index:2;max-width:800px}
.hero-title{
  font-family:var(--font-cinzel);font-size:clamp(2rem,6vw,4rem);
  font-weight:700;letter-spacing:4px;margin-bottom:var(--sp-sm);
  text-shadow:0 0 40px var(--purple-glow)
}
.hero-title em{
  font-style:normal;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.hero-subtitle{
  font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.5rem);
  color:var(--gold);font-style:italic;margin-bottom:var(--sp-md);
  text-shadow:0 0 20px var(--gold-glow)
}
.hero-desc{
  font-size:clamp(0.9rem,1.2vw,1.1rem);color:var(--text-secondary);
  max-width:600px;margin:0 auto var(--sp-xl);line-height:1.8
}
.hero-actions{
  display:flex;gap:var(--sp-md);justify-content:center;
  flex-wrap:wrap;margin-bottom:var(--sp-2xl)
}
.hero-badges{
  display:flex;gap:var(--sp-sm);flex-wrap:wrap;justify-content:center;
  font-size:12px;color:var(--text-muted)
}
.hero-badges span{
  padding:6px var(--sp-md);border:1px solid var(--glass-border);
  border-radius:var(--radius-full);background:var(--glass-bg);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.hero-scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  text-align:center;color:var(--text-muted);font-size:12px;animation:bounce 2s infinite
}
.scroll-arrow{font-size:20px;margin-top:var(--sp-2xs)}
@keyframes bounce{
  0%,100%{transform:translateX(-50%)translateY(0)}
  50%{transform:translateX(-50%)translateY(8px)}
}

/* --- BUTTONS --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-xs);padding:14px var(--sp-xl);border-radius:var(--radius-full);
  font-size:15px;font-weight:600;transition:var(--transition);
  letter-spacing:0.5px;min-height:48px;text-decoration:none
}
.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--purple-light));
  color:#fff;box-shadow:0 4px 20px var(--purple-glow)
}
.btn-primary:hover,.btn-primary:focus-visible{
  transform:translateY(-2px);box-shadow:0 8px 30px var(--purple-glow)
}
.btn-primary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-outline{
  border:1px solid var(--glass-border);color:var(--text-primary);
  background:var(--glass-bg);backdrop-filter:blur(10px)
}
.btn-outline:hover,.btn-outline:focus-visible{
  border-color:var(--gold);color:var(--gold);box-shadow:0 0 20px var(--gold-glow)
}
.btn-outline:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-small{
  padding:10px var(--sp-lg);font-size:13px;min-height:44px;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--purple),var(--purple-light));
  color:#fff;transition:var(--transition)
}
.btn-small:hover,.btn-small:focus-visible{box-shadow:var(--shadow-glow-purple)}
.btn-small:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-close{
  width:44px;height:44px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:20px;
  color:var(--text-muted);transition:var(--transition)
}
.btn-close:hover,.btn-close:focus-visible{color:var(--text-primary);background:rgba(255,255,255,0.05)}
.btn-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* --- SECTIONS --- */
.section{
  position:relative;z-index:var(--z-base);
  padding:var(--sp-4xl) 0;border-top:1px solid var(--glass-border)
}
.section-last{border-bottom:1px solid var(--glass-border)}
.section-header{text-align:center;margin-bottom:var(--sp-3xl)}
.section-tag{
  display:inline-block;font-family:var(--font-cinzel);
  font-size:12px;letter-spacing:3px;color:var(--gold);
  margin-bottom:var(--sp-sm);text-shadow:0 0 10px var(--gold-glow)
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,3rem);margin-bottom:var(--sp-sm)
}
.section-desc{
  color:var(--text-secondary);font-size:clamp(0.9rem,1.1vw,1.1rem);
  max-width:500px;margin:0 auto
}
.section-intro{
  color:#fff;font-size:clamp(0.85rem,0.95vw,0.95rem);
  max-width:580px;margin:var(--sp-md) auto 0;line-height:1.6;
  border-left:2px solid var(--gold);padding-left:var(--sp-md)
}

/* --- TAROT GRID --- */
.tarot-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--sp-lg);max-width:900px;margin:0 auto
}
.tarot-card{
  padding:var(--sp-2xl) var(--sp-lg);text-align:center;
  background:var(--glass-bg);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);
  transition:var(--transition);cursor:pointer;
  transform-style:preserve-3d;perspective:800px;min-height:200px
}
.tarot-card:hover,.tarot-card:focus-visible{
  transform:translateY(-8px)rotateY(5deg);
  border-color:var(--glass-border-hover);
  box-shadow:0 20px 60px rgba(107,47,160,0.25)
}
.tarot-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tarot-card:active{transform:translateY(-4px)rotateY(3deg)}
.tarot-icon{
  font-size:36px;display:block;margin-bottom:var(--sp-md);
  color:var(--gold);transition:var(--transition)
}
.tarot-card:hover .tarot-icon{text-shadow:0 0 20px var(--gold-glow)}
.tarot-card .card-heading{
  font-family:var(--font-display);font-size:18px;margin-bottom:var(--sp-xs);display:block
}
.tarot-card .card-desc{font-size:13px;color:var(--text-muted);display:block}

/* --- READING RESULT --- */
.reading-result{
  max-width:700px;margin:var(--sp-2xl) auto;
  background:var(--dark-card);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:var(--sp-xl);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  animation:fadeUp .4s ease
}
.reading-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--sp-lg);padding-bottom:var(--sp-md);
  border-bottom:1px solid var(--glass-border)
}
.reading-header h3{font-family:var(--font-display);font-size:22px}
.reading-body{line-height:1.8;color:var(--text-secondary)}
.reading-body .card-display{text-align:center;margin-bottom:var(--sp-lg)}
.reading-body .card-name{
  font-family:var(--font-display);font-size:24px;
  color:var(--gold);margin:var(--sp-xs) 0
}
.reading-body .card-symbol{font-size:64px;display:block;margin-bottom:var(--sp-xs)}
.reading-body .card-type{
  font-size:12px;text-transform:uppercase;letter-spacing:2px;
  color:var(--text-muted);margin-bottom:var(--sp-md)
}
.reading-body .card-section{margin-bottom:var(--sp-md)}
.reading-body .card-section h4{
  font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--gold);margin-bottom:var(--sp-2xs)
}

/* --- CIGANO --- */
.cigano-grid{max-width:400px;margin:0 auto;text-align:center}
.cigano-card{
  min-height:320px;padding:var(--sp-2xl) var(--sp-lg);
  background:var(--glass-bg);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin-bottom:var(--sp-lg);transition:var(--transition)
}
.cigano-card:hover{border-color:var(--glass-border-hover)}
.cigano-icon{font-size:48px;margin-bottom:var(--sp-md);opacity:0.5}
.cigano-number{
  font-family:var(--font-cinzel);font-size:48px;color:var(--gold);
  text-shadow:0 0 20px var(--gold-glow)
}
.cigano-card h3{
  font-family:var(--font-display);font-size:24px;margin:var(--sp-sm) 0 var(--sp-xs);
  color:var(--gold)
}
.cigano-advice{
  margin-top:var(--sp-sm);font-style:italic;color:var(--purple-light);font-size:14px
}

/* --- ASTROLOGIA --- */
.sign-selector{margin-bottom:var(--sp-xl)}
.sign-selector label{
  display:block;font-size:14px;color:var(--text-muted);
  margin-bottom:var(--sp-sm);text-transform:uppercase;letter-spacing:1px
}
.sign-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:var(--sp-sm);max-width:600px;margin:0 auto
}
.sign-btn{
  padding:var(--sp-sm) var(--sp-xs);text-align:center;
  border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  background:var(--glass-bg);backdrop-filter:blur(8px);
  cursor:pointer;transition:var(--transition);font-size:13px;min-height:64px
}
.sign-btn:hover{border-color:var(--glass-border-hover);background:rgba(107,47,160,0.1)}
.sign-btn.active{
  border-color:var(--glass-border-gold);background:rgba(212,175,55,0.08);
  color:var(--gold);box-shadow:0 0 20px var(--gold-glow)
}
.sign-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sign-btn .sign-icon{font-size:24px;display:block;margin-bottom:var(--sp-2xs)}

/* --- ASTRO TABS --- */
.astro-tabs{
  display:flex;gap:var(--sp-xs);flex-wrap:wrap;justify-content:center;
  margin-bottom:var(--sp-lg)
}
.astro-tab{
  padding:10px var(--sp-lg);border-radius:var(--radius-full);
  font-size:13px;font-weight:500;min-height:44px;
  border:1px solid var(--glass-border);background:var(--glass-bg);
  backdrop-filter:blur(8px);transition:var(--transition);color:var(--text-secondary)
}
.astro-tab:hover{border-color:var(--glass-border-hover)}
.astro-tab.active{
  background:linear-gradient(135deg,var(--purple),var(--purple-light));
  border-color:transparent;color:#fff
}
.astro-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.astro-content{
  max-width:600px;margin:0 auto;padding:var(--sp-xl);
  background:var(--glass-bg);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);
  line-height:1.8;color:var(--text-secondary)
}
.astro-content h3{font-family:var(--font-display);font-size:22px;margin-bottom:var(--sp-sm);color:var(--gold)}
.astro-content .astro-highlight{
  font-size:14px;color:var(--text-muted);margin-bottom:var(--sp-xs)
}

/* --- FORMS --- */
.astral-form,.numerology-form{
  max-width:500px;margin:0 auto;padding:var(--sp-xl);
  background:var(--glass-bg);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--radius-md)
}
.form-group{margin-bottom:var(--sp-lg)}
.form-group label{
  display:block;font-size:13px;color:var(--text-muted);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:1px
}
.form-group input{
  width:100%;padding:12px var(--sp-md);min-height:48px;
  background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);color:var(--text-primary);
  font-size:16px;transition:var(--transition)
}
.form-group input:focus{
  border-color:var(--purple);box-shadow:0 0 20px var(--purple-glow)
}
.form-group input::placeholder{color:var(--text-muted)}
.form-group .error-msg{
  font-size:12px;color:var(--error);margin-top:var(--sp-2xs);display:none
}
.form-group input:invalid:not(:placeholder-shown)~.error-msg{display:block}
.form-group input:invalid:not(:placeholder-shown){border-color:var(--error)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md)}

/* --- MAPA ASTRAL RESULT --- */
.astral-result{
  max-width:700px;margin:var(--sp-2xl) auto;padding:var(--sp-xl);
  background:var(--dark-card);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);animation:fadeUp .4s ease
}
.astral-result h3{
  font-family:var(--font-display);font-size:24px;margin-bottom:var(--sp-lg);
  text-align:center;color:var(--gold)
}
.astral-grid{display:grid;gap:var(--sp-md)}
.astral-item{
  padding:var(--sp-md);border-radius:var(--radius-sm);
  border:1px solid var(--glass-border);display:flex;align-items:flex-start;gap:var(--sp-sm)
}
.astral-item .item-icon{font-size:28px;flex-shrink:0}
.astral-item .item-label{
  font-size:11px;text-transform:uppercase;letter-spacing:1px;
  color:var(--text-muted);margin-bottom:2px
}
.astral-item .item-value{
  font-family:var(--font-display);color:var(--gold);font-size:18px
}
.astral-item .item-desc{font-size:13px;color:var(--text-secondary);margin-top:var(--sp-2xs)}

/* --- NUMEROLOGIA --- */
.numerology-result{
  max-width:700px;margin:var(--sp-2xl) auto;padding:var(--sp-xl);
  background:var(--dark-card);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);animation:fadeUp .4s ease
}
.num-grid{display:grid;gap:var(--sp-md)}
.num-item{
  padding:var(--sp-lg);border-radius:var(--radius-sm);
  border:1px solid var(--glass-border);text-align:center
}
.num-number{
  font-family:var(--font-cinzel);font-size:42px;color:var(--gold);
  text-shadow:0 0 20px var(--gold-glow)
}
.num-label{
  font-size:13px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-2xs)
}
.num-desc{font-size:14px;color:var(--text-secondary);margin-top:var(--sp-xs)}

/* --- ORÁCULOS --- */
.oracle-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--sp-lg);max-width:1000px;margin:0 auto
}
.oracle-item{
  padding:var(--sp-xl) var(--sp-lg);text-align:center;
  background:var(--glass-bg);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);
  transition:var(--transition)
}
.oracle-item:hover{border-color:var(--glass-border-hover);transform:translateY(-4px)}
.oracle-icon{
  font-size:36px;display:block;margin-bottom:var(--sp-sm);
  color:var(--gold);transition:var(--transition)
}
.oracle-item:hover .oracle-icon{text-shadow:0 0 20px var(--gold-glow)}
.oracle-item h3{font-family:var(--font-display);font-size:17px;margin-bottom:var(--sp-xs)}
.oracle-item>p{font-size:13px;color:var(--text-muted);margin-bottom:var(--sp-md)}
.oracle-text{
  margin-top:var(--sp-md);padding:var(--sp-md);
  border-radius:var(--radius-sm);background:rgba(0,0,0,0.3);
  font-size:14px;color:var(--gold);line-height:1.6;display:none;animation:fadeUp .3s ease
}
.oracle-text.show{display:block}

/* --- I-CHING --- */
.iching-layout{max-width:650px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--sp-lg)}
.iching-display{width:100%;text-align:center}
.iching-placeholder{text-align:center;padding:var(--sp-2xl);color:var(--text-muted)}
.iching-placeholder .iching-trigrama{font-size:48px;display:block;margin-bottom:var(--sp-md);opacity:0.4}
.iching-result{display:none;text-align:center;animation:fadeUp .5s ease}
.iching-number{font-family:var(--font-cinzel);font-size:14px;color:var(--gold);letter-spacing:2px}
.iching-result h3{font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.8rem);margin:var(--sp-sm) 0}
.iching-trigrama{font-size:48px;display:block;margin:var(--sp-sm) 0;color:var(--gold);text-shadow:0 0 20px var(--gold-glow)}
.iching-chines{font-size:18px;color:var(--text-muted);margin-bottom:var(--sp-lg);letter-spacing:4px}
.iching-sections{display:grid;gap:var(--sp-md);text-align:left;max-width:550px;margin:0 auto}
.iching-section{padding:var(--sp-md);background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-sm)}
.iching-section h4{font-size:14px;color:var(--gold);margin-bottom:var(--sp-2xs)}
.iching-section p{font-size:14px;color:var(--text-secondary);line-height:1.5}

/* --- QUIZ --- */
.quiz-container{max-width:550px;margin:0 auto;text-align:center}
.quiz-start{padding:var(--sp-3xl);text-align:center}
.quiz-icon{font-size:48px;display:block;margin-bottom:var(--sp-lg);color:var(--gold)}
.quiz-start p{font-size:18px;color:var(--text-primary);margin-bottom:var(--sp-xl)}
.quiz-progress{display:flex;align-items:center;gap:var(--sp-md);margin-bottom:var(--sp-xl)}
.quiz-progress-bar{flex:1;height:4px;background:var(--glass-border);border-radius:2px;overflow:hidden}
.quiz-progress-bar::before{content:'';display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .5s ease;border-radius:2px}
.quiz-progress span{font-size:13px;color:var(--text-muted);min-width:32px;text-align:right}
.quiz-question{font-family:var(--font-display);font-size:clamp(1.1rem,1.5vw,1.3rem);margin-bottom:var(--sp-lg);min-height:48px}
.quiz-options{display:grid;gap:var(--sp-sm)}
.quiz-option{padding:var(--sp-md) var(--sp-lg);text-align:left;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);font-size:15px;color:var(--text-primary);min-height:48px}
.quiz-option:hover,.quiz-option:focus-visible{border-color:var(--gold);transform:translateX(4px)}
.quiz-option:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.quiz-result{padding:var(--sp-2xl);text-align:center;animation:fadeUp .5s ease}
.quiz-result-icon{font-size:48px;display:block;margin-bottom:var(--sp-lg)}
.quiz-result h3{font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.8rem);margin-bottom:var(--sp-sm)}
.quiz-result p{font-size:16px;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--sp-xl);max-width:450px;margin-left:auto;margin-right:auto}

/* --- VIRAL --- */
.viral-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-lg);max-width:1000px;margin:0 auto
}
.viral-card{
  padding:var(--sp-xl) var(--sp-lg);text-align:center;
  background:var(--glass-bg);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);
  transition:var(--transition);transform-style:preserve-3d;perspective:800px
}
.viral-card:hover,.viral-card:focus-within{
  transform:translateY(-6px)rotateY(3deg);
  border-color:var(--glass-border-gold);box-shadow:0 20px 60px rgba(212,175,55,0.1)
}
.viral-icon{
  font-size:36px;display:block;margin-bottom:var(--sp-sm);
  color:var(--gold);transition:var(--transition)
}
.viral-card:hover .viral-icon{text-shadow:0 0 20px var(--gold-glow)}
.viral-card h3{font-family:var(--font-display);font-size:16px;margin-bottom:var(--sp-sm)}
.viral-result{
  margin-top:var(--sp-sm);font-size:14px;color:var(--gold);
  min-height:20px;display:none;animation:fadeUp .3s ease
}
.viral-result.show{display:block}

/* --- EXTRAS ACCORDION --- */
.extras-accordion{max-width:700px;margin:0 auto}
.extra-item{
  border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  margin-bottom:var(--sp-sm);overflow:hidden;
  background:var(--glass-bg);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)
}
.extra-trigger{
  width:100%;padding:var(--sp-lg) var(--sp-lg);
  display:flex;align-items:center;gap:var(--sp-sm);
  font-size:15px;font-weight:500;transition:var(--transition);
  cursor:pointer;min-height:56px;text-align:left
}
.extra-trigger:hover{background:rgba(255,255,255,0.02)}
.extra-trigger[aria-expanded="true"]{background:rgba(212,175,55,0.04)}
.extra-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.extra-icon{font-size:18px;flex-shrink:0}
.extra-arrow{
  margin-left:auto;transition:var(--transition);
  font-size:12px;color:var(--text-muted)
}
.extra-trigger[aria-expanded="true"] .extra-arrow{transform:rotate(180deg)}
.extra-content{max-height:0;overflow:hidden;transition:max-height .4s ease}
.extra-content.open{max-height:2000px}
.extra-content>div{padding:0 var(--sp-lg) var(--sp-lg);display:grid;gap:var(--sp-sm)}
.extras-grid{display:grid;gap:var(--sp-sm)}
.extras-grid .extra-card{
  padding:var(--sp-md);border-radius:var(--radius-sm);
  border:1px solid var(--glass-border);background:rgba(0,0,0,0.2)
}
.extras-grid .extra-card h4{font-size:14px;color:var(--gold);margin-bottom:var(--sp-2xs)}
.extras-grid .extra-card p{font-size:13px;color:var(--text-secondary)}

/* --- FOOTER --- */
.footer{
  position:relative;z-index:var(--z-base);
  padding:var(--sp-3xl) 0 var(--sp-xl);
  background:linear-gradient(180deg,var(--dark-bg),var(--blue-deep));
  border-top:1px solid var(--glass-border)
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:var(--sp-2xl);margin-bottom:var(--sp-2xl)
}
.footer-logo{
  font-family:var(--font-cinzel);font-size:18px;font-weight:600;letter-spacing:1px
}
.footer-logo em{font-style:normal;color:var(--gold)}
.footer-brand p{font-size:13px;color:var(--text-muted);margin-top:var(--sp-xs)}
.footer-links h4{
  font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--gold);margin-bottom:var(--sp-sm)
}
.footer-links ul li{margin-bottom:var(--sp-xs)}
.footer-links a{
  font-size:13px;color:var(--text-muted);transition:var(--transition);
  padding:4px 0;display:inline-block
}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--text-primary)}
.footer-links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.footer-disclaimer{
  text-align:center;padding:var(--sp-lg) 0;
  border-top:1px solid var(--glass-border);font-size:12px;
  color:var(--text-muted);line-height:1.6;max-width:600px;margin:0 auto
}
.footer-bottom{
  text-align:center;padding-top:var(--sp-lg);
  font-size:12px;color:var(--text-muted)
}

/* --- ANIMATIONS --- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 20px var(--purple-glow)}
  50%{box-shadow:0 0 40px var(--purple-glow),0 0 60px var(--purple-glow)}
}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* --- REDUCED MOTION --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
  .logo-icon{animation:none}
  .hero-scroll{animation:none}
  .tarot-card:hover{transform:translateY(-4px)}
  .viral-card:hover{transform:translateY(-4px)}
  .cursor-glow{display:none}
}

/* --- RESPONSIVE --- */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-xl)}
}

@media (max-width:768px){
  :root{--sp-4xl:60px;--sp-3xl:48px}
  .header-container{height:56px}
  .menu-toggle{display:flex}
  .nav{
    position:fixed;top:56px;left:0;right:0;
    background:rgba(10,0,24,0.98);backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    max-height:0;overflow:hidden;transition:max-height .4s ease
  }
  .nav.open{max-height:400px}
  .nav-list{flex-direction:column;padding:var(--sp-sm) var(--sp-lg)}
  .section{padding:var(--sp-3xl) 0}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-lg)}
  .tarot-grid{grid-template-columns:1fr 1fr;gap:var(--sp-md)}
  .tarot-card{padding:var(--sp-lg) var(--sp-md)}
  .tarot-card .tarot-icon{font-size:28px}
  .viral-grid{grid-template-columns:1fr 1fr;gap:var(--sp-md)}
  .viral-card{padding:var(--sp-lg) var(--sp-md)}
  .oracle-grid{grid-template-columns:1fr;max-width:400px}
  .iching-sections{grid-template-columns:1fr}
  .quiz-options{grid-template-columns:1fr}
}

@media (max-width:480px){
  .tarot-grid{grid-template-columns:1fr;max-width:320px}
  .viral-grid{grid-template-columns:1fr;max-width:320px;margin:0 auto}
  .sign-grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-xs)}
  .sign-btn{padding:var(--sp-xs);font-size:11px;min-height:56px}
  .sign-btn .sign-icon{font-size:18px}
  .astro-tabs{flex-direction:column;align-items:stretch}
  .astro-tab{text-align:center}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-title{font-size:1.8rem}
  .reading-result{padding:var(--sp-lg)}
}