@charset "UTF-8";

/* =====================================================
   CATALOGO GENERAL
===================================================== */

.catalog{

    padding:28px 0;

    position:relative;

    width:100%;

    max-width:100%;

    overflow:hidden;
}

/* =====================================================
   CONTENEDOR
===================================================== */

.catalog .container{

    width:min(96%,1900px);

    max-width:100%;

    margin:auto;

    min-width:0;
}

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

.catalog-grid{

    width:100%;

    max-width:100%;

    min-width:0;
}

/* =====================================================
   WRAP PRODUCTOS
===================================================== */

.products-wrap{

    width:100%;

    max-width:100%;

    min-width:0;

    overflow:hidden;
}

/* =====================================================
   HEADER PRODUCTOS
===================================================== */

.products-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:20px;

    flex-wrap:wrap;

    width:100%;

    max-width:100%;

    min-width:0;
}

/* =====================================================
   TITULO
===================================================== */

.products-header h2{

    font-size:28px;

    font-weight:700;

    color:#0f172a;

    margin:0;

    line-height:1.25;

    word-break:break-word;
}

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

.products-header select{

    height:44px;

    max-width:100%;

    min-width:0;

    padding:0 14px;

    border:1px solid #dbe4f0;

    border-radius:12px;

    background:#fff;

    font-size:13px;

    cursor:pointer;

    outline:none;

    transition:.25s ease;
}

.products-header select:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.08);
}

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

.products-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:20px;

    width:100%;

    max-width:100%;

    min-width:0;

    align-items:stretch;
}

/* =====================================================
   MAIN CONTENT
===================================================== */

.main-content{

    width:100%;

    max-width:100%;

    min-width:0;

    overflow:hidden;
}

/* =====================================================
   LAYOUT
===================================================== */

.layout-3col{

    display:grid;

    grid-template-columns:
        250px
        minmax(0,1fr);

    gap:24px;

    align-items:start;

    width:100%;

    max-width:100%;

    min-width:0;

    overflow:hidden;
}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{

    display:flex;

    flex-direction:column;

    gap:18px;

    position:sticky;

    top:20px;

    min-width:0;
}

/* =====================================================
   SIDEBAR BOX
===================================================== */

.sidebar-box{

    background:#fff;

    border-radius:18px;

    padding:18px;

    border:1px solid #edf2f7;

    box-shadow:
        0 6px 20px rgba(15,23,42,.05);

    overflow:hidden;
}

/* =====================================================
   TITULO SIDEBAR
===================================================== */

.sidebar-box h3{

    font-size:17px;

    font-weight:700;

    margin:0 0 16px;

    color:#0f172a;

    position:relative;

    padding-bottom:8px;
}

.sidebar-box h3::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:38px;
    height:3px;

    border-radius:10px;

    background:#2563eb;
}

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

.sidebar-box ul{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin:0;

    padding:0;

    list-style:none;
}

.sidebar-box li a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    padding:9px 11px;

    border-radius:10px;

    color:#475569;

    font-size:13px;

    font-weight:500;

    transition:.22s ease;

    min-width:0;

    word-break:break-word;
}

.sidebar-box li a:hover{

    background:#f5f8ff;

    color:#2563eb;

    transform:translateX(2px);
}

/* =====================================================
   PAGINACION
===================================================== */

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:30px;

    flex-wrap:wrap;

    width:100%;
}

.pagination a{

    min-width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 12px;

    border-radius:10px;

    background:#fff;

    border:1px solid #dbe4f0;

    color:#0f172a;

    font-size:13px;

    font-weight:600;

    transition:.24s ease;
}

.pagination a:hover{

    background:#2563eb;

    color:#fff;

    border-color:#2563eb;

    transform:translateY(-2px);
}

.pagination a.active{

    background:#2563eb;

    color:#fff;

    border-color:#2563eb;
}

/* =====================================================
   MONITORES GRANDES
===================================================== */

@media (min-width:1600px){

    .catalog{

        padding:50px 0;
    }

    .products-header{

        margin-bottom:30px;
    }

    .products-header h2{

        font-size:40px;
    }

    .products-grid{

        gap:30px;
    }

    .layout-3col{

        grid-template-columns:
            320px
            minmax(0,1fr);

        gap:34px;
    }
}

/* =====================================================
   LAPTOPS
===================================================== */

@media (max-width:1200px){

    .layout-3col{

        grid-template-columns:
            220px
            minmax(0,1fr);

        gap:20px;
    }

    .products-grid{

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(190px,1fr)
            );

        gap:18px;
    }

    .products-header h2{

        font-size:24px;
    }
}

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

@media (max-width:992px){

    .catalog{

        padding:24px 0;
    }

    .layout-3col{

        grid-template-columns:1fr;

        gap:20px;
    }

    .sidebar{

        position:relative;

        top:auto;
    }

    .products-header h2{

        font-size:22px;
    }

    .products-grid{

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(170px,1fr)
            );

        gap:16px;
    }
}

/* =====================================================
   MOVIL
===================================================== */

@media (max-width:768px){

    .catalog{

        padding:20px 0;
    }

    .products-header{

        flex-direction:column;

        align-items:flex-start;

        margin-bottom:18px;
    }

    .products-header h2{

        font-size:20px;
    }

    .products-header select{

        width:100%;
    }

    .products-grid{

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

        gap:14px;
    }

    .sidebar{

        gap:14px;
    }

    .sidebar-box{

        padding:14px;

        border-radius:14px;
    }
}

/* =====================================================
   TELEFONOS
===================================================== */

@media (max-width:580px){

    .catalog{

        padding:18px 0;
    }

    .products-header h2{

        font-size:18px;
    }

    .products-grid{

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

        gap:12px;
    }

    .sidebar-box{

        padding:12px;

        border-radius:12px;
    }

    .pagination{

        gap:6px;
    }
}

/* =====================================================
   IPHONE PEQUEÑO
===================================================== */

@media (max-width:420px){

    .products-grid{

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

        gap:10px;
    }

    .products-header h2{

        font-size:16px;
    }

    .sidebar-box{

        padding:10px;
    }

    .pagination a{

        min-width:32px;

        height:32px;
    }
}