/* --- UTILITÁRIOS GERAIS --- */
.divisor-magen {
    border: none;
    height: 8px;
    opacity: 1;
    margin: 0;
    background: repeating-linear-gradient(
        to right,
        #e4b446,
        #e4b446 150px,
        #000000 150px,
        #000000 300px
    );
}

/* --- SEÇÃO: CABEÇALHO --- */
#cabecalho {
    .menu-link {
        color: #000;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 14px;
        margin-left: 25px;
        letter-spacing: 0.5px;

        &:hover {
            color: #cda45e;
            text-decoration: none;
        }
    }

    /* Responsividade específica do Cabeçalho */
    @media (max-width: 768px) {
        .menu-link {
            display: none;
        }

        .logo-mobile {
            text-align: center;
        }

        .campo-pesquisa {
            justify-content: space-around !important;
        }
    }
}

    /* Estilo para os links do menu principal */
    .menu-link {
        color: #000;
        /* Cor preta */
        font-weight: 700;
        /* Negrito */
        text-transform: uppercase;
        /* Caixa Alta */
        text-decoration: none;
        /* Remove sublinhado */
        font-size: 14px;
        margin-left: 25px;
        /* Espaçamento entre os itens */
        letter-spacing: 0.5px;
    }

    .menu-link:hover {
        color: #cda45e;
        /* Cor dourada ao passar o mouse (opcional, combina com o logo) */
        text-decoration: none;
    }

    /* Ajuste para dispositivos móveis (opcional) */
    @media (max-width: 768px) {
        .menu-link {
            display: none;
            /* Esconde os links de texto no mobile se ficar muito apertado */
        }

        .logo-mobile {
            text-align: center;
        }

        .banner-veiculo-mobile {
            width: -webkit-fill-available;
        }

        .campo-pesquisa {
            justify-content: space-around !important;
        }

    }

    /* --- CSS do Banner Carrossel --- */

    /* Define uma altura fixa para as imagens do banner para manter o padrão */
    .banner-img {
        /* Ajuste essa altura conforme a necessidade do seu design */
        object-fit: cover;
        /* Garante que a imagem cubra a área sem distorcer */
        object-position: center;
    }

    /* O container que segura o formulário sobre a imagem */
    .banner-form-overlay {
        position: absolute;
        top: 0;
        right: 10%;
        /* Distância da direita */
        height: 100%;
        z-index: 10;

    }

    /* Estilo visual do formulário */
    .form-container h3 {
        font-weight: 400;
    }

    /* Estilo dos inputs para ficarem brancos e quadrados como na imagem */
    .form-container .form-control {
        background-color: #fff;
        border: none;
        border-radius: 0px;
        /* Borda quadrada */
        padding: 12px;
        padding-right: 0px;
        /* Altura do input */
    }

    /* Botão Vermelho Personalizado */
    .btn-vermelho {
        background-color: #e30613;
        /* Cor vermelha vibrante */
        color: white;
        font-weight: bold;
        border: none;
        border-radius: 4px;
        padding: 10px 30px;
        text-transform: uppercase;
    }

    .btn-vermelho:hover {
        background-color: #c20510;
        /* Vermelho um pouco mais escuro ao passar o mouse */
        color: white;
    }

    /* --- Responsividade --- */
    /* Em telas médias (tablets), diminuímos a altura do banner e ajustamos o form */

    /* --- Estilos da Seção de Benefícios --- */

    /* Cor do Título */
    .titulo-dourado {
        color: #e4b446;
        /* Tom dourado similar à imagem */
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 20px;
    }

    /* --- Personalização dos Indicadores (Bolinhas) --- */
    .carousel-indicators [data-bs-target] {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        /* Deixa redonda */
        background-color: #e0e0e0;
        /* Cor padrão cinza claro */
        border: none;
        margin: 0 6px;
        opacity: 1;
        /* Tira a transparência padrão do bootstrap */
    }

    /* Cor da bolinha ativa */
    .carousel-indicators .active {
        background-color: #e4b446;
        /* Dourado */
    }

    .divisor-magen {
        border: none;
        /* Remove a borda padrão cinza */
        height: 8px;
        /* Altura/Espessura da linha */
        opacity: 1;
        /* Garante visibilidade total (Bootstrap costuma deixar transparente) */
        margin: 0;
        /* Remove margens extras se necessário */

        /* O Segredo: Gradiente que se repete para criar as listras */
        background: repeating-linear-gradient(to right,
                /* Direção: da esquerda para a direita */
                #e4b446,
                /* Cor Dourada (Início do bloco) */
                #e4b446 150px,
                /* Cor Dourada (Fim do bloco - largura 150px) */
                #000000 150px,
                /* Cor Preta (Início do bloco) */
                #000000 300px
                /* Cor Preta (Fim do bloco - largura 150px + 150px anteriores) */
            );
    }

    /* --- Estilos do Footer --- */

    .footer-magen {
        background-color: #1a1a1a;
        /* Fundo cinza quase preto */
        color: #ffffff;
        font-size: 14px;
    }

    /* Links Principais (Parte de cima) */
    .footer-main-links li {
        border-bottom: 1px solid #333;
        /* Linha divisória cinza escura */
    }

    .footer-main-links li:last-child {
        border-bottom: none;
        /* Remove a linha do último item */
    }

    .footer-main-links a {
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        /* Texto um pouco mais grosso */
        display: block;
        padding: 15px 0;
        /* Espaçamento interno */
        transition: color 0.3s;
    }

    .footer-main-links a:hover {
        color: #e4b446;
        /* Dourado ao passar o mouse */
        padding-left: 5px;
        /* Pequeno movimento para direita */
    }

    /* Linha divisória horizontal grande */
    .footer-divider {
        border-color: #333;
        opacity: 1;
        margin-bottom: 20px;
    }

    /* Links Pequenos (Parte de baixo) */
    .footer-sub-links,
    .footer-sub-links a {
        color: #888;
        /* Cinza claro */
        font-size: 12px;
        text-decoration: none;
    }

    .footer-sub-links a:hover {
        color: #fff;
    }

    /* Botão de Voltar ao Topo (Quadrado Cinza) */
    .btn-scroll-top {
        background-color: #333;
        color: #888;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        text-decoration: none;
        transition: background 0.3s;
    }

    .btn-scroll-top:hover {
        background-color: #e4b446;
        /* Fica dourado ao passar o mouse */
        color: #000;
    }

/* --- SEÇÃO: BANNER ROTATIVO --- */
#banner-rotativo {

    .banner-form-overlay {
        position: absolute;
        top: 0;
        right: 10%;
        height: 100%;
        z-index: 10;
    }

    .form-container {
        h3 {
            font-weight: 400;
        }

        .form-control {
            background-color: #fff;
            border: none;
            border-radius: 0px;
            padding: 12px;
            padding-right: 0px;
        }
    }

    .btn-vermelho {
        background-color: #e30613;
        color: white;
        font-weight: bold;
        border: none;
        border-radius: 4px;
        padding: 10px 30px;
        text-transform: uppercase;

        &:hover {
            background-color: #c20510;
            color: white;
        }
    }

    /* Responsividade específica do Banner */
    @media (max-width: 767px) {
        .banner-img {
            width: -webkit-fill-available;
        }
    }
}

/* --- SEÇÃO: BENEFÍCIOS --- */
#beneficios {
    .titulo-dourado {
        color: #e4b446;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .carousel-indicators {
        [data-bs-target] {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #e0e0e0;
            border: none;
            margin: 0 6px;
            opacity: 1;
        }

        .active {
            background-color: #e4b446;
        }
    }
}

#protecao, #infos {
    @media (max-width: 768px) {
        .banner-veiculo-mobile {
            width: -webkit-fill-available;
        }
    }
}

/* --- SEÇÃO: FOOTER --- */
.footer-magen {
    background-color: #1a1a1a;
    color: #ffffff;
    font-size: 14px;

    .footer-main-links {
        li {
            border-bottom: 1px solid #333;

            &:last-child {
                border-bottom: none;
            }
        }

        a {
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            display: block;
            padding: 15px 0;
            transition: color 0.3s;

            &:hover {
                color: #e4b446;
                padding-left: 5px;
            }
        }
    }

    .footer-divider {
        border-color: #333;
        opacity: 1;
        margin-bottom: 20px;
    }

    .footer-sub-links {
        &, a {
            color: #888;
            font-size: 12px;
            text-decoration: none;
        }

        a:hover {
            color: #fff;
        }
    }

    .btn-scroll-top {
        background-color: #333;
        color: #888;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        text-decoration: none;
        transition: background 0.3s;

        &:hover {
            background-color: #e4b446;
            color: #000;
        }
    }
}