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

.products-page {

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

}


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

.products-filter {

    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 45px;
    padding: 0 8%;

}


/* =======================================================
   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: 2px solid transparent;

    background: var(--accent-green, #3c8d2f);

    color: #fff;

    padding: 13px 22px;

    border-radius: 50px;

    cursor: pointer;

    transition: .30s ease;

    font-size: 15px;

    font-family: var(--font-title);

    font-weight: 600;

    white-space: nowrap;

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

}

.category-btn:hover {

    background: var(--accent-green-dark, #2a6a22);

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 10px 22px rgba(60, 141, 47, .35);

}

.category-btn.active {

    background: var(--accent-green-dark, #2a6a22);

    color: #fff;

    border-color: var(--secondary-color, #F9A825);

    box-shadow: 0 0 0 4px rgba(249, 168, 37, .28), 0 10px 22px rgba(60, 141, 47, .30);

}


/* =======================================================
   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;

}

/* Transición suave al cambiar de categoría / búsqueda
   (controlada desde assets/js/animations.js) */

.products-grid.is-swapping {

    opacity: 0;

    transform: scale(.97);

    transition: opacity .22s ease, transform .22s ease;

}

.products-grid {

    opacity: 1;

    transform: scale(1);

    transition: opacity .28s ease, transform .28s ease;

}


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

.product-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    border-top: 4px solid var(--accent-green, #3c8d2f);

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

    transition: .35s;

}

.product-card:hover {

    transform: translateY(-8px);

    border-top-color: var(--accent-gold, #F9A825);

    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-description {

    color: #555;

    line-height: 1.7;

    margin-bottom: 35px;

}

.modal-description p {

    margin: 0 0 14px;

}

.modal-description p:last-child {

    margin-bottom: 0;

}

.modal-description strong {

    color: #2c2c2c;

}

.modal-description ul {

    margin: 0 0 14px;

    padding-left: 20px;

    list-style: none;

}

.modal-description ul li {

    position: relative;

    padding-left: 16px;

    margin-bottom: 6px;

}

.modal-description ul li::before {

    content: "•";

    position: absolute;

    left: 0;

    color: #3b8f31;

}

.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;

    }

}