/* =========================================================
   AP AGRO
   MOBILE EXPERIENCE V2.1
   ========================================================= */


/* ---------------------------------------------------------
   AJUSTES GERAIS PARA TOQUE
--------------------------------------------------------- */

html {

    -webkit-text-size-adjust: 100%;

    scroll-padding-top: 82px;

}


body {

    overflow-x: hidden;

}


a,
button,
input,
select,
textarea {

    touch-action: manipulation;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


/* ---------------------------------------------------------
   TABLETS E TELAS MENORES
--------------------------------------------------------- */

@media (max-width: 1024px) {

    .container {

        width:
            min(
                calc(100% - 40px),
                1240px
            );

    }


    .section {

        padding:
            90px
            0;

    }


    .section-heading {

        gap:
            30px;

    }


    .hero h1 {

        font-size:
            clamp(
                48px,
                7vw,
                70px
            );

    }


    .solution-grid {

        gap:
            16px;

    }


    .solution-photo {

        height:
            320px;

    }


    .about-grid {

        gap:
            55px;

    }


    .cloud-content h2 {

        max-width:
            700px;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       BASE
    ----------------------------------------------------- */

    html {

        scroll-padding-top:
            72px;

    }


    body {

        width:
            100%;

        min-width:
            0;

    }


    .container {

        width:
            calc(
                100% - 32px
            );

    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {

        background:
            rgba(
                7,
                39,
                22,
                .97
            );

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .10
            );

        backdrop-filter:
            blur(
                12px
            );

        -webkit-backdrop-filter:
            blur(
                12px
            );

    }


    .header-inner {

        min-height:
            72px;

        gap:
            12px;

    }


    .brand {

        min-width:
            0;

    }


    .brand img {

        width:
            145px;

        height:
            52px;

        object-fit:
            contain;

        object-position:
            left center;

    }


    .brand-fallback {

        font-size:
            20px;

    }


    .menu-toggle {

        width:
            46px;

        height:
            46px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex:
            0
            0
            46px;

        padding:
            0;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .18
            );

        border-radius:
            8px;

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

        color:
            white;

        font-size:
            25px;

    }


    .main-nav {

        position:
            fixed;

        z-index:
            999;

        left:
            0;

        right:
            0;

        top:
            72px;

        width:
            100%;

        max-height:
            calc(
                100dvh
                -
                72px
            );

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        overflow-y:
            auto;

        padding:
            12px
            18px
            24px;

        background:
            rgba(
                7,
                39,
                22,
                .99
            );

        box-shadow:
            0
            25px
            50px
            rgba(
                0,
                0,
                0,
                .22
            );

    }


    .main-nav.open {

        display:
            flex;

    }


    .main-nav a {

        min-height:
            54px;

        display:
            flex;

        align-items:
            center;

        padding:
            0
            5px;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .10
            );

        color:
            white;

        font-size:
            15px;

    }


    .main-nav .nav-cloud {

        min-height:
            52px;

        justify-content:
            center;

        margin-top:
            14px;

        padding:
            0
            18px;

        border:
            0;

        border-radius:
            6px;

        background:
            #38e500;

        color:
            #0c3821;

        font-weight:
            800;

    }


    body.mobile-menu-open {

        overflow:
            hidden;

    }


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

    .hero {

        min-height:
            100vh;

        min-height:
            100svh;

        align-items:
            center;

        background-position:
            center center;

    }


    .hero-overlay {

        background:

            linear-gradient(

                180deg,

                rgba(
                    5,
                    31,
                    17,
                    .70
                )
                0%,

                rgba(
                    5,
                    31,
                    17,
                    .86
                )
                55%,

                rgba(
                    5,
                    31,
                    17,
                    .96
                )
                100%

            );

    }


    .hero-content {

        width:
            100%;

        padding-top:
            115px;

        padding-bottom:
            150px;

    }


    .hero-copy {

        max-width:
            100%;

    }


    .eyebrow {

        margin-bottom:
            15px;

        font-size:
            10px;

        line-height:
            1.5;

        letter-spacing:
            1.8px;

    }


    .hero h1 {

        max-width:
            100%;

        margin:
            0;

        font-size:
            clamp(
                38px,
                11vw,
                52px
            );

        line-height:
            1.02;

        letter-spacing:
            -1.8px;

        overflow-wrap:
            normal;

    }


    .hero-copy > p {

        max-width:
            100%;

        margin-top:
            22px;

        font-size:
            16px;

        line-height:
            1.65;

    }


    .hero-actions {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            10px;

        margin-top:
            30px;

    }


    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {

        width:
            100%;

        min-height:
            52px;

        padding:
            0
            18px;

        text-align:
            center;

    }


    .hero-bottom {

        position:
            absolute;

        bottom:
            0;

    }


    .hero-bottom-inner {

        min-height:
            auto;

        grid-template-columns:
            1fr
            1fr;

    }


    .hero-bottom span {

        min-height:
            48px;

        justify-content:
            center;

        padding:
            0
            8px;

        border-right:
            1px solid
            rgba(
                255,
                255,
                255,
                .12
            );

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                .06
            );

        font-size:
            8px;

        letter-spacing:
            1.4px;

    }


    /* -----------------------------------------------------
       SECOES
    ----------------------------------------------------- */

    .section {

        padding:
            72px
            0;

    }


    .section-heading {

        display:
            block;

        margin-bottom:
            32px;

    }


    .section-heading h2 {

        max-width:
            100%;

        font-size:
            clamp(
                34px,
                9vw,
                45px
            );

        line-height:
            1.08;

        letter-spacing:
            -1.3px;

    }


    .section-heading > p {

        max-width:
            100%;

        margin-top:
            18px;

        font-size:
            15px;

        line-height:
            1.65;

    }


    /* -----------------------------------------------------
       NUMEROS
    ----------------------------------------------------- */

    .stats-grid {

        grid-template-columns:
            1fr
            1fr;

    }


    .stat {

        min-width:
            0;

        padding:
            25px
            17px;

    }


    .stat strong {

        font-size:
            clamp(
                25px,
                8vw,
                36px
            );

        overflow-wrap:
            break-word;

    }


    .stat span {

        font-size:
            12px;

        line-height:
            1.4;

    }


    /* -----------------------------------------------------
       SOLUCOES
    ----------------------------------------------------- */

    .solution-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .solution-card {

        width:
            100%;

    }


    .solution-photo {

        height:
            270px;

    }


    .solution-copy {

        padding:
            22px;

    }


    .solution-copy h3 {

        font-size:
            22px;

        line-height:
            1.15;

    }


    .solution-copy p {

        font-size:
            14px;

    }


    /* -----------------------------------------------------
       SOBRE
    ----------------------------------------------------- */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            42px;

    }


    .about-photo {

        min-height:
            390px;

        background-position:
            center;

    }


    .about-stamp {

        right:
            16px;

        bottom:
            16px;

        width:
            125px;

        height:
            125px;

    }


    .about-stamp strong {

        font-size:
            40px;

    }


    .about-stamp span {

        font-size:
            7px;

    }


    .about-copy h2 {

        font-size:
            clamp(
                35px,
                9vw,
                47px
            );

        letter-spacing:
            -1.2px;

    }


    .about-copy > p {

        margin:
            20px
            0;

        font-size:
            15px;

        line-height:
            1.75;

    }


    .about-features div {

        gap:
            16px;

        padding:
            16px
            0;

        font-size:
            14px;

    }


    /* -----------------------------------------------------
       AP AGRO CLOUD
    ----------------------------------------------------- */

    .cloud-section {

        min-height:
            640px;

        background-position:
            center center;

    }


    .cloud-overlay {

        background:

            linear-gradient(

                180deg,

                rgba(
                    5,
                    30,
                    17,
                    .72
                ),

                rgba(
                    5,
                    30,
                    17,
                    .96
                )
                80%

            );

    }


    .cloud-content {

        padding-top:
            80px;

        padding-bottom:
            80px;

    }


    .cloud-content h2 {

        max-width:
            100%;

        font-size:
            clamp(
                40px,
                10vw,
                54px
            );

        line-height:
            1.03;

        letter-spacing:
            -1.6px;

    }


    .cloud-content > p {

        max-width:
            100%;

        margin:
            20px
            0;

        font-size:
            15px;

        line-height:
            1.7;

    }


    .cloud-features {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            7px;

        margin-bottom:
            25px;

    }


    .cloud-features span {

        display:
            flex;

        align-items:
            center;

        min-height:
            44px;

        padding:
            8px
            10px;

        font-size:
            11px;

    }


    .cloud-content .btn-primary {

        width:
            100%;

        min-height:
            52px;

        text-align:
            center;

    }


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

    .interactive-section {

        overflow:
            hidden;

    }


    .interactive-image {

        overflow:
            hidden;

        border-radius:
            5px;

    }


    .interactive-image > img {

        width:
            100%;

        min-height:
            420px;

        height:
            60vh;

        max-height:
            600px;

        object-fit:
            cover;

        object-position:
            center;

    }


    .hotspot {

        width:
            38px;

        height:
            38px;

    }


    .hotspot-dot {

        width:
            22px;

        height:
            22px;

    }


    /*
       No celular o balao abre na parte
       inferior da tela para nunca sair
       para fora da imagem.
    */

    .hotspot-card {

        position:
            fixed !important;

        z-index:
            10001;

        left:
            16px !important;

        right:
            16px !important;

        top:
            auto !important;

        bottom:
            calc(
                18px
                +
                env(
                    safe-area-inset-bottom
                )
            ) !important;

        width:
            auto !important;

        max-width:
            none;

        padding:
            18px;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .13
            );

        border-radius:
            10px;

        background:
            rgba(
                7,
                39,
                22,
                .98
            );

        box-shadow:
            0
            20px
            55px
            rgba(
                0,
                0,
                0,
                .35
            );

        transform:
            translateY(
                18px
            ) !important;

        opacity:
            0;

        pointer-events:
            none;

    }


    .hotspot.active .hotspot-card {

        transform:
            translateY(
                0
            ) !important;

        opacity:
            1;

        pointer-events:
            auto;

    }


    .hotspot:hover .hotspot-card {

        transform:
            translateY(
                18px
            ) !important;

        opacity:
            0;

    }


    .hotspot.active:hover .hotspot-card {

        transform:
            translateY(
                0
            ) !important;

        opacity:
            1;

    }


    .hotspot-card strong {

        margin-bottom:
            7px;

        font-size:
            15px;

    }


    .hotspot-card small {

        font-size:
            13px;

        line-height:
            1.6;

    }


    /* -----------------------------------------------------
       VIDEOS
    ----------------------------------------------------- */

    .videos-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .video-card {

        width:
            100%;

    }


    .video-play {

        width:
            62px;

        height:
            62px;

    }


    .video-copy {

        padding:
            20px;

    }


    .video-copy h3 {

        font-size:
            21px;

    }


    .video-modal {

        padding:
            10px;

    }


    .video-modal-content {

        width:
            100%;

    }


    .video-modal-close {

        top:
            calc(
                10px
                +
                env(
                    safe-area-inset-top
                )
            );

        right:
            10px;

        width:
            44px;

        height:
            44px;

    }


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

    .gallery {

        min-height:
            auto;

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto;

        gap:
            10px;

    }


    .gallery-item,
    .gallery-item-1,
    .gallery-item-2,
    .gallery-item-3,
    .gallery-item-4 {

        min-height:
            270px;

        grid-column:
            auto;

        grid-row:
            auto;

        border-radius:
            4px;

    }


    /* -----------------------------------------------------
       CONTATO
    ----------------------------------------------------- */

    .contact {

        padding:
            72px
            0;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            42px;

    }


    .contact h2 {

        max-width:
            100%;

        font-size:
            clamp(
                38px,
                10vw,
                52px
            );

        letter-spacing:
            -1.5px;

    }


    .contact-info {

        gap:
            14px;

    }


    .contact-info .btn-primary {

        width:
            100%;

        min-height:
            52px;

    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-inner {

        min-height:
            auto;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            15px;

        padding:
            38px
            0;

    }


    .footer-inner img {

        max-width:
            150px;

    }


    .footer-inner p {

        margin:
            0;

        font-size:
            12px;

        line-height:
            1.5;

    }


    .footer-inner p:nth-child(3) {

        text-align:
            left;

    }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 430px) {

    .container {

        width:
            calc(
                100% - 26px
            );

    }


    .brand img {

        width:
            132px;

    }


    .hero h1 {

        font-size:
            37px;

        letter-spacing:
            -1.4px;

    }


    .hero-copy > p {

        font-size:
            15px;

    }


    .section-heading h2 {

        font-size:
            33px;

    }


    .stats-grid {

        grid-template-columns:
            1fr
            1fr;

    }


    .stat {

        padding:
            21px
            12px;

    }


    .stat strong {

        font-size:
            25px;

    }


    .solution-photo {

        height:
            235px;

    }


    .about-photo {

        min-height:
            330px;

    }


    .cloud-features {

        grid-template-columns:
            1fr;

    }


    .interactive-image > img {

        min-height:
            370px;

        height:
            55vh;

    }


    .gallery-item,
    .gallery-item-1,
    .gallery-item-2,
    .gallery-item-3,
    .gallery-item-4 {

        min-height:
            235px;

    }

}


/* =========================================================
   CELULAR NA HORIZONTAL
========================================================= */

@media (
    max-height: 500px
)
and
(
    orientation: landscape
) {

    .hero {

        min-height:
            620px;

    }


    .hero-content {

        padding-top:
            100px;

        padding-bottom:
            120px;

    }


    .main-nav {

        max-height:
            calc(
                100vh - 72px
            );

    }

}


/* =========================================================
   SAFE AREA - IPHONE
========================================================= */

@supports (
    padding:
        max(
            0px
        )
) {

    @media (
        max-width:
            768px
    ) {

        .header-inner {

            padding-left:
                max(
                    0px,
                    env(
                        safe-area-inset-left
                    )
                );

            padding-right:
                max(
                    0px,
                    env(
                        safe-area-inset-right
                    )
                );

        }


        .main-nav {

            padding-bottom:
                max(
                    24px,
                    env(
                        safe-area-inset-bottom
                    )
                );

        }

    }

}