/* ==================================================
   HOME / BASE
================================================== */
:root{
    --container-width:1320px;
}

.home-wrapper{
    min-height:100vh;
    padding-top:var(--topbar-desktop);
    position:relative;
    overflow:hidden;
    background-color:var(--bg-1);
}

/* ==================================================
   IMAGEM DE FUNDO (FIXA NO CENTRO)
================================================== */
.home-wrapper::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center; /* 🔑 SEMPRE CENTRAL */

    opacity:0;
    transition:opacity 1s ease;
}

/* Slide 1 */
.home-wrapper.bg-1::after{
    background-image:url('https://campsys.com.br/campsys/img/fundo_1.png');
    opacity:1;
}

/* Slide 2 */
.home-wrapper.bg-2::after{
    background-image:url('https://campsys.com.br/campsys/img/fundo_2.png');
    opacity:1;
}

/* ==================================================
   FADE / DEGRADÊ
================================================== */

/* Slide 1 — direita → esquerda */
.home-wrapper::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:linear-gradient(
        to left,
        rgba(10,14,19,0) 0%,
        rgba(10,14,19,.25) 45%,
        rgba(10,14,19,.6) 60%,
        rgba(10,14,19,.9) 80%,
        var(--bg-1) 100%
    );
}

/* Slide 2 — esquerda → direita */
.home-wrapper.bg-2::before{
    background:linear-gradient(
        to right,
        rgba(10,14,19,0) 0%,
        rgba(10,14,19,.25) 45%,
        rgba(10,14,19,.6) 60%,
        rgba(10,14,19,.9) 80%,
        var(--bg-1) 100%
    );
}

/* ==================================================
   HERO
================================================== */
.home-hero{
    position:relative;
    z-index:2;
    padding:140px 24px 120px;
}

.home-hero-content{
    width:100%;
    position:relative;
}

/* ==================================================
   SLIDES
================================================== */
.hero-slides{
    position:relative;
    min-height:220px;
}

.hero-slide{
    position:absolute;
    inset:0;
    width:100%;

    display:flex;
    justify-content:flex-start;

    opacity:0;
    transition:opacity .8s ease;
    pointer-events:none;
}

.hero-slide.active{
    opacity:1;
    pointer-events:auto;
}

/* Conteúdo */
.hero-slide .slide-content{
    max-width:600px;
}

.slide-content{
    transform:translateY(-80px);
}

/* Slide à direita */
.hero-slide.align-right{
    justify-content:flex-end;
}

.hero-slide.align-right .slide-content{
    text-align:right;
}

/* Forçar título específico à esquerda no slide alinhado à direita */
.hero-slide.align-right .title-left{
    align-self:flex-start; /* empurra para a esquerda do bloco */
    text-align:left;
    font-size:56px;
    margin-bottom:12px;
    transform:translatex(91px) translatey(0px);
    font-weight:700;
    margin-right:15px;
}
/* ==================================================
   TIPOGRAFIA
================================================== */
.home-hero-content h1{
    font-size:48px;
    line-height:1.15;
}

.home-hero-content h1 span{
    color:var(--green);
}

.home-hero-content p{
    margin-top:16px;
    font-size:18px;
    color:var(--text-muted);
}

/* ==================================================
   BOTÃO
================================================== */
.btn-consultoria{
    display:inline-block;
    margin-top:24px;
    padding:14px 32px;
    background:#16a34a;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    border-radius:6px;

    transition:background .3s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-consultoria:hover{
    background:#15803d;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(22,163,74,.25);
}

/* ==================================================
   MOBILE
================================================== */
@media (max-width:1024px){

    .hero-slides{
        position:relative;
        min-height:260px;
    }

    .hero-slide{
        position:absolute;       /* 🔑 continua carousel */
        inset:0;
        width:100%;

        opacity:0;
        pointer-events:none;

        justify-content:flex-start;
        text-align:left;
    }

    .hero-slide.active{
        opacity:1;
        pointer-events:auto;
    }

    /* garante que não empilhe */
    .hero-slide:not(.active){
        display:block;
    }

    /* texto ocupa tudo */
    .hero-slide .slide-content{
        max-width:100%;
        text-align:left;
    }

    /* mantém botões visíveis no mobile */
    .hero-nav{
        display:flex;
    }

    /* imagem mobile – slide 1 */
        .home-wrapper.bg-1::after{
            background-image:url('https://campsys.com.br/campsys/img/fundo_1_mobile.png');
            background-size:cover;
            background-position:center top;
            opacity:1;
        }

        /* imagem mobile – slide 2 */
        .home-wrapper.bg-2::after{
            background-image:url('https://campsys.com.br/campsys/img/fundo_2_mobile.png');
            background-size:cover;
            background-position:center top;
            opacity:1;
        }

        /* fade mais leve no mobile */
        .home-wrapper::before{
            background:linear-gradient(
                to bottom,
                rgba(10,14,19,.75) 0%,
                rgba(10,14,19,.85) 60%,
                var(--bg-1) 100%
            );
        }
}


/* ==================================================
   BOTÕES DE NAVEGAÇÃO DO HERO
================================================== */
.hero-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;

    width:48px;
    height:48px;

    border-radius:50%;
    border:none;
    cursor:pointer;

    background:rgba(0,0,0,.35);
    color:var(--green); /* mesma cor dos ícones de soluções */

    display:flex;
    align-items:center;
    justify-content:center;

    transition:background .3s ease, transform .2s ease;
}

.hero-nav i{
    font-size:20px;
}

/* hover */
.hero-nav:hover{
    background:rgba(0,0,0,.55);
    transform:translateY(-50%) scale(1.08);
}

/* direita */
.hero-next{
    right:0;
}

/* esquerda */
.hero-prev{
    left:0;
}

/* ==================================================
   ANIMAÇÃO DE ATENÇÃO (SETA PISCANDO)
================================================== */
@keyframes pulse-arrow {
    0%{
        opacity:.4;
        transform:translateY(-50%) scale(1);
    }
    50%{
        opacity:1;
        transform:translateY(-50%) scale(1.12);
    }
    100%{
        opacity:.4;
        transform:translateY(-50%) scale(1);
    }
}

/* aplica a animação */
.hero-nav{
    animation:pulse-arrow 1.6s ease-in-out infinite;
}