:root {
    --ink: #1a103c;
    --purple-deep: #2a1b54;
    --purple-accent: #6d18b5;
    --gold-bright: #d4af37;
    --gold-light: #f5e7b2;
    --card-bg: rgba(255, 255, 255, 0.85);
    --line: #dcd6f7;
}

body {
    font-family: "DM Sans", sans-serif;
    color: var(--ink);
    background: linear-gradient(135deg, #f5f3fb 0%, #e6e1f7 50%, #f9f7ff 100%);
    min-height: 100vh;
}

.cinzel-font {
    font-family: "Cinzel", serif;
}

.app-shell {
    width: 100%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.glass-panel {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 50px rgba(42, 27, 84, 0.08);
}

.quadrant-card {
    background: #ffffff;
    border: 1px solid var(--line);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.quadrant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 40px rgba(109, 24, 181, 0.12);
    border-color: var(--purple-accent);
}

.quadrant-number {
    font-family: "Cinzel", serif;
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mision-card {
    background: linear-gradient(135deg, #2a1b54 0%, #4a158c 100%);
    color: #ffffff;
    border: 1px solid #9c4dcc;
    box-shadow: 0 25px 60px rgba(42, 27, 84, 0.25);
}

.mision-card .quadrant-number {
    background: linear-gradient(135deg, #ffd700 0%, #fff8dc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-tag {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
}

.eyebrow {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--purple-accent);
}

@keyframes fadeInRise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-rise {
    animation: fadeInRise 0.6s ease-out forwards;
}

.tab-btn.active {
    border-bottom: 3px solid var(--purple-accent);
    color: var(--purple-accent);
    font-weight: 700;
}