/* MENU PAGINA PRINCIPAL */
.menuContenedor {
    background-color: #0C0C0C;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    margin-top: 0;
    position: relative;
    padding-right: 60px;
}

.tituloEmpresa {
    font-family: "Dosis", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #fcfcfc;
}

.logoEmpresa {
    width: 400px;
    height: 80px;
    object-fit: contain;
}

.menu ul {
    vertical-align: middle;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 60px;
    margin-top: 20px;
}

.menu ul li {
    display: inline-block;
    position: relative; /* Necesario para posicionar el submenú */
}

.menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s ease;
}

.menu ul li a:hover {
    color: #009000;
}

.iconoFAQS {
    vertical-align: middle;
    margin-left: 5px; /* Ajusta según sea necesario */
    width: 20px; /* Ajusta el tamaño según sea necesario */
    height: 20px;
    margin-top: -4px;
    margin-right: 10px;
}


/* ESTILOS PARA EL MENU RESPONSIVO */
@media (max-width: 768px) {
    .menuContenedor {
        flex-direction: column;
        align-items: flex-start;
    }

    .logoEmpresa {
        width: 200px;
        height: auto;
    }

    .menu {
        width: 100%;
        display: none;
    }

    .menu.active {
        display: block;
    }

    .menu ul {
        flex-direction: column;
        gap: 20px;
        padding: 10px 0;
    }

    .menu ul li {
        display: block;
    }

    .iconoFAQS {
        height: 20px;
        width: auto;
    }
    

    /* Ajustes para el submenú en móviles */
    .contenedorSubMenu .subMenu {
        position: static; /* El submenú se muestra en bloque en móviles */
        display: none; /* Ocultar por defecto */
        background-color: #0C0C0C; /* Color de fondo para móviles */
    }

    .contenedorSubMenu:hover .subMenu {
        display: none; /* Desactivar hover en móviles */
    }

    .contenedorSubMenu.active .subMenu {
        display: block; /* Mostrar submenú al hacer clic */
    }

    .menuIcon {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: #fff;
        position: absolute;
        top: 20px;
        right: 20px;
    }
}

.cabecera {
    position: relative;
    height: 90vh; /* Ajusta la altura para que coincida con el video */
    overflow: hidden;
    margin-bottom: 0; /* Elimina el margen inferior */
    flex-wrap: wrap;
}

.videoFondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    margin-bottom: 0;
}

.capaOscura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 0;
    margin-bottom: 0;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .cabecera {
        flex-direction: column;
        align-items: center;
        height: auto;
    }
}


.titulares {
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    min-width: 1500px;
    max-width: 100%;
}

.titulares h1 {
    font-family: "DM Sans", serif;
    color: #fcfcfc;
    font-size: 78px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: -25px;
    white-space: nowrap;
}

.titulares h2 {
    font-family: "DM Sans", serif;
    color: #fcfcfc;
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 0;
    white-space: nowrap;
}

.titulares p {
    font-family: "DM Sans", serif;
    font-size: 19px;
    color: #fcfcfc;
    margin-bottom: 5px;
    margin-top: 0;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .titulares {
        position: relative;
        top: 10%;
        transform: none;
        left: auto;
        text-align: center;
        width: 90%;
        max-width: 400px;
    }

    .titulares h1 {
        font-size: 20px;
        padding-left: 50px;

    }

    .titulares h2 {
        font-size: 22px;
        padding-bottom: 30px;
        padding-left: 70px;
    }

    .titulares p {
        font-size: 14px;
        padding-left: 30px;
        margin-right: -20px;
    }
}

.contenedorBotonCotizacion {
    text-align: center; /* Centra el botón horizontalmente */
    margin-top: 20px; /* Espacio superior */
}

.botonCotizacion {
    background-color: #ffffff; /* Color de fondo (igual que las tarjetas) */
    color: #006a23; /* Color del texto */
    padding: 15px 30px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    text-decoration: none; /* Quitar subrayado del enlace */
    font-size: 18px; /* Tamaño del texto */
    font-weight: 800; /* Peso de la fuente (negrita) */
    font-family: "Inter", serif; /* Fuente */
    display: inline-block; /* Hacer que el botón sea un bloque en línea */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    .botonCotizacion {
        font-size: 16px; /* Reduce el tamaño del texto */
        padding: 12px 20px; /* Ajusta el tamaño del botón */
        width: 80%; /* Hace que ocupe más espacio horizontal */
        max-width: 100px; /* Limita el ancho para que no se estire demasiado */
        display: block; /* Asegura que el botón no quede flotando */
        margin: 0 auto; /* Lo centra */
        
    }

    .contenedorBotonCotizacion{
        padding-left: 40px;
    }
}

/* Efecto hover para el botón */
.cabecera .botonCotizacion:hover {
    background-color: #b8b8b8; /* Cambiar a un verde más oscuro */
}

/* SECCION PARA LAS TARJETAS */

.seccionTarjetas {
    position: relative;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2;
    margin-top: 26%;
}

.contenedorTarjetas {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 1430px;
    margin: 0 auto;
}

.tarjeta {
    background-color: #37A836;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 450px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 250px;
    text-decoration: none;
    
}

.tarjeta:hover {
    transform: translateY(-25px);
    box-shadow: 0 80px 86px rgba(0, 0, 0, 0.2);
}

.iconoTarjeta {
    width: 80px;
    height: 80px;
    margin-top: 10px;
}

.tarjeta h3 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    font-family: "Inter", serif;
}

.tarjeta p {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff;
    font-family: "DM Sans", serif;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .seccionTarjetas{
        margin-top: 35%;
    }
    .contenedorTarjetas {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Espaciado entre tarjetas */
        width: 100%;
        height: auto;
    }

    .tarjeta {
        width: 90%; /* Que no sean demasiado anchas */
        max-width: 350px;
        margin-bottom: 20px; /* Asegura espacio entre tarjetas */
    }

    .iconoTarjeta {
        width: 80px; /* Ajusta el tamaño del icono */
        height: 80px;
    }

    .tarjeta h3 {
        font-size: 30px;
    }

    .tarjeta p {
        font-size: 10px;
        padding: 5px;
    }
}


/* Reseteo de márgenes y paddings */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.secciontituloTemas{
    text-align: center;
    margin-bottom: 0; /* Alinear texto al centro */
    margin-top: 10px;
}

.seccionTemas {
    background-color: #ffffff; /* Fondo oscuro */
    padding: 5px 20px;/* Espaciado interno */
    text-align: center; /* Alinear texto al centro */
}

.contenedorTemas {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se distribuyan en varias filas */
    justify-content: space-between; /* Distribuye espacio entre las tarjetas */
    gap: 10px; /* Espacio entre las tarjetas */
    padding: 10px;
    
}

@media (max-width: 768px) {
    .contenedorTemas {
        flex-direction: column; /* Cambia la dirección a vertical */
        align-items: center; /* Centra las tarjetas */
    }

    .tarjetaTemas {
        flex: 1 1 100%; /* Ocupa el 100% del ancho */
        max-width: 90%; /* Opcional: Para que no quede pegado a los bordes */
    }
}

@media (min-width: 1024px) { /* Ajusta el ancho según necesites */
    .contenedorTemas {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columnas */
        gap: 20px; /* Espaciado entre tarjetas */
        justify-content: center; /* Centrar las tarjetas */
    }
}




.tituloSeccion h2 {
    font-family: "DM Sans", serif;
    font-optical-sizing: auto;
    font-style: 28px;
    color: #000000;
    font-size: 38px; /* Tamaño del título */
    font-weight: 700; /* Peso de la fuente (negrita) */
    margin-bottom: 0px; /* Espacio debajo del título */
    white-space: nowrap;
    margin-top: 0;
}

.circuloVerde {
    width: 80px; /* Tamaño del círculo */
    height: 80px; /* Tamaño del círculo */
    background-color: #37A836; /* Color verde */
    border-radius: 50%; /* Hacerlo circular */
    display: flex; /* Usamos flexbox para centrar el ícono */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    margin: 0 auto 10px; /* Centrar el círculo y agregar espacio debajo */
}

.logotemas {
    width: 50px; /* Tamaño del ícono */
    height: 50px; /* Tamaño del ícono */
}

.lineaVerde {
    width: 150px; /* Ancho de la línea */
    height: 2px; /* Grosor de la línea */
    background-color: #00761a; /* Color verde */
    margin: 10px auto 0; /* Centrar la línea y agregar espacio arriba */
    margin-bottom: 50px;
}

.tarjetaTemas {
    background-color: #fff; /* Fondo blanco */
    border: 3px solid #37A836; /* Borde verde */
    border-radius: 10px; /* Bordes redondeados */
    width: 100%; /* Ancho de la tarjeta */
    max-width: 280px; /* Ancho máximo de la tarjeta */
    padding: 25px; /* Espaciado interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    flex: 1 1 calc(25% - 16px); /* Cada tarjeta ocupa el 25% del ancho menos el espacio */
    margin-bottom: 10px;
}

.tarjetaTemas:hover {
    transform: translateY(-10px); /* Levantar la tarjeta ligeramente */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

/* Estilos para el marco de la imagen */
.marcoImagen {
    width: 100%; /* Ancho completo */
    height: 150px; /* Altura del marco */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
    margin-bottom: 15px; /* Espacio debajo del marco */
}

.imagenTema {
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    object-fit: cover; /* Ajusta la imagen para cubrir el marco */
}

/* Estilos para el título */
.tarjetaTemas h3 {
    font-size: 16px; /* Tamaño del título */
    font-weight: 700; /* Peso de la fuente (negrita) */
    margin-bottom: 10px; /* Espacio debajo del título */
    color: rgb(0, 0, 0);
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.tarjetaTemas h2 {
    font-size: 16px; /* Tamaño del título */
    font-weight: 700; /* Peso de la fuente (negrita) */
    margin-bottom: 10px; /* Espacio debajo del título */
    color: #333; /* Color del texto */
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* Estilos para la descripción */
.tarjetaTemas p {
    font-size: 16px; /* Tamaño del texto */
    color: #666; /* Color del texto */
    margin-bottom: 15px; /* Espacio debajo de la descripción */
    font-family: "DM Sans", serif;
    font-optical-sizing: auto;

}

/* Estilos para el botón "Ver más" */
.botonVerMas {
    background-color:#37A836; /* Fondo verde */
    color: #fff; /* Texto blanco */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Quitar subrayado */
    font-size: 16px; /* Tamaño del texto */
    font-weight: 700; /* Peso de la fuente (negrita) */
    display: inline-block; /* Hacer que el botón sea un bloque en línea */
    transition: background-color 0.3s ease; /* Transición suave */
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin-top: 10px;
}

.botonVerMas:hover {
    background-color: #009a21; /* Cambiar el color de fondo al pasar el mouse */
}

/* SECCION DE NUESTRO COMPROMISO */

.nuestroCompromiso {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin-bottom: 60px;
    margin-top: -20px;
}

.fondoParallax h1{
    font-size: 30px;
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #37A836;
}

.fondoParallax p{

    font-size: 16px; /* Tamaño del texto */
    color: #000000; /* Color del texto */   
    font-family: "DM Sans", serif;
    font-optical-sizing: auto;
    margin-bottom: -10px;
}   

.fondoParallax h2 {

    font-size: 16px; /* Tamaño del texto */
    color: #000000; /* Color del texto */   
    font-family: "DM Sans", serif;
    font-weight: 400;
    font-optical-sizing: auto;
    margin-bottom: -10px;

}

.nuestroCompromiso{
    display: flex;
    justify-content: center; /* Centra horizontalmente los elementos dentro de la sección */
    align-items: center; /* Centra verticalmente los elementos dentro de la sección */
    flex-direction: column; /* Alinea los elementos de arriba hacia abajo */
    text-align: center; /* Centra el texto dentro de los elementos */
}

/* SECCION LOGROS */

.contenedorLogros{

    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor */
    margin-top: 20px; /* Elimina el margen superior */
    align-items: center; /* Centra verticalmente los elementos dentro de la sección */
    text-align: center; /* Centra el texto dentro de los elementos */
    margin-bottom: 80px;   
    flex-wrap: wrap; 
}

.tarjetaLogros{

    background-color: #ffffff; /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    width: 100%; /* Ancho de la tarjeta */
    max-width: 280px; /* Ancho máximo de la tarjeta */
    padding: 20px; /* Espaciado interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    flex: 1 1 calc(25% - 16px); /* Cada tarjeta ocupa el 25% del ancho menos el espacio */
    margin-bottom: 10px;
    min-width: 250px; /* Define un ancho mínimo para cada columna */
    max-width: 100%; /* Evita que se agranden demasiado */

}
  
  /* Media Query para pantallas pequeñas (móviles) */
  @media (max-width: 768px) {
    .contenedorLogros {
      flex-direction: column; /* Hace que los elementos se acomoden en columna */
      align-items: center; /* Centra los elementos */
    }
  
    .tarjetaLogros {
      width: 50%; /* Ocupa la mayoría del ancho en móviles */
      max-width: 400px; /* Evita que sea demasiado ancho */
    }
  } 

.logoLogros {
    width: 70px; /* Tamaño del ícono */
    height: 70px; /* Tamaño del ícono */
    margin-bottom: 20px;
}

.tarjetaLogros h3{
    font-family: "DM Sans", serif;
    font-optical-sizing: auto;
    color: #3c3c3c;
    font-style: bold;
    font-size: 50px;
    font-weight: 1000;
    margin-top: 0;
    margin-bottom: 0;
}

.tarjetaLogros h2{
    font-family: "Dosis", serif;
    font-optical-sizing: auto;
    color: #3c3c3c;
    font-weight: 0;
    font-style: normal;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 0;
}


.marcoImagenLogros{

    width: 100%; /* Ancho completo */
    height: 150px; /* Altura del marco */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
    margin-bottom: 15px; /* Espacio debajo del marco */

}

/* Contenedor del footer */
.contenedorFooter {
    background-color: #000000;
    padding: 20px 40px; /* Reduce el padding lateral */
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se acomoden en múltiples líneas */
    justify-content: center; /* Centra las columnas */
    gap: 20px; /* Espaciado uniforme entre columnas */
    margin: 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 200px;
}

/* Ajustar el margen de las columnas */
.columnaFooter {
    flex: 1 1 200px; /* Las columnas ocupan al menos 300px y pueden crecer */
    justify-content: center;
    text-align: left;
    margin-right: 0; /* Eliminar margen extra */
}

@media (max-width: 768px) {
    .contenedorFooter {
        flex-direction: column; /* Apilar las columnas en móviles */
        align-items: center; /* Centrar columnas en móviles */
        padding-left: 50px;
    }

    .columnaFooter {
        width: 100%; /* Que ocupen todo el ancho en móviles */
        text-align: center; /* Centrar el texto */
    }

    .tituloColumna {
        text-align: center; /* Centrar los títulos */
    }
}


.columnaFooter:last-child {
    margin-right: 0; /* Elimina el margen de la última columna */
}

/* Estilos para el título de cada columna */
.tituloColumna {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 900; /* Negrita */
    font-style: normal;
    color: #37A836; /* Verde oscuro */
    text-align: left; /* Alinea el título a la izquierda */
    margin-bottom: 25px; /* Espacio debajo del título */
}

/* Estilos para la lista de cada columna */
.listaColumna {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 0;
    text-align: left; /* Alinea el texto a la izquierda */
}

.listaColumna li {
    margin-bottom: 10px; /* Espacio entre elementos de la lista */
}

.listaColumna li a {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 200; /* Peso de la fuente normal */
    font-style: normal;
    color: #ffffff; /* Texto blanco */
    text-decoration: none; /* Elimina el subrayado */
    transition: color 0.3s ease; /* Transición suave para el hover */
}

.listaColumna li a:hover {
    color: #31ff5e9f; /* Verde claro con transparencia al hacer hover */
}

.subFooter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #000;
    text-align: center;
}

.infoContacto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    gap: 10px;
}

.elementoContacto {
    display: flex;
    align-items: center;
    margin: 5px 10px;
    font-family: "Inter", serif;
    font-weight: 200;
    color: #ffffff;
    flex: 1 1 auto; /* Permite que los elementos se acomoden */
    min-width: 250px; /* Tamaño mínimo para evitar que se encojan demasiado */
    justify-content: center;
}

.elementoContacto img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

/* Media query para móviles */
@media (max-width: 768px) {
    .infoContacto {
        flex-direction: column;
        align-items: center;
    }

    .elementoContacto {
        justify-content: center;
        min-width: unset;
        width: 100%;
    }

    .social-icons {
        flex-wrap: wrap;
    }
}

.social-icons img {
    width: 20px;
    height: 20px;
}

.lineaDivisora {
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background-color: #555;
    margin: 20px 0;
}

.sitioWeb {
    color: 37A836;
    text-decoration: none;
    font-size: 14px;
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}


a {
    color: inherit;
    text-decoration: none;
}

.seccionNuestroEnfoque {
    margin-bottom: 100px;
    margin-top: 100px;
    flex-wrap: wrap;
}

.contenedorFlex{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 25%;
    margin-bottom: 50px;
}


.circuloVerde2 {
    min-width: 60px; /* Tamaño del círculo */
    height: 60px; /* Tamaño del círculo */
    background-color: #37A836; /* Color verde */
    border-radius: 50%; /* Hacerlo circular */
    display: flex; /* Usamos flexbox para centrar el ícono */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    margin-right: 30px;
}

@media (max-width: 768px) {
    .contenedorFlex {
        flex-direction: row; /* Asegura que los elementos se apilen */
        align-items: center; /* Centra los elementos */
        text-align: center; /* Centra el texto */
        padding-left: 10%; /* Reduce el margen izquierdo */
        padding-right: 10%; /* Asegura espacio a la derecha */
    }
}


.circuloVerde2 img {
    max-width: 35px; /* Ajusta el tamaño del ícono */
    height: auto; /* Altura automatica del icono */
    display: flex;
}

.seccionNuestroEnfoque h3{
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 750;
    font-style: normal;
    text-align:left;
    margin: 0;
}

.seccionNuestroEnfoque p {
    font-size: 16px; /* Tamaño del texto */
    color: #000000; /* Color del texto */
    margin-bottom: 15px; /* Espacio debajo de la descripción */
    font-family: "DM Sans", serif;
    font-optical-sizing: auto;
    text-align:left;
}
/* SECCION DE: CERTIFICADOS */

.contenedorCertificados {
    display: flex;
    margin-bottom: 120px;
    flex-wrap: wrap;
    
}

.columnaCertificados {
    flex: 1;
    min-width: 250px; /* Define un ancho mínimo para cada columna */
    max-width: 600px; /* Evita que se agranden demasiado */
    text-align: center;
    padding-right: 20px;
    padding-left: 20px;
    align-items: center;
}
  
  /* Media Query para pantallas pequeñas (móviles) */
  @media (max-width: 768px) {
    .contenedorCertificados {
      flex-direction: column; /* Hace que los elementos se acomoden en columna */
      align-items: center; /* Centra los elementos */
    }
  
    .columnaCertificados {
      width: 90%; /* Ocupa la mayoría del ancho en móviles */
      max-width: 400px; /* Evita que sea demasiado ancho */
    }

    .logoSTPS{
        padding-bottom: 80px;
        padding-top: -100px;
    }

    .logoREPSE{
        padding-bottom: 80px;
        padding-top: -100px;
    }
  } 

.columnaCertificados p {

    font-family: "DM Sans", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

}

.logoSTPS {
    display: block; /* Hace que la imagen se comporte como un bloque */
    margin: 0 auto; /* Centra horizontalmente */
    width: 80%; /* Ajusta el tamaño */
    max-width: 300px; /* Evita que sea demasiado grande */
    height: auto; /* Mantiene la proporción */
    margin-top: 80px;
}

.logoREPSE {
    display: block; /* Hace que la imagen se comporte como un bloque */
    margin: 0 auto; /* Centra horizontalmente */
    width: 45%; /* Ajusta el tamaño */
    max-width: 300px; /* Evita que sea demasiado grande */
    height: auto; /* Mantiene la proporción */
    margin-top: 40px;
}

.logoSEP {
    display: block; /* Hace que la imagen se comporte como un bloque */
    margin: 0 auto; /* Centra horizontalmente */
    width: 40%; /* Ajusta el tamaño */
    max-width: 300px; /* Evita que sea demasiado grande */
    height: auto; /* Mantiene la proporción */
    margin-top: 60px;
}

/* SECCION LO QUE PODEMOS LOGRAR */

.contenedorLoQuePodemosLograr { 
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.contenedorLoQuePodemosLograr_2 { 
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.columnaLoQuePodemosLograr {
    flex: 1;
    padding-left: 60px;
    padding-right: 60px;
    min-width: 250px; /* Define un ancho mínimo para cada columna */
    max-width: 100%; /* Evita que se agranden demasiad*/
}

.columnaLoQuePodemosLograr_2 {
    flex: 1;
    padding-left: 60px;
    padding-right: 60px;
    min-width: 250px; /* Define un ancho mínimo para cada columna */
    max-width: 43%; /* Evita que se agranden demasiad*/
}

  
  /* Media Query para pantallas pequeñas (móviles) */
  @media (max-width: 768px) {
    .contenedorLoQuePodemosLograr {
      flex-direction: column; /* Hace que los elementos se acomoden en columna */
      align-items: center; /* Centra los elementos */
    }
  
    .columnaLoQuePodemosLograr {
      width: 90%; /* Ocupa la mayoría del ancho en móviles */
      max-width: 300px; /* Evita que sea demasiado ancho */
      margin-bottom: 20px;
      padding-right: 50px;
    }

    .contenedorLoQuePodemosLograr_2 {
        flex-direction: column; /* Hace que los elementos se acomoden en columna */
        align-items: center; /* Centra los elementos */
    }
    
    .columnaLoQuePodemosLograr_2 {
        width: 90%; /* Ocupa la mayoría del ancho en móviles */
        max-width: 300px; /* Evita que sea demasiado ancho */
        padding-right: 50px;
    }
    
  } 

.columnaLoQuePodemosLograr h1 {
    font-family: "Inter", serif;
    font-size: 25px;
    font-weight: 650;
    font-style: normal;
    text-align: left;
}

.columnaLoQuePodemosLograr p{
    font-family: "DM Sans", serif;
    font-size: 15px;
    font-weight: 380;
    font-style: normal;
    text-align: left;
}

.columnaLoQuePodemosLograr_2 h1 {
    font-family: "Inter", serif;
    font-size: 25px;
    font-weight: 650;
    font-style: normal;
    text-align: left;
}

.columnaLoQuePodemosLograr_2 p{
    font-family: "DM Sans", serif;
    font-size: 15px;
    font-weight: 380;
    font-style: normal;
    text-align:left;
}