/* =========================
   Seção Newsletter
   ========================= */

/* Container principal da newsletter */
.newsletter {
    background-color: var(--fundoB); /* Fundo escuro definido */
    padding: 5rem 0; /* Espaçamento vertical */
}

/* Container interno para centralizar conteúdo */
.newsletter__container {
    max-width: 75rem; /* Largura máxima */
    margin: 0 auto; /* Centraliza horizontalmente */
}

/* Título da newsletter */
.newsletter__titulo {
    color: var(--letraB); /* Cor do texto (destaque) */
    font-family: var(--fonte-titulo); /* Fonte de títulos */
    font-size: 1.5rem;
    line-height: 1.2em;
    text-align: center; /* Centraliza o texto */
    margin-bottom: 2rem; /* Espaço abaixo */
    margin-top: 50px; /* Espaço acima */
}

/* Formulário da newsletter (input + botão) */
.newsletter__formulario {
    display: flex; /* Layout horizontal */
    gap: 1rem; /* Espaçamento entre input e botão */
}

/* Campo de input para email */
.newsletter__input {
    flex-grow: 1; /* Ocupa todo espaço disponível */
    height: 3rem; /* Altura do input */
    padding: 1rem 1.5rem; /* Espaçamento interno */
    border: 2px solid var(--fundoA); /* Borda */
    border-radius: 8px; /* Bordas arredondadas */
    margin-top: 53px; /* Espaçamento superior */
    background-color: var(--fundoB); /* Fundo do input */
}

/* Botão de enviar */
.newsletter__button {
    padding: 1rem; /* Espaçamento interno */
    color: var(--letraA); /* Cor do texto */
    background-color: var(--fundoA); /* Cor de fundo */
    font-family: var(--fonte-texto);
    font-size: 1rem;
    margin-top: 50px; /* Espaço acima */
    margin-bottom: 100px; /* Espaço abaixo */
    line-height: 1.2em;
    border: none; /* Remove borda padrão */
    cursor: pointer; /* Cursor indica clicável */
    border-radius: 8px; /* Bordas arredondadas */
}

/* Hover: muda cor e aplica leve zoom */
.newsletter__button:hover {
    background-color: #6F99FF; /* muda a cor do botão */
    transform: scale(1.02); /* leve zoom */
}

/* Pseudo-elemento hover (tooltip) */
.newsletter__button:hover::after {
    opacity: 1; /* mostra o tooltip (se houver) */
}

/* =========================
   MEDIA QUERIES
   ========================= */

/* Tablets e notebooks menores */
@media screen and (max-width: 1200px) {
    .newsletter {
        padding: 0.5rem 1.5rem; /* reduz padding vertical e lateral */
    }
}

/* Celulares */
@media screen and (max-width: 730px) {
    .newsletter__formulario {
        flex-direction: column; /* empilha input e botão verticalmente */
        justify-content: center; /* centraliza verticalmente */
        align-items: center; /* centraliza horizontalmente */
    }
}