/* 1. RESET E VARIÁVEIS */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}

:root{
    --roxo:#5a2ea6;
    --roxo-escuro:#3b1d73;
    --laranja:#ff7a00;
    --bg:#f5f3fa;
}

body{
    background:var(--bg);
    overflow-x:hidden;
    padding-top: 152px; /* Ajuste para o conteúdo não começar debaixo do header fixo */
}

/* 2. HEADER */
header{
    position:fixed;
    top: 0; /* Garante que comece no topo */
    width:100%;
    padding:15px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(90,46,166,0.95); /* Aumentei um pouco a opacidade */
    backdrop-filter:blur(10px);
    color:#fff;
    z-index:10; /* Z-index alto para ficar sobre tudo */
}

nav a{color:white;margin:0 15px;text-decoration:none; font-weight: 400;}
nav a:hover{text-decoration: underline;}

.btn{
    background:var(--laranja);
    padding:10px 22px;
    border-radius:8px;
    color:white;
    text-decoration:none;
    display: inline-block; /* Garante que o padding funcione bem */
    transition:.3s;
    border: none;
    cursor: pointer;
}
.btn:hover{transform:scale(1.05); filter: brightness(1.1);}

/* 3. HERO (CARROSSEL) */
.hero {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    text-align: center;
    margin-top: -80px; /* Compensa o padding do body para a imagem subir */
}

.hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2;
    overflow: hidden;
}

/* Camada 1: Imagem de fundo esticada e borrada (Efeito Blur) */
.hero-bg::before {
    content: "";
    position: absolute;
    top: -10%; left: -10%; /* Margem extra para o desfoque não criar bordas brancas */
    width: 120%; height: 120%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.6); /* Desfoca e escurece o fundo */
    animation: backgroundCarousel 15s infinite ease-in-out;
}

/* Camada 2: Imagem principal centralizada e sem NENHUM corte */
.hero-bg::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: contain; /* Garante que a foto inteira apareça na tela */
    background-repeat: no-repeat;
    background-position: center;
    animation: backgroundCarousel 15s infinite ease-in-out;
}

/* Camada escura geral (Mantida para garantir contraste do texto) */
.hero::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

/* Camada escura para leitura */
.hero::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.hero h1{font-size:48px; margin-bottom:15px; text-shadow: 2px 2px 10px rgba(0,0,0,0.5);}

@keyframes backgroundCarousel {
    0%, 25% { background-image: url('../img/carrosel/BC_01.webp'); }
    28%, 50% { background-image: url('../img/carrosel/BC_02.webp'); }
    53%, 78% { background-image: url('../img/carrosel/BC_04.webp'); } 
    81%, 100% { background-image: url('../img/carrosel/BC_03.webp'); }
}

/* 4. SEÇÕES E CARDS */
.section{padding:80px 20px; text-align:center;}

.cards{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top: 30px;}

.card{
    background:white;
    padding:30px;
    border-radius:15px;
    width:280px;
    box-shadow:0 10px 20px rgba(0,0,0,.05);
    transition:.4s;
}
.card:hover{transform:translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.15);}

/* 5. SIMULADOR */
.simulador{
    background: linear-gradient(135deg, var(--roxo), var(--roxo-escuro));
    color: white;
    padding: 40px;
    border-radius: 20px;
    max-width: 60%;
    margin: 20px auto;
}

input, select {
    padding: 12px;
    margin: 10px;
    border-radius: 8px;
    border: none;
    width: 80%; /* Melhora visual em telas menores */
    max-width: 300px;
}

/* 6. ANIMAÇÃO FADE (CORRIGIDO DUPLICIDADE) */
.fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade.show {
    opacity: 1;
    transform: translateY(0);
}

/* 7. LOGO E FOOTER */
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { width: 35px; height: 35px; object-fit: cover; }

footer{
    background:var(--roxo-escuro);
    color:white;
    padding:30px;
    text-align:center;
}