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

/* Botón opcional por slide (campo "Texto botón" + "URL botón") */
.ozs--images .ozs__slide-button{
    display:inline-block;
    margin-top:14px;
    padding:10px 22px;
    background:#0b243d;
    color:#fff;
    font-weight:700;
    border-radius:4px;
    text-decoration:none;
    transition:background .2s ease, transform .2s ease;
}
.ozs--images .ozs__slide-button:hover{transform:translateY(-1px)}

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

/* =========================================================
   Plantilla "GR Servicios - Tarjeta verde"  (layout: gr_servicios)
   Tipo de carrusel: Imagenes.
   - Sin fondo en la tarjeta (transparente)
   - Imagen redondeada arriba + Titulo/Descripcion + boton verde CONTACTAR
   - Flechas a los costados, centradas sobre la imagen
   Reutilizable: la misma plantilla = el mismo estilo en cualquier carrusel.
   ========================================================= */
.ozs.ozs--images.ozs--layout-gr_servicios{
    /* Ajusta a tu gusto */
    --gr-verde:       #39a935;
    --gr-verde-hover: #2f8a2c;
    --gr-img-w:       300px;   /* ancho de la imagen (tamano "medium" de WP) */
    --gr-img-h:       180px;   /* alto de la imagen; las flechas se centran en el */
    --gr-arrow-gap:   56px;    /* espacio lateral reservado para las flechas (afuera de las imagenes) */
    --oz-accent: var(--gr-verde);
    padding-top:0 !important;  /* quita el espacio que reservaba para las flechas arriba */
    padding-left:var(--gr-arrow-gap) !important;   /* hace sitio a la izquierda */
    padding-right:var(--gr-arrow-gap) !important;  /* hace sitio a la derecha */
}

/* La slide NO es tarjeta: sin fondo ni sombra */
.ozs--images.ozs--layout-gr_servicios .ozs__slide{
    display:flex;
    flex-direction:column;
    height:100%;
    background:transparent;
    box-shadow:none;
    border-radius:0;
    overflow:visible;
    text-align:center;
}
.ozs--images.ozs--layout-gr_servicios .ozs__link{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    text-decoration:none;
    color:inherit;
}

/* Imagen arriba: tamano fijo 300x180 (medida nativa), centrada en la tarjeta */
.ozs--images.ozs--layout-gr_servicios .ozs__media{
    width:var(--gr-img-w);
    max-width:100%;
    height:var(--gr-img-h);
    overflow:hidden;
    border-radius:12px;
    background:#f3f4f6;
    margin:0 auto;
}
.ozs--images.ozs--layout-gr_servicios .ozs__media img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Titulo + Descripcion (debajo) */
.ozs--images.ozs--layout-gr_servicios .ozs__slide-text{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:14px 14px 20px;
}
.ozs--images.ozs--layout-gr_servicios .ozs__slide-title{
    font-size:1.15rem;
    font-weight:500;
    line-height:1.25;
    color:#1f2937;
}
.ozs--images.ozs--layout-gr_servicios .ozs__slide-subtitle{
    font-size:.92rem;
    line-height:1.5;
    color:#4D4D4D;
    text-decoration: none;
}

/* Boton CONTACTAR (verde, centrado, al fondo) */
.ozs--images.ozs--layout-gr_servicios .ozs__slide-button{
    margin-top:auto;
    margin-bottom:50px;
    align-self:center;
    display:inline-block;
    font-family:"roboto";
    padding:15px 30px;
    background:var(--gr-verde);
    color:#ffffff;
    font-weight:500;
    font-size:.9rem;
    letter-spacing:.3px;
    text-transform:uppercase;
    border-radius:6px;
    text-decoration:none;
    transition:background .2s ease, transform .2s ease;
}
.ozs--images.ozs--layout-gr_servicios .ozs__slide-button:hover{
    background:var(--gr-verde-hover);
    transform:translateY(-2px);
}

/* ---- Flechas a los costados, centradas sobre la imagen ---- */
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    pointer-events:none;
    z-index:5;
}
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn{
    position:absolute !important;
    top:calc(var(--gr-img-h) / 2) !important;
    transform:translateY(-50%) !important;
    pointer-events:auto;
}
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn--prev{
    left:6px !important;
    right:auto !important;
}
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn--next{
    right:6px !important;
    left:auto !important;
}

/* Flechas y puntos en verde */
.ozs--images.ozs--layout-gr_servicios .ozs__dot.is-active{ background:var(--gr-verde); }

/* ---- Flechas con forma de chevron "<  >" (verde, sin caja) ----
   Resetea el SVG/fondo/borde del plugin y dibuja el chevron con
   bordes. Especificidad alta + !important para ganar a las reglas
   globales de oz-sliders.css. La posicion (costados, centradas) la
   define el bloque de arriba; aqui solo cambia la apariencia. */
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn::before{
    content:"" !important;
    display:block !important;
    width:15px !important;
    height:15px !important;
    margin:0 !important;
    background:none !important;
    background-image:none !important;
    background-color:transparent !important;
    border:0 !important;
    border-top:3px solid var(--gr-verde) !important;
    border-right:3px solid var(--gr-verde) !important;
    border-radius:0 !important;
    box-shadow:none !important;
}
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn--prev::before{
    transform:translateX(3px) rotate(-135deg) !important;
}
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn--next::before{
    transform:translateX(-3px) rotate(45deg) !important;
}
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn:hover::before,
.ozs.ozs--images.ozs--layout-gr_servicios .ozs__nav .ozs__nav-btn:focus-visible::before{
    border-top-color:var(--gr-verde-hover) !important;
    border-right-color:var(--gr-verde-hover) !important;
}

/* Movil */
@media (max-width:768px){
    .ozs.ozs--images.ozs--layout-gr_servicios{ --gr-img-h:180px; --gr-arrow-gap:42px; }
    .ozs--images.ozs--layout-gr_servicios .ozs__slide-title{ font-size:1.05rem; }
}

/* =========================================================
   Plantilla "Marcas / Logos (tira)"  (layout: brand_strip)
   Tipo de carrusel: Imagenes.
   - Cada logo en un "tile" blanco (fondo blanco, borde suave,
     esquinas redondeadas), logo centrado SIN recortar (contain).
   - Flechas chevron verdes "<  >" a los costados, sin caja,
     centradas verticalmente sobre la fila de logos.
   - Puntos (dots) centrados debajo: gris claro + activo oscuro.
   Reutilizable: misma plantilla = mismo estilo en cualquier
   carrusel de logos/marcas.
   ========================================================= */
.ozs.ozs--images.ozs--layout-brand_strip{
    /* Ajusta a tu gusto */
    --bs-verde:        #39a935;   /* verde de las flechas */
    --bs-verde-hover:  #2f8a2c;
    --bs-tile-h:       150px;     /* alto del tile blanco; las flechas se centran en el */
    --bs-tile-pad:     0px 16px; /* respiro interior; menos padding = logo mas grande */
    --bs-arrow-gap:    52px;      /* espacio lateral reservado para las flechas (afuera de los tiles) */
    --bs-dot:          #cfcfcf;   /* punto inactivo */
    --bs-dot-active:   #333333;   /* punto activo (como en la referencia) */
    padding-top:0 !important;     /* quita el espacio que reservaba para las flechas arriba */
    padding-left:var(--bs-arrow-gap) !important;
    padding-right:var(--bs-arrow-gap) !important;
}

/* ---- Tile blanco por logo ---- */
.ozs--images.ozs--layout-brand_strip .ozs__slide{
    display:flex;
    align-items:center;
    justify-content:center;
    height:var(--bs-tile-h);
    padding:var(--bs-tile-pad);
    box-sizing:border-box;
    background:#ffffff;
     /*border:1px solid #ececec;
    border-radius:8px;
    box-shadow:0 1px 3px rgba(16,24,40,0.05); */
    overflow:hidden;
    transition:box-shadow .25s ease, transform .25s ease;
}
.ozs--images.ozs--layout-brand_strip .ozs__slide:hover{
    box-shadow:0 6px 16px rgba(16,24,40,0.10);
    transform:translateY(-2px);
}

/* Enlace opcional dentro del tile: ocupa todo y centra */
.ozs--images.ozs--layout-brand_strip .ozs__link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    text-decoration:none;
}

/* Media + imagen: logo centrado, contenido (no recorta) */
.ozs--images.ozs--layout-brand_strip .ozs__media{
    width:100%;
    height:100%;
    display:block;
    background:transparent;
    aspect-ratio:auto;
    overflow:visible;
}
/* width/height 100% + contain => el logo ESCALA hasta llenar el tile (sin recortar
   ni deformar), aunque su tamaño natural sea pequeño. Asi ocupa todo el fondo. */
.ozs--images.ozs--layout-brand_strip .ozs__media img{
    width:100% !important;
    height:100% !important;
    max-width:100%;
    max-height:100%;
    object-fit:contain !important;   /* gana al inline --ozs-img-fit:cover */
    object-position:center;
    filter:grayscale(0);
}

/* ---- Flechas chevron verdes a los costados, centradas en los tiles ---- */
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    pointer-events:none;
    z-index:5;
}
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn{
    position:absolute !important;
    top:calc(var(--bs-tile-h) / 2) !important;
    transform:translateY(-50%) !important;
    width:34px !important;
    height:44px !important;
    pointer-events:auto;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn--prev{
    left:6px !important;
    right:auto !important;
}
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn--next{
    right:6px !important;
    left:auto !important;
}

/* Dibujo del chevron (resetea el SVG/caja global y dibuja "<" / ">") */
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn::before{
    content:"" !important;
    display:block !important;
    width:14px !important;
    height:14px !important;
    margin:0 !important;
    background:none !important;
    background-image:none !important;
    background-color:transparent !important;
    border:0 !important;
    border-top:3px solid var(--bs-verde) !important;
    border-right:3px solid var(--bs-verde) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transition:border-color .2s ease !important;
}
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn--prev::before{
    transform:translateX(3px) rotate(-135deg) !important;
}
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn--next::before{
    transform:translateX(-3px) rotate(45deg) !important;
}
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn:hover::before,
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn:focus-visible::before{
    border-top-color:var(--bs-verde-hover) !important;
    border-right-color:var(--bs-verde-hover) !important;
}
/* Flecha deshabilitada (sin loop, en los extremos): atenuada, sin caja gris */
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn[disabled],
.ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn.is-disabled{
    background:transparent !important;
    opacity:.35 !important;
}

/* ---- Puntos (dots) centrados debajo ---- */
.ozs--images.ozs--layout-brand_strip .ozs__dots{
    display:flex !important;
    justify-content:center;
    align-items:center;
    gap:9px;
    margin-top:24px;
    margin-bottom:6px;
}
.ozs--images.ozs--layout-brand_strip .ozs__dot{
    width:9px;
    height:9px;
    border-radius:50%;
    border:0;
    background:var(--bs-dot);
    opacity:1;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}
.ozs--images.ozs--layout-brand_strip .ozs__dot:hover{
    background:#b3b3b3;
}
.ozs--images.ozs--layout-brand_strip .ozs__dot.is-active{
    background:var(--bs-dot-active) !important;
    transform:scale(1.05);
}

/* ---- Responsive ---- */
@media (max-width:1024px){
    .ozs.ozs--images.ozs--layout-brand_strip{ --bs-tile-h:140px; --bs-arrow-gap:44px; }
}
@media (max-width:768px){
    .ozs.ozs--images.ozs--layout-brand_strip{ --bs-tile-h:120px; --bs-tile-pad:8px 12px; --bs-arrow-gap:36px; }
    .ozs.ozs--images.ozs--layout-brand_strip .ozs__nav .ozs__nav-btn{ width:28px !important; height:40px !important; }
}

/* =========================================================
   Plantilla "Flechas laterales (‹ ›)"  (layout: side_arrows)
   Tipo de carrusel: Imagenes.
   - NO cambia el aspecto de las tarjetas/imagenes: se quedan igual.
   - Solo mueve las flechas: chevron "<  >" sin caja, a los costados,
     centradas verticalmente sobre la fila de imagenes (como la ref).
   - Pensado para imagenes oscuras: flecha blanca con sombra suave
     para que siempre se vea. Color/tamano ajustables con las vars.
   Reutilizable: misma plantilla = mismas flechas en cualquier
   carrusel de imagenes, sin tocar el resto del diseno.
   ========================================================= */
.ozs.ozs--images.ozs--layout-side_arrows{
    --sa-color:        #ffffff;   /* color del chevron (blanco para fotos oscuras) */
    --sa-color-hover:  #ffffff;
    --sa-size:         16px;      /* largo de cada brazo del chevron */
    --sa-thick:        3px;       /* grosor del trazo */
    --sa-edge:         6px;       /* separacion desde el borde lateral */
    padding-top:0 !important;     /* quita el hueco que reservaba para las flechas arriba */
}

/* Contenedor de flechas: cubre toda la fila para poder centrar vertical */
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav{
    position:absolute !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    pointer-events:none;
    z-index:5;
}

/* Cada flecha: sin caja, a un costado, centrada vertical sobre las imagenes */
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:44px !important;
    height:44px !important;
    pointer-events:auto;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn--prev{
    left:var(--sa-edge) !important;
    right:auto !important;
}
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn--next{
    right:var(--sa-edge) !important;
    left:auto !important;
}

/* Dibuja el chevron "<" / ">" (resetea el SVG/caja global de oz-sliders.css) */
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn::before{
    content:"" !important;
    display:block !important;
    width:var(--sa-size) !important;
    height:var(--sa-size) !important;
    margin:0 !important;
    background:none !important;
    background-image:none !important;
    background-color:transparent !important;
    border:0 !important;
    border-top:var(--sa-thick) solid var(--sa-color) !important;
    border-right:var(--sa-thick) solid var(--sa-color) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transition:border-color .2s ease !important;
}
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn--prev::before{
    transform:translateX(3px) rotate(-135deg) !important;
}
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn--next::before{
    transform:translateX(-3px) rotate(45deg) !important;
}
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn:hover::before,
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn:focus-visible::before{
    border-top-color:var(--sa-color-hover) !important;
    border-right-color:var(--sa-color-hover) !important;
}
/* Flecha deshabilitada (sin loop, en los extremos): atenuada, sin caja gris */
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn[disabled],
.ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn.is-disabled{
    background:transparent !important;
    opacity:.4 !important;
}

/* Responsive */
@media (max-width:768px){
    .ozs.ozs--images.ozs--layout-side_arrows{ --sa-size:13px; --sa-edge:2px; }
    .ozs.ozs--images.ozs--layout-side_arrows .ozs__nav .ozs__nav-btn{ width:38px !important; height:38px !important; }
}
