/*Importar fuentes*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(../media/font/stylesheet.css);


/* CSS Reset */
.Q {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 15px;
    font-family: transducer;
    margin-bottom: 35px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 15px;
    font-family: transducer;
}
html,
body {
    width: 100%;
    height: 100%;
    font-family: "Poppins", serif !important;    
    line-height: 1.6;
}
img,
picture,
video,
canvas {
    display: block;
    max-width: 100%;
}
input,
button,
textarea,
select {
    font: inherit;
}
a {
    text-decoration: none;
    color: inherit;
}
.whatsapp-link {
    display: flex;
}

ul,
ol {
    list-style: none;
}
html,
body {
    width: 100%;
    height: 100%;
}



/*Estilos Generales*/
.navbar{
    background-color: #001733;
}
.navbar .nav-link{
    color: #FFF;
    font-size: 20px;
}
.navbar .nav-link:hover, .navbar .nav-link:active, .navbar .nav-link:focus{
    color: #25cff2;
}
.navbar-nav{
    margin: 10px;
}

.banner {
    position: relative;
    background: url(../media/img/banner.png) no-repeat center;
    background-size: cover;
    height: 720px;
    color: #FFF;
    font-weight: 600;
    font-family: 'Archia', serif !important;
}
.banner::before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 150px;
    width: 100%;    
    background: linear-gradient(180deg, rgba(0, 23, 51, 0) 0%, rgba(0, 23, 51, 1) 100%);
}
.banner .banner-content h1{
    font-size: 48px;
}
.banner .banner-content p{
    font-size: 34px;
}
.banner>.row{
    align-items: center;
    height: 100%;
}
.btn-info{
    background-color: #2094F5;
    color: #FFF;
    border-color: #2094F5;
    padding: 10px 20px 10px 55px;
    border-radius: 12px;
    background-image: url(../media/svg/ic_round-whatsapp.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    font-family: 'Archia', serif  !important;
}
.btn-info:hover, .btn-info:active, .btn-info:focus{
    color: #FFF;
}
.about{
    background-color: #001733;
    color: #FFF;
}
.about .img-about{
    background: url(../media/svg/bg-img-about.svg) no-repeat center;
    background-size: cover;
    padding: 39px 59px 62px 59px;
    margin-right: -10px;
}
.about .img-about img{    
    margin-right: 15px;
    mix-blend-mode: multiply;
}
.about .aboutUs h2{
    color: #FCE674;
    margin-bottom: 30px !important;
    font-size: 40px;
}
.partners img{
    margin: 0 auto;
}
.indicators{
    margin: 128px 0;
}
.indicators .indi-card .title{
    color: #FECC9F;
    font-family: 'Archia';
}
.indicators .indi-card .title span{
    color: #5CB1F8;
    font-size: 58px;
    font-weight: 700;
}
.indicators .indi-card p:last-of-type{
    border-left: 1px solid #003A80;
    padding-left: 15px;
}
.services{
    background-color: #E8E8E8;
    padding: 128px 12px;
}
.services .numericItem{
    margin-bottom: 45px;
}
.services .numericItem h4{
    font-size: 28px;
    font-weight: 600;
    color:#0947C5;
    margin-bottom: 15px;
    font-family: 'Archia', sans-serif !important;
}
.services .numericItem p{
    color: #333333;
}
.services .container-img-r{
    overflow: hidden;
    margin-right: -11px;
    padding: 30px 0 50px 15px;
    position: relative;
    height: 470px;
}
.services .container-img-l {
    overflow: hidden;
    margin-right: -11px;
    padding: 30px 15px 50px 0;
    position: relative;
    height: 470px;
}
.services .container-img-r .imagen-service{    
    transform: rotate(2.5deg);
    height: 412px;
    margin-right: -80px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15);
    border-radius: 30px;
    background-size: cover;
    position: absolute;
    right: 0;
    width: 100%;
}
.services .container-img-l .imagen-service {    
    transform: rotate(-2.5deg);
    height: 412px;
    margin-left: -80px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15);
    border-radius: 30px;
    background-size: cover;
    position: absolute;
    left: 0;
    width: 100%;
}
.img-s-1{
    background: url(../media/img/img-body-04.png) no-repeat center;
}
.img-s-2{
    background: url(../media/img/img-body-02.png) no-repeat center;
}
.img-s-3{
    background: url(../media/img/img-body-03.png) no-repeat center;
}
.img-s-4{
    background: url(../media/img/img-body-01.png) no-repeat center;
}
.services{
    padding: 128px 12px; 
}
.contact{
    padding: 128px 12px;
}
.contact form .btn-outline-primary{
    border-radius: 12px;
    padding: 10px 25px;
    border-color: #2094F5;
    color: #2094F5;
}
.contact form .btn-outline-primary:hover, .contact form .btn-outline-primary:active, .contact form .btn-outline-primary:focus{
    color: #FFF;
}
.contact .contact-items li{
    margin-bottom: 30px;
}
.contact .contact-items li a{
    display: flex;
    align-items: center;
}
.contact .icon-contact{
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 15px;
}
.contact .icon-contact.whatsapp{
    background: url(../media/svg/ic_round-whatsapp-contact.svg) no-repeat center;
}
.contact .icon-contact.email {
    background: url(../media/svg/ph_heart-light-contact.svg) no-repeat center;
}
.contact .icon-contact.dir {
    background: url(../media/svg/mage_users-contact.svg) no-repeat center;
}
footer{
    text-align: center;
    padding: 15px;
    background-color: #001733;
    color: #FFFFFF;
    font-size: 12px;
}

/*****************/
.form-label{
    color: #333333;
} 
.form-control{
    padding: 10px 15px;
    border-radius: 5px;
}
.main-title {
    font-family: 'Archia', sans-serif !important;
    font-size: 40px;
    font-weight: 600;
    color: #07338C;
}
.navbar-toggler-icon{
    background-image: url(../media/svg/bx-menu-alt-right.svg);
}
/***************/

/* FX */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/*Responsive*/

@media (max-width: 991px){
    .container-img-r, .container-img-l{
        display: none;
    }
    .services, .contact {
        padding: 50px 12px;
    }
    .about .img-about{
        padding: 15px 0;
        margin-right: -10px;
        background-color: #FFF;
        width: 100vw;
        margin-left: -12px;
    }
    .banner .banner-content h1, .banner .banner-content p{
        font-size: 34px;
    }
    .banner{
        height: auto;
        padding: 50px 12px;
    }
    .btn-info{
        z-index: 2;
        position: relative;
    }
    .about .aboutUs h2{
        font-size: 34px;
    }
}

/*Estilos Home*/

.banner-home {
    position: relative;
    width: 100%;
    height: 570px; /* Altura ajustable */
    background: url('../media/img/Banner_HomeBIG.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home {
        background-image: url('../media/img/Banner_HomeBIG@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content h1 {
        font-size: 60px;
        color: #001733;
        margin-bottom: 10px;
        margin-top: 15%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
    }

    .banner-content p {
        font-size: 22px;
        color: #555;
        margin-bottom: 20px;
    }

.btn-banner {
    padding: 0px 20px;
    background-color: #007BFF; /* Azul */
    color: white;
    font-size: 25px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    height: 50px;
    font-weight: bold;
    font-family: transducer !important;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom:     10px;
}

    .btn-banner:hover {
        background-color: #FD995F; /* Azul más oscuro */
        color: #1E1E1E;
    }

/*Estilos Unicos*/

.banner-unicos {
    background-color: #001733; /* Color de fondo oscuro */
    color: white; /* Texto en color blanco */
    text-align: center;
    padding: 50px 20px;
}

    .banner-unicos h2 {
        font-size: 70px;
        color: #FD995F; /* Color naranja para el título */
        margin-bottom: 40px;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
    }

.contenedor-unicos {
    display: flex;
    justify-content: space-around; /* Distribuir columnas horizontalmente */
    align-items: flex-start;
    gap: 20px; /* Espaciado entre columnas */
}

.item-unico {
    width: 30%; /* Ancho fijo para cada columna */
    text-align: center; /* Centrar texto e imágenes */
    display: flex;
    flex-direction: column; /* Organiza el contenido en columna */
    align-items: center; /* Centra horizontalmente */
    margin-bottom: 40px;
}

    .item-unico img {
        width: 250px; /* Tamaño del icono */
        height: 140px;
        margin-bottom: 15px;
    }

    .item-unico h3 {
        font-size: 25px;
        color: #FD995F; /* Color naranja */
        margin-bottom: 10px;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
    }

    .item-unico p {
        font-size: 17px;
        color: #ddd; /* Texto más claro */
        text-align: center; /* Centrar el párrafo */
    }

.icono-grande{
    width: 140px!important; /* Ancho personalizado */
    height: 140px!important; /* Altura personalizada */
    margin-bottom: 15px; /* Espaciado debajo */
}

/*Estilos Servicios*/

/* Sección principal */
.servicios-banner {
    padding: 50px 50px;
    background-color: #FFFFFF; /* Fondo blanco */
    text-align: center;
}

    .servicios-banner h2 {
        font-size: 70px;
        color: #001733;
        margin-bottom: 40px;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
    }

/* Contenedor de servicios */
.contenedor-servicios {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Espaciado uniforme */
    column-gap: 20px;
    row-gap: 50px;
}


/* Estilo de cada tarjeta */
.servicio-item {
    display: flex;
    flex-direction: column; /* Alinear elementos en columna */
    justify-content: space-between; /* Botón "Ver más" al final */
    align-items: flex-start; /* Alinear contenido al inicio */
    width: 30%; /* Ancho uniforme */
    min-height: 350px; /* Altura mínima para alinear tarjetas */
    box-sizing: border-box; /* Incluir padding y bordes */
}

/* Botón del servicio (icono + título) */
.servicio-boton {
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none; /* Quitar subrayado */
    cursor: pointer;
    transition: color 0.3s;
    text-align:left;
}

    /* Icono */
    .servicio-boton img {
        height: 95px;
        transition: all 0.3s ease; /* Transición suave */
    }

    /* Servicio 1 */
    .servicio-cloud .servicio-boton:hover img {
        content: url('../media//svg//ImplementacionC.svg'); /* Imagen hover */
    }

    .servicio-cloud .servicio-boton:hover h3 {
        color: #FD995F; /* Color del texto en hover */
    }

    /* Servicio 2 */
    .servicio-crm .servicio-boton:hover img {
        content: url('../media/svg/CRM Dynamics 365 y Office 365-Color.svg'); /* Imagen hover */
    }

    .servicio-crm .servicio-boton:hover h3 {
        color: #FD995F; /* Color del texto en hover */
    }

    /* Servicio 3 */
    .servicio-apps .servicio-boton:hover img {
        content: url('../media/svg/Desarrollo_AplicacionesC.svg'); /* Imagen hover */
    }

    .servicio-apps .servicio-boton:hover h3 {
        color: #FD995F; /* Color del texto en hover */
    }

    /* Servicio 4 */
    .servicio-outsourcing .servicio-boton:hover img {
        content: url('../media/svg/Outsourcing en gestion y soporte de aplicaciones-Color.svg'); /* Imagen hover */
    }

    .servicio-outsourcing .servicio-boton:hover h3 {
        color: #FD995F; /* Color del texto en hover */
    }

    /* Servicio 5 */
    .servicio-integraciones .servicio-boton:hover img {
        content: url('../media/svg/Desarrollo de integracionesC.svg'); /* Imagen hover */
    }

    .servicio-integraciones .servicio-boton:hover h3 {
        color: #FD995F; /* Color del texto en hover */
    }

    /* Servicio 6 */
    .servicio-capacitaciones .servicio-boton:hover img {
        content: url('../media/svg/Capacitaciones personalizadasC.svg'); /* Imagen hover */
    }

    .servicio-capacitaciones .servicio-boton:hover h3 {
        color: #FD995F; /* Color del texto en hover */
    }


    /* Cambiar el color del texto */
    .servicio-boton h3 {
        font-size: 25px;
        color: #001733; /* Color predeterminado */
        transition: color 0.3s ease; /* Transición suave */
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
    }

    /* Cambiar el color del texto al hacer hover */
    .servicio-boton:hover h3 {
        color: #FD995F; /* Nuevo color para el texto */
    }

/* Texto descriptivo */
.servicio-item p {
    font-size: 20px;
    color: #555;
    flex: 1; /* Toma el espacio disponible para empujar el botón hacia abajo */
    text-align:left;
}

.ver-mas {
    margin-top: auto; /* Empuja el enlace al final de la tarjeta */
    font-size: 17px;
    color: #05E8AD;
    text-decoration: none;
    font-weight: bold;
}


/* Botón general */
.contenedor-boton {
    text-align: center; /* Centra el botón */
    margin-top: 50px; /* Espaciado superior */
}

.btn-ver-mas {
    padding: 10px 30px;
    background-color: #007BFF; /* Color azul */
    color: white;
    font-size: 25px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s, transform 0.2s;
    font-family: Transducer;
}

    /* Efecto hover */
    .btn-ver-mas:hover {
        background-color: #FD995F; /* Azul más oscuro */
        transform: translateY(-3px); /* Efecto de elevación */
        color: #1E1E1E;
    }


/*Estilos Empresas*/

/* Banner principal */
.empresas-banner {
    background-color: #001733; /* Fondo oscuro */
    padding: 50px 20px;
    text-align: center;
}

    /* Título */
    .empresas-banner h2 {
        font-size: 70px;
        color: #FD995F; /* Color naranja */
        margin-bottom: 40px;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
    }

/* Contenedor de logos */
.empresas-contenedor {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    flex-wrap: wrap; /* Permite que los logos se acomoden si hay menos espacio */
    gap: 40px; /* Espaciado entre logos */
    margin-bottom:120px;
}

    /* Estilo de los logos */
    .empresas-contenedor img {
        height: 50px; /* Tamaño fijo */
        max-width: 150px; /* Ancho máximo */
        object-fit: contain; /* Asegura que la imagen no se deforme */
        transition: transform 0.3s; /* Efecto al pasar el mouse */
    }

        /* Efecto hover */
        .empresas-contenedor img:hover {
            transform: scale(1.1); /* Agranda el logo al pasar el mouse */
        }
    /*Estilos pimer footer*/

/* Footer */
.footer-contacto {
    background-color: #1A1A1A; /* Fondo oscuro */
    color: #FFFFFF; /* Texto blanco */
    padding: 20px 40px;
    display: flex;
    justify-content: space-between; /* Alinea contenido en los extremos */
    align-items: center;
}

/* Información de contacto */
.footer-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-family: dm-sans;
}

.contacto p {
    margin: 0 0 10px 0; /* Espaciado entre líneas */
    font-size: 25px;
    text-align: left;
    font-family: dm-sans;
}

/* Redes sociales */
.redes {
    text-align: left;
    margin-top: 62px;
}

    .redes p {
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 10px;
    }

/* Iconos alineados horizontalmente */
.redes-icons {
    display: flex; /* Alinea los íconos en fila */
    gap: 15px; /* Espaciado entre íconos */
}

    .redes-icons a img {
        width: 50px; /* Tamaño de los iconos */
        height: 50px;
        transition: transform 0.3s;
    }

        /* Efecto hover en los iconos */
        .redes-icons a img:hover {
            transform: scale(1.1); /* Efecto de agrandado */
        }

/*Estilos Footer2*/

/* Footer Copyright */
.footer-copyright {
    background-color: #F3F3F3; /* Color de fondo claro */
    padding: 10px 20px;
    text-align: center;
}

.copyright-container img {
    height: 20px; /* Ajusta el tamaño según sea necesario */
    width: auto; /* Mantiene la proporción */
}
.nav-link {
    color: #FFFFFF !important; /* Color blanco por defecto */
    transition: color 0.3s ease !important; /* Transición suave para el cambio de color */
}

    /* Cambio de color al pasar el mouse */
    .nav-link:hover {
        color: #FD995F !important; /* Color naranja */
    }

    /* Opcional: Estilo para el enlace activo */
    .nav-link.active {
        color: #FD995F !important; /* Color naranja para el enlace activo */
    }


/*Estilos Home Servicios*/

.banner-home-servicios {
    position: relative;
    width: 100%;
    height: 450px; /* Altura ajustable */
    background: url('../media/img/Banner_Servicios.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicios {
        background-image: url('../media/img/Banner_Servicios@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicios {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicios h1 {
        font-size: 60px;
        color: #001733;
        margin-bottom: 50px;
        margin-top: 15%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 50px;
    }

    /*Estilos Servicios servicios*/

.servicios-grid {
    padding: 50px 20px;
    background-color: #FFFFFF; /* Fondo blanco */
    text-align: center;
}

    .servicios-grid h2 {
        font-size: 36px;
        font-weight: bold;
        color: #001733; /* Azul oscuro */
        margin-bottom: 40px;
    }

/* Contenedor de servicios en formato grid */
.contenedor-servicios-serv {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 20px; /* Espaciado entre servicios */
    padding: 20px; /* Espaciado interno opcional */
}

/* Servicios responsivos: para pantallas más pequeñas */
@media (max-width: 768px) {
    .contenedor-servicios-serv {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas */
    }
}

@media (max-width: 480px) {
    .contenedor-servicios-serv {
        grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
    }
}

/* Cada servicio */
.servicio-item-serv {
    background-color: #001733; /* Fondo oscuro */
    color: #FFFFFF; /* Texto blanco */
    padding: 20px;
    text-align: left;
    transition: transform 0.3s, background-color 0.3s;
}

    /* Iconos */
    .servicio-item-serv img {
        width: 117px; /* Tamaño inicial del icono */
        height: 85px;
        margin-bottom: 15px;
        transition: transform 0.3s ease, filter 0.3s ease; /* Animación de cambio */
    }

    /* Efecto hover: cambia la imagen y la escala */
    .servicio-item-serv:hover img {
        transform: scale(1.2); /* Aumenta ligeramente el tamaño */
        /*filter: brightness(0.7) sepia(1) hue-rotate(20deg) saturate(300%);*/ /* Cambia los colores */
    }

    /* Títulos */
.servicio-item-serv h3 {
    font-size: 20px;
    color: #FD995F; /* Naranja */
    margin-bottom: 10px;
    font-family: transducer, sans-serif;
    font-style: normal;
    font-weight: 600;
}

    /* Descripciones */
.servicio-item-serv p {
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 15px;
    font-family: dm-sans, sans-serif;
    font-style: normal;
    font-weight: 100;
}

    /* Enlace "Ver más" */
    .servicio-item-serv .ver-mas {
        font-size: 14px;
        color: #05E8AD; /* Azul claro */
        text-decoration: none;
        font-weight: bold;
    }

    /* Hover: Resaltar servicio */
    .servicio-item-serv:hover {
        transform: translateY(-5px); /* Efecto de elevación */
        background-color: #03A0DC; /* Fondo azul claro */
    }

        .servicio-item-serv:hover h3 {
            color: #353859; /* Títulos en blanco */
        }

        .servicio-item:hover .ver-mas {
            color: #001733; /* Cambia el enlace a azul oscuro */
        }

        /* Servicio 1 */
        .servicio-CapacitacionesS:hover img {
            content: url('../media/svg/CapacitacionesS.svg'); /* Imagen hover */
        }

        /* Servicio 2 */
        .servicio-DesarrolloS:hover img {
            content: url('../media/svg/DesarrolloAS.svg'); /* Imagen hover */
        }

        /* Servicio 3 */
        .servicio-DesarrolloIS:hover img {
            content: url('../media/svg/DesarrolloS.svg'); /* Imagen hover */
        }

        /* Servicio 4 */
        .servicio-CRMS:hover img {
            content: url('../media/svg/CRMSERV.svg'); /* Imagen hover */
        }

        /* Servicio 5 */
        .servicio-ImplementacionS:hover img {
            content: url('../media/svg/Imple.svg'); /* Imagen hover */
        }

        /* Servicio 6 */
        .servicio-ImplementacionPS:hover img {
            content: url('../media/svg/Implemen.svg'); /* Imagen hover */
        }

        /* Servicio 7 */
        .servicio-GestorS:hover img {
            content: url('../media/svg/Gestor documental en SharePoint Online-Color.svg'); /* Imagen hover */
        }

        /* Servicio 8 */
        .servicio-OutsorcingS:hover img {
            content: url('../media/svg/OutsourcingS.svg'); /* Imagen hover */
        }

/*Estilos Home Servicio1*/

.banner-home-servicio1 {
    position: relative;
    width: 100%;
    height: 450px; /* Altura ajustable */
    background: url('../media/img/Banner_Capacitaciones_Personalizadas.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicio1 {
        background-image: url('../media/img/Banner_Capacitaciones_Personalizadas@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicio1 {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicio1 h1 {
        font-size: 60px;
        color: #06A0DC;
        margin-bottom: 50px;
        margin-top: 3%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

    p.subtitle-titulo {
        margin-top: 3%;
        font-weight: bold;
        font-family: Tranducer;
        color: #FD995F !important;
    }
    .banner-content-servicio1 p {
        color: #F2F2F2;
        margin-bottom: 30px;
    }


/*Estlos section 1 servicio 1*/

/* Sección de la cita */
.seccion-cita {
    background-color: #001733; /* Fondo azul oscuro */
    padding: 60px 20px; /* Espaciado interno */
    text-align: center; /* Centra el contenido */
}

/* Contenedor de la cita */
.contenedor-cita {
    max-width: 800px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centra horizontalmente */
    color: #FFFFFF; /* Texto blanco */
}

/* Texto de la cita */
.cita-texto {
    font-size: 20px; /* Tamaño de fuente */
    margin-bottom: 20px; /* Espaciado con el autor */
    font-family: dm-sans, sans-serif;
    font-style: normal;
    font-weight: 500;
}

/* Autor de la cita */
.cita-autor {
    font-size: 20px; /* Tamaño del texto */
    margin: 0;
    margin-bottom: 10px; /* Espaciado con el autor */
    font-family: dm-sans, sans-serif;
    font-style: normal;
    font-weight: 500;
}

/*Estilos Areas de capacitacion*/

/* Sección de áreas de capacitación */
.areas-capacitacion {
    padding: 40px 20px; /* Espaciado interno */
    background-color: #FFFFFF; /* Fondo blanco */
    text-align: left; /* Texto alineado a la izquierda */
}

    /* Título de la sección */
    .areas-capacitacion h2 {
        font-size: 70px; /* Tamaño de la fuente */
        font-weight: bold; /* Negrita */
        color: #FD995F; /* Color naranja */
        margin-bottom: 70px; /* Espaciado inferior */
        text-align: center; /* Alineado a la izquierda */
        font-family: Transducer;
    }

/* Lista de áreas de capacitación */
.lista-capacitacion {
    list-style-type: disc; /* Puntos de viñeta */
    margin-left: 7%; /* Espaciado izquierdo */
    padding: 0; /* Elimina relleno */
    color: #1E1E1E; /* Color de texto */
    font-size: 20px; /* Tamaño de la fuente */
    line-height: 1.8; /* Espaciado entre líneas */
    font-family: dm-sans, sans-serif;
    font-style: normal;
}

    .lista-capacitacion li {
        margin-bottom: 10px; /* Espaciado entre elementos */
    }

        .lista-capacitacion li::marker {
            font-weight: bold; /* Negrita para la viñeta */
            color: #1E1E1E; /* Color de la viñeta */
        }
/*Estilos nuestras propias plataformas*/

/* Sección de nuestra plataforma */
.nuestra-plataforma {
    background-color: #001733; /* Fondo azul oscuro */
    text-align: center; /* Centra el contenido */
    padding:7%;
}

.nuestra-plataforma h2{
    background-color: #001733; /* Fondo azul oscuro */
    color: #06A0DC; /* Texto blanco */
    text-align: center; /* Centra el contenido */
    font-size: 70px;
    font-family: Transducer;
    font-weight: 600;
}
    .nuestra-plataforma p {
        background-color: #001733; /* Fondo azul oscuro */
        color: #F2F2F2; /* Texto blanco */
        text-align: left; /* Centra el contenido */
        font-size: 20px;
        font-family: dm-sans, sans-serif;
        font-style: normal;
    }

/* Contenedor principal de la sección */
.detalle-plataforma {
    display: flex; /* Habilitar flexbox */
    align-items: center; /* Alinear verticalmente los elementos */
    justify-content: space-between; /* Separar los elementos horizontalmente */
    gap: 150px; /* Espaciado entre columnas */
    flex-wrap: wrap; /* Permite que se ajusten en pantallas pequeñas */   
    margin-top: 5%;
    margin-bottom: 5%;
}

/* Contenedor del logo */
.logo-plataforma {
    flex: 1; /* Ocupa una columna */
    text-align: center; /* Centra el logo */
    padding-left: 7%;

}

/* Contenedor del texto */
.texto-plataforma {
    flex: 2; /* Ocupa una columna más grande */
    text-align: left; /* Alinea el texto a la izquierda */
    margin-left: 10%;
}

/* Responsivo: Alinear las columnas verticalmente en pantallas pequeñas */
@media (max-width: 768px) {
    .detalle-plataforma {
        flex-direction: column; /* Cambia a diseño vertical */
        text-align: center; /* Centra todo */
    }

    .texto-plataforma {
        text-align: center; /* Ajusta el texto al centro */
    }
}


/* Botón de contacto */
.btn-contacto {
    padding: 10px 20px;
    font-size: 30px;
    background-color: #1EC6E8; /* Azul claro */
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    color: #F2F2F2;
    font-weight: bold;
    font-family: Transducer;
    

}

    .btn-contacto:hover {
        background-color: #FC995F; /* Azul más oscuro al pasar el mouse */
        color: #1E1E1E;
        font-family: Transducer;
        font-weight: bold;
    }

/*Estilos seccion acrrusel*/


/* Sección de proyectos realizados */
/* Sección de proyectos realizados */
.proyectos-realizados {
    padding: 60px 20px;
    background-color: #FFFFFF; /* Fondo blanco */
    text-align: center;
}

    /* Título */
    .proyectos-realizados h2 {
        font-size: 70px;
        color: #FD995F; /* Naranja */
        margin-bottom: 40px;
        font-family: Transducer;
        font-weight: bold;
    }

#carruselProyectos {
    margin: 0 auto; /* Centrar el carrusel */
    max-width: 800px; /* Ancho máximo del carrusel */
    position: relative; /* Para posicionar las flechas dentro del carrusel */
}

/* Imágenes dentro del carrusel */
.carousel-item img {
    max-height: 400px; /* Altura máxima de las imágenes */
    object-fit: cover; /* Ajusta la imagen al contenedor */
}

/* Flechas de navegación */
.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Ajusta el ancho del área clicable */
    position: absolute;
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta al centro vertical */
    z-index: 10; /* Asegura que estén encima de la imagen */
}

/* Flecha izquierda */
.carousel-control-prev {
    left: -30%; /* Mueve hacia fuera del carrusel */
}

/* Flecha derecha */
.carousel-control-next {
    right: -30%; /* Mueve hacia fuera del carrusel */
}


.carousel-control-prev-icon {
    background-color: transparent; /* Elimina el fondo gris predeterminado */
    border: solid 2px #001733; /* Cambia el color del borde */
    border-width: 0 4px 4px 0; /* Forma de la flecha */
    width: 50px;
    height: 50px;
    transform: rotate(135deg); /* Gira para que apunte hacia la derecha */
}

/* Flecha derecha */
.carousel-control-next-icon {
    background-color: transparent; /* Elimina el fondo gris predeterminado */
    border: solid 2px #001733; /* Cambia el color del borde */
    border-width: 0 4px 4px 0; /* Forma de la flecha */
    width: 50px;
    height: 50px;
    transform: rotate(-45deg); /* Gira para que apunte hacia la derecha */
}

/*Estilos Servicios Desarrollo de aplicaciones seccion opciones disponibles */

/* Sección de opciones disponibles */
.opciones-disponibles {
    background-color: #FFFFFF; /* Fondo blanco */
    padding: 60px 20px; /* Espaciado interno */
    text-align: center; /* Centrar el título */
}

    /* Título */
    .opciones-disponibles h2 {
        font-size: 70px;
        font-weight: bold;
        color: #FD995F; /* Naranja */
        margin-bottom: 40px;
        font-family: Transducer;
        font-weight: bold;
    }

/* Contenedor de las opciones */
.contenedor-opciones {
    display: flex; /* Habilita diseño en filas */
    justify-content: space-between; /* Espaciado entre columnas */
    gap: 150px; /* Espaciado entre columnas */
    flex-wrap: wrap; /* Ajusta las columnas en pantallas pequeñas */
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 100px;
}

/* Cada opción */
.opcion {
    background-color: #001733; /* Fondo azul oscuro */
    color: #FFFFFF; /* Texto blanco */
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 5%;
    padding-bottom: 5%;
    border-radius: 5px; /* Bordes redondeados */
    flex: 1; /* Ocupa el mismo espacio */
    max-width: 48%; /* Limita el ancho para mantener simetría */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    text-align: left;
}

    /* Títulos de las opciones */
    .opcion h3 {
        font-size: 30px;
        color: #FD995F; /* Naranja */
        margin-bottom: 15px;
        font-family: Transducer;
        font-weight: bold;
    }

    /* Texto descriptivo */
    .opcion p {
        font-size: 16px;
        line-height: 1.8; /* Espaciado entre líneas */
        margin-bottom: 15px;
    }

    /* Lista dentro de las opciones */
    .opcion ul {
        list-style-type: disc; /* Viñetas */
        padding-left: 20px; /* Sangría para las viñetas */
        font-size: 16px;
        line-height: 1.8;
    }

        .opcion ul li {
            margin-bottom: 10px; /* Espaciado entre elementos de la lista */
            font-size: 16px;
        }

/*Estilos porque elegirnos*/

/* Sección de ¿Por qué elegirnos? */
.porque-elegirnos {
    background-color: #FFFFFF; /* Fondo blanco */
    padding-left: 20px; /* Espaciado interno */
    padding-right: 20px;
    padding-top: 40px;
    text-align: center; /* Centrar el título */
}

    /* Título */
    .porque-elegirnos h2 {
        font-size: 70px;
        font-weight: bold;
        color: #FD995F; /* Naranja */
        margin-bottom: 20px;
        font-family: Transducer;
    }

/* Contenedor de características */
.contenedor-caracteristicas {
    display: flex; /* Diseño en filas */
    justify-content: center; /* Espaciado uniforme entre tarjetas */
    gap: 10px; /* Espaciado entre columnas */
    flex-wrap: wrap; /* Ajusta las columnas en pantallas pequeñas */
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 70px;
    padding-bottom: 70px;
}

/* Cada tarjeta */
.caracteristica {
    background-color: #001733; /* Fondo azul oscuro */
    color: #FFFFFF; /* Texto blanco */
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 70px;
    padding-bottom: 70px;
    flex: 1; /* Ocupa el mismo espacio */
    max-width: 55%; /* Ajusta el ancho de cada tarjeta */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    text-align: left; /* Texto alineado a la izquierda */
}

        .caracteristica h3

        {
            font-size: 25px;
            font-weight: bold;
            color: #FD995F; /* Naranja */
            margin-bottom: 10px;
            font-family: Transducer;
        }

        /* Texto descriptivo */
        .caracteristica p {
            font-size: 20px;
            line-height: 1.8; /* Espaciado entre líneas */
            font-family: dm-sans, sans-serif;
            font-style: normal;
        }




.caracteristica1 {
    background-color: #001733; /* Fondo azul oscuro */
    color: #FFFFFF; /* Texto blanco */
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 70px;
    padding-bottom: 70px;
    flex: 1; /* Ocupa el mismo espacio */
    max-width: 100%; /* Ajusta el ancho de cada tarjeta */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    text-align: left; /* Texto alineado a la izquierda */
}

    /* Títulos de las tarjetas */
    .caracteristica1 h3 {
        font-size: 25px;
        font-weight: bold;
        color: #FD995F; /* Naranja */
        margin-bottom: 10px;
        font-family: Transducer;
    }

    /* Texto descriptivo */
    .caracteristica1 p {
        font-size: 20px;
        line-height: 1.8; /* Espaciado entre líneas */
        font-family: dm-sans, sans-serif;
        font-style: normal;
    }



    /*Estilos herramientas que usamos*/

/* Sección de herramientas */
.herramientas {
    background-color: #001733; /* Fondo azul oscuro */
    padding: 60px 20px; /* Espaciado interno */
    text-align: center; /* Centrar el título */
}

    /* Título */
    .herramientas h2 {
        font-size: 70px;
        font-weight: bold;
        color: #FD995F; /* Naranja */
        margin-bottom: 40px;
        font-family: Transducer;
    }

/* Contenedor de herramientas */
.contenedor-herramientas {
    display: flex; /* Diseño en fila */
    justify-content: center; /* Centrar elementos */
    gap: 150px; /* Espaciado entre herramientas */
    flex-wrap: wrap; /* Permite que se ajusten en pantallas pequeñas */
}

/* Cada herramienta */
.herramienta {
    text-align: center; /* Centrar texto e imagen */
    color: #FFFFFF; /* Texto blanco */
    max-width: 200px; /* Ancho máximo de cada herramienta */
}

    /* Iconos */
    .herramienta img {
        width: 900px; /* Tamaño de los iconos */
        height: 220px; /* Mantiene proporción */
        margin-bottom: 10px; /* Espaciado debajo del icono */
    }

    /* Nombre de la herramienta */
    .herramienta p {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }

/*Estilos porque elegirnos 2*/

/* Sección de Por qué elegirnos */
.por-que-elegirnos {
    background-color: #FFFFFF; /* Fondo blanco */
    padding: 60px 20px;
    text-align: center;
}

    /* Título */
    .por-que-elegirnos h2 {
        font-size: 70px;
        font-weight: bold;
        color: #FD995F; /* Naranja */
        margin-bottom: 40px;
        font-family: Transducer;
    }

/* Contenedor de tarjetas */
.contenedor-tarjetas {
    display: flex;
    flex-wrap: wrap; /* Permite ajuste en pantallas pequeñas */
    gap: 30px; /* Espaciado entre tarjetas */
    justify-content: space-between;
    padding-left: 40px;
    padding-right: 40px;
}

/* Cada tarjeta */
.tarjeta {
    background-color: #001733; /* Fondo azul oscuro */
    color: #FFFFFF;
    border-radius: 5px;
    padding: 20px;
    width: calc(50% - 20px); /* Dos tarjetas por fila */
    text-align: left;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 60px;
    padding-bottom: 60px;
}

    /* Imagen de las tarjetas */
    .tarjeta img {
        height: 70px;
        margin-bottom: 15px;
    }

    /* Texto en las tarjetas */
    .tarjeta p {
        font-size: 20px;
        line-height: 1.8;
        font-family: dm-sans, sans-serif;
        font-style: normal;
    }


.areas-capacitacion p{
    text-align: center;
}

/*Estilos Banner CRM*/

.banner-home-servicio2 {
    position: relative;
    width: 100%;
    height: 480px; /* Altura ajustable */
    background: url('../media/img/CRM_Dynamics.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicio2 {
        background-image: url('../media/img/CRM_Dynamics@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicio2 {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicio2 h1 {
        font-size: 60px;
        color: #06A0DC;
        margin-bottom: 50px;
        margin-top: 5%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

.subtitle-titulo2 {
    margin-top: 2%;
    font-weight: bold;
    font-family: Tranducer;
    color: #FD995F;
}

/*Estilos segunda seccion de nosotros*/

/* Sección de Misión y Visión */
.mision-vision {
    background-color: #001733; /* Fondo azul oscuro */
    padding: 60px 20px;
    color: #FFFFFF; /* Texto blanco */
}

    /* Contenedor principal */
    .mision-vision .contenedor {
        display: flex; /* Diseño en columnas */
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        position: relative; /* Relativo para posicionar elementos hijos */
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 5%;
    }

    /* Sección Misión y Visión */
    .mision-vision .mision,
    .mision-vision .vision {
        flex: 1; /* Igual tamaño para ambas columnas */
        text-align: center;
    }

    /* Títulos */
    .mision-vision h2 {
        font-size: 50px;
        font-weight: bold;
        color: #FD995F; /* Naranja */
        margin-bottom: 20px;
    }

    /* Texto */
    .mision-vision p {
        font-size: 16px;
        line-height: 1.8;
        color: #D3D3D3; /* Blanco grisáceo */
    }

    /* Separador */
    .mision-vision .separador {
        width: 1px; /* Anchura de la línea */
        height: 80%; /* Altura de la línea */
        background-color: #FFFFFF; /* Color blanco */
        opacity: 0.5; /* Transparencia */
        position: absolute; /* Posicionamiento absoluto dentro del contenedor */
        left: 50%; /* Centrado horizontal */
        transform: translateX(-50%); /* Corrección para centrar */
    }

    /*Estilos formularios contactanos*/
    .redonder {
        border-radius: 5px;
    }
/*Estilos Banner DA*/

.banner-home-servicio3 {
    position: relative;
    width: 100%;
    height: 480px; /* Altura ajustable */
    background: url('../media/img/Banner_Desarrollo_aplicaciones.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicio3 {
        background-image: url('../media/img/Banner_Desarrollo_aplicaciones@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicio3 {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #F2F2F2;
}

    .banner-content-servicio3 h1 {
        font-size: 60px;
        color: #06A0DC;
        margin-bottom: 50px;
        margin-top: 5%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

.subtitle-titulo3 {
    margin-top: 2%;
    font-weight: bold;
    font-family: Tranducer;
    color: #FD995F;
}

/*Estilos Banner DI*/

.banner-home-servicio4 {
    position: relative;
    width: 100%;
    height: 480px; /* Altura ajustable */
    background: url('../media/img/Banner_Desarrollo_Integraciones.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicio4 {
        background-image: url('../media/img/Banner_Desarrollo_Integraciones@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicio4 {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicio4 h1 {
        font-size: 60px;
        color: #06A0DC;
        margin-bottom: 50px;
        margin-top: 5%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

.subtitle-titulo4 {
    margin-top: 2%;
    font-weight: bold;
    font-family: Tranducer;
    color: #FD995F;
}

/*Estilos Banner IP*/

.banner-home-servicio5 {
    position: relative;
    width: 100%;
    height: 480px; /* Altura ajustable */
    background: url('../media/img/Implementacion_plataforma_cloud (1).png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicio5 {
        background-image: url('../media/img/Implementación_plataforma_cloud@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicio5 {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicio5 h1 {
        font-size: 60px;
        color: #06A0DC;
        margin-bottom: 50px;
        margin-top: 5%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

.subtitle-titulo5 {
    margin-top: 2%;
    font-weight: bold;
    font-family: Tranducer;
    color: #FD995F;
}

/*Estilos Banner IPO*/

.banner-home-servicio6 {
    position: relative;
    width: 100%;
    height: 480px; /* Altura ajustable */
    background: url('../media/img/Implementacion_plataforma_cloud (1).png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicio6 {
        background-image: url('../media/img/Implementacion_plataforma_cloud (2).png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicio6 {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicio6 h1 {
        font-size: 60px;
        color: #06A0DC;
        margin-bottom: 50px;
        margin-top: 5%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

.subtitle-titulo6 {
    margin-top: 2%;
    font-weight: bold;
    font-family: Tranducer;
    color: #FD995F;
}

/*Estilos Banner GD*/

.banner-home-servicio7 {
    position: relative;
    width: 100%;
    height: 480px; /* Altura ajustable */
    background: url('../media/img/Gestor_documental_sharepoint.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicio7 {
        background-image: url('../media/img/Gestor_documental_sharepoint@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicio7 {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicio7 h1 {
        font-size: 60px;
        color: #06A0DC;
        margin-bottom: 50px;
        margin-top: 5%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

.subtitle-titulo7 {
    margin-top: 2%;
    font-weight: bold;
    font-family: Tranducer;
    color: #FD995F;
}

/*Estilos Banner O*/

.banner-home-servicio8 {
    position: relative;
    width: 100%;
    height: 480px; /* Altura ajustable */
    background: url('../media/img/Outsorcing.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicio8 {
        background-image: url('../media/img/Outsorcing@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicio8 {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicio8 h1 {
        font-size: 60px;
        color: #06A0DC;
        margin-bottom: 50px;
        margin-top: 5%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

.subtitle-titulo8 {
    margin-top: 2%;
    font-weight: bold;
    font-family: Tranducer;
    color: #FD995F;
}

/*Estilos Banner O*/

.banner-home-servicioNosotros {
    position: relative;
    width: 100%;
    height: 480px; /* Altura ajustable */
    background: url('../media/img/Nosotros_BIG.png') no-repeat center center;
    background-size: cover;
}

@media only screen and (min-resolution: 192dpi) {
    .banner-home-servicioNosotros {
        background-image: url('../media/img/Nosotros_BIG@2x.png'); /* Imagen para pantallas retina */
    }
}

.banner-content-servicioNosotros {
    width: 70%; /* Ajustar contenido al 50% del ancho */
    padding: 20px;
    color: #001733;
}

    .banner-content-servicioNosotros h1 {
        font-size: 60px;
        color: #001733;
        margin-bottom: 50px;
        margin-top: 10%;
        font-family: transducer, sans-serif;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 10px;
    }

.subtitle-tituloNosotros {
    margin-top: 2%;
    font-weight: bold;
    font-family: Tranducer;
    color: #353859;
}

/* Sección de valores */
.valores {
    text-align: center;
    padding: 60px 20px;
    background-color: #FFFFFF; /* Fondo blanco */
}

    /* Título principal */
    .valores h2 {
        font-size: 70px;
        color: #FD995F; /* Naranja */
        margin-bottom: 40px;
        font-family: Transducer;
        font-weight: bold;
    }

/* Contenedor de valores */
.valores-contenedor {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    gap: 50px; /* Espaciado entre los valores */
    flex-wrap: wrap; /* Asegura que se adapte en pantallas pequeñas */
}

/* Cada valor individual */
.valor {
    text-align: center;
    flex: 1; /* Hace que todos los valores ocupen el mismo ancho */
    max-width: 250px; /* Tamaño máximo para mantener proporciones */
}
    /* Iconos */
    .valor img {
        width: 102px; /* Tamaño del icono */
        height: 90px;
        margin: 0 auto 20px auto; /* Centra el icono */
        display: block; /* Asegura que sea tratado como bloque */
    }

    /* Títulos de valores */
    .valor h3 {
        font-size: 35px;
        color: #FD995F; /* Naranja */
        margin-bottom: 15px;
        font-weight: bold;
        font-family: Transducer;
    }

    /* Descripciones */
    .valor p {
        font-size: 14px;
        color: #333333; /* Texto oscuro */
        line-height: 1.6;
    }

/* Sección de la línea del tiempo */
.timeline-section {
    background-color: #001733;
    color: #FFFFFF;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-container {
    display: flex;
    max-width: 1200px;
    gap: 30px;
    align-items: center;
}

/* Línea del tiempo */
/* Estilo para la sección de la línea de tiempo */
.timeline-section {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #001f3f; /* Fondo oscuro */
    color: #fff;
    padding: 40px 20px;
}

/* Contenedor principal */
.timeline-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px; /* Separación entre la línea de tiempo y los detalles */
}

/* Línea del tiempo */
/* Contenedor principal */
/* Contenedor principal */
/* Contenedor principal */
.timeline-section {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #001f3f; /* Fondo oscuro */
    color: #fff;
    padding: 0px 20px;
}

/* Contenedor de la línea de tiempo */
.timeline-container {
    display: grid;
    grid-template-columns: auto 30px 1fr; /* Año, línea, detalles */
    align-items: center;
    gap: 20px; /* Separación entre columnas */
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Año grande a la izquierda */
.timeline-year {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
}

    .timeline-year h1 {
        font-size: 80px; /* Tamaño grande para el año */
        color: #FD995F;
        margin: 0;
        text-align: right;
    }

/* Línea del tiempo */
.timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Separación entre círculos */
    position: relative;
}

.circle {
    width: 20px;
    height: 20px;
    background-color: #00cc99;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    position: relative; /* Necesario para las animaciones o detalles */
}

    .circle.active {
        background-color: #ffffff; /* Cambia el color interno del círculo activo */
        border-color: #00cc99; /* Cambia el color del contorno */
        transform: scale(1.3); /* Aumenta el tamaño del círculo activo */
    }

    /* Sombras sutiles en los círculos */
    .circle:hover {
        box-shadow: 0 0 8px rgba(0, 204, 153, 0.8); /* Sombra brillante */
    }

/* Línea vertical */
/* Línea vertical de la línea de tiempo */
.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 1.5px); /* Centrar la línea en relación con los círculos */
    width: 3px; /* Grosor de la línea */
    background: linear-gradient(to bottom, #06A0DC, #06A0DC); /* Degradado de color */
    z-index:; /* Asegúrate de que los círculos estén encima */
    border-radius: 10px; /* Bordes redondeados */
}

/* Círculos en la línea */
.circle {
    width: 20px;
    height: 20px;
    background-color: #00cc99;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    position: relative; /* Necesario para que se solape correctamente con la línea */
    z-index: 1; /* Los círculos deben estar encima de la línea */
}

    .circle.active {
        background-color: #fc995f; /* Cambia el color interno del círculo activo */
        transform: scale(1.3); /* Aumenta el tamaño del círculo activo */
    }

    /* Sombras sutiles en los círculos */
    .circle:hover {
        box-shadow: 0 0 8px rgba(0, 204, 153, 0.8); /* Sombra brillante */
    }


/* Detalles del evento */
.event-details {
    text-align: left;
    max-width: 600px;
}

    .event-details h2 {
        font-size: 36px; /* Título grande */
        color: #FD995F;
        margin-bottom: 10px;
    }

    .event-details p {
        font-size: 18px; /* Ajusta el tamaño del texto */
        line-height: 1.6;
    }





.contactanos-text-center{
    margin-bottom:90px;
}


.margin-p{
    margin-bottom: 30px;
}

.margin-p2 {
    margin-bottom: 40px;
    color: #F2F2F2;
}

.margin-p3 {
    margin-bottom: 50px;
    color: #F2F2F2;
}

.margin-p4 {
    margin-bottom: 50px;
    color: #F2F2F2;
}

.margin-p5 {
    margin-bottom: 50px;
    color: #F2F2F2;
}
.margin-p6 {
    margin-bottom: 50px;
    color: #F2F2F2;
}

.margin-p7 {
    margin-bottom: 50px;
    color: #F2F2F2;
}