.circle {
    aspect-ratio: 1/1;
}

#mision-vision .toolbar {
    justify-content: space-evenly;
}

.arrow {
    width: 0;
    height: 0;
    border-left: 121px solid transparent;
    border-right: 121px solid transparent;
    border-top: 25px solid white;
    margin: 0 auto;
    top: -6px;
    z-index: 1000;
}

#mision-vison-collapse {
    background: rgb(230 107 95 / 60%);
    top: -25px;
}

#Mision p,
#Vision p {
    font-weight: 500;
}

.btn-toggle.toggled {
    pointer-events: none;
    /* Desactiva el clic en el botón */
    cursor: default;
    /* Cambia el cursor para indicar que el botón no es interactivo */
}

/* carrusel Equipo */
.owl-carousel {
    height: 436px;
}

.owl-stage-outer {
    padding: 0 11%;
}

.slider-carousel .card {
    background-repeat: no-repeat;
    min-width: 340px;
    max-width: 340px;
    min-height: 340px;
    /* max-height: 340px; */
    flex-direction: row;
}

.slider-carousel .persona-1,
.slider-carousel .persona-2,
.slider-carousel .persona-3,
.slider-carousel .persona-4,
.slider-carousel .persona-5,
.slider-carousel .persona-6 {
    background: linear-gradient(180deg, rgba(54, 22, 77, 0.1) 70%, rgba(54, 22, 77, 0.80) 85%),
        url(../img/avatar.webp);
}

.slider-carousel .card .overlay {
    min-width: 100%;
    min-height: 100%;
}

.slider-carousel .card:hover {
    background-image: none;
    background-color: var(--secondary);
}

.slider-carousel .card:hover .img-team {
    display: none;
}

.slider-carousel .card .text-team {
    display: none;
}

.slider-carousel .card:hover .text-team {
    display: block;
}

.slider-carousel .owl-nav {
    position: relative;
    top: -100%;
    z-index: 4;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slider-carousel .owl-nav div.owl-prev,
.slider-carousel .owl-nav div.owl-next {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--morado-claro-70) 0 0;
    color: var(--light);
    width: 65px;
    height: 100%;
    
}

.team .team-social {
    top: 0;
    background: rgb(230 107 95 / 60%);
    opacity: 0;
    z-index: 1;
    transition: .5s;
}

.team:hover .team-social {
    opacity: 1;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (min-width: 320px)and (max-width: 575.98px) {
    .circle {
        left: -90px;
        top: -220px;
        min-width: 110px;
        max-width: 110px;
        min-height: 110px;
        max-height: 110px;
        z-index: 4;
    }

    .circle .h4 {
        font-size: .875em;
    }

    #acerca-de .order-3 {
        position: relative;
        top: -30px;
    }

    .btn-group {
        min-width: 40%;
        /* width: ; */
    }

    .btn-toggle {
        font-size: 1.25em;
    }

    .arrow {
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
    }

    .owl-stage-outer {
        margin: 0;
        padding: 0 11% 0 6%;
    }

    .slider-carousel .card {
        max-width: 300px;
        min-width: 300px;
        min-height: 300px;
        max-height: 300px;
    }

    .slider-carousel .persona-1,
    .slider-carousel .persona-2,
    .slider-carousel .persona-3,
    .slider-carousel .persona-4,
    .slider-carousel .persona-5,
    .slider-carousel .persona-6 {
        background-size: contain;
    }

    .slider-carousel .owl-nav {
        padding: 0 0.5em;
    }

    .slider-carousel .owl-nav div.owl-prev,
    .slider-carousel .owl-nav div.owl-next {
        aspect-ratio: 1/1;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--dark);
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .circle {
        left: -180px;
        top: -320px;
        min-width: 150px;
        max-width: 150px;
        min-height: 150px;
        max-height: 150px;
        z-index: 4;
    }

    #acerca-de .order-3 {
        position: relative;
        top: -30px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .circle {
        left: -180px;
        top: -320px;
        min-width: 150px;
        max-width: 150px;
        min-height: 150px;
        max-height: 150px;
        z-index: 4;
    }

    #acerca-de .order-3 {
        position: relative;
        top: -30px;
    }
}

/* Large devices (desktops, less than 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .circle {
        left: -180px;
        top: -320px;
        min-width: 200px;
        max-width: 200px;
        min-height: 200px;
        max-height: 200px;
        z-index: 4;
    }

    #acerca-de .order-3 {
        position: relative;
        top: -60px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .circle {

        left: 10%;
        top: -50px;
        min-width: 200px;
        max-width: 200px;
        min-height: 200px;
        max-height: 200px;
        z-index: 4;
    }
}