/* Variáveis de Cores Baseadas no seu Logo */
:root {
    --roxo-fundo: #4A148C;    /* Roxo escuro */
    --rosa-destaque: #EC407A; /* Rosa vibrante */
    --branco-texto: #FFFFFF;
    --verde-whatsapp: #25D366; 
}

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: var(--roxo-fundo);
    color: var(--branco-texto);
    line-height: 1.6;
    text-align: center;
    padding: 20px;
}

/* Header/Logo */
header {
    padding: 20px 0;
}
.logo {
    max-width: 150px; /* Ajuste o tamanho da logo */
    height: auto;
    margin-bottom: 15px;
}
header h1 {
    font-size: 1.8em;
    margin-bottom: 5px;
    color: var(--rosa-destaque);
}
header p {
    font-size: 1.1em;
    margin-bottom: 10px;
}

/* --- Botão CTA (Call to Action) --- */
.cta-area {
    padding: 10px 0;
}

.cta-button {
    display: inline-block;
    background-color: var(--verde-whatsapp);
    color: var(--branco-texto);
    padding: 18px 35px;
    font-size: 1.4em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 45px; /* Botão arredondado estilo WhatsApp */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
    text-transform: uppercase;
}
.cta-button:hover {
    background-color: #38E674;
}

/* Efeito Pulsante para o Botão (Aumenta o CTR) */
.pulse-button {
    position: relative;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); /* Cor de pulso verde */
    }
    70% {
        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Seção de Vantagens (Benefits) */
.benefits {
    padding: 30px 0;
}
.benefits h2 {
    font-size: 1.5em;
    color: var(--rosa-destaque);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--rosa-destaque);
    display: inline-block;
    padding-bottom: 5px;
}
.benefits ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}
.benefits li {
    background-color: #5B2C6F; /* Fundo roxo um pouco mais claro */
    margin: 10px 0;
    padding: 15px;
    border-radius: 8px;
    font-size: 1.1em;
}

/* Rodapé */
footer {
    margin-top: 40px;
    font-size: 0.8em;
    color: #bbb;
}

/* --- Responsividade (Ajustes para Mobile Pequeno) --- */
@media (max-width: 600px) {

    /* HEADER */
    header {
        /* Reduz ainda mais o padding do topo */
        padding: 15px 10px; 
    }

    .logo {
        /* Garante que a logo não seja muito grande */
        max-width: 150px;
        margin-bottom: 5px; /* Espaço mínimo */
    }

    header h1 {
        /* Reduz o tamanho da fonte para o título caber em uma linha ou duas */
        font-size: 1.4em; 
        margin-bottom: 5px;
        line-height: 1.2; /* Tira o espaçamento vertical entre linhas */
    }

    header p {
        /* Se houver subtítulo, reduzir o espaçamento */
        font-size: 1em;
        margin-bottom: 10px;
    }

    /* BOTÃO CTA */
    .cta-area {
        /* Reduz o padding acima e abaixo do botão */
        padding: 10px 0; 
    }
    
    .cta-button {
        /* Ajusta o tamanho da fonte e do padding interno do botão */
        font-size: 1.2em;
        padding: 12px 25px;
    }
    
    /* BENEFÍCIOS */
    .benefits {
        padding: 20px 0;
    }
}