* {
    box-sizing: border-box;
}


:root {

    --azul: #075fe4;
    --azul-claro: #2b7cff;

    --navbar: #10151e;
    --navbar-campo: #1d2430;
    --navbar-borde: #303846;

    --fondo: #f2f5f9;

    --texto: #172236;
    --texto-suave: #6a7890;

    --borde: #dce3ec;

    --blanco: #ffffff;

}


body {

    margin: 0;

    background: var(--fondo);

    color: var(--texto);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

}



/* =========================
   NAVBAR
========================= */


.catalogo-navbar {
    display: grid;

    grid-template-columns:
        235px
        minmax(230px, 1fr)
        360px
        118px;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding:
        12px
        22px;

    background:
        var(--navbar);
}

.catalogo-navbar__marca {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 54px;

}



.catalogo-navbar__marca strong {

    color: #2b77ff;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: .02em;

}



.catalogo-navbar__marca span {

    margin-top: 5px;

    color: #b6c0cf;

    font-size: 11px;

    letter-spacing: .27em;

}



.catalogo-navbar__buscador {

    position: relative;

}



.catalogo-navbar__buscador input {
    width: 100%;
    height: 44px;

    padding:
        0
        14px
        0
        42px;

    background:
        var(--navbar-campo);

    border:
        1px solid
        var(--navbar-borde);

    border-radius: 10px;

    outline: none;

    color:
        var(--blanco);

    font-size: 13px;
}


.catalogo-navbar__buscador input::placeholder {

    color: #8e99aa;

}



.catalogo-navbar__buscador input:focus {

    border-color: #4f7fc5;

    box-shadow:
        0
        0
        0
        3px
        rgba(43, 124, 255, .10);

}



.buscador-icono {

    position: absolute;

    top: 50%;

    left: 17px;

    transform:
        translateY(-50%);

    color: #c4ccda;

    font-size: 18px;

    z-index: 2;

}



.catalogo-navbar__categorias label {

    display: block;

    margin-bottom: 7px;

    color: #aab4c4;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .14em;

}



.catalogo-navbar__filtros {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;
}

.catalogo-navbar__filtro label {
    display: block;

    margin-bottom: 7px;

    color: #aab4c4;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .14em;
}

.catalogo-navbar__filtro select {
    width: 100%;
    height: 50px;

    padding:
        0
        15px;

    background:
        var(--navbar-campo);

    border:
        1px solid
        var(--navbar-borde);

    border-radius: 11px;

    outline: none;

    color:
        var(--blanco);

    font-size: 14px;

    cursor: pointer;
}



.catalogo-navbar__categorias select {

    width: 100%;

    height: 50px;

    padding:
        0
        15px;

    background:
        var(--navbar-campo);

    border:
        1px solid
        var(--navbar-borde);

    border-radius: 11px;

    outline: none;

    color: var(--blanco);

    font-size: 14px;

    cursor: pointer;

}


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


.catalogo-contenedor {

    width:
        min(
            1600px,
            calc(100% - 50px)
        );

    margin:
        28px
        auto
        60px;

}



.catalogo-resumen {

    margin-bottom: 15px;

    color:
        #56657a;

    font-size: 13px;

}



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


.productos-grid {

    display: grid;

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

    align-items: start;

    gap: 18px;

}



/* =========================
   PRODUCTO
========================= */


.producto-card {
    
    min-height: 0;

    overflow: hidden;

    background:
        var(--blanco);
        
    box-shadow:
        0
        2px
        5px
        rgba(20, 35, 58, .025);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
        
    display: flex;
    flex-direction: column;

    height: 100%;
    min-height: 0px;

    border: 1px solid #d9e1ec;
    border-radius: 18px;

    cursor: pointer;

}



.producto-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #ced7e3;

    box-shadow:
        0
        9px
        25px
        rgba(24, 39, 65, .07);

}



/* IMAGEN */


.producto-card__imagen {
    position: relative;

    height: 160px;
    min-height: 160px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ffffff;
}


.producto-card__imagen img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 18px;
}


.producto-card__sin-imagen {

    color:
        #9aa6b5;

    font-size: 13px;

}



/* BOTÓN + */


.producto-card__mas {

    position: absolute;

    top: 13px;

    right: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    padding: 0;

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    border:
        1px solid
        #d5dde8;

    border-radius: 50%;

    box-shadow:
        0
        3px
        8px
        rgba(24, 39, 65, .05);

    color:
        #26364d;

    cursor: pointer;

    font-size: 24px;

    font-weight: 300;

    transition:
        transform .15s ease,
        border-color .15s ease;

}



.producto-card__mas:hover {

    transform:
        scale(1.06);

    border-color:
        var(--azul);

}



/* CONTENIDO */


.producto-card__contenido {

    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 15px;

}



.producto-card__encabezado {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.producto-card__categoria {

    color:
        var(--azul);

    font-size: 11px;

    font-weight: 800;

    text-transform:
        uppercase;

}



.producto-card__stock {

    color:
        #168347;

    font-size: 11px;

    font-weight: 700;

}



.producto-card__agotado {

    color:
        #c23c3c;

    font-size: 11px;

    font-weight: 700;

}



.producto-card h2 {

    margin:
        4px
        0
        4px;

    color:
        var(--texto);

    font-size: 20px;

    line-height: 1.2;

}



.producto-card__modelo {

    margin:
        0
        0
        10px;

    color:
        var(--texto-suave);

    font-size: 12px;

}



.producto-card__ubicacion {

    display: flex;

    align-items: center;

    gap: 6px;

    margin:
        0
        0
        3px;

    color:
        #52627a;

    font-size: 12px;

}



.ubicacion-icono {

    color:
        #4e6078;

    font-size: 15px;

}



/* =========================
   DESCRIPCIÓN + EXTRAS
========================= */


.producto-card__informacion {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 0;

    min-height: 82px;

    margin-top: 2px;

    padding: 4px 0;

    border-top: 1px solid #e5eaf1;
    border-bottom: 1px solid #e5eaf1;
}



.producto-card__columna {

    min-width: 0;

}



.producto-card__columna:first-child {

    padding-right:
        12px;

}



.producto-card__columna:last-child {

    padding-left:
        12px;

    border-left:
        1px solid
        #e5eaf1;

}



.producto-card__titulo-info {

    display: block;

    margin-bottom:
        8px;

    color:
        #68778e;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .03em;

}



.producto-card__informacion ul {

    margin: 0;

    padding-left:
        17px;

    color:
        #56657a;

    font-size:
        11px;

    line-height:
        1.6;

}



.producto-card__sin-datos {

    margin: 0;

    color:
        #8792a2;

    font-size:
        11px;

}



/* =========================
   COLORES
========================= */


.producto-card__bloque-colores {

    min-height: 55px;
    margin-top: 4px;

}



.producto-card__titulo-colores {

    display: block;

    margin-bottom:
        8px;

    color:
        #56657a;

    font-size:
        11px;

}



.producto-card__colores {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

}



.producto-color {

    width:
        18px;

    height:
        18px;

    padding: 0;

    background:
        var(--color-producto);

    border:
        2px solid
        transparent;

    border-radius:
        6px;

    outline:
        1px solid
        #d1d9e4;

    cursor:
        pointer;

    transition:
        transform .15s ease,
        outline-color .15s ease,
        box-shadow .15s ease;

}



.producto-color:hover {

    transform:
        translateY(-2px);

}



.producto-color:focus {

    outline:
        2px solid
        var(--azul);

    box-shadow:
        0
        0
        0
        2px
        rgba(
            7,
            95,
            228,
            .12
        );

}



/* =========================
   PRECIOS
========================= */

.producto-card__precios {
    margin-top: 10px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.precio-principal,
.precio-mayoreo {
    min-height: 60px;

    padding: 9px 12px;

    border-radius: 10px;
}


.precio-principal {

    background:
        #f1f6ff;

}



.precio-mayoreo {

    background:
        #f5f6f8;

}



.precio-principal span,
.precio-mayoreo span {

    display: block;

    color:
        #59687e;

    font-size:
        8px;

    font-weight:
        600;

}



.precio-principal strong,
.precio-mayoreo strong {

    display: block;

    margin-top:
        5px;

    color:
        #172236;

    font-size:
        14px;

    line-height:
        1.1;

}



.precio-principal strong {

    color:
        var(--azul);

}



.precio-mayoreo small {

    display: block;

    margin-top:
        4px;

    color:
        #64738a;

    font-size:
        8px;

}



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


.producto-card__boton {

    width:
        100%;

    margin-top:
        14px;

    padding:
        13px
        14px;

    background:
        var(--azul);

    border: 0;

    border-radius:
        10px;

    color:
        white;

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        background .2s ease,
        transform .1s ease;

}



.producto-card__boton:hover {

    background:
        #0753c8;

}



.producto-card__boton:active {

    transform:
        scale(.99);

}



/* =========================
   MENSAJES
========================= */


.catalogo-vacio,
.sin-resultados {

    grid-column:
        1 / -1;

    padding:
        45px
        25px;

    background:
        var(--blanco);

    border:
        1px solid
        var(--borde);

    border-radius:
        14px;

    text-align:
        center;

    color:
        var(--texto-suave);

}



.catalogo-vacio h2 {

    margin-top:
        0;

    color:
        var(--texto);

}



.mensaje-error {

    padding:
        20px;

    border:
        1px solid
        #ffd6d6;

    border-radius:
        12px;

    background:
        #fff3f3;

    color:
        #ad2d2d;

}



/* =========================
   RESPONSIVE
========================= */


@media(max-width: 1150px) {

    .catalogo-navbar {
        grid-template-columns:
            190px
            minmax(220px, 1fr)
            320px
            105px;

        gap: 10px;

        padding:
            12px
            16px;
    }

}


@media(max-width: 900px) {

    .catalogo-navbar {
        grid-template-columns:
            1fr
            auto;

        gap: 10px;
    }


    .catalogo-navbar__marca {
        grid-column:
            1 / 2;
    }


    .navbar-favoritos {
        grid-column:
            2 / 3;
        grid-row:
            1;
    }


    .catalogo-navbar__buscador {
        grid-column:
            1 / -1;
    }


    .catalogo-navbar__filtros {
        grid-column:
            1 / -1;

        grid-template-columns:
            1fr
            1fr;
    }

}


@media(max-width: 560px) {

    .catalogo-navbar {
        grid-template-columns:
            1fr
            auto;

        padding:
            10px;
    }


    .catalogo-navbar__marca strong {
        font-size: 15px;
    }


    .catalogo-navbar__marca span {
        font-size: 8px;
    }


    .navbar-favoritos {
        width: 44px;

        padding: 0;

        gap: 0;
    }


    .navbar-favoritos__texto {
        display: none;
    }


    .navbar-favoritos__icono {
        font-size: 20px;
    }


    .navbar-favoritos__contador {
        position: absolute;

        transform:
            translate(
                13px,
                -13px
            );
    }


    .catalogo-navbar__buscador input {
        height: 42px;

        font-size: 12px;
    }


    .filtro-personalizado__boton {
        height: 42px;

        padding:
            0
            10px;

        font-size: 11px;
    }

}

.producto-card--clickable {
    cursor: pointer;
}

.producto-card--clickable:focus-visible {
    outline: 3px solid rgba(7, 95, 228, .25);
    outline-offset: 3px;
}

.producto-card--clickable:hover .producto-card__mas {
    border-color: var(--azul);
    color: var(--azul);
    transform: scale(1.06);
}

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

body.modal-abierto {
    overflow: hidden;
}

.modal-producto {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 24px;
}

.modal-producto.activo {
    display: flex;
}

.modal-producto__fondo {
    position: absolute;

    inset: 0;

    background:
        rgba(7, 12, 22, .72);

    backdrop-filter:
        blur(2px);
}

.modal-producto__contenido {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        48%
        52%;

    width:
        min(
            1050px,
            100%
        );

    max-height:
        calc(100vh - 48px);

    overflow-y: auto;

    background:
        #ffffff;

    border-radius:
        18px;

    box-shadow:
        0
        30px
        80px
        rgba(0, 0, 0, .28);
}

.modal-producto__cerrar {
    position: absolute;

    top: 14px;
    right: 17px;

    z-index: 5;

    width: 38px;
    height: 38px;

    border: 0;

    background: transparent;

    color: #667489;

    cursor: pointer;

    font-size: 31px;
    line-height: 1;
}

.modal-producto__imagen {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 520px;

    padding: 30px;

    background:
        #fbfcfe;

    border-right:
        1px solid
        #e4e9f0;
}

.modal-producto__imagen img {
    width: 100%;

    max-height: 500px;

    object-fit: contain;
}

.modal-producto__informacion {
    padding:
        38px
        32px
        30px;
}

.modal-producto__encabezado {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding-right: 25px;
}

.modal-producto__categoria {
    color:
        var(--azul);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;
}

.modal-producto__informacion h2 {
    margin:
        5px
        0
        7px;

    color:
        var(--texto);

    font-size: 28px;

    line-height: 1.15;
}

.modal-producto__modelo {
    margin: 0;

    color:
        var(--texto-suave);

    font-size: 14px;
}

.modal-producto__stock {
    color:
        #168347;

    font-size: 13px;

    font-weight: 700;
}

.modal-producto__ubicacion {
    margin:
        5px
        0
        0;

    color:
        #58677b;

    font-size: 13px;
}

.modal-producto__separador {
    height: 1px;

    margin:
        8px
        0;

    background:
        #e7ebf1;
}

.modal-producto__columnas {
    display: grid;

    grid-template-columns:
        1fr
        1fr;
}

.modal-producto__columnas > div:first-child {
    padding-right: 25px;
}

.modal-producto__columnas > div:last-child {
    padding-left: 25px;

    border-left:
        1px solid
        #e3e8ef;
}

.modal-producto__columnas h3,
.modal-producto__colores h3 {
    margin:
        0
        0
        12px;

    color:
        #65758c;

    font-size: 11px;

    letter-spacing: .04em;
}

.modal-producto__columnas ul {
    margin: 0;

    padding-left: 18px;

    color:
        #4f5f76;

    font-size: 13px;

    line-height: 1.8;
}

.modal-producto__fila-colores {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
}

.modal-color {
    width: 39px;

    height: 39px;

    padding: 0;

    border:
        2px solid
        transparent;

    border-radius:
        9px;

    outline:
        1px solid
        #d7dee8;

    cursor: pointer;

    transition:
        transform .15s ease,
        outline-color .15s ease,
        box-shadow .15s ease;
}

.modal-color:hover {
    transform:
        translateY(-2px);
}

.modal-color.seleccionado {
    outline:
        2px solid
        var(--azul);

    box-shadow:
        0
        0
        0
        3px
        rgba(7, 95, 228, .14);
}

.modal-producto__color-nombre {
    display: block;

    min-height: 18px;

    margin-top: 9px;

    color:
        #65758c;

    font-size: 11px;
}

.modal-producto__precios {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 13px;

    margin-top: 25px;
}

.modal-precio {
    padding: 18px;

    background:
        #f5f6f8;

    border-radius:
        12px;
}

.modal-precio--normal {
    background:
        #f1f6ff;
}

.modal-precio span,
.modal-precio small {
    display: block;

    color:
        #59687d;

    font-size: 11px;
}

.modal-precio strong {
    display: block;

    margin:
        8px
        0
        5px;

    color:
        #172236;

    font-size: 26px;
}

.modal-precio--normal strong {
    color:
        var(--azul);
}

@media(max-width: 850px) {

    .modal-producto__contenido {
        grid-template-columns:
            1fr;
    }

    .modal-producto__imagen {
        min-height: 330px;

        border-right: 0;

        border-bottom:
            1px solid
            #e4e9f0;
    }

}

@media(max-width: 560px) {

    .modal-producto {
        padding: 10px;
    }

    .modal-producto__informacion {
        padding:
            28px
            18px
            22px;
    }

    .modal-producto__imagen {
        min-height: 270px;

        padding: 20px;
    }

    .modal-producto__columnas > div:first-child {
        padding-right: 0;
    }

    .modal-producto__columnas > div:last-child {
        padding-left: 0;

        border-left: 0;
    }

    .modal-producto__precios {
        grid-template-columns:
            1fr;
    }

}

/* =========================
   COMPRA EN MODAL
========================= */

.modal-compra {
    margin-top: 5px;
}

.modal-compra__titulo {
    margin: 0 0 12px;

    color: #65758c;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .05em;
}


.modal-compra__tipos {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;
}


.modal-tipo-precio {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-height: 94px;

    padding: 15px;

    background: #f5f7fa;

    border:
        2px solid
        transparent;

    border-radius: 12px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}


.modal-tipo-precio:hover {
    border-color: #cbd8eb;
}


.modal-tipo-precio:has(input:checked) {
    background: #f1f6ff;

    border-color:
        var(--azul);

    box-shadow:
        0
        0
        0
        3px
        rgba(7, 95, 228, .08);
}


.modal-tipo-precio input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.modal-tipo-precio__selector {
    flex: 0 0 auto;

    width: 20px;

    height: 20px;

    margin-top: 2px;

    background: white;

    border:
        2px solid
        #bcc7d6;

    border-radius: 5px;
}


.modal-tipo-precio:has(input:checked)
.modal-tipo-precio__selector {
    position: relative;

    background:
        var(--azul);

    border-color:
        var(--azul);
}


.modal-tipo-precio:has(input:checked)
.modal-tipo-precio__selector::after {
    content: "✓";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 13px;

    font-weight: 700;
}


.modal-tipo-precio__nombre {
    display: block;

    margin-bottom: 5px;

    color: #64738a;

    font-size: 10px;

    font-weight: 700;
}


.modal-tipo-precio strong {
    display: block;

    color: #172236;

    font-size: 21px;
}


.modal-tipo-precio small {
    display: block;

    margin-top: 4px;

    color: #748196;

    font-size: 10px;
}


.modal-tipo-precio:first-child strong {
    color:
        var(--azul);
}


/* CANTIDAD */

.modal-compra__cantidad {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-top: 10px;

    padding: 10px;

    background: #f7f8fa;

    border-radius: 12px;
}


.modal-compra__cantidad[hidden] {
    display: none;
}


.modal-compra__cantidad-titulo {
    display: block;

    margin-bottom: 9px;

    color: #65758c;

    font-size: 11px;

    font-weight: 700;
}


.selector-cantidad {
    display: flex;

    align-items: center;

    overflow: hidden;

    width: 150px;

    height: 42px;

    background: white;

    border:
        1px solid
        #d7dee8;

    border-radius: 9px;
}


.selector-cantidad button {
    width: 42px;

    height: 100%;

    padding: 0;

    background: white;

    border: 0;

    color: #25364d;

    cursor: pointer;

    font-size: 22px;
}


.selector-cantidad button:hover {
    background:
        #f2f5f9;
}


.selector-cantidad input {
    width: 66px;

    height: 100%;

    padding: 0;

    border: 0;

    border-left:
        1px solid
        #e4e8ee;

    border-right:
        1px solid
        #e4e8ee;

    outline: 0;

    text-align: center;

    color: #172236;

    font-size: 15px;

    font-weight: 700;
}


.selector-cantidad input::-webkit-inner-spin-button,
.selector-cantidad input::-webkit-outer-spin-button {
    appearance: none;

    margin: 0;
}


.modal-compra__equivalencia {
    text-align: right;
}


.modal-compra__equivalencia[hidden] {
    display: none;
}


.modal-compra__equivalencia span {
    display: block;

    margin-bottom: 5px;

    color: #778498;

    font-size: 10px;
}


.modal-compra__equivalencia strong {
    color: #172236;

    font-size: 15px;
}


/* RESUMEN */

.modal-compra__resumen {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.2fr;

    gap: 8px;

    margin-top: 8px;
}


.modal-compra__resumen[hidden] {
    display: none;
}


.modal-compra__resumen > div {
    padding: 12px;

    background: #f7f8fa;

    border-radius: 9px;
}


.modal-compra__resumen span {
    display: block;

    margin-bottom: 5px;

    color: #718096;

    font-size: 9px;
}


.modal-compra__resumen strong {
    color: #25364d;

    font-size: 14px;
}


.modal-compra__total {
    background:
        #eff5ff !important;
}


.modal-compra__total strong {
    color:
        var(--azul);

    font-size: 19px;
}


/* MENSAJES */

.modal-compra__mensaje {
    min-height: 17px;

    margin:
        11px
        0
        0;

    color: #c23c3c;

    font-size: 11px;
}


/* VER PRODUCTO */

.modal-producto__ver {
    width: 100%;

    margin-top: 8px;

    padding:
        14px
        18px;

    background:
        var(--azul);

    border: 0;

    border-radius: 10px;

    color: white;

    cursor: pointer;

    font-size: 14px;

    font-weight: 700;

    transition:
        background .15s ease;
}


.modal-producto__ver:hover {
    background:
        #0752c5;
}


@media(max-width: 560px) {

    .modal-compra__tipos {
        grid-template-columns: 1fr;
    }


    .modal-compra__cantidad {
        align-items: flex-start;

        flex-direction: column;
    }


    .modal-compra__equivalencia {
        text-align: left;
    }


    .modal-compra__resumen {
        grid-template-columns:
            1fr
            1fr;
    }


    .modal-compra__total {
        grid-column:
            1 / -1;
    }

}

/* ESTILO SELECTS */

.select-real {
    display: none;
}

.filtro-personalizado {
    position: relative;
}

.filtro-personalizado__boton {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 44px;

    padding: 0 16px;

    background: var(--navbar-campo);

    border: 1px solid var(--navbar-borde);

    border-radius: 12px;

    color: white;

    cursor: pointer;

    font-size: 14px;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.filtro-personalizado__boton:hover {
    border-color: #46556b;
}

.filtro-personalizado.abierto
.filtro-personalizado__boton {
    border-color: var(--azul);

    box-shadow:
        0 0 0 3px rgba(7, 95, 228, .12);
}

.filtro-personalizado__flecha {
    color: #aeb8c8;

    font-size: 16px;

    transition:
        transform .18s ease;
}

.filtro-personalizado.abierto
.filtro-personalizado__flecha {
    transform: rotate(180deg);
}

.filtro-personalizado__menu {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;
    right: 0;

    z-index: 100;

    display: none;

    padding: 7px;

    background: #1c2431;

    border: 1px solid #313c4c;

    border-radius: 12px;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .25);

    overflow: hidden;
}

.filtro-personalizado.abierto
.filtro-personalizado__menu {
    display: block;
}

.filtro-personalizado__opcion {
    display: block;

    width: 100%;

    padding: 10px 12px;

    background: transparent;

    border: 0;

    border-radius: 8px;

    color: #e6ebf2;

    text-align: left;

    cursor: pointer;

    font-size: 14px;

    transition:
        background .12s ease,
        color .12s ease;
}

.filtro-personalizado__opcion:hover {
    background: #273348;

    color: white;
}

.filtro-personalizado__opcion.activa {
    background: var(--azul);

    color: white;
}

.producto-card--oculto {
    display: none !important;
}

/* =========================
   BANDEJA LATERAL
========================= */

.bandeja-compra {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 9998;

    display: flex;
    flex-direction: column;

    width: min(410px, 94vw);

    background: #ffffff;

    border-left: 1px solid #dce3ec;

    box-shadow:
        -18px 0 55px
        rgba(10, 20, 35, .16);

    transform: translateX(105%);

    transition:
        transform .25s ease;
}

.bandeja-compra.activa {
    transform: translateX(0);
}


/* ENCABEZADO */

.bandeja-compra__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 21px;

    background: #111822;

    color: white;
}

.bandeja-compra__mini {
    display: block;

    margin-bottom: 4px;

    color: #8fa4c6;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .15em;
}

.bandeja-compra__encabezado h2 {
    margin: 0;

    font-size: 20px;
}

.bandeja-compra__cerrar {
    width: 37px;
    height: 37px;

    padding: 0;

    background: #1d2634;

    border: 1px solid #344052;

    border-radius: 10px;

    color: white;

    cursor: pointer;

    font-size: 24px;
}


/* LISTA */

.bandeja-compra__lista {
    flex: 1;

    overflow-y: auto;

    padding: 15px;
}

.bandeja-compra__vacia {
    display: flex;
    flex: 1;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 30px;

    text-align: center;

    color: #68778d;
}

.bandeja-compra__vacia strong {
    margin-bottom: 6px;

    color: #25344a;
}

.bandeja-compra__vacia span {
    font-size: 12px;
}


/* PRODUCTO */

.bandeja-item {
    margin-bottom: 13px;

    padding: 13px;

    background: #ffffff;

    border: 1px solid #dce3ec;

    border-radius: 14px;
}

.bandeja-item__superior {
    display: grid;

    grid-template-columns:
        64px
        1fr
        30px;

    gap: 11px;

    align-items: center;
}

.bandeja-item__imagen {
    width: 64px;
    height: 64px;

    object-fit: contain;

    background: #f7f9fc;

    border-radius: 9px;
}

.bandeja-item__nombre {
    margin: 0 0 3px;

    color: #172236;

    font-size: 14px;

    line-height: 1.2;
}

.bandeja-item__modelo {
    color: #75839a;

    font-size: 10px;
}

.bandeja-item__quitar {
    width: 30px;
    height: 30px;

    padding: 0;

    background: transparent;

    border: 0;

    color: #9a5660;

    cursor: pointer;

    font-size: 20px;
}


/* PRECIOS */

.bandeja-item__precios {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-top: 5px;
}

.bandeja-precio {
    position: relative;

    display: block;

    padding: 10px;

    background: #f5f7fa;

    border: 2px solid transparent;

    border-radius: 10px;

    cursor: pointer;
}

.bandeja-precio:has(input:checked) {
    background: #eff5ff;

    border-color: var(--azul);
}

.bandeja-precio input {
    position: absolute;

    opacity: 0;
}

.bandeja-precio span {
    display: block;

    margin-bottom: 4px;

    color: #6e7d92;

    font-size: 9px;
}

.bandeja-precio strong {
    display: block;

    color: #172236;

    font-size: 14px;
}

.bandeja-precio small {
    display: block;

    margin-top: 3px;

    color: #7b8798;

    font-size: 8px;
}

/* CANTIDAD */

.bandeja-item__cantidad {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 6px;
}

.bandeja-item__cantidad-texto {
    color: #64738a;

    font-size: 10px;
}

.bandeja-cantidad {
    display: flex;

    align-items: center;

    overflow: hidden;

    height: 35px;

    border: 1px solid #d8dfe8;

    border-radius: 8px;
}

.bandeja-cantidad button {
    width: 35px;
    height: 35px;

    padding: 0;

    background: white;

    border: 0;

    cursor: pointer;

    font-size: 18px;
}

.bandeja-cantidad strong {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 35px;

    border-left: 1px solid #e3e7ed;
    border-right: 1px solid #e3e7ed;

    font-size: 12px;
}


/* SUBTOTAL */

.bandeja-item__subtotal {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 6px;

    padding-top: 3px;

    border-top: 1px solid #e5eaf0;
}

.bandeja-item__subtotal span {
    color: #6c7a8e;

    font-size: 10px;
}

.bandeja-item__subtotal strong {
    color: #172236;

    font-size: 17px;
}


/* PIE */

.bandeja-compra__pie {
    padding: 16px 18px 18px;

    background: #111822;

    color: white;
}

.bandeja-compra__resumen {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.bandeja-compra__resumen span {
    color: #9cabc1;

    font-size: 11px;
}

.bandeja-compra__resumen strong {
    font-size: 24px;
}

.bandeja-compra__mensaje {
    min-height: 17px;

    margin:
        10px
        0
        4px;

    color: #ff9a9a;

    font-size: 11px;
}

.bandeja-compra__pagar {
    width: 100%;

    padding: 14px;

    background: var(--azul);

    border: 0;

    border-radius: 10px;

    color: white;

    cursor: pointer;

    font-size: 14px;

    font-weight: 700;
}


/* + SELECCIONADO */

.producto-card__mas {
    pointer-events: auto;
}

.producto-card__mas.seleccionado {
    background: var(--azul);

    border-color: var(--azul);

    color: white;
}

/* =========================
   FAVORITOS NAVBAR
========================= */

.navbar-favoritos {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    height: 44px;

    padding:
        0
        10px;

    background:
        var(--navbar-campo);

    border:
        1px solid
        var(--navbar-borde);

    border-radius: 10px;

    color:
        #ffffff;

    cursor: pointer;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;
}


.navbar-favoritos__icono {
    font-size: 17px;
}


.navbar-favoritos__contador {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 19px;
    height: 19px;

    padding:
        0
        5px;

    background:
        var(--azul);

    border-radius: 20px;

    color:
        white;

    font-size: 9px;

    font-weight: 800;
}

.navbar-favoritos:hover {
    background:
        #242e3d;

    border-color:
        #46546a;
}


.navbar-favoritos:active {
    transform:
        scale(.98);
}

.navbar-favoritos.sin-productos
.navbar-favoritos__contador {
    background:
        #536074;
}

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

/* COMPUTADORA */
.productos-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* TELÉFONOS Y TABLETS PEQUEÑAS */
@media(max-width: 768px) {

    .catalogo-contenedor {
        width:
            calc(100% - 16px);

        margin-top:
            18px;
    }


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

        gap: 10px;
    }


    .producto-card {
        border-radius:
            13px;
    }


    .producto-card__imagen {
        height:
            135px;

        min-height:
            135px;
    }


    .producto-card__imagen img {
        padding:
            10px;
    }


    .producto-card__contenido {
        padding:
            10px;
    }


    .producto-card h2 {
        font-size:
            15px;

        line-height:
            1.15;
    }


    .producto-card__categoria {
        font-size:
            9px;
    }


    .producto-card__stock {
        font-size:
            9px;
    }


    .producto-card__modelo,
    .producto-card__ubicacion {
        font-size:
            10px;
    }


    .producto-card__modelo {
        margin-bottom:
            7px;
    }


    .producto-card__informacion {
        min-height:
            75px;

        margin-top:
            2px;
    }


    .producto-card__titulo-info {
        margin-bottom:
            5px;

        font-size:
            8px;
    }


    .producto-card__informacion ul {
        padding-left:
            13px;

        font-size:
            9px;

        line-height:
            1.45;
    }


    .producto-card__sin-datos {
        font-size:
            9px;
    }


    .producto-card__columna:first-child {
        padding-right:
            6px;
    }


    .producto-card__columna:last-child {
        padding-left:
            6px;

        border-left:
            1px solid #e5eaf1;
    }


    .producto-card__bloque-colores {
        min-height:
            45px;
    }


    .producto-card__titulo-colores {
        margin-bottom:
            6px;

        font-size:
            9px;
    }


    .producto-card__colores {
        gap:
            5px;
    }


    .producto-color {
        width:
            15px;

        height:
            15px;

        border-radius:
            4px;
    }


    .producto-card__precios {
        gap:
            6px;

        margin-top:
            7px;
    }


    .precio-principal,
    .precio-mayoreo {
        min-height:
            55px;

        padding:
            7px;
    }


    .precio-principal span,
    .precio-mayoreo span {
        font-size:
            7px;
    }


    .precio-principal strong,
    .precio-mayoreo strong {
        font-size:
            12px;
    }


    .precio-mayoreo small {
        font-size:
            7px;
    }


    .producto-card__mas {
        top:
            8px;

        right:
            8px;

        width:
            30px;

        height:
            30px;

        font-size:
            19px;
    }

}

/* =========================
   MODAL COMPACTO EN MÓVIL
========================= */

@media(max-width: 560px) {

    .modal-producto {
        align-items: center;

        padding:
            14px;
    }


    .modal-producto__contenido {
        grid-template-columns:
            1fr;

        width:
            100%;

        max-width:
            430px;

        max-height:
            88vh;

        border-radius:
            16px;

        overflow-y:
            auto;
    }


    .modal-producto__cerrar {
        top:
            8px;

        right:
            8px;

        width:
            32px;

        height:
            32px;

        background:
            rgba(255, 255, 255, .92);

        border-radius:
            50%;

        font-size:
            24px;
    }


    .modal-producto__imagen {
        min-height:
            0;

        height:
            180px;

        padding:
            15px;

        border-right:
            0;

        border-bottom:
            1px solid #e5eaf0;
    }


    .modal-producto__imagen img {
        width:
            100%;

        height:
            100%;

        max-height:
            160px;

        object-fit:
            contain;
    }


    .modal-producto__informacion {
        padding:
            18px
            16px
            16px;
    }


    .modal-producto__encabezado {
        gap:
            8px;

        padding-right:
            10px;
    }


    .modal-producto__categoria {
        font-size:
            9px;
    }


    .modal-producto__informacion h2 {
        margin:
            7px
            0
            4px;

        font-size:
            19px;
    }


    .modal-producto__modelo {
        font-size:
            11px;
    }


    .modal-producto__stock {
        font-size:
            10px;
    }


    .modal-producto__ubicacion {
        margin-top:
            10px;

        font-size:
            10px;
    }


    .modal-producto__separador {
        margin:
            12px
            0;
    }


    .modal-producto__columnas {
        grid-template-columns:
            1fr
            1fr;

        gap:
            0;
    }


    .modal-producto__columnas > div:first-child {
        padding-right:
            10px;
    }


    .modal-producto__columnas > div:last-child {
        padding-left:
            10px;

        border-left:
            1px solid #e3e8ef;
    }


    .modal-producto__columnas h3,
    .modal-producto__colores h3 {
        margin-bottom:
            7px;

        font-size:
            8px;
    }


    .modal-producto__columnas ul {
        padding-left:
            14px;

        font-size:
            10px;

        line-height:
            1.5;
    }


    .modal-producto__fila-colores {
        gap:
            7px;
    }


    .modal-color {
        width:
            29px;

        height:
            29px;

        border-radius:
            7px;
    }


    .modal-producto__color-nombre {
        margin-top:
            6px;

        font-size:
            9px;
    }

}

@media(max-width: 560px) {

    .modal-compra__tipos {
        grid-template-columns:
            1fr
            1fr;

        gap:
            7px;
    }


    .modal-tipo-precio {
        min-height:
            72px;

        padding:
            10px;

        gap:
            7px;

        border-radius:
            9px;
    }


    .modal-tipo-precio__selector {
        width:
            16px;

        height:
            16px;
    }


    .modal-tipo-precio__nombre {
        font-size:
            8px;
    }


    .modal-tipo-precio strong {
        font-size:
            15px;
    }


    .modal-tipo-precio small {
        font-size:
            8px;
    }


    .modal-compra__cantidad {
        flex-direction:
            row;

        align-items:
            center;

        margin-top:
            10px;

        padding:
            10px;
    }


    .selector-cantidad {
        width:
            120px;

        height:
            36px;
    }


    .selector-cantidad button {
        width:
            35px;

        font-size:
            18px;
    }


    .selector-cantidad input {
        width:
            50px;

        font-size:
            12px;
    }


    .modal-compra__resumen {
        grid-template-columns:
            1fr
            1fr
            1fr;

        gap:
            5px;

        margin-top:
            8px;
    }


    .modal-compra__resumen > div {
        padding:
            8px;
    }


    .modal-compra__resumen span {
        font-size:
            7px;
    }


    .modal-compra__resumen strong {
        font-size:
            11px;
    }


    .modal-compra__total strong {
        font-size:
            14px;
    }


    .modal-producto__ver {
        margin-top:
            5px;

        padding:
            11px;

        font-size:
            12px;
    }

}

.producto-color.seleccionado {
    outline:
        2px solid
        var(--azul);

    box-shadow:
        0
        0
        0
        3px
        rgba(7, 95, 228, .13);

    transform:
        translateY(-1px);
}

/* =========================
   COLORES EN FAVORITOS
========================= */

.bandeja-colores {
    margin-top:
        12px;

    padding-top:
        11px;

    border-top:
        1px solid #e5eaf0;
}


.bandeja-colores__titulo {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        8px;
}


.bandeja-colores__titulo span {
    color:
        #68778d;

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}


.bandeja-colores__agregar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    padding:
        0;

    background:
        #eff5ff;

    border:
        1px solid #bfd1ed;

    border-radius:
        50%;

    color:
        var(--azul);

    cursor:
        pointer;

    font-size:
        17px;
}


.bandeja-colores__seleccionados {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.bandeja-color-seleccionado,
.bandeja-color-disponible {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        6px
        8px;

    background:
        #f6f8fb;

    border:
        1px solid #dce3ec;

    border-radius:
        8px;

    color:
        #45536a;

    cursor:
        pointer;

    font-size:
        9px;
}


.bandeja-color-seleccionado span,
.bandeja-color-disponible span {
    flex:
        0 0 auto;

    width:
        13px;

    height:
        13px;

    background:
        var(--color-bandeja);

    border:
        1px solid
        rgba(0,0,0,.15);

    border-radius:
        4px;
}


.bandeja-color-seleccionado small,
.bandeja-color-disponible small {
    color:
        #8994a4;

    font-size:
        8px;
}


.bandeja-colores__disponibles {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        8px;

    padding:
        9px;

    background:
        #f8fafc;

    border-radius:
        9px;
}


.bandeja-colores__sin-seleccion {
    color:
        #aa6767;

    font-size:
        9px;
}


.bandeja-colores__stock {
    margin-top:
        8px;

    color:
        #68778d;

    font-size:
        9px;
}


.bandeja-colores__stock strong {
    color:
        #172236;
}


.bandeja-precio--bloqueado {
    opacity:
        .55;

    cursor:
        not-allowed;
}


.bandeja-precio__aviso {
    color:
        #a76363
        !important;
}

.bandeja-distribucion {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    color:
        #536176;

    font-size:
        9px;

    line-height:
        1.35;
}


.bandeja-distribucion span {
    display:
        block;
}

.modal-producto__acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}


.modal-producto__boton {
    min-height: 42px;
    padding: 10px 15px;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.modal-producto__boton--favorito {
    background: #fff;
    border: 1px solid #d9e1eb;
    color: #334155;
}


.modal-producto__boton--secundario {
    background: #eef4ff;
    border: 1px solid #c8d9f3;
    color: #075fe4;
}


.modal-producto__boton--comprar {
    flex: 1;

    background: #075fe4;
    border: 1px solid #075fe4;
    color: #fff;
}


.modal-producto__boton:disabled {
    opacity: .45;
    cursor: not-allowed;
}


@media (max-width: 768px) {

    .modal-producto__acciones {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .modal-producto__boton--comprar {
        grid-column: 1 / -1;
    }

}