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

/* =========================================================
   Tarjeta de imagen (foto + icono + título + texto)
   SOLO se aplica a carruseles de imágenes con la clase "imgcards".
   El resto de carruseles de imágenes se ven como antes.
   Hover: el cuerpo se vuelve naranja #D96D00 con texto blanco.
   ========================================================= */
.ozs--images.imgcards .ozs__slide .ozs-imgcard{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#ffffff;
    border-radius:14px;
    /* sin overflow:hidden para que el icono pueda sobresalir */
    text-decoration:none;
    color:inherit;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:box-shadow .3s ease, transform .3s ease;
}
.ozs--images.imgcards .ozs__slide a.ozs-imgcard:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.ozs--images.imgcards .ozs-imgcard__media{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    background:#f3f3f3;
    /* la foto se recorta con border-radius en la propia <img>, no aquí,
       para que el icono que sobresale no quede cortado */
    border-radius:14px 14px 0 0;
}
.ozs--images.imgcards .ozs-imgcard__img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:14px 14px 0 0;
}
/* Icono circular naranja, montado entre la foto y el cuerpo */
.ozs--images.imgcards .ozs-imgcard__icon{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translate(-50%, 50%);
    z-index:3;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#D96D00;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}
.ozs--images.imgcards .ozs-imgcard__icon img{
    width:28px;
    height:28px;
    object-fit:contain;
    display:block;
    /* el icono se ve blanco sobre el círculo naranja */
    filter:brightness(0) invert(1);
}
.ozs--images.imgcards .ozs-imgcard__body{
    flex:1 1 auto;
    padding:38px 22px 26px;
    text-align:center;
    background:#ffffff;
    border-radius:0 0 14px 14px;
    transition:background-color .3s ease, color .3s ease;
}
.ozs--images.imgcards .ozs-imgcard__title{
    margin:0 0 12px;
    font-size:1.25rem;
    font-weight:700;
    color:#632E12;
    position:relative;
    padding-bottom:12px;
    transition:color .3s ease;
}
.ozs--images.imgcards .ozs-imgcard__title::after{
    content:"";
    display:block;
    width:46px;
    height:3px;
    background:#D96D00;
    border-radius:3px;
    margin:12px auto 0;
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    transition:background-color .3s ease;
}
.ozs--images.imgcards .ozs-imgcard__text{
    margin:0;
    color:#6b6b6b;
    line-height:1.6;
    font-size:.95rem;
    transition:color .3s ease;
}

/* Hover: cuerpo naranja, textos en blanco (como la imagen 3) */
.ozs--images.imgcards .ozs__slide:hover .ozs-imgcard__body,
.ozs--images.imgcards .ozs__slide:focus-within .ozs-imgcard__body{
    background-color:#D96D00;
}
.ozs--images.imgcards .ozs__slide:hover .ozs-imgcard__title,
.ozs--images.imgcards .ozs__slide:focus-within .ozs-imgcard__title,
.ozs--images.imgcards .ozs__slide:hover .ozs-imgcard__text,
.ozs--images.imgcards .ozs__slide:focus-within .ozs-imgcard__text{
    color:#ffffff;
}
.ozs--images.imgcards .ozs__slide:hover .ozs-imgcard__title::after,
.ozs--images.imgcards .ozs__slide:focus-within .ozs-imgcard__title::after{
    background:#ffffff;
}

/* =========================================================
   Tarjeta horizontal (split): título + texto a la izquierda, imagen a la derecha.
   SOLO se aplica a carruseles de imágenes con la clase "imgcards-split".
   ========================================================= */
.ozs--images.imgcards-split .ozs__slide .ozs-splitcard{
    display:flex;
    align-items:center;
    gap:28px;
    height:100%;
    background:#ffffff;
    border-radius:18px;
    padding:30px 34px;
    box-sizing:border-box;
    text-decoration:none;
    color:inherit;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    transition:box-shadow .3s ease, transform .3s ease;
}
.ozs--images.imgcards-split .ozs__slide a.ozs-splitcard:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 26px rgba(0,0,0,.12);
}
.ozs--images.imgcards-split .ozs-splitcard__body{
    flex:1 1 50%;
    min-width:0;
    text-align:left;
}
.ozs--images.imgcards-split .ozs-splitcard__title{
    margin:0 0 16px;
    font-size:1.35rem;
    font-weight:700;
    line-height:1.25;
    color:#632E12;
    position:relative;
    padding-bottom:14px;
}
.ozs--images.imgcards-split .ozs-splitcard__title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:54px;
    height:3px;
    background:#D96D00;
    border-radius:3px;
}
.ozs--images.imgcards-split .ozs-splitcard__text{
    margin:0;
    color:#6b6b6b;
    line-height:1.7;
    font-size:1rem;
}
.ozs--images.imgcards-split .ozs-splitcard__media{
    flex:1 1 50%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    /* pegar la imagen al filo derecho de la tarjeta (anula el padding lateral) */
    margin-right:-34px;
    align-self:stretch;
}
.ozs--images.imgcards-split .ozs-splitcard__img{
    width:100%;
    height:auto;
    max-height:240px;
    object-fit:contain;
    object-position:right center;
    display:block;
}
/* En móvil se apila: texto arriba, imagen abajo */
@media (max-width: 600px){
    .ozs--images.imgcards-split .ozs__slide .ozs-splitcard{
        flex-direction:column;
        text-align:center;
        gap:18px;
        padding:24px;
    }
    .ozs--images.imgcards-split .ozs-splitcard__body{
        text-align:center;
    }
    .ozs--images.imgcards-split .ozs-splitcard__media{
        margin-right:0;
        justify-content:center;
    }
    .ozs--images.imgcards-split .ozs-splitcard__img{
        object-position:center;
    }
    .ozs--images.imgcards-split .ozs-splitcard__title{
        padding-bottom:12px;
    }
    .ozs--images.imgcards-split .ozs-splitcard__title::after{
        left:50%;
        transform:translateX(-50%);
    }
}

/* =========================================================
   3 capas opcionales por slide (fondo / animación hover / producto)
   La capa "anim" entra desde abajo hacia arriba con fade.
   ========================================================= */
.ozs--images .oz-slide__media--layered{
    position:relative;
    overflow:hidden;
}
.ozs--images .oz-slide__media--layered .oz-slide__img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.ozs--images .oz-slide__media--layered .oz-slide__img--bg,
.ozs--images .oz-slide__media--layered .oz-slide__img--anim{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.ozs--images .oz-slide__media--layered .oz-slide__img--bg{
    z-index:1;
}
.ozs--images .oz-slide__media--layered .oz-slide__img--anim{
    z-index:2;
    opacity:0;
    transform:translateY(100%);
    transition:opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
}
.ozs--images .oz-slide__media--layered .oz-slide__img--product{
    position:relative;
    z-index:3;
}
.ozs--images .oz-slide__media--layered:hover .oz-slide__img--anim,
.ozs--images .oz-slide__media--layered:focus-within .oz-slide__img--anim,
.ozs--images .ozs__slide:hover .oz-slide__media--layered .oz-slide__img--anim,
.ozs--images .ozs__slide:focus-within .oz-slide__media--layered .oz-slide__img--anim{
    opacity:1;
    transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
    .ozs--images .oz-slide__media--layered .oz-slide__img--anim{
        transition:opacity .2s ease;
        transform:none;
    }
}

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