/* ============================================================
   NEWCOMPUTERS — CATÁLOGO MIAMI
   Diseño catálogo premium
============================================================ */

:root {

    --bg:
        #070707;

    --bg-soft:
        #0d0d0d;

    --bg-card:
        #111111;

    --bg-card-2:
        #151515;

    --border:
        #272727;

    --border-soft:
        #1c1c1c;

    --text:
        #ffffff;

    --text-soft:
        #b6b6b6;

    --text-muted:
        #7f7f7f;

    --accent:
        #ed1c24;

    --accent-hover:
        #ff2a33;

    --success:
        #1fc77a;

    --radius-sm:
        10px;

    --radius-md:
        16px;

    --radius-lg:
        22px;

    --container:
        1320px;
}


/* ============================================================
   RESET
============================================================ */

* {

    box-sizing:
        border-box;
}


html {

    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    padding:
        0;

    background:

        radial-gradient(
            circle at 50% -15%,
            rgba(
                255,
                255,
                255,
                0.055
            ),
            transparent 35%
        ),

        var(
            --bg
        );

    color:
        var(
            --text
        );

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

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


button,
input,
select {

    font:
        inherit;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


img {

    max-width:
        100%;
}

/* ============================================================
   ELEMENTOS OCULTOS
============================================================ */

[hidden] {
    display: none !important;
}



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

.contenedor {

    width:
        min(
            calc(
                100% - 40px
            ),
            var(
                --container
            )
        );

    margin-left:
        auto;

    margin-right:
        auto;
}


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

.encabezado {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    background:
        rgba(
            5,
            5,
            5,
            0.94
        );

    border-bottom:
        1px solid
        var(
            --border-soft
        );

    backdrop-filter:
        blur(
            18px
        );

    -webkit-backdrop-filter:
        blur(
            18px
        );
}


.encabezado-interior {

    min-height:
        92px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.logo {

    display:
        block;

    width:
        220px;

    max-width:
        42vw;
}


.encabezado-datos {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

    color:
        var(
            --text-muted
        );

    font-size:
        12px;

    line-height:
        1.5;

    text-align:
        right;
}


.encabezado-datos strong {

    color:
        var(
            --text
        );

    font-size:
        13px;

    font-weight:
        700;
}


/* ============================================================
   HERO
============================================================ */

.hero {

    padding:
        50px
        0
        36px;

    border-bottom:
        1px solid
        var(
            --border-soft
        );
}


.hero-grid {

    display:
        grid;

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

    gap:
        60px;

    align-items:
        end;
}


.hero-kicker {

    margin:
        0
        0
        12px;

    color:
        #c8c8c8;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.hero h1 {

    max-width:
        760px;

    margin:
        0
        0
        20px;

    font-size:
        clamp(
            46px,
            5.4vw,
            76px
        );

    line-height:
        0.94;

    letter-spacing:
        -0.055em;

    text-transform:
        uppercase;

    font-weight:
        900;
}


.hero-descripcion {

    max-width:
        720px;

    margin:
        0;

    color:
        #d1d1d1;

    font-size:
        16px;

    line-height:
        1.65;
}


.hero-resumen {

    min-height:
        120px;

    padding:
        24px
        26px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    background:

        linear-gradient(
            145deg,
            #151515,
            #0b0b0b
        );

    border:
        1px solid
        #303030;

    border-radius:
        var(
            --radius-lg
        );

    box-shadow:

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.03
        ),

        0
        16px
        45px
        rgba(
            0,
            0,
            0,
            0.25
        );
}


.hero-resumen-numero {

    display:
        block;

    font-size:
        50px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -0.04em;
}


.hero-resumen-texto {

    display:
        block;

    margin-top:
        10px;

    color:
        var(
            --text-soft
        );

    font-size:
        13px;

    line-height:
        1.45;
}


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

.barra-filtros {

    position:
        sticky;

    top:
        92px;

    z-index:
        90;

    padding:
        14px
        0;

    background:
        rgba(
            7,
            7,
            7,
            0.96
        );

    border-bottom:
        1px solid
        var(
            --border-soft
        );

    backdrop-filter:
        blur(
            18px
        );

    -webkit-backdrop-filter:
        blur(
            18px
        );
}


/* ============================================================
   GRID DE FILTROS
============================================================ */

.filtros-grid {

    display:
        grid;

    grid-template-columns:

        minmax(
            300px,
            1.7fr
        )

        minmax(
            150px,
            0.8fr
        )

        minmax(
            205px,
            1.12fr
        )

        minmax(
            145px,
            0.75fr
        )

        minmax(
            135px,
            0.7fr
        )

        minmax(
            145px,
            0.72fr
        );

    gap:
        9px;

    align-items:
        center;
}


.campo {

    min-width:
        0;
}


.campo-con-icono {

    position:
        relative;

    width:
        100%;
}


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

.campo-icono {

    position:
        absolute;

    left:
        13px;

    top:
        50%;

    z-index:
        2;

    transform:
        translateY(
            -50%
        );

    width:
        18px;

    height:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #777;

    font-size:
        15px;

    line-height:
        1;

    pointer-events:
        none;
}


.campo-icono-orden {

    color:
        #d6d6d6;

    font-size:
        17px;
}


/* ============================================================
   INPUT Y SELECT
============================================================ */

.campo input,
.campo select {

    width:
        100%;

    height:
        46px;

    padding:
        0
        34px
        0
        40px;

    overflow:
        hidden;

    color:
        #fff;

    background:

        linear-gradient(
            180deg,
            #111111,
            #0c0c0c
        );

    border:
        1px solid
        #303030;

    border-radius:
        11px;

    outline:
        none;

    font-size:
        12px;

    font-weight:
        500;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    transition:

        border-color
        0.18s
        ease,

        background
        0.18s
        ease,

        box-shadow
        0.18s
        ease;
}


.campo input::placeholder {

    color:
        #6f6f6f;
}


.campo input:hover,
.campo select:hover {

    border-color:
        #4a4a4a;
}


.campo input:focus,
.campo select:focus {

    background:
        #141414;

    border-color:
        #686868;

    box-shadow:

        0
        0
        0
        3px
        rgba(
            255,
            255,
            255,
            0.04
        );
}


.campo select {

    cursor:
        pointer;
}


.campo-orden select {

    font-weight:
        700;

    background:

        linear-gradient(
            180deg,
            #171717,
            #101010
        );

    border-color:
        #3a3a3a;
}


/* ============================================================
   RESULTADOS
============================================================ */

.resultados-info {

    padding:
        22px
        0
        17px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    color:
        var(
            --text-muted
        );

    font-size:
        12px;
}


.resultados-info strong {

    color:
        var(
            --text
        );
}


/* ============================================================
   CATÁLOGO GRID
============================================================ */

.catalogo-grid {

    display:
        grid;

    grid-template-columns:

        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        16px;

    align-items:
        stretch;

    padding-bottom:
        22px;
}


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

.producto {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:

        linear-gradient(
            180deg,
            #111111,
            #0b0b0b
        );

    border:
        1px solid
        #252525;

    border-radius:
        18px;

    box-shadow:

        0
        8px
        28px
        rgba(
            0,
            0,
            0,
            0.18
        );

    transition:

        transform
        0.2s
        ease,

        border-color
        0.2s
        ease,

        box-shadow
        0.2s
        ease;
}


.producto:hover {

    transform:
        translateY(
            -4px
        );

    border-color:
        #404040;

    box-shadow:

        0
        22px
        50px
        rgba(
            0,
            0,
            0,
            0.38
        );
}


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

.producto-imagen-wrap {

    position:
        relative;

    height:
        245px;

    overflow:
        hidden;

    background:

        linear-gradient(
            145deg,
            #f7f7f7,
            #e6e6e6
        );

    border-bottom:
        1px solid
        #242424;
}


.producto-imagen {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    padding:
        13px;

    transition:
        transform
        0.3s
        ease;
}


.producto:hover
.producto-imagen {

    transform:
        scale(
            1.025
        );
}


.producto-imagen-error {

    position:
        absolute;

    inset:
        0;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111;

    font-size:
        13px;

    font-weight:
        800;
}


/* ============================================================
   BADGES SUPERIORES
============================================================ */

.producto-marca,
.producto-stock {

    position:
        absolute;

    top:
        12px;

    z-index:
        2;

    min-height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0
        11px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.03em;
}


.producto-marca {

    left:
        12px;

    background:
        #050505;

    color:
        #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );
}


.producto-stock {

    right:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    color:
        #050505;

    box-shadow:

        0
        2px
        10px
        rgba(
            0,
            0,
            0,
            0.12
        );
}


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

.producto-cuerpo {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    padding:
        18px
        18px
        19px;
}


.producto-sku {

    margin-bottom:
        9px;

    color:
        #888888;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.07em;
}


.producto-titulo {

    margin:
        0
        0
        14px;

    min-height:
        76px;

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        850;

    line-height:
        1.34;

    letter-spacing:
        -0.012em;
}


/* ============================================================
   CARACTERÍSTICAS
============================================================ */

.caracteristicas {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-bottom:
        16px;
}


.caracteristica {

    max-width:
        100%;

    padding:
        6px
        8px;

    overflow:
        hidden;

    background:
        #161616;

    border:
        1px solid
        #303030;

    border-radius:
        7px;

    color:
        #cfcfcf;

    font-size:
        9px;

    font-weight:
        750;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* ============================================================
   DATOS TÉCNICOS
============================================================ */

.producto-datos {

    display:
        grid;

    grid-template-columns:

        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    column-gap:
        16px;

    row-gap:
        14px;

    margin-top:
        auto;

    padding:
        16px
        0;

    border-top:
        1px solid
        #292929;

    border-bottom:
        1px solid
        #292929;
}


.dato {

    min-width:
        0;
}


.dato-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #777777;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.dato-valor {

    display:
        block;

    overflow-wrap:
        anywhere;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.25;
}


/* ============================================================
   PRECIO
============================================================ */

.precio {

    margin-top:
        17px;
}


.precio-label {

    display:
        block;

    color:
        #777777;

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;
}


.precio-lista {

    display:
        block;

    margin-top:
        4px;

    color:
        #ffffff;

    font-size:

        clamp(
            27px,
            2.1vw,
            36px
        );

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        -0.045em;
}


.precio-formula {

    display:
        block;

    margin-top:
        5px;

    color:
        #727272;

    font-size:
        9px;
}


/* ============================================================
   TRANSFERENCIA
============================================================ */

.precio-transferencia {

    margin-top:
        13px;

    padding:
        11px
        12px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        8px;

    background:

        linear-gradient(
            135deg,
            rgba(
                31,
                199,
                122,
                0.14
            ),
            rgba(
                31,
                199,
                122,
                0.055
            )
        );

    border:
        1px solid
        rgba(
            31,
            199,
            122,
            0.35
        );

    border-radius:
        10px;

    color:
        #b5e9d0;

    font-size:
        10px;
}


.precio-transferencia strong {

    color:
        #ffffff;

    font-size:
        15px;

    text-align:
        right;
}


.precio-transferencia span:last-child {

    padding:
        4px
        6px;

    background:
        var(
            --success
        );

    color:
        #00180d;

    border-radius:
        5px;

    font-size:
        9px;

    font-weight:
        900;
}


/* ============================================================
   PROMOCIÓN DESTACADA
============================================================ */

.promo-destacada {

    margin-top:
        11px;

    padding:
        12px;

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        4px;

    background:

        linear-gradient(
            145deg,
            rgba(
                237,
                28,
                36,
                0.12
            ),
            rgba(
                237,
                28,
                36,
                0.035
            )
        );

    border:
        1px solid
        rgba(
            237,
            28,
            36,
            0.32
        );

    border-radius:
        10px;
}


.promo-banco {

    color:
        #ff7b80;

    font-size:
        10px;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        0.04em;
}


.promo-cuotas {

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        850;
}


.promo-total,
.promo-dias,
.promo-detalle,
.promo-extra {

    color:
        #aaaaaa;

    font-size:
        9px;

    line-height:
        1.45;
}


/* ============================================================
   ACCIONES
============================================================ */

.producto-acciones {

    margin-top:
        15px;

    display:
        grid;

    gap:
        8px;
}


.boton {

    min-height:
        43px;

    padding:
        10px
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        10px;

    background:
        var(
            --accent
        );

    color:
        #ffffff;

    cursor:
        pointer;

    font-size:
        11px;

    font-weight:
        850;

    text-align:
        center;

    transition:

        background
        0.18s
        ease,

        border-color
        0.18s
        ease,

        transform
        0.18s
        ease;
}


.boton:hover {

    background:
        var(
            --accent-hover
        );

    border-color:
        var(
            --accent-hover
        );

    transform:
        translateY(
            -1px
        );
}


.boton-secundario {

    background:
        transparent;

    border-color:
        #343434;

    color:
        #d7d7d7;
}


.boton-secundario:hover {

    background:
        #171717;

    border-color:
        #555555;
}


/* ============================================================
   SIN RESULTADOS / ERROR
============================================================ */

.sin-resultados,
.error {

    grid-column:
        1 / -1;

    padding:
        60px
        25px;

    text-align:
        center;

    border:
        1px solid
        #2b2b2b;

    border-radius:
        var(
            --radius-lg
        );

    background:
        #101010;

    color:
        #aaaaaa;
}


.error {

    color:
        #ff868b;

    border-color:
        rgba(
            237,
            28,
            36,
            0.35
        );
}


/* ============================================================
   FOOTER
============================================================ */

.footer {

    margin-top:
        25px;

    padding:
        30px
        0;

    border-top:
        1px solid
        var(
            --border-soft
        );

    color:
        #737373;

    font-size:
        11px;
}


.footer-grid {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;
}


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

body.modal-abierto {

    overflow:
        hidden;
}


.modal-fondo {

    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(
            0,
            0,
            0,
            0.82
        );

    backdrop-filter:
        blur(
            10px
        );
}


.modal-fondo.visible {

    display:
        flex;
}


.modal {

    width:
        min(
            1050px,
            100%
        );

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

    overflow:
        hidden;

    background:
        #101010;

    border:
        1px solid
        #333333;

    border-radius:
        20px;

    box-shadow:

        0
        30px
        100px
        rgba(
            0,
            0,
            0,
            0.65
        );
}


.modal-cabecera {

    min-height:
        70px;

    padding:
        0
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        #292929;
}


.modal-titulo {

    margin:
        0;

    font-size:
        20px;
}


.modal-cerrar {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        #333333;

    border-radius:
        50%;

    background:
        #191919;

    color:
        #ffffff;

    cursor:
        pointer;

    font-size:
        24px;

    line-height:
        1;
}


.modal-cerrar:hover {

    background:
        #252525;
}


.modal-contenido {

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

    overflow:
        auto;

    padding:
        24px;
}


/* ============================================================
   FORMAS DE PAGO
============================================================ */

.formas-pago-resumen {

    display:
        grid;

    grid-template-columns:

        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;

    margin-bottom:
        28px;
}


.forma-pago-card {

    padding:
        18px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    background:
        #151515;

    border:
        1px solid
        #2c2c2c;

    border-radius:
        14px;
}


.forma-pago-card-destacada {

    background:

        linear-gradient(
            135deg,
            rgba(
                31,
                199,
                122,
                0.12
            ),
            #111111
        );

    border-color:
        rgba(
            31,
            199,
            122,
            0.35
        );
}


.forma-pago-label {

    color:
        #888888;

    font-size:
        11px;
}


.forma-pago-precio {

    color:
        #ffffff;

    font-size:
        27px;

    font-weight:
        900;
}


.forma-pago-detalle {

    color:
        #888888;

    font-size:
        11px;
}


.formas-pago-titulo {

    margin:
        0
        0
        12px;

    font-size:
        16px;
}


.tabla-wrap {

    overflow-x:
        auto;

    border:
        1px solid
        #282828;

    border-radius:
        12px;
}


.tabla-promos {

    width:
        100%;

    border-collapse:
        collapse;

    font-size:
        11px;
}


.tabla-promos th,
.tabla-promos td {

    padding:
        12px
        14px;

    border-bottom:
        1px solid
        #252525;

    text-align:
        left;

    vertical-align:
        top;
}


.tabla-promos th {

    position:
        sticky;

    top:
        0;

    background:
        #171717;

    color:
        #888888;

    font-size:
        9px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}


.tabla-promos tr:last-child td {

    border-bottom:
        0;
}


.tabla-promo-detalle,
.tabla-promo-extra,
.tabla-promo-fechas {

    margin-top:
        4px;

    color:
        #777777;

    font-size:
        9px;
}


.tabla-promo-dia {

    white-space:
        nowrap;
}


.modal-vacio {

    padding:
        30px;

    text-align:
        center;

    color:
        #888888;

    background:
        #151515;

    border-radius:
        12px;
}


/* ============================================================
   RESPONSIVE — DESKTOP MEDIO
============================================================ */

@media (
    max-width: 1250px
) {

    .catalogo-grid {

        grid-template-columns:

            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .filtros-grid {

        grid-template-columns:

            minmax(
                230px,
                1.4fr
            )

            minmax(
                120px,
                0.75fr
            )

            minmax(
                170px,
                1fr
            )

            minmax(
                125px,
                0.7fr
            )

            minmax(
                115px,
                0.65fr
            )

            minmax(
                125px,
                0.7fr
            );
    }


    .campo input,
    .campo select {

        padding-left:
            36px;

        padding-right:
            28px;

        font-size:
            11px;
    }


    .campo-icono {

        left:
            11px;
    }

}


/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (
    max-width: 1000px
) {

    .encabezado-interior {

        min-height:
            78px;
    }


    .logo {

        width:
            185px;
    }


    .barra-filtros {

        top:
            78px;
    }


    .hero {

        padding-top:
            42px;
    }


    .hero-grid {

        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .hero-resumen {

        min-height:
            auto;
    }


    .hero h1 {

        font-size:
            54px;
    }


    .filtros-grid {

        grid-template-columns:

            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .campo-buscador {

        grid-column:
            span 2;
    }


    .catalogo-grid {

        grid-template-columns:

            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .producto-imagen-wrap {

        height:
            260px;
    }


    .encabezado-datos {

        gap:
            12px;

        font-size:
            10px;
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (
    max-width: 650px
) {

    .contenedor {

        width:
            min(
                calc(
                    100% - 24px
                ),
                var(
                    --container
                )
            );
    }


    .encabezado-interior {

        min-height:
            70px;
    }


    .logo {

        width:
            155px;
    }


    .encabezado-datos div:first-child {

        display:
            none;
    }


    .barra-filtros {

        position:
            relative;

        top:
            auto;

        padding:
            12px
            0;
    }


    .hero {

        padding:
            32px
            0;
    }


    .hero h1 {

        font-size:
            43px;
    }


    .hero-descripcion {

        font-size:
            14px;
    }


    .hero-resumen-numero {

        font-size:
            42px;
    }


    .filtros-grid {

        grid-template-columns:

            1fr
            1fr;
    }


    .campo-buscador {

        grid-column:
            1 / -1;
    }


    .campo-orden {

        grid-column:
            1 / -1;
    }


    .catalogo-grid {

        grid-template-columns:
            1fr;
    }


    .producto-imagen-wrap {

        height:
            300px;
    }


    .producto-titulo {

        min-height:
            0;

        font-size:
            16px;
    }


    .precio-lista {

        font-size:
            38px;
    }


    .resultados-info {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;
    }


    .formas-pago-resumen {

        grid-template-columns:
            1fr;
    }


    .footer-grid {

        flex-direction:
            column;

        gap:
            8px;
    }

}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media (
    max-width: 430px
) {

    .filtros-grid {

        grid-template-columns:
            1fr;
    }


    .campo-buscador,
    .campo-orden {

        grid-column:
            auto;
    }


    .producto-imagen-wrap {

        height:
            255px;
    }


    .producto-datos {

        column-gap:
            12px;
    }


    .precio-transferencia {

        grid-template-columns:
            1fr
            auto;
    }


    .precio-transferencia span:first-child {

        grid-column:
            1 / -1;
    }

}