@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');


:root {

    --naranja-color: #CC6633;
    --beige-color: #e7d0b4;
    --verde-color: #003e40;

    --primary-color: #c7a17a;
    --background-color: #f9f5f0;
    --dark-color: #151515;
}


html {
    font-size: 62.5%;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    /* si poppins falla */

}

/* septup universal */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /*
   border-box: elemento mida exactamente lo que especifico en el
   width y height
 */
}

/**********/
/* HEADER */
/**********/


.nav {

    --nav-icon-background: url("./img/menu-wh.svg");
    --transform-list-menu: translate(-100%);
    display: flex;
    align-items: center;
    /* se centren verticalmente */
    justify-content: space-between;
    /* los elementos se vayan a las esquinas */
    /*  height: 80px; */

    margin-top: 2rem;

}




.nav:has(.nav__checkbox:checked) {

    --nav-icon-background: url("./img/close.svg");
    --transform-list-menu: translate(0);

}


.nav__checkbox {
    display: none;
}

.nav__label,
.nav__logo-link {

    z-index: 100;

}



.nav__logo-link {

    position: relative;
    /* Necesario para posicionar elementos hijos */
    height: 100%;
    /* Ajusta según el diseño del contenedor */
    text-align: center;
    /* Centra horizontalmente */

}

.nav__logo--default {
    content: url('./img/cafe_valentina.png');
}

.nav__logo--alternate {
    content: url('./img/cafe_valentina_black.png');
}



.nav__label {

    width: 50px;
    height: 50px;
    background-image: var(--nav-icon-background);
    background-size: cover;
    cursor: pointer;
    transition: background-image .4s;
}


.nav__list {
    /* ocupara todo el area de su contenedor de referencia */
    position: absolute;
    inset: 0;
    /* top 0, rigth 0, bottom 0 left: 0; */
    display: grid;
    place-content: center;
    /* centren vertical y horizontalmente */
    text-align: center;
    /* centrar el centro */
    list-style: none;
    gap: 1rem;
    padding: 0;
    transform: var(--transform-list-menu);
    transition: transform .5s;

    background-color: white;
}


.nav__link {
    /* display: inline-block; */
    /* padding: .8rem .5rem; */
    color: #333;
    text-decoration: none;
}



.nav__logo {
    width: 60%;
}

.header ul li {

    font-size: 2rem;
    line-height: 1.6;
    margin: 0.5rem 0;

}

.nav__link--cta {
    background-color: #25D366;
    border-radius: 9px;
    color: #fff;
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
}


.nav__link--cta i {

    margin-right: 0.5rem;
    /* Espaciado entre el ícono y el texto */
    font-size: 3rem;
    /* Tamaño del ícono */
    vertical-align: middle;
    /* Alineación del ícono con el texto */
    color: #fff;
    /* Color verde característico de WhatsApp */
}



.container {

    /*max-width: 120rem;   limita el ancho a 1920px */

    width: min(95%, 1280px);
    margin: 0 auto;
    /* centra horizontalmente */
    overflow: hidden;

}


.container__header {

    /*max-width: 120rem;   limita el ancho a 1920px */

    width: min(95%, 1280px);
    padding-top: 2rem;
    margin: 0 auto;

}


.container-hero {
    background-color: var(--background-color);
}

.hero {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    /* 2rem inferior y superior 0 lados izquiero y derecho*/
}


.customer-support i {

    font-size: 3.3rem;
}

.content-customer-support {

    display: flex;
    flex-direction: column;
}


.container-logo {

    display: flex;
    align-items: center;
    gap: .5rem;
}


.container-user {

    display: flex;
    gap: 1rem;
    cursor: pointer;
    align-items: center;

}

.container-user .fa-user {
    font-size: 3rem;
    color: var(--primary-color);
    padding-right: 2.5rem;
    border-right: 1px solid #e2e2e2;

}


.container-user .fa-basket-shopping {

    font-size: 3rem;
    color: var(--primary-color);
    padding-left: 1rem;

}


.content-shopping-cart {

    display: flex;
    flex-direction: column;
}

.container-navbar {

    background-color: var(--primary-color);
}



.navbar {

    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 1rem 0; */

}

.navbar .fa-bars {

    display: none;

}

.menu {
    display: flex;
    gap: 2rem;
}


.menu li {

    list-style: none;
}


.menu a {

    text-decoration: none;
    font-size: 1.3rem;
    color: var(--dark-color);
    font-weight: 600;
    text-transform: uppercase;
    position: relative;

    /* mantiene su espacio original */
}

.nav-cta:link,
.nav-cta:visited {

    background-color: #25D366;
    border-radius: 9px;
    color: #fff;
    padding: 1.2rem 2.4rem;

}

/****************/
/* HERO SECTION */
/****************/

.section-hero {
    background-color: #003e40;
    /* padding: 1.5rem 0 9.6rem 0; */

    /* Oculta contenido desbordante */

}



.grid-hero-2 {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 2rem;
    align-items: center;
    /* Alinea verticalmente */
    /*  justify-items: center; */
    margin: 0 auto;
    color: #fff;
}



.hero-description {
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 3rem;
}

/* hero-img-box{

    width: 100%;
    text-align: center;
} */

.hero-img {

    width: 100%;
    /* La imagen ocupará el 100% del ancho de su contenedor */
    height: auto;
    /* Mantendrá la proporción original de la imagen */
    max-width: 500px;
    /* Define un ancho máximo si no quieres que la imagen sea demasiado grande */
    object-fit: contain;
    /* Asegura que la imagen se ajuste sin deformarse */
}



.proveedores__testimoniales {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 5rem;
}


.delivered-imgs {

    display: flex;
}

.delivered-imgs img {

    border: 3px solid var(--verde-color);
    border-radius: 50%;
    height: 6rem;
    width: 6rem;
    margin-right: -1.6rem;
}


.delivered-imgs img:last-child {
    margin-right: 0;
}

.delivered-text {
    font-size: 1.8rem;
    font-weight: 600;
}


.delivered-text span {
    color: #e7d0b4;
}


/*****************/
/* PRODUCTS SECTION */
/*****************/

.section-coffee {
    padding: 7.5rem 0;
    background: #003e40;
    /* Color verde */
    background-image: linear-gradient(to bottom, #003e40 50%, #e7d0b4 50%);
    /* Verde en el 50% superior, beige en el 50% inferior */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* Asegura que cubra toda la sección */
}

.productos__container {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 2rem;
}


.productos {

    width: min(100%, 450px);
    /* siempre medira 95%, no rebase 400px */
    margin: 2rem auto;
    /* centrar */
    padding: 2rem 1.5rem;
    border-radius: 13px;
    /* box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); */
    box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.06);
    background-color: var(--beige-color);

    /* margin-bottom: 2rem; */
    /* Ajusta esto según lo que necesites */

    color: var(--verde-color);
    transition: all 0.5s;

}


.productos:hover {
    border: 2px solid var(--naranja-color);
    border-bottom-width: 3px;
    transform: translateY(-1rem);
}


/* .product-img {
    width: 100%;
    max-width: 100px;
    object-fit: cover;
    border-radius: 8px;

} */

.product-img {

    min-width: 100px;
    max-width: 150px;
    width: 50%;

}


.content-card-product {

    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    align-items: center;

}



.content-card-product h3 {

    font-size: 2.4rem;
    font-weight: 600;

}


.price-list {

    width: 100%;
}


.price-list__item {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0rem;
    border-bottom: 1px solid #003e4030;
}


.price-list__item:last-child {

    border-bottom: none;

}

.price-list__item-title {
    font-size: 1.5rem;
    font-weight: 600;


}

.price-list__item-price {
    font-size: 1.5rem;

    font-weight: bold;
}


.add-to-cart {
    background-color: #25D366;
    height: 55px;
    width: 100%;
    border-radius: 10px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: white;
}


.add-to-cart svg {

    fill: white;
    /* Cambia el color del icono a blanco */
    width: 30px;
    /* Asegura el tamaño del ícono */
    height: 30px;
    /* Asegura el tamaño del ícono */
}


.add-to-cart span {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;

}


/*****************/
/*   NEGOCIOS    */
/*****************/

.top-negocios {
    background-color: var(--beige-color);
    padding: 6.25rem 0;
}



.container-negocios {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;

}


.card-category {

    width: min(100%, 450px);
    margin: 0 auto;
    height: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    gap: 2rem;

    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;

}


.card-category p {

    font-size: 2.4rem;
    font-weight: 600;
    color: #fff;

}

.category-cafeteria {

    background-image: linear-gradient(#00000080, #00000080), url('img/proveedores-de-cafe-para-cafeterias.jpg');

}


.category-restaurante {

    background-image: linear-gradient(#00000080, #00000080), url('img/cafe\ para\ restaurantes_cafe\ para\ hosteleria_proveedor\ cafe.jpg');

}


.category-hoteles {

    background-image: linear-gradient(#00000080, #00000080), url('img/cafe\ para\ hoteles-cafe\ para\ restaurantes\ y\ hoteles-cafe\ para\ restaurantes.jpg');

}


/***************************/
/*   CARACTERISTICAS CAFE  */
/***************************/

.features {
    background-color: var(--beige-color);
    padding: 6.25rem 0;
}


/* .grid-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
} */

.grid-2 {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 2rem;
    align-items: center;
    /* Alinea verticalmente */
    justify-items: center;
    /* Alinea horizontalmente */
}


.features__figure {
    display: flex;
    /* Alinea el contenido si es necesario */
    justify-content: center;
    /* Centra la imagen horizontalmente */
    align-items: center;
    /* Centra la imagen verticalmente */
    max-width: 100%;
    /* Asegura que el contenedor no se desborde */
    overflow: hidden;
    /* Previene desbordamientos si hay contenido adicional */
}

.features__img {
    width: 100%;
    /* La imagen ocupará el 100% del ancho de su contenedor */
    height: auto;
    /* Mantendrá la proporción original de la imagen */
    max-width: 380px;
    /* Define un ancho máximo si no quieres que la imagen sea demasiado grande */
    object-fit: contain;
    /* Asegura que la imagen se ajuste sin deformarse */
}


.features_img {

    width: 60%;
}

.list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    list-style: none;

}

.list-item {
    position: relative;
    /* Posiciona el icono relativo al texto */
    padding-left: 30px;
    /* Espacio horizontal para el icono */
    display: flex;
    /* align-items: center; */
    font-size: 1.7rem;
    line-height: 1.5;

    gap: 1.6rem;

}

.list-item::before {
    content: "";
    background-image: url('./img/cafe-icono.svg');
    /* Ruta del icono */
    background-size: contain;
    /* Ajusta el tamaño del icono */
    background-repeat: no-repeat;
    display: block;
    width: 20px;
    /* Tamaño del icono */
    height: 20px;
    position: absolute;
    left: 0;
    /* Coloca el icono a la izquierda del texto */
}

/* .list-icon {
    width: 100%;
    color: #CC6633;
    height: auto;
    width: 3.2rem;
} */

.list-description {

    font-size: 1.75rem;
    line-height: 1.5;
}


/***************************/
/*     PERSONALIZACION     */
/***************************/



.customcoffee {

    padding: 6.25rem 0;
    /* Padding arriba y abajo */
    background: #003e40;
    /* Color verde */
    background-image: linear-gradient(to bottom, #e7d0b4 50%, #003e40 50%);
    /* Verde en el 50% superior, beige en el 50% inferior */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* Asegura que cubra toda la sección */

}

.descriptioncustomcoffee {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;

}

.customcoffee-description {

    font-size: 1.75rem;
    line-height: 1.5;
    /* margin-bottom: 3rem; */
    color: #fff;
    text-align: justify;
}



.grid-3 {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 2rem;
    align-items: flex-end;
    /* Alinea verticalmente */
    justify-items: center;
    /* Alinea horizontalmente */
}



/***************************/
/*         FAQ             */
/**************************/

.faq {

    padding: 6.25rem 0;
    /* Padding arriba y abajo */
    background: #003e40;
    /* Color verde */

}


.faq__item {
    background-color: var(--beige-color);
    padding: 1.5rem;
    /* arriba/abajo y costados */
    border-radius: 30px;
    border: 1px solid black;
    border-bottom-width: 4px;
    --icon-question-url: url("./img/plus.svg");

}


.faq__item[open] {

    border: 1px solid var(--naranja-color);
    --icon-question-url: url("./img/no-entry.svg");
}

.faq__question {
    display: flex;
    /* se elimina por defecto el icono */
    cursor: pointer;
    align-items: center;
    /* centrarlo verticalmente texto y boton */
}

/* hijo */
.faq__question::after {

    content: "";
    width: 30px;
    height: 30px;
    background-image: var(--icon-question-url);
    background-repeat: no-repeat;
    transition: background-image .3s;
    margin-left: auto;
    /* pasamos el icono a la derecha */

}

.faq__container {

    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}


.faq__title {

    font-size: 1.75rem;
    line-height: 1.5;
    color: var(--verde-color);
    width: 80%;
    /* with horizontalmente */
}

.faq__answer {

    font-size: 1.75rem;
    line-height: 1.5;

    margin-top: 1rem;
    padding-top: 1rem;
    border-top: .5px solid black;
}




/**************************/
/*         FOOTER         */
/**************************/

.footer {

    padding: 3rem 0;
    /* Más margen en la parte de abajo */
    background-color: #f8f8f8;
    background-image: url('./img/bg_proveedores_de_cafe_mexico_mayoreo_blanco.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.grid-4 {

    display: flex;
    flex-direction: column;
    /* Alinea los elementos en columna */
    justify-content: center;
    /* Centra los elementos verticalmente */
    align-items: center;
    /* Centra los elementos horizontalmente */
    gap: 2rem;
    text-align: center;
    /* Centra el texto si es necesario */
}

.socialredes {

    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;

}

.footersection {

    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
    text-align: center;
    /* Centra el texto si es necesario */

}


.footer-img {
    width: 60%;
}


.footer-logo img {

    max-width: 100px;
    margin-bottom: 1rem;
}


.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    font-size: 1.75rem;
    line-height: 1.5;
    margin: 0.5rem 0;
}

.footer a {
    text-decoration: none;
    color: #333;
}

.footer a:hover {
    text-decoration: underline;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

/* .social-icons li a {
    font-size: 2rem;
    color: var(--beige-color);
} */


.social-icons li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    /* Ajusta el tamaño según sea necesario */
    height: 3rem;
    /* Ajusta el tamaño según sea necesario */
    background-color: var(--beige-color);
    color: var(--verde-color);
    border-radius: 50%;
    font-size: 1.5rem;
    /* Ajusta el tamaño del icono */
    text-align: center;
}


.footer-contact,
.footer-social {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}


.footer_title {

    font-size: 2.4rem;
    font-weight: 600;
    color: var(--verde-color);
}


.footer-phone {
    color: var(--naranja-color);
    font-size: 2.4rem;
    line-height: 1.5;
    margin: 0.5rem 0;

}


.features__figure_2 {

    display: flex;
    /* Alinea el contenido si es necesario */
    justify-content: center;
    /* Centra la imagen horizontalmente */
    align-items: center;
    /* Centra la imagen verticalmente */
    max-width: 90%;
    /* Asegura que el contenedor no se desborde */
    overflow: hidden;
    /* Previene desbordamientos si hay contenido adicional */
}



.footer-right {

    color: #777;
    text-align: center;
    font-size: 1.75rem;
    line-height: 1.5;

}

@media(width >=480px) {

    .proveedores__testimoniales {

        display: flex;
        flex-direction: row;

    }


    .nav__logo-link {

        text-align: start;
    }


}


/* @media(width >=800px) { */
@media(width >=768px) {

    .grid-4 {

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 2rem;
        place-items: center;
    }

    .footersection {

        display: grid;
        align-items: center;
        text-align: center;

    }

    .footer {

        padding: 10rem 0 20rem 0;
    }

    .features__img {

        max-width: 100%;
        /* Garantiza que la imagen no exceda el ancho del contenedor */
    }

    .hero-description {

        margin-bottom: 4.8rem;
    }

    .proveedores__testimoniales {

        margin-top: 8rem;
    }


    .delivered-imgs img {
        height: 8rem;
        width: 8rem;
    }

}


/* IGUAL O MAYOR A 944 @media(width >=944px)  */

@media(width >=1024px) {

    .nav {
        --transform-list-menu: translate(0%);
    }

    .nav__label {
        display: none;
    }

    .nav__list {
        position: static;
        grid-auto-flow: column;
        align-items: center;
        place-content: unset;
        gap: 2rem;
        background-color: transparent;
        /* Elimina el fondo */
    }


    .nav__link {
        color: #f8f8f8;
    }


    .hero-img {
        width: 110%;
        max-width: 900px;

    }


    /* .hero-buttons {
        display: flex;
        flex-direction: row;
        gap: .5rem;
    } */

}


/* @media (max-width:1024px) {

    .nav__link--cta i {

        color: #51ff12;
       
    }

    .nav__link--cta {
        font-size: 1.75rem;
        padding: 1.2rem 1.2rem;
    }

    .header ul li {

        font-size: 1.75rem;

    }
} */


/* SOLO APLICAR IGUAL O MENOR A 1,200 */

@media (max-width: 1200px) {

    .section-coffee {
        background: #003e40;
        /* Solo verde */
        background-image: none;
        /* Elimina el gradiente */
    }
}