.logojuvilaccion{
    width: 220px;
    height: 60px;
    margin-left: 100px;
    margin-right: 200px;
}

.navbar{
    background-color: #043B42;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.navbar-scroll .navbar {
    background-color: #043B42;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.accordion-body{
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    text-align: left;
}

.navbar-scroll .navbar.show {
    transform: translateY(0);
}

.navbar-toggler-icon {
    filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.accordion-button:focus {
    outline: none;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    background-color: #043B42; /* O el color que prefieras */
    color: white;
}

.nav-link{
    color: white;
}

.navbar.show {
    transform: translateY(0);
}

.nav-item{
    padding-left: 100px;
}

.btn-custom {
    background-color: #F4CC00; /* Amarillo dorado */
    color: black;
    border-radius: 50px; /* Más redondeado */
    padding: 10px 30px; /* Ajusta el tamaño */
    font-size: large;
    font-weight: 500;
}


.btn-custom:hover {
    background-color: black; /* Un poco más oscuro al pasar el mouse */
    color: white;
}

.btn-custom2{
    background-color: #F4CC00; /* Amarillo dorado */
    color: black;
    border-radius: 50px; /* Más redondeado */
    padding: 10px 30px; /* Ajusta el tamaño */
    font-size: large;
    font-weight: 500;
}

.btn-custom2:hover {
    background-color: black; /* Un poco más oscuro al pasar el mouse */
    color: white;
}

.btn-custom3{
    background-color: #F4CC00; /* Amarillo dorado */
    color: black;
    border-radius: 50px; /* Más redondeado */
    padding: 10px 30px; /* Ajusta el tamaño */
    font-size: large;
    font-weight: 500;
}

.btn-custom3:hover {
    background-color: black; /* Un poco más oscuro al pasar el mouse */
    color: white;
}


.navbar-nav .nav-link {
    position: relative;
    color: white; /* Asegura que el texto sea negro */
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background-color: #FFC107; /* Amarillo Bootstrap */
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after {
    width: 100%; /* Hace que la línea se expanda completamente */
}

.video-retiro {
    width: 100%;  /* Ajusta el video al ancho del contenedor */
    max-width: 600px; /* Limita el tamaño máximo del video */
    border-radius: 10px; /* Opcional: Bordes redondeados */
    display: block;
    margin: 10px auto; /* Centrar el video */
}


.frase1{
    background-color: black;
    color: white;
    border-radius: 50px;
    align-items: center;
    text-align: center;
    padding-bottom: 10px;
    font-size: 35;
}

.frase2{
    background-color: #F4CC00;
    color: black;
    border-radius: 50px;
    align-items: center;
    text-align: center;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 35px;
}


.img-fluid{
    margin-bottom: 100px;
    margin-left: 200px;
}

/* ESTILOS - RETIRO SEGURO CON JUBILACCION */

.contenedor_subtitulo_jubilacion {

    display: flex;
}

.subtitulo_jubilacion {

    flex:1;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}


.pd-text{
    padding-left: 100px;
    padding-right: 100px;
}

.columna_cotizar_imss li{
    font-family: "Red Hat Text", sans-serif;
    font-size: 25px;
    font-weight: 500;
    font-style: normal;
}

.subtitulo_jubilacion h1 {
    font-family: "Nunito Sans", sans-serif;
    font-size: 40px;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    color: #043B42;
}

.columna_cotizar_imss_2 p{
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;

}

.subtitulo_jubilacion P {
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
}

.contenedor_retiro_seguro_informacion {
    display: flex;
    gap:20px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.columna_retiro_seguro_informnacion {
    flex:1;
    padding: 20px;
}

.subcontenedor_retiro_seguro_informacion {
    text-align: center;
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
}



.columna_retiro_seguro_informnacion h1 {
    font-size: 25px;
    text-align: center;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
}

.subcontenedor_retiro_seguro_informacion_2 {
    text-align: left;
}


.lista-servicios {
    list-style: none; /* Quita los estilos predeterminados de la lista */
    padding-left: 0;
}

.lista-servicios li {
    position: relative;
    padding-left: 25px; /* Espacio para el punto */
    margin-bottom: 10px;
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
}

.lista-servicios li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    background-color: #004f66; /* Azul oscuro */
    border-radius: 50%; /* Hace el punto circular */
}

/* Estilos - El mejor momento para tu retiro */

.contenedor_momento_retiro{
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}

.columna_momento_retiro {
    flex:1;
    text-align: center;
    padding-left: 150px;
    padding-right: 150px;
}

.columna_momento_retiro h2 {
    font-family: "Nunito Sans", sans-serif;
    font-size: 25px;
    font-weight: 50;
    font-style: normal;
    font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

.btn-ver-mas {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    margin-top: 20px;
    margin-bottom: 50px;
}

/* Estilos - Seccion modalidad 40 */

.contenedor_modalidad_40 {
    display: flex;
    padding-left: 50px;
    padding-right: 50px;
}

.columna_modalidad_40 {
    flex:1;
    gap: 20px;
}

.sub_columna_modalidad_40 {
    text-align: left;
    margin-bottom: 20px;
}

.sub_columna_modalidad_40 h2{
    font-size: 25px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
    
}

.sub_columna_modalidad_40 li{
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
}

.sub_columna_modalidad_40_2 li{
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
}

.sub_columna_modalidad_40_2 p{
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
}

.sub_columna_modalidad_40_2 {
    text-align: left;
    margin-bottom: 20px;
}

.sub_columna_modalidad_40_2 h2{
    font-family: "Nunito Sans", sans-serif;
    font-size: 25px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
    
}

.sub_columna_modalidad_40_3 {
    text-align: center;
}

/* Estilos - Seccion de testimonios */

.contenedor_testimonios {
    display: flex;
    padding-left: 40px;
    padding-right: 40px;
    gap: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.columna_testimonios {
    flex:1;
    background-color: #EBEBEB;
    border-radius: 30px;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.columna_testimonios h2 {
    font-family: "Nunito Sans", sans-serif;
    font-size: 25px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
}

.columna_testimonios p {
    font-family: "Red Hat Text", sans-serif;
    font-size: 15px;
    font-weight: 200;
    font-style: normal;
    text-align: justify;
}

.img-per{
    height:170px;
}



.abajo-lo-que-dicen{
    flex:1;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.abajo-lo-que-dicen h2{
        font-family: "Nunito Sans", sans-serif;
        font-size: 30px;
        font-weight: 600;
        font-style: normal;
        font-variation-settings:
        "wdth" 100,
        "YTLC" 500;
        color: #043B42;
}

/* Estilos - Seccion por que es importante cotizar en el IMMS*/

.contenedor_cotizar_imss {
    display: flex;
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 20px;
    gap: 20px;
}

.columna_cotizar_imss {
    flex:1;
}

.columna_cotizar_imss h2 {

    font-family: "Nunito Sans", sans-serif;
    font-size: 25px;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;

}

.columna_cotizar_imss li {
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    margin-right: 35px;
}

.subtitulo_jubilacion button{
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
}

.columna_cotizar_imss_3{
    flex:1;
    text-align: center;
    border-radius: 30px;
    padding-top: 50px;
}

.columna_cotizar_imss_3 p{
    font-family: "Red Hat Text", sans-serif;
    font-size: 18px;
    font-style: normal;
    padding-left: 6px;
    padding-bottom: 10px;
    padding-top: 30px;
}


.columna_cotizar_imss_2 {
    flex:1;
    text-align: center;
    border-radius: 30px;
    padding-top: 0px;
}

.columna_cotizar_imss_2 img{
    width: 350px;
    border-radius: 30px 30px 0 0;
}

.columna_cotizar_imss_2_2 {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);  /* Sombra suave */
    padding-bottom: 30px;
    border-radius: 0 0 30px 30px ;
    width: 350px;
    margin-left: 180px;
    margin-top: -2px;
}

.columna_cotizar_imss_2_2 img{
    width: 150px;
    border-radius: 0;
    margin-top: 10px;
}



.columna_cotizar_imss_2 p {
    font-family: "Red Hat Text", sans-serif;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #043B42;
}

.btn-custom_imss {
    background-color: #F4CC00; /* Amarillo dorado */
    color: black;
    border-radius: 50px; /* Más redondeado */
    font-size: large;
    font-weight: 600;
}

.line {
    border: none;
    height: 2px;
    background-color: #043B42;
    margin: 10px 0;
}

/* Estilos para el pie de pagina */

.contenedor_footer {
    display: flex;
    background-color: #043B42;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 20px;
}

.columna_footer {
    flex:1;
    text-align: left;
}

.columna_footer h2{
    font-family: "Nunito Sans", sans-serif;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #EBEBEB;
}

.columna_footer p{
    color: #e9ecef;
    font-family: "Red Hat Text", sans-serif;
    font-size: 15px;
    font-weight: 200;
    font-style: normal;
}

.columna_footer h3 {
    font-family: "Nunito Sans", sans-serif;
    font-size: 25px;
    font-weight: 700;
    margin-top: 80px;
    margin-bottom: 20px;
    color: #f8f9fa;
    text-align: center;
}

.derechos_autor {
    background-color: #043B42;
    height: 25px;
}

.derechos_autor p{
    color: #adadad;
    font-family: "Red Hat Text", sans-serif;
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    text-align: center;
}

.icono_footer{
    width: 20px;
    height: 20px;
}

.elemento_footer {
    display: flex;
    gap: 10px;
}

.logo_footer {
    margin-top: 70px;
    width:300px;
    height: auto;
}


/* Cambiar el color de fondo cuando el acordeón está desplegado */
.accordion-button:focus {
    background-color: #043B42; /* Cambia el color de fondo */
    border-color: #043B42; /* Cambia el color del borde (si lo hay) */
    color: white; /* Cambia el color del texto */
}

  /* Cambiar el color de la palomita cuando el acordeón está desplegado */
.accordion-button:not(.collapsed)::after {
    color: white; /* Cambia el color de la palomita a blanco */
}

  /* Si también quieres cambiar el color cuando el acordeón está activo (cuando se hace clic en él) */
.accordion-button.collapsed {
    background-color: #f8f9fa; /* Fondo normal cuando no está seleccionado */
    color: #043B42; /* Color del texto */
}

  /* Cambiar el color de la palomita cuando el acordeón está cerrado */
.accordion-button.collapsed::after {
    color: #043B42; /* Cambia el color de la palomita a tu color deseado cuando está cerrado */
}
.accordion-button.collapsed:hover {
    background-color: #e9ecef; /* Color de fondo cuando el mouse pasa por encima */
}

a {
    color: inherit;          /* Hereda el color del elemento padre */
    text-decoration: none;   /* Elimina el subrayado predeterminado */
}

a:visited {
    color: inherit;         /* Mantiene el mismo color incluso si el enlace ha sido visitado */
}

a:hover {
    color: #003e81;         /* Cambia el color al pasar el mouse (opcional) */
}


.btn-agenda{
    align-items: start;
    margin-top: 35px;
}

.accordion-body ul {
    margin-bottom: 1px;
}



/* 📱 Móviles pequeños (≤ 480px) */
@media (max-width: 480px) {
    .img-fluid{
        margin-bottom: 50px;
        margin-left: 10px;
    }
    .frase2{
        padding-top: 10px;
        font-size: 25px;
    }

    .contenedor_retiro_seguro_informacion {
        flex-direction: column;
    }

    .columna_momento_retiro {
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn-custom {
        padding: 10px 20px; /* Ajusta el tamaño */
        font-size: 1.2rem;
        font-weight: 700;
    }

    .btn-custom2 {
        padding: 10px 20px; /* Ajusta el tamaño */
        font-size: 1.2rem;
        font-weight: 700;
    }

    .contenedor_modalidad_40 {
        flex-direction: column;
    }

    .btn-agenda{
        padding-left: 100px;
        margin-top: 50px;
        margin-bottom: 30px;
        align-items: center;
    }

    .padding-movil{
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .contenedor_testimonios {
        flex-direction: column;
    }

    .contenedor_cotizar_imss{
        flex-direction: column;
    }

    .contenedor_footer{
        flex-direction: column;
    }

    .logo_footer {
        margin-top: 20px;
        width:300px;
        height: auto;
        margin-bottom: 50px;
    }

    .columna_footer h3 {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .derechos_autor {
        background-color: #043B42;
        height: 50px;
    }

    .logojuvilaccion{
        width: 220px;
        height: 60px;
        margin-left: 10px;
        margin-right: 20px;
    }

    .btn-custom3{
        padding: 5px 15px; /* Ajusta el tamaño */
        font-size: 1.2rem;
        font-weight: 500;
    }
    .nav-item{
        padding-left: 10px;
    }

    .espacio-nav{
        margin-bottom: 10px;
    }

    .pd-text{
        padding-left: 10px;
        padding-right: 10px;
    }

    .columna_cotizar_imss_2 img{
        width: 350px;
    }

    .columna_cotizar_imss_2_2 img{
        width: 250px;
    }

    .columna_cotizar_imss_2_2 {
        width: 350px;
        margin-left: 1px;
        margin-top: -2px;
    }

    .columna_cotizar_imss_2_2 p{
        font-family: "Red Hat Text", sans-serif;
        font-size: 16px;
        font-weight: 500;
        font-style: normal;
        padding-left: 5px;
        padding-right: 5px;
    }
}










/* 📱 Teléfonos medianos (481px - 767px) */
@media (max-width: 767px) {
    .img-fluid{
        margin-bottom: 50px;
        margin-left: 10px;
    }
    .frase2{
        padding-top: 10px;
        font-size: 25px;
    }

    .contenedor_retiro_seguro_informacion {
        flex-direction: column;
    }

    .columna_momento_retiro {
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn-custom {
        padding: 10px 20px; /* Ajusta el tamaño */
        font-size: 1.2rem;
        font-weight: 700;
    }

    .btn-custom2 {
        padding: 10px 20px; /* Ajusta el tamaño */
        font-size: 1.2rem;
        font-weight: 700;
    }

    .contenedor_modalidad_40 {
        flex-direction: column;
    }

    .btn-agenda{
        padding-left: 100px;
        margin-top: 50px;
        margin-bottom: 30px;
        align-items: center;
    }

    .padding-movil{
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .contenedor_testimonios {
        flex-direction: column;
    }

    .contenedor_cotizar_imss{
        flex-direction: column;
    }

    .contenedor_footer{
        flex-direction: column;
    }

    .logo_footer {
        margin-top: 20px;
        width:300px;
        height: auto;
        margin-bottom: 50px;
    }

    .columna_footer h3 {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .derechos_autor {
        background-color: #043B42;
        height: 50px;
    }

    .logojuvilaccion{
        width: 220px;
        height: 60px;
        margin-left: 10px;
        margin-right: 20px;
    }

    .btn-custom3{
        padding: 5px 15px; /* Ajusta el tamaño */
        font-size: 1.2rem;
        font-weight: 500;
    }
    .nav-item{
        padding-left: 10px;
    }

    .espacio-nav{
        margin-bottom: 10px;
    }

    .pd-text{
        padding-left: 10px;
        padding-right: 10px;
    }

    .columna_cotizar_imss_2 img{
        width: 350px;
    }

    .columna_cotizar_imss_2_2 img{
        width: 250px;
    }

    .columna_cotizar_imss_2_2 {
        width: 350px;
        margin-left: 1px;
        margin-top: -2px;
    }

    .columna_cotizar_imss_2_2 p{
        font-family: "Red Hat Text", sans-serif;
        font-size: 16px;
        font-weight: 500;
        font-style: normal;
        padding-left: 5px;
        padding-right: 5px;
    }
}