@charset "UTF-8";

/* Importa arquivos modulares */
@import url('_variables.css');
@import url('_header.css');
@import url('_footer.css');

/* ========================================
   MAIN - ESTRUTURA BASE
   ======================================== */

main {
    min-width: var(--min-w);
    max-width: var(--max-w);
    margin: auto;
    padding: 20px;
}

article {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* ALINHA com a borda direita do nav */
    /* max-width: 1020px; 840px (nav) + 90px (padding logo esquerda) + 90px (gap) */
}

article .banner-container,
article .conteudo-tres-colunas {
    margin: 0 auto;
}

article aside {
    margin: 0 auto 100px auto;
}

/* ========================================
   BANNER - SEÇÃO 1
   ======================================== */

.banner-container {
    position: relative;
    width: 100%; /* Ocupa toda a largura do article (1020px) */
    max-width: 1020px;
    height: 220px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.banner.img-background {
    width: 100%;
    height: 100%;
}

.banner.img-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.banner.text {
    position: absolute;
    bottom: 25px; /* Volta para 25px conforme especificação */
    right: 25px; /* Volta para 25px conforme especificação */
    font-family: var(--fonte-destaque);
    font-size: 57px;
    font-weight: 700;
    color: var(--c_red);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

/* ========================================
   TRÊS COLUNAS DE TEXTO - SEÇÃO 2
   ======================================== */

.conteudo-tres-colunas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%; /* Ocupa toda a largura do article */
    max-width: 1020px;
}

.coluna-texto {
    color: var(--c_blue2);
}

.coluna-texto h3 {
    font-family: var(--fonte-destaque);
    font-size: 1.3rem;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 15px;
    color: var(--c_blue2);
}

.coluna-texto p {
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
}

/* Lista na terceira coluna */
.coluna-texto ul {
    margin: 0;
    padding-left: 20px;
}

.coluna-texto ul li {
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 6px;
    color: var(--c_blue2);
}

/* ========================================
   TRÊS BALÕES VERMELHOS - SEÇÃO 3
   ======================================== */

aside {
    width: 100%; /* Ocupa toda a largura do article */
    max-width: 1020px;
}

aside > h3 {
    font-family: var(--fonte-destaque);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--c_blue2);
    text-align: left; /* Alinha à esquerda */
    margin-bottom: 30px;
    padding-left: 0; /* Remove padding para alinhar com primeiro balão */
}

.tres-baloes-vermelhos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Distribui igualmente */
    gap: 30px;
    width: 100%;
    max-width: 1020px;
}

.balao-vermelho {
    background-color: var(--c_red);
    width: 100%; /* Flexível dentro do grid */
    max-width: 320px; /* Limita o tamanho máximo */
    height: 250px;
    padding: 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.balao-vermelho:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.balao-vermelho h3 {
    padding: 20px 20px 5px;
    font-family: var(--fonte-destaque);
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;
    color: var(--c_white);
    margin-bottom: 1px;
}

.balao-vermelho p {
    padding: 0 20px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--c_white);
    flex-grow: 1; /* Ocupa espaço disponível */
}

.balao-vermelho button {
    background-color: var(--c_white);
    color: var(--c_blue2);
    font-weight: bold;
    font-size: 0.95rem;
    padding: 10px 20px;
    margin: 0 20px 20px; /* Margem lateral para não colar nas bordas */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center;
}

.balao-vermelho button:hover {
    background-color: var(--c_yellow);
    color: var(--c_blue3);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ========================================
   RESPONSIVIDADE - 1100px
   ======================================== */
@media only screen and (max-width: 1100px) {
    article {
        max-width: 90%;
    }

    .banner-container {
        width: 100%;
        height: auto;
        min-height: 180px;
    }

    .banner.text {
        font-size: 48px;
        bottom: 20px;
        right: 20px;
    }

    .conteudo-tres-colunas {
        width: 100%;
    }

    .tres-baloes-vermelhos {
        width: 100%;
    }
}

/* ========================================
   RESPONSIVIDADE - 900px
   ======================================== */
@media only screen and (max-width: 900px) {
    .conteudo-tres-colunas {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tres-baloes-vermelhos {
        grid-template-columns: 1fr;
        gap: 20px;
        justify-items: center; /* Centraliza os balões */
    }

    .balao-vermelho {
        width: 100%;
        max-width: 400px;
        height: auto;
        min-height: 220px;
    }

    .banner.text {
        font-size: 40px;
    }

    aside > h3 {
        text-align: center; /* Centraliza em mobile */
    }
}

/* ========================================
   RESPONSIVIDADE - 600px
   ======================================== */
@media only screen and (max-width: 600px) {
    article {
        max-width: 100%;
        padding: 0 10px;
    }

    .banner-container {
        width: 100%;
        min-height: 150px;
    }

    .banner.text {
        font-size: 32px;
        bottom: 15px;
        right: 15px;
    }

    .conteudo-tres-colunas {
        width: 100%;
        padding: 0;
    }

    .coluna-texto h3 {
        font-size: 1.1rem;
    }

    .coluna-texto p,
    .coluna-texto ul li {
        font-size: 0.9rem;
    }

    .balao-vermelho {
        max-width: 100%;
    }

    .balao-vermelho h3 {
        font-size: 1.1rem;
    }

    .balao-vermelho p {
        font-size: 0.85rem;
    }

    article {
        margin-bottom: 50px;
    }
}