/* ==========================================
   BLOCO 1: RESET CSS BÁSICO
   Responsabilidade: Normalizar comportamento do navegador
   ========================================== */

/* Reset universal para consistente cross-browser */
* {
    margin: 0; /* Remover todas as margens padrão */
    padding: 0; /* Remover todos os paddings padrão */
    box-sizing: border-box; /* Modelo de box sizing previsível */
}

/* ==========================================
   BLOCO 2: HEADER FIXO
   Responsabilidade: Navegação superior fixa com branding
   ========================================== */


/* ==========================================
   BLOCO 3: CONTAINER PRINCIPAL
   Responsabilidade: Layout centralizado com espaçamento para header
   ========================================== */

/* Container principal com espaçamento para header fixo */
main {
    padding-top: 90px; /* Espaço superior para compensar header fixo */
    max-width: 1200px; /* Largura máxima para legibilidade */
    margin: 0 auto; /* Centralização horizontal */
    padding-left: 15px; /* Espaçamento lateral responsivo */
    padding-right: 15px; /* Espaçamento lateral responsivo */
}

/* ==========================================
   BLOCO 4: SEÇÃO HERO
   Responsabilidade: Header impactante com imagem de fundo
   ========================================== */

/* Seção hero com imagem de fundo e sobreposição */
.hero-section {
    height: 70vh; /* 70% da altura da viewport */
    min-height: 450px; /* Altura mínima para consistência */
    background-image: url('../imagens/fotos-banner/banner-parceiros.png'); /* Imagem de fundo */
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    display: flex; /* Layout flexbox para centralização */
    flex-direction: column; /* Layout vertical para quebra de linha */
    align-items: center; /* Centralização horizontal */
    justify-content: center; /* Centralização vertical */
    color: white; /* Texto branco */
    text-align: center; /* Texto centralizado */
    position: relative; /* Para posicionamento de elementos filhos */
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra dramática */
    margin-bottom: 40px; /* Espaçamento abaixo da seção */
}

/* ==========================================
   BLOCO 5: SOBREPOSÃO DO HERO
   Responsabilidade: Overlay escuro para legibilidade do texto
   ========================================== */

/* Pseudo-elemento para overlay escuro */
.hero-section::before {
    content: ''; /* Conteúdo vazio necessário para pseudo-elemento */
    position: absolute; /* Posicionamento absoluto sobre a imagem */
    inset: 0; /* Cobrir toda a área do pai */
    border-radius: 12px; /* Cantos arredondados para combinar */
    z-index: 0; /* Camada atrás do conteúdo de texto */
}

/* ==========================================
   BLOCO 6: TÍTULO DO HERO
   Responsabilidade: Título principal da seção
   ========================================== */

/* Título principal da seção hero */
.hero-section h1 {
    position: relative; /* Para estar acima do overlay */
    font-size: 3rem; /* Tamanho grande para impacto */
    font-weight: 700; /* Peso bold para destaque */
    z-index: 1; /* Camada acima do overlay */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* Sombra dramática para legibilidade */
    display: block; /* Garantir comportamento de bloco */
}

/* Subtítulo da seção hero */
.hero-section h3 {
    position: relative !important; /* Para estar acima do overlay */
    font-size: 1.5rem !important; /* Tamanho intermediate */
    font-weight: 400 !important; /* Peso normal para contraste */
    z-index: 1 !important; /* Camada acima do overlay */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important; /* Sombra para legibilidade */
    margin-top: 20px !important; /* Espaçamento abaixo do título */
    margin-bottom: 0 !important; /* Remove margem inferior padrão */
    max-width: 800px !important; /* Largura máxima para leitura */
    line-height: 1.4 !important; /* Altura de linha para legibilidade */
    display: block !important; /* FORÇA quebra de linha */
    clear: both !important; /* Limpa floats se houver */
    width: 100% !important; /* Força largura total */
}

/* ==========================================
   BLOCO 7: TÍTULOS DE SEÇÕES
   Responsabilidade: Hierarquia visual para seções de conteúdo
   ========================================== */

/* Títulos das seções principais */
.section-title {
    margin: 40px 0 20px; /* Espaçamento vertical */
    text-align: center; /* Centralização */
    font-size: 2rem; /* Tamanho intermediate */
    font-weight: 700; /* Peso bold */
    color: var(--primary-color); /* Cor da marca */
    letter-spacing: 1px; /* Espaçamento entre letras */
}

.section-title-p {
    margin: 0 0 40px; /* Espaçamento abaixo */
    text-align: center; /* Centralização */
    font-size: 1.1rem; /* Tamanho legível */
    color: #555; /* Cor neutra */
}

/* ==========================================
   BLOCO 8: CONTAINER DO CAROUSEL
   Responsabilidade: Layout centralizado para carousel de parceiros
   ========================================== */

/* Container principal do carousel */
.carousel {
    max-width: 900px; /* Largura máxima para carousel */
    margin: 0 auto 60px; /* Centralização e espaçamento abaixo */
}

/* ==========================================
   BLOCO 9: CONFIGURAÇÃO DO SLICK SLIDER
   Responsabilidade: Customização dos dots do carousel
   ========================================== */

/* Posicionamento dos dots do Slick Slider */
.slick-dots {
    bottom: -30px; /* Posicionamento abaixo do carousel */
}

/* ==========================================
   BLOCO 10: CONFIGURAÇÃO DOS SLIDES
   Responsabilidade: Remoção de outline para melhor UX
   ========================================== */

/* Estilo dos containers dos slides */
.carousel div {
    outline: none; /* Remove outline azul no foco */
}

/* ==========================================
   BLOCO 11: IMAGENS DO CAROUSEL
   Responsabilidade: Formatação das imagens dos parceiros
   ========================================== */

/* Imagens dos parceiros no carousel */
.carousel img {
    width: 150px; /* Largura fixa */
    height: 150px; /* Altura fixa */
    border-radius: 50%; /* Formato circular */
    object-fit: cover; /* Manter proporções da imagem */
    border: 3px solid transparent; /* Borda transparente base */
    transition: border-color 0.3s ease, transform 0.3s ease; /* Animações suaves */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    cursor: pointer; /* Indicar que é clicável */
    margin: 0 auto; /* Centralização horizontal */
    display: block; /* Comportamento de bloco para centralização */
}

/* ==========================================
   BLOCO 12: EFEITO HOVER DAS IMAGENS
   Responsabilidade: Interatividade visual nas imagens
   ========================================== */

/* Efeito hover nas imagens dos parceiros */
.carousel img:hover {
    border-color: var(--primary-color); /* Borda na cor da marca */
    transform: scale(1.05); /* Escala sutil no hover */
    box-shadow: 0 6px 15px rgba(11, 61, 145, 0.5); /* Sombra colorida no hover */
}

/* ==========================================
   BLOCO 13: RESPONSIVIDADE TABLET
   Responsabilidade: Adaptação para telas médias
   ========================================== */

/* Media query para tablets */
@media (max-width: 992px) {
    /* Reduzir tamanho das imagens do carousel */
    .carousel img {
        width: 120px; /* Largura reduzida */
        height: 120px; /* Altura reduzida */
    }
}

/* ==========================================
   BLOCO 14: RESPONSIVIDADE MOBILE
   Responsabilidade: Adaptação para smartphones
   ========================================== */

/* Media query para smartphones */
@media (max-width: 576px) {
    /* Reduzir ainda mais o tamanho das imagens */
    .carousel img {
        width: 100px; /* Largura para mobile */
        height: 100px; /* Altura para mobile */
    }
}