section.heroslider {
    --heroslider-height: min(600px, 75vw);
    --cortina-duration: 0.5s;
    --fade-duration: 0.7s;
    --move-duration: 15s;
}
section.heroslider > div > div > .wpb_wrapper {
    /*max-width: calc(var(--heroslider-width) * 1.2 * 2);*/
    margin-inline: auto;
    display: block;
}
.heroslider .slide {
    height: 0;
    width: 0;
}
.heroslider > div > div > .wpb_wrapper > .wpb_raw_code > .wpb_wrapper {
    display: grid;
    grid-template-columns: calc(var(--vcPaddingLeft) + 16px) 40fr 20fr 40fr calc(var(--vcPaddingRight) + 16px);
    grid-template-rows: var(--espacio-sm) var(--espacio-md) 1fr var(--espacio-xs) var(--espacio-sm) var(--espacio-sm);
    grid-template-areas:
            ". . . der der"
            ". topbadges topbadges der der"
            ". izq izq der der"
            ". bottombadges bottombadges der der"
            ". bottombadges bottombadges der der"
            ". . buttons der der"
    ;
    height: var(--heroslider-height);
    overflow: hidden;
    border-right: 1rem solid var(--c-azul);
}
.heroslider .heroslider-btns {
    grid-area: buttons;
    /*padding: 1.1rem var(--espacio-sm);*/
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--espacio-xxxs);
}
.heroslider .heroslider-btns button {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    position: relative;
    /*margin: 0.5rem auto 1.35rem auto;*/
    border-radius: 50%;
    background: var(--c-negro);
    border: 0 none;
}
.heroslider .heroslider-btns button.active {
    background: var(--c-amarillo);
    border-color: transparent;
}
.heroslider .heroslider-izq {
    grid-area: izq;
    width: 100%;
    opacity: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-bottom: var(--espacio-sm);
    /*padding: 0 var(--espacio-sm);*/
}
.heroslider .heroslider-izq h1,
.heroslider .heroslider-izq h2 {
    font-size: calc(var(--fs-xxxl) * .9);
    line-height: calc(var(--lh-xxxl) * .9);
}
.heroslider .heroslider-izq p {
    font-size: var(--fs-lg);
    line-height: var(--lh-lg);
    font-weight: var(--fw-light);
}
.heroslider .heroslider-izq .btn {
    --btn-text-color: var(--c-negro);
    --btn-border-color: var(--c-negro);
    --btn-main-color: transparent;
}
.heroslider .heroslider-izq .btn:hover {
    --btn-text-color: var(--c-blanco);
    --btn-border-color: var(--c-negro);
    --btn-main-color: var(--c-negro);
}
.heroslider .heroslider-izq img {
    max-height: var(--espacio-lg);
    width: auto;
    margin-block: var(--espacio-sm) 0;
}
.heroslider .heroslider-s,
.heroslider .heroslider-der {
    grid-area: der;
    width: auto;
    height: 100%;
    min-height: 100%;
    position: initial;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    justify-self: end;
    transform: translateX(50%) scale(1.3);
}
.heroslider .heroslider-der {
    clip-path: url(#s-de-sngular);
    -webkit-clip-path: url(#s-de-sngular);
}
.heroslider .heroslider-s {
    z-index: 3;
}
.heroslider .heroslider-s svg {
    width: 100%;
    height: 100%;
    transform: scale(1) translateX(0);
}
.heroslider .heroslider-bg {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0.9;
}
.heroslider .heroslider-bg::after {
    content: "";
    background: rgba(from var(--c-blanco) r g b / .7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.heroslider .subslide {
    opacity: 0;
    position: absolute;
    /*top: 0;*/
    /*left: 0;*/
}
.heroslider .heroslider-badges {
    grid-area: topbadges;
    z-index: 1;
}
.heroslider .heroslider-badges img {
    width: auto;
    height: auto;
    max-height: 100%;
}
.heroslider .heroslider-specializations {
    grid-area: bottombadges;
    z-index: 1;
}
.heroslider .heroslider-specializations img {
    width: auto;
    height: auto;
    max-height: 100%;
}
.heroslider .heroslider-der {
    /*transition: clip-path var(--cortina-duration);*/
}
.heroslider .heroslider-bg .subslide,
.heroslider .heroslider-der .subslide {
    /*transition: opacity var(--cortina-duration);*/
}
.heroslider .heroslider-izq .subslide {
    /*transition: opacity var(--fade-duration) 0s, transform 0s var(--fade-duration);*/
    transform: translateY(var(--heroslider-height));
    opacity: 0;
    /*padding: 0 var(--espacio-sm);*/
}
.heroslider .heroslider-izq .subslide.active {
    /*transition: opacity var(--fade-duration) 0.1s, transform 0s 0s;*/
    opacity: 1;
    transform: translateY(0);
}
.heroslider .heroslider-bg .subslide.active,
.heroslider .heroslider-der .subslide.active {
    opacity: 1;
}
.heroslider .heroslider-der .subslide > .wpb_single_image {
    /*transition: transform var(--move-duration) linear;*/
}
.heroslider .heroslider-der .subslide.active > .wpb_single_image {
    transform: scale(1.3) translateX(7.5%);
}

@media (max-width: 600px) {
    section.heroslider {
        --heroslider-height: 400px;
        --c-azul-semitransp: #1b1d3999;
    }
    .heroslider > div > div > .wpb_wrapper > .wpb_raw_code > .wpb_wrapper {
        grid-template-columns: var(--espacio-sm) 1fr var(--espacio-sm);
        grid-template-rows: var(--espacio-sm) var(--espacio-md) 1fr var(--espacio-xs) var(--espacio-sm) calc(var(--espacio-sm) + var(--espacio));
        grid-template-areas:
            ". . ."
            ". topbadges ."
            ". izq ."
            ". bottombadges ."
            ". bottombadges ."
            ". buttons ."
    ;
        height: var(--heroslider-height);
        overflow: hidden;
        border-right: 0;
        width: 100vw;
    }
    .heroslider .heroslider-izq,
    .heroslider .heroslider-badges,
    .heroslider .heroslider-specializations {
        /*grid-column: 2 / -1;*/
        /*grid-row: 1 / -1;*/
        /*background: var(--c-azul-semitransp);*/
        z-index: 2;
    }
    .heroslider .heroslider-izq .subslide {
        padding: var(--espacio-md) var(--espacio-md) var(--espacio-md) 0;
    }
    .heroslider .heroslider-btns {
        /*grid-column: 1 / 2;*/
        /*grid-row: 1 / -1;*/
        /*background: var(--c-azul-semitransp);*/
        z-index: 1;
        /*padding-block: var(--espacio-md);*/
        gap: var(--espacio-sm);
    }
    .heroslider .heroslider-btns button {
        width: 1rem;
        height: 1rem;
    }
    .heroslider .heroslider-s,
    .heroslider .heroslider-der {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        overflow: hidden;
        z-index: 0;
        clip-path: none;
        transform: unset;
        justify-self: unset;
    }
    .heroslider.cerrando .heroslider-s,
    .heroslider.cerrando .heroslider-der {
        clip-path: none;
    }
    .heroslider .heroslider-bg {
        z-index: 1;
        background: var(--c-azul-semitransp);
        opacity: 1;
    }
    .heroslider .heroslider-bg::after {
        background: var(--c-azul-semitransp);
    }
}
.heroslider .heroslider-bg > div.subslide,
.heroslider .heroslider-bg > div.subslide > div,
.heroslider .heroslider-bg > div.subslide > div > div,
.heroslider .heroslider-bg > div.subslide > div > figure,
.heroslider .heroslider-bg > div.subslide > div > figure > div,
.heroslider .heroslider-der > div.subslide,
.heroslider .heroslider-der > div.subslide > div,
.heroslider .heroslider-der > div.subslide > div > div,
.heroslider .heroslider-der > div.subslide > div > figure,
.heroslider .heroslider-der > div.subslide > div > figure > div {
    width: 100%;
    height: 100%;
}
.heroslider-bg .wpb_single_image > figure > div > img,
.heroslider-bg > .subslide > .wpb_raw_code > .wpb_wrapper > video,
.heroslider-der .wpb_single_image > figure > div > img,
.heroslider-der > .subslide > .wpb_raw_code > .wpb_wrapper > video {
    width: 100%;
    height: 100%;
    max-height: unset;
    max-width: unset;
    min-height: unset;
    min-width: unset;
    object-fit: cover;
    object-position: 50% 50%;
}

@media (min-resolution: 1dppx) and (min-width: 767px) and (max-width:990px) {
    section.brand22.heroslider {
        --fs-monster: 55pt;
        --lh-monster: 65pt;
        --fs-xxxl: 40pt;
        --lh-xxxl: 50pt;
        --fs-xxl: 30pt;
        --lh-xxl: 38pt;
        --fs-xl: 20pt;
        --lh-xl: 26pt;
        --fs-lg: 17pt;
        --lh-lg: 22pt;
        --fs-md: 15pt;
        --lh-md: 19pt;
        --fs-sm: 12pt;
        --lh-sm: 16pt;
        --fs-xs: 10pt;
        --lh-xs: 14pt;
        --espacio-xxxs: 0.25rem;
        --espacio-xxs: 0.5rem;
        --espacio-xs: 0.75rem;
        --espacio-sm: 1.25rem;
        --espacio-md: 2.5rem;
        --espacio-lg: 4.25rem;
        --espacio-xl: 5rem;
        --espacio-xxl: 7.5rem;
        --espacio-xxxl: 10rem;
        --espacio-medio-separador: var(--espacio-md);
    }
}
@media (min-resolution: 2dppx) and (min-width: 767px) {
    section.brand22.heroslider {
        --fs-monster: 55pt;
        --lh-monster: 65pt;
        --fs-xxxl: 40pt;
        --lh-xxxl: 50pt;
        --fs-xxl: 30pt;
        --lh-xxl: 38pt;
        --fs-xl: 20pt;
        --lh-xl: 26pt;
        --fs-lg: 17pt;
        --lh-lg: 22pt;
        --fs-md: 15pt;
        --lh-md: 19pt;
        --fs-sm: 12pt;
        --lh-sm: 16pt;
        --fs-xs: 10pt;
        --lh-xs: 14pt;
        --espacio-xxxs: 0.25rem;
        --espacio-xxs: 0.5rem;
        --espacio-xs: 0.75rem;
        --espacio-sm: 1.25rem;
        --espacio-md: 2.5rem;
        --espacio-lg: 4.25rem;
        --espacio-xl: 5rem;
        --espacio-xxl: 7.5rem;
        --espacio-xxxl: 10rem;
        --espacio-medio-separador: var(--espacio-md);
    }
}

@media (min-resolution: 2dppx) and (min-width: 990px) {
    section.brand22.heroslider {
        --fs-monster: 70pt;
        --lh-monster: 82pt;
        --fs-xxxl: 55pt;
        --lh-xxxl: 60pt;
        --fs-xxl: 38pt;
        --lh-xxl: 45pt;
        --fs-xl: 25pt;
        --lh-xl: 32pt;
        --fs-lg: 22pt;
        --lh-lg: 28pt;
        --fs-md: 19pt;
        --lh-md: 22pt;
        --fs-sm: 15pt;
        --lh-sm: 19pt;
        --fs-xs: 12pt;
        --lh-xs: 15pt;
        --espacio-xxxs: 0.25rem;
        --espacio-xxs: 0.5rem;
        --espacio-xs: 0.75rem;
        --espacio-sm: 1.25rem;
        --espacio-md: 2.5rem;
        --espacio-lg: 4.25rem;
        --espacio-xl: 5rem;
        --espacio-xxl: 7.5rem;
        --espacio-xxxl: 10rem;
        --espacio-medio-separador: var(--espacio-md);
    }
}