/* ==========================================
   SODIMAC | LIMPIEZA POR AMBIENTE
   6 columnas desktop
   3 columnas tablet
   2 columnas mobile
========================================== */

/* GRID */
#aseo-ambientes{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
}

/* TARJETAS */
#aseo-ambientes .aseo-card{
    display:block;
    width:100%;
    min-width:0;
    overflow:hidden;
    border-radius:18px;
    text-decoration:none;
    background:transparent;
    transition:transform .25s ease, box-shadow .25s ease;
}

/* IMÁGENES */
#aseo-ambientes picture,
#aseo-ambientes img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
}

#aseo-ambientes img{
    object-fit:contain;
    vertical-align:middle;
    border:0;
}

/* HOVER */
@media (hover:hover) and (pointer:fine){

    #aseo-ambientes .aseo-card:hover{
        transform:translateY(-4px);
        box-shadow:0 6px 16px rgba(0,0,0,.12);
    }

}

/* FOCUS ACCESIBILIDAD */
#aseo-ambientes .aseo-card:focus-visible{
    outline:3px solid #0072ce;
    outline-offset:3px;
}

/* TABLET */
@media (max-width:1023px){

    #aseo-ambientes{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
    }

}

/* MOBILE */
@media (max-width:767px){

    #aseo-ambientes{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        padding:0 16px;
        box-sizing:border-box;
    }

    #aseo-ambientes .aseo-card{
        border-radius:14px;
    }

}

/* MOBILE PEQUEÑO */
@media (max-width:360px){

    #aseo-ambientes{
        gap:8px;
    }

    #aseo-ambientes .aseo-card{
        border-radius:12px;
    }

}

/* REDUCIR ANIMACIONES */
@media (prefers-reduced-motion:reduce){

    #aseo-ambientes .aseo-card{
        transition:none;
    }

}

/* ==========================================
   SODIMAC | LIMPIEZA INDUSTRIAL
   Desktop: 6 columnas
   Tablet: 3 columnas
   Mobile: 2 columnas
========================================== */

/* DESKTOP */
#aseo-industrial {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* TARJETAS */
#aseo-industrial .aseo-card {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    text-decoration: none;
    background: transparent;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* IMÁGENES */
#aseo-industrial picture,
#aseo-industrial img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

#aseo-industrial img {
    object-fit: contain;
    vertical-align: middle;
    border: 0;
}

/* HOVER */
@media (hover: hover) and (pointer: fine) {
    #aseo-industrial .aseo-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    }
}

/* ACCESIBILIDAD */
#aseo-industrial .aseo-card:focus-visible {
    outline: 3px solid #0072ce;
    outline-offset: 3px;
}

/* TABLET */
@media (max-width: 1023px) {
    #aseo-industrial {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    #aseo-industrial {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 0 16px;
    }

    #aseo-industrial .aseo-card {
        border-radius: 14px;
    }
}

/* MOBILE PEQUEÑO */
@media (max-width: 360px) {
    #aseo-industrial {
        gap: 8px;
        padding: 0 8px;
    }

    #aseo-industrial .aseo-card {
        border-radius: 12px;
    }
}

/* REDUCIR ANIMACIONES */
@media (prefers-reduced-motion: reduce) {
    #aseo-industrial .aseo-card {
        transition: none;
    }
}