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

/* =========================================================
   Plantilla: Logos / Marcas (tira)
   layout=logos aplicado al tipo "images"
   - Cada marca en un marco. Los altos heredados (ratio, --ozs-height,
     equal-height) se anulan poniendolos en auto; el alto lo da el marco
     via min-height, que nunca recorta.
   - Logo centrado y sin recorte (object-fit:contain).
   - Hover: marco en verde de marca + logo a escala.
   Variables ajustables por slider desde el maquetador o el tema:
     --ozs-logo-h       alto util del logo dentro del marco
     --ozs-logo-pad     aire interior del marco (arriba/abajo)
     --ozs-logo-space   aire interior a los lados
     --ozs-logo-border  color del marco
   ========================================================= */
html body .ozs.ozs--layout-logos{
    --ozs-logo-h:52px;
    --ozs-logo-pad:16px;
    --ozs-logo-space:clamp(12px, 2vw, 28px);
    --ozs-logo-radius:12px;
    --ozs-logo-border:#e3e8ee;
    --ozs-logo-border-hover:#2dde5a;
    --ozs-logo-bg:#ffffff;
}

/* --- Alto natural ------------------------------------------------------
   Sin cabecera el core reserva arriba el alto de las flechas
   (padding-top: nav-size + 24px), y ratio / --ozs-height / equal-height
   pueden imponer un alto fijo al media. Aca se anulan TODOS esos altos
   poniendolos en auto: la tira mide lo que mide el marco del logo y nada
   se recorta. No se impone un alto en px a proposito. */
html body .ozs.ozs--layout-logos:not(.ozs--has-header){
    padding-top:0 !important;
    padding-bottom:0 !important;
}
html body .ozs.ozs--layout-logos .ozs__viewport{
    margin-top:0 !important;
}
html body .ozs.ozs--layout-logos .ozs__viewport,
html body .ozs.ozs--layout-logos .ozs__track,
html body .ozs.ozs--layout-logos .ozs__slide,
html body .ozs.ozs--layout-logos .ozs__slide > .ozs__link,
html body .ozs.ozs--layout-logos .ozs__media{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
}
/* stretch: todos los marcos quedan del alto del mas alto, sin fijar px. */
html body .ozs.ozs--layout-logos .ozs__track{
    align-items:stretch;
    padding-bottom:0;
}
html body .ozs.ozs--layout-logos .ozs__dots{
    margin-top:10px;
}

/* --- Flechas a los lados, centradas ------------------------------------ */
html body .ozs.ozs--layout-logos:not(.ozs--has-header) > .ozs__nav{
    position:static;
}
html body .ozs.ozs--layout-logos:not(.ozs--has-header) > .ozs__nav .ozs__nav-btn{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
}
html body .ozs.ozs--layout-logos:not(.ozs--has-header) > .ozs__nav .ozs__nav-btn--prev{
    left:0 !important;
    right:auto !important;
}
html body .ozs.ozs--layout-logos:not(.ozs--has-header) > .ozs__nav .ozs__nav-btn--next{
    right:0 !important;
    left:auto !important;
}
html body .ozs.ozs--layout-logos:not(.ozs--has-header) > .ozs__nav .ozs__nav-btn:hover,
html body .ozs.ozs--layout-logos:not(.ozs--has-header) > .ozs__nav .ozs__nav-btn:focus-visible{
    transform:translateY(-50%) !important;
}

/* --- Marco de cada marca ----------------------------------------------- */
html body .ozs.ozs--layout-logos .ozs__slide{
    display:flex;
    align-items:stretch;
    justify-content:center;
    background:transparent;
    border:0;
}
html body .ozs.ozs--layout-logos .ozs__slide > .ozs__link,
html body .ozs.ozs--layout-logos .ozs__slide > .ozs__media{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
}
html body .ozs.ozs--layout-logos .ozs__media{
    /* Piso de altura (no techo): iguala los marcos sin poder recortar nada. */
    min-height:calc(var(--ozs-logo-h) + (var(--ozs-logo-pad) * 2)) !important;
    padding:var(--ozs-logo-pad) var(--ozs-logo-space);
    background:var(--ozs-logo-bg);
    border:1px solid var(--ozs-logo-border);
    border-radius:var(--ozs-logo-radius);
    box-shadow:none;
    box-sizing:border-box;
    overflow:visible;
    transition:border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
html body .ozs.ozs--layout-logos .ozs__media img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:var(--ozs-logo-h);
    margin:0 auto;
    object-fit:contain;
    transition:transform .35s ease, filter .35s ease, opacity .35s ease;
}

/* --- Animaciones ------------------------------------------------------- */
/* Hover: el marco se tine de verde y el logo crece un poco. */
html body .ozs.ozs--layout-logos .ozs__slide:hover .ozs__media,
html body .ozs.ozs--layout-logos .ozs__slide:focus-within .ozs__media{
    border-color:var(--ozs-logo-border-hover);
    box-shadow:0 6px 18px rgba(17, 17, 17, 0.08);
}
html body .ozs.ozs--layout-logos .ozs__slide:hover .ozs__media img,
html body .ozs.ozs--layout-logos .ozs__slide:focus-within .ozs__media img{
    transform:scale(1.07);
}
/* Entrada escalonada: --ozs-idx lo asigna oz-sliders.js a cada slide.
   Solo opacidad: cualquier desplazamiento se recortaria contra el
   overflow:hidden del viewport mientras dura la animacion. */
html body .ozs.ozs--layout-logos .ozs__slide{
    animation:ozs-logo-in .5s ease both;
    animation-delay:calc(var(--ozs-idx, 0) * 90ms);
}
@keyframes ozs-logo-in{
    from{opacity:0}
    to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
    html body .ozs.ozs--layout-logos .ozs__slide{animation:none}
    html body .ozs.ozs--layout-logos .ozs__media,
    html body .ozs.ozs--layout-logos .ozs__media img{transition:none}
}

/* Variante opcional: logos en gris que recuperan color al pasar el mouse.
   Agregar la clase "ozs-logos-gris" en Avanzado > Clase del preset. */
html body .ozs.ozs--layout-logos.ozs-logos-gris .ozs__media img{
    filter:grayscale(1);
    opacity:.7;
}
html body .ozs.ozs--layout-logos.ozs-logos-gris .ozs__slide:hover .ozs__media img,
html body .ozs.ozs--layout-logos.ozs-logos-gris .ozs__slide:focus-within .ozs__media img{
    filter:none;
    opacity:1;
}
/* Variante opcional: sin marco (clase "ozs-logos-sin-marco"). */
html body .ozs.ozs--layout-logos.ozs-logos-sin-marco .ozs__media{
    background:transparent;
    border-color:transparent;
}
html body .ozs.ozs--layout-logos.ozs-logos-sin-marco .ozs__slide:hover .ozs__media,
html body .ozs.ozs--layout-logos.ozs-logos-sin-marco .ozs__slide:focus-within .ozs__media{
    border-color:transparent;
    box-shadow:none;
}

@media (max-width:1024px){
    html body .ozs.ozs--layout-logos{
        --ozs-logo-h:46px;
        --ozs-logo-pad:14px;
        --ozs-logo-space:clamp(10px, 2vw, 22px);
    }
}
@media (max-width:767px){
    html body .ozs.ozs--layout-logos{
        --ozs-logo-h:38px;
        --ozs-logo-pad:12px;
        --ozs-logo-space:14px;
    }
}

/* =========================================================
   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;
    }
}