.ranking-containerSM {
    width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Apilar los elementos uno debajo del otro */
    align-items: flex-start;
    position: relative;
}

.tabsSM {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    
    position: absolute; /* Permitir que los botones se puedan mover libremente */
    top: 1.1875rem; /* Ajusta la posición vertical de los botones */
    left: 50rem; /* Ajusta la posición horizontal de los botones */
}

.btn-semanalSM {
    font-family: 'Myanmar Text', sans-serif;
    font-weight: bold;
    font-size: 1.2rem; /* Ajustado de 1.25rem */
    background-color: #FFCA50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
    width: 10.5rem; /* Ajustado de 11.25rem */
    border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
    border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
    position: absolute;
    top: 115px;
    left: 435px; /* Ajustado de 50rem */   
}

.btn-mensualSM {
    font-family: 'Myanmar Text', sans-serif;
    font-weight: bold;
    font-size: 1.2rem; /* Ajustado de 1.4375rem */
    background-color: #FF5650;
    color: white;
    border: none;
    cursor: pointer;
    padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
    width: 10.5rem; /* Ajustado de 11.25rem */
    border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
    border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
    position: absolute;
    top: 115px;
    left: 577px; /* Ajustado de 50rem */
    
}

/* Caja de contenido */
.contentBoxSM {
    position: relative; /* Permitir movimiento libre de la caja */
    top: 155px; /* Ajustado de 6.25rem */
    left: 935px; /* Ajustado de 50rem */
    font-weight: bold;
    font-size: 1.2rem; /* Ajustado de 1.4375rem */
    background-color: #FFCA50;
    padding: 1.125rem; /* Ajustado de 1.25rem */
    border-radius: 0; /* Sin redondeo en las esquinas */
    transition: background-color 0.3s;
    margin-top: 0;

    max-width: 24.7rem; /* Ajustado de 37.5rem */
    height: 39.3rem; /* Ajustado de 37rem */
    
}

/* Estilos para la imagen */
.rounded-image {
    width: 100%;  /* Ajusta la imagen al 100% del contenedor */
    height: 6.4rem; /* Altura fija de 100px */
    border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
    object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
    object-position: center; /* Centra la imagen para un corte equilibrado */
    position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
}

/* Estilos para el rectángulo */
.overlay-rectangle {
    position: absolute;
    top: 1.12rem; /* 20px */
    left: 18.7rem; /* 274px */
    border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
    bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
    width: 20%; /* Toma todo el ancho de la imagen */
    height: 6.5rem; /* Altura de 100px */
    background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para el número sobre el rectángulo */
.overlay-number {
    color: white;
    font-size: 1.875rem; /* 30px */
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
}

/* Estilos para el texto dentro de la imagen */
.image-text {
    font-family: 'Segoe UI', sans-serif;
    font-size: 2rem; /* 35px */
    font-weight: bold;
    color: white;
    position: absolute;
    bottom: 3.75rem; /* 60px */
    top: 4.3rem; /* 65px */
    left: 1.875rem;  /* 30px */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
    -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
    stroke-width: 0.0625rem; /* 1px */
}

/* ------------------------------------------------------------------------------ */

/* Estilos para la segunda imagen */
.rounded-image2 {
    width: 100%;  /* Ajusta la imagen al 100% del contenedor */
    height: 6.4rem; /* Altura fija de 100px */
    border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
    object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
    object-position: center; /* Centra la imagen para un corte equilibrado */
    position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
}

/* Estilos para el rectángulo */
.overlay-rectangle2 {
    position: absolute;
    top: 8.6rem; /* 20px */
    left: 18.7rem; /* 274px */
    border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
    bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
    width: 20%; /* Toma todo el ancho de la imagen */
    height: 6.5rem; /* Altura de 100px */
    background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para el número sobre el rectángulo de la segunda imagen */
.overlay-number2 {
    color: white;
    font-size: 1.875rem; /* 30px */
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
}

/* Estilos para el texto dentro de la segunda imagen */
.image-text2 {
    font-family: 'Segoe UI', sans-serif;
    font-size: 2rem; /* 35px */
    font-weight: bold;
    color: white;
    position: absolute;
    bottom: 3.75rem; /* 60px */
    top: 11.6rem; /* 65px */
    left: 1.875rem;  /* 30px */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
    -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
    stroke-width: 0.0625rem; /* 1px */
}
/* 22222222------------------------------------------------------------------------------ */

/* Estilos para la segunda imagen */
.rounded-image3 {
    width: 100%;  /* Ajusta la imagen al 100% del contenedor */
    height: 6.4rem; /* Altura fija de 100px */
    border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
    object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
    object-position: center; /* Centra la imagen para un corte equilibrado */
    position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
}

/* Estilos para el rectángulo */
.overlay-rectangle3 {
    position: absolute;
    top: 16rem; /* 20px */
    left: 18.7rem; /* 274px */
    border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
    bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
    width: 20%; /* Toma todo el ancho de la imagen */
    height: 6.5rem; /* Altura de 100px */
    background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para el número sobre el rectángulo de la segunda imagen */
.overlay-number3 {
    color: white;
    font-size: 1.875rem; /* 30px */
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
}

/* Estilos para el texto dentro de la segunda imagen */
.image-text3 {
    font-family: 'Segoe UI', sans-serif;
    font-size: 2rem; /* 35px */
    font-weight: bold;
    color: white;
    position: absolute;
    bottom: 3.75rem; /* 60px */
    top: 18.9rem; /* 65px */
    left: 1.875rem;  /* 30px */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
    -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
    stroke-width: 0.0625rem; /* 1px */
}
/* 4444------------------------------------------------------------------------------ */

/* Estilos para la segunda imagen */
.rounded-image4 {
    width: 100%;  /* Ajusta la imagen al 100% del contenedor */
    height: 6.4rem; /* Altura fija de 100px */
    border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
    object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
    object-position: center; /* Centra la imagen para un corte equilibrado */
    position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
}

/* Estilos para el rectángulo */
.overlay-rectangle4 {
    position: absolute;
    top: 23.5rem; /* 20px */
    left: 18.7rem; /* 274px */
    border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
    bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
    width: 20%; /* Toma todo el ancho de la imagen */
    height: 6.5rem; /* Altura de 100px */
    background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para el número sobre el rectángulo de la segunda imagen */
.overlay-number4 {
    color: white;
    font-size: 1.875rem; /* 30px */
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
}

/* Estilos para el texto dentro de la segunda imagen */
.image-text4 {
    font-family: 'Segoe UI', sans-serif;
    font-size: 2rem; /* 35px */
    font-weight: bold;
    color: white;
    position: absolute;
    bottom: 3.75rem; /* 60px */
    top: 26.5rem; /* 65px */
    left: 1.875rem;  /* 30px */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
    -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
    stroke-width: 0.0625rem; /* 1px */
}
/* 55555------------------------------------------------------------------------------ */

/* Estilos para la segunda imagen */
.rounded-image5 {
    width: 100%;  /* Ajusta la imagen al 100% del contenedor */
    height: 6.4rem; /* Altura fija de 100px */
    border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
    object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
    object-position: center; /* Centra la imagen para un corte equilibrado */
    position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
}

/* Estilos para el rectángulo */
.overlay-rectangle5 {
    position: absolute;
    top: 31rem; /* 20px */
    left: 18.7rem; /* 274px */
    border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
    bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
    width: 20%; /* Toma todo el ancho de la imagen */
    height: 6.5rem; /* Altura de 100px */
    background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para el número sobre el rectángulo de la segunda imagen */
.overlay-number5 {
    color: white;
    font-size: 1.875rem; /* 30px */
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
}

/* Estilos para el texto dentro de la segunda imagen */
.image-text5 {
    font-family: 'Segoe UI', sans-serif;
    font-size: 2rem; /* 35px */
    font-weight: bold;
    color: white;
    position: absolute;
    bottom: 3.75rem; /* 60px */
    top: 34rem; /* 65px */
    left: 1.875rem;  /* 30px */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
    -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
    stroke-width: 0.0625rem; /* 1px */
}

@media (max-width: 2560px) {
    .ranking-containerSM {
        width: 93.6%; /* 80% + 17% */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        position: absolute;
        top: 1.39rem; /* 1.1875rem + 17% */
        left: 58.5rem; /* 50rem + 17% */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1.8rem;
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.6581rem 0.6581rem;
        width: 15.285rem;
        border-top-left-radius: 1.51369rem;
        border-top-right-radius: 1.51369rem;
        position: absolute;
        top: 169.55px;
        left: 1370px; /* 577px + 17% */
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1.8rem;
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.6581rem 0.6581rem;
        width: 15.285rem;
        border-top-left-radius: 1.51369rem;
        border-top-right-radius: 1.51369rem;
        position: absolute;
        top: 169.55px;
        left: 1616px; /* 577px + 17% */
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative;
        top: 221.35px; /* 155px + 17% */
        left: 1954.95px; /* 935px + 17% */
        font-weight: bold;
        font-size: 1.404rem;
        background-color: #FFCA50;
        padding: 1.31625rem; /* 1.125rem + 17% */
        border-radius: 0;
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 39.899rem; /* 24.7rem + 17% */
        height: 60rem; /* 39.3rem + 17% */
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.9rem; /* 1.12rem + 17% */
        left: 31.7rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo */
    .overlay-number {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 3rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 8rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    .overlay-rectangle2 {
        position: absolute;
        top: 13.4rem; /* 1.12rem + 17% */
        left: 31.7rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .overlay-number2 {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 3rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 19.5rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }
    
    /* Repite el mismo proceso para rounded-image3, overlay-rectangle3, overlay-number3, image-text3, etc. */
    .rounded-image3 {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    .overlay-rectangle3 {
        position: absolute;
        top: 24.9rem; /* 1.12rem + 17% */
        left: 31.7rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .overlay-number3 {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 3rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 31rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }

    .rounded-image4 {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    .overlay-rectangle4 {
        position: absolute;
        top: 36.4rem; /* 1.12rem + 17% */
        left: 31.7rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .overlay-number4 {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 3rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 42.4rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }

    .rounded-image5 {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    .overlay-rectangle5 {
        position: absolute;
        top: 47.9rem; /* 1.12rem + 17% */
        left: 31.7rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .overlay-number5 {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 3rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 53.9rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }
}


@media (max-width: 1920px) {
    .ranking-containerSM {
        width: 93.6%; /* 80% + 17% */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        position: absolute;
        top: 1.39rem; /* 1.1875rem + 17% */
        left: 58.5rem; /* 50rem + 17% */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1.8rem;
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.6581rem 0.6581rem;
        width: 15.285rem;
        border-top-left-radius: 1.51369rem;
        border-top-right-radius: 1.51369rem;
        position: absolute;
        top: 169.55px;
        left: 846px; /* 577px + 17% */
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1.8rem;
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.6581rem 0.6581rem;
        width: 15.285rem;
        border-top-left-radius: 1.51369rem;
        border-top-right-radius: 1.51369rem;
        position: absolute;
        top: 169.55px;
        left: 1073px; /* 577px + 17% */
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative;
        top: 221.35px; /* 155px + 17% */
        left: 1430.95px; /* 935px + 17% */
        font-weight: bold;
        font-size: 1.404rem;
        background-color: #FFCA50;
        padding: 1.31625rem; /* 1.125rem + 17% */
        border-radius: 0;
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 38rem; /* 24.7rem + 17% */
        height: 60rem; /* 39.3rem + 17% */
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.9rem; /* 1.12rem + 17% */
        left: 30.1rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo */
    .overlay-number {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 2.6rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 8rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    .overlay-rectangle2 {
        position: absolute;
        top: 13.4rem; /* 1.12rem + 17% */
        left: 30.1rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .overlay-number2 {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 2.6rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 19.5rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }
    
    /* Repite el mismo proceso para rounded-image3, overlay-rectangle3, overlay-number3, image-text3, etc. */
    .rounded-image3 {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    .overlay-rectangle3 {
        position: absolute;
        top: 24.9rem; /* 1.12rem + 17% */
        left: 30.1rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .overlay-number3 {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 2.6rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 31rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }

    .rounded-image4 {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    .overlay-rectangle4 {
        position: absolute;
        top: 36.4rem; /* 1.12rem + 17% */
        left: 30.1rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .overlay-number4 {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 2.6rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 42.4rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }

    .rounded-image5 {
        width: 100%;
        height: 10rem; /* 6.4rem + 17% */
        margin-top: 0.5rem;
        border-radius: 1.09669rem; /* 0.9375rem + 17% */
        object-fit: cover;
        object-position: center;
        position: relative;
    }
    
    .overlay-rectangle5 {
        position: absolute;
        top: 47.9rem; /* 1.12rem + 17% */
        left: 30.1rem; /* 18.7rem + 17% */
        border-radius: 1.09669rem;
        bottom: 0;
        width: 17.4%; /* 20% + 17% */
        height: 9.99rem; /* 6.5rem + 17% */
        background-color: #FF3AA3;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .overlay-number5 {
        color: white;
        font-size: 2.6rem;
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 2.6rem;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 4.3875rem;
        top: 53.9rem; /* 11.6rem + 17% */
        left: 2.19375rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-stroke: 0.073125rem;
        stroke-width: 0.073125rem;
    }
}


@media (max-width: 1366px){
    .ranking-containerSM {
        width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* Apilar los elementos uno debajo del otro */
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        
        position: absolute; /* Permitir que los botones se puedan mover libremente */
        top: 1.1875rem; /* Ajusta la posición vertical de los botones */
        left: 50rem; /* Ajusta la posición horizontal de los botones */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.25rem */
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 10.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 115px;
        left: 435px; /* Ajustado de 50rem */   
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 10.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 115px;
        left: 577px; /* Ajustado de 50rem */
        
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative; /* Permitir movimiento libre de la caja */
        top: 155px; /* Ajustado de 6.25rem */
        left: 935px; /* Ajustado de 50rem */
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FFCA50;
        padding: 1.125rem; /* Ajustado de 1.25rem */
        border-radius: 0; /* Sin redondeo en las esquinas */
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 24.7rem; /* Ajustado de 37.5rem */
        height: 41.3rem; /* Ajustado de 37rem */
        
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 18.7rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.8rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    
    /* ------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle2 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 18.7rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number2 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.8rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 13rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 22222222------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image3 {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle3 {
        position: absolute;
        top: 17.6rem; /* 20px */
        left: 18.7rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number3 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.8rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 21rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 4444------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image4 {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle4 {
        position: absolute;
        top: 25.6rem; /* 20px */
        left: 18.7rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number4 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.8rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 29rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 55555------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image5 {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle5 {
        position: absolute;
        top: 33.6rem; /* 20px */
        left: 18.7rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number5 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.8rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 37rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
}

@media (max-width: 1024px){
    .ranking-containerSM {
        width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* Apilar los elementos uno debajo del otro */
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        
        position: absolute; /* Permitir que los botones se puedan mover libremente */
        top: 1.1875rem; /* Ajusta la posición vertical de los botones */
        left: 50rem; /* Ajusta la posición horizontal de los botones */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.25rem */
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 115px;
        left: 170px; /* Ajustado de 50rem */   
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.4375rem */
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 115px;
        left: 272px; /* Ajustado de 50rem */
        
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative; /* Permitir movimiento libre de la caja */
        top: 155px; /* Ajustado de 6.25rem */
        left: 670px; /* Ajustado de 50rem */
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FFCA50;
        padding: 1.125rem; /* Ajustado de 1.25rem */
        border-radius: 0; /* Sin redondeo en las esquinas */
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 18.7rem; /* Ajustado de 37.5rem */
        height: 41.3rem; /* Ajustado de 37rem */
        
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.7rem; /* 20px */
        left: 13.9rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    
    /* ------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle2 {
        position: absolute;
        top: 9.7rem; /* 20px */
        left: 13.9rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number2 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 13rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 22222222------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image3 {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle3 {
        position: absolute;
        top: 17.7rem; /* 20px */
        left: 13.9rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number3 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 21rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 4444------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image4 {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle4 {
        position: absolute;
        top: 25.7rem; /* 20px */
        left: 13.9rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number4 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 29rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 55555------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image5 {
        width: 100%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle5 {
        position: absolute;
        top: 33.6rem; /* 20px */
        left: 13.9rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 20%; /* Toma todo el ancho de la imagen */
        height: 6.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number5 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 37rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
}





@media (max-width: 480px){
    .ranking-containerSM {
        width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* Apilar los elementos uno debajo del otro */
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        
        position: absolute; /* Permitir que los botones se puedan mover libremente */
        top: 1.1875rem; /* Ajusta la posición vertical de los botones */
        left: 50rem; /* Ajusta la posición horizontal de los botones */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.25rem */
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -465px; /* Ajustado de 50rem */   
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.4375rem */
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -250px; /* Ajustado de 50rem */
        
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative; /* Permitir movimiento libre de la caja */
        top: 155px; /* Ajustado de 6.25rem */
        left: 35px; /* Ajustado de 50rem */
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FFCA50;
        padding: 1.125rem; /* Ajustado de 1.25rem */
        border-radius: 0; /* Sin redondeo en las esquinas */
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 50rem; /* Ajustado de 37.5rem */
        width: 30rem; /* Ajustado de 37rem */
        height: 25.5rem; /* Ajustado de 37rem */
        
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    
    /* ------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle2 {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number2 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 22222222------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image3 {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle3 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number3 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 4444------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image4 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle4 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number4 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 55555------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image5 {
        left: 7rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle5 {
        position: absolute;
        top: 17.5rem; /* 20px */
        left: 18.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number5 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 20.9rem; /* 65px */
        left: 8.7rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
}

@media (max-width: 428px){
    .ranking-containerSM {
        width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* Apilar los elementos uno debajo del otro */
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        
        position: absolute; /* Permitir que los botones se puedan mover libremente */
        top: 1.1875rem; /* Ajusta la posición vertical de los botones */
        left: 50rem; /* Ajusta la posición horizontal de los botones */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.25rem */
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -467.8px; /* Ajustado de 50rem */   
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.4375rem */
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -252.5px; /* Ajustado de 50rem */
        
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative; /* Permitir movimiento libre de la caja */
        top: 155px; /* Ajustado de 6.25rem */
        left: 32px; /* Ajustado de 50rem */
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FFCA50;
        padding: 1.125rem; /* Ajustado de 1.25rem */
        border-radius: 0; /* Sin redondeo en las esquinas */
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 50rem; /* Ajustado de 37.5rem */
        width: 30rem; /* Ajustado de 37rem */
        height: 25.5rem; /* Ajustado de 37rem */
        
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    
    /* ------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle2 {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number2 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 22222222------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image3 {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle3 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number3 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 4444------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image4 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle4 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number4 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 55555------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image5 {
        left: 7rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle5 {
        position: absolute;
        top: 17.5rem; /* 20px */
        left: 18.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number5 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 20.9rem; /* 65px */
        left: 8.7rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
}

@media (max-width: 412px){
    .ranking-containerSM {
        width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* Apilar los elementos uno debajo del otro */
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        
        position: absolute; /* Permitir que los botones se puedan mover libremente */
        top: 1.1875rem; /* Ajusta la posición vertical de los botones */
        left: 50rem; /* Ajusta la posición horizontal de los botones */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.25rem */
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -482px; /* Ajustado de 50rem */   
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.4375rem */
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -267px; /* Ajustado de 50rem */
        
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative; /* Permitir movimiento libre de la caja */
        top: 155px; /* Ajustado de 6.25rem */
        left: 18px; /* Ajustado de 50rem */
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FFCA50;
        padding: 1.125rem; /* Ajustado de 1.25rem */
        border-radius: 0; /* Sin redondeo en las esquinas */
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 50rem; /* Ajustado de 37.5rem */
        width: 30rem; /* Ajustado de 37rem */
        height: 25.5rem; /* Ajustado de 37rem */
        
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    
    /* ------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle2 {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number2 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 22222222------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image3 {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle3 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number3 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 4444------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image4 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle4 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number4 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 55555------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image5 {
        left: 7rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle5 {
        position: absolute;
        top: 17.5rem; /* 20px */
        left: 18.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number5 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 20.9rem; /* 65px */
        left: 8.7rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
}

@media (max-width: 393px){
    .ranking-containerSM {
        width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* Apilar los elementos uno debajo del otro */
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        
        position: absolute; /* Permitir que los botones se puedan mover libremente */
        top: 1.1875rem; /* Ajusta la posición vertical de los botones */
        left: 50rem; /* Ajusta la posición horizontal de los botones */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.25rem */
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -491px; /* Ajustado de 50rem */   
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.4375rem */
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -276px; /* Ajustado de 50rem */
        
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative; /* Permitir movimiento libre de la caja */
        top: 155px; /* Ajustado de 6.25rem */
        left: 9px; /* Ajustado de 50rem */
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FFCA50;
        padding: 1.125rem; /* Ajustado de 1.25rem */
        border-radius: 0; /* Sin redondeo en las esquinas */
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 50rem; /* Ajustado de 37.5rem */
        width: 30rem; /* Ajustado de 37rem */
        height: 25.5rem; /* Ajustado de 37rem */
        
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    
    /* ------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle2 {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number2 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 22222222------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image3 {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle3 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number3 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 4444------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image4 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle4 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number4 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 55555------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image5 {
        left: 7rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle5 {
        position: absolute;
        top: 17.5rem; /* 20px */
        left: 18.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number5 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 20.9rem; /* 65px */
        left: 8.7rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
}

@media (max-width: 379px){
    .ranking-containerSM {
        width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* Apilar los elementos uno debajo del otro */
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        
        position: absolute; /* Permitir que los botones se puedan mover libremente */
        top: 1.1875rem; /* Ajusta la posición vertical de los botones */
        left: 50rem; /* Ajusta la posición horizontal de los botones */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.25rem */
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -491px; /* Ajustado de 50rem */   
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.4375rem */
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -276px; /* Ajustado de 50rem */
        
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative; /* Permitir movimiento libre de la caja */
        top: 155px; /* Ajustado de 6.25rem */
        left: 6px; /* Ajustado de 50rem */
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FFCA50;
        padding: 1.125rem; /* Ajustado de 1.25rem */
        border-radius: 0; /* Sin redondeo en las esquinas */
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 50rem; /* Ajustado de 37.5rem */
        width: 30rem; /* Ajustado de 37rem */
        height: 25.5rem; /* Ajustado de 37rem */
        
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    
    /* ------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle2 {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number2 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 22222222------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image3 {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle3 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number3 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 4444------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image4 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle4 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number4 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 55555------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image5 {
        left: 7rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle5 {
        position: absolute;
        top: 17.5rem; /* 20px */
        left: 18.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number5 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 20.9rem; /* 65px */
        left: 8.7rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
}

@media (max-width: 360px){
    .ranking-containerSM {
        width: 80%; /* Ajusta esto si deseas cambiar el ancho del contenedor principal */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* Apilar los elementos uno debajo del otro */
        align-items: flex-start;
        position: relative;
    }
    
    .tabsSM {
        display: flex;
        justify-content: flex-start;
        padding: 0;
        
        position: absolute; /* Permitir que los botones se puedan mover libremente */
        top: 1.1875rem; /* Ajusta la posición vertical de los botones */
        left: 50rem; /* Ajusta la posición horizontal de los botones */
    }
    
    .btn-semanalSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.25rem */
        background-color: #FFCA50;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -502px; /* Ajustado de 50rem */   
    }
    
    .btn-mensualSM {
        font-family: 'Myanmar Text', sans-serif;
        font-weight: bold;
        font-size: 1rem; /* Ajustado de 1.4375rem */
        background-color: #FF5650;
        color: white;
        border: none;
        cursor: pointer;
        padding: 0.5625rem 0.5625rem; /* Ajustado de 0.625rem */
        width: 8.5rem; /* Ajustado de 11.25rem */
        border-top-left-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        border-top-right-radius: 1.29375rem; /* Ajustado de 1.4375rem */
        position: absolute;
        top: 117px;
        left: -287px; /* Ajustado de 50rem */
        
    }
    
    /* Caja de contenido */
    .contentBoxSM {
        position: relative; /* Permitir movimiento libre de la caja */
        top: 155px; /* Ajustado de 6.25rem */
        left: -2px; /* Ajustado de 50rem */
        font-weight: bold;
        font-size: 1.2rem; /* Ajustado de 1.4375rem */
        background-color: #FFCA50;
        padding: 1.125rem; /* Ajustado de 1.25rem */
        border-radius: 0; /* Sin redondeo en las esquinas */
        transition: background-color 0.3s;
        margin-top: 0;
    
        max-width: 50rem; /* Ajustado de 37.5rem */
        width: 30rem; /* Ajustado de 37rem */
        height: 25.5rem; /* Ajustado de 37rem */
        
    }
    
    /* Estilos para la imagen */
    .rounded-image {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    
    /* ------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image2 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle2 {
        position: absolute;
        top: 1.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number2 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text2 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 5rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 22222222------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image3 {
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle3 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 11.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number3 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text3 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 1.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 4444------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image4 {
        left: 2rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle4 {
        position: absolute;
        top: 9.6rem; /* 20px */
        left: 26.1rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number4 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text4 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 12.9rem; /* 65px */
        left: 16.875rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
    /* 55555------------------------------------------------------------------------------ */
    
    /* Estilos para la segunda imagen */
    .rounded-image5 {
        left: 7rem;
        width: 45%;  /* Ajusta la imagen al 100% del contenedor */
        height: 6.4rem; /* Altura fija de 100px */
        border-radius: 0.9375rem; /* Esquinas redondeadas de 15px */
        object-fit: cover; /* Ajusta la imagen para que cubra el área sin deformarse */
        object-position: center; /* Centra la imagen para un corte equilibrado */
        position: relative; /* Necesario para que el texto y el rectángulo sean posicionados */
    }
    
    /* Estilos para el rectángulo */
    .overlay-rectangle5 {
        position: absolute;
        top: 17.5rem; /* 20px */
        left: 18.2rem; /* 274px */
        border-radius: 0.9375rem; /* Esquinas redondeadas en todas las esquinas */
        bottom: 0; /* Posiciona el rectángulo en la parte inferior de la imagen */
        width: 8%; /* Toma todo el ancho de la imagen */
        height: 3.4rem; /* Altura de 100px */
        background-color: #FF3AA3; /* Color de fondo del rectángulo con opacidad */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Estilos para el número sobre el rectángulo de la segunda imagen */
    .overlay-number5 {
        color: white;
        font-size: 1.875rem; /* 30px */
        font-weight: bold;
        font-family: 'Segoe UI', sans-serif;
    }
    
    /* Estilos para el texto dentro de la segunda imagen */
    .image-text5 {
        font-family: 'Segoe UI', sans-serif;
        font-size: 1.4rem; /* 35px */
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 3.75rem; /* 60px */
        top: 20.9rem; /* 65px */
        left: 8.7rem;  /* 30px */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
        -webkit-text-stroke: 0.0625rem; /* Contorno de 1px negro */
        stroke-width: 0.0625rem; /* 1px */
    }
}