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

/* --- Noise Overlay --- */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* --- 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);
}