/* ==========================================================
   RESPONSIVIDADE GLOBAL

   Breakpoints oficiais:
   320px
   375px
   425px
   768px
   1024px
   1366px
   1920px

   As regras específicas serão adicionadas conforme
   cada seção for desenvolvida.
   ========================================================== */


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

@media (max-width: 374px) {

    :root {
        --container-padding: 1rem;
    }
}


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

@media (min-width: 375px) and (max-width: 767px) {

    :root {
        --container-padding: 1.25rem;
    }
}


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

@media (min-width: 768px) and (max-width: 1023px) {

    :root {
        --container-padding: 2rem;
    }
}


/* ==========================================================
   LAPTOP
   ========================================================== */

@media (min-width: 1024px) {

    :root {
        --container-padding: 2.5rem;
    }
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 1366px) {

    :root {
        --container-padding: 3rem;
    }
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1920px) {

    :root {
        --container-max: 1360px;
    }
}

/* ==========================================================
   HEADER — RESPONSIVIDADE
   ========================================================== */


/* ==========================================================
   MOBILE + TABLET
   ========================================================== */

@media (max-width: 1023px) {

    .site-header__container {
        min-height: 76px;
    }


    .site-header.is-scrolled .site-header__container {
        min-height: 68px;
    }


    .site-nav,
    .site-header__actions {
        display: none;
    }


    .menu-toggle {
        display: inline-flex;
    }


    .mobile-nav {
        display: block;

        padding-top: 76px;
    }


    .site-header.is-scrolled+.mobile-nav {
        padding-top: 68px;
    }


    .mobile-nav__inner {
        height:
            calc(100dvh - 76px);
    }

}


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

@media (max-width: 374px) {

    .site-header__brand-name {
        font-size: 1.2rem;
    }


    .mobile-nav__inner {
        width:
            calc(100% - 2rem);

        padding-top: var(--space-6);
    }


    .mobile-nav__link {
        padding:
            1.25rem 0;
    }

}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1366px) {

    .site-header__container {
        min-height: 92px;
    }


    .site-header.is-scrolled .site-header__container {
        min-height: 72px;
    }

}

/* ==========================================================
   HERO — RESPONSIVIDADE
   ========================================================== */


/* ==========================================================
   TABLET + MOBILE
   ========================================================== */

@media (max-width: 1023px) {

    .hero {
        min-height: auto;
    }


    .hero__media {
        inset: 0;
    }


    .hero__image {
        height: 100%;

        object-position:
            58% center;
    }


    .hero__overlay {
        background:
            linear-gradient(180deg,
                rgba(8, 15, 21, 0.92) 0%,
                rgba(8, 15, 21, 0.86) 52%,
                rgba(8, 15, 21, 0.78) 100%);
    }


    .hero__container {
        grid-template-columns:
            minmax(0, 1fr);

        gap: var(--space-8);

        padding-top:
            clamp(128px,
                16vw,
                160px);

        padding-bottom:
            112px;
    }


    .hero__content {
        max-width: 720px;
    }


    .hero__title {
        max-width: 680px;

        font-size:
            clamp(3.4rem,
                9vw,
                5.6rem);
    }


    .hero__description {
        max-width: 620px;
    }


    .hero__showcase {
        justify-content:
            flex-start;

        max-width: 720px;
    }


    .hero-preview {
        width: min(92%,
                620px);

        transform:
            none;
    }


    .hero__scroll {
        display: none;
    }

}


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

@media (max-width: 767px) {

    .hero__container {
        gap: var(--space-6);

        padding-top: 118px;
        padding-bottom: 80px;
    }


    .hero__eyebrow {
        margin-bottom:
            var(--space-2);

        font-size:
            0.68rem;
    }


    .hero__title {
        font-size:
            clamp(2.9rem,
                13vw,
                4.5rem);

        line-height:
            0.96;

        letter-spacing:
            -0.035em;
    }


    .hero__description {
        margin-top:
            var(--space-3);

        font-size:
            0.97rem;

        line-height:
            1.7;
    }


    .hero__actions {
        display: grid;

        width: 100%;

        margin-top:
            var(--space-4);
    }


    .hero__actions .button {
        width: 100%;
    }


    .hero__meta {
        display: grid;

        grid-template-columns:
            repeat(2,
                minmax(0, max-content));

        column-gap:
            var(--space-3);

        row-gap:
            0.7rem;

        margin-top:
            var(--space-3);
    }


    .hero-preview {
        width: 100%;
    }


    .hero-preview__bar {
        min-height: 40px;
    }


    .hero-preview__address {
        max-width: 170px;

        font-size: 0.6rem;
    }


    .hero-preview__badge {
        right: 12px;
        bottom: -18px;
    }

}


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

@media (max-width: 374px) {

    .hero__container {
        padding-top: 110px;
    }


    .hero__title {
        font-size:
            clamp(2.65rem,
                13vw,
                3.25rem);
    }


    .hero__meta {
        grid-template-columns:
            1fr;
    }


    .hero-preview__badge {
        position: relative;

        right: auto;
        bottom: auto;

        width: fit-content;

        margin-top:
            var(--space-2);
    }

}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 1024px) and (max-width: 1199px) {

    .hero__container {
        grid-template-columns:
            minmax(0, 1.1fr) minmax(340px, 0.9fr);

        gap: var(--space-5);
    }


    .hero__title {
        font-size:
            clamp(3.7rem,
                5.3vw,
                5rem);
    }

}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1600px) {

    .hero__container {
        min-height: 100svh;
    }


    .hero-preview {
        width: 620px;
    }

}

/* ==========================================================
   VANTAGENS — RESPONSIVIDADE
   ========================================================== */


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

@media (max-width: 1023px) {

    .advantages__header {
        grid-template-columns:
            minmax(0, 1fr);

        align-items:
            start;

        gap:
            var(--space-4);
    }


    .advantages__intro {
        max-width:
            680px;
    }


    .advantages__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .advantage-card {
        min-height:
            340px;
    }

}


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

@media (max-width: 767px) {

    .advantages__header {
        margin-bottom:
            var(--space-8);
    }


    .advantages__title {
        font-size:
            clamp(2.55rem,
                11vw,
                3.6rem);
    }


    .advantages__grid {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .advantage-card {
        min-height:
            auto;

        padding:
            var(--space-4);
    }


    .advantage-card__icon {
        margin-bottom:
            var(--space-5);
    }


    .advantage-card__title {
        max-width:
            320px;
    }


    .advantage-card__text {
        max-width:
            520px;
    }


    .advantages__footer {
        justify-content:
            flex-start;

        margin-top:
            var(--space-4);
    }

}


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

@media (max-width: 374px) {

    .advantage-card {
        padding:
            1.5rem;
    }


    .advantage-card__number {
        top:
            1.5rem;

        right:
            1.5rem;
    }


    .advantage-card__title {
        font-size:
            1.7rem;
    }

}

/* ==========================================================
   COMO FUNCIONA — RESPONSIVIDADE
   ========================================================== */


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

@media (max-width: 1023px) {

    .process__header {
        grid-template-columns:
            minmax(0, 1fr);

        align-items:
            start;

        gap:
            var(--space-4);
    }


    .process__intro {
        max-width:
            680px;
    }


    .process-steps {
        grid-template-columns:
            minmax(0, 1fr);

        border-bottom:
            0;
    }


    .process-steps::before {
        top:
            72px;

        bottom:
            72px;

        left:
            50px;

        right:
            auto;

        width:
            1px;

        height:
            auto;

        background:
            linear-gradient(180deg,
                rgba(181, 154, 104, 0.20),
                var(--color-accent),
                rgba(181, 154, 104, 0.20));
    }


    .process-step {
        min-height:
            auto;

        padding:
            var(--space-5) var(--space-4) var(--space-6) 6.5rem;

        border-right:
            0;

        border-bottom:
            1px solid var(--color-border-dark);
    }


    .process-step__top {
        position:
            static;

        margin-bottom:
            var(--space-3);
    }


    .process-step__icon {
        position:
            absolute;

        top:
            var(--space-5);

        left:
            24px;
    }


    .process-step__number {
        order:
            2;
    }


    .customization-panel {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            var(--space-8);
    }


    .customization-panel__intro {
        max-width:
            680px;
    }

}


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

@media (max-width: 767px) {

    .process__header {
        margin-bottom:
            var(--space-8);
    }


    .process__title {
        font-size:
            clamp(2.55rem,
                11vw,
                3.7rem);
    }


    .process-step {
        padding:
            var(--space-4) var(--space-3) var(--space-5) 5.25rem;
    }


    .process-step__icon {
        top:
            var(--space-4);

        left:
            16px;

        width:
            46px;

        height:
            46px;
    }


    .process-steps::before {
        left:
            39px;

        top:
            65px;

        bottom:
            65px;
    }


    .process-step__title {
        font-size:
            clamp(1.8rem,
                8vw,
                2.3rem);
    }


    .customization-panel {
        padding:
            var(--space-4);

        border-radius:
            var(--radius-md);
    }


    .customization-panel__title {
        font-size:
            clamp(2.2rem,
                10vw,
                3rem);
    }


    .customization-panel__grid {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .customization-item {
        min-height:
            auto;
    }

}


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

@media (max-width: 374px) {

    .process-step {
        padding-left:
            4.75rem;
    }


    .process-step__icon {
        left:
            12px;

        width:
            44px;

        height:
            44px;
    }


    .process-steps::before {
        left:
            34px;
    }


    .customization-panel {
        padding:
            1.5rem;
    }

}

/* ==========================================================
   PLANOS — RESPONSIVIDADE
   ========================================================== */


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

@media (max-width: 1023px) {

    .pricing__grid {
        grid-template-columns:
            minmax(0, 1fr);

        max-width:
            720px;

        margin-inline:
            auto;

        gap:
            var(--space-4);
    }


    .pricing-card--featured,
    .pricing-card--featured:hover {
        transform:
            none;
    }


    .pricing-card {
        padding:
            var(--space-5);
    }


    .pricing-card__features {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .maintenance__content-inner {
        gap:
            var(--space-8);
    }


    .pricing-final-cta {
        grid-template-columns:
            minmax(0, 1fr);

        align-items:
            start;
    }


    .pricing-final-cta__button {
        width:
            fit-content;
    }

}


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

@media (max-width: 767px) {

    .pricing__header {
        text-align:
            left;
    }


    .pricing__title {
        font-size:
            clamp(2.55rem,
                11vw,
                3.7rem);
    }


    .pricing__intro {
        margin-left:
            0;

        margin-right:
            0;
    }


    .pricing-card {
        padding:
            var(--space-4);
    }


    .pricing-card__features {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .pricing-card__price strong {
        font-size:
            clamp(2.8rem,
                14vw,
                4rem);
    }


    .maintenance__trigger {
        align-items:
            flex-start;
    }


    .maintenance__content-inner {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            var(--space-5);
    }


    .pricing-final-cta {
        margin-top:
            var(--space-8);

        padding:
            var(--space-4);
    }


    .pricing-final-cta__button {
        width:
            100%;
    }

}


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

@media (max-width: 374px) {

    .pricing-card {
        padding:
            1.5rem;
    }


    .pricing-card__name {
        font-size:
            1.9rem;
    }


    .pricing-card__badge {
        font-size:
            0.62rem;

        white-space:
            nowrap;
    }


    .maintenance__trigger strong {
        font-size:
            1.55rem;
    }


    .maintenance__icon {
        width:
            40px;

        height:
            40px;
    }

}

/* ==========================================================
   FOOTER — RESPONSIVIDADE
   ========================================================== */


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

@media (max-width: 1023px) {

    .site-footer__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .site-footer__brand {
        max-width:
            520px;
    }

}


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

@media (max-width: 767px) {

    .site-footer__grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            var(--space-6);
    }


    .site-footer__brand {
        max-width:
            100%;
    }


    .site-footer__bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .site-footer__back-top {
        width:
            fit-content;

        justify-content:
            flex-start;

        gap:
            var(--space-2);

        padding-top:
            var(--space-2);
    }


    .floating-whatsapp {
        right:
            1rem;

        bottom:
            1rem;
    }


    .floating-whatsapp__tooltip {
        display:
            none;
    }


    .floating-whatsapp__icon {
        width:
            54px;

        height:
            54px;
    }

}


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

@media (max-width: 374px) {

    .site-footer {
        padding-bottom:
            5.5rem;
    }


    .site-footer__logo {
        font-size:
            1.5rem;
    }


    .floating-whatsapp__icon {
        width:
            50px;

        height:
            50px;
    }

}

@media (min-width: 1024px) and (max-height: 760px) {

    .hero {
        min-height:
            760px;
    }


    .hero__container {
        padding-top:
            108px;

        padding-bottom:
            72px;
    }


    .hero__title {
        font-size:
            clamp(3.6rem,
                5vw,
                5.4rem);
    }

}

/* ==========================================================
   HERO — AJUSTE PARA MOBILE ESTREITO
   Galaxy S23 e viewports próximas de 360px
   ========================================================== */

@media (min-width: 350px) and (max-width: 390px) {

    .hero__title {
        font-size:
            clamp(2.72rem,
                12.2vw,
                3.35rem);

        letter-spacing:
            -0.03em;
    }

}