/* ================= RESET ================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: Arial, Helvetica, sans-serif;

}

 

:root {

    --azul: #0b3c5d;

    --cinza-claro: #f2f2f2;

    --cinza-escuro: #444;

    --preto: #111;

}

 

/* ================= HEADER ================= */

 

 

/* ===== HEADER ===== */


.header-capa {
z-index: 2;
    height: 300px;

    background: linear-gradient(

        rgba(0, 0, 0, 0.75),

        rgba(0, 0, 0, 0.75)

    ),
    url("img/capa.jpeg"),
    linear-gradient(

        135deg,

        #000000 0%,

        #050b14 50%,

        #000000 100%

    );

 

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

 

    /* IMPORTANTE */

    position: relative;

    overflow: hidden;

}

 

/* Brilho sutil azul (combina com o logo) */

.header-capa::before {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(

        circle at top center,

        rgba(0, 140, 255, 0.25),

        transparent 60%

    );

    pointer-events: none;

}

 

 

header-content {

    position: relative;

    z-index: 2;

    color: #fff;

}

 

.header-content img {

    position: absolute;

    top: 20px;

    left: 20px;

 

    width: 110px;

    height: auto;

 

    border-radius: 50%;

    filter:

        drop-shadow(0 0 18px rgba(0,140,255,0.6))

        drop-shadow(0 0 6px rgba(0,0,0,0.9));

}

 

.header-content h1 {

    font-size: 36px;

    letter-spacing: 2px;

    margin-bottom: 6px;

}

 

.header-content p {

    font-size: 15px;

    color: #ccc;

}

 

 

.header-content p {

    font-size: 15px;

    color: #ccc;

}

 

/* ================= MENU ================= */

 

/* remove bolinhas e espaços */

.menu,

.menu ul,

.menu li {

    list-style: none;

    margin: 0;

    padding: 0;

}

 

 

/* ===============================

   MENU SEM FAIXA / ESTILO CARDS

================================= */

 

/* Remove a faixa do nav */

nav {

    background: transparent;

    padding: 20px 0;

}

 

/* Lista principal do menu */

.menu {

    list-style: none;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}

 

/* Cada item vira um "card" */

.menu > li {

    position: relative;

}

 

/* Links principais */

.menu > li > a {

    display: block;

    background: rgba(255, 255, 255, 0.9);

    color: #000;

    padding: 12px 20px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: bold;

 

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);

    transition: all 0.3s ease;

}

 

/* Hover */

.menu > li > a:hover {

    transform: translateY(-3px);

    background: rgba(255, 255, 255, 1);

}

 

/* ===============================

   DROPDOWN

================================= */

 

.dropdown {

    display: none;

    position: absolute;

    top: 100%;
    margin-top: 0px;

    left: 50%;

    transform: translateX(-50%);

 

    background: rgba(255, 255, 255, 0.95);

    list-style: none;

    padding: 10px 0;

    border-radius: 10px;

 

    min-width: 180px;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);

    z-index: 1000;

}

 

/* Itens do dropdown */

.dropdown li a {

    display: block;

    padding: 10px 20px;

    color: #000;

    text-decoration: none;

    white-space: nowrap;

}

 

.dropdown li a:hover {

    background: rgba(0, 0, 0, 0.06);

}

 

/* Exibe o dropdown no hover */

.menu li:hover .dropdown {

    display: block;

}

 

/* ===============================

   MOBILE (responsivo simples)

================================= */

@media (max-width: 768px) {

    .menu {

        flex-direction: column;

        align-items: center;

    }

}

 

 

/* ================= MENU MOBILE ================= */

.menu-toggle {

    display: none;

    color: #fff;

    font-size: 26px;

    padding: 14px 18px;

    cursor: pointer;

}

 

/* ================= CONTEÚDO ================= */

.carousel {

/*     margin-top: 30px; */

 

    max-width: 1100px;   /* largura máxima do carrossel */

    margin: 30px auto;   /* centraliza */

               

 

}

 

.carousel-item img {

 

    width: 100%;

    height: 100%;

    object-fit: contain; /* <<< A CHAVE DO PROBLEMA */

 

 

}

 

/* ================= PARCEIROS ================= */

 

.parceiros {

    background: transparent;

    padding: 60px 20px;

    text-align: center;

}

 

 

.parceiros h2 {

    margin-bottom: 25px;

    color: var(--azul);

}

 

 

.lista-parceiros {

    display: flex;

    gap: 20px;

    justify-content: center;

    flex-wrap: wrap;

}

 

.parceiro {

    background: rgba(255, 255, 255, 0.9);

    padding: 20px 30px;

    border-radius: 10px;

    font-weight: bold;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

}

 

 

/* ================= FOOTER ================= */

footer {

    background: var(--preto);

    color: #fff;

    text-align: center;

    padding: 15px;

    margin-top: 30px;

}

 

/* ================= WHATSAPP ================= */

.whatsapp {

    position: fixed;

    right: 20px;

    bottom: 20px;

 

    width: 60px;

    height: 60px;

    background: #25d366;

    color: #fff;

    border-radius: 50%;

 

    display: flex;

    align-items: center;

    justify-content: center;

 

    font-size: 28px;

    text-decoration: none;

    box-shadow: 0 4px 10px rgba(0,0,0,0.4);

}

 

/* ================= RESPONSIVO ================= */

@media (max-width: 768px) {

 

    .menu-toggle {

        display: block;

    }

 

    .menu {

        flex-direction: column;

        display: none;

    }

 

    .menu.active {

        display: flex;

    }

 

    .dropdown {

        position: static;

        box-shadow: none;

    }

 

 

.header-capa {

    height: 300px;

    background: linear-gradient(

        rgba(0, 0, 0, 0.75),

        rgba(0, 0, 0, 0.75)

    ),

    linear-gradient(

        135deg,

        #000000 0%,

        #050b14 50%,

        #000000 100%

    );

 

    position: relative;

    text-align: center;

}

 

    .header-content h1 {

        font-size: 26px;

    }

}

 

 

/* BOTÃO WHATSAPP FLUTUANTE */

.whatsapp-float {

    position: fixed;

    right: 20px;

    bottom: 20px;

 

    width: 60px;

    height: 60px;

 

    background-color: #25d366;

    color: #fff;

 

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

 

    font-size: 32px;

    text-decoration: none;

 

    box-shadow: 0 4px 10px rgba(0,0,0,0.4);

    z-index: 9999;

 

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}

 

.whatsapp-float:hover {

    transform: scale(1.1);

    box-shadow: 0 6px 14px rgba(0,0,0,0.5);

}

 

 

 

/* ===== FILTROS ===== */

.filtros

 

.filtro-box {

    background: #0b3c5d;

    padding: 30px;

    border-radius: 8px;

    width: 100%;

    max-width: 600px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.2);

    color: #fff;

}

 

 

.filtro-box {

    background: rgba(255, 255, 255, 0.95);

    padding: 30px;

    border-radius: 12px;

    max-width: 900px;

    margin: 0 auto;

}

 

.filtro-grupo {

    display: flex;

    gap: 15px;

    margin-bottom: 15px;

}

 

.filtro-grupo input {

    flex: 1;

    padding: 12px;

    border-radius: 5px;

    border: none;

    font-size: 14px;

}

 

.filtro-grupo input:focus {

    outline: none;

}

 

.filtro-box button {

    width: 100%;

    padding: 14px;

    background: #1e90ff;

    border: none;

    color: #fff;

    font-size: 16px;

    font-weight: bold;

    border-radius: 5px;

    cursor: pointer;

}

 

.filtro-box button:hover {

    background: #187bcd;

}

 

/* Responsivo */

@media (max-width: 600px) {

    .filtro-grupo {

        flex-direction: column;

    }

}

 

 

.btn-buscar-filtros {

    display: block;

    width: 100%;

    margin-top: 20px;

    padding: 14px;

    background: #1e90ff;

    color: #fff;

    text-align: center;

    text-decoration: none;

    font-weight: bold;

    border-radius: 5px;

}

 

.btn-buscar-filtros:hover {

    background: #187bcd;

}

 

 

/* ===== ESTOQUE ===== */

.estoque {

    background: #f2f2f2;

    padding: 50px 20px;

}

 

.card-carro {

    background: #fff;

    border-radius: 8px;

    padding: 15px;

    text-align: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);

    height: 100%;

}

 

.card-carro img {

    width: 100%;

    height: 140px;

    object-fit: cover;

    border-radius: 5px;

    margin-bottom: 10px;

}

 

.card-carro h3 {

    font-size: 16px;

    margin-bottom: 5px;

}

 

.card-carro p {

    font-size: 14px;

    margin: 2px 0;

}

 

.preco {

    color: #0b3c5d;

    font-weight: bold;

    font-size: 16px;

    margin-top: 8px;

}

 

/* DETALHES */

.detalhe-foto img {

    width: 100%;

    max-height: 480px;

    object-fit: cover;

}

 

.detalhe-titulo {

    text-align: center;

    padding: 20px;

}

 

.detalhe-titulo .preco {

    color: #0b3c5d;

    font-weight: bold;

}

 

.info-item {

    padding: 10px 0;

    border-bottom: 1px solid #e0e0e0;

}

 

.descricao {

    margin-top: 30px;

}

 

.financiamento {

    margin-top: 40px;

    background: #f2f2f2;

    padding: 30px;

    border-radius: 8px;

}

 

.financiamento input {

    width: 100%;

    padding: 12px;

    border-radius: 5px;

    border: 1px solid #ccc;

}

 

.financiamento button {

    margin-top: 20px;

    width: 100%;

    padding: 14px;

    background: #0b3c5d;

    color: #fff;

    border: none;

    border-radius: 5px;

    font-weight: bold;

}

 

 

 

 

 

/* CARROSSEL */

.carousel-inner img {

  height: 400px;

  /* background: #000; fundo para as sobras */

  /* object-fit: cover; */

}

 

 

 

/* LISTA DE VEÍCULOS */

.lista-veiculos {

    margin-top: 60px;

    margin-bottom: 60px;

}

 

.card-veiculo {

    display: block;

    background: #fff;

    text-decoration: none;

    color: #000;

    text-align: center;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    transition: 0.3s;
    

}

 

.card-veiculo:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}

 

.card-veiculo img {

    width: 100%;

    height: 180px;

    object-fit: cover;

}

 

.card-veiculo h3 {

    font-size: 16px;

    margin: 12px 0 4px;

}

 

.card-veiculo .preco {

    font-weight: bold;

    color: #1b8e3e;

    margin-bottom: 12px;

}

 

 

 

/* === WRAPPER DO BLUR === */

.carousel-blur-wrapper {

    position: relative;

    width: 100%;

    height: 420px;

    overflow: hidden;

}

 

/* === IMAGEM DE FUNDO (BLUR) === */

.carousel-blur-wrapper .blur-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: blur(30px);

    transform: scale(1.2);

    opacity: 0.9;

}

 

/* === IMAGEM PRINCIPAL (SEM CORTE) === */

.carousel-blur-wrapper .main-img {

    position: relative;

    width: 100%;

    height: 100%;

    object-fit: contain;

    z-index: 1;

}

 

 

 

body {

  background: linear-gradient(

    180deg,

    #d3deef 0%,   /* azul mais presente no topo */

    #e9eef5 45%, /* transição suave */

    #ffffff 100%

  );

  color: #2f3440;

}

 

.card {

  background-color: #ffffff;

  border-radius: 8px;

  padding: 24px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

}

 

/* Garante que a página ocupe 100% da tela */

html, body {

    width: 100%;

    height: 100%;

}

 

/* Fundo principal do site */

body {

    margin: 0;

    position: relative;

    z-index: 0;

 

    /* IMAGEM DE FUNDO */

    background-image: url("img/formula1.jpg");

    background-repeat: no-repeat;

    background-position: center center;

    background-attachment: fixed;

    background-size: cover;

 

    /* Cor de segurança caso a imagem não carregue */

    background-color: #000;

}

 

/* CAMADA DE ESCURECIMENTO (marca d’água) */

body::before {

    content: "";

    position: fixed;

    top: 0;

    left: 0;

 

    width: 100%;

    height: 100%;

 

    /* Ajuste a opacidade aqui (0.3 a 0.7) */

    background: rgba(0, 0, 0, 0.35);

 

    z-index: -1;

}

 

/* Garante que todo o conteúdo fique acima do fundo */

body > * {

    position: relative;

    z-index: 1;

}

 

 

 

nav {

    position: relative;

    z-index: 10000;

}

 

.menu {

    position: relative;

    z-index: 10001;

}

 

.dropdown {

    position: absolute;

    z-index: 10002;

}

 

 

.vehicle-info-bg {

  background: rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(4px);

  border-radius: 8px;

  padding: 1rem;

}

 

 

.estoque {

  background: transparent;

}

 

.card-carro {

  background: rgba(255, 255, 255, 0.92);

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);

  padding: 1rem;

}

.menu > li {
    padding-bottom: 10px;
}

.menu li {
    position: relative;
}