/* VARIÁVEIS GLOBAIS */
        :root {
            --bg: #0b0b0b;
            --card-bg: #141414;
            --text: #e0e0e0;
            --border: #2a2a2a;
            /* Cores Planetárias */
            --sol: #FFD700;       /* Reis */
            --venus: #2E8B57;     /* Duques */
            --jupiter: #4169E1;   /* Príncipes */
            --lua: #C0C0C0;       /* Marqueses */
            --marte: #B22222;     /* Condes */
            --mercurio: #FF8C00;  /* Presidentes */
            --saturno: #8A2BE2;   /* Cavaleiros */
        }

        /* RESET */
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; margin: 0; line-height: 1.5; }

        /* HEADER & NAV */
        header { text-align: center; padding: 40px 20px 20px; border-bottom: 1px solid var(--border); }
        h1 { font-family: 'Cinzel', serif; font-size: 2.5rem; margin: 0 0 10px 0; color: #fff; letter-spacing: 2px; }
        .subtitle { opacity: 0.6; margin-bottom: 30px; display: block; font-size: 0.9rem; }

        /* NAV RÁPIDA (LINKS DE CATEGORIA) */
        .quick-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-bottom: 20px; }
        .nav-link {
            text-decoration: none; padding: 6px 14px; border: 1px solid; border-radius: 50px;
            font-size: 0.75rem; text-transform: uppercase; font-weight: bold; letter-spacing: 1px;
            background: rgba(255,255,255,0.05); transition: 0.3s;
        }
        .nav-link:hover { transform: translateY(-2px); filter: brightness(1.3); }

        /* SEÇÕES & GRID */
        .container { max-width: 1280px; margin: 0 auto; padding: 20px; }
        section { margin-bottom: 80px; scroll-margin-top: 20px; }
        
        .section-header { display: flex; align-items: center; margin-bottom: 25px; border-bottom: 2px solid var(--border); padding-bottom: 10px; }
        .planet-icon { width: 12px; height: 12px; border-radius: 50%; margin-right: 15px; box-shadow: 0 0 10px currentColor; }
        .section-title { font-family: 'Cinzel', serif; font-size: 1.8rem; margin: 0; }

        .goetia-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
        }

        /* CARDS */
        .daemon-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s, box-shadow 0.3s;
            overflow: hidden;
            position: relative;
        }

        /* Barra colorida no topo */
        .daemon-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: currentColor;
        }

        /* Glow por categoria no hover */
        .c-rei:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(255, 215, 0, 0.25); }
        .c-duque:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(46, 139, 87, 0.25); }
        .c-principe:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(65, 105, 225, 0.25); }
        .c-marques:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(192, 192, 192, 0.25); }
        .c-conde:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(178, 34, 34, 0.25); }
        .c-presidente:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(255, 140, 0, 0.25); }
        .c-cavaleiro:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(138, 43, 226, 0.25); }

        .daemon-card:hover { background: #1a1a1a; }

        /* Tag no topo: #09 • REI */
        .card-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 16px 20px 8px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            opacity: 0.8;
            border-bottom: 1px solid var(--border);
            margin-bottom: 0;
        }

        .card-header .number { opacity: 0.6; }

        /* Área do selo - estilo carta com imagem maior */
        .seal-container {
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 4px 0;
            background: transparent;
            margin-bottom: 0;
        }

        .seal-container img {
            max-width: 100%;
            max-height: 100%;
            width: 100%;
            object-fit: contain;
            filter: none;
            opacity: 0.95;
            transition: 0.3s;
        }

        .daemon-card:hover .seal-container img {
            opacity: 1;
            transform: scale(1.03);
        }

        /* Nome do daemon */
        .name {
            font-family: 'Cinzel', serif;
            font-size: 1.4rem;
            text-align: center;
            margin: 4px 12px 2px;
            display: block;
            letter-spacing: 1px;
        }

        /* Descrição */
        .desc {
            font-size: 0.8rem;
            opacity: 0.7;
            line-height: 1.4;
            text-align: center;
            padding: 0 12px 12px;
            flex-grow: 1;
            margin-top: 0;
        }

        /* Cores por planeta */
        .c-rei { color: var(--sol); }
        .c-rei .name { color: var(--sol); }

        .c-duque { color: var(--venus); }
        .c-duque .name { color: var(--venus); }

        .c-principe { color: var(--jupiter); }
        .c-principe .name { color: var(--jupiter); }

        .c-marques { color: var(--lua); }
        .c-marques .name { color: var(--lua); }

        .c-conde { color: var(--marte); }
        .c-conde .name { color: var(--marte); }

        .c-presidente { color: var(--mercurio); }
        .c-presidente .name { color: var(--mercurio); }

        .c-cavaleiro { color: var(--saturno); }
        .c-cavaleiro .name { color: var(--saturno); }

        footer { text-align: center; padding: 60px 20px; opacity: 0.4; font-size: 0.8rem; border-top: 1px solid var(--border); margin-top: 80px; }