/* =========================================================
   RESPONSIVO GERAL — VESTESUL ATACADO
========================================================= */

/* =========================================================
   ATÉ 1200PX
========================================================= */

@media (max-width: 1200px) {

    .container {
        width: 92%;
    }

    .section-title h2,
    .about h2,
    .quem-content h2,
    .cta-box h2,
    .page-hero h1 {
        font-size: 42px;
    }

    section,
    .section,
    .about,
    .produtos,
    .diferenciais,
    .como-funciona,
    .quem-atendemos,
    .cta {
        padding-top: 105px;
        padding-bottom: 105px;
    }

}

/* =========================================================
   ATÉ 991PX
========================================================= */

@media (max-width: 991px) {

    section,
    .section,
    .about,
    .produtos,
    .diferenciais,
    .como-funciona,
    .quem-atendemos,
    .cta {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .section-title {
        margin-bottom: 55px;
    }

    .about-grid,
    .about-container,
    .quem-container,
    .empresa-grid,
    .contato-page-grid,
    .produtos-page-grid,
    .catalogo-grid {
        grid-template-columns: 1fr;
        gap: 55px;
        text-align: center;
    }

    .hero-buttons,
    .cta-buttons,
    .contato-buttons {
        justify-content: center;
    }

    .hero-highlights,
    .numeros-grid,
    .valores-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
    }

    .about-side {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .diferenciais {
        margin-top: 55px;
    }

    .diferenciais-grid,
    .produtos-grid,
    .processo-grid,
    .quem-grid,
    .faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .produto-card-destaque {
        grid-template-columns: 1fr;
    }

    .catalogo-card.destaque {
        grid-column: auto;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .page-hero {
        padding: 125px 0 75px;
    }

    .page-hero h1 {
        font-size: 46px;
    }

    .page-hero p {
        margin-right: auto;
        margin-left: auto;
        font-size: 18px;
    }

}

/* =========================================================
   MOBILE — ATÉ 767PX
========================================================= */

@media (max-width: 767px) {

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

    main {
        display: block;
        width: 100%;
        overflow: visible;
    }

    section,
    .section,
    .about,
    .produtos,
    .diferenciais,
    .como-funciona,
    .quem-atendemos,
    .cta {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;
        padding-top: 58px;
        padding-bottom: 58px;
        overflow: visible;
        visibility: visible;
        opacity: 1;
    }

    .container {
        width: 92%;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    /* =====================================================
       TÍTULOS DAS SEÇÕES
    ===================================================== */

    .section-title {
        display: block;
        width: 100%;
        margin-bottom: 28px;
        text-align: left;
    }

    .section-title h2,
    .about h2,
    .quem-header h2,
    .diferenciais-header h2,
    .processo-header h2,
    .cta-box h2,
    .empresa-text h2,
    .contato-main h2,
    .produto-page-content h2,
    .catalogo-card h2 {
        font-size: 31px;
        line-height: 1.12;
    }

    .section-title p,
    .about p,
    .quem-header > p,
    .diferenciais-header > p,
    .processo-header > p,
    .cta-box p,
    .empresa-text p,
    .contato-main p,
    .page-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    /* =====================================================
       CABEÇALHOS DAS SEÇÕES
    ===================================================== */

    .quem-header,
    .diferenciais-header,
    .processo-header {
        display: block;
        width: 100%;
        margin-bottom: 28px;
        text-align: left;
    }

    .quem-header > div,
    .diferenciais-header > div,
    .processo-header > div {
        display: block;
        width: 100%;
    }

    .quem-header > p,
    .diferenciais-header > p,
    .processo-header > p {
        display: block;
        width: 100%;
        max-width: none;
        margin: 14px 0 0;
        text-align: left;
    }

    .diferenciais-header .section-title,
    .processo-header .section-title {
        margin-bottom: 0;
    }

    /* =====================================================
       BOTÕES
    ===================================================== */

    .cta-buttons,
    .cta-actions,
    .contato-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .btn-primary,
    .btn-secondary,
    .omg-btn,
    .omg-btn-secondary {
        width: 100%;
        height: 50px;
    }

    /* =====================================================
       LINHA DE PRODUTOS — CARROSSEL
    ===================================================== */

    .produtos {
        display: block;
    }

    .produtos .container {
        overflow: visible;
    }

    .produtos-grid {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 14px;
        margin: 0;
        padding: 3px 16% 16px 2px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .produtos-grid::-webkit-scrollbar {
        display: none;
    }

    .produtos-grid > .produto-card {
        display: flex;
        width: auto;
        min-width: 0;
        height: auto;
        flex: 0 0 84%;
        flex-direction: column;
        margin: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .produto-card {
        overflow: hidden;
    }

    .produto-img {
        width: 100%;
        height: 220px;
        min-height: 220px;
    }

    .produto-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .produto-content {
        display: flex;
        min-height: 230px;
        flex: 1;
        flex-direction: column;
        padding: 24px;
    }

    .produto-content strong {
        margin-top: auto;
        padding-top: 18px;
    }

    .produto-card-todos {
        min-height: 450px;
    }

    .produto-todos-content {
        display: flex;
        min-height: 100%;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding: 28px;
    }

    .produto-todos-content strong {
        margin-top: 20px;
    }

    /* =====================================================
       QUEM ATENDEMOS — CARROSSEL
    ===================================================== */

    .quem-atendemos {
        display: block;
    }

    .quem-grid {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 14px;
        margin: 0;
        padding: 3px 16% 16px 2px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .quem-grid::-webkit-scrollbar {
        display: none;
    }

    .quem-grid > .quem-card {
        display: block;
        width: auto;
        min-width: 0;
        min-height: 220px;
        flex: 0 0 82%;
        margin: 0;
        padding: 26px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .quem-card-destaque {
        grid-column: auto;
    }

    /* =====================================================
       DIFERENCIAIS — CARROSSEL
    ===================================================== */

    .diferenciais {
        display: block;
        margin-top: 0;
    }

    .diferenciais-grid {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 14px;
        margin: 0;
        padding: 3px 16% 16px 2px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .diferenciais-grid::-webkit-scrollbar {
        display: none;
    }

    .diferenciais-grid > .diferencial-card {
        display: block;
        width: auto;
        min-width: 0;
        min-height: 230px;
        flex: 0 0 82%;
        margin: 0;
        padding: 26px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* =====================================================
       COMO COMPRAR — CARROSSEL
    ===================================================== */

    .como-funciona {
        display: block;
    }

    .processo-grid {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 14px;
        margin: 0;
        padding: 3px 16% 16px 2px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .processo-grid::-webkit-scrollbar {
        display: none;
    }

    .processo-grid > .processo-item {
        display: block;
        width: auto;
        min-width: 0;
        min-height: 220px;
        flex: 0 0 82%;
        margin: 0;
        padding: 26px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* =====================================================
       SOBRE A OMG
    ===================================================== */

    .about {
        padding: 58px 0;
    }

    .about-grid,
    .about-container {
        grid-template-columns: 1fr;
        gap: 34px;
        text-align: left;
    }

    .about h2 {
        font-size: 31px;
    }

    .about p {
        margin-bottom: 24px;
        font-size: 15px;
    }

    .about-features {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 12px;
        margin: 0;
        padding: 3px 16% 14px 2px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .about-features::-webkit-scrollbar {
        display: none;
    }

    .about-features > .about-feature {
        min-width: 0;
        min-height: 130px;
        flex: 0 0 80%;
        margin: 0;
        padding: 22px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .about-side {
        width: 100%;
        max-width: none;
    }

    .about-stat-main {
        min-height: 200px;
    }

    .about-stat-main strong {
        font-size: 62px;
    }

    .about-stat-main span {
        font-size: 17px;
    }

    .about-stat-small {
        padding: 24px;
    }

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

    .cta-box {
        grid-template-columns: 1fr;
        padding: 46px 22px;
        border-radius: 26px;
        text-align: center;
    }

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

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

    .faq-card {
        padding: 26px;
    }

    /* =====================================================
       PÁGINAS INTERNAS
    ===================================================== */

    .page-hero {
        padding: 105px 0 55px;
    }

    .page-hero h1 {
        font-size: 36px;
    }

    .empresa-intro,
    .empresa-valores,
    .produtos-page,
    .contato-page,
    .contato-faq {
        padding: 60px 0;
    }

    .empresa-card {
        min-height: 240px;
    }

    .empresa-card strong {
        font-size: 66px;
    }

    .produto-page-content,
    .contato-info-card,
    .valor-card {
        padding: 27px;
    }

    .numeros-grid,
    .valores-grid {
        grid-template-columns: 1fr;
    }

    /* =====================================================
       RODAPÉ
    ===================================================== */

    .footer-container {
        grid-template-columns: 1fr;
        padding: 58px 0 50px;
        text-align: center;
    }

    .footer-brand p {
        margin: auto auto 24px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

}

/* =========================================================
   CELULARES PEQUENOS — ATÉ 430PX
========================================================= */

@media (max-width: 430px) {

    section,
    .section,
    .about,
    .produtos,
    .diferenciais,
    .como-funciona,
    .quem-atendemos,
    .cta {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .section-title,
    .quem-header,
    .diferenciais-header,
    .processo-header {
        margin-bottom: 25px;
    }

    .section-title h2,
    .about h2,
    .quem-header h2,
    .diferenciais-header h2,
    .processo-header h2,
    .cta-box h2 {
        font-size: 29px;
    }

    .produtos-grid {
        padding-right: 12%;
    }

    .produtos-grid > .produto-card {
        flex-basis: 88%;
    }

    .quem-grid,
    .diferenciais-grid,
    .processo-grid,
    .about-features {
        padding-right: 12%;
    }

    .quem-grid > .quem-card,
    .diferenciais-grid > .diferencial-card,
    .processo-grid > .processo-item {
        flex-basis: 87%;
    }

    .about-features > .about-feature {
        flex-basis: 85%;
    }

    .produto-img {
        height: 210px;
        min-height: 210px;
    }

    .produto-content {
        min-height: 225px;
        padding: 22px;
    }

    .produto-card-todos {
        min-height: 435px;
    }

}