* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    /* Cores Oficiais Vivo */
    --primary: #660099;    /* Roxo Vivo */
    --secondary: #F2F2F2;  /* Cinza muito claro */
    --dark: #333333;       /* Grafite para textos */
    --light: #FFFFFF;      /* Branco */
    --accent: #FF4400;     /* Laranja Vivo (opcional para botões/detalhes) */
}

body { 
    background-color: var(--light); 
    color: var(--dark); 

    padding-top: 80px;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header */
.header {
    background: var(--primary);
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid var(--primary); /* Linha roxa no topo */
    position: fixed;    /* Fixa o elemento na tela */
    top: 0;             /* Cola no topo */
    left: 0;            /* Alinha à esquerda */
    width: 100%;        /* Garante que ocupe toda a largura */
    z-index: 1000; 

}
/* Carrossel e Cards */
.planos-section { 
    padding: 50px 0; 
    background: var(--secondary); 
}

.swiper { width: 100%; max-width: 1000px; padding-bottom: 40px; }

/* Estilização das setas */
.swiper-button-next, .swiper-button-prev {
    color: var(--primary);
    transform: scale(0.6); 
}

/* Garante que os cards tenham a mesma altura */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.card-plano {
    background: var(--light);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    transition: transform 0.3s;
    border: 1px solid #ddd;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Responsividade para as setas */
@media (max-width: 480px) {
    .swiper-button-next, .swiper-button-prev {
        display: none;
    }
    .swiper {
        padding: 20px 20px 40px 20px;
    }
}

/* DESTAQUE VIVO */
.card-plano.destaque { 
    border: 2px solid var(--primary); 
    transform: scale(1.05); 
}

.badge { 
    background: var(--primary); 
    color: #fff; 
    font-size: 12px; 
    padding: 5px 15px; 
    border-radius: 20px; 
}

.card-plano h3 { 
    font-size: 24px; 
    margin: 15px 0; 
    color: var(--primary); /* Títulos dos planos em roxo */
}

.preco { 
    font-size: 32px; 
    font-weight: bold; 
    color: var(--primary); 
}

.preco span { font-size: 16px; color: #666; }

.card-plano ul { list-style: none; margin: 20px 0; color: #555; }
.publi {
    width: 100%;           /* Garante que a imagem ocupe toda a largura do card */
    height: auto;          /* Mantém a proporção da imagem */
    display: block;        /* Remove espaços indesejados abaixo da imagem */
    border-radius: 10px;   /* Arredonda as pontas para combinar com o card */
    margin-bottom: 20px;   /* Espaço entre a imagem e o botão "Assinar Agora" */
    object-fit: cover;     /* Garante que a imagem preencha o espaço sem distorcer */
}

.btn-card { 
    display: block; 
    background: var(--primary); 
    color: #fff; 
    text-decoration: none; 
    padding: 12px; 
    border-radius: 8px; 
    font-weight: bold; 
}

.btn-card:hover {
    background: #4d0075;
}

/* Headline */
.headline { 
    text-align: center; 
    padding: 60px 20px; 
    background: var(--light); 
}

.headline h2 { 
    font-size: 36px; 
    color: var(--primary); 
    margin-bottom: 10px; 
}

/* Formulário */
.contato-section { 
    padding: 60px 0; 
    background: var(--primary); /* Fundo roxo na seção de contato */
    color: #fff; 
}

.form-captura { 
    max-width: 500px; 
    margin: 0 auto; 
    background: #fff; 
    color: #333; 
    padding: 40px; 
    border-radius: 10px; 
}

.form-captura h3 { 
    margin-bottom: 20px; 
    text-align: center; 
    color: var(--primary); 
}
.alerta {
    padding: 15px;
    background-color: #d4edda; /* Verde claro */
    color: #155724;            /* Texto verde escuro */
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.input-group { margin-bottom: 15px; }

.input-group label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: bold; 
    color: var(--dark);
}

.input-group input{ 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
}
.input-group1 label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: bold; 
    color: var(--dark);
}
/* Estilização do novo campo Textarea */
.input-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    resize: vertical; /* Permite ao usuário aumentar a altura, mas não a largura */
}

/* Ajuste no seletor de inputs para incluir o textarea no estilo */
.input-group input, 
.input-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline-color: var(--primary);
}
.btn-enviar { 
    width: 100%; 
    padding: 15px; 
    background: var(--primary); 
    color: #fff; 
    border: none; 
    border-radius: 5px; 
    font-size: 18px; 
    cursor: pointer; 
    font-weight: bold; 
}

.btn-enviar:hover { 
    background: #4d0075;
}

/* Rodapé */
.footer { 
    text-align: center; 
    padding: 30px; 
    background: #4d0075; /* Roxo mais escuro para o rodapé */
    color: #ddd; 
    font-size: 14px; 
}