:root {
    --black-pure: #000000;
    --black-card: #141414;
    --orange-main: #ff6600;
    --orange-hover: #e65c00;
    --white: #ffffff;
    --gray-text: #a0a0a0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--black-pure); color: var(--white); font-family: sans-serif; }

/* Header & Logo */
.header { position: fixed; top: 0; width: 100%; background: rgba(0,0,0,0.9); padding: 10px 0; z-index: 1000; border-bottom: 2px solid var(--orange-main); }
.header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.logo-img { height: 40px; }

/* Nav */
.tab-link { background: none; border: none; color: var(--gray-text); cursor: pointer; margin-right: 20px; font-weight: bold; }
.tab-link.active { color: var(--orange-main); }
.btn-top { background: var(--orange-main); color: white; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-weight: bold; }

/* Grid */
.container { max-width: 1200px; margin: 100px auto 40px; padding: 0 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

/* Card Style */
.card { background: var(--black-card); border-radius: 10px; overflow: hidden; border: 1px solid #222; transition: 0.3s; }
.card:hover { transform: translateY(-5px); border-color: var(--orange-main); }
.card-image img { width: 100%; height: 320px; object-fit: cover; }

.badge { position: absolute; top: 10px; left: 10px; background: var(--orange-main); padding: 5px 10px; border-radius: 5px; font-size: 10px; font-weight: bold; }

.card-body { padding: 15px; text-align: center; }
.card-body h3 { font-size: 18px; color: var(--orange-main); text-transform: uppercase; margin-bottom: 5px; }
.card-body p { font-size: 14px; color: var(--gray-text); margin-bottom: 15px; }

.btn { display: block; background: var(--orange-main); color: white; text-decoration: none; padding: 10px; border-radius: 5px; font-weight: bold; }

.footer { text-align: center; padding: 40px; border-top: 1px solid #222; }
.logo-footer { height: 30px; opacity: 0.5; margin-bottom: 10px; }

/* AJUSTE DO SLIDER (BANNER) */
.slider {
    margin-top: 70px; /* Isso empurra o banner para baixo do menu fixo */
    width: 100%;
    height: 400px; /* Altura no computador */
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.slides {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem preencher o espaço sem esticar */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Efeito de fade suave */
    z-index: 1;
}

.slide-img.active {
    opacity: 1;
    z-index: 2;
}

/* Ajuste para Celular */
@media (max-width: 768px) {
    .slider {
        margin-top: 60px;
        height: 250px; /* Altura menor no celular */
    }
}
/* CONTAINER DOS PLANOS - LADO A LADO */
.pricing-grid {
    display: flex;
    flex-wrap: nowrap; /* Impede que eles quebrem a linha no PC */
    justify-content: center; /* Centraliza o grupo */
    align-items: stretch; /* Deixa todos com a mesma altura */
    gap: 20px; /* Espaço entre eles */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* AJUSTE DO CARD */
.price-card {
    flex: 1; /* Faz os 3 terem a mesma largura exata */
    max-width: 350px; /* Largura máxima para não esticar demais */
    background: var(--black-card);
    border: 1px solid #333;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    transition: 0.3s;
    display: flex;
    flex-direction: column; /* Organiza o conteúdo interno de cima para baixo */
    justify-content: space-between; /* Empurra o botão para o final do card */
}

/* EFEITO NA IMAGEM CLICÁVEL */
.plan-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: 0.3s;
    cursor: pointer;
}

.plan-img:hover {
    transform: scale(1.03); /* Dá um zoom leve ao passar o mouse */
    filter: brightness(1.2);
}

/* RESPONSIVIDADE (PARA CELULAR) */
@media (max-width: 900px) {
    .pricing-grid {
        flex-direction: column; /* No celular, eles voltam a ficar um abaixo do outro */
        align-items: center;
    }
    
    .price-card {
        width: 100%;
        max-width: 400px;
    }
}