/* Estilos de la pagina de index */
@font-face {font-family: "LatoLatin"; 
    src: url("../fonts/LatoLatin-Regular.ttf");
} 
@font-face {font-family: "MADE Tommy Soft"; 
    src: url("../fonts/tommy/MADE Tommy Soft Bold PERSONAL USE.otf");
} /*
@font-face {font-family: "Latolatin"; 
    src: url("../fonts/LatoLatin-Bold");
} */
body{
    background-color: #fdfdfd;
}
.container-fluid{
    margin-top: 6em;
    margin-bottom: 2em;
  /*  padding: 1.2%;*/
}

.texto{
    color: #E7672B;
    font-family: 'LatoLatin';
    font-weight: bold;
    text-align: center;
    font-size: 60px;
    margin-left: 4%;
}
#texto1{
    color: #666666;
    font-family: 'LatoLatin';
   font-size: 36px;
    text-align: left;
    font-weight: bold;
    margin-left: 4%;
}
#texto2{
    color: #666666;
    font-family: 'LatoLatin';
   font-size: 21px;
    text-align: center;
    font-weight: bold;
    margin-left: 4%;
}
#gif{
    width: 100%;
    text-align: center;
}
#encabezado1{
    margin-bottom: 1%;
}
/*--- movil ---*/
@media only screen and (min-device-width : 320px) and (max-device-width : 860px) { 
    .container-fluid{
        margin-top: 7em;
    }
    #gif{
        width: 98%;
        text-align: center;
    }
    .texto{
        font-size: 45px;
        margin-left: 0%;
    }
    #texto1{
       font-size: 23px;
       margin-left: 0%;
    }
    #texto2{
       font-size: 16px;
       margin-left: 0%;
    }
    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        width: 100%;
    }
    .w-100{
   width:100% !important;
    }
    .carousel{
        margin-left: 0%;
        width: 100%;
    }
    #mapa{
        max-width: 100%;
    }
    
#clientes{
    text-align: center;
    font-family: 'LatoLatin';
    font-size: 30%;
    width: 100%;
    height: 30px;
    }
    #carruseles{
      display: none ;
    }
 
}
/* --- escritorio ---*/
@media (min-device-width: 820px) { 
    #carruselmovil{
        display: none;
    }
}

#wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #ahora{
      background-color: black;
  }
  .ahora{
    border-radius: 11px;
    border: 5px solid #E7672B;
    animation: ahora 2s linear infinite;
    animation-direction: alternate;
    z-index: 2;
    transition: all 500ms ease-in-out;
}

@keyframes ahora {
    0%   {border-color: #ff8c00; left: 25%; top: 0px; bottom: 10%; right:5%;}
    25%  {border-color: #f94d00; left: 50%; top: 0px; bottom: 15%; right:5%;}
    50%  {border-color: #ff6700; left: 50%; top: -400px;bottom: 10%; right:10%;}
    75%  {border-color: #ff7e00; left: 0px; top: -400px;bottom: 10%; right:5%;}
    100% {border-color: #fe5a1d; left: 0px; top: 0px; bottom: 10%; right:5%;}
}
.carousel{
  /*  margin-left: 8%;*/
  width: 100%;
}

/* ----- cards ------*/
.container#encabezado2 {
    max-width: 96%;
}
.card-img-top {
    position: absolute;
    top: -50px;
    left: 45%;
    margin-left: -30px;
    width: 100px !important;
    height: 90px;
  }
  
  .card {
    margin-top: 30px;
    padding-top: 30px;
  }
#herramientas{
    width: 92%;
    margin:20% 0% 7% 5%;
    border-radius: 25px;
    padding: 1%;
}
#gestion{
    width: 92%;
    margin:20% 0% 7% 5%;
    border-radius: 25px;
    padding: 1%;
}
#experiencia{
    width: 92%;
    margin:20% 0% 7% 5%;
    border-radius: 25px;
    padding: 1%;
}
li.puntos{
    text-align: left;
    font-family: 'LatoLatin';
    margin: 2% 0% 2% 2%;
}
.card-title{
    font-family: 'LatoLatin';
    margin-top: 10%;
    margin-bottom: 5%;
    font-weight: bold;
}
/* --- mapa ---*/
#mapa{
    max-width: 88%;
}
.container#encabezado3 {
    max-width: 100%;
    
}
 #clientes{
    text-align: center;
    background-color: #E7672B;
    color: white;
    width: 100%;
    font-family: 'LatoLatin';
    font-weight: bold;
    font-size: 30%;
    height: 44px;
    padding-top: 6px;
}/*
#exampleModal{
    display: contents;
}*/
/*----------------------- popup ------------------*/
.popup {
    padding: 10px;
    min-width: 300px;
    min-height: 200px;
    position: fixed;
    top: 40%;
    left: 35%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
    z-index: -1;
    /* 1px higher than the overlay layer */
    opacity: 0;
  }
  
  .overlay_canvas {
    content: "";
    position: fixed;
    /* could also be absolute */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: 0.5s;
  }
  
  .overlay_popup.popup-open .overlay_canvas,
  .popup-open .popup {
    opacity: 1;
    z-index: 11
  }
  
  .close_btn {
    position: absolute;
    top: 5px;
    right: 10px;
    padding: 10px;
    color: #000;
    outline: none !important;
    text-shadow: none;
    min-width: 1px;
    font-size: 20px;
    color: black;
  }
  
  a {
    text-decoration: none;
  }
  #popup1{
      width: 90%;
  }

/*----------------------- Banner Negocios Section ------------------*/
.cta {
    background: linear-gradient(rgba(1, 78, 168, 1), rgba(1, 78, 168, 1)), url("../img/cta-bg.jpg") fixed center center;
    background-size: cover;
    padding: 120px 0;
  }
  
  .cta h3 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
  }
  
  .cta p {
    color: #fff;
  }

  .cta h6 {
    color: #fff;
  }
  
  .cta .cta-btn {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 40px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px;
    border: 2px solid #fff;
    color: #fff;
  }
  
  .cta .cta-btn:hover {
    background: #014ea8;
    border: 2px solid #ffce01;
  }
  
  @media (max-width: 1024px) {
    .cta {
      background-attachment: scroll;
    }
  }
  
  @media (min-width: 769px) {
    .cta .cta-btn-container {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

   .custom-banner-sunmi {
            background-color: #FF6700; /* Azul oscuro del ejemplo */
            color: white;
            padding: 2.5rem 2rem; /* Aumentamos el padding vertical */
            border-radius: 0.5rem;
            margin-bottom: 2rem;
            display: flex;
            flex-direction: column; /* Para alinear el botón abajo */
            min-height: 300px; /* Altura mínima para mejor visualización */
        }

        .banner-content {
            display: flex;
            align-items: center; /* Alinear logo y texto verticalmente */
            flex-grow: 1; /* Para que el contenido ocupe el espacio y empuje el botón */
            width: 100%;
        }

        .banner-logo-placeholder {
            width: 80px; /* Ancho del logo */
            height: 80px; /* Alto del logo */
            background-color: #3a5f85; /* Azul más claro para el logo placeholder */
            border-radius: 0.3rem; /* Bordes redondeados para el logo */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: bold;
            color: white;
            margin-right: 1.5rem; /* Margen a la derecha del logo */
            flex-shrink: 0; /* Evita que el logo se encoja */
        }

        .banner-text {
            flex-grow: 1;
        }

        .custom-banner h2 {
            font-size: 1.6rem; /* Tamaño de fuente ajustado */
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 0.75rem;
        }

        .custom-banner p {
            font-size: 0.95rem; /* Tamaño de fuente del párrafo ajustado */
            margin-bottom: 1rem; /* Margen inferior del párrafo */
            line-height: 1.6;
        }

        .banner-button-container {
            text-align: center; /* Centrar el botón */
            margin-top: auto; /* Empuja el botón hacia abajo */
            padding-top: 1rem; /* Espacio antes del botón */
        }

        .btn-custom-outline {
            background-color: transparent;
            color: white; /* Azul claro para el texto del botón (LightSkyBlue) */
            border: 2px solid white; /* Borde blanco */
            font-weight: bold;
            padding: 0.6rem 1.5rem;
            border-radius: 0.25rem;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        .btn-custom-outline:hover {
            background-color: white;
            color: #0a2342; /* Color del fondo del banner al pasar el mouse */
            border-color: white;
        }

        /* Media query para mejorar la disposición en pantallas pequeñas */
        @media (max-width: 768px) {
            .banner-content {
                flex-direction: column;
                align-items: flex-start; /* Alinear a la izquierda en móvil */
                text-align: left; /* Alinear texto a la izquierda en móvil */
            }
            .banner-logo-placeholder {
                margin-right: 0;
                margin-bottom: 1rem; /* Espacio debajo del logo en móvil */
                width: 60px;
                height: 60px;
                font-size: 2rem;
            }
            .custom-banner h2 {
                font-size: 1.4rem;
            }
            .custom-banner p {
                font-size: 0.9rem;
                margin-bottom: 1.5rem;
            }
            .banner-button-container {
                width: 100%;
                text-align: center; /* Centrar botón en móvil */
            }
            .custom-banner {
                padding: 2rem 1.5rem;
            }
        }

        .custom-banner-keenon {
            background-color: #3C7DF7; /* Azul oscuro del ejemplo */
            color: white;
            padding: 2.5rem 2rem; /* Aumentamos el padding vertical */
            border-radius: 0.5rem;
            margin-bottom: 2rem;
            display: flex;
            flex-direction: column; /* Para alinear el botón abajo */
            min-height: 300px; /* Altura mínima para mejor visualización */
        }

        .banner-content {
            display: flex;
            align-items: center; /* Alinear logo y texto verticalmente */
            flex-grow: 1; /* Para que el contenido ocupe el espacio y empuje el botón */
            width: 100%;
        }

        .banner-logo-placeholder {
            width: 80px; /* Ancho del logo */
            height: 80px; /* Alto del logo */
            background-color: #3a5f85; /* Azul más claro para el logo placeholder */
            border-radius: 0.3rem; /* Bordes redondeados para el logo */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: bold;
            color: white;
            margin-right: 1.5rem; /* Margen a la derecha del logo */
            flex-shrink: 0; /* Evita que el logo se encoja */
        }

        .banner-text {
            flex-grow: 1;
        }

        .custom-banner h2 {
            font-size: 1.6rem; /* Tamaño de fuente ajustado */
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 0.75rem;
        }

        .custom-banner p {
            font-size: 0.95rem; /* Tamaño de fuente del párrafo ajustado */
            margin-bottom: 1rem; /* Margen inferior del párrafo */
            line-height: 1.6;
        }

        .banner-button-container {
            text-align: center; /* Centrar el botón */
            margin-top: auto; /* Empuja el botón hacia abajo */
            padding-top: 1rem; /* Espacio antes del botón */
        }

        .btn-custom-outline {
            background-color: transparent;
            color: white; /* Azul claro para el texto del botón (LightSkyBlue) */
            border: 2px solid white; /* Borde blanco */
            font-weight: bold;
            padding: 0.6rem 1.5rem;
            border-radius: 0.25rem;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        .btn-custom-outline:hover {
            background-color: white;
            color: #0a2342; /* Color del fondo del banner al pasar el mouse */
            border-color: white;
        }

        /* Media query para mejorar la disposición en pantallas pequeñas */
        @media (max-width: 768px) {
            .banner-content {
                flex-direction: column;
                align-items: flex-start; /* Alinear a la izquierda en móvil */
                text-align: left; /* Alinear texto a la izquierda en móvil */
            }
            .banner-logo-placeholder {
                margin-right: 0;
                margin-bottom: 1rem; /* Espacio debajo del logo en móvil */
                width: 60px;
                height: 60px;
                font-size: 2rem;
            }
            .custom-banner h2 {
                font-size: 1.4rem;
            }
            .custom-banner p {
                font-size: 0.9rem;
                margin-bottom: 1.5rem;
            }
            .banner-button-container {
                width: 100%;
                text-align: center; /* Centrar botón en móvil */
            }
            .custom-banner {
                padding: 2rem 1.5rem;
            }
        }
/* ... (tus otros estilos del banner) ... */

.banner-logo-img {
    width: 80px; /* O el ancho que prefieras */
    height: 80px; /* O 'auto' si el ancho está definido y quieres mantener proporción */
    object-fit: contain; /* Ajusta cómo se muestra la imagen */
    border-radius: 0.3rem; /* Opcional: para redondear las esquinas de la imagen */
    margin-right: 1.5rem;
    flex-shrink: 0;
}

/* Si decides NO usar más el DIV placeholder, puedes eliminar o comentar esta regla:
.banner-logo-placeholder {
    width: 80px;
    height: 80px;
    background-color: #3a5f85;
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-right: 1.5rem;
    flex-shrink: 0;
}
*/

/* ... (el resto de tus estilos) ... */

/*----------------------- End Banner Negocios Section ------------------*/