/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

@font-face {
  font-family: 'Optimistic_Light';
  src: url() format('woff2'),
       url() format('woff');
       url() format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Optimistic_Regular';
  src: url() format('woff2'),
       url() format('woff');
       url() format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Optimistic_Bold';
  src: url() format('woff2'),
       url() format('woff');
       url() format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/****Header*/
h1,h2,h3,h4,h5,h6{
/*font-family: 'Optimistic_Bold';*/
}
p{
/*font-family: 'Optimistic_Light';*/
}

.py-10{
 padding:5rem 0 !important;
}

.pt-10{
 padding-top:5rem !important;
}

p span{
  color:#04d1bd;
}

.header-container-wrapper{
  background:#0c81fa;
}

.logo-landing{
  width: 350px;
}

.navbar{padding:0px;}
.navbar ul li{
  align-content: center;
  margin:0 5px;
  padding:20px 10px;
}
.navbar ul li a{
  
  text-align:center;
  font-weight: 600;
  font-size:14px;
  align-items: center;
  color:#FFFFFF;
  line-height: 1.2rem;
}

.navbar ul li:hover{
 background:#04d1bd;
}

@media (max-width: 991.98px) {
  .logo-landing{
    width:200px;
  }
  .navbar{
   padding:10px;
  }
  .navbar-toggler{
    border:none;
  }
  .offcanvas{
    background-color:linear-gradient(to bottom, #011d6e 0%, #0082fb 100%);
    background: linear-gradient(to bottom, #011d6e 0%, #0082fb 100%);
  }
  .offcanvas  ul li a{
    color:#FFFFFF
  }
}

/****End Header*/

.body-container-wrapper .body-container{
padding:0;
}
.hero-incmty{
  /*background:#011d6e;*/
  /*background: linear-gradient(to bottom, #011d6e, #0082fb);*/
  background: linear-gradient(to bottom, #011d6e 0%, #0082fb 100%);
  /*background: linear-gradient(180deg,rgba(1, 29, 110, 1) 0%, rgba(0, 130, 251, 1) 58%);*/

}
.hero-incmty h1{
  
  /*font-size:30px;*/
   font-size: clamp(1.5rem, 5vw, 3rem);
  color:#FFFFFF;
  font-family: 'Optimistic_Bold', sans-serif;
}
.hero-incmty h1 span, .hero-incmty p span{
  color:#04d1bd;
}
.hero-incmty p.lead{
  /*font-family: 'Optimistic_Regular', sans-serif;*/
  font-weight:400;
  font-size:1.25rem;
}
/*.hero-incmty p{
  font-weight:600;
  font-size:1.25rem;
}*/

.hero-incmty .image_hero_landing{
 max-width: 350px;
}

@media (max-width: 991.98px) {
  .hero-incmty .image_hero_landing{
   max-width: 150px;
  }
}

.logos-seccion{
 background:#011d6e;
}

.logos-seccion img.imagen_logo_tecmty{
 width:180px;
}

.logos-seccion img.imagen_logo_sec {
 width:230px;
}
.logos-seccion img.imagen_logo_sec_econ{
   width:130px;
}

@media (max-width: 575.98px) {
  .logos-seccion img.imagen_logo_tecmty{
   width:110px;
  }

  .logos-seccion img.imagen_logo_sec {
   width:140px;
  }
  .logos-seccion img.imagen_logo_sec_econ{
     width:100px;
  }
}

.call-to-action-meta{
  background:#d5ebff;
}
.call-to-action-meta a{
  width:350px;
  background:#FFFFFF;
  border:solid 1px #0064e0;
  font-size:20px;
  text-transform: uppercase;
  border-radius:30px;
  padding:15px;
  color:#011d6e;
  font-weight:600;
}
.btn-svg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* centra el texto */
  padding: 12px 36px; /* espacio para el icono */
  /*background: #011d6e;*/ /* color inicial */
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  overflow: hidden;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.btn-svg .btn-text {
  position: relative;
  z-index: 2; /* asegura que el texto quede encima del SVG */
}

.btn-svg .btn-icon {
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  transition: transform 0.5s ease;
  width: 60px;
  height: 60px;
  background: #0064e0;
  border-radius: 30px;
  border:solid 1px #0064e0;
  fill:#FFFFFF;
}

.btn-svg::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #0064e0;
  z-index: 0;
  transition: left 0.5s ease;
}

.btn-svg:hover{color:#FFF;}
.btn-svg:hover::before {
  left: 0; /* anima el fondo de izquierda a derecha */
}

.btn-svg:hover .btn-icon {
  transform: translate(calc(100% - 36px), -50%); /* mueve el icono hasta el final */
}


.de-que-trata .titulo-bg {
  background: #0064e0;
  text-transform: uppercase;
  border-radius:40px;
  color:#FFFFFF;
}

.de-que-trata p{
  color:#4d4d4d;
  font-size:20px;
}

.de-que-trata .imagen_de_que_trata{
  width:65%;
}

.de-que-trata  a.btn-svg {
    background: #04d1bd;
    border: 1px solid #0064e0;
    border-radius: 30px;
    color: #FFFFFF;
    font-size: 20px;
    padding: 15px;
    text-transform: uppercase;
    width: auto;
    padding-left: 80px;
    padding-right: 50px;
    font-weight:600;
}

.beneficios{
  background: #0082fb;
}
.beneficios h2{
  color:#ffffff;
}
.beneficios .bootcamp svg {
  width:76px;
}
.beneficios .programa svg{
  width:53px;
}
.beneficios .conexion svg{
  width:85px;
}
.beneficios .acceso svg{
  width:60px;
}
.beneficios .visibilidad svg{
  width:70px;
}

.beneficios .bootcamp, 
.beneficios .programa,
.beneficios .conexion,
.beneficios .acceso,
.beneficios .visibilidad{
  height: 55px;
  align-content: center;
}


.beneficios h5{
  color:#011d6e;
}
.beneficios p{
  color:#4d4d4d;
  font-weight: 300;
}

.premios svg{
   height:110px;
}
.premios h4{
  color:#011d6e;
}
.premios p{
  color:#4d4d4d;
  font-size:18px;
  font-weight: 300;
}

.beneficios  a.btn-svg {
    background: #FFFFFF;
    border: 1px solid #0064e0;
    border-radius: 30px;
    color: #011d6e;
    font-size: 20px;
    padding: 15px;
    text-transform: uppercase;
    width: auto;
    padding-left: 80px;
    padding-right: 50px;
    font-weight:600;
}

.beneficios  a.btn-svg .btn-icon{
  background: #04d1bd;
  border:none;
}
.beneficios .btn-svg:hover{color:#FFF;}
.beneficios a.btn-svg::before {
  background: #04d1bd;
}

.requisitos  a.btn-svg {
    background: #04d1bd;
    border: 1px solid #0064e0;
    border-radius: 30px;
    color: #FFFFFF;
    font-size: 20px;
    padding: 15px;
    text-transform: uppercase;
    width: auto;
    padding-left: 80px;
    padding-right: 50px;
    font-weight:600;
}

.requisitos .titulo-bg {
  background: #011d6e;
  text-transform: uppercase;
  border-radius:40px;
  color:#FFFFFF;
  padding-left:80px !important;
  padding-right:80px !important;
}
.requisitos p{
  font-size:18px;
  color:#4d4d4d;
   
}
.requisitos p strong{
  font-weight:700;
}
.requisitos svg{
  /*width:60px;*/
}
.requisitos .imagen_requisitos{
  width:72%;
} 

/**pasos**/
.pasos {
  background: linear-gradient(to bottom, #011d6e 0%, #0082fb 100%);
}

.pasos h2{
  color:#FFFFFF;
}

.pasos p{
  
  color:#FFFFFF;
  font-weight:300;
  padding: 10px 30px 20px;
  
}
.pasos p span{
  font-weight:700;
}

.box-step .number {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px auto;
  background: #011d6e;
  color: #04d1bd;
  font-weight: bold;
  font-size: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.box-step {
   position: relative;
   z-index: 2;
   margin-bottom: 2rem;
 }
        
.box-step .number {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px auto;
    background: #011d6e;
    color: #04d1bd;
    font-weight: bold;
    font-size: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}
        
        
        
        /* Línea que va desde el centro del 1 hasta el borde derecho */
        /*.linea-derecha {
            position: absolute;
            top: 4px; 
            left: 12%;
            right: 0;
            height:1px;
            background: #FFFFFf;
            z-index: 1;
        }*/
        
        /* Línea que va desde el borde izquierdo hasta el centro del 8 */
       /* .linea-izquierda {
            position: absolute;
            top: 4px; 
            left: 0;
            right: 12%;
            height: 1px;
            background: #FFFFFF;
            z-index: 1;
        }*/
        
        /* Contenedor para las líneas */
        /*.line-container {
            position: absolute;
            width: 100%;
            pointer-events: none;
        }*/
        
        /* Ajustes responsivos */
       /* @media (max-width: 768px) {
            .linea-derecha, .linea-izquierda {
                display: none;
            }
            
            .box-step {
                margin-bottom: 2.5rem;
            }
            
            .box-step p {
                min-height: auto;
            }
        }*/

.linea-derecha {
    position: absolute;
    top: 4px;
    left: calc(12% + 10px);
    right: calc(-50vw + 50%); /* Extiende hasta el borde derecho de la pantalla */
    height: 1px;
    background: #FFFFFF;
    z-index: 1;
}

.linea-izquierda {
    position: absolute;
    top: 4px;
    left: calc(-50vw + 50%); /* Comienza desde el borde izquierdo de la pantalla */
    right: calc(12% - 10px);
    height: 1px;
    background: #FFFFFF;
    z-index: 1;
}

.line-container {
    position: absolute;
    width: 100vw; /* Usa el ancho completo del viewport */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Asegurar que el contenedor padre no recorte el contenido */
.pasos {
    overflow: visible;
}

.pasos.container.position-relative {
    overflow: visible;
}

/* Ajustes responsivos */
@media (max-width: 1200px) {
    .linea-derecha {
        left: calc(50% + 480px);
    }
    .linea-izquierda {
        right: calc(50% + 480px);
    }
}

@media (max-width: 992px) {
    .linea-derecha {
        left: calc(50% + 360px);
    }
    .linea-izquierda {
        right: calc(50% + 360px);
    }
}

@media (max-width: 768px) {
    .linea-derecha, .linea-izquierda {
        display: none;
    }
}
        
        
/**End Pasos**/



.faqs{
  background:#d5ebff;
}
.faqs  a.btn-svg{
  width:350px;
  background:#FFFFFF;
  border:solid 1px #0064e0;
  font-size:20px;
  text-transform: uppercase;
  border-radius:30px;
  padding:15px;
  color:#011d6e;
  font-weight:600;
}

.faqs  a.btn-svg:hover{
  color:#FFF;
}

.faqs .titulo-bg {
  background: #0064e0;
  text-transform: uppercase;
  border-radius:40px;
  color:#FFFFFF;
  padding-left:80px !important;
  padding-right:80px !important; 
  
}

.faqs .accordion-item,  .faqs .accordion-button, .faqs .accordion-item button {
  border-radius: 30px !important;
}
.faqs .accordion-item button{
  background:#f2f2f2;
    font-size:20px;
  font-weight:600;
}

.faqs .accordion-item  .accordion-collapse.collapse.show{
  padding:10px 20px;
}

@media (max-width: 991.98px) {
  .faqs  a.btn-svg{
     width:250px;
  }
}

.etapas h4{
  color:#04d1bd;
  font-weight:700;
  
}

.etapas  a.btn-svg {
    background: #04d1bd;
    border: 1px solid #0064e0;
    border-radius: 30px;
    color: #FFFFFF;
    font-size: 20px;
    padding: 15px;
    text-transform: uppercase;
    width: auto;
    padding-left: 80px;
    padding-right: 50px;
    font-weight:600;
}

.etapas .btn-svg:hover{color:#FFF;}
.etapas a.btn-svg::before {
  background: #0082fb;
}
.etapas a.btn-svg .btn-icon{
background: #0082fb;
}

/****Footer****/
.footer-container{
 padding:0px;
}
footer .col-auto{
  align-content: center;
  margin-left: 30px;
    margin-right: 30px;
}
footer a img{
  width:140px;
}
footer a img.imagen_tec_logo{
  width:160px;
}
footer a img.imagen_incmty_logo{
width:110px;
}
footer a img.imagen_secihti_logo{
  width:220px;
}

footer a{
  color:#000000;
}
@media (max-width: 575.98px) {
  footer a img{
    width:90px !important;
  }
  footer a img.imagen_secihti_logo{
  width:140px !important;
}
}
/****End Footer****/