/* --- Reset e Body --- */
* {
    border: 0px;
    padding: 0px;
    box-sizing: border-box;
    text-decoration: none;
}

body, html {
    font-family: "Barlow", sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    height: 100vh;      /* Trava a altura em 100% da tela */
    overflow: hidden;   /* Esconde qualquer barra de rolagem */
}

/* --- Seção Principal --- */
.s1 {
    height: 100vh;      /* Garante que a section ocupe exatos 100vh */
    padding: 2vh 3vw;
    display: flex;
    flex-direction: column; /* Empilha header, titulo e carrossel */
}

/* --- Header (Mantido o seu, mas ajustado para flex) --- */
     header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: auto;
            width: 95%;
            margin: auto;

            .logo-header {
                background-color: rgba(255, 255, 255, 0);
                box-shadow: 0px 0px 5px 2px rgba(83, 83, 83, 0);
                width: 120px;
                height: auto;
                border-radius: 30px;

            }

            .abas {
                border-radius: 15px;
                background-color: rgba(85, 85, 85, 0.55);
                backdrop-filter: saturate(180%) blur(20px);
                box-shadow: 0px 0px 6px 2px rgba(255, 255, 255, 0.1);
                padding: 18px 2vw;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 3vw;

                a {
                    color: white;
                    transition: ease-in-out .2s;
                    font-weight: 400;
                }

                a:hover {
                    color: #d90404;
                    transform: translateY(-1px);
                }
            }

            .btn-contato-vermelho {
                color: rgba(255, 255, 255, 0.9);
                background-color: #D90429;
                border: none;
                outline: none;
                padding: 3px 10px 3px 18px;
                font-size: 16px;
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                font-weight: 500;
                font-size: 18px;
                transition: ease-in-out .2s;
                box-shadow: -4px 5px 16px 0px rgba(0, 0, 0, 0.4);


                img {
                    height: 50px;
                    width: 50px;
                    box-shadow: none;
                    transition: ease-in-out .2s;
                }


            }

            .btn-contato-vermelho:hover {
                transform: translateY(-2px) translateX(2px) scale(1.05);
                box-shadow: -4px 5px 16px 0px rgba(0, 0, 0, 0.5);

                img:hover {
                    transform: scale(1.08);

                }
            }
        }

/* --- Título Frota --- */
.titulo-secao {
    color: #A93226;
    font-weight: 400;
    font-size: 2vw;
    margin-top: 2vh;
    margin-left: 2vw;
    flex-shrink: 0; /* Impede que o título encolha */
}

/* --- Carrossel Wrapper (Ocupa o resto do espaço) --- */
.carrossel-wrapper {
    flex-grow: 1; /* Pega todo o espaço que sobrou do 100vh */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.carrossel-container {
    position: relative;
    width: 100%;
    height: 67vh; /* Altura baseada na tela para não estourar os 100vh */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    position: absolute;
    width: 28vw;  /* Largura responsiva */
    height: 100%; /* Ocupa os 60vh do container */
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.15);
    border: 1px solid #ccc;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.img-placeholder {
    width: 100%;
    height: 70%; /* Proporção da imagem em relação ao card */
    background-color: #7a7575; 
    border-radius: 5px 5px 0 0;
}

.card .text {
    padding: 1vw;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;


}

.card .text h2 {
    font-weight: 400;
    font-size: 1.3vw;
    color: #333;
    margin-bottom: 0.5vw;
        img{
            height: auto   ;
            width: 120px;
            padding: -50px;
            margin: -50px;
            margin-left: -20px;
            margin-right: -15px;
        }
}

#card-5 .text h2 {
    img{
        width: 105px;
         padding: -50px;
            margin: -40px;
            margin-left: -10px;
            margin-right: 0px;
    }
}

.card .text p {
    font-size: 0.8vw;
    color: #555;
    line-height: 1.4;

        span{
            font-weight: 700;
            color: #8b0000;
        }
}

/* --- Posições do Carrossel --- */
.card.ativo {
    opacity: 1;
    z-index: 2;
    transform: translateX(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

.card.anterior {
    opacity: 0.8;
    z-index: 1;
    transform: translateX(-30vw) scale(0.85); /* Distância baseada em vw */
    filter: blur(4px);
    pointer-events: auto;
    cursor: pointer;
}

.card.proximo {
    opacity: 0.8;
    z-index: 1;
    transform: translateX(30vw) scale(0.85);
    filter: blur(4px);
    pointer-events: auto;
    cursor: pointer;
}

/* --- Indicadores (Bolinhas) --- */
.indicadores {
    display: flex;
    gap: 8px;
    margin-top: 3vh; /* Margem responsiva vertical */
    flex-shrink: 0;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #b3b3b3;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.ativo {
    background-color: #8b0000;
}

#img-1{
    background-image: url('../imagens/delivery\ vuc\ aba\ frota.png');
    background-size: cover;
}

#img-2{
    background-image: url('../imagens/34\ aba\ frota.png');
    background-size: cover;
}
#img-3{
    background-image: url('../imagens/toco\ aba\ frota.png');
    background-size: cover;
}
#img-4{
    background-image: url('../imagens/truck\ aba\ frota.png');
    background-size: cover;
}
#img-5{
    background-image: url('../imagens/carreta\ aba\ frota.png');
    background-size: cover;
}


/* ============================================================
   1. ANIMAÇÃO SIMPLES DE ENTRADA (SEM MEXER NO HTML)
   ============================================================ */
header { 
    animation: fadeSubir 0.8s ease-out forwards; 
}
.titulo-secao { 
    animation: fadeSubir 0.8s ease-out 0.2s forwards; 
    opacity: 0; 
}
.carrossel-wrapper { 
    animation: fadeSubir 0.8s ease-out 0.4s forwards; 
    opacity: 0; 
}

@keyframes fadeSubir {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   2. ESTILO DAS SETAS (Injetadas pelo JS)
   ============================================================ */
.seta-carrossel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;
    color: #A93226;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seta-carrossel svg {
    width: 24px;
    height: 24px;
    /* Isso garante a cor sem sombra */
    stroke: currentColor; 
}

.seta-carrossel:hover {
    
    
    box-shadow: 0 0px 6px 1px rgba(0,0,0,0.3);
}

.seta-esq { left: 2vw; }
.seta-dir { right: 2vw; }

/* Esconde as setas abaixo de 1024px */
@media screen and (max-width: 1024px) {
    .seta-carrossel { display: none !important; }
}

/* Esconde as setas em telas de 1024px ou menores */
@media screen and (max-width: 1024px) {
    .seta-carrossel {
        display: none;
    }
}