/* * Widget: Hero Cósmico
 * Handle: as-hero-css
 */

.hero-section {
    position: relative;
    min-height: 100vh;
    height: auto;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 140px; /* Compensa header fixo */
    padding-bottom: 80px;
}

/* --- OVERLAY PADRÃO (DARK) --- */
.hero-overlay {
    position: absolute; 
    inset: 0;
    /* Gradiente Dark Padrão */
    background: radial-gradient(circle at center, rgba(18, 16, 31, 0.6) 0%, rgba(18, 16, 31, 0.95) 100%);
    z-index: 1;
    transition: background 0.3s ease;
}

/* --- OVERRIDE: FUNDO PERSONALIZADO --- */
/* Se o usuário escolheu um fundo no Elementor, removemos o overlay padrão para mostrar o fundo dele */
.hero-section.as-custom-hero-bg .hero-overlay {
    background: none !important;
    background-image: none !important;
}

/* Conteúdo */
.hero-content { 
    position: relative; 
    z-index: 2; 
    max-width: 900px; 
    padding: 20px; 
    width: 100%; 
}

.hero-subtitle { 
    display: block; 
    color: #E6A55C; 
    font-size: 1.1rem; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    margin-bottom: 20px; 
    font-weight: 600; 
}

.hero-title { 
    font-size: 3.5rem; 
    line-height: 1.1; 
    color: #fff; 
    margin-bottom: 30px; 
    text-shadow: 0 0 30px rgba(230, 165, 92, 0.3); 
    font-family: 'Cinzel', serif;
}

.hero-text { 
    font-size: 1.2rem; 
    color: #ddd; 
    margin-bottom: 40px; 
    line-height: 1.6; 
}

/* Ações */
.hero-actions { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 20px; 
}

/* Botão Principal */
.btn-gold-glow {
    background: linear-gradient(135deg, #E6A55C 0%, #C5A059 100%);
    color: #000;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(230, 165, 92, 0.3);
    transition: 0.3s;
    display: inline-block;
}
.btn-gold-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(230, 165, 92, 0.5);
    background: #fff;
}

/* Botão Oráculo */
.hero-oracle-wrapper .oraculo-container-widget { margin: 0; }
.btn-oracle-style { 
    background: transparent !important; 
    border: 1px solid #E6A55C !important; 
    color: #E6A55C !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.btn-oracle-style:hover { 
    background: #E6A55C !important; 
    color: #000 !important; 
}

/* Seta Scroll */
.scroll-down { 
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%); 
    color: #fff; 
    animation: bounce 2s infinite; 
    z-index: 2; 
    font-size: 1.5rem; 
}

@keyframes bounce { 
    0%, 100% {transform:translateY(0) translateX(-50%)} 
    50% {transform:translateY(-10px) translateX(-50%)} 
}


/* --- TEMA LIGHT (.skin-light) --- */
/* Só aplica se NÃO tiver fundo customizado, ou ajusta o texto para fundo claro */

.hero-section.skin-light .hero-overlay {
    /* Overlay claro se for tema light padrão */
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* Se tiver fundo customizado no light, remove overlay */
.hero-section.skin-light.as-custom-hero-bg .hero-overlay {
    background: none !important;
}

.hero-section.skin-light .hero-title {
    color: #333;
    text-shadow: none;
}

.hero-section.skin-light .hero-text {
    color: #555;
}

.hero-section.skin-light .scroll-down {
    color: #333;
}

/* Ajuste Oráculo no Light */
.hero-section.skin-light .btn-oracle-style {
    border-color: #D97706 !important;
    color: #D97706 !important;
}
.hero-section.skin-light .btn-oracle-style:hover {
    background: #D97706 !important;
    color: #fff !important;
}

/* Responsivo */
@media (max-width: 768px) { 
    .hero-title { font-size: 2.2rem; } 
    .hero-section { padding-top: 100px; }
}