/* ========================================
   BANNER
======================================== */

.banner {
    position: relative;
    width: 100%;
    min-height: 760px;
    overflow: hidden;

    background-image: url("../images/banner/bg_desktop.jpg");
    background-size: cover;
    background-position: center;
}

/* Conteúdo principal */

.banner-content {
    position: relative;
    z-index: 2;

    width: min(1500px, 90%);
    min-height: 760px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
}

/* ========================================
   LOGO
======================================== */

.banner-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: translateX(70px);
}

.banner-logo img {
    width: 600px;
    height: auto;

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-logo:hover img {
    transform: translateY(-7px) scale(1.015);
}

/* ========================================
   PALOMA + RENAN
======================================== */

.banner-person {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    transform: translate(-30px, 80px);
}

.banner-person img {
    width: 600px;
    height: auto;

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.banner-person:hover img {
    transform: translateY(-8px) scale(1.01);
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 800px) {

    .banner {
        position: relative;
        min-height: auto;
        padding: 70px 0 0;

        background: #FFD400;
        overflow: hidden;
    }

    /* ========================================
       FUNDO ILUSTRADO - PARTE INFERIOR
    ======================================== */

    .banner::before {
        content: "";
        position: absolute;

        left: -40px;
        bottom: -30px;

        width: calc(110%);
        height: calc(60% + 30px);

        background-image: url("../images/banner/bg_mobile.jpg");
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;

        z-index: 0;
    }


    /* ========================================
       CONTEÚDO
    ======================================== */

    .banner-content {
        position: relative;
        z-index: 2;

        width: 90%;
        min-height: auto;

        display: flex;
        flex-direction: column;

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

        gap: 10px;
    }


    /* ========================================
       LOGO DO BANNER
    ======================================== */

    .banner-logo {
        width: 100%;

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

        transform: translateX(20px);
    }

    .banner-logo img {
        display: block;

        width: 82%;
        max-width: 400px;
        height: auto;
    }


    /* ========================================
       PALOMA + RENAN
    ======================================== */

    .banner-person {
          width: 90%;
          justify-content: center;
          transform: translateY(0px);
      }

    .banner-person img {
        display: block;

        width: 92%;
        max-width: 600px;
        height: auto;
    }


    /* ========================================
       SEM HOVER NO MOBILE
    ======================================== */

    .banner-logo:hover img,
    .banner-person:hover img {
        transform: none;
    }
}