/* =========================================================
   MC2 DELIVERY
   HOME DO CLIENTE
========================================================= */


/* =========================================================
   CONTAINER PRINCIPAL
========================================================= */

.client-home {

    width: 100%;

    min-height: 100vh;

    background: #ffffff;

    color: #222222;

}


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

.client-home-hero {

    position: relative;

    width: 100%;

    min-height: 390px;

    background: url(/assets/img/banner-inicial-topo.jpg);
    
    background-repeat: no-repeat;
    
    background-size: 100% 100%;

    overflow: hidden;

}


.client-home-hero::after {

    content: "";

    position: absolute;

    right: -120px;

    bottom: -180px;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: rgba(234, 29, 44, 0.06);

}


.client-home-hero-content {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 1320px;

    min-height: 390px;

    margin: 0 auto;

    padding: 55px 24px;

    box-sizing: border-box;

}


.client-home-hero-text {

    max-width: 600px;

}


.client-home-hero-label {

    display: inline-flex;

    align-items: center;

    margin-bottom: 12px;

    color: #525252;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.client-home-hero h1 {

    margin: 0;

    color: #fff;
        
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    font-size: 48px;

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;

}


.client-home-hero p {

    max-width: 500px;

    margin: 20px 0 28px;

    color: #fff;
        
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    font-size: 17px;

    line-height: 1.6;

}


.client-home-hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 24px;

    background: #ea1d2c;

    color: #ffffff;

    border-radius: 25px;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.client-home-hero-button:hover {

    background: #d91827;

    color: #ffffff;

    transform: translateY(-1px);

}


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

.client-home-section {

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    padding: 50px 24px;

    box-sizing: border-box;

}


.client-home-section-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;

}


.client-home-section-label {

    display: block;

    margin-bottom: 5px;

    color: #ea1d2c;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.client-home-section-header h2 {

    margin: 0;

    color: #222222;

    font-size: 27px;

    font-weight: 800;

    line-height: 1.2;

}


.client-home-section-link {

    flex-shrink: 0;

    color: #ea1d2c;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

}


.client-home-section-link:hover {

    color: #d91827;

    text-decoration: underline;

}


/* =========================================================
   PROMOÇÕES
========================================================= */

.client-home-promotions {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

}


.client-home-promotion {

    position: relative;

    min-height: 190px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #ea1d2c,
            #b90f1d
        );

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.08);

}


.client-home-promotion:nth-child(2) {

    background:
        linear-gradient(
            135deg,
            #333333,
            #111111
        );

}


.client-home-promotion::after {

    content: "";

    position: absolute;

    right: -80px;

    bottom: -120px;

    width: 280px;

    height: 280px;

    border: 45px solid rgba(255,255,255,0.08);

    border-radius: 50%;

}


.client-home-promotion-content {

    position: relative;

    z-index: 2;

    max-width: 480px;

    padding: 28px;

    color: #ffffff;

}


.client-home-promotion-content span {

    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.08em;

}


.client-home-promotion-content h3 {

    margin: 0;

    font-size: 30px;

    font-weight: 800;

}


.client-home-promotion-content p {

    max-width: 380px;

    margin: 8px 0 18px;

    color: rgba(255,255,255,0.88);

    font-size: 13px;

    line-height: 1.5;

}


.client-home-promotion-content a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 36px;

    padding: 0 16px;

    background: #ffffff;

    color: #ea1d2c;

    border-radius: 18px;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

}


.client-home-promotion:nth-child(2)
.client-home-promotion-content a {

    color: #222222;

}


/* =========================================================
   PUBLICIDADE
========================================================= */

.client-home-ad {

    position: relative;

    display: flex;

    align-items: center;

    width: calc(100% - 48px);

    max-width: 1272px;

    min-height: 170px;

    margin: 0 auto 10px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            110deg,
            #f5f5f5,
            #eeeeee
        );

}


.client-home-ad::before {

    content: "";

    position: absolute;

    top: -100px;

    right: -70px;

    width: 300px;

    height: 300px;

    border: 60px solid rgba(234,29,44,0.06);

    border-radius: 50%;

}


.client-home-ad-content {

    position: relative;

    z-index: 2;

    padding: 30px;

}


.client-home-ad-content span {

    display: block;

    margin-bottom: 8px;

    color: #999999;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.12em;

}


.client-home-ad-content h2 {

    margin: 0 0 8px;

    color: #333333;

    font-size: 24px;

    font-weight: 800;

}


.client-home-ad-content p {

    max-width: 600px;

    margin: 0;

    color: #777777;

    font-size: 13px;

    line-height: 1.5;

}


.client-home-ad-secondary {

    min-height: 140px;

}


.client-home-ad-final {

    margin-bottom: 50px;

}


/* =========================================================
   CATEGORIAS
========================================================= */

.client-home-categories {

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 14px;

}


.client-home-category {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 115px;

    padding: 15px 10px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 14px;

    color: #333333;

    text-align: center;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


.client-home-category:hover {

    border-color: #f0c5c8;

    box-shadow:
        0 7px 20px rgba(0,0,0,0.07);

    transform: translateY(-2px);

}


.client-home-category span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    margin-bottom: 9px;

    background: #fff5f5;

    border-radius: 50%;

    font-size: 24px;

}


.client-home-category strong {

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   RESTAURANTES
========================================================= */

.client-home-restaurants {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

}


.client-home-restaurant-card {

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 16px;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.04);

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;

}


.client-home-restaurant-card:hover {

    box-shadow:
        0 10px 28px rgba(0,0,0,0.09);

    transform: translateY(-2px);

}


/* =========================================================
   IMAGEM RESTAURANTE
========================================================= */

.client-home-restaurant-image {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 180px;

    overflow: hidden;

    background: #f7f7f7;

}


.client-home-restaurant-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.client-home-restaurant-image span {

    font-size: 45px;

}


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

.client-home-restaurant-content {

    padding: 18px;

}


.client-home-restaurant-content h3 {

    margin: 0 0 5px;

    color: #222222;

    font-size: 17px;

    font-weight: 800;

}


.client-home-restaurant-category {

    display: block;

    margin-bottom: 8px;

    color: #ea1d2c;

    font-size: 11px;

    font-weight: 700;

}


.client-home-restaurant-content p {

    display: -webkit-box;

    min-height: 40px;

    margin: 0 0 16px;

    overflow: hidden;

    color: #777777;

    font-size: 12px;

    line-height: 1.5;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

}


.client-home-restaurant-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 40px;

    background: #ea1d2c;

    color: #ffffff;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background 0.2s ease;

}


.client-home-restaurant-button:hover {

    background: #d91827;

    color: #ffffff;

}


/* =========================================================
   SEM RESTAURANTES
========================================================= */

.client-home-empty {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 230px;

    padding: 30px;

    background: #fafafa;

    border: 1px solid #eeeeee;

    border-radius: 16px;

    text-align: center;

}


.client-home-empty span {

    margin-bottom: 10px;

    font-size: 40px;

}


.client-home-empty h3 {

    margin: 0 0 7px;

    color: #333333;

    font-size: 17px;

}


.client-home-empty p {

    margin: 0;

    color: #777777;

    font-size: 13px;

}


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

@media (max-width: 1000px) {
    

    .client-home-hero {

    position: relative;

    width: 100%;

    min-height: 390px;

    background: url(/assets/img/banner-inicial-topo.jpg);
    
    background-repeat: no-repeat;
    
    background-size: cover;

    overflow: hidden;

    }




    .client-home-hero h1 {

        font-size: 40px;
        
        color: #fff;
        
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    }


    .client-home-categories {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    .client-home-restaurants {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


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

@media (max-width: 700px) {


    .client-home-hero {

    position: relative;

    width: 100%;

    background: url(/assets/img/banner-inicial-topo.jpg);
    
    background-repeat: no-repeat;
    
    background-size: cover;

    overflow: hidden;

    }


    .client-home-hero {

        min-height: 330px;

    }


    .client-home-hero-content {

        min-height: 330px;

        padding: 40px 16px;

    }


    .client-home-hero h1 {

        font-size: 34px;

        letter-spacing: -1px;
        
        color: #fff;
        
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    }


    .client-home-hero p {

        margin: 16px 0 22px;

        font-size: 14px;
        
        color: #fafafa;
        
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    }


    .client-home-hero-button {

        min-height: 44px;

        padding: 0 20px;

        font-size: 13px;

    }


    .client-home-section {

        padding: 36px 16px;

    }


    .client-home-section-header {

        align-items: center;

        margin-bottom: 18px;

    }


    .client-home-section-header h2 {

        font-size: 22px;

    }


    .client-home-promotions {

        grid-template-columns:
            1fr;

        gap: 12px;

    }


    .client-home-promotion {

        min-height: 175px;

    }


    .client-home-promotion-content {

        padding: 24px;

    }


    .client-home-promotion-content h3 {

        font-size: 26px;

    }


    .client-home-ad {

        width: calc(100% - 32px);

        min-height: 150px;

        border-radius: 14px;

    }


    .client-home-ad-content {

        padding: 24px;

    }


    .client-home-ad-content h2 {

        font-size: 20px;

    }


    .client-home-categories {

        display: flex;

        gap: 10px;

        overflow-x: auto;

        padding-bottom: 6px;

        scrollbar-width: none;

    }


    .client-home-categories::-webkit-scrollbar {

        display: none;

    }


    .client-home-category {

        flex: 0 0 105px;

        min-height: 105px;

    }


    .client-home-restaurants {

        grid-template-columns:
            1fr;

        gap: 14px;

    }


    .client-home-restaurant-image {

        height: 190px;

    }


    .client-home-ad-final {

        margin-bottom: 30px;

    }

}


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

@media (max-width: 430px) {
    
    
    .client-home-hero {

    position: relative;

    width: 100%;

    background: url(/assets/img/banner-inicial-topo.jpg);
    
    background-repeat: no-repeat;
    
    background-size: cover;

    overflow: hidden;

    }


    .client-home-hero {

        min-height: 300px;

    }


    .client-home-hero-content {

        min-height: 300px;

        padding: 32px 14px;

    }


    .client-home-hero h1 {

        font-size: 30px;
        
        color: #fff;
        
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    }


    .client-home-hero p {

        max-width: 330px;

        font-size: 13px;
        
        color: #fafafa;
        
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    }


    .client-home-section {

        padding:
            30px
            14px;

    }


    .client-home-section-header h2 {

        font-size: 20px;

    }


    .client-home-promotion-content {

        padding: 20px;

    }


    .client-home-promotion-content h3 {

        font-size: 24px;

    }


    .client-home-ad {

        width: calc(100% - 28px);

    }


    .client-home-ad-content {

        padding: 20px;

    }


    .client-home-ad-content h2 {

        font-size: 18px;

    }


    .client-home-restaurant-image {

        height: 170px;

    }

}