/* =======================================================
   PÁGINA PRODUCTOS
======================================================= */

.products-page {

    width: min(1400px, 92%);
    margin: 70px auto;

}


/* =======================================================
   FILTROS
======================================================= */

.products-filter {

    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 45px;

}


/* =======================================================
   BUSCADOR
======================================================= */

.search-box {

    display: flex;
    justify-content: center;

}

.search-box input {

    width: 100%;
    max-width: 650px;

    padding: 15px 22px;

    border: 1px solid #d8d8d8;
    border-radius: 50px;

    font-size: 16px;

    outline: none;

    transition: .3s;

}

.search-box input:focus {

    border-color: #3c8d2f;

    box-shadow: 0 0 0 4px rgba(60, 141, 47, .12);

}


/* =======================================================
   CATEGORÍAS
======================================================= */

.categories-menu {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;

    padding-bottom: 10px;

}

.category-btn {

    border: none;

    background: #f5f5f5;

    color: #444;

    padding: 13px 22px;

    border-radius: 50px;

    cursor: pointer;

    transition: .30s;

    font-size: 15px;

    font-weight: 500;

    white-space: nowrap;

}

.category-btn:hover {

    background: #3c8d2f;

    color: #fff;

}

.category-btn.active {

    background: #3c8d2f;

    color: #fff;

}


/* =======================================================
   CABECERA DEL CATÁLOGO
======================================================= */

.products-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 35px;

}

.products-header h2 {

    font-size: 34px;

    color: #222;

    margin-bottom: 8px;

}

.products-header p {

    color: #777;

}


/* =======================================================
   GRID
======================================================= */

.products-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 28px;

}


/* =======================================================
   TARJETA
======================================================= */

.product-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

    transition: .35s;

}

.product-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);

}


/* =======================================================
   IMAGEN
======================================================= */

.product-image {

    height: 260px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 25px;

    background: #fafafa;

    overflow: hidden;

}

.product-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition: .35s;

}

.product-card:hover .product-image img {

    transform: scale(1.08);

}


/* =======================================================
   INFORMACIÓN
======================================================= */

.product-info {

    padding: 22px;

}

.product-category {

    display: inline-block;

    background: #eef7ea;

    color: #3c8d2f;

    padding: 6px 14px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 15px;

}

.product-info h3 {

    font-size: 22px;

    color: #222;

    margin-bottom: 12px;

}

.product-info p {

    color: #666;

    line-height: 1.6;

    min-height: 70px;

    margin-bottom: 25px;

}


/* =======================================================
   BOTÓN
======================================================= */

.product-btn {

    width: 100%;

    border: none;

    background: #3c8d2f;

    color: #fff;

    padding: 14px;

    border-radius: 10px;

    cursor: pointer;

    transition: .30s;

    font-size: 15px;

    font-weight: 600;

}

.product-btn:hover {

    background: #2f7125;

}

/*======================================================
MODAL
======================================================*/

.product-modal {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .65);

    display: none;

    justify-content: center;

    align-items: center;

    padding: 40px;

    z-index: 9999;

}

.product-modal.show {

    display: flex;

}

.modal-content {

    width: 100%;

    max-width: 1100px;

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    position: relative;

    max-height: 90vh;

    overflow-y: auto;

}

.close-modal {

    position: absolute;

    right: 20px;

    top: 20px;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: #f1f1f1;

    color: #333;

    cursor: pointer;

    font-size: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s;

    z-index: 20;

}


.close-modal:hover {

    background: #198754;

    color: white;

    transform: rotate(90deg);

}


@media(max-width:768px) {

    .close-modal {

        right: 15px;

        top: 15px;

        width: 38px;

        height: 38px;

        font-size: 22px;

    }

}

.modal-body {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    padding: 50px;

}

.modal-left {

    display: flex;

    justify-content: center;

    align-items: center;

}

.modal-left img {

    width: 100%;

    max-height: 420px;

    object-fit: contain;

}

.modal-category {

    display: inline-block;

    background: #eef7ea;

    color: #3b8f31;

    padding: 8px 18px;

    border-radius: 40px;

    margin-bottom: 20px;

}

.modal-right h2 {

    font-size: 34px;

    margin-bottom: 20px;

}

.modal-right p {

    line-height: 1.8;

    color: #555;

    margin-bottom: 35px;

}

.modal-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.modal-btn {

    text-decoration: none;

    background: #3b8f31;

    color: #fff;

    padding: 14px 25px;

    border-radius: 10px;

    transition: .3s;

}

.modal-btn:hover {

    background: #2d6e26;

}

.modal-label {

    border-top: 1px solid #eee;

    padding: 50px 70px;

    text-align: center;

    background: #fafafa;

}

.modal-label img {

    width: 100%;

    max-width: 900px;

    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);

    cursor: zoom-in;

    transition: .3s;

}


.modal-label img:hover {

    transform: scale(1.02);

}

.modal-label h3 {

    font-size: 30px;

    margin-bottom: 10px;

}

.modal-label p {

    color: #666;

    margin-bottom: 35px;

}

/* ==========================================
   VISOR IMAGEN GRANDE
========================================== */


.image-viewer {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .85);

    justify-content: center;

    align-items: center;

    z-index: 10000;

    padding: 40px;

}


.image-viewer.show {

    display: flex;

}



.image-viewer img {

    max-width: 95%;

    max-height: 95%;

    object-fit: contain;

    border-radius: 10px;

}



#closeViewer {

    position: absolute;

    top: 25px;

    right: 35px;

    color: white;

    font-size: 45px;

    cursor: pointer;

}

/* ===================================
   MODAL PRODUCTO RESPONSIVE
=================================== */

@media(max-width:768px) {

    .product-modal {

        padding: 15px;

        align-items: center;

    }


    .modal-content {

        max-height: 92vh;

        border-radius: 15px;

    }


    .modal-body {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 25px;

    }


    .modal-left img {

        width: 100%;

        max-height: 260px;

        object-fit: contain;

    }


    .modal-right h2 {

        font-size: 24px;

        margin-bottom: 15px;

    }


    .modal-right p {

        font-size: 15px;

        line-height: 1.6;

        margin-bottom: 25px;

    }


    .modal-buttons {

        flex-direction: column;

        width: 100%;

    }


    .modal-buttons .modal-btn {

        width: 100%;

        text-align: center;

    }


    .modal-label {

        padding: 30px 20px;

    }


    .modal-label h3 {

        font-size: 22px;

    }


    .modal-label p {

        font-size: 14px;

        margin-bottom: 20px;

    }


    .modal-label img {

        max-height: 400px;

        object-fit: contain;

    }

}