/* =========================================================
   QUEM SOU — PRESIDENTE DA REPÚBLICA
========================================================= */

:root {

    --about-red: #a90000;
    --about-red-dark: #720000;
    --about-red-light: #d71920;

    --about-gold: #d7b21f;

    --about-black: #1d1d1d;
    --about-gray: #666;

    --about-light: #f7f6f5;
    --about-white: #fff;

}


/* =========================================================
   RESET LOCAL
========================================================= */

.about-hero,
.about-trajectory,
.about-principles,
.about-quote,
.about-biography {

    width: 100%;
    box-sizing: border-box;

}

.about-hero *,
.about-trajectory *,
.about-principles *,
.about-quote *,
.about-biography * {

    box-sizing: border-box;

}


/* =========================================================
   CONTAINER
========================================================= */

.about-container {

    width: min(
        1280px,
        calc(100% - 80px)
    );

    margin: 0 auto;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.about-breadcrumb {

    background: #ffffff;

    padding: 27px 0;

}


.about-breadcrumb .about-container {

    display: flex;

    align-items: center;

    gap: 14px;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    color: #777;

}


.about-breadcrumb a {

    color: #777;

    text-decoration: none;

    transition: color .2s ease;

}


.about-breadcrumb a:hover {

    color: var(--about-red-light);

}


.about-home-icon {

    color: var(--about-red-light);

    font-size: 18px;

    margin-right: 8px;

}


.about-breadcrumb-arrow {

    color: #aaa;

    font-size: 21px;

}


/* =========================================================
   HERO
========================================================= */

.about-hero {

    position: relative;

    background: #f8f6f5;

}


.about-hero-content {

    min-height: 540px;

    display: grid;

    grid-template-columns: 46% 54%;

    position: relative;

}


/* =========================================================
   TEXTO DO HERO
========================================================= */

.about-intro {

    position: relative;

    z-index: 3;

    padding:

        75px

        30px

        160px

        max(40px, calc((100vw - 1280px) / 2));

    background:

        linear-gradient(

            90deg,

            #ffffff 0%,

            #ffffff 74%,

            rgba(255,255,255,.92) 100%

        );

}


.about-eyebrow {

    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .2px;

    color: var(--about-red);

    margin-bottom: 12px;

}


.about-red-line {

    display: block;

    width: 43px;

    height: 2px;

    background: var(--about-red-light);

    margin-bottom: 18px;

}


.about-intro h1 {

    margin: 0 0 17px;

    font-family:

        "Playfair Display",

        Georgia,

        serif;

    font-size: clamp(

        38px,

        3vw,

        56px

    );

    line-height: .98;

    font-weight: 600;

    letter-spacing: -.025em;

    color: #202020;

}


.about-intro h2 {

    max-width: 540px;

    margin: 0 0 20px;

    font-family: "Poppins", sans-serif;

    font-size: 20px;

    line-height: 1.45;

    font-weight: 400;

    color: #333;

}


.about-intro h2 strong {

    font-weight: 600;

}


.about-intro p {

    max-width: 500px;

    margin: 0 0 18px;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.65;

    color: #444;

}


.about-signature {

    margin-top: 18px;

    font-family: "Caveat", cursive;

    font-size: 25px;

    font-style: italic;

    color: #242424;

}


.about-position {

    display: block;

    margin-top: -3px;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    color: #222;

}


/* =========================================================
   IMAGEM DO HERO
========================================================= */

.about-hero-image {

    position: relative;

    height: 680px;

    min-height: 420px;

    overflow: hidden;

    border: 4px solid #ffffff;

    border-radius: 20px;

}


.about-hero-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 2%;

    transition:

        transform .8s ease;

}


.about-hero-image:hover img {

    transform: scale(1.015);

}


.about-image-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,.25),

            transparent 25%

        );

    pointer-events: none;

}


/* =========================================================
   CARTÃO DE VALORES
========================================================= */

.about-values-card {

    position: absolute;

    z-index: 10;

    left: max(

        40px,

        calc((100vw - 1280px) / 2)

    );

    bottom: -5px;

    width: 530px;

    min-height: 150px;

    display: grid;

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

    padding: 26px 12px;

    background: rgba(255,255,255,.96);

    border: 1px solid #e8e2df;

    border-radius: 18px;

    box-shadow:

        0 12px 35px rgba(0,0,0,.10);

}


.about-value {

    text-align: center;

    padding: 0 15px;

    border-right: 1px solid #e2dedd;

}


.about-value:last-child {

    border-right: 0;

}


.about-value-icon {

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: Georgia, serif;

    font-size: 34px;

    line-height: 1;

    color: var(--about-red-light);

}


.about-value h3 {

    margin: 6px 0 7px;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 600;

    color: #222;

}


.about-value p {

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    line-height: 1.5;

    color: #444;

}


/* =========================================================
   TRAJECTÓRIA
========================================================= */

.about-trajectory {

    position: relative;

    background: #ffffff;

    padding: 110px 0 88px;

    overflow: hidden;

}


/* =========================================================
   CABEÇALHO DAS SECÇÕES
========================================================= */

.about-section-heading {

    position: relative;

    margin-bottom: 58px;

}


.about-section-heading > span {

    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .8px;

    text-transform: uppercase;

    color: #222;

}


.about-section-heading h2 {

    margin: 8px 0 13px;

    font-family:

        "Playfair Display",

        Georgia,

        serif;

    font-size: 34px;

    line-height: 1.15;

    font-weight: 500;

    color: #222;

}


.about-heading-line {

    width: 42px;

    height: 2px;

    background: #d71920;

}


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

.about-timeline {

    position: relative;

    display: grid;

    grid-template-columns:

        repeat(

            5,

            minmax(0, 1fr)

        );

    gap: 0;

    padding: 0 10px;

}


.about-timeline::before {

    content: "";

    position: absolute;

    top: 102px;

    left: 4%;

    right: 4%;

    height: 1px;

    background: #d71920;

    z-index: 0;

}


.about-timeline-item {

    position: relative;

    min-width: 0;

    z-index: 2;

    padding: 0 18px;

    text-align: center;

}


/* =========================================================
   ANO
========================================================= */

.about-timeline-year {

    height: 24px;

    margin-bottom: 17px;

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .4px;

    color: #d71920;

    text-align: center;

}


/* =========================================================
   ÍCONE
========================================================= */

.about-timeline-icon {

    width: 54px;

    height: 54px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: "Poppins", sans-serif;

    font-size: 25px;

    color: #d71920;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 50%;

    box-shadow:

        0 4px 15px rgba(0,0,0,.05);

    position: relative;

    z-index: 3;

    transition:

        transform .3s ease,

        border-color .3s ease,

        box-shadow .3s ease;

}


.about-timeline-dot {

    width: 15px;

    height: 15px;

    margin: 26px auto 24px;

    background: #ffffff;

    border: 3px solid #d71920;

    border-radius: 50%;

    position: relative;

    z-index: 4;

}


.about-timeline-item h3 {

    margin: 0 0 9px;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 600;

    color: #222;

}


.about-timeline-item p {

    max-width: 185px;

    margin: 0 auto;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    line-height: 1.65;

    color: #666;

}


.about-timeline-item:hover .about-timeline-icon {

    border-color: #d71920;

    transform: translateY(-3px);

    box-shadow:

        0 8px 22px rgba(215,25,32,.12);

}


.about-timeline-item:hover .about-timeline-year {

    color: #a90000;

}


.about-timeline-item:last-child
.about-timeline-icon {

    background: #d71920;

    border-color: #d71920;

    color: #ffffff;

}


.about-timeline-item:last-child
.about-timeline-dot {

    background: #d71920;

    border-color: #d71920;

}


.about-timeline-item:last-child h3 {

    font-weight: 700;

}


/* =========================================================
   PRINCÍPIOS
========================================================= */

.about-principles {

    width: 100%;

    min-height: 440px;

    overflow: hidden;

    background: #8b0000;

}


.about-principles-content {

    width: 100%;

    min-height: 440px;

    display: grid;

    grid-template-columns: 58% 42%;

}


.about-principles-text {

    min-height: 440px;

    padding: 48px 70px;

    background:

        linear-gradient(

            145deg,

            #8b0000 0%,

            #760000 100%

        );

    color: #ffffff;

}


.about-principles-eyebrow {

    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: .2px;

    color: #ffffff;

}


.about-principles-line {

    width: 42px;

    height: 2px;

    margin-top: 14px;

    margin-bottom: 32px;

    background: #ffffff;

}


.about-principles-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 65px;

    row-gap: 28px;

    max-width: 700px;

}


.about-principle {

    display: flex;

    align-items: flex-start;

    gap: 24px;

    min-height: 55px;

}


.about-principle-icon {

    flex: 0 0 32px;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: Georgia, serif;

    font-size: 28px;

    line-height: 1;

    color: #ffffff;

}


.about-principle h3 {

    margin: 0 0 6px;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 600;

    color: #ffffff;

}


.about-principle p {

    max-width: 190px;

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 11px;

    line-height: 1.55;

    color: rgba(255,255,255,.88);

}


/* =========================================================
   GALERIA DOS PRINCÍPIOS
========================================================= */

.about-principles-gallery {

    height: 100%;

    display: grid;

    grid-template-rows: 58% 42%;

    overflow: hidden;

}


.about-gallery-main {

    width: 100%;

    height: 100%;

    overflow: hidden;

}


.about-gallery-main img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center 15%;

    transition: transform .7s ease;

}


.about-gallery-main:hover img {

    transform: scale(1.02);

}


.about-gallery-small {

    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;

    height: 100%;

    overflow: hidden;

}


.about-gallery-small img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.about-gallery-small img + img {

    border-left: 2px solid #8b0000;

}


/* =========================================================
   FRASE FINAL
========================================================= */

.about-quote {

    position: relative;

    min-height: 160px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background-image:

        url("../images/chapo-quote.jpg");

    background-size: cover;

    background-position: center 19%;

    background-repeat: no-repeat;

}


.about-quote-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(

            90deg,

            rgba(8,8,8,.88) 0%,

            rgba(20,0,0,.72) 35%,

            rgba(70,0,0,.55) 65%,

            rgba(8,8,8,.82) 100%

        );

}


.about-quote::before {

    content: "";

    position: absolute;

    z-index: 3;

    top: 0;

    left: 50%;

    width: 80px;

    height: 3px;

    transform: translateX(-50%);

    background: #d71920;

}


.about-quote-content {

    position: relative;

    z-index: 4;

    width: min(

        1000px,

        calc(100% - 60px)

    );

    padding: 55px 40px 50px;

    text-align: center;

}


.about-quote-mark {

    position: absolute;

    font-family:

        Georgia,

        "Times New Roman",

        serif;

    font-size: 65px;

    line-height: .6;

    color: #d71920;

    opacity: .95;

}


.about-quote-content >
.about-quote-mark:first-child {

    top: 35px;

    left: 5px;

}


.about-quote-close {

    right: 5px;

    bottom: 20px;

}


.about-quote-content p {

    max-width: 850px;

    margin: 0 auto;

    font-family:

        "Playfair Display",

        Georgia,

        "Times New Roman",

        serif;

    font-size: clamp(

        16px,

        1.9vw,

        21px

    );

    line-height: 1.45;

    font-weight: 500;

    font-style: italic;

    letter-spacing: .1px;

    color: #ffffff;

    text-shadow:

        0 2px 8px rgba(0,0,0,.35);

}


.about-quote-content p strong {

    font-weight: 600;

    color: #ffffff;

}


.about-quote-content::after {

    content: "";

    display: block;

    width: 45px;

    height: 2px;

    margin: 28px auto 0;

    background: #d7b21f;

}


.about-quote {

    transition:

        background-position 1s ease;

}


.about-quote:hover {

    background-position: center 43%;

}


/* =========================================================
   BIOGRAFIA
========================================================= */

.about-biography {

    background: #ffffff;

    padding: 90px 0;

}


.about-biography-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    margin-bottom: 90px;

}


.about-biography-grid article {

    position: relative;

    padding-top: 25px;

    border-top: 1px solid #ddd;

}


.about-bio-number {

    font-family:

        "Playfair Display",

        Georgia,

        serif;

    font-size: 40px;

    color: var(--about-red-light);

    opacity: .7;

}


.about-biography-grid h3 {

    margin: 8px 0 15px;

    font-family:

        "Playfair Display",

        Georgia,

        serif;

    font-size: 23px;

    font-weight: 500;

    color: #222;

}


.about-biography-grid p {

    color: #555;

    font-family: "Poppins", sans-serif;

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   CARREIRA
========================================================= */

.about-career-list {

    border-top: 1px solid #ddd;

}


.about-career-list article {

    display: grid;

    grid-template-columns: 170px 1fr;

    gap: 40px;

    padding: 30px 0;

    border-bottom: 1px solid #e4e4e4;

}


.about-career-list article > span {

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 700;

    color: var(--about-red-light);

}


.about-career-list h3 {

    margin: 0 0 10px;

    font-family:

        "Playfair Display",

        Georgia,

        serif;

    font-size: 25px;

    line-height: 1.25;

    font-weight: 500;

    color: #222;

}


.about-career-list p {

    max-width: 850px;

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    line-height: 1.7;

    color: #555;

}


/* =========================================================
   =========================================================
   TABLET
   =========================================================
========================================================= */

@media (max-width: 1100px) {


    .about-container {

        width: min(

            calc(100% - 40px),

            900px

        );

    }


    /* HERO */

    .about-hero-content {

        grid-template-columns: 1fr;

    }


    .about-intro {

        padding: 60px 30px;

    }


    .about-hero-image {

        height: 500px;

        min-height: 500px;

        border-radius: 16px;

    }


    .about-values-card {

        position: relative;

        left: auto;

        bottom: auto;

        width: calc(100% - 40px);

        margin: -70px auto 0;

    }


    /* TRAJETÓRIA */

    .about-trajectory {

        padding: 80px 0;

    }


    .about-timeline-item {

        padding: 0 10px;

    }


    .about-timeline-item p {

        max-width: 160px;

        font-size: 10.5px;

    }


    /* PRINCÍPIOS */

    .about-principles-content {

        grid-template-columns: 1fr;

    }


    .about-principles-gallery {

        min-height: 400px;

    }


    /* QUOTE */

    .about-quote {

        min-height: 230px;

    }


    .about-quote-content {

        padding: 50px 55px;

    }


    .about-quote-content p {

        font-size: 20px;

    }


}


/* =========================================================
   =========================================================
   MOBILE / TABLET
   800PX
   =========================================================
========================================================= */

@media (max-width: 800px) {


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .about-container {

        width: calc(100% - 32px);

        max-width: none;

    }


    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */

    .about-breadcrumb {

        padding: 17px 0;

    }


    .about-breadcrumb .about-container {

        gap: 8px;

        font-size: 10px;

    }


    .about-home-icon {

        font-size: 15px;

        margin-right: 2px;

    }


    .about-breadcrumb-arrow {

        font-size: 17px;

    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .about-hero-content {

        display: flex;

        flex-direction: column;

        min-height: auto;

    }


    .about-intro {

        order: 1;

        padding:

            44px

            22px

            38px;

        background:

            linear-gradient(

                180deg,

                #ffffff 0%,

                #ffffff 90%,

                #faf8f7 100%

            );

    }


    .about-eyebrow {

        font-size: 10px;

        line-height: 1.4;

        letter-spacing: .6px;

        margin-bottom: 10px;

    }


    .about-red-line {

        width: 38px;

        height: 2px;

        margin-bottom: 19px;

    }


    .about-intro h1 {

        font-size: 40px;

        line-height: .98;

        margin-bottom: 19px;

    }


    .about-intro h2 {

        max-width: 650px;

        font-size: 16px;

        line-height: 1.5;

        margin-bottom: 18px;

    }


    .about-intro p {

        max-width: 650px;

        font-size: 12.5px;

        line-height: 1.75;

        margin-bottom: 18px;

    }


    .about-signature {

        font-size: 23px;

        margin-top: 14px;

    }


    /* -----------------------------------------------------
       FOTO
    ----------------------------------------------------- */

    .about-hero-image {

        order: 2;

        width: 100%;

        height: 450px;

        min-height: 450px;

        border: none;

        border-radius: 0;

    }


    .about-hero-image img {

        object-position: center 9%;

    }


    .about-image-overlay {

        background:

            linear-gradient(

                180deg,

                rgba(255,255,255,0) 50%,

                rgba(80,0,0,.18) 100%

            );

    }


    /* -----------------------------------------------------
       VALORES
    ----------------------------------------------------- */

    .about-values-card {

        order: 3;

        position: relative;

        left: auto;

        bottom: auto;

        width: calc(100% - 24px);

        min-height: auto;

        margin: -42px auto 0;

        padding: 12px 8px;

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

        border-radius: 15px;

        background: rgba(255,255,255,.98);

        box-shadow:

            0 12px 32px rgba(0,0,0,.11);

    }


    .about-value {

        padding: 14px 8px;

        border-right: 1px solid #e6e1df;

        border-bottom: 1px solid #e6e1df;

    }


    .about-value:nth-child(2n) {

        border-right: none;

    }


    .about-value:nth-child(3),
    .about-value:nth-child(4) {

        border-bottom: none;

    }


    .about-value-icon {

        height: 35px;

        font-size: 25px;

    }


    .about-value h3 {

        font-size: 11.5px;

        margin: 4px 0 5px;

    }


    .about-value p {

        font-size: 9.5px;

        line-height: 1.45;

    }


    /* -----------------------------------------------------
       TRAJETÓRIA
    ----------------------------------------------------- */

    .about-trajectory {

        padding: 70px 0 62px;

    }


    .about-section-heading {

        margin-bottom: 42px;

    }


    .about-section-heading > span {

        font-size: 9.5px;

        letter-spacing: .9px;

    }


    .about-section-heading h2 {

        max-width: 550px;

        margin: 8px 0 13px;

        font-size: 27px;

        line-height: 1.18;

    }


    .about-heading-line {

        width: 38px;

    }


    /* -----------------------------------------------------
       TIMELINE VERTICAL
    ----------------------------------------------------- */

    .about-timeline {

        display: flex;

        flex-direction: column;

        gap: 0;

        padding: 0 0 0 8px;

    }


    .about-timeline::before {

        top: 5px;

        bottom: 5px;

        left: 31px;

        right: auto;

        width: 1px;

        height: auto;

        background:

            linear-gradient(

                to bottom,

                #d71920 0%,

                #d71920 92%,

                rgba(215,25,32,.15) 100%

            );

    }


    .about-timeline-item {

        display: grid;

        grid-template-columns: 40px 1fr;

        grid-template-rows: auto auto auto;

        column-gap: 20px;

        padding: 0 0 40px;

        text-align: left;

    }


    .about-timeline-year {

        grid-column: 1;

        grid-row: 1;

        height: auto;

        margin: 0;

        padding-top: 2px;

        font-size: 9.5px;

        text-align: center;

    }


    .about-timeline-icon {

        grid-column: 1;

        grid-row: 2;

        width: 40px;

        height: 40px;

        margin: 9px 0 0;

        font-size: 18px;

        background: #ffffff;

        border: 1px solid #e3e3e3;

        box-shadow:

            0 4px 12px rgba(0,0,0,.07);

    }


    .about-timeline-dot {

        display: none;

    }


    .about-timeline-item h3 {

        grid-column: 2;

        grid-row: 1;

        margin: 0 0 7px;

        align-self: center;

        font-size: 13.5px;

        line-height: 1.35;

    }


    .about-timeline-item p {

        grid-column: 2;

        grid-row: 2 / span 2;

        max-width: 100%;

        margin: 0;

        font-size: 10.8px;

        line-height: 1.7;

    }


    .about-timeline-item:last-child {

        padding-bottom: 0;

    }


    .about-timeline-item:last-child
    .about-timeline-icon {

        background: #d71920;

        border-color: #d71920;

        color: #ffffff;

        box-shadow:

            0 7px 18px rgba(215,25,32,.20);

    }


    /* -----------------------------------------------------
       PRINCÍPIOS
    ----------------------------------------------------- */

    .about-principles {

        min-height: auto;

    }


    .about-principles-content {

        display: flex;

        flex-direction: column;

        min-height: auto;

    }


    .about-principles-text {

        min-height: auto;

        padding: 48px 25px 42px;

    }


    .about-principles-eyebrow {

        font-size: 10.5px;

        letter-spacing: .7px;

    }


    .about-principles-line {

        width: 38px;

        margin-top: 12px;

        margin-bottom: 25px;

    }


    .about-principles-grid {

        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        max-width: none;

    }


    .about-principle {

        display: flex;

        align-items: flex-start;

        gap: 16px;

        min-height: auto;

        padding: 16px 0;

        border-bottom:

            1px solid rgba(255,255,255,.16);

    }


    .about-principle:last-child {

        border-bottom: none;

    }


    .about-principle-icon {

        flex: 0 0 34px;

        width: 34px;

        height: 34px;

        font-size: 22px;

        border:

            1px solid rgba(255,255,255,.30);

        border-radius: 50%;

        background:

            rgba(255,255,255,.06);

    }


    .about-principle h3 {

        margin: 0 0 5px;

        font-size: 12.5px;

    }


    .about-principle p {

        max-width: none;

        font-size: 10px;

        line-height: 1.55;

    }


    /* -----------------------------------------------------
       GALERIA
    ----------------------------------------------------- */

    .about-principles-gallery {

        height: 310px;

        min-height: 310px;

        grid-template-rows: 61% 39%;

    }


    .about-gallery-main img {

        object-position: center 17%;

    }


    .about-gallery-small img {

        object-position: center center;

    }


    /* -----------------------------------------------------
       FRASE
    ----------------------------------------------------- */

    .about-quote {

        min-height: 275px;

        background-position: center center;

    }


    .about-quote-overlay {

        background:

            linear-gradient(

                180deg,

                rgba(8,8,8,.78) 0%,

                rgba(35,0,0,.80) 100%

            );

    }


    .about-quote-content {

        width: calc(100% - 24px);

        padding: 56px 27px 45px;

    }


    .about-quote-content p {

        max-width: 100%;

        font-size: 18px;

        line-height: 1.55;

    }


    .about-quote-mark {

        font-size: 60px;

    }


    .about-quote-content >
    .about-quote-mark:first-child {

        top: 28px;

        left: 0;

    }


    .about-quote-close {

        right: 0;

        bottom: 12px;

    }


    .about-quote-content::after {

        width: 38px;

        margin-top: 22px;

    }


    /* -----------------------------------------------------
       BIOGRAFIA
    ----------------------------------------------------- */

    .about-biography {

        padding: 70px 0 62px;

    }


    .about-biography-grid {

        display: grid;

        grid-template-columns: 1fr;

        gap: 38px;

        margin-bottom: 65px;

    }


    .about-biography-grid article {

        padding-top: 20px;

    }


    .about-bio-number {

        font-size: 34px;

    }


    .about-biography-grid h3 {

        margin: 7px 0 12px;

        font-size: 21px;

    }


    .about-biography-grid p {

        margin: 0 0 12px;

        font-size: 11.8px;

        line-height: 1.75;

    }


    /* -----------------------------------------------------
       CARREIRA
    ----------------------------------------------------- */

    .about-career-list {

        border-top: 1px solid #ddd;

    }


    .about-career-list article {

        display: block;

        padding: 23px 0 25px;

    }


    .about-career-list article > span {

        display: inline-block;

        margin-bottom: 7px;

        font-size: 9.5px;

        letter-spacing: .4px;

    }


    .about-career-list h3 {

        margin: 0 0 8px;

        font-size: 20px;

        line-height: 1.3;

    }


    .about-career-list p {

        max-width: 100%;

        font-size: 11.5px;

        line-height: 1.75;

    }

}


/* =========================================================
   =========================================================
   MOBILE
   600PX
   =========================================================
========================================================= */

@media (max-width: 600px) {


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .about-container {

        width: calc(100% - 28px);

    }


    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */

    .about-breadcrumb {

        padding: 14px 0;

    }


    .about-breadcrumb .about-container {

        gap: 7px;

        font-size: 9.5px;

    }


    .about-home-icon {

        font-size: 14px;

    }


    .about-breadcrumb-arrow {

        font-size: 15px;

    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .about-intro {

        padding:

            38px

            20px

            32px;

    }


    .about-eyebrow {

        font-size: 9px;

        letter-spacing: .55px;

    }


    .about-red-line {

        width: 34px;

        margin-bottom: 17px;

    }


    .about-intro h1 {

        font-size: 35px;

        letter-spacing: -.025em;

        margin-bottom: 17px;

    }


    .about-intro h2 {

        font-size: 14.5px;

        line-height: 1.55;

        margin-bottom: 16px;

    }


    .about-intro p {

        font-size: 11.5px;

        line-height: 1.75;

    }


    .about-signature {

        font-size: 21px;

    }


    /* -----------------------------------------------------
       FOTO
    ----------------------------------------------------- */

    .about-hero-image {

        height: 410px;

        min-height: 410px;

    }


    .about-hero-image img {

        object-position: center 8%;

    }


    /* -----------------------------------------------------
       VALORES
    ----------------------------------------------------- */

    .about-values-card {

        width: calc(100% - 20px);

        margin-top: -37px;

        padding: 10px 7px;

        border-radius: 14px;

    }


    .about-value {

        padding: 12px 6px;

    }


    .about-value-icon {

        height: 31px;

        font-size: 22px;

    }


    .about-value h3 {

        font-size: 10.5px;

    }


    .about-value p {

        font-size: 8.8px;

    }


    /* -----------------------------------------------------
       TRAJETÓRIA
    ----------------------------------------------------- */

    .about-trajectory {

        padding: 58px 0 52px;

    }


    .about-section-heading {

        margin-bottom: 35px;

    }


    .about-section-heading > span {

        font-size: 8.8px;

    }


    .about-section-heading h2 {

        font-size: 24px;

    }


    .about-timeline {

        padding-left: 5px;

    }


    .about-timeline::before {

        left: 28px;

    }


    .about-timeline-item {

        grid-template-columns: 30px 1fr;

        column-gap: 17px;

        padding-bottom: 36px;

    }


    .about-timeline-year {

        font-size: 9px;

    }


    .about-timeline-icon {

        width: 36px;

        height: 36px;

        margin-top: 8px;

        font-size: 16px;

    }


    .about-timeline-item h3 {

        font-size: 12.5px;

        margin-bottom: 6px;

    }


    .about-timeline-item p {

        font-size: 10.2px;

        line-height: 1.7;

    }


    /* -----------------------------------------------------
       PRINCÍPIOS
    ----------------------------------------------------- */

    .about-principles-text {

        padding:

            42px

            20px

            36px;

    }


    .about-principles-eyebrow {

        font-size: 9px;

    }


    .about-principles-line {

        width: 34px;

        margin-bottom: 21px;

    }


    .about-principle {

        gap: 13px;

        padding: 14px 0;

    }


    .about-principle-icon {

        flex-basis: 31px;

        width: 31px;

        height: 31px;

        font-size: 20px;

    }


    .about-principle h3 {

        font-size: 11.5px;

    }


    .about-principle p {

        font-size: 9.5px;

    }


    /* -----------------------------------------------------
       GALERIA
    ----------------------------------------------------- */

    .about-principles-gallery {

        height: 270px;

        min-height: 270px;

        grid-template-rows: 60% 40%;

    }


    /* -----------------------------------------------------
       FRASE
    ----------------------------------------------------- */

    .about-quote {

        min-height: 265px;

    }


    .about-quote-content {

        width: calc(100% - 16px);

        padding:

            51px

            22px

            42px;

    }


    .about-quote-content p {

        font-size: 16.5px;

        line-height: 1.55;

    }


    .about-quote-mark {

        font-size: 55px;

    }


    .about-quote-content >
    .about-quote-mark:first-child {

        top: 26px;

        left: 0;

    }


    .about-quote-close {

        right: 0;

        bottom: 9px;

    }


    /* -----------------------------------------------------
       BIOGRAFIA
    ----------------------------------------------------- */

    .about-biography {

        padding: 58px 0 52px;

    }


    .about-biography-grid {

        gap: 31px;

        margin-bottom: 52px;

    }


    .about-biography-grid article {

        padding-top: 17px;

    }


    .about-bio-number {

        font-size: 31px;

    }


    .about-biography-grid h3 {

        font-size: 19px;

        margin: 6px 0 10px;

    }


    .about-biography-grid p {

        font-size: 11px;

        line-height: 1.75;

    }


    /* -----------------------------------------------------
       CARREIRA
    ----------------------------------------------------- */

    .about-career-list article {

        padding: 20px 0 22px;

    }


    .about-career-list article > span {

        font-size: 9px;

    }


    .about-career-list h3 {

        font-size: 18px;

        line-height: 1.3;

    }


    .about-career-list p {

        font-size: 10.8px;

        line-height: 1.75;

    }

}


/* =========================================================
   =========================================================
   MOBILE MUITO PEQUENO
   390PX
   =========================================================
========================================================= */

@media (max-width: 390px) {


    .about-container {

        width: calc(100% - 24px);

    }


    /* HERO */

    .about-intro {

        padding:

            34px

            17px

            29px;

    }


    .about-intro h1 {

        font-size: 31px;

    }


    .about-intro h2 {

        font-size: 13.5px;

    }


    .about-intro p {

        font-size: 10.8px;

    }


    .about-hero-image {

        height: 370px;

        min-height: 370px;

    }


    /* VALORES */

    .about-values-card {

        width: calc(100% - 16px);

        margin-top: -33px;

    }


    .about-value {

        padding:

            11px 5px;

    }


    .about-value-icon {

        font-size: 20px;

        height: 29px;

    }


    .about-value h3 {

        font-size: 9.5px;

    }


    .about-value p {

        font-size: 8px;

    }


    /* TRAJETÓRIA */

    .about-trajectory {

        padding-top: 50px;

    }


    .about-section-heading h2 {

        font-size: 22px;

    }


    .about-timeline {

        padding-left: 4px;

    }


    .about-timeline::before {

        left: 27px;

    }


    .about-timeline-item {

        grid-template-columns: 29px 1fr;

        column-gap: 15px;

    }


    .about-timeline-icon {

        width: 34px;

        height: 34px;

        font-size: 15px;

    }


    .about-timeline-item h3 {

        font-size: 12px;

    }


    .about-timeline-item p {

        font-size: 9.7px;

    }


    /* PRINCÍPIOS */

    .about-principles-text {

        padding-left: 17px;

        padding-right: 17px;

    }


    .about-principle {

        gap: 11px;

    }


    .about-principle-icon {

        flex-basis: 29px;

        width: 29px;

        height: 29px;

        font-size: 18px;

    }


    .about-principle h3 {

        font-size: 11px;

    }


    .about-principle p {

        font-size: 9px;

    }


    /* GALERIA */

    .about-principles-gallery {

        height: 250px;

        min-height: 250px;

    }


    /* QUOTE */

    .about-quote {

        min-height: 250px;

    }


    .about-quote-content {

        padding-left: 18px;

        padding-right: 18px;

    }


    .about-quote-content p {

        font-size: 15.5px;

    }


    /* BIOGRAFIA */

    .about-biography-grid h3 {

        font-size: 18px;

    }


    .about-biography-grid p {

        font-size: 10.5px;

    }


    /* CARREIRA */

    .about-career-list h3 {

        font-size: 16.5px;

    }


    .about-career-list p {

        font-size: 10.2px;

    }

}


/* =========================================================
   iPHONE / SAFE AREA
========================================================= */

@media (max-width: 600px) {


    .about-hero,
    .about-trajectory,
    .about-principles,
    .about-quote,
    .about-biography {

        overflow-x: hidden;

    }


    .about-container {

        padding-left:

            env(safe-area-inset-left);

        padding-right:

            env(safe-area-inset-right);

    }


    .about-hero-image img,
    .about-gallery-main img,
    .about-gallery-small img {

        max-width: 100%;

    }

}


/* =========================================================
   TOUCH DEVICES
   SEM HOVER AGRESSIVO
========================================================= */

@media (hover: none) and (pointer: coarse) {


    .about-timeline-item:hover
    .about-timeline-icon {

        transform: none;

        box-shadow:

            0 4px 12px rgba(0,0,0,.07);

    }


    .about-timeline-item:hover
    .about-timeline-year {

        color: #d71920;

    }


    .about-quote:hover {

        background-position: center center;

    }


    .about-hero-image:hover img,
    .about-gallery-main:hover img {

        transform: none;

    }

}


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

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


    .about-hero-image img,
    .about-gallery-main img,
    .about-timeline-icon,
    .about-quote {

        transition: none !important;

    }

}