/* ==========================================================================
   SUBTLE BACKGROUNDS - Texturas Sutis e Quase Imperceptíveis
   ==========================================================================
   Adiciona texturas muito sutis e discretas aos fundos brancos,
   criando profundidade sem chamar atenção.
*/

/* --- 1. TEXTURA SUTIL PARA FUNDOS BRANCOS --- */
.home-section-wrapper,
.section-adaptive-alt,
.home-page-container > section:not(.areas-carousel-section):not(.cta-section-ultimate) {
    position: relative;
    background-color: #ffffff;
}

/* Padrão de pontos muito sutil - Usando classe específica para evitar conflitos */
.home-section-wrapper,
.section-adaptive-alt {
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.015) 1px, transparent 0),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(249, 249, 249, 0.2) 50%,
            rgba(255, 255, 255, 0) 100%
        );
    background-size: 40px 40px, 100% 100%;
    background-position: 0 0, center center;
    background-repeat: repeat, no-repeat;
}

/* Garantir que o conteúdo fique acima */
.home-section-wrapper > *,
.section-adaptive-alt > *,
.home-page-container > section > * {
    position: relative;
    z-index: 1;
}

/* --- 2. TEXTURA DE LINHAS MUITO SUTIS --- */
.home-section-wrapper:nth-child(even),
.section-adaptive-alt:nth-child(even) {
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.008) 2px,
            rgba(0, 0, 0, 0.008) 4px
        ),
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.015) 1px, transparent 0),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(249, 249, 249, 0.2) 50%,
            rgba(255, 255, 255, 0) 100%
        );
    background-size: 100% 20px, 40px 40px, 100% 100%;
    background-position: 0 0, 0 0, center center;
    background-repeat: no-repeat, repeat, no-repeat;
    opacity: 1;
}

/* --- 3. SOMBRA SUTIL NAS BORDAS --- */
.home-section-wrapper,
.section-adaptive-alt {
    box-shadow: 
        inset 0 1px 0 rgba(0, 0, 0, 0.015),
        inset 0 -1px 0 rgba(0, 0, 0, 0.015);
}

/* --- 5. TEXTURA DE PAPEL MUITO SUTIL (Noise) - Integrado no background principal --- */
@supports (backdrop-filter: blur(1px)) {
    .home-section-wrapper,
    .section-adaptive-alt {
        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.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E"),
            radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.015) 1px, transparent 0),
            linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0) 0%,
                rgba(249, 249, 249, 0.2) 50%,
                rgba(255, 255, 255, 0) 100%
            );
        background-size: 200px 200px, 40px 40px, 100% 100%;
        background-position: 0 0, 0 0, center center;
        background-repeat: repeat, repeat, no-repeat;
    }
}

/* --- 6. DARK MODE ADJUSTMENTS --- */
body.dark-mode .home-section-wrapper,
body.dark-mode .section-adaptive-alt,
[data-theme="dark"] .home-section-wrapper,
[data-theme="dark"] .section-adaptive-alt {
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.01) 1px, transparent 0),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.01) 50%,
            rgba(255, 255, 255, 0) 100%
        );
    background-size: 40px 40px, 100% 100%;
    background-position: 0 0, center center;
    background-repeat: repeat, no-repeat;
    mix-blend-mode: screen;
    opacity: 1;
}

/* --- 7. RESPONSIVIDADE --- */
@media (max-width: 991px) {
    .home-section-wrapper,
    .section-adaptive-alt {
        background-size: 30px 30px, 100% 100%;
    }
}

/* --- 8. REDUCE MOTION (Acessibilidade) --- */
@media (prefers-reduced-motion: reduce) {
    .areas-carousel-section::before {
        animation: none;
    }
}