/* =========================================================
   VIP CAR ESTÉTICA AUTOMOTIVA
   Arquivo: responsive.css

   Responsável por:
   - Ajustes finais de responsividade
   - Notebooks menores
   - Tablets
   - Celulares
   - Celulares muito pequenos
   - Telas horizontais
   - Telas com pouca altura
   - Safe area de iPhone
   - Correções de overflow
   - Refinamento final do layout

   IMPORTANTE:
   Este arquivo é carregado POR ÚLTIMO.
   Portanto, ele funciona como uma camada final
   de correção sobre os demais CSS.
========================================================= */


/* =========================================================
   PROTEÇÃO GLOBAL CONTRA OVERFLOW
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================================================
   MÍDIAS
========================================================= */

img,
video,
iframe,
svg {
    max-width: 100%;
}


/* =========================================================
   TEXTOS GRANDES

   Evita estouro de palavras ou URLs.
========================================================= */

h1,
h2,
h3,
h4,
p,
a,
strong,
span {
    overflow-wrap: break-word;
}


/* =========================================================
   HEADER — TELAS GRANDES
========================================================= */

@media (min-width: 1440px) {

    .header-inner {
        gap: 48px;
    }

    .desktop-nav {
        gap: 42px;
    }

    .hero-content {
        padding-top: 110px;
    }

}


/* =========================================================
   NOTEBOOKS GRANDES
========================================================= */

@media (max-width: 1366px) {

    :root {
        --container-width: 1180px;
        --container-wide: 1280px;
    }


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

    .desktop-nav {
        gap: 26px;
    }

    .header-whatsapp {
        padding-inline: 20px;
    }


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

    .hero-content {
        width: min(
            100%,
            790px
        );
    }

    .hero-description {
        max-width: 640px;
    }


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

    .about-grid {
        gap: 64px;
    }

}


/* =========================================================
   NOTEBOOKS MENORES
========================================================= */

@media (max-width: 1180px) {

    :root {
        --container-padding: 22px;
    }


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

    .desktop-nav {
        gap: 20px;
    }

    .nav-link {
        font-size: 0.82rem;
    }

    .header-whatsapp {
        min-height: 48px;
        padding-inline: 17px;
    }


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

    .hero-content {
        width: min(
            100%,
            730px
        );
    }

    .hero-description {
        max-width: 600px;
    }


    /* -----------------------------------------------------
       SERVIÇOS
    ----------------------------------------------------- */

    .services-grid {
        gap: 18px;
    }


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

    .gallery-grid {
        gap: 14px;
    }

}


/* =========================================================
   TABLET / NOTEBOOK COMPACTO
========================================================= */

@media (max-width: 1024px) {

    :root {
        --container-padding: 22px;
    }


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

    .site-header {
        min-height: var(--header-height-mobile);
    }

    .header-inner {
        min-height: var(--header-height-mobile);
    }

    .brand-logo {
        height: 48px;
    }


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

    .hero {
        padding-top: var(--header-height-mobile);
    }

    .hero-content {
        max-width: 720px;

        padding-top: 100px;
        padding-bottom: 120px;
    }

    .hero h1 {
        max-width: 800px;
    }

    .hero-description {
        max-width: 620px;
    }


    /* -----------------------------------------------------
       SERVIÇOS
    ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       RESULTADOS
    ----------------------------------------------------- */

    .results-heading {
        grid-template-columns: 1fr;

        gap: 24px;
    }


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

    .about-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .about-media {
        width: min(
            100%,
            760px
        );

        margin-inline: auto;
    }


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

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


    /* -----------------------------------------------------
       LOCALIZAÇÃO
    ----------------------------------------------------- */

    .location-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

}


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

@media (max-width: 900px) {

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

    .hero-content {
        width: 100%;

        max-width: 680px;
    }

    .hero h1 {
        max-width: 690px;
    }


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

    .hero-features {
        gap: 14px 22px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .contact-cta-box {
        gap: 32px;
    }


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

    .footer-main {
        gap: 40px;
    }

}


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

@media (max-width: 768px) {

    :root {
        --container-padding: 18px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .site-header {
        min-height:
            var(--header-height-mobile);
    }

    .header-inner {
        min-height:
            var(--header-height-mobile);
    }

    .brand-logo {
        height: 45px;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
    }


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

    .mobile-menu {
        top:
            var(--header-height-mobile);

        height:
            calc(
                100dvh -
                var(--header-height-mobile)
            );
    }

    .mobile-nav {
        width:
            calc(
                100% -
                32px
            );

        padding-top:
            22px;

        padding-bottom:
            calc(
                40px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .mobile-nav > a:not(.btn) {
        min-height: 54px;

        font-size: 1.05rem;
    }


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

    .hero {
        min-height: 100svh;

        padding-top:
            var(--header-height-mobile);

        align-items: flex-end;
    }

    .hero-container {
        min-height:
            calc(
                100svh -
                var(--header-height-mobile)
            );

        align-items: flex-end;
    }

    .hero-content {
        width: 100%;

        max-width: none;

        padding-top: 125px;
        padding-bottom: 88px;
    }

    .hero-badge {
        margin-bottom: 18px;

        padding: 8px 13px;

        font-size: 0.76rem;
    }

    .hero h1 {
        max-width: 100%;

        font-size:
            clamp(
                2.55rem,
                11vw,
                4.5rem
            );

        line-height: 1.02;

        text-wrap: balance;
    }

    .hero-description {
        max-width: 570px;

        margin-top: 22px;

        font-size:
            clamp(
                0.98rem,
                4vw,
                1.1rem
            );
    }

    .hero-actions {
        width: 100%;

        margin-top: 28px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-features {
        grid-template-columns: 1fr;

        margin-top: 28px;
    }


    /* =====================================================
       MARQUEE
    ===================================================== */

    .marquee-content {
        gap: 22px;

        padding:
            17px
            22px;
    }

    .marquee-content span {
        font-size: 0.74rem;
    }


    /* =====================================================
       SEÇÕES
    ===================================================== */

    .section-header {
        max-width: 100%;
    }

    .section-header h2 {
        text-wrap: balance;
    }

    .section-description {
        max-width: 100%;
    }


    /* =====================================================
       SERVIÇOS
    ===================================================== */

    .services-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .service-card {
        min-height: 0;

        padding: 24px;
    }

    .service-card-number {
        margin-bottom: 18px;
    }

    .service-card-icon {
        margin-bottom: 18px;
    }

    .service-card h3 {
        margin-bottom: 13px;
    }

    .service-price {
        margin-top: 18px;
    }


    /* =====================================================
       RESULTADOS
    ===================================================== */

    .results-heading {
        margin-bottom: 34px;
    }

    .results-intro {
        max-width: 100%;
    }

    .before-after {
        min-height: 390px;
    }


    /* =====================================================
       SOBRE
    ===================================================== */

    .about-grid {
        gap: 52px;
    }

    .about-media {
        min-height: 500px;
    }

    .about-image-main {
        width: 92%;
        height: 72%;
    }

    .about-image-detail {
        width: 56%;
        height: 38%;
    }

    .about-location-card {
        max-width: 235px;
    }

    .about-content h2 {
        text-wrap: balance;
    }


    /* =====================================================
       DIFERENCIAIS
    ===================================================== */

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

    .benefit-card {
        padding:
            28px
            22px;
    }


    /* =====================================================
       GALERIA
    ===================================================== */

    .gallery-header {
        align-items: flex-start;
    }

    .gallery-grid {
        grid-template-columns: 1fr;

        grid-auto-rows:
            clamp(
                240px,
                75vw,
                360px
            );
    }

    .gallery-item-large {
        grid-column: auto;
        grid-row: auto;
    }


    /* =====================================================
       CTA
    ===================================================== */

    .contact-cta-box {
        grid-template-columns: 1fr;

        padding:
            34px
            24px;

        gap: 30px;
    }

    .contact-cta-content h2 {
        text-wrap: balance;
    }

    .contact-cta-action {
        width: 100%;

        align-items: flex-start;
    }

    .contact-cta-action .btn {
        width: 100%;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq-list {
        margin-top: 34px;
    }


    /* =====================================================
       LOCALIZAÇÃO
    ===================================================== */

    .location-grid {
        gap: 40px;
    }

    .location-content h2 {
        text-wrap: balance;
    }

    .location-actions {
        width: 100%;
    }

    .location-actions .btn {
        flex: 1 1 180px;
    }

    .location-map {
        min-height: 420px;
    }

    .location-map iframe {
        min-height: 420px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .site-footer {
        padding-top: 70px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .footer-brand > p {
        max-width: 500px;
    }

    .footer-bottom {
        padding-top: 22px;
    }


    /* =====================================================
       WHATSAPP
    ===================================================== */

    .floating-whatsapp {
        right:
            max(
                14px,
                env(
                    safe-area-inset-right,
                    0px
                )
            );

        bottom:
            calc(
                14px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

}


/* =========================================================
   MOBILE MÉDIO
========================================================= */

@media (max-width: 600px) {

    :root {
        --container-padding: 17px;
    }


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

    .hero-content {
        padding-top: 110px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.35rem,
                11.5vw,
                3.65rem
            );
    }


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

    .hero-feature {
        font-size: 0.82rem;
    }


    /* -----------------------------------------------------
       ABOUT
    ----------------------------------------------------- */

    .about-media {
        min-height: 455px;
    }


    /* -----------------------------------------------------
       LOCALIZAÇÃO
    ----------------------------------------------------- */

    .location-actions {
        flex-direction: column;
    }

    .location-actions .btn {
        width: 100%;

        flex-basis: auto;
    }


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

    .footer-brand img {
        height: 56px;
    }

}


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

@media (max-width: 480px) {

    :root {
        --container-padding: 15px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .brand-logo {
        height: 42px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }


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

    .hero-content {
        padding-top: 100px;
        padding-bottom: 78px;
    }

    .hero-badge {
        max-width: 100%;

        font-size: 0.69rem;
    }

    .hero h1 {
        font-size:
            clamp(
                2.2rem,
                11.7vw,
                3.2rem
            );
    }

    .hero-description {
        font-size: 0.95rem;

        line-height: 1.65;
    }

    .hero-actions {
        gap: 12px;
    }

    .hero-features {
        gap: 11px;
    }


    /* =====================================================
       MARQUEE
    ===================================================== */

    .marquee-content {
        gap: 19px;

        padding:
            15px
            18px;
    }


    /* =====================================================
       SERVIÇOS
    ===================================================== */

    .service-card {
        padding: 21px;
    }

    .service-card-label {
        top: 14px;
        right: 14px;

        font-size: 0.58rem;
    }

    .service-card-number {
        font-size: 0.72rem;
    }

    .service-card h3 {
        font-size: 1.25rem;
    }

    .service-price strong {
        font-size: 1.3rem;
    }


    /* =====================================================
       BEFORE / AFTER
    ===================================================== */

    .before-after {
        min-height: 330px;
    }

    .before-after-label {
        max-width: 90px;

        white-space: nowrap;
    }


    /* =====================================================
       SOBRE
    ===================================================== */

    .about-media {
        min-height: 390px;
    }

    .about-image-main {
        width: 100%;

        height: 72%;
    }

    .about-image-detail {
        right: 3%;

        width: 58%;
        height: 36%;
    }

    .about-location-card {
        left: 3%;
        bottom: 7%;

        max-width: 215px;
    }


    /* =====================================================
       GALERIA
    ===================================================== */

    .gallery-grid {
        grid-auto-rows:
            clamp(
                220px,
                77vw,
                310px
            );
    }


    /* =====================================================
       CTA
    ===================================================== */

    .contact-cta-box {
        padding:
            29px
            20px;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq-item summary {
        padding:
            17px
            16px;
    }

    .faq-answer {
        padding:
            0
            16px
            18px;
    }


    /* =====================================================
       LOCALIZAÇÃO
    ===================================================== */

    .location-info {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        margin-left: 0;

        padding:
            9px
            0;
    }

    .location-icon {
        width: 40px;
        height: 40px;
    }

    .location-info strong {
        font-size: 0.98rem;
    }

    .location-map,
    .location-map iframe {
        min-height: 360px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .site-footer {
        padding-top: 58px;
    }

    .footer-main {
        padding-bottom: 48px;
    }

    .footer-brand img {
        height: 52px;
    }


    /* =====================================================
       WHATSAPP
    ===================================================== */

    .floating-whatsapp-icon {
        width: 54px;
        height: 54px;
    }

    .floating-whatsapp-icon img {
        width: 26px;
        height: 26px;
    }

}


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

@media (max-width: 380px) {

    :root {
        --container-padding: 13px;
    }


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

    .brand-logo {
        height: 39px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }


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

    .hero-content {
        padding-top: 88px;
    }

    .hero-badge {
        padding:
            7px
            10px;

        font-size: 0.64rem;
    }

    .hero h1 {
        font-size:
            clamp(
                2rem,
                11.3vw,
                2.7rem
            );
    }

    .hero-description {
        font-size: 0.9rem;
    }


    /* -----------------------------------------------------
       BOTÕES
    ----------------------------------------------------- */

    .btn {
        padding-inline: 17px;

        font-size: 0.78rem;
    }

    .btn-large {
        min-height: 54px;
    }


    /* -----------------------------------------------------
       SERVICE CARD
    ----------------------------------------------------- */

    .service-card {
        padding: 19px;
    }


    /* -----------------------------------------------------
       BEFORE / AFTER
    ----------------------------------------------------- */

    .before-after {
        min-height: 300px;
    }


    /* -----------------------------------------------------
       ABOUT
    ----------------------------------------------------- */

    .about-media {
        min-height: 350px;
    }

    .about-location-card {
        max-width: 195px;

        padding:
            10px
            11px;
    }

}


/* =========================================================
   TELAS BAIXAS
   Ex.: notebook com 768px de altura
========================================================= */

@media (min-width: 769px) and (max-height: 800px) {

    .hero {
        min-height: 760px;
    }

    .hero-container {
        min-height:
            calc(
                760px -
                var(--header-height)
            );
    }

    .hero-content {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .hero h1 {
        font-size:
            clamp(
                3rem,
                5.5vw,
                5.4rem
            );
    }

    .hero-description {
        margin-top: 18px;
    }

    .hero-actions {
        margin-top: 24px;
    }

    .hero-features {
        margin-top: 28px;
    }

}


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

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

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

    :root {
        --header-height-mobile: 58px;
    }

    .brand-logo {
        height: 39px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }


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

    .hero {
        min-height: 660px;
    }

    .hero-container {
        min-height:
            calc(
                660px -
                var(--header-height-mobile)
            );
    }

    .hero-content {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .hero h1 {
        max-width: 650px;

        font-size:
            clamp(
                2.4rem,
                7vw,
                3.7rem
            );
    }

    .hero-description {
        max-width: 570px;
    }

    .hero-features {
        display: flex;
    }


    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .mobile-menu {
        overflow-y: auto;
    }

    .mobile-nav {
        padding-top: 15px;
    }

    .mobile-nav > a:not(.btn) {
        min-height: 46px;
    }

}


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

@media (
    min-width: 769px
)
and (
    max-width: 1100px
)
and (
    orientation: landscape
) {

    .hero-content {
        width: min(
            100%,
            720px
        );
    }

    .about-grid {
        gap: 48px;
    }

}


/* =========================================================
   SAFE AREA — IPHONE
========================================================= */

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

    .site-header .container {
        padding-left:
            env(
                safe-area-inset-left,
                0px
            );

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

    .site-footer {
        padding-bottom:
            calc(
                var(--space-8) +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

}


/* =========================================================
   HOVER NÃO EXISTE EM TOUCH

   Remove alguns movimentos que podem ficar presos
   em celular/tablet.
========================================================= */

@media (hover: none) {

    .service-card:hover {
        transform: none;
    }

    .gallery-item:hover {
        transform: none;
    }

    .location-map:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    .footer-social a:hover {
        transform: none;
    }

    .about-benefit:hover {
        transform: none;
    }

    .location-info:hover {
        transform: none;
    }

}


/* =========================================================
   POINTER COARSE
========================================================= */

@media (pointer: coarse) {

    .nav-link,
    .service-link,
    .text-link {
        min-height: 44px;
    }

    .gallery-item.is-lightbox-enabled {
        cursor: pointer;
    }

}


/* =========================================================
   TELAS MUITO LARGAS
========================================================= */

@media (min-width: 1800px) {

    :root {
        --container-width: 1380px;
        --container-wide: 1540px;
    }

    .hero-content {
        width: min(
            100%,
            1000px
        );
    }

    .hero-description {
        max-width: 760px;
    }

}


/* =========================================================
   IMPRESSÃO
========================================================= */

@media print {

    .site-header,
    .mobile-menu,
    .floating-whatsapp,
    .scroll-indicator,
    .service-marquee,
    .contact-cta {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    main {
        overflow: visible;
    }

    section {
        break-inside: avoid;
    }

}


/* =========================================================
   ACESSIBILIDADE — CONTRASTE FORÇADO
========================================================= */

@media (forced-colors: active) {

    .btn,
    .service-card,
    .faq-item,
    .gallery-item,
    .location-map {
        border:
            1px solid
            CanvasText;
    }

}


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

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

    .mobile-menu {
        transition: none;
    }

    .service-card,
    .gallery-item,
    .location-map,
    .btn,
    .brand-logo {
        transition: none;
    }

}