* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dark-primary: #000000;
    --dark-secondary: #1a1a1a;
    --parchment: #D4AF37;
    --parchment-light: #FFD700;
    --parchment-dark: #B8860B;
    --shadow: #0f0f0f;
}

body {
    font-family: 'EB Garamond', serif;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    color: var(--parchment);
    min-height: 100vh;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.header {
    background: var(--dark-secondary);
    border-bottom: 1px solid var(--parchment-dark);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    position: sticky;
    top: 0;
    z-index: 100;
    position: relative;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.logo-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--parchment-dark), var(--parchment));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.logo:hover .logo-icon {
    box-shadow: 0 0 20px var(--parchment);
}

.logo h1 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.8rem;
    font-weight: bold;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-light) 50%, var(--parchment-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo p {
    color: var(--parchment-dark);
    font-size: 0.9rem;
    font-style: italic;
}

.nav {
    display: flex;
    gap: 2rem;
}

.nav a {
    color: var(--parchment);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.nav a:hover {
    color: var(--parchment-light);
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--parchment);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark-secondary);
    border-top: 1px solid var(--parchment-dark);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu a {
    display: block;
    padding: 1rem 2rem;
    color: var(--parchment);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.3s ease;
}

.mobile-menu a:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--parchment-light);
}

/* Hero */
.hero {
    text-align: center;
    padding: 4rem 0;
    position: relative;
    background-image: url('https://yt3.googleusercontent.com/bvg7lez_tzAmVczQK_bk8afoRvlW6EOq1zq-jH0-yg-K64W5737ifZOnSG3WlGxHQYkGohzUlP8=w1707-fcrop64=1,00005a57ffffa5a8-k-c0xffffffff-no-nd-rj');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(26, 26, 26, 0.9) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: bold;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-light) 50%, var(--parchment-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2rem;
    animation: fadeIn 1s ease-in-out;
}

.hero p {
    font-size: 1.3rem;
    color: var(--parchment-dark);
    max-width: 800px;
    margin: 0 auto;
}

/* Filters */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 3rem 0;
}

.filter-btn {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--parchment-dark);
    background: transparent;
    color: var(--parchment);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'EB Garamond', serif;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--parchment);
    color: var(--dark-primary);
    transform: scale(1.05);
}

/* Cards */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(15, 15, 15, 0.9) 100%);
    border: 1px solid var(--parchment);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    border-radius: 0.75rem;
    padding: 2rem;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    transform: translateY(-5px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.category-tag {
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: bold;
}

.category-ciencia { color: #60a5fa; background: rgba(96, 165, 250, 0.2); }
.category-filosofia { color: #c084fc; background: rgba(192, 132, 252, 0.2); }
.category-psicologia { color: #4ade80; background: rgba(74, 222, 128, 0.2); }
.category-historia { color: #f59e0b; background: rgba(245, 158, 11, 0.2); }

.card h2 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-meta {
    display: flex;
    gap: 1rem;
    color: var(--parchment-dark);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(to right, var(--parchment-dark), var(--parchment));
    color: var(--dark-primary);
}

.btn-primary:hover {
    transform: scale(1.05);
}



.btn-secondary {
    border: 1px solid var(--parchment);
    color: var(--parchment);
    background: transparent;
}

.btn-secondary:hover {
    background: var(--parchment);
    color: var(--dark-primary);
}



/* Buy Button - Clean Definition */
.btn-buy-interactive,
.book-content .btn-buy-interactive,
.book-card .btn-buy-interactive {
    /* Visibility */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Layout */
    width: 100% !important;
    min-height: 50px !important;
    padding: 15px 20px !important;
    margin: 15px 0 !important;
    box-sizing: border-box !important;
    
    /* Appearance */
    background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700) !important;
    color: #000000 !important;
    border: 2px solid #FFD700 !important;
    border-radius: 8px !important;
    
    /* Typography */
    font-family: 'Cinzel', serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    
    /* Effects */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
    
    /* Z-index */
    position: relative !important;
    z-index: 1000 !important;
}

.btn-buy-interactive:hover {
    background: linear-gradient(45deg, #FFA500, #FFD700, #FFA500) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.5) !important;
}

.btn-buy-interactive:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4) !important;
}

/* Book Grid */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.book-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(15, 15, 15, 0.9) 100%);
    border: 1px solid var(--parchment);
    border-radius: 0.75rem;
    overflow: visible;
    transition: all 0.3s ease;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.book-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
}

.book-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.book-content > div:last-child {
    margin-top: auto;
    padding-top: 1rem;
}

.book-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.book-author {
    color: var(--parchment-dark);
    font-style: italic;
    margin-bottom: 1rem;
}

.book-description {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    flex-grow: 1;
}

.book-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--parchment-light);
    margin-bottom: 1rem;
}

/* Section */
.section {
    padding: 4rem 0;
}

.section-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-light) 50%, var(--parchment-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    text-align: center;
    color: var(--parchment-dark);
    font-size: 1.2rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer */
.footer {
    background: var(--dark-secondary);
    border-top: 1px solid var(--parchment-dark);
    padding: 2rem 0;
    text-align: center;
}

.footer p {
    color: var(--parchment-dark);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main Video Container */
.main-video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 3rem auto;
}

.main-video-card {
    position: relative;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.main-video-thumbnail {
    position: relative;
    width: 800px;
    height: 450px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 4px;
    background: linear-gradient(45deg, 
        var(--parchment) 0%, 
        var(--parchment-light) 25%, 
        var(--parchment-dark) 50%, 
        var(--parchment) 75%, 
        var(--parchment-light) 100%);
    background-size: 200% 200%;
    animation: borderGlow 3s ease-in-out infinite;
}

.main-video-thumbnail iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 11px;
    display: block;
}

.main-video-thumbnail:hover {
    animation-duration: 1s;
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.main-video-thumbnail:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 
                0 0 40px rgba(212, 175, 55, 0.8),
                0 0 60px rgba(255, 215, 0, 0.6) !important;
}

/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(212, 175, 55, 0.3) 50%, 
        rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
    border-radius: 11px;
}

.main-video-thumbnail:hover .video-overlay {
    opacity: 1;
}

.play-icon {
    font-size: 4rem;
    color: var(--parchment);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.video-info-hover {
    text-align: center;
    padding: 1rem;
}

.video-title-hover {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.5rem;
    color: var(--parchment);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.video-description-hover {
    font-size: 1rem;
    color: var(--parchment-light);
    line-height: 1.4;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.video-info {
    padding: 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 0 0 15px 15px;
}

.video-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    color: var(--parchment);
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-light) 50%, var(--parchment-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.video-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Shorts Section */
.shorts-section {
    margin-top: 3rem;
    text-align: center;
}

.shorts-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.8rem;
    color: var(--parchment);
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.shorts-container {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.short-card {
    position: relative;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.short-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6),
                0 0 25px rgba(212, 175, 55, 0.4);
}

.short-thumbnail {
    position: relative;
    width: 280px;
    height: 498px;
    overflow: hidden;
    border-radius: 11px;
    padding: 3px;
    background: linear-gradient(45deg, 
        var(--parchment) 0%, 
        var(--parchment-light) 25%, 
        var(--parchment-dark) 50%, 
        var(--parchment) 75%, 
        var(--parchment-light) 100%);
    background-size: 200% 200%;
    animation: borderGlow 3s ease-in-out infinite;
}

.short-thumbnail iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    display: block;
}

.short-info {
    padding: 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.9);
}

.short-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    color: var(--parchment);
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Border Glow Animation */
@keyframes borderGlow {
    0% {
        background-position: 0% 50%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
                    0 0 20px rgba(212, 175, 55, 0.3);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
                    0 0 30px rgba(212, 175, 55, 0.6),
                    0 0 40px rgba(255, 215, 0, 0.4);
    }
    100% {
        background-position: 0% 50%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 
                    0 0 20px rgba(212, 175, 55, 0.3);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .filters {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .book-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .container {
        padding: 0 0.5rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 2rem 0;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .card h2 {
        font-size: 1.3rem;
    }
    
    .book-title {
        font-size: 1.1rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    /* Video responsive */
    .main-video-container {
        max-width: 90%;
    }
    
    .main-video-thumbnail {
        width: 600px;
        height: 338px;
        padding: 3px;
    }
    
    .video-title-hover {
        font-size: 1.2rem;
    }
    
    .video-description-hover {
        font-size: 0.9rem;
    }
    
    .play-icon {
        font-size: 3rem;
    }
    
    /* Fix centering on mobile */
    .video-overlay {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .video-info-hover {
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
    }
    
    /* Shorts responsive */
    .shorts-container {
        gap: 1.5rem;
    }
    
    .short-thumbnail {
        width: 240px;
        height: 427px;
    }
    
}

@media (max-width: 400px) {
    .main-video-container {
        max-width: 95%;
    }
    
    .main-video-thumbnail {
        width: 400px;
        height: 225px;
        padding: 2px;
    }
    
    .video-title-hover {
        font-size: 1rem;
    }
    
    .video-description-hover {
        font-size: 0.8rem;
    }
    
    .play-icon {
        font-size: 2.5rem;
    }
    
    /* Ensure centering on very small screens */
    .video-overlay {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    .video-info-hover {
        width: 100%;
        max-width: 85%;
        margin: 0 auto;
        padding: 0.5rem;
    }
    
    /* Shorts mobile */
    .shorts-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .short-thumbnail {
        width: 200px;
        height: 356px;
    }
    
    .shorts-title {
        font-size: 1.5rem;
    }
}

/* Fundo de galáxia para seção de artigos */
#artigos {
    position: relative;
    background: var(--dark-primary);
}

#artigos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark-primary);
    z-index: 1;
}

#artigos .container {
    position: relative;
    z-index: 2;
}

/* Estrelas douradas cintilantes */
#artigos::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Estrelas grandes */
        radial-gradient(6px 6px at 60px 120px, rgba(255, 215, 0, 0.9), transparent),
        radial-gradient(5px 5px at 180px 60px, rgba(212, 175, 55, 0.8), transparent),
        radial-gradient(7px 7px at 300px 140px, rgba(255, 215, 0, 0.7), transparent),
        radial-gradient(4px 4px at 420px 100px, rgba(212, 175, 55, 0.9), transparent),
        radial-gradient(6px 6px at 120px 200px, rgba(255, 215, 0, 0.8), transparent),
        radial-gradient(5px 5px at 260px 180px, rgba(184, 134, 11, 0.9), transparent),
        radial-gradient(8px 8px at 380px 220px, rgba(212, 175, 55, 0.7), transparent),
        radial-gradient(4px 4px at 80px 260px, rgba(255, 215, 0, 0.8), transparent),
        /* Estrelas médias */
        radial-gradient(3px 3px at 150px 80px, rgba(255, 215, 0, 0.7), transparent),
        radial-gradient(4px 4px at 350px 50px, rgba(212, 175, 55, 0.8), transparent),
        radial-gradient(3px 3px at 50px 180px, rgba(184, 134, 11, 0.6), transparent),
        radial-gradient(5px 5px at 250px 120px, rgba(255, 215, 0, 0.9), transparent),
        radial-gradient(3px 3px at 450px 160px, rgba(212, 175, 55, 0.7), transparent),
        radial-gradient(4px 4px at 100px 240px, rgba(255, 215, 0, 0.8), transparent),
        radial-gradient(3px 3px at 320px 200px, rgba(184, 134, 11, 0.6), transparent),
        radial-gradient(5px 5px at 200px 280px, rgba(212, 175, 55, 0.8), transparent),
        /* Estrelas pequenas */
        radial-gradient(2px 2px at 90px 40px, rgba(255, 215, 0, 0.6), transparent),
        radial-gradient(2px 2px at 220px 30px, rgba(212, 175, 55, 0.5), transparent),
        radial-gradient(2px 2px at 370px 80px, rgba(184, 134, 11, 0.7), transparent),
        radial-gradient(2px 2px at 130px 160px, rgba(255, 215, 0, 0.6), transparent),
        radial-gradient(2px 2px at 280px 90px, rgba(212, 175, 55, 0.5), transparent),
        radial-gradient(2px 2px at 410px 180px, rgba(255, 215, 0, 0.7), transparent),
        radial-gradient(2px 2px at 70px 220px, rgba(184, 134, 11, 0.6), transparent),
        radial-gradient(2px 2px at 330px 260px, rgba(212, 175, 55, 0.5), transparent),
        radial-gradient(2px 2px at 170px 300px, rgba(255, 215, 0, 0.6), transparent),
        radial-gradient(2px 2px at 400px 40px, rgba(184, 134, 11, 0.7), transparent),
        /* Mais estrelas espalhadas */
        radial-gradient(3px 3px at 40px 100px, rgba(255, 215, 0, 0.5), transparent),
        radial-gradient(2px 2px at 160px 20px, rgba(212, 175, 55, 0.6), transparent),
        radial-gradient(4px 4px at 290px 70px, rgba(184, 134, 11, 0.7), transparent),
        radial-gradient(2px 2px at 430px 130px, rgba(255, 215, 0, 0.5), transparent),
        radial-gradient(3px 3px at 110px 190px, rgba(212, 175, 55, 0.6), transparent),
        radial-gradient(2px 2px at 240px 150px, rgba(255, 215, 0, 0.7), transparent),
        radial-gradient(4px 4px at 360px 190px, rgba(184, 134, 11, 0.5), transparent),
        radial-gradient(2px 2px at 190px 250px, rgba(212, 175, 55, 0.6), transparent);
    background-size: 1000px 1000px, 900px 900px, 1100px 1100px, 800px 800px, 950px 950px, 850px 850px, 1050px 1050px, 750px 750px, 900px 900px, 1000px 1000px, 800px 800px, 950px 950px, 850px 850px, 1000px 1000px, 900px 900px, 950px 950px, 700px 700px, 800px 800px, 900px 900px, 750px 750px, 850px 850px, 950px 950px, 800px 800px, 900px 900px, 750px 750px, 850px 850px, 1000px 1000px, 700px 700px, 950px 950px, 800px 800px, 900px 900px, 850px 850px, 750px 750px;
    background-position: 0 0, 100px 50px, 200px 100px, 300px 150px, 50px 200px, 150px 250px, 250px 300px, 350px 50px, 400px 100px, 450px 150px, 500px 200px, 50px 300px, 100px 350px, 150px 400px, 200px 450px, 250px 500px, 300px 50px, 350px 100px, 400px 150px, 450px 200px, 500px 250px, 50px 350px, 100px 400px, 150px 450px, 200px 500px, 250px 50px, 300px 100px, 350px 150px, 400px 200px, 450px 250px, 500px 300px, 50px 400px, 100px 450px;
    opacity: 0;
    z-index: 1;
    animation: goldenTwinkle 4s ease-in-out infinite;
}

@keyframes goldenTwinkle {
    0%, 100% { opacity: 0; }
    25% { opacity: 0.6; }
    50% { opacity: 0.9; }
    75% { opacity: 0.3; }
}


