/* ===== SEÇÃO "SOBRE NÓS" (ABOUT SECTION) ===== */
/* Container principal que organiza conteúdo em duas colunas */
.section-sobre{
    display: flex;              /* Layout flexível */
    flex-direction: row;        /* Lado a lado */
    align-items: center;        /* Alinha verticalmente */
    justify-content: center;    /* Centraliza */
    gap: 20px;                  /* Espaço entre colunas */
    padding: 90px;              /* Preenchimento generoso */
}

/* ===== COLUNA ESQUERDA ===== */
/* Contém o título, subtítulo e informações principais */
.elements-left{
    flex: 1;                    /* Ocupa metade do espaço */
    display: flex;              /* Layout flexível */
    flex-direction: column;     /* Empilhado verticalmente */
    gap: 40px;                  /* Espaço grande entre elementos */
}

/* ===== PRIMEIRA PARTE DA SEÇÃO ===== */
/* Rótulo "Quem Somos" com linha & texto */
.section-sobre-p1{
    display: flex;              /* Layout flexível */
    align-items: center;        /* Alinha verticalmente */
    gap: 15px;                  /* Espaço entre linha e texto */
}

/* ===== LINHA VISUAL ===== */
/* Linha verde que aparece antes de "Quem Somos" */
.quem-somos{
    width: 40px;                /* Largura da linha */
    height: 2px;                /* Espessura da linha */
    background-color: #317901;  /* Cor verde */
    margin: 0;                  /* Sem margem */
    border: none;               /* Sem borda */
}

/* ===== TEXTO DESTACADO (RÓTULO) ===== */
/* Texto "Quem Somos" em verde */
.text-span-p1{
    font-size: 0.9rem;          /* Fonte pequena */
    color: #317901;             /* Cor verde */
    font-weight: 600;           /* Negrito */
    letter-spacing: 1px;        /* Espaço entre letras */
}

/* ===== TÍTULO PRINCIPAL ===== */
/* Container do título "Sobre Nós" */
.elements-left .title{
    margin: 0;                  /* Sem margem */
}

/* Texto do título principal */
.elements-left .title h1{
    font-size: 3.5rem;          /* Título bem grande */
    line-height: 1.2;           /* Altura de linha */
    color: #1a1a1a;             /* Cor preta */
    margin: 0;                  /* Sem margem */
    font-weight: 700;           /* Negrito forte */
}

/* Destaca uma palavra do título em verde */
.elements-left .title .text-span{
    color: #317901;             /* Cor verde */
}

/* ===== SUBTÍTULO ===== */
/* Container do subtítulo/texto adicional */
.elements-left .subtitle{
    margin-top: 30px;           /* Espaço superior */
}

/* Parágrafo do subtítulo */
.elements-left .subtitle p{
    color: #317901;             /* Cor verde */
    font-size: 1rem;            /* Tamanho normal */
    font-weight: 600;           /* Negrito */
    text-decoration: none;      /* Sem decoração */
    cursor: pointer;            /* Cursor de clique */
    margin: 0;                  /* Sem margem */
}

/* Efeito ao passar o mouse */
.elements-left .subtitle p:hover{
    opacity: 0.8;               /* Levemente transparente */
}

/* ===== COLUNA DIREITA ===== */
/* Contém o texto descritivo e informações */
.elements-right{
    flex: 1;                    /* Ocupa metade do espaço */
    display: flex;              /* Layout flexível */
    flex-direction: column;     /* Empilhado verticalmente */
    gap: 20px;                  /* Espaço entre elementos */
}

/* ===== TEXTO DESCRITIVO ===== */
/* Container com o texto principal da seção */
.text-sobre{
    display: flex;              /* Layout flexível */
    flex-direction: column;     /* Parágrafos empilhados */
    gap: 20px;                  /* Espaço entre parágrafos */
}

/* Parágrafo descritivo */
.text-sobre p{
    font-size: 1.05rem;         /* Tamanho legível */
    line-height: 1.8;           /* Altura de linha generosa */
    color: #666666;             /* Cinza neutro */
    margin: 0;                  /* Sem margem */
}

/* ===== LINHA SEPARADORA ===== */
/* Linha horizontal que separa seções */
.elements-right hr{
    height: 1px;                /* Espessura fina */
    background-color: #e0e0e0;  /* Cinza claro */
    border: none;               /* Sem borda */
    margin: 20px 0;             /* Espaço acima e abaixo */
}

/* ===== INFORMAÇÕES ADICIONAIS ===== */
/* Container das informações numéricas */
.informations-section-sobre{
    margin-top: 20px;           /* Espaço superior */
}

/* ===== GRID DE CARDS ===== */
/* Organiza os cards de informação em linha */
.cards-informations{
    display: flex;              /* Layout flexível */
    gap: 50px;                  /* Espaço grande entre cards */
}

/* ===== CARD DE INFORMAÇÃO ===== */
/* Card individual com número e descrição */
.card-information{
    flex: 1;                    /* Distribui igualmente */
}

/* ===== NÚMERO NO CARD ===== */
/* Número grande em verde claro */
.number-information{
    font-size: 3rem;            /* Número bem grande */
    color: #c8e6c9;             /* Verde bem claro */
    margin: 0 0 20px 0;         /* Margem inferior */
    font-weight: 600;           /* Negrito */
    line-height: 1;             /* Altura de linha compacta */
}

/* ===== DESCRIÇÃO DA INFORMAÇÃO ===== */
/* Título/descrição do card */
.description-information{
    font-size: 1.1rem;          /* Tamanho legível */
    color: #1a1a1a;             /* Preto */
    margin: 10px 0;             /* Margens */
    font-weight: 600;           /* Negrito */
}

/* ===== TEXTO DESCRITIVO DO CARD ===== */
/* Texto adicional dentro do card */
.text-description{
    font-size: 0.95rem;         /* Fonte pequena */
    color: #999999;             /* Cinza */
    display: block;             /* Bloco de texto */
}

/* ===== RESPONSIVIDADE PARA TABLETS ===== */
@media (max-width: 1024px) {
    .section-sobre {
        padding: 60px 40px;     /* Preenchimento reduzido */
        gap: 30px;              /* Espaço reduzido entre colunas */
    }

    .elements-left .title h1 {
        font-size: 2.8rem;      /* Título menor */
    }

    .text-sobre p {
        font-size: 1rem;        /* Texto um pouco menor */
    }

    .cards-informations {
        gap: 30px;              /* Espaço reduzido entre cards */
    }

    .number-information {
        font-size: 2.5rem;      /* Número menor */
    }
}

/* ===== RESPONSIVIDADE PARA CELULARES MÉDIOS ===== */
@media (max-width: 768px) {
    .section-sobre {
        flex-direction: column;  /* Colunas empilhadas */
        padding: 40px 20px;     /* Preenchimento reduzido */
        gap: 30px;              /* Espaço entre seções */
    }

    /* Ambas as colunas ocupam a largura total */
    .elements-left,
    .elements-right {
        flex: none;             /* Não usa flex */
        width: 100%;            /* Ocupam toda a largura */
    }

    .elements-left .title h1 {
        font-size: 2rem;        /* Título menor */
        line-height: 1.2;       /* Altura de linha */
    }

    .elements-left .title h1 span {
        display: inline;        /* Palavra destacada fica na mesma linha */
    }

    .text-sobre p {
        font-size: 0.95rem;     /* Texto menor */
        line-height: 1.6;       /* Altura de linha enxuta */
    }

    /* Cards de informação empilhados */
    .cards-informations {
        flex-direction: column;  /* Verticalmente empilhados */
        gap: 20px;              /* Espaço reduzido */
    }

    .card-information {
        flex: none;             /* Não usa flex */
    }

    .number-information {
        font-size: 2rem;        /* Número menor */
    }

    .description-information {
        font-size: 1rem;        /* Descrição menor */
    }

    .text-description {
        font-size: 0.9rem;      /* Texto adicional menor */
    }
}

/* ===== RESPONSIVIDADE PARA CELULARES PEQUENOS ===== */
@media (max-width: 480px) {
    .section-sobre {
        padding: 25px 15px;     /* Preenchimento bem reduzido */
        gap: 20px;              /* Espaço pequeno */
    }

    /* Rótulo "Quem Somos" em coluna */
    .section-sobre-p1 {
        flex-direction: column;  /* Linha fica acima do texto */
        align-items: flex-start; /* Alinha à esquerda */
        gap: 10px;              /* Espaço pequeno */
    }

    .elements-left .title h1 {
        font-size: 1.6rem;      /* Título bem pequeno */
    }

    .elements-left .subtitle p {
        font-size: 0.9rem;      /* Subtítulo bem pequeno */
    }

    .text-sobre p {
        font-size: 0.9rem;      /* Texto bem pequeno */
        line-height: 1.5;       /* Altura de linha compacta */
    }

    /* Cards de informação empilhados */
    .cards-informations {
        flex-direction: column;  /* Empilhados */
        gap: 15px;              /* Espaço pequeno */
    }

    .number-information {
        font-size: 1.8rem;      /* Número bem pequeno */
    }

    .description-information {
        font-size: 0.95rem;     /* Descrição bem pequena */
    }

    .text-description {
        font-size: 0.85rem;     /* Texto bem pequeno */
    }
}