.ozs--images .ozs__media{background:transparent}
.ozs--images .ozs__media img{display:block}

/* =========================================================
   Plantilla: Solo imagen - 2 filas (hover)
   grid_2rows aplicado al tipo "images"
   - Sin bordes, sin fondos en las slides
   - 2 filas x N columnas (segun ozs-cols)
   - Efecto hover: ligera elevacion + zoom sutil de la imagen
   ========================================================= */
.ozs--layout-grid_2rows .ozs__track{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(2, minmax(0, 1fr));
    grid-auto-columns:calc((100% - (var(--ozs-gap, 22px) * (var(--ozs-cols, 3) - 1))) / var(--ozs-cols, 3));
    gap:var(--ozs-gap, 22px);
    align-items:stretch;
    padding:0;
    list-style:none;
}
.ozs--layout-grid_2rows .ozs__slide{
    min-width:0;
    scroll-snap-align:start;
    background:transparent;
    border:0;
    padding:0;
    margin:0;
    list-style:none;
    overflow:hidden;
    border-radius:12px;
}
.ozs--layout-grid_2rows .ozs__dots{display:none !important}

.ozs--layout-grid_2rows .ozs-img,
.ozs--layout-grid_2rows .oz-img,
.ozs--layout-grid_2rows .ozs__slide > a,
.ozs--layout-grid_2rows .ozs__slide > figure,
.ozs--layout-grid_2rows .ozs__slide > picture,
.ozs--layout-grid_2rows .ozs__slide > div{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    margin:0;
    display:block;
    height:100%;
    box-shadow:none;
}
.ozs--layout-grid_2rows .ozs__slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:12px;
    transition:transform .35s ease, filter .35s ease;
}

/* Hover simple: leve zoom + mayor brillo */
.ozs--layout-grid_2rows .ozs__slide:hover img,
.ozs--layout-grid_2rows .ozs__slide:focus-within img{
    transform:scale(1.035);
    filter:brightness(1.05);
}

/* Header sobre fondo oscuro (dentro de feature respiradores/guantes) */
.myg-home-feature--respirators .ozs--layout-grid_2rows .ozs__header,
.myg-home-feature--gloves .ozs--layout-grid_2rows .ozs__header{
    margin-bottom:24px;
}
.myg-home-feature--respirators .ozs--layout-grid_2rows .ozs__header-text,
.myg-home-feature--gloves .ozs--layout-grid_2rows .ozs__header-text{
    position:relative;
    padding-left:18px;
}
.myg-home-feature--respirators .ozs--layout-grid_2rows .ozs__header-text::before,
.myg-home-feature--gloves .ozs--layout-grid_2rows .ozs__header-text::before{
    content:"";
    position:absolute;
    top:6px;
    left:0;
    width:6px;
    height:calc(100% - 12px);
    background:#F5A623;
    border-radius:3px;
}
.myg-home-feature--respirators .ozs--layout-grid_2rows .ozs__title,
.myg-home-feature--gloves .ozs--layout-grid_2rows .ozs__title{
    color:#ffffff;
    font-size:clamp(1.8rem, 2.4vw, 2.6rem);
    font-weight:800;
    line-height:1.1;
    margin:0;
}
.myg-home-feature--respirators .ozs--layout-grid_2rows .ozs__subtitle,
.myg-home-feature--gloves .ozs--layout-grid_2rows .ozs__subtitle{
    color:rgba(231,237,245,0.88);
    margin:6px 0 0;
    font-size:1rem;
}
/* Color/tamaño/hover de las flechas: regla global en oz-sliders.css */

/* Responsive */
@media (max-width: 1024px){
    .ozs--layout-grid_2rows .ozs__track{
        grid-auto-columns:calc((100% - (var(--ozs-gap, 18px) * (var(--ozs-cols, 2) - 1))) / var(--ozs-cols, 2));
        gap:var(--ozs-gap, 18px);
    }
}
@media (max-width: 768px){
    .ozs--layout-grid_2rows .ozs__track{
        grid-template-rows:repeat(1, minmax(0, 1fr));
        grid-auto-columns:calc(100% - 24px);
        gap:12px;
    }
}

/* SKIN "img-tablet" (opt-in) - la foto va dentro de un marco blanco de tablet
   con el botón de inicio abajo, y las flechas a los lados de la foto.
   Alto de la foto: --ozs-tablet-alto (500px por defecto, 380px en celular).
   Activar: Admin del carrusel -> Avanzado -> Clase = img-tablet */
.ozs.ozs--images.img-tablet{
    max-width:var(--ozs-tablet-ancho,470px);
    margin:0 auto !important;
    padding:1.8rem 1rem 4rem !important;
    border:3px solid #ffffff;
    border-radius:2rem;
    background:#ffffff;
    box-shadow:inset 0 0 0 2px #d7d7d8, 0 0 0 2px #dbdbdb;
    box-sizing:border-box;
    overflow:visible;
}
.ozs--images.img-tablet::after{
    content:"";
    position:absolute;
    right:0;
    bottom:14px;
    left:0;
    width:35px;
    height:35px;
    margin:auto;
    border:2px solid #dbdbdb;
    border-radius:50%;
    background:#ffffff;
    box-sizing:border-box;
}
.ozs--images.img-tablet .ozs__media{height:var(--ozs-tablet-alto,500px)}
.ozs.ozs--images.img-tablet:not(.ozs--has-header) > .ozs__nav{
    top:1.8rem;
    right:1.6rem;
    bottom:4rem;
    left:1.6rem;
    align-items:center;
    justify-content:space-between;
    pointer-events:none;
}
.ozs.ozs--images.img-tablet > .ozs__nav .ozs__nav-btn{pointer-events:auto}
@media (max-width:480px){
    .ozs--images.img-tablet .ozs__media{height:var(--ozs-tablet-alto-movil,380px)}
}

/* SKIN "img-logos" (opt-in) - franja de logos: cada logo entero (contain),
   separados por una línea fina, y las flechas apiladas a la izquierda, por
   fuera de la franja (en tablet y celular pasan a los costados).
   Deja unos 60px libres a la izquierda del carrusel para las flechas.
   Activar: Admin del carrusel -> Avanzado -> Clase = img-logos */
.ozs.ozs--images.img-logos{padding-top:0 !important;overflow:visible}
/* El 5 % de aire va en la caja del logo: un padding en % del slide se
   calcularía sobre todo el carrusel y dejaba los logos a la mitad. */
.ozs--images.img-logos .ozs__slide{padding:0;border-right:1px solid var(--ozs-logos-linea,#e6e6e6);box-sizing:border-box}
.ozs--images.img-logos .ozs__media{width:90%;height:auto;margin:0 auto;aspect-ratio:239 / 124}
.ozs--images.img-logos .ozs__media img{object-fit:contain}
.ozs.ozs--images.img-logos:not(.ozs--has-header) > .ozs__nav{
    top:50%;
    right:auto;
    left:-3.75rem;
    flex-direction:column;
    transform:translateY(-50%);
}
@media (max-width:768px){
    .ozs.ozs--images.img-logos:not(.ozs--has-header) > .ozs__nav{
        top:0;
        right:-3.25rem;
        bottom:0;
        left:-3.25rem;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        transform:none;
        pointer-events:none;
    }
    .ozs.ozs--images.img-logos > .ozs__nav .ozs__nav-btn{pointer-events:auto}
}
@media (max-width:480px){
    .ozs.ozs--images.img-logos:not(.ozs--has-header) > .ozs__nav{right:-2.75rem;left:-2.75rem}
}

/* SKIN "img-galeria" (opt-in) - galería de una foto a todo el ancho, como
   un Nivo Slider: sombra suave alrededor y flechas a los lados, centradas.
   Sin hueco arriba (las flechas no van en la esquina).
   Sombra: --ozs-galeria-sombra. Activar: Avanzado -> Clase = img-galeria */
.ozs.ozs--images.img-galeria{padding-top:0 !important;box-shadow:var(--ozs-galeria-sombra,0 1px 5px 0 rgb(0 0 0 / 45%))}
.ozs.ozs--images.img-galeria:not(.ozs--has-header) > .ozs__nav{
    top:0;
    right:0;
    bottom:0;
    left:0;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    pointer-events:none;
}
.ozs.ozs--images.img-galeria > .ozs__nav .ozs__nav-btn{pointer-events:auto}