@font-face {
    font-family: 'MiTipografia1';
    src: url(../font/Montreal-Bold.ttf);
}
@font-face {
    font-family: 'MiTipografia2';
    src: url(../Font/Montreal-Regular.ttf);
}
@font-face {
    font-family: 'MiTipografia3';
    src: url(../font/Syne-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'MiTipografia4';
    src: url(../font/PPNeueMontreal-Bold.otf);
}
@font-face {
    font-family: 'MiTipografia5';
    src: url(../font/PPNeueMontreal-Book.otf);
}
@font-face {
    font-family: 'MiTipografia6';
    src: url(../font/PPNeueMontreal-Italic.otf);
}
@font-face {
    font-family: 'MiTipografia7';
    src: url(../font/PPNeueMontreal-Medium.otf);
}
@font-face {
    font-family: 'MiTipografia8';
    src: url(../font/PPNeueMontreal-SemiBolditalic.otf);
}
@font-face {
    font-family: 'MiTipografia9';
    src: url(../font/PPNeueMontreal-Thin.otf);
}
 @font-face {
    font-family: 'Manrope';
    src: url(../font/Manrope-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'Oswald';
    src: url(../font/Oswald-VariableFont_wght.ttf);
}

.slider-frame {
    width: 80%;
    height: 550px;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
    border-radius: 20px 150px 20px 20px; /* Cambia estos valores para ajustar cada vértice */
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide-content img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Cambia estos valores para ajustar cada vértice */
}

.slider-button {
    position: absolute;
    bottom: 20px; /* Ajusta la distancia desde la parte inferior según sea necesario */
    right: 20px; /* Ajusta la distancia desde el lado derecho según sea necesario */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.slider-button img {
    filter: invert(100%);
    width: 40px; /* Ajusta el tamaño del icono según sea necesario */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-family: 'MiTipografia9';
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    color: white;
}

.overlay-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 50%; /* Establecer el ancho máximo para ambos contenedores */
    width: 100%;
}

.overlay-section-left {
    align-items: flex-start;
    text-align: left;
}

.overlay-section-right {
    margin-right: 50px;
    align-items: center;
    text-align: center;
}

.overlay-logo {
    width: 50px !important; /* Ajustar tamaño según sea necesario */
    margin-bottom: 50px;
}

.overlay-percentage {/*animacion de porcentaje degradado*/
    font-family: 'MiTipografia5'; /* Ajusta esto a la fuente que estés utilizando */
    font-size: 50px;  /* Ajustar tamaño según sea necesario */
    margin-bottom: 5px;
    font-weight: bold;
    background: linear-gradient(90deg, orange, rgb(251, 132, 5), red);
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradientAnimation 3s linear infinite;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.overlay-description {
    font-size: 25px;
    margin-bottom: 50px;
}

.overlay-action-button,
.overlay-icon-button {
    padding: 10px 10px;
    background-color: black;
    border-radius: 20px;
    border: 1px solid white;
    color: white;
    cursor: pointer;
}

.overlay-icon-button img {
    margin-right: 10px;
    vertical-align: middle;
}

.overlay-center-image {
    max-width: 100%; /* Hacer que la imagen se ajuste al ancho máximo */
    height: auto; /* Permitir que la altura se ajuste automáticamente */
}

/* Contenedor de la paginación */
.swiper-pagination {
    position: absolute;
    bottom: 40px !important; /* Ajusta la distancia desde la parte inferior */
    left: 50%; /* Centra horizontalmente */
    /* Ajusta la posición para asegurar el centrado */
    display: flex;
    justify-content: center; /* Alinea los puntos al centro */
    align-items: center;
}

/* Estilo para los puntos circulares */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 0.6;
    border-radius: 50%;
    margin: 0 5px; /* Espaciado entre los puntos */
    transition: background-color 0.3s;
}

/* Estilo para el punto activo */
.swiper-pagination-bullet-active {
    background-color: #ffffff; /* Color del marcador activo */
    opacity: 1; /* Asegura que el punto activo sea completamente opaco */
}


/******************************************MEDIA QUERIE PARA 480px*******************************/
@media (max-width: 480px) {
    .slider-frame {
        width: 100%;
        height: auto;
        border-radius: 0; /* Quitar los bordes redondeados */
        margin: 20px 0; /* Ajustar los márgenes */
    }

    .slide-content img {
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .overlay {
        font-size: 0.9rem;
    }

    .overlay-section {
        max-width: 100%; /* Hacer que las secciones ocupen el ancho completo */
    }

    .overlay-section p{
        padding-top: 0px; /* Hacer que las secciones ocupen el ancho completo */
        height: 5px;
    }

    .overlay-section-right {
        margin-right: 0;
    }

    .overlay-logo {
        display: none !important;  /*142142452*/
    }

    .overlay-percentage {
        font-size: 1.5rem;
    }

    .overlay-description {
        font-size: 14px;
        margin-bottom: 0px;
    }

    .overlay-action-button,
    .overlay-icon-button {
        visibility: hidden;
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .swiper-pagination{
        bottom: 10px !important;
    }
    .swiper-pagination-bullet {
        width: 5px;
        height: 5px;
    }
    .swiper-slide {
        height: auto;
    }
}

/******************************************MEDIA QUERIE PARA 600px*******************************/
@media (min-width: 481px) and (max-width: 600px){
    .slider-frame {
        width: 100%;
        height: auto; /* Ajuste la altura automáticamente */
        margin: 20px auto; /* Reduce el margen */
        border-radius: 10px 75px 10px 10px; /* Ajuste de los bordes */
    }

    .overlay {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px; /* Reduce el padding */
        font-size: 14px; /* Ajusta el tamaño de fuente */
    }

    .overlay-section {
        width: 50%;
        box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
    }

    .overlay-section-left {
        text-align: left;
        align-items: flex-start;
    }

    .overlay-section-right {
        text-align: right;
        align-items: flex-end;
    }

    .overlay-logo {
        width: 40px !important; /* Ajusta el tamaño del logo */
        margin-bottom: 10px; /* Reduce el margen inferior */
    }

    .overlay-percentage {
        font-size: 30px; /* Ajusta el tamaño de fuente */
        margin-bottom: 10px; /* Reduce el margen inferior */
    }

    .overlay-description {
        font-size: 20px; /* Ajusta el tamaño de fuente */
        margin-bottom: 20px; /* Reduce el margen inferior */
    }

    .overlay-action-button, .overlay-icon-button {
        padding: 8px 16px; /* Ajusta el padding */
        font-size: 14px; /* Ajusta el tamaño de fuente */
    }

    .slider-button {
        bottom: 10px; /* Ajusta la distancia desde la parte inferior */
        right: 10px; /* Ajusta la distancia desde el lado derecho */
        width: 30px; /* Ajusta el tamaño del icono */
    }

    .slider-button img {
        width: 30px; /* Ajusta el tamaño del icono */
    }

    .overlay-center-image {
        max-width: 90%; /* Ajusta el ancho máximo */
    }

    /*nuestros socios*/
    .slider-derecho{
        width: 470px !important;
        height: 100px !important;
    }
    .slider-izquierdo{
        width: 470px !important;
        height: 100px !important;
    }
}