/* ============================================================
   A Ordem dos 5 Elementos - Estilos Globais
   ============================================================ */

/* --- Noise Overlay (Removido por gargalo extremo de GPU em mobile) --- */
.noise-overlay {
    display: none;
}

/* --- Gold Glow Hover Effect --- */
.gold-glow:hover {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

/* --- Material Symbols Outlined --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.symbol-fill {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ============================================================
   FAQ Accordion
   ============================================================ */
.faq-toggle:checked~.faq-content {
    max-height: 500px;
    opacity: 1;
    padding-bottom: 2rem;
}

.faq-toggle:checked~.faq-header .faq-icon {
    transform: rotate(45deg);
}

.faq-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon {
    transition: transform 0.3s ease;
}

/* ============================================================
   Hero Carousel
   ============================================================ */
.carousel-slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

.carousel-indicator {
    transition: all 0.3s ease;
    opacity: 0.3;
}

.carousel-indicator.active {
    opacity: 1;
    background-color: #f2ca50;
    /* primary color */
    width: 2rem;
}

/* ============================================================
   Estrategista Extras
   ============================================================ */
.glow-hover:hover {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
    border-color: #d4af37 !important;
}

.glow-active {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
    border-color: #d4af37 !important;
}

.glow-focus:focus-within {
    box-shadow: 0 4px 15px -4px rgba(212, 175, 55, 0.15);
}