/***************** ESTILOS GENERALES *********************/
*,
*::before,
*::after {
  box-sizing: border-box;
}

.is-loading {
    opacity: 0;
    pointer-events: none; /* Evita que el usuario interactúe antes de que cargue */
}

html, body{
    font-size: 10px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-family: 'ClashGrotesk-Variable', sans-serif;
    background: #fefaf6;
    scroll-behavior: smooth; /* smooth nativo en navegadores modernos */
        transition: opacity 0.8s ease-in-out;

}

.container{
    width: 70%;
    max-width: 1345px;
}

h1, h2, h3, h4, h5{
    color:#1c2731;
    font-weight: 500;
    line-height: 1.5;
}

p{
    color: #283741;
    line-height: 1.6;
    font-weight: 450;
}

li{

}

a{
}

img{
    max-width: 100%;
    height: auto;
}

.resaltado{
    font-size: 1.4em;
    padding: 3px 7px;
    border-radius: 4px;
    background: #fe6037;
    color: white;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 13px auto;
    display: inline-block;
}

.resaltado2{
    font-size: 1.3em;
    padding: 3px 7px;
    border-radius: 4px;
    background: white;
    color: #fe6037;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 10px auto;
    display: inline-block;
}

.cta-1{
    background: #fe6037;
    color: white;
    padding: 25px 25px;
    border-radius: 120px;
    font-size: 1.6em;
    font-weight: 500;
    text-decoration: none;
    line-height: 0;
}

.cta-2{
    background: white;
    color: #293d4b;
    border: 1px solid #293d4b;
    padding: 25px 25px;
    border-radius: 120px;
    font-size: 1.6em;
    font-weight: 500;
    text-decoration: none;
    line-height: 0;
}

.cta-3{
    background: white;
    color: #fe6037;
    border: 1px solid #fe6037;
    padding: 25px 25px;
    border-radius: 120px;
    font-size: 1.6em;
    font-weight: 500;
    text-decoration: none;
    line-height: 0;
}

.titulo{
    font-size: 5.8em;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.03;
}

.titulo2{
    font-size: 5.8em;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.03;
    color: white;
}

.ctas{
    margin: 35px 0;
    display: block;
    gap:15px;
    display: flex;
    flex-direction: row;
}

.link-active{
    color: #fe6037!important;
}

.back{
    color: white;
    position: relative;
    z-index: 6;
    font-size: 1.8em;
}

.back a{
    color: white;
    text-decoration: none;

}

.beneficios-garantia img{
    border-radius: 10px;
    max-width: 520px;
    margin: 25px;
}

.cta-1:hover {
    background: #ff7a50; /* un ligero aclarado del naranja */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* sombra suave */
    transition: all 0.3s ease;
}

.cta-2:hover {
    background: #f0f0f0; /* fondo apenas más gris */
    color: #293d4b;       /* mantiene el color del texto */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* sombra muy ligera */
    transition: all 0.3s ease;
}

.cta-3:hover {
    background: #fff5f0;        /* ligero tono anaranjado suave */
    box-shadow: 0 4px 10px rgba(254, 96, 55, 0.1); /* sombra delicada */
    transform: translateY(-2px); /* leve elevación */
    transition: all 0.3s ease;

}

/***************************** HEADER ************************/
.header-principal{
    display: flex;
    margin: 10px 0;
    justify-content: center;
    position: fixed;
    width: 100%;
    z-index: 25500;
    max-width: 2300px;
    justify-self: center;
}

.header-principal nav{
    display: flex;
    align-items: center;
    gap:45px;
    background: #faebdc;
    background: white;
    border-radius: 100px;
    padding: 10px;
    width: 75%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;    
  position: relative;
  justify-content: space-between;
}

.header-principal nav img{
    max-width: 160px;
    margin-left: 5px;
}

.header-principal nav ul{
    display: flex;
    flex-direction: row;
    gap:25px;
    flex: 1;
}

.header-principal ul li a{
    font-size: 1.6em;
    font-weight: 500;
    color: #1c2731;
    text-decoration:none;
    transition: all 0.1s ease;
}

.header-principal ul li a:hover{
    color: #fe6037;    
}

.header-cta{
  align-self: flex-end;   /* fuerza alineación al final vertical si el nav fuera más alto */
    padding: 20px 25px;
    vertical-align: middle;
}

.header-cta i{
    padding-right: 7px;
    font-size: 1.1em;
}

/* Dropdown */
.header-principal nav ul li.dropdown {
    position: relative;
}

.header-principal nav ul li .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px;
    padding: 10px 0;
    min-width: 220px;
    z-index: 999;
}

.header-principal nav ul li .dropdown-menu li {
    width: 100%;
}

.header-principal nav ul li .dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 1.4em;
    font-weight: 400;
    color: #262121;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover del dropdown */
.header-principal nav ul li .dropdown-menu li a:hover {
    background: #f3f3f3;
    color: #000;
    color: #fe6037;    
    border-radius: 6px;
}

/* Mostrar en hover */
.header-principal nav ul li.dropdown:hover .dropdown-menu {
    display: block;
}

/* Ajuste del ícono caret */
.header-principal nav ul li.dropdown > a i {
    margin-left: 6px;
    font-size: 0.8em;
    transition: all 0.1s ease;
}

/* Animación: rota caret al hacer hover */
.header-principal nav ul li.dropdown:hover > a i {
    transform: rotate(180deg);
    color: #fe6037;    
}

.nav-toggle {
    display: none;
}

.side-mobile {
    display: none;
}

/* Estilos para el botón de cierre (dentro del menú side-mobile) */
.nav-close {
    display: none; /* Oculto por defecto en desktop */
}
/****************************************************************************/
/*********************************** HOME ***********************************/
/**************************************************************************/
/***************************** HOME- INICIO ******************************/
.home-inicio{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
/*    padding-bottom: 120px;*/

}

.home-inicio .container{
    margin: 9% auto 65px auto;
    display: flex;
    flex-direction: row;
}
/*

.home-inicio .container img{
    min-width: 550px;
} 
*/

.home-inicio .bloque-imagen {
/*    max-width: 1100px;*/
    margin: 0 auto;
    padding: 2em 1em;
      width: 60%;
  }

.bloque-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 1em;
  grid-template-areas:
    "counter foto-vertical"
    "partner foto-vertical"
    "foto-horizontal foto-horizontal";
}

/* Nota: Se mantiene .bloque-item, pero se puede eliminar si no se usa en otros lugares.
   El fondo naranja se evita al no aplicar esta clase a los contenedores de fotos.
*/
.bloque-item {
  background: #f2613c;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* Counter */
.bloque-counter {
  grid-area: counter;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 25px;
}

.counter-content img {
  margin-bottom: 0.8em;
  max-width: 100px;
}

.bloque-counter span {
  font-size: 4em;
  font-weight: 500;
  color: #fae8d7;
  padding-top: 25px;
  display: block;
}

.counter-texto {
  font-size: 1.7em;
  font-weight: 500;
  color: #fae8d7;
  display: block;
  line-height: 1.3em;
  padding: 0 15px;
  margin-top: -10px;
}

.counter-texto p {
  font-size: 4.5em;
  font-weight: 500;
  color: #fae8d7;
  display: block;
}

/* Partner */
.bloque-partner {
  grid-area: partner;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 25px 30px 25px;
  background: #20293c;
}

.bloque-partner img {
    width: 100%;
    max-width: 185px;
    height: auto;
}

/* Foto vertical */
.bloque-foto-vertical {
  grid-area: foto-vertical;
  min-height: 300px;
  background: transparent; /* Se asegura de que no haya fondo */
}

/* Foto horizontal */
.bloque-foto-horizontal {
  grid-area: foto-horizontal;
  min-height: 200px;
  background: transparent; /* Se asegura de que no haya fondo */
}

/* Slider efecto fade */
.slider-fotos {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider-fotos img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
  opacity: 0;
  /* Se aumenta la duración de la animación para un cross-fade más suave */
  animation: fade 12s infinite;
}

.slider-fotos img:nth-child(1) {
  animation-delay: 0s;
}

.slider-fotos img:nth-child(2) {
  /* La segunda imagen comienza a aparecer a la mitad de la animación de la primera */
  animation-delay: 6s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1; /* La imagen se vuelve completamente visible */
  }
  75% {
    opacity: 1; /* Se mantiene visible por más tiempo */
  }
  100% {
    opacity: 0;
  }
}


.home-inicio h1 {
  font-size: 8em;
  font-weight: 500;
  letter-spacing: -1px;
  max-width: 1000px;
  line-height: 1.03;
}

.home-inicio h2 {
  font-size: 2em;
  margin: 35px 0 45px 0;
  max-width: 700px;
    padding-right: 25px;
}

.home-inicio .ctas {
  margin: 35px 0 25px 0;
  display: block;
  gap: 15px;
  display: flex;
  flex-direction: row;
}



/***************************** HOME- LOGOS PARTNERS ******************************/
.home-logos-partner{
    background: #fe6037;
    padding: 80px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.home-logos-partner .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.home-logos-partner .titulo{
    color: white;
    text-align: center;
    margin-bottom: 40px;
    font-size: 5.2em!important;
    max-width: 800px;
}

.carousel {
  overflow: hidden;
  width: 100%;
  margin: 25px 0;
}

.carousel-track {
    display: flex;
    gap: 65px;
    /* La animación debe moverlo un 50% de su ancho total para un loop perfecto */
    animation: scroll 65s linear infinite;
    justify-content: flex-start; /* Cambia a flex-start */
    width: max-content; /* Mantenemos max-content para asegurar el ancho total de los logos */
}

.carousel-track img {
    height: 25px;
    flex-shrink: 0;
}

/* Keyframes para la animación de carrusel */
@keyframes scroll {
  /* Al 0%, la posición inicial es 0 */
  0% {
    transform: translateX(0);
  }
  /* Al 100%, lo movemos el 50% de su ancho total. 
     Esto mueve exactamente un set de logos, logrando un loop sin saltos. */
  100% {
    transform: translateX(-50%); 
  }
}

/* Opcional: Para pausar la animación al pasar el ratón (útil en desktop) */
.carousel:hover .carousel-track {
  animation-play-state: paused;
}

.trusted{
    font-weight: 600;
    font-size: 1.2em;
    margin-top: 5px;
    text-align: right;
    display: block;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/***************************** HOME- SOBRE NOSOTROS ******************************/
.home-sobre-nosotros{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 150px 0 120px 0;
    background: white;
}

.home-sobre-nosotros .container{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.home-sobre-nosotros .container>div:nth-child(1){
    padding-right: 85px;
}

.home-sobre-nosotros .titulo{
    font-size: 5.4em;
}

.box-sobre-nosotros-historia-img-compuesto {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap:15px;
}

.box-sobre-nosotros-historia-img-compuesto img{
    max-width: 250px;
    
}

.home-sobre-nosotros img{
    border-radius: 10px;
    width: 1350px; 
}

.home-sobre-nosotros p{
    font-size: 2em;
    margin: 35px 0;
}

.home-sobre-nosotros ul li {
  font-size: 1.7em;
  font-weight: 450;
  list-style: none;
  margin: 25px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Cambia el selector de 'span' a 'i' para aplicar los estilos a los íconos */
.home-sobre-nosotros ul li i {
  background: #fe6037;
  padding: 5px 5px 4px 5px;
  border-radius: 100%;
  vertical-align: middle;
  margin-right: 6px;
  font-size: 12px; /* Este tamaño puede que necesite ajuste para el ícono de Font Awesome */
  color: white;
}

/***************************** HOME- SERVICIOS ******************************/
.home-servicios{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 0;
}

.home-servicios .container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-servicios .container .titulo{
    margin-bottom: 40px;    
    text-align: center;
}

.home-servicios .container .cajas-servicio {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* <-- Esta es la clave */
    justify-content: space-between;
    gap: 25px;
    width: 100%;
}

.home-servicios .container .caja-servicio {
    flex: 1;
    background: white;
    padding: 25px;
    border-radius: 10px;
    /* Elimina el min-height: 500px; */
    justify-content: space-between;
    display: flex;
    border: 1px solid #fe6037;
    flex-direction: column;
    position: relative;
}

.home-servicios .container .caja-servicio div{
    padding-bottom: 10px;
    border-bottom: 1px solid #fe6037;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.home-servicios .container .caja-servicio h3{
    font-size: 2.4em;
    font-weight: 500;
    color: #fe6037;
}

.home-servicios .container .caja-servicio .flecha-servicio{
    font-size: 3.2em;
    font-weight: 500;
    color: #fe6037;
  transform: rotate(45deg); /* rota 45 grados hacia arriba a la derecha */
}

.home-servicios .container .caja-servicio .flecha-servicio i{
  transform: rotate(15deg); /* rota 45 grados hacia arriba a la derecha */
}

.home-servicios .container .caja-servicio p{
    font-size: 1.8em;
    font-weight: 450;
    color: #283741;
    z-index: 10;
    padding-top: 15px;
}

.home-servicios .container .caja-servicio img{
    border-radius: 10px;                
    margin: 15px auto;
    max-height: 150px;
    width: 100%;
    object-fit: cover;
/*    display: none;*/
}

.home-servicios .container .caja-servicio .cta-servicio{
    text-align: center;
    margin: 25px 0 15px 0;
    font-size: 1.6em;
    align-self: flex-end;
    padding: 18px;
    width: 100%;
    max-width: 150px;
}

/********************* HOME- EMPRESAS ******************************/
.home-empresas{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 65px 60px;
    margin: 0 120px;
    gap:50px;
/*    background: #20293c;*/
    border-radius: 30px;
    background: url(../img/empresas.jpg); 
    position: relative;
    z-index: 5;
    justify-self: center;
    margin-bottom: 120px;
    border: 1px solid #2837416b;
}

.home-empresas::after{
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #20293c;
    background: white;
    z-index: 4;
    top: 0;
    right: 0;
    opacity: 0.95;
    border-radius: 28px;

}

.home-empresas img{
/*    min-height: 450px;*/
    object-fit: cover;
    max-width: 300px;
    border-radius: 10px;
    z-index:5;
    margin: 15px 25px;
}

.home-empresas span{
    z-index:5;
    position: relative;
}

.home-empresas h2{
/*    color: white;*/
    margin-top: 10px;
    z-index:5;
    position: relative;
}

.home-empresas p{
/*    color: white;*/
    font-size: 2.2em;
    margin: 30px auto;
    z-index:5;
    position: relative;
}

.home-empresas .ctas{
    justify-self: flex-start;
    font-size: 1.1em;
    position: relative;
    z-index: 5;
}

.home-empresas .ctas a{
}

.slider-home {
  width: 50%;
  overflow: hidden;
}

.slider-home .swiper-wrapper {
  display: flex;
  align-items: center;
}

.slider-home .swiper-slide {
  flex-shrink: 0;
  width: auto; /* Se ajusta al tamaño de la imagen */
}

.slider-home img {
  max-height: 330px; /* ajusta a lo que quieras */
  width: auto;
  object-fit: contain;
}
/********************* HOME- TESTIMONIOS ******************************/
.home-testimonios{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 0;
    background: white;
    overflow: hidden;
}


.home-testimonios .container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-testimonios .container .titulo{
    text-align: center;
    margin-bottom: 40px;
    max-width: 520px;
}

.testimonios-slider .swiper {
  width: 100%;
  overflow: hidden;
}

.testimonios-slider .swiper-slide {
  width: auto;        /* se ajusta al contenido */
  flex-shrink: 0;     /* evita que los slides se compriman */
}

.testimonios-slider .slide-content {
  display: flex;
  flex-direction: row;
  background-color: #fe6037;
  border-radius: 10px;
  padding: 20px;
  gap: 30px;
  align-items: flex-end;
    max-width: 700px;
}

.testimonios-slider .slide-content>img {
  min-width: 280px;
  max-height: 350px;
  object-fit: cover;
  border-radius: 10px;
}

.testimonios-slider .slide-text {
  display: flex;
  flex-direction: column;
    align-self: flex-end;
}

.testimonios-slider .slide-content .slide-text .comillas{
    width: 60px;
    margin-bottom: 35px;
}

.testimonios-slider .slide-text p {
  font-size: 1.8em;
    font-weight: 500;
  color: #fff;
  margin-bottom: 15px;
}


.testimonios-slider .slide-text .nombre-testimonio {
  font-size: 1.4em;
  color: #fff;
  font-weight: 400;
}

/********************* HOME- PREGUNTAS FRECUENTES ******************************/
.home-preguntas-frecuentes{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 0;
    overflow: hidden;
/*    background: white;*/
}


.home-preguntas-frecuentes .container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-preguntas-frecuentes .container .titulo{
    text-align: center;
    margin-bottom: 40px;
    max-width: 520px;
}

.home-preguntas-frecuentes{
    margin: 0 auto;
}

.home-preguntas-frecuentes .container-preguntas{
    max-width: 850px;
    width: 100%;
}

.item-pregunta {
  border-bottom: 1px solid #28282b;
  padding: 10px 0;
}

.boton-pregunta {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  text-align: left;
  font-size: 2.2em;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
    color: #28282b;
}

.icono {
  transition: transform 0.3s ease;
  font-weight: bold;
  font-size: 1em;
}

.respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0;
}

.respuesta p {
  font-size: 1.9em;
  font-weight: 500;
    padding: 0 80px 0 25px;
}

.item-pregunta.activo button {
    color: #fe6037;
}

.item-pregunta.activo .respuesta {
  max-height: 150px;; /* suficiente para el texto */
  padding: 0 0 10px 0;
    
}

.item-pregunta.activo .icono {
  transform: rotate(180deg);
}


/********************* HOME- CONTACTO ******************************/
.home-contacto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 120px 0;
    overflow: hidden;
    background: #fe6037;
    background: url(../img/bg2.jpg);
    background-position: bottom;
}

.home-contacto .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.home-contacto header{
    margin: 0 auto;
    text-align: center;
}

.home-contacto h2{
/*    max-width: 800px;*/
    font-size: 5em;
}

.home-contacto h3{
    font-size: 4em;
/*    margin-top: 15px;*/
    color: white;
    font-weight: 400;
}

.home-contacto a{
    margin: 35px 10px;
    font-size: 2em;
}

.home-contacto a i{
    margin: 0 5px;
    font-size: 1.1em;
    font-weight: 500;
}

.software-contacto .ctas{
    display: block;
    padding: 35px 0;
    font-size: .8em;
}

.home-contacto .cta-2{
    background: #293d4b;
    color: white;
}

.home-contacto .cta-2{
    background: #fe6037;
    color: white;
    border: 1px solid white;
}

.home-contacto .cta-2:hover{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
    background: rgb(255, 122, 80);
    transition: 0.3s;
}

.home-contacto .cta-3{
    background: white;
    color: #fe6037;
}

.home-contacto .cta-3:hover{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
    background: #f0f0f0;
    transition: 0.3s;
}


.hashtag{
    font-size: 2.5em;
    font-weight: 600;
    color: white;
    margin-bottom: 0;
}

.redes-contacto {
  display: flex;
    margin-top: -20px;
/*  gap: 15px;*/
  justify-content: center;
  align-items: center;
}

.redes-contacto .icono {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  background: white;
    color: #fe6037;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Colores de cada red */
.icono.fb { background: #1877f2; }
.icono.tw { background: #000000; } /* X (Twitter) */
.icono.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.icono.li { background: #0077b5; }
.icono.wa { background: #25d366; }

.redes-contacto .icono:hover {
  transform: scale(1.2);
  opacity: 0.9;
}
/****************************************************************************/
/*********************************** SOBRE NOSOTROS ***********************************/
/**************************************************************************/

/********************* SOBRE NOSOTROS INICIO ******************************/
.sobre-nosotros-banner{
    padding: 160px 0 70px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(../img/foto1-bloque2.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.sobre-nosotros-banner::after{
    content: " ";
    width: 100%;
    height: 100%;
    background: linear-gradient(184.15deg, rgba(28, 37, 57, 0) -187.51%, #fe6037 96.62%);
    position: absolute;
    z-index: 5;
    top: 0;
}

.sobre-nosotros-banner h1{
    font-size: 8em;
    font-weight: 550;
    color: white;
    z-index: 6;
    text-align: center;
}

/********************* SOBRE NOSOTROS HISTORIA ******************************/
.sobre-nosotros-historia{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
}

.sobre-nosotros-historia .container{
    display: flex;
    flex-direction: row;
    gap: 65px;
}

.sobre-nosotros-historia .container>div:nth-child(1){
}

.sobre-nosotros-historia .titulo{
    font-size: 5.4em;
}

.sobre-nosotros-historia-img{
    border-radius: 10px;
    max-width: 520px;
}

.sobre-nosotros-historia p{
    font-size: 1.9em;
    margin: 25px 0;
}

.sobre-nosotros-historia ul li{
    font-size: 1.7em;
    font-weight: 450;
    list-style: none;
    margin: 25px 0;
    display: flex;
    flex-direction: row;
text-align: left;
        align-items: baseline;
}

.sobre-nosotros-historia ul li i{
    background: #fe6037;
    padding: 5px 5px 4px 5px;
    border-radius: 100%;
    vertical-align: middle;
    margin-right: 6px;
    font-size: 12px;
    color: white;
}

/********************* SOBRE NOSOTROS ENFOQUE ******************************/
.sobre-nosotros-enfoque{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
    background: white;
}

.sobre-nosotros-enfoque .container{
    display: flex;
    flex-direction: row;
    gap: 65px;
}

.sobre-nosotros-enfoque .container>div{
    width: 50%;
}

.sobre-nosotros-enfoque .titulo{
    font-size: 5.4em;
}

.sobre-nosotros-enfoque-img{
    border-radius: 10px;
    max-width: 520px;
}

.sobre-nosotros-enfoque .enfoque-intro{
    font-size: 1.9em;
    margin: 25px 0;
    font-weight: 500;
}

.sobre-nosotros-enfoque .enfoque-items{
    font-size: 1.7em;
    font-weight: 450;
    list-style: none;
    margin: 35px 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap:65px;
}

.sobre-nosotros-enfoque .enfoque-items>div{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}



.sobre-nosotros-enfoque .enfoque-items div i{
    display: inline-flex;       /* evita que se estire */
    align-items: center;        /* centra el ícono dentro del fondo */
    justify-content: center;    /* centra horizontalmente */
    font-size: 1.4em;           /* tamaño del ícono */
    background: #fe6037;
    color: white;
    border-radius: 10px;
    padding: 10px;              /* controla el "bloque" alrededor */
    margin-right: 15px;         /* separación con el texto */
    flex-shrink: 0;             /* evita que se achique */
    height: auto;               /* altura solo según padding + contenido */
    width: auto;                /* ancho solo según padding + contenido */
}

.sobre-nosotros-enfoque .enfoque-items div h4{
    font-size: 1.3em;
    color: #fe6037;;
}


.sobre-nosotros-enfoque .enfoque-items div p{
    font-size: 1.1em;
    font-weight: 450;
}


/********************* SOBRE NOSOTROS STAFF ******************************/
.sobre-nosotros-staff{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
}

.sobre-nosotros-staff header{
    text-align: center;
    margin: 0 auto;
    margin-bottom: 35px;
}

.sobre-nosotros-staff .container .cajas-staff{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 100%;
}

.sobre-nosotros-staff .container .caja-staff{
    flex: 1;
    background: white;
    padding: 25px;
    border-radius: 10px;
    min-height: 450px;
    max-width: 300px;
    justify-content: space-between;
    display: flex;
    border: 1px solid #2837416b;
    flex-direction: column;
    position: relative;
}

.sobre-nosotros-staff .container .caja-staff::after{
content: " ";
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(28 37 57 / 0%) 0%, #20293c 150%);
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    z-index: 4;
    opacity: 0.8;
}

.sobre-nosotros-staff .container .caja-staff div{
    padding-bottom: 10px;
/*    border-bottom: 1px solid #fe6037;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
    position: absolute;
    bottom: 0;
}

.sobre-nosotros-staff .container .caja-staff h3{
    font-size: 2.4em;
    font-weight: 500;
    z-index: 5;
    color: white;
    position: relative;
/*    color: #fe6037;*/

}

.sobre-nosotros-staff .container .caja-staff .flecha-staff{
    font-size: 3.2em;
    font-weight: 500;
    color: #fe6037;
  transform: rotate(45deg); /* rota 45 grados hacia arriba a la derecha */
}

.sobre-nosotros-staff .container .caja-staff .flecha-staff i{
  transform: rotate(15deg); /* rota 45 grados hacia arriba a la derecha */
}

.sobre-nosotros-staff .container .caja-staff p{
    font-size: 1.8em;
    font-weight: 450;
/*    color: #283741;*/
    z-index: 10;
    padding-top: 0px;
    margin-bottom: 10px;
    color: white;
}

.sobre-nosotros-staff .container .caja-staff img{
    border-radius: 10px;                
/*    margin: 15px auto;*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
/*    display: none;*/
}

.sobre-nosotros-staff .container .caja-staff .cta-staff{
    text-align: center;
    margin: 25px 0 15px 0;
    font-size: 1.6em;
    align-self: flex-end;
    padding: 18px;
    width: 100%;
    max-width: 150px;
}



/****************************************************************************/
/*********************************** SOLUCIONES SOFTWARE ***********************************/
/**************************************************************************/

/********************* SOLUCIONES SOFTWARE CARDS ******************************/

/***************************** SOFTWARE- SERVICIOS ******************************/
.software-servicios{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 0;
    background: white;
}

.software-servicios .container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.software-servicios .container .titulo{
    margin-bottom: 40px;    
    text-align: center;
    justify-content: center;
    display: flex;
}

.software-servicios header{
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.software-servicios .container{
    margin: 0 auto;
}

.software-servicios .container .cajas-software {
    width: 100%;
}

/* Asegura que el contenedor del escenario use Flexbox para alinear las cajas */
.owl-carousel.cajas-software .owl-stage {
    display: flex;
}

/* Fuerza a cada caja a ocupar el 100% de la altura de su contenedor flex */
.owl-carousel.cajas-software .caja-software {
    height: 100%;
}

/* El resto de tu CSS anterior para las cajas */
.software-servicios .container .caja-software{
    flex: 1;
    background: white;
    padding: 25px;
    border-radius: 10px;
    justify-content: space-between;
    display: flex;
    border: 1px solid #fe6037;
    flex-direction: column;
    position: relative;
/*    margin: 0 10px;*/
}

.software-servicios .container .caja-software div{
    padding-bottom: 10px;
    border-bottom: 1px solid #fe6037;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
    gap:15px;
}


.software-servicios .container .caja-software h3{
    font-size: 2.4em;
    font-weight: 500;
    color: #fe6037;
    text-align: center;
}

.software-servicios .container .caja-software .flecha-servicio{
    font-size: 3.2em;
    font-weight: 500;
    color: #fe6037;
/*  transform: rotate(45deg); */
}

.software-servicios .container .caja-software .flecha-servicio i{
/*  transform: rotate(15deg);*/
}

.software-servicios .container .caja-software p{
    font-size: 1.8em;
    font-weight: 450;
    color: #283741;
    z-index: 10;
    padding-top: 15px;
}

.software-servicios .container .caja-software img{
    border-radius: 10px;                
    margin: 15px auto;
    max-height: 150px;
    width: 100%;
    object-fit: cover;
}

.software-servicios .container .caja-software .cta-servicio{
    text-align: center;
    margin: 25px 0 15px 0;
    font-size: 1.6em;
    align-self: flex-end;
    padding: 18px;
    width: 100%;
    max-width: 150px;
}

.software-servicios {
    position: relative;
    /* ... otros estilos de la sección */
}

.owl-carousel.cajas-software .owl-nav {
    position: absolute; /* Posicionamiento absoluto */
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% + 150px); /* Ajusta el ancho para que salgan más */
    left: -75px; /* Mueve el contenedor a la izquierda */
    display: flex;
    justify-content: space-between;
}

.owl-carousel.cajas-software .owl-nav button.owl-prev,
.owl-carousel.cajas-software .owl-nav button.owl-next {
    background-color: #fe6037;
    color: #fff;
    font-size: 4em;
    font-weight: 400;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.owl-carousel.cajas-software .owl-nav button.owl-prev:hover,
.owl-carousel.cajas-software .owl-nav button.owl-next:hover {
    background-color: #283741;
    cursor: pointer;
}

.owl-carousel.cajas-software .owl-nav button.owl-prev span,
.owl-carousel.cajas-software .owl-nav button.owl-next span {
    display: none;
}

.owl-carousel.cajas-software .owl-nav button.owl-prev:before {
    content: '\2039';
}

.owl-carousel.cajas-software .owl-nav button.owl-next:before {
    content: '\203A';
}

.owl-carousel.cajas-software .owl-dots {
    text-align: center;
    margin-top: 15px;
}

.owl-carousel.cajas-software .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    background: #d6d6d6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
}

.owl-carousel.cajas-software .owl-dot.active span,
.owl-carousel.cajas-software .owl-dot:hover span {
    background: #fe6037;
}

.owl-carousel.cajas-software {
    position: relative; /* Agregado para que los puntos puedan ser absolutos también si fuera necesario */
}

/***************************** SOFTWARE- FUNCIONA ******************************/
.servicios-funciona{
    justify-content: center;
    display: flex;
    padding: 120px 0;
}

.servicios-funciona .container .contenido{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    gap: 80px;
/*    padding: 80px 0 100px 0;*/
}

.servicios-funciona p{
    font-size: 1.7em;
    max-width: 800px;
    line-height: 1.7;
}

.servicios-funciona p span{
    font-weight: 500;
    font-style: italic;
}

.servicios-funciona .mapa{
    width: 100%;
    height: auto;
    max-width: 480px;
}
.servicios-funciona .container .contenido div ul {
/*  margin-bottom: 210px;*/
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 1;
  /* Eliminamos el border-left: 2px solid #d17f7d; */
  margin-left: 20px;
  position: relative;
  margin-top: 40px;
/*  max-height: 450px;*/
}

.servicios-funciona .container .contenido div ul li {
  padding-top: 6px;
  padding-left: 45px;
  padding-bottom: 35px;
  /* Aseguramos la posición relativa para el pseudo-elemento */
  position: relative; 
}

.servicios-funciona .container .contenido div ul li:last-of-type {
  padding-bottom: 0;
}

/* Pseudo-elemento para la línea */
.servicios-funciona .container .contenido div ul li::before {
  content: '';
  position: absolute;
  top: 0;
  /*
  Ajustamos la posición de la línea para que quede debajo del círculo.
  El círculo tiene un ancho de 40px y se posiciona con left: -22px.
  El centro del círculo está en -22px + (40px/2) = -2px.
  La línea (2px de ancho) debe centrarse en este mismo punto,
  por lo que su left debe ser -2px.
  */
  left: -2px; 
  height: 100%;
  width: 2px;
  background-color: #d17f7d;
  z-index: 0;
}

/* Ocultamos la línea del último elemento de la lista */
.servicios-funciona .container .contenido div ul li:last-of-type::before {
  display: none;
}

.servicios-funciona .container .contenido div ul li span {
  position: absolute;
  left: -22px;
  height: 40px;
  width: 40px;
  background: #fe6037;
  color: white;
  font-size: 1.6em;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  border-radius: 50%;
  margin-top: -14px;
}
.servicios-funciona .container .contenido div h4{
    font-size: 2.4em;
    margin-top: -12px;
    font-weight: 500;
    color: #fe6037;
    margin-bottom: 5px;
}

.servicios-funciona .mapa iframe{
    max-width: 480px;
    border-radius: 15px;
    border: 1px solid #fe6037;
}

.servicios-funciona .ctas a{
    align-items: center;
    display: flex;
    justify-content: center;
}

.servicios-funciona .ctas a i{
    font-size: 1.5em;
    padding-left: 7px;
}

/***************************** SERVICIOS - ADICIONAL ******************************/
.aula-digital div ul{
    margin-bottom: 25px;
    padding-left: 15px;
}

.aula-digital div h3{
    margin: 20px 0 0 0;
    font-size: 2.2em;
    font-weight: 500;
    color: #fe6037;
}

.aula-digital div p{
    margin-top: 0;
    padding-left: 15px;

}

/***************************** SERVICIOS - PROGRAMACION ******************************/
.programacion{
    background: white;
}


.programacion div ul{
    margin-bottom: 25px;
    padding-left: 15px;
}

.programacion div h3{
    margin: 20px 0 0 0;
    font-size: 2.2em;
    font-weight: 500;
    color: #fe6037;
}

.programacion div p{
    margin-top: 0;
    padding-left: 15px;
}

/***************************** SERVICIOS - INSUMOS ******************************/

.insumos div ul{
    margin-bottom: 25px;
    padding-left: 15px;
}

.insumos div h3{
    margin: 20px 0 0 0;
    font-size: 2.2em;
    font-weight: 500;
    color: #fe6037;
}

.insumos div p{
    margin-top: 0;
    padding-left: 15px;
}

/***************************** SERVICIOS - PARTNER ******************************/
.partner{
    background: white;
}

.partner div ul{
    margin-bottom: 25px;
    padding-left: 15px;
}

.partner div h3{
    margin: 20px 0 0 0;
    font-size: 2.2em;
    font-weight: 500;
    color: #fe6037;
}

.partner div p{
    margin-top: 0;
    padding-left: 15px;
}

/****************************************************************************/
/*********************************** FAQ ***********************************/
/**************************************************************************/
.faq-pagina .item-pregunta{
    margin: 0 30px;
    font-size: .9em;
}

.subtitulo-faq{
    font-size: 1.9em;
    margin-top: 65px;
    color: #fe6037;
    text-decoration: underline;
}

.subtitulo-faq:nth-of-type(1){
    margin-top: 0;
}


/****************************************************************************/
/*********************************** CONTACTO ***********************************/
/**************************************************************************/
.contacto-info{
    padding: 20px 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.contact-cards.container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin: 40px auto;
  justify-content: center;
  align-items: stretch; /* estira las cards al mismo alto */
    flex-direction: row;
}

.contact-cards .card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 65px 50px;
  flex: 1;
  max-width: 500px;
  display: flex;             /* fuerza layout en columna */
  flex-direction: column;
  justify-content: space-between; /* separa contenido y CTA */
    font-size: 1.1em;
}

.card-icon {
  font-size: 4em;        /* tamaño del ícono */
  color: #fe6037;        /* color corporativo */
  margin-bottom: 10px;
  text-align: center;    /* centrado */
}

.contact-cards .card h3 {
  text-align: center;    /* título centrado bajo el ícono */
  font-size: 2em;
  color: #1c2731;
}

.contact-cards .card p {
  font-size: 1.6em;
  margin: 10px 0;
  color: #1c2731;
    max-width: 520px;
    margin: 5px auto 30px auto;
}

.contact-cards .card p:nth-of-type(2){
    margin: 0 auto;
    font-size: 1.4em;
    font-weight:500;
}

.contact-cards .card p:nth-of-type(3){
    margin: 7px auto 38px auto;
    font-size: 1.4em;
    font-weight:500;
}

.contact-cards .card .redes{
    margin-bottom: 0;
}

.contact-cards .card a {
  color: #1c2731;
  text-decoration: none;
}

.contact-cards .card a:hover{
    color:white;
}

.card-contacto .info a:hover{
    color:#fe6037!important;
}


.contact-cards .card a:focus, .contact-cards .card a:target, .contact-cards .card a:active{
    
}

.contact-cards .card .cta-1{
    color: white;
    margin-top: 15px;
}

.contact-cards .card a:hover {
  color: white;
}

.contact-cards .card i {
  color: #fe6037;
  margin-right: 8px;
}

.contact-cards .card .redes a {
  margin-right: 15px;
  font-size: 1em;
}

.btn-principal {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 20px;
  background: #fe6037;
  color: #fff;
  border-radius: 8px;
  font-size: 1.6em;
  font-weight: 500;
}

.btn-principal:hover {
  background: #e5532e;
}

/***************************** FOOTER ******************************/

footer .container{
    display: flex;
    flex-direction: row;
    
}


footer{
    justify-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding-top: 100px;
}

footer .container{
    justify-content: space-between;
    gap:45;
}


footer .derechos{
    font-size: 1.6em;
    border-top: 1px solid #f2613c69;
    width: 100%;
    padding: 35px 0;
    margin: 55px auto 25px auto;
    text-align: center;
    background: #fefaf6;
}

footer .derechos p{
    font-weight: 500;
    
}

footer .container h2{
    font-size: 2.2em;
}

footer .container .logo-footer{
    max-width: 170px;
}

footer .container .descripcion-footer{
    max-width: 250px;
    font-size: 1.6em;
    margin-top: 15px;
}

footer ul li{
    font-size: 1.5em;
    margin: 5px auto;
}

footer ul li a{
    text-decoration: none;
    color: #283741;
    font-weight: 420;
}

footer ul li a:hover{
    color: #e5532e;
}


/* 3XL (1600–1919px) */
  @media (max-width: 1921px) {
   .header-principal nav{
      max-width: 100%;
      width: 75%;
    }
      
  .container { 
      max-width: 1440px; 
    }

    /****************** HOME **************************/
    .bloque-counter{
        padding: 25px 5px;
    }
}


/* 1440–1599px */
@media (max-width: 1599px) {
   .header-principal nav{
      max-width: 100%;
      width: 85%;
    }
    
  .container { 
      width: 80%;
      max-width: 100%;
    }
    
    .home-inicio h1{
        font-size: 7em;
    }

    
}

/* 1280–1439px */
@media (max-width: 1450px) {
    body{
        font-size: .9em;
    }
    
   .header-principal nav{
      max-width: 100%;
      width: 85%;
    }
    
  .container { 
      width: 80%; 
    }
    
    .home-inicio h1{
        font-size: 5em;
    }
    
    .home-inicio h2{
        margin: 20px 0 25px 0;
    }
    
    .bloque-counter span{
        padding-top: 10px;
    }
    
    .home-inicio .bloque-imagen{
        width: 65%;
    }
    
    .bloque-foto-horizontal{
        min-height: 135px;
    }
    
    * > .titulo{
        font-size: 4.5em!important;
    }
    
    * > .titulo2{
        font-size: 4.5em!important;
    }
    
    .home-sobre-nosotros img{
        max-width: 380px;
        width: auto;

    }

    .enfoque-img{
        max-width: 380px;
        width: auto;
    }
    
    .servicios-funciona .mapa{
        max-width: 380px;
    }
    
    .sobre-nosotros-historia-img{
        max-width: 380px;
        width: auto;
    }
    
    .sobre-nosotros-staff .container .caja-staff{
        min-height: 380px;
        max-width: 250px;
    }
    
    .beneficios-garantia img{
        max-width: 380px;
        height: auto;
    }
    
    .enfoque-img .img{
        max-width: 380px;
        height: auto;
    }
    
    .home-sobre-nosotros p{
        margin: 20px 0;
    }
    
    .home-servicios .container .caja-servicio img{
        max-height: 125px;
    }
    
    .home-empresas img{
        max-width: 280px;
    }
    
    .sobre-nosotros-banner h1{
        font-size: 6.5em;
    }
    
    .sobre-nosotros-banner{
        padding: 110px 0 40px 0;
    }
    
    .home-logos-partner{
        padding: 60px 0;
    }
    .home-sobre-nosotros{
        padding: 60px 0;
    }
    .home-servicios{
        padding: 60px 0;
    }
    
    .home-testimonios{
        padding: 60px 0;
    }
    .home-preguntas-frecuentes{
        padding: 60px 0;
    }
    .home-contacto{
        padding: 60px 0;
    }

    .sobre-nosotros-historia{
        padding: 60px 0;
    }
    .sobre-nosotros-enfoque{
        padding: 60px 0;
    }
    
    .sobre-nosotros-staff{
        padding: 60px 0;
    }
    .software-servicios{
        padding: 60px 0;
    }
    
    .servicios-funciona{
        padding: 60px 0;
    }
}

/* 1024–1279px */
@media (max-width: 1279px) {
/****************** BARRA NAVEGACION **************************/
    .header-principal nav{
        z-index: 250;
    }
    
    .header-principal nav ul{
        display: none;
    }
    
    .header-cta{
        display: none;
    }
    
    /* Muestra el botón en mobile y le da estilo */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-right: 10px;
        z-index: 25501;
    }

    .nav-toggle .bar {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #1c2731;
        transition: all 0.3s ease;
    }
    
    .menu-title{
        font-size: 2.5em;
        margin: 15px 0 25px 0;
    }
    
/* Estilos para el menú que se desliza (side-mobile) */
    .side-mobile {
        display: flex; /* Se muestra en mobile */
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: fixed;
        top: 0;
        right: 0;
        width: 250px; /* Ancho del menú */
        height: 100%;
        background-color: white;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transform: translateX(100%); /* Oculto por defecto */
        transition: transform 0.4s ease-in-out;
        z-index: 251; /* Para que quede debajo del toggle */
        padding: 20px;
    }

    /* Estilos de los elementos dentro del menú deslizable */
    .side-mobile ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 5px;
        margin-bottom: 20px;
    }

    .side-mobile ul li{
        list-style: none;
    }
    
    .side-mobile ul li a {
        font-size: 1.6em;
        display: block;
        padding: 10px 0;
        text-align: left;
    }

    .side-mobile .header-cta {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: auto; /* Empuja el CTA al final */
    }

    /* La clase que activa la animación de deslizamiento */
    .side-mobile.open {
        transform: translateX(0);
    }
    
    .nav-close {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 2em;
        color: #fe6037;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2; /* Para que esté por encima de otros elementos */
    }
    
    .home-logos-partner{
        padding: 60px 0;
    }
    .home-sobre-nosotros{
        padding: 60px 0;
    }
    .home-servicios{
        padding: 60px 0;
    }
    
    .home-testimonios{
        padding: 60px 0;
    }
    .home-preguntas-frecuentes{
        padding: 60px 0;
    }
    .home-contacto{
        padding: 60px 0;
    }

    .sobre-nosotros-historia{
        padding: 60px 0;
    }
    .sobre-nosotros-enfoque{
        padding: 60px 0;
    }
    
    .sobre-nosotros-staff{
        padding: 60px 0;
    }
    .software-servicios{
        padding: 60px 0;
    }
    
    .servicios-funciona{
        padding: 60px 0;
    }
    
}


/* 768–1023px */
@media (max-width: 1080px) {
    .titulo{
        font-size: 5em;
        line-height: 1.2;
    }
    
    .header-principal{
         margin: 0 auto;
    }
    
    .header-principal nav{
        width: 100%;
        border-radius: 0;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    
    
    
    .home-sobre-nosotros img{
        max-width: 100%;
        width: 100%;
        
    }
    
    .sobre-nosotros-historia-img{
        max-width: 100%;
        width: auto;
    }
    
    .sobre-nosotros-staff .container .caja-staff{
        max-width: 100%;
    }
    
    .enfoque-img{
        max-width: 100%;
        height: auto;
    }
    
    .home-sobre-nosotros p{
        margin: 20px 0;
    }
    
    .home-servicios .container .caja-servicio img{
        max-height: 125px;
    }
    
    .home-empresas img{
/*        max-width: 100%;*/
    }

/****************** HOME **************************/
    .home-inicio .container{
        flex-direction: column;
        margin: 120px auto 65px auto;;
    }
    
    .home-inicio .bloque-imagen{
        width: 100%;
    }
    
    .bloque-grid{
/*        display: none;*/
    }
    
    .home-sobre-nosotros .container>div:nth-child(1){
        padding: 0;
        text-align: center;
    }
    
    .home-sobre-nosotros-img{
        padding: 25px 0 0 0;
    }
    
    .home-sobre-nosotros-img img{
        max-height: 290px;
        object-fit: cover;
    }
    
    .home-sobre-nosotros .titulo{
        text-align: center;
    }
    
    .home-sobre-nosotros p{
        text-align: left;
    }
    
    .home-sobre-nosotros ul{
/*        justify-self: center;*/
        margin-bottom: 50px;
    }
    
    .home-sobre-nosotros .ctas{
/*        justify-self: center;*/
        justify-content: center;
    }
    
    footer .container{
        gap:65px;
    }
    
    /****************** SOBRE NOSOTROS *************************/
    .sobre-nosotros-banner{
        padding: 110px 0 40px 0;
    }
    
    .sobre-nosotros-historia{
    }
    
    .sobre-nosotros-historia-img{
        max-height: 290px;
        object-fit: cover;
        width: 100%;
        margin-top: 25px;
    }
    
    .box-sobre-nosotros-historia-img-compuesto{    
        }
    
    .box-sobre-nosotros-historia-img-compuesto img{
        max-height: 250px;
        height: 100%;
        max-width: 155px;
    }
    
    .servicios-funciona .mapa img{
/*        display: none;*/
        max-height: 145px;
        object-fit: cover;
        width: 100%;
        margin-top: 25px;
    }
    /****************** SOFTWARE *************************/
    .sobre-nosotros-enfoque .enfoque-items{
        flex-direction: column;
        gap:25px;
    }
    
    
    .beneficios-garantia img{
        max-width: 100%;
        min-height: 650px;
        object-fit: cover;
    }
    
    /***************** CONTACTO ********************/
    .testimonios-slider .slide-content > img{
        max-height: 100%;
    }
}


/* 768–1023px */
@media (max-width: 850px) {
    /***********************  ESTILOS GENERALES *******************************/
    .titulo{
        font-size: 3.5em!important;
        line-height: 1.1;
    }
    
    .titulo2{
        font-size: 3.5em!important;
        line-height: 1.1;
    }
    
    .resaltado, .resaltado2{
        font-size: 1.2em;
    }
    
    .header-principal nav{
        width: 95%;
    }
    
    .container{
        width: 90%;
    }
    
    .header-principal nav img{
        max-width: 140px;
    }
    
    /*********************** HOME ************************************/
    .home-inicio{
        padding: 85px 0;
    }
    
    .home-inicio .container{
        margin: 0 auto;
    }
    
    .home-inicio h1{
        font-size: 3.9em;
        line-height: 1.1;
    }
    
    .home-inicio h2{
        margin: 25px 0 45px 0;
    }
    
    .home-inicio .bloque-imagen{
        max-width: inherit;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    
    .bloque-counter{
        padding: 0;
    }
    
    .bloque-counter span{
        font-size: 2.5em;
        font-weight: 500;
        color: #fae8d7;
        padding-top: 0; 
        display: block;
    }
    
    .counter-content img{
        display: none;
    }
    
    .counter-texto{
        font-size: 1.4em;
        font-weight: 500;
        color: #fae8d7;
        display: block;
        line-height: 1.3em;
        padding: 0 15px;
        margin-top: 5px;
    }
    
    .home-inicio .ctas{
/*        flex-direction: column;*/
        text-align: center;
    }
    

    
    .home-logos-partner .titulo{
        font-size: 3.5em!important;
    }
    

    
    .home-sobre-nosotros-img img{
        max-height: 190px;
    }
    
    .home-sobre-nosotros .ctas{
/*        flex-direction: column;*/
    }
    
    .home-sobre-nosotros ul li{
        text-align: left;
        align-items: baseline;
    }
    
    .home-sobre-nosotros .titulo{
        font-size: 3.5em;
    }
    

    
    .home-servicios .container .cajas-servicio{
        flex-direction: column;
    }
    
    .home-empresas {
        margin-bottom: 80px;
        position: relative;
        display: block;
        margin: 0 auto;
        padding: 30px;
        max-width: 100%;
    }
    
    .home-empresas img{
        max-width: 200px;
    }
    
    .home-servicios .container .caja-servicio h3{
        font-size: 2.2em;
    }
    
    .home-empresas{
        margin-bottom: 80px;
    }
    
    .home-empresas p{
        font-size: 1.8em;
    }
    
      .testimonios-slider .swiper {
        width: 95vw; /* Ocupa el 95% del "viewport width" */
        overflow: hidden;
      }

      .testimonios-slider .slide-content {
        flex-direction: column; /* Cambia a una columna en móviles */
        align-items: center; /* Centra los elementos */
        text-align: center;
        max-width: 95vw; /* Asegura que no se desborde */
      }

      .testimonios-slider .slide-content > img {
        min-width: 100%; /* La imagen ocupa todo el ancho */
        max-height: 220px;
      }
    
    .testimonios-slider .slide-content .slide-text .comillas{
        width: 35px;
        margin-bottom: 15px;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 100%;
        margin: 5px;
    }
    
    .carousel-track{
        animation: scroll 60s linear infinite;
    }
    
        /* Estilos de las flechas del carrusel */
        .swiper-button-next,
        .swiper-button-prev {
          color: #fff !important; /* Color de las flechas (blanco) */
          background-color: rgba(0, 0, 0, 0.4); /* Fondo semitransparente */
          width: 50px !important; /* Ancho de la flecha */
          height: 50px !important; /* Alto de la flecha */
          border-radius: 50%; /* Bordes completamente redondos */
          transition: background-color 0.3s ease; /* Transición suave para el efecto hover */
        }

        .swiper-button-next:hover,
        .swiper-button-prev:hover {
          background-color: rgba(0, 0, 0, 0.6); /* Fondo más oscuro al pasar el cursor */
        }

        /* Ajuste del ícono de la flecha */
        .swiper-button-next:after,
        .swiper-button-prev:after {
          font-size: 1.5em !important; /* Tamaño del ícono de la flecha */
          font-weight: bold;
        }

        /* Posicionamiento en el carrusel */
        .swiper-button-next {
          right: 25px !important; /* Posición desde el lado derecho */
            margin: -130px 0;
        }

        .swiper-button-prev {
          left: 25px !important; /* Posición desde el lado izquierdo */
            margin: -130px 0;
        }
    
    .boton-pregunta{
        font-size: 2em;
    }
    
    .respuesta p{
        padding: 0 25px 0 0;
        font-size: 1.7em;
    }
    
    
    .home-contacto h2{
        font-size: 3.5em;
    }
    
    .home-contacto h3{
        font-size: 3em;     
    }
    
    footer .container{
        flex-direction: column;
    }      
    
    /*********************** SOBRE NOSOTROS ************************************/
    
    .sobre-nosotros-banner h1{
        text-align: center;
        font-size: 4.7em;
        line-height: 1.1;
        margin-bottom: 8px;
    }
    
    .sobre-nosotros-historia .titulo{
        font-size: 3.7em;
    }
    
    .sobre-nosotros-historia p{
        font-size: 2em;
    }
    
    
    .sobre-nosotros-enfoque .container{
        flex-direction: column;
    }
    
    .sobre-nosotros-enfoque .container>div{
        width: 100%;
    }
    
    .enfoque-img{
        max-width: 300px;
        margin: 25px auto;
    }
    
    .sobre-nosotros-historia-img{
        max-height: 200px;
        max-width: 100%;
    }
    
    .sobre-nosotros-enfoque .container>div{
        justify-content: center;
        display: flex;
        flex-direction: column;
    }
    
    .sobre-nosotros-enfoque .titulo{
        font-size: 3.7em;
        text-align: center;
    }
    
    .sobre-nosotros-enfoque .enfoque-items{
        flex-direction: column;
        gap:30px;
    }
    
    .sobre-nosotros-staff .container .cajas-staff{
        flex-direction: column;
        gap:25px;
    }

    .sobre-nosotros-staff .container .caja-staff{
        width: 100%;
        min-height: 600px;
    }
    
    /*********************** SOFTWARE ************************************/
    
    .servicios-funciona .container .contenido{
/*        padding: 40px 0;*/
    }
    
    .beneficios-garantia img{
        max-width: 100%;
        max-height: 220px;
        object-fit: cover;
        min-height: inherit;
    }
    
    .sobre-nosotros-enfoque .container{
        gap:0px;
    }
    
    .software-contacto .ctas{
        flex-direction: column;
        display: flex;
        margin: 0 auto;
    }
    
    .owl-carousel.cajas-software .owl-nav {
        display: none;
    }
    
    .servicios-funciona .container .contenido div ul{
        max-height: none;
        margin-bottom: 0;
    }
    
    .como-trabajamos-box .ctas{
        margin-left: -15px;
    }
    
    .ctas-3-botones a{
        margin: 5px 0;
        text-align: center;
    }
    
    .ctas-3-botones a:nth-child(3){
        padding: 17px 25px;
    }
    
    .ctas-4-botones a{
        margin: 5px 0;
        text-align: center;
    }
    
    .ctas-4-botones a:nth-child(4){
        padding: 17px 25px;
    }
    .contact-cards.container {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-cards .card {
      padding: 40px 50px;
    }
    
    /******************* FOOTER ***********************/
    footer .container{
        gap:35px;
        flex-direction: column;
        justify-content: center;
        display: flex;
        align-items: center;
        text-align: center;
    }
    
    footer .descripcion{
        text-align: center;
    }
    
}


@media (max-width: 480px) {
    body{
        font-size: 1em;
    }
    
    .ctas{
        flex-direction: column;
        text-align: center;
        justify-content: center;
        width: 100%;
        align-items: center;
    }
    
    .ctas > *{
        width: 320px;
    }
    
    .home-inicio .ctas{
        flex-direction: column;
    }
}



@media (max-width: 360px) {
    .ctas{
        flex-direction: column;
        text-align: center;
        justify-content: center;
        width: 100%;
        align-items: center;
    }
    
    .ctas > *{
        width: 260px;
    }
    
    .home-inicio .ctas{
        flex-direction: column;
    }
    
    .como-trabajamos-box .ctas{
        margin-left: -10px;
    }
}