/* Estilos globais para a landing page */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    width: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* Regras globais para elementos */
section, div, form, input, textarea, p, h1, h2, h3, h4, h5, h6 {
    max-width: 100%;
}

/* Regra específica para todas as seções do site */
section {
    position: relative;
    width: 100%;
    max-width: 100vw;
}

.container {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* Controle de texto para evitar transbordamento */
p, h1, h2, h3, h4, h5, h6, a, span, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
    body {
        overflow-x: hidden;
        position: relative;
        width: 100%;
    }
    
    .container, [class*="-container"] {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }
    
    /* Ajustes para seções em telas pequenas */
    section {
        width: 100%;
        max-width: 100%;
    }
}

/* Utilitários */
.text-center {
    text-align: center;
}

/* Regras de proteção contra overflow horizontal para todos os tipos de elementos */
table, iframe, video, object, embed {
    max-width: 100%;
    width: auto;
    height: auto;
}

/* Garantir que imagens e mídia incorporada não causem rolagem horizontal */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Contêineres gerais */
.container, .row, [class*="col-"] {
    max-width: 100%;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 3rem;
}

/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
}

/* Classe para destacar texto na cor amarela do Brasil */
.destaque-amarelo {
    color: #FFDF00; /* Amarelo da bandeira brasileira */
    font-weight: 600;
}

/* Classe para destacar texto na cor azul do Brasil */
.destaque-azul {
    color: #002776; /* Azul da bandeira brasileira */
    font-weight: 600;
}

/* Remover sublinhado de ícones em links */
a i, a:hover i, a:focus i {
    text-decoration: none !important;
}

/* Remover sublinhado de ícones Font Awesome */
.fas, .fab, .far, .fal, .fad {
    text-decoration: none !important;
}

/* Links contendo ícones não devem ter sublinhado */
a:hover .fas, a:hover .fab, a:hover .far, a:hover .fal, a:hover .fad,
a:focus .fas, a:focus .fab, a:focus .far, a:focus .fal, a:focus .fad {
    text-decoration: none !important;
}