/* =========================================================
   SOBRE NÓS
   ENDOLATINA
   ========================================================= */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

/* :root {

    --verde-endolatina: #6BCBCB;
    --azul-endolatina: #0558A7;
    --azul2-endolatina: #123d68;
    --cinza-endolatina: #D9D9D9;
    --verde2-endolatina: #90C60E;

} */


/* =========================================================
   CONFIGURAÇÕES GERAIS DA PÁGINA
   ========================================================= */

.sobre-hero,
.historia,
.trajetoria,
.atuacao,
.qualidade,
.missao-visao,
.valores,
.sobre-final {

    width: 100%;
    overflow: hidden;

}


.sobre-hero-container,
.historia-container,
.trajetoria-container,
.atuacao-container,
.qualidade-container,
.missao-visao-container,
.valores-container,
.sobre-final-container {

    width: 90%;
    max-width: 1250px;
    margin: 0 auto;

}

.sobre-hero{
    margin-top: 20px;
}

/* =========================================================
   ELEMENTOS GERAIS
   ========================================================= */

.section-tag {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--azul-endolatina);

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 2px;

}


.section-header {

    max-width: 850px;

    margin: 0 auto 60px;

    text-align: center;

}


.section-header h2 {

    margin: 0 0 20px;

    color: var(--azul2-endolatina);

    font-size: clamp(30px, 4vw, 46px);

    line-height: 1.2;

    font-weight: 600;

}


.section-header h2 strong {

    color: var(--azul-endolatina);

    font-weight: 700;

}


.section-header p {

    margin: 0 auto;

    max-width: 700px;

    color: #555;

    font-size: 17px;

    line-height: 1.8;

}



/* =========================================================
   HERO SOBRE NÓS
   ========================================================= */

.sobre-hero {

    min-height: 430px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(18, 61, 104, 0.98),
            rgba(5, 88, 167, 0.92)
        );

}


.sobre-hero-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 60px;

    padding: 80px 0;

}


.sobre-hero-text {

    max-width: 760px;
    

}


.sobre-tag {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--verde-endolatina);

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 3px;

}


.sobre-hero h1 {

    margin: 20px 0 20px;

    color: #ffffff;

    font-size: clamp(45px, 6vw, 72px);

    line-height: 1.05;

    font-weight: 300;

    /* padding-top: 10px; */

}


.sobre-hero h1 strong {

    color: var(--verde-endolatina);

    font-weight: 700;

}


.sobre-hero p {

    max-width: 700px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(17px, 2vw, 21px);

    line-height: 1.7;

    font-weight: 300;

}


.sobre-hero-icone {

    width: 190px;
    height: 190px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 2px solid rgba(255,255,255,0.25);

    border-radius: 50%;

}


.sobre-hero-icone i {

    color: var(--verde-endolatina);

    font-size: 85px;

}



/* =========================================================
   HISTÓRIA
   ========================================================= */

.historia {

    padding: 110px 0;
    
    background-color: #ffffff;

}


.historia-container {

    display: flex;

    /* grid-template-columns: 1.5fr 0.8fr; */

    align-items: center;

    /* gap: 100px; */

    justify-content: center;


}


.historia-texto {

    max-width: 780px;

}


.historia-texto h2 {

    margin: 0 0 30px;

    color: var(--azul2-endolatina);

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.2;

    font-weight: 600;

}


.historia-texto h2 strong {

    color: var(--azul-endolatina);

}


.historia-texto p {

    margin: 0 0 20px;

    color: #555;

    font-size: 17px;

    line-height: 1.9;

}


.historia-texto p:last-child {

    margin-bottom: 0;

}



/* =========================================================
   DESTAQUE 20 ANOS
   ========================================================= */

.historia-destaque {

    min-height: 330px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            var(--azul2-endolatina),
            var(--azul-endolatina)
        );

    border-radius: 25px;

    box-shadow:
        0 20px 50px rgba(18, 61, 104, 0.18);

}


.historia-destaque .anos {

    display: flex;

    align-items: baseline;

    justify-content: center;

    gap: 10px;

}


.historia-destaque .anos strong {

    color: var(--verde-endolatina);

    font-size: clamp(80px, 10vw, 125px);

    line-height: 0.9;

    font-weight: 700;

}


.historia-destaque .anos span {

    color: #ffffff;

    font-size: 24px;

    font-weight: 600;

    letter-spacing: 2px;

}


.historia-destaque p {

    max-width: 230px;

    margin: 30px 0 0;

    color: #ffffff;

    font-size: 19px;

    line-height: 1.5;

}



/* =========================================================
   TRAJETÓRIA
   ========================================================= */

.trajetoria {

    padding: 110px 0;

    background-color: #f7f9fb;

}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {

    position: relative;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 35px;

}


.timeline::before {

    content: "";

    position: absolute;

    top: 35px;

    left: 10%;

    right: 10%;

    height: 2px;

    background-color: var(--cinza-endolatina);

}


.timeline-item {

    position: relative;

    z-index: 1;

    text-align: center;

}


.timeline-icon {

    width: 70px;
    height: 70px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    background-color: #ffffff;

    border: 3px solid var(--verde-endolatina);

    border-radius: 50%;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.08);

}


.timeline-icon i {

    color: var(--azul-endolatina);

    font-size: 25px;

}


.timeline-content span {

    display: block;

    margin-bottom: 8px;

    color: var(--verde2-endolatina);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.timeline-content h3 {

    margin: 0 0 12px;

    color: var(--azul2-endolatina);

    font-size: 19px;

    line-height: 1.4;

}


.timeline-content p {

    margin: 0;

    color: #666;

    font-size: 15px;

    line-height: 1.7;

}



/* =========================================================
   ÁREAS DE ATUAÇÃO
   ========================================================= */

.atuacao {

    padding: 110px 0;

    background-color: #ffffff;

}


.atuacao-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}


.atuacao-card {

    min-height: 290px;

    padding: 35px 28px;

    background-color: #ffffff;

    border: 1px solid #e7e7e7;

    border-radius: 18px;

    text-align: center;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.atuacao-card:hover {

    transform: translateY(-8px);

    border-color: var(--verde-endolatina);

    box-shadow:
        0 15px 40px rgba(18, 61, 104, 0.12);

}


.atuacao-icon {

    width: 70px;
    height: 70px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    background-color: rgba(107, 203, 203, 0.15);

    border-radius: 50%;

}


.atuacao-icon i {

    color: var(--azul-endolatina);

    font-size: 28px;

}


.atuacao-card h3 {

    margin: 0 0 15px;

    color: var(--azul2-endolatina);

    font-size: 19px;

    line-height: 1.4;

}


.atuacao-card p {

    margin: 0;

    color: #666;

    font-size: 15px;

    line-height: 1.7;

}



/* =========================================================
   POLÍTICA DE QUALIDADE
   ========================================================= */

.qualidade {

    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            var(--azul2-endolatina),
            #174f82
        );

}


.qualidade-container {

    display: grid;

    grid-template-columns: 200px 1fr;

    align-items: center;

    gap: 70px;

}


.qualidade-icon {

    width: 170px;
    height: 170px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 2px solid rgba(255,255,255,0.25);

    border-radius: 50%;

}


.qualidade-icon i {

    color: var(--verde-endolatina);

    font-size: 75px;

}


.qualidade-texto {

    max-width: 850px;

}


.qualidade-texto .section-tag {

    color: var(--verde-endolatina);

}


.qualidade-texto h2 {

    margin: 0 0 25px;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.2;

}


.qualidade-texto h2 strong {

    color: var(--verde-endolatina);

}


.qualidade-texto p {

    margin: 0 0 20px;

    color: rgba(255,255,255,0.9);

    font-size: 16px;

    line-height: 1.9;

}


.qualidade-texto p:last-child {

    margin-bottom: 0;

}



/* =========================================================
   MISSÃO E VISÃO
   ========================================================= */

.missao-visao {

    padding: 110px 0;

    background-color: #f7f9fb;

}


.missao-visao-container {

    display: grid;

    grid-template-columns: 1.4fr 1fr;

    gap: 30px;

    align-items: stretch;

}


.institucional-card {

    padding: 50px;

    background-color: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.06);

}


.institucional-icon {

    width: 65px;
    height: 65px;

    margin-bottom: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    background-color: rgba(107,203,203,0.15);

    border-radius: 15px;

}


.institucional-icon i {

    color: var(--azul-endolatina);

    font-size: 27px;

}


.institucional-card > span {

    display: block;

    margin-bottom: 8px;

    color: var(--azul-endolatina);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.institucional-card h2 {

    margin: 0 0 25px;

    color: var(--azul2-endolatina);

    font-size: 36px;

}


.institucional-card p {

    margin: 0 0 18px;

    color: #555;

    font-size: 15.5px;

    line-height: 1.8;

}


.institucional-card p:last-child {

    margin-bottom: 0;

}



/* =========================================================
   VALORES
   ========================================================= */

.valores {

    padding: 110px 0;

    background-color: #ffffff;

}


.valores-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 20px;

}


.valor-card {

    min-height: 170px;

    padding: 30px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border: 1px solid #e6e6e6;

    border-radius: 18px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.valor-card:hover {

    transform: translateY(-7px);

    border-color: var(--verde-endolatina);

    box-shadow:
        0 15px 35px rgba(18,61,104,0.1);

}


.valor-card i {

    margin-bottom: 18px;

    color: var(--azul-endolatina);

    font-size: 30px;

}


.valor-card h3 {

    margin: 0;

    color: var(--azul2-endolatina);

    font-size: 17px;

    line-height: 1.4;

}



/* =========================================================
   BLOCO FINAL
   ========================================================= */

.sobre-final {

    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            var(--verde-endolatina),
            #59bebe
        );

}


.sobre-final-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


.sobre-final-container > i {

    margin-bottom: 25px;

    color: #ffffff;

    font-size: 55px;

}


.sobre-final h2 {

    margin: 0 0 15px;

    color: var(--azul2-endolatina);

    font-size: clamp(35px, 5vw, 55px);

}


.sobre-final p {

    max-width: 650px;

    margin: 0 0 30px;

    color: var(--azul2-endolatina);

    font-size: 18px;

    line-height: 1.7;

}


.sobre-final-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 28px;

    color: #ffffff;

    background-color: var(--azul2-endolatina);

    border-radius: 50px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;

}


.sobre-final-btn:hover {

    transform: translateY(-3px);

    background-color: var(--azul-endolatina);

}



/* =========================================================
   TABLET
   1100px
   ========================================================= */

@media (max-width: 1100px) {


    /* CONTAINERS */

    .sobre-hero-container,
    .historia-container,
    .trajetoria-container,
    .atuacao-container,
    .qualidade-container,
    .missao-visao-container,
    .valores-container,
    .sobre-final-container {

        width: 88%;

    }



    /* HISTÓRIA */

    .historia-container {

        grid-template-columns: 1.2fr 0.8fr;

        gap: 60px;

    }



    /* ATUAÇÃO */

    .atuacao-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    /* VALORES */

    .valores-grid {

        grid-template-columns: repeat(3, 1fr);

    }



    /* MISSÃO VISÃO */

    .missao-visao-container {

        grid-template-columns: 1fr 1fr;

    }

}



/* =========================================================
   TABLET
   900px
   ========================================================= */

@media (max-width: 900px) {


    /* HERO */

    .sobre-hero {

        min-height: auto;

    }


    .sobre-hero-container {

        padding: 70px 0;

    }


    .sobre-hero-icone {

        width: 150px;
        height: 150px;

    }


    .sobre-hero-icone i {

        font-size: 65px;

    }



    /* HISTÓRIA */

    .historia-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .historia-texto {

        max-width: 100%;

    }


    .historia-destaque {

        max-width: 500px;

        width: 100%;

        margin: 0 auto;

    }



    /* TIMELINE */

    .timeline {

        grid-template-columns: repeat(2, 1fr);

        gap: 50px 30px;

    }


    .timeline::before {

        display: none;

    }



    /* QUALIDADE */

    .qualidade-container {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 40px;

    }


    .qualidade-icon {

        margin: 0 auto;

    }


    .qualidade-texto {

        max-width: 800px;

        margin: 0 auto;

    }



    /* MISSÃO VISÃO */

    .missao-visao-container {

        grid-template-columns: 1fr;

    }



    /* VALORES */

    .valores-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



/* =========================================================
   CELULAR
   700px
   ========================================================= */

@media (max-width: 700px) {


    /* CONTAINERS */

    .sobre-hero-container,
    .historia-container,
    .trajetoria-container,
    .atuacao-container,
    .qualidade-container,
    .missao-visao-container,
    .valores-container,
    .sobre-final-container {

        width: 90%;

    }



    /* SEÇÕES */

    .historia,
    .trajetoria,
    .atuacao,
    .missao-visao,
    .valores {

        padding: 75px 0;

    }


    .qualidade {

        padding: 75px 0;

    }



    /* HERO */

    .sobre-hero-container {

        flex-direction: column;

        align-items: flex-start;

        gap: 40px;

        padding: 65px 0;

    }


    .sobre-hero h1 {

        font-size: clamp(42px, 13vw, 60px);

    }


    .sobre-hero p {

        font-size: 16px;

    }


    .sobre-hero-icone {

        align-self: center;

        width: 130px;
        height: 130px;

    }


    .sobre-hero-icone i {

        font-size: 55px;

    }



    /* SECTION HEADER */

    .section-header {

        margin-bottom: 45px;

    }


    .section-header h2 {

        font-size: 31px;

    }


    .section-header p {

        font-size: 15px;

        line-height: 1.7;

    }



    /* HISTÓRIA */

    .historia-texto h2 {

        font-size: 32px;

    }


    .historia-texto p {

        font-size: 15px;

        line-height: 1.8;

    }


    .historia-destaque {

        min-height: 280px;

        padding: 30px;

    }


    .historia-destaque .anos strong {

        font-size: 90px;

    }


    .historia-destaque .anos span {

        font-size: 19px;

    }



    /* TIMELINE */

    .timeline {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .timeline-item {

        display: grid;

        grid-template-columns: 70px 1fr;

        gap: 20px;

        text-align: left;

        align-items: start;

    }


    .timeline-icon {

        margin: 0;

    }



    /* ATUAÇÃO */

    .atuacao-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .atuacao-card {

        min-height: auto;

        padding: 30px 25px;

    }



    /* QUALIDADE */

    .qualidade-texto h2 {

        font-size: 32px;

    }


    .qualidade-texto p {

        font-size: 15px;

        line-height: 1.8;

    }


    .qualidade-icon {

        width: 130px;
        height: 130px;

    }


    .qualidade-icon i {

        font-size: 55px;

    }



    /* MISSÃO / VISÃO */

    .institucional-card {

        padding: 35px 25px;

    }


    .institucional-card h2 {

        font-size: 32px;

    }


    .institucional-card p {

        font-size: 15px;

        line-height: 1.8;

    }



    /* VALORES */

    .valores-grid {

        grid-template-columns: 1fr 1fr;

        gap: 15px;

    }


    .valor-card {

        min-height: 145px;

        padding: 25px 15px;

    }


    .valor-card h3 {

        font-size: 15px;

    }


    .valor-card i {

        font-size: 27px;

    }



    /* BLOCO FINAL */

    .sobre-final {

        padding: 75px 0;

    }


    .sobre-final h2 {

        font-size: 38px;

    }


    .sobre-final p {

        font-size: 16px;

    }

}



/* =========================================================
   CELULAR PEQUENO
   480px
   ========================================================= */

@media (max-width: 480px) {


    /* CONTAINERS */

    .sobre-hero-container,
    .historia-container,
    .trajetoria-container,
    .atuacao-container,
    .qualidade-container,
    .missao-visao-container,
    .valores-container,
    .sobre-final-container {

        width: 92%;

    }



    /* HERO */

    .sobre-hero-container {

        padding: 55px 0;

    }


    .sobre-tag {

        font-size: 13px;

        letter-spacing: 2px;

    }


    .sobre-hero h1 {

        font-size: 42px;

    }


    .sobre-hero p {

        font-size: 15px;

    }



    /* SECTION TAG */

    .section-tag {

        font-size: 24px;

        letter-spacing: 1.5px;

    }



    /* HISTÓRIA */

    .historia {

        padding: 65px 0;

    }


    .historia-texto h2 {

        font-size: 29px;

    }


    .historia-destaque {

        min-height: 250px;

    }


    .historia-destaque .anos strong {

        font-size: 75px;

    }


    .historia-destaque .anos span {

        font-size: 16px;

    }


    .historia-destaque p {

        font-size: 16px;

    }



    /* TIMELINE */

    .timeline-item {

        grid-template-columns: 55px 1fr;

        gap: 15px;

    }


    .timeline-icon {

        width: 55px;
        height: 55px;

    }


    .timeline-icon i {

        font-size: 20px;

    }


    .timeline-content h3 {

        font-size: 17px;

    }


    .timeline-content p {

        font-size: 14px;

    }



    /* MISSÃO / VISÃO */

    .institucional-card {

        padding: 30px 22px;

    }


    .institucional-card h2 {

        font-size: 29px;

    }



    /* VALORES */

    .valores-grid {

        grid-template-columns: 1fr;

    }


    .valor-card {

        min-height: 125px;

    }



    /* FINAL */

    .sobre-final {

        padding: 65px 0;

    }


    .sobre-final-container > i {

        font-size: 45px;

    }


    .sobre-final h2 {

        font-size: 34px;

    }


    .sobre-final p {

        font-size: 15px;

    }


    .sobre-final-btn {

        width: 100%;

        justify-content: center;

        padding: 14px 20px;

    }

}



/* =========================================================
   ACESSIBILIDADE / REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .atuacao-card,
    .valor-card,
    .sobre-final-btn {

        transition: none;

    }

}