/*
   ==========================================
   1. VARIÁVEIS CSS E RESET DE ESTILOS
   Responsabilidade: Configuração base e variáveis globais
   ==========================================
*/

/* Raíz com variáveis CSS personalizadas */
:root {
    /* Cores principais do sistema de design */
    --primary-color: #0B3D91;
    --primary-dark: #072a66;
    --secondary-color: #00B4D8;
    --secondary-dark: #0096c7;
    --text-color: #333;
    --text-light: #666;
    --white: #ffffff;
    --light-bg: #f5f5f5;
    --form-bg: #f0f9ff;
    --border-color: #ddd;
    --accent-yellow: #FFD700;
    --scroll-background: #254a74;
    --scroll-corpo: #0077ff;

    /* Sombras e transições para efeitos visuais */
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;

    /* Dimensões e formas consistentes */
    --border-radius: 8px;
    --header-height: 90px;
}

/* Reset universal para garantir consistência cross-browser */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
   ==========================================
   2. ESTILOS GERAIS E COMPONENTES
   Responsabilidade: Configuração global e componentes reutilizáveis
   ==========================================
*/

/* Configuração do HTML */
html {
    font-size: 16px; /* Base para rem */
    scroll-behavior: smooth; /* Scroll suave */
}

/* Configuração do corpo da página */
body {
    background-color: var(--light-bg);
    line-height: 1.6; /* Altura de linha para legibilidade */
    font-family: 'Arial', sans-serif;
    overflow-x: hidden; /* Ocultar scroll horizontal */
    padding-top: var(--header-height); /* Espaço para header fixo */
}

/* Container principal para centralizar o conteúdo */
.container {
    width: 100%;
    max-width: 1200px; /* Largura máxima para legibilidade */
    margin: 0 auto; /* Centralização horizontal */
    padding: 0 20px; /* Espaçamento lateral */
}

/* Estilos globais para links, botões e imagens */
a {
    text-decoration: none; /* Remover sublinhado padrão */
    color: inherit; /* Herdar cor do pai */
    transition: var(--transition); /* Transição suave */
}

ul {
    list-style: none; /* Remover marcadores padrão */
}

button {
    cursor: pointer; /* Cursor pointer */
    font-family: 'Arial', sans-serif; /* Fonte consistente */
}

img {
    max-width: 100%; /* Responsividade de imagens */
    height: auto; /* Manter proporções */
    display: block; /* Remover espaço extra */
}

/* Scrollbar personalizada para Chromium/Blink */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-corpo);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-corpo);
    border-radius: 10px;
    border: 3px solid var(--scroll-background);
}

/* Scrollbar para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-corpo) var(--scroll-background);
}

/*
   ==========================================
   3. TÍTULOS E ELEMENTOS DE SEÇÃO
   Responsabilidade: Hierarquia visual e componentes comuns
   ==========================================
*/

/* Títulos de seção com design uniforme */
.section-title {
    text-align: center; /* Centralização */
    margin-bottom: 40px; /* Espaçamento abaixo */
    font-size: clamp(24px, 5vw, 32px); /* Responsivo com clamp */
    color: var(--primary-color); /* Cor da marca */
    position: relative; /* Para pseudo-elementos */
    padding-bottom: 15px; /* Espaço para linha decorativa */
}

/* Linha decorativa abaixo dos títulos */
.section-title::after {
    content: ''; /* Conteúdo vazio necessário */
    position: absolute; /* Posicionamento absoluto */
    bottom: 0; /* Posição no bottom */
    left: 50%; /* Centralização horizontal */
    transform: translateX(-50%); /* Centralização com transform */
    width: 80px; /* Largura da linha */
    height: 3px; /* Altura da linha */
    background-color: gray; /* Cor da linha */
}

/*
   ==========================================
   4. BOTÕES E ELEMENTOS INTERATIVOS
   Responsabilidade: Componentes de ação e CTA
   ==========================================
*/

/* Botões de chamada para ação (CTA) */
.cta-button,
.view-all-btn {
    display: inline-block; /* Comportamento de bloco em linha */
    background-color: var(--secondary-color); /* Cor secundária */
    color: white; /* Texto branco */
    padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 30px); /* Padding responsivo */
    border-radius: 4px; /* Cantos arredondados */
    font-size: clamp(16px, 2vw, 18px); /* Tamanho responsivo */
    font-weight: 500; /* Peso semi-negrito */
    transition: background-color 0.3s, transform 0.3s; /* Transições suaves */
    border: none; /* Sem borda */
}

/* Efeitos hover dos botões CTA */
.cta-button:hover,
.view-all-btn:hover {
    background-color: var(--secondary-dark); /* Cor mais escura */
    transform: translateY(-3px); /* Elevação sutil */
}

/*
   ==========================================
   5. SEÇÃO HERO (BANNER PRINCIPAL)
   Responsabilidade: Apresentação impactante da página inicial
   ==========================================
*/

/* Seção hero com imagem de fundo */
.hero-section {
    height: 80vh; /* 80% da altura da viewport */
    min-height: 500px; /* Altura mínima */
    background-image: url('../imagens/fotos-banner/banner-index.png'); /* Imagem de fundo */
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    display: flex; /* Layout flexbox para centralização */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    text-align: center; /* Texto centralizado */
    color: white; /* Texto branco */
}

/* Conteúdo centralizado do hero */
.hero-content {
    max-width: 800px; /* Largura máxima para legibilidade */
    padding: 0 20px; /* Espaçamento lateral */
}

/* Título principal do hero */
.hero-content h1 {
    font-size: clamp(28px, 5vw, 48px); /* Tamanho responsivo */
    margin-bottom: 20px; /* Espaçamento abaixo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* Parágrafo descritivo do hero */
.hero-content p {
    font-size: clamp(16px, 3vw, 20px); /* Tamanho responsivo */
    margin-bottom: 30px; /* Espaçamento abaixo */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/*
   ==========================================
   6. SEÇÃO DE PACOTES EM DESTAQUE
   Responsabilidade: Apresentação dos pacotes principais
   ==========================================
*/

/* Seção de pacotes com espaçamento responsivo */
.featured-packages {
    padding: clamp(40px, 8vw, 80px) 0; /* Padding responsivo */
}

/* Grid de pacotes responsivo */
.packages-grid {
    display: grid; /* Layout em grid */
    /* Padrão de grid responsivo para cards */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(12px, 2.5vw, 24px); /* Gap responsivo */
}

/*
   ==========================================
   7. CARDS DE PACOTES
   Responsabilidade: Apresentação visual de cada pacote
   ==========================================
*/

/* Cards principais dos pacotes */
.package-card {
    background-color: white; /* Fundo branco */
    border-radius: var(--border-radius); /* Cantos arredondados */
    overflow: hidden; /* Ocultar conteúdo que extrapola */
    box-shadow: var(--shadow); /* Sombra sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições */
    height: 100%; /* Altura total do grid */
    display: flex; /* Layout flexbox interno */
    flex-direction: column; /* Elementos em coluna */
    will-change: transform; /* Otimização para animações */
    /* Padronizar largura dos cards */
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

/* Efeito hover nos cards */
.package-card:hover {
    transform: translateY(-10px); /* Elevação no hover */
    box-shadow: var(--shadow-hover); /* Sombra maior */
}

/*
   ==========================================
   8. IMAGEM E BADGE DOS CARDS
   Responsabilidade: Área de imagem e indicadores visuais
   ==========================================
*/

/* Container da imagem do card */
.package-image {
    position: relative; /* Para posicionamento absoluto do badge */
    /* Diminuir altura para melhor proporção da imagem */
    height: 160px;
}

/* Imagens dos cards */
.package-image img {
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    object-fit: cover; /* Manter proporções */
    /* Garantir que a imagem não distorça ao reduzir o card */
    display: block;
}

/* Badge de destaque do pacote */
.package-badge {
    position: absolute; /* Posicionamento absoluto */
    top: 15px; /* Distância do topo */
    right: 15px; /* Distância da direita */
    background-color: var(--secondary-color); /* Cor secundária */
    color: white; /* Texto branco */
    padding: 5px 10px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 12px; /* Tamanho pequeno */
    font-weight: 500; /* Peso semi-negrito */
}

/*
   ==========================================
   9. VARIANTES DE CARDS
   Responsabilidade: Estilos alternativos para diferentes contextos
   ==========================================
*/

/* Variante alternativa do card (estilo tipo cartão comercial com ações) */
.package-card.alt {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), #fff);
    border-radius: 12px;
    padding-bottom: 10px;
}

.package-card.alt .package-image {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/*
   ==========================================
   10. AÇÕES DOS CARDS
   Responsabilidade: Botões e ações principais
   ==========================================
*/

/* Container das ações do card */
.card-actions {
    display: flex; /* Layout flexbox */
    gap: 10px; /* Espaçamento entre botões */
    align-items: center; /* Centralização vertical */
}

/*
   ==========================================
   11. FOOTER DOS CARDS
   Responsabilidade: Rodapé com ações principais
   ==========================================
*/

/* Rodapé dos cards */
.package-footer {
    display: flex; /* Layout flexbox */
    justify-content: space-between; /* Distribuição space-between */
    align-items: center; /* Centralização vertical */
    border-top: 1px solid #eee; /* Borda superior */
    padding-top: 12px; /* Espaçamento interno superior */
    margin-top: auto; /* Push para bottom do card */
}

/*
   ==========================================
   12. LINKS DE DETALHES DOS PACOTES
   Responsabilidade: Ação principal dos cards
   ==========================================
*/

/* Link para ver detalhes do pacote */
.view-details {
    background-color: var(--primary-color); /* Cor da marca */
    color: white; /* Texto branco */
    padding: 8px 14px; /* Espaçamento interno */
    border-radius: 6px; /* Cantos arredondados */
    width: 100%; /* Largura total */
    font-weight: 600; /* Peso semi-negrito */
    text-align: center;
    transition: background-color 0.2s; /* Transição de cor */
    text-decoration: none; /* Remover sublinhado */
}

/* Efeito hover no link de detalhes */
.view-details:hover {
    background-color: var(--primary-dark); /* Cor mais escura */
}

/*
   ==========================================
   13. CONTEÚDO DOS CARDS
   Responsabilidade: Área de texto e informações
   ==========================================
*/

/* Container do conteúdo textual */
.package-content {
    padding: 20px; /* Espaçamento interno */
    flex-grow: 1; /* Crescer para ocupar espaço disponível */
    display: flex; /* Layout flexbox */
    flex-direction: column; /* Elementos em coluna */
}

/* Títulos dos pacotes */
.package-content h3 {
    font-size: clamp(18px, 3vw, 20px); /* Tamanho responsivo */
    margin-bottom: 10px; /* Espaçamento abaixo */
    color: var(--primary-color); /* Cor da marca */
}

/*
   ==========================================
   14: METADADOS DOS PACOTES
   Responsabilidade: Informações adicionais (localização, preço, duração)
   ==========================================
*/

/* Container dos metadados */
.package-meta {
    display: flex; /* Layout flexbox */
    flex-direction: column; /* Elementos em coluna */
    gap: 8px; /* Espaçamento entre elementos */
    margin-bottom: 10px; /* Espaçamento abaixo */
}

/*
   ==========================================
   15. LOCALIZAÇÃO DOS PACOTES
   Responsabilidade: Indicação geográfica com ícone
   ==========================================
*/

/* Localização do pacote */
.meta-location {
    color: var(--text-color);
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    gap: 8px; /* Espaçamento entre ícone e texto */
    font-size: 14px; /* Tamanho small */
    color: var(--primary-color); /* Cor da marca */
}

/* Texto da localização */
.meta-location .location-text {
    color: var(--text-color); /* Cor do texto */
    font-weight: 600; /* Peso semi-negrito */
}

/*
   ==========================================
   16. INFORMAÇÕES GERAIS DOS PACOTES
   Responsabilidade: Duração, preço e outras informações
   ==========================================
*/

/* Informações gerais */
.meta-info {
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    gap: 8px; /* Espaçamento entre elementos */
    font-size: 14px; /* Tamanho small */
    color: var(--text-light); /* Cor do texto secundário */
}

/* Duração do pacote */
.meta-duration {
    color: var(--text-color); /* Cor do texto principal */
}

/* Separador */
.meta-sep {
    color: #ccc; /* Cor cinza clara */
    margin: 0 6px; /* Espaçamento lateral */
}

/* Preço do pacote */
.meta-price {
    color: var(--primary-dark); /* Cor escura da marca */
}

/*
   ==========================================
   17. BOTÃO DE VER TODOS
   Responsabilidade: Navegação para seção completa
   ==========================================
*/

/* Container do botão ver todos */
.view-all-container {
    text-align: center; /* Centralização */
    margin-top: 40px; /* Espaçamento acima */
}

/*
   ==========================================
   18. SEÇÃO DE DEPOIMENTOS
   Responsabilidade: Apresentação de avaliações de clientes
   ==========================================
*/

/* Seção de depoimentos */
.testimonials-section {
    padding: clamp(40px, 8vw, 80px) 0; /* Padding responsivo */
}

/*
   ==========================================
   19. SLIDER DE DEPOIMENTOS
   Responsabilidade: Carrossel horizontal de depoimentos
   ==========================================
*/

/* Container do slider */
.testimonials-slider {
    display: flex; /* Layout flexbox */
    gap: 20px; /* Espaçamento entre slides */
    overflow-x: auto; /* Scroll horizontal */
    scroll-snap-type: x mandatory; /* Snap obrigatório no eixo X */
    scrollbar-width: none; /* Remover scrollbar no Firefox */
    -ms-overflow-style: none; /* Remover scrollbar no IE */
    padding-bottom: 15px; /* Espaçamento inferior */
}

/* Ocultar scrollbar no Webkit */
.testimonials-slider::-webkit-scrollbar {
    display: none;
}

/*
   ==========================================
   20. SLIDES DE DEPOIMENTOS
   Responsabilidade: Cada card individual do slider
   ==========================================
*/

/* Slides individuais */
.testimonial-slide {
    flex: 0 0 100%; /* Não crescer, não encolher, largura base 100% */
    max-width: 100%; /* Largura máxima */
    scroll-snap-align: start; /* Alinhamento no início do slide */
}

/*
   ==========================================
   21. CONTEÚDO DOS DEPOIMENTOS
   Responsabilidade: Texto e informações dos depoimentos
   ==========================================
*/

/* Container do conteúdo */
.testimonial-content {
    background-color: white; /* Fundo branco */
    border-radius: var(--border-radius); /* Cantos arredondados */
    padding: clamp(20px, 4vw, 30px); /* Padding responsivo */
    box-shadow: var(--shadow); /* Sombra sutil */
    height: 100%; /* Altura total do slide */
}

/* Avaliação em estrelas */
.testimonial-rating {
    margin-bottom: 15px; /* Espaçamento abaixo */
    color: var(--accent-yellow); /* Cor amarela */
}

/* Texto do depoimento */
.testimonial-text {
    font-style: italic; /* Estilo itálico */
    margin-bottom: 20px; /* Espaçamento abaixo */
    color: var(--text-color); /* Cor do texto */
    font-size: clamp(14px, 2vw, 16px); /* Tamanho responsivo */
    line-height: 1.6; /* Altura de linha */
}

/*
   ==========================================
   22. AUTORES DOS DEPOIMENTOS
   Responsabilidade: Informações do autor com avatar
   ==========================================
*/

/* Container do autor */
.testimonial-author {
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    gap: 15px; /* Espaçamento entre avatar e texto */
}

/* Avatar do autor */
.testimonial-author img {
    width: 60px; /* Largura fixa */
    height: 60px; /* Altura fixa */
    border-radius: 50%; /* Formato circular */
    object-fit: cover; /* Manter proporções */
}

/* Informações do autor */
.author-info h4 {
    font-size: 16px; /* Tamanho intermediate */
    margin-bottom: 5px; /* Espaçamento abaixo */
    color: var(--primary-color); /* Cor da marca */
}

.author-info p {
    font-size: 14px; /* Tamanho small */
    color: black; /* Cor do texto */
}

/*
   ==========================================
   23. CONTROLES DO SLIDER
   Responsabilidade: Navegação manual do slider
   ==========================================
*/

/* Container dos controles */
.testimonial-controls {
    display: flex; /* Layout flexbox */
    justify-content: center; /* Centralização horizontal */
    gap: 15px; /* Espaçamento entre botões */
    margin-top: 30px; /* Espaçamento acima */
}

/* Botões de navegação */
.testimonial-prev,
.testimonial-next {
    width: 40px; /* Largura fixa */
    height: 40px; /* Altura fixa */
    border-radius: 50%; /* Formato circular */
    background-color: var(--primary-color); /* Cor da marca */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    transition: background-color 0.3s; /* Transição de cor */
}

/* Efeito hover nos controles */
.testimonial-prev:hover,
.testimonial-next:hover {
    background-color: var(--primary-dark); /* Cor mais escura */
}

/*
   ==========================================
   24. SEÇÃO DE NEWSLETTER
   Responsabilidade: Captura de e-mails dos visitantes
   ==========================================
*/

/* Seção de newsletter */
.newsletter-section {
    padding: clamp(40px, 6vw, 60px) 0; /* Padding responsivo */
    background-color: var(--primary-color); /* Fundo com cor da marca */
    color: white; /* Texto branco */
}

/* Conteúdo da newsletter */
.newsletter-content {
    text-align: center; /* Centralização */
    max-width: 700px; /* Largura máxima */
    margin: 0 auto; /* Centralização horizontal */
}

/* Título da newsletter */
.newsletter-content h2 {
    font-size: clamp(24px, 5vw, 32px); /* Tamanho responsivo */
    margin-bottom: 15px; /* Espaçamento abaixo */
    color: white; /* Texto branco */
}

/* Parágrafo da newsletter */
.newsletter-content p {
    margin-bottom: 30px; /* Espaçamento abaixo */
    opacity: 0.9; /* Transparência */
    font-size: clamp(14px, 2vw, 16px); /* Tamanho responsivo */
}

/*
   ==========================================
   25. FORMULÁRIO DE NEWSLETTER
   Responsabilidade: Interface de captura de e-mails
   ==========================================
*/

/* Container do formulário */
.newsletter-form-group {
    display: flex; /* Layout flexbox */
    max-width: 500px; /* Largura máxima */
    margin: 0 auto; /* Centralização horizontal */
}

/* Campo de e-mail */
.newsletter-form-group input {
    flex: 1; /* Crescer para ocupar espaço disponível */
    padding: 12px 15px; /* Espaçamento interno */
    border: none; /* Sem borda */
    border-radius: 4px 0 0 4px; /* Cantos arredondados apenas à esquerda */
    font-size: 16px; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
}

/* Foco no campo de e-mail */
.newsletter-form-group input:focus {
    outline: none; /* Remover outline */
}

/* Botão de inscrição */
.newsletter-btn {
    background-color: var(--secondary-color); /* Cor secundária */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 0 20px; /* Espaçamento horizontal */
    border-radius: 0 4px 4px 0; /* Cantos arredondados apenas à direita */
    font-weight: 500; /* Peso semi-negrito */
    transition: background-color 0.3s; /* Transição de cor */
}

/* Efeito hover no botão */
.newsletter-btn:hover {
    background-color: var(--secondary-dark); /* Cor mais escura */
}

/*
   ==========================================
   26. RODAPÉ PRINCIPAL
   Responsabilidade: Footer com links e informações
   ==========================================
*/

/* Footer principal */
.main-footer {
    background-color: var(--primary-dark); /* Fundo escuro */
    color: white; /* Texto branco */
    padding: clamp(40px, 6vw, 60px) 0 20px; /* Padding responsivo */
}

/*
   ==========================================
   27. COLUNAS DO RODAPÉ
   Responsabilidade: Layout em grid para seções do footer
   ==========================================
*/

/* Container das colunas */
.footer-columns {
    display: grid; /* Layout em grid */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colunas responsivas */
    gap: clamp(20px, 3vw, 30px); /* Gap responsivo */
    margin-bottom: 40px; /* Espaçamento abaixo */
}

/*
   ==========================================
   28. TÍTULOS DAS COLUNAS
   Responsabilidade: Títulos das seções do footer
   ==========================================
*/

/* Títulos das colunas */
.footer-column h4 {
    font-size: 18px; /* Tamanho intermediate */
    margin-bottom: 20px; /* Espaçamento abaixo */
    position: relative; /* Para pseudo-elementos */
    padding-bottom: 10px; /* Espaço para linha */
    color: white; /* Texto branco */
}

/* Linha decorativa nos títulos */
.footer-column h4::after {
    content: ''; /* Conteúdo vazio */
    position: absolute; /* Posicionamento absoluto */
    bottom: 0; /* Posição no bottom */
    left: 0; /* Posição à esquerda */
    width: 40px; /* Largura da linha */
    height: 2px; /* Altura da linha */
    background-color: var(--secondary-color); /* Cor secundária */
}

/*
   ==========================================
   29. LINKS DO RODAPÉ
   Responsabilidade: Navegação e links informativos
   ==========================================
*/

/* Links das colunas */
.footer-column ul li {
    margin-bottom: 10px; /* Espaçamento entre links */
}

/* Efeito hover nos links */
.footer-column ul li a:hover {
    color: var(--secondary-color); /* Cor secundária */
    padding-left: 5px; /* Deslocamento sutil */
}

/*
   ==========================================
   30. RODAPÉ INFERIOR
   Responsabilidade: Copyright e informações legais
   ==========================================
*/

/* Container inferior do footer */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Borda superior sutil */
    padding-top: 20px; /* Espaçamento interno superior */
    text-align: center; /* Centralização */
}

/* Copyright */
.copyright {
    font-size: 14px; /* Tamanho small */
    color: rgba(255, 255, 255, 0.6); /* Transparente */
}

/*
   ==========================================
   31. MEDIA QUERIES PARA RESPONSIVIDADE
   Responsabilidade: Adaptações para diferentes tamanhos de tela
   ==========================================
*/

/* Estilos para desktop (telas >= 993px) */
@media (min-width: 993px) {
    .main-nav {
        display: flex;
    }
}

/* Estilos para tablet e mobile (telas <= 992px) */
@media (max-width: 992px) {
    .mobile-menu-toggle {
        display: block;
    }
    
    .main-nav {
        display: none;
    }
    
    .testimonial-slide {
        flex: 0 0 calc(50% - 10px); /* 50% menos gap */
    }
}

/* Estilos para smartphone (telas <= 768px) */
@media (max-width: 768px) {
    .testimonial-slide {
        flex: 0 0 100%; /* Largura total */
    }
    
    .newsletter-form-group {
        flex-direction: column; /* Elementos em coluna */
        gap: 10px; /* Espaçamento entre elementos */
    }
    
    .newsletter-form-group input,
    .newsletter-btn {
        border-radius: 4px; /* Cantos arredondados uniformes */
        width: 100%; /* Largura total */
    }
}