/* ══════════════════════════════════════════════════════════
   🎬 QUIROMANCIA SUPREMA — PIXAR RENDER LAYER v9.0
   Estética de render 3D estilo Pixar/Disney:
   · Superficies "clay/candy" con brillo especular superior
   · Sombras suaves de color (ambient occlusion cálido)
   · Botones glossy 3D con profundidad física real
   · Animaciones springy con rebote elástico
   · Iluminación cinematográfica en tarjetas
   ══════════════════════════════════════════════════════════ */

:root {
    /* Curvas de animación tipo Pixar (squash & stretch) */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* Luces y sombras 3D */
    --pixar-highlight: rgba(255, 255, 255, 0.28);
    --pixar-highlight-strong: rgba(255, 255, 255, 0.45);
    --pixar-ao: rgba(20, 8, 60, 0.55);
    --pixar-shadow-soft: 0 12px 32px -8px rgba(48, 20, 120, 0.45), 0 4px 12px -4px rgba(0, 0, 0, 0.35);
    --pixar-shadow-float: 0 22px 48px -12px rgba(88, 60, 220, 0.4), 0 8px 20px -6px rgba(0, 0, 0, 0.4);
    --pixar-gold-glow: 0 10px 34px -8px rgba(240, 180, 41, 0.55);
}

[data-theme="light"] {
    --pixar-highlight: rgba(255, 255, 255, 0.85);
    --pixar-highlight-strong: rgba(255, 255, 255, 1);
    --pixar-ao: rgba(124, 106, 239, 0.18);
    --pixar-shadow-soft: 0 12px 32px -8px rgba(124, 106, 239, 0.28), 0 4px 12px -4px rgba(124, 106, 239, 0.12);
    --pixar-shadow-float: 0 22px 48px -12px rgba(124, 106, 239, 0.35), 0 8px 20px -6px rgba(124, 106, 239, 0.15);
}

/* ═══════ 🍬 BOTONES PRIMARIOS — CANDY GLOSSY 3D ═══════ */
.btn-primary,
.oracle-spread-btn.primary,
.oracle-ask-btn,
.btn-accept,
.btn-analyze,
.btn-start-reading {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 38%, rgba(0,0,0,0.10) 100%),
        linear-gradient(135deg, #8f7bff 0%, #7c5cf0 45%, #6a3fe8 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,0.35),
        inset 0 -3px 6px rgba(30, 10, 90, 0.45),
        var(--pixar-shadow-soft) !important;
    text-shadow: 0 1px 2px rgba(30, 10, 90, 0.35);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, filter 0.25s ease !important;
    overflow: hidden;
}
/* Brillo especular superior (reflejo tipo plástico/caramelo) */
.btn-primary::before,
.oracle-spread-btn.primary::before,
.oracle-ask-btn::before,
.btn-start-reading::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 8%;
    right: 8%;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--pixar-highlight-strong), transparent);
    opacity: 0.55;
    pointer-events: none;
}
.btn-primary:hover:not(:disabled),
.oracle-spread-btn.primary:hover,
.oracle-ask-btn:hover,
.btn-start-reading:hover {
    transform: translateY(-4px) scale(1.035);
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,0.4),
        inset 0 -3px 6px rgba(30, 10, 90, 0.4),
        var(--pixar-shadow-float) !important;
    filter: brightness(1.08) saturate(1.1);
}
.btn-primary:active:not(:disabled),
.oracle-spread-btn.primary:active,
.oracle-ask-btn:active {
    transform: translateY(1px) scale(0.97);
    transition-duration: 0.1s !important;
}

/* Botón dorado (analizar) — caramelo de oro */
.btn-analyze:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.08) 38%, rgba(120,70,0,0.15) 100%),
        linear-gradient(135deg, #ffd257 0%, #f0b429 50%, #e09a12 100%) !important;
    color: #3a2800 !important;
    text-shadow: 0 1px 1px rgba(255, 235, 170, 0.6);
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,0.5),
        inset 0 -3px 6px rgba(140, 85, 0, 0.4),
        var(--pixar-gold-glow) !important;
}

/* ═══════ 🧈 BOTONES SECUNDARIOS — CLAY SUAVE ═══════ */
.btn-secondary,
.oracle-spread-btn,
.timer-preset-btn,
.toggle-btn,
.guide-tab {
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 1px var(--pixar-highlight),
        inset 0 -2px 4px rgba(0, 0, 0, 0.18),
        0 4px 14px -4px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, border-color 0.25s ease;
}
.btn-secondary:hover,
.oracle-spread-btn:hover,
.timer-preset-btn:hover {
    transform: translateY(-3px) scale(1.02);
}
.btn-secondary:active,
.oracle-spread-btn:active,
.timer-preset-btn:active {
    transform: translateY(1px) scale(0.97);
}

/* ═══════ 🎬 TARJETAS — SUPERFICIE CLAY CON LUZ CINEMATOGRÁFICA ═══════ */
.cosmos-card,
.about-card,
.tradition-detail-card,
.stat-card,
.line-guide-card,
.mount-guide-card,
.result-card,
.daily-card,
.oracle-answer-card,
.achievement-badge,
.soundscape-preset,
.synastry-person-box,
.hand-demo-card,
.reading-form,
.guide-card {
    border-radius: 26px !important;
    box-shadow:
        inset 0 1.5px 0 var(--pixar-highlight),
        inset 0 -8px 22px -12px var(--pixar-ao),
        var(--pixar-shadow-soft);
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease, border-color 0.3s ease;
}
.cosmos-card:hover,
.about-card:hover,
.tradition-detail-card:hover,
.stat-card:hover,
.daily-card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow:
        inset 0 1.5px 0 var(--pixar-highlight-strong),
        inset 0 -8px 22px -12px var(--pixar-ao),
        var(--pixar-shadow-float);
}
/* Luz ambiental superior en tarjetas cosmos */
.cosmos-card::after {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 60px;
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.09), transparent 70%);
    pointer-events: none;
    border-radius: 26px 26px 0 0;
}
[data-theme="light"] .cosmos-card::after {
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.9), transparent 70%);
}

/* ═══════ 🫧 TABS COSMOS — PÍLDORA JUGOSA ═══════ */
.cosmos-tabs {
    border-radius: 999px;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.25),
        inset 0 -1px 1px var(--pixar-highlight),
        0 6px 18px -6px rgba(0, 0, 0, 0.35);
}
.cosmos-tab {
    transition: transform 0.35s var(--ease-spring), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.cosmos-tab.active {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 40%, rgba(0,0,0,0.08) 100%),
        linear-gradient(135deg, #8f7bff, #6a3fe8) !important;
    box-shadow:
        inset 0 1.5px 1.5px rgba(255,255,255,0.35),
        inset 0 -2px 5px rgba(30, 10, 90, 0.4),
        0 6px 18px -4px rgba(124, 106, 239, 0.55);
    transform: scale(1.05);
}
.cosmos-tab:not(.active):hover { transform: translateY(-2px); }

/* ═══════ 🎈 HERO PIXAR — IMAGEN + FLOTACIÓN ═══════ */
.pixar-hero-figure {
    position: relative;
    width: min(300px, 62vw);
    margin: 0 auto 6px;
    animation: pixarFloat 5.5s ease-in-out infinite;
}
.pixar-hero-figure img {
    width: 100%;
    height: auto;
    border-radius: 32px;
    box-shadow:
        0 30px 60px -18px rgba(70, 30, 180, 0.55),
        0 10px 26px -8px rgba(0, 0, 0, 0.45),
        inset 0 2px 0 rgba(255,255,255,0.15);
    border: 3px solid rgba(255, 255, 255, 0.12);
}
/* Sombra de contacto en el "suelo" (como personaje 3D apoyado) */
.pixar-hero-figure::after {
    content: '';
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 68%;
    height: 26px;
    background: radial-gradient(ellipse, rgba(10, 4, 40, 0.55), transparent 70%);
    border-radius: 50%;
    animation: pixarShadow 5.5s ease-in-out infinite;
    pointer-events: none;
}
[data-theme="light"] .pixar-hero-figure::after {
    background: radial-gradient(ellipse, rgba(124, 106, 239, 0.3), transparent 70%);
}
@keyframes pixarFloat {
    0%, 100% { transform: translateY(0) rotate(-0.6deg); }
    50% { transform: translateY(-16px) rotate(0.6deg); }
}
@keyframes pixarShadow {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
    50% { transform: translateX(-50%) scaleX(0.78); opacity: 0.6; }
}
/* El emoji del portal cede protagonismo a la figura */
.portal-content .portal-emoji { display: none; }

/* ═══════ 🍭 CHIPS Y BADGES — GOMITAS ═══════ */
.feature-badge,
.tradition-tag,
.lucky-chip,
.lunar-sign-chip,
.oracle-cat-badge,
.oracle-suggestion-chip {
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 1px var(--pixar-highlight),
        inset 0 -1.5px 3px rgba(0, 0, 0, 0.15),
        0 3px 10px -3px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s var(--ease-spring);
}
.feature-badge:hover,
.tradition-tag:hover,
.oracle-suggestion-chip:hover {
    transform: translateY(-3px) scale(1.05) rotate(-1deg);
}

/* ═══════ 🃏 TAROT — CARTAS CON GROSOR FÍSICO ═══════ */
.tarot-card-back,
.tarot-card-front {
    box-shadow:
        inset 0 2px 1px rgba(255,255,255,0.18),
        inset 0 -4px 10px rgba(0, 0, 0, 0.4),
        0 14px 34px -10px rgba(0, 0, 0, 0.6) !important;
}
.tarot-card:hover .tarot-card-inner { transform: translateY(-8px); }
.tarot-card.flipped:hover .tarot-card-inner { transform: rotateY(180deg) translateY(-8px); }
.tarot-card-inner { transition: transform 0.8s var(--ease-spring); }

/* ═══════ 🪨 RUNAS — PIEDRAS PULIDAS 3D ═══════ */
.rune-stone {
    box-shadow:
        inset 0 4px 8px rgba(255, 255, 255, 0.1),
        inset 0 -8px 18px rgba(0, 0, 0, 0.6),
        0 14px 30px -8px rgba(0, 0, 0, 0.55) !important;
    transition: transform 0.4s var(--ease-bounce), box-shadow 0.4s ease;
}
.rune-stone:hover {
    transform: translateY(-8px) rotate(3deg) scale(1.06) !important;
}

/* ═══════ 🔥 WIDGETS GAMIFICACIÓN — JUGUETES ═══════ */
.streak-widget {
    border-radius: 26px;
    box-shadow:
        inset 0 2px 1px rgba(255, 245, 200, 0.2),
        inset 0 -6px 16px rgba(120, 70, 0, 0.25),
        var(--pixar-gold-glow);
}
.achievement-badge.unlocked {
    transition: transform 0.4s var(--ease-bounce), box-shadow 0.4s ease;
}
.achievement-badge.unlocked:hover {
    transform: translateY(-6px) rotate(-1.5deg) scale(1.05);
}
.achievement-badge.unlocked .achievement-icon {
    animation: pixarPop 0.6s var(--ease-bounce) backwards;
}
@keyframes pixarPop {
    0% { transform: scale(0); }
    70% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ═══════ 💞 SINASTRÍA — ANILLO GLOSSY ═══════ */
.synastry-score-ring::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.16), transparent 55%);
    pointer-events: none;
}

/* ═══════ 🎧 SONIDO — BOTONES DE CONSOLA DE JUGUETE ═══════ */
.soundscape-preset {
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, border-color 0.3s ease;
}
.soundscape-preset:hover { transform: translateY(-5px) scale(1.02); }
.soundscape-preset:active { transform: scale(0.97); }
.soundscape-preset.playing {
    animation: pixarPulseGlow 2s ease-in-out infinite;
}
@keyframes pixarPulseGlow {
    0%, 100% { box-shadow: inset 0 1.5px 0 var(--pixar-highlight), 0 0 22px rgba(240,180,41,0.35); }
    50% { box-shadow: inset 0 1.5px 0 var(--pixar-highlight), 0 0 40px rgba(240,180,41,0.6); }
}

/* ═══════ 🎯 NAV — BARRA CON PROFUNDIDAD ═══════ */
.main-nav {
    box-shadow: 0 8px 28px -10px rgba(10, 4, 40, 0.55);
}
.nav-icon-btn, .theme-toggle, .lang-trigger {
    border-radius: 14px !important;
    transition: transform 0.3s var(--ease-spring), background 0.25s ease;
}
.nav-icon-btn:hover, .theme-toggle:hover { transform: translateY(-2px) scale(1.08); }
.nav-icon-btn:active, .theme-toggle:active { transform: scale(0.9); }

/* Bottom nav móvil: CTA como botón de juguete */
.bnav-cta-circle {
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,0.35),
        inset 0 -3px 6px rgba(30, 10, 90, 0.45),
        0 8px 20px -4px rgba(124, 106, 239, 0.6) !important;
    transition: transform 0.35s var(--ease-bounce);
}
.bnav-cta:active .bnav-cta-circle { transform: scale(0.88); }

/* ═══════ 📥 UPLOAD ZONES — BANDEJAS BLANDAS ═══════ */
.upload-zone {
    border-radius: 26px !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.22),
        inset 0 -1px 1px var(--pixar-highlight);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease;
}
.upload-zone:hover { transform: translateY(-4px) scale(1.015); }

/* ═══════ 🌈 TÍTULOS DE SECCIÓN — VOLUMEN 3D SUAVE ═══════ */
.section-title {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 14px rgba(124, 106, 239, 0.4);
}
.portal-title {
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.1),
        0 6px 22px rgba(240, 180, 41, 0.35),
        0 12px 40px rgba(124, 106, 239, 0.45);
}

/* ═══════ 🫙 INPUTS — CRISTAL PULIDO ═══════ */
input[type="text"], input[type="date"], .form-select, .oracle-ask-input {
    border-radius: 16px !important;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.2),
        inset 0 -1px 1px var(--pixar-highlight);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-spring);
}
input[type="text"]:focus, input[type="date"]:focus, .oracle-ask-input:focus {
    transform: scale(1.012);
}
.oracle-ask-input { border-radius: 999px !important; }

/* ═══════ 🎪 ENTRADA DE SECCIONES CON REBOTE ═══════ */
.section.active {
    animation: pixarSectionIn 0.55s var(--ease-spring) backwards;
}
@keyframes pixarSectionIn {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.scroll-reveal.revealed {
    animation: pixarRevealIn 0.6s var(--ease-spring) backwards;
}
@keyframes pixarRevealIn {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════ 🌙 CARTA DEL DÍA — JUGUETE FLOTANTE ═══════ */
.daily-card .daily-symbol {
    display: inline-block;
    animation: pixarFloat 4.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
.lunar-moon-emoji {
    filter: drop-shadow(0 12px 22px rgba(240, 180, 41, 0.4)) drop-shadow(0 4px 8px rgba(0,0,0,0.4)) !important;
}

/* ═══════ ♿ ACCESIBILIDAD — RESPETAR REDUCED MOTION ═══════ */
@media (prefers-reduced-motion: reduce) {
    .pixar-hero-figure,
    .pixar-hero-figure::after,
    .daily-card .daily-symbol,
    .soundscape-preset.playing,
    .achievement-badge.unlocked .achievement-icon {
        animation: none !important;
    }
    .btn-primary, .cosmos-card, .cosmos-tab, .rune-stone,
    .tarot-card-inner, .section.active, .scroll-reveal.revealed {
        transition-duration: 0.15s !important;
        animation-duration: 0.15s !important;
    }
}

/* ═══════ 📱 MÓVIL — SUAVIZAR EFECTOS PESADOS ═══════ */
@media (max-width: 640px) {
    .pixar-hero-figure { width: min(230px, 58vw); }
    .cosmos-card:hover, .about-card:hover, .stat-card:hover { transform: none; }
}