body{
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  color: #F9F9F4;
}
/*
.container-naranja{
  background: linear-gradient(to bottom right, #FE9205 0%, #F37320 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, #FE9205 0%, #F37320 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, #FE9205 0%, #F37320 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, #FE9205 0%, #F37320 50%) top right / 50% 50% no-repeat;
}*/
.container-naranja {
  background: radial-gradient(circle, #FE9205 0%, #F37320 100%);
}
.hero-h1{
  font-size: 72px;
  font-weight: 800;
  word-wrap: break-word;
}
.hero-h4{
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
  word-wrap: break-word;
}
.btn-lila{
  background-color: #663DA0;
  color: #F9F9F4;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  word-wrap: break-word;
  transition: background-color 0.3s;
  transition-timing-function: ease-out;
}
.btn-lila:hover{
  background-color: #B20B4E;
  color: #F9F9F4 !important;
  transform: scaleX(1.0);
}
.bi{
  fill: currentColor;
}
.nav-link{
  color: #F9F9F4!important;
  transition: background-color 300ms ease-out;
}
.nav-link:hover{
  font-weight: bolder;
}
.violeta{
  color: #663DA0;
}
.btn-header{
  color: #F9F9F4;
  border-color: #F9F9F4;
  transition: background-color 0.3s ease-out;
}
.btn-header:hover{
  background-color: #B20B4E;
}
.card-h5{
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
}
.naranja{
  color: #F37320;
}
.card-text{
  font-weight: 500;
  line-height: 24px;
  font-size: 20px;
}
.card{
  border: none;
}
.container-blanco-2{
  background-color: #F9F9F4;
}
.linea-horizontal{
  opacity: 1!important;
  border-width: 2px;
}
.li-techs{
  border: none;
  border-radius: 0;
  border-right: 1px solid #FE9205;
  font-size: 32px;
  line-height: 38px;
  color: #24282E;
  background-color: #F9F9F4;
}
.list-group-item:last-child{
  border-radius: 0;
}
.list-group-horizontal > .list-group-item:last-child:not(:first-child){
  border-radius: 0;
}
.container-negro{
  background-color: #24282E
}
.naranja-2{
  color: #FE9205;
}
.fondo-negro{
  background-color: #15171B;
}
.fondo-naranja{
  background-color: #FE9205;
  color: #24282E;
  border-radius: 4px 4px 0 0 !important;
  font-size: 12px;
  line-height: 16px;
}
.img-proyecto{
  border-radius: 0!important;
}
.card-h5-proyectos{
  font-size: 24px;
  line-height: 30px;
}
.card-text-proyectos{
  font-size: 16px;
  line-height: 24px;
  color: #F9F9F4;
}
.badge-proyecto{
  border-radius: 4px!important;
  border: 1px solid #F9F9F4;
  font-size: 12px;
  line-height: 16px;
}
.card-footer-proyectos{
  color: #FE9205;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}
.card-proyecto{
  transition: background-color 0.3s ease-out;
}
.card-proyecto:hover{
  border-radius: 8px;
  background-color:  #585858;
}
.clientes-h4{
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  word-wrap: break-word;
}
.logo-cliente{
  width: fit-content !important;
  object-fit: contain;
}
.owl-item img{
  width: fit-content !important;
  object-fit: contain;
  height: 46px;
}
.owl-item{
  background-color: #f8f9f4;
  border: none;
}
.testimonio-texto{
  font-size: 16px;
}
.card-cliente{
  background-color: #f1f1ef;
  color: #585858;
  border-radius: 10px !important;
}
.card-title-cliente{
  font-size: 23px;
  color: #412766;
}
.card-subtitle-cliente{
  color: #412766;
  font-size: 15px;
}
.container-blanco-3{
  background-color: #f8f9f4;
}
.list-group-item img{
  height: 46px;
}
.list-group-item{
  background-color: #f8f9f4;
  border: none;
}
.ul-clientes li{
  background-color: #f8f9f4;
  border: none;
}
.h3-pioneros{
  font-size: 50px;
}
/*
.pioneros-container{
  background-image: url("");
  background-size: cover;
}
*/
/*
.container-violeta{
  background: linear-gradient(to bottom right, #663DA0 0%, #422767 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, #663DA0 0%, #422767 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, #663DA0 0%, #422767 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, #663DA0 0%, #422767 50%) top right / 50% 50% no-repeat;
}*/
.container-violeta {
  background: radial-gradient(circle, #663DA0 0%, #422767 100%);
}
.btn-borde-blanco{
  background-color: transparent;
  color: #f8f9f4;
  border-color: #f8f9f4;
  border-style: solid 1px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  word-wrap: break-word;
  transition: background-color 0.3s;
  transition-timing-function: ease-out;
}
.btn-borde-blanco:hover{
  background-color: #B20B4E;
  border-color: #B20B4E;
}
.h3-container-violeta{
  font-size: 40px;
}
.h4-container-violeta{
  font-size: 16px;
}
.division-vertical{
  color: #ac99c6;
  background-color: #ac99c6;
  width: 2px;
  opacity: 1;
}
.hr-violeta{
  color: #ac99c6;
  background-color: #ac99c6;
  width: 2px;
  opacity: 1;
}
.footer{
  background-color: #25282f;
}
.redes-sociales img{
  height: 24px;
  padding-left: 1rem;
}
.logo-footer{
  width: 200px;
}

/*Que hacemos*/
.btn-outline-naranja{
  border-style: solid;
  border-width: 1px;
  border-color: #F37320;
  border-radius: 6px;
  font-size: 18px;
  line-height: 22px;
  color: #F37320;
  height: 85px;
  width: 270px;
}

.btn-outline-naranja:hover,
.btn-outline-naranja.active {
  background-color: #F37320;
  color: #F9F9F4;
}
.h4-servicios{
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #663DA0;
}
.p-servicios{
  color: #24282E;
  line-height: 24px;
  font-size: 16px;
}
.contacto-servicios{
  background-color: #F37320;
  border-radius: 10px;
}
.h3-contacto-servicios{
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
}

/* seccion quienes somos */
.container-blanco-somos{
  background-color: #F1F1EF;
}
.somos-h2{
  font-weight: 800;
  font-size: 64px;
  line-height: 100%;
}
.card-h4{
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
}
.gris1{
  line-height: 24px;
  font-size: 16px;
  color: #585858;
}
.violeta1{
  color: #422767;
}

.container-violeta-somos{
  background-color: #422767;
  min-height: 220px;
}
.circulo{
  background-color: #663DA0;
  min-height: 220px;
  shape-outside: circle(50%);
  clip-path: circle(18rem at 14rem 7rem);
}
.h2-equipo{
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
  color: #422767;
}

.blanco2{
  color: #F9F9F4;
}
.card-h5-somos{
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
}

.hr-blanco2{
  color: #F9F9F4;
  opacity: 1;
  border-style: solid;
  border-width: 1px;
  border-color: #F9F9F4;
}
.card-socie {
  position: relative; /* Necesario para el pseudo-elemento */
  overflow: hidden; /* Asegura que el gradiente no se salga */
  height: 368px;
  width: 258px;
}

.card-socie::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(0deg, #663DA0 0%, rgba(102, 61, 160, 0.8) 100%);*/
  background: linear-gradient(0deg, #FE9205 0%, #663DA0 100%);
  mix-blend-mode: multiply; /* Fusiona con la imagen */
  z-index: 1; /* Coloca el gradiente sobre la imagen */
  opacity: 0; /* Completamente transparente inicialmente */
  transition: opacity 0.4s ease; /* Animación suave */
}

.card-socie img {
  position: relative; /* Asegura que esté detrás del gradiente */
  z-index: 0;
  object-fit: cover; /* Mantiene relación de aspecto */
  transition: all 0.4s ease;
}

.card-socie:hover::before {
  opacity: 1; /* Muestra el gradiente */
}

.card-socie:hover .card-img-overlay {
  opacity: 1; /* Muestra el texto */
}

.card-img-overlay {
  z-index: 2; /* Texto sobre el gradiente */
}

.somos-cargo{
  color: #F9F9F4;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  display: none;
}
.somos-titulo{
  color: #F9F9F4;
  font-size: 12px;
  line-height: 16px;
  display: none;
}
.card-socie:hover .somos-cargo{
  display: inherit;
}
.card-socie:hover .somos-titulo{
  display: inherit;
}

.h4-sumate{
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
}
.h4-redes{
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #FFB555;
}
.p-redes{
  font-size: 16px;
  line-height: 24px;
  color: #F9F9F4;
}
.img-container{
  height: 50px;
  align-content: center;
}

/* Contacto Servicios */

.h4-contacto{
  font-weight: 700;
  font-size: 52px;
  line-height: 100%;
}
.bg-naranja{
  background-color: #F37320;
}
.bg-violeta2{
  background-color: #663DA0;;
}
.violeta2{
  color: #663DA0;
}
.h5-contacto{
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #585858;
}
.form-bg-blanco{
  background-color: #FFFFFF;
  border-radius: 12px;
}
.form-label{
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #585858;
}
.input{
  border-radius: 6px;
  border-color: #585858;
  font-size: 24px;
}
.textarea{
  border-radius: 6px;
  border-color: #585858;
  font-size: 24px;
}
.row-unete{
  border-radius: 12px;
}
.h3-unete{
  color: #F9F9F4;
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
}

/*Blog Index*/
.h5-blog-index{
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
  color: #F37320;
}
.p-blog-index{
  font-size: 16px;
  line-height: 24px;
  color: #24282E;
}
.card-blog-index{
  border-radius: 8px;
}
.gris2{
  color: #24282E;
}
.btn-redondo{
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fondo-naranja1, .fondo-naranja1:hover{
  background-color: #F37320;
  border-color: #F37320;
}
.fondo-blanco{
  background-color: #FFFFFF;
}
.btn-paginacion, .btn-paginacion:hover{
  font-size: 15px;
  font-weight: 700;
  line-height: 100%;
  border: 1px solid #585858;
  padding: 0;
  color: #24282E;
}
.btn-paginacion:hover{
  background-color: #F37320;
  color: #FFFFFF;
}
.activo{
  color: #FFFFFF;
}
.btn-flecha, .btn-flecha:hover{
  border-color: currentColor;
  color: #24282E;
}
.blog-entrada{
  transition: background-color 0.3s ease-out;
}
.blog-entrada:hover{
  background-color: #F37320;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.card-title-blog-entrada:hover{
  color: #24282E;
}
.card-title-blog-entrada{
  color: #F37320;
  transition: background-color 0.3s ease-out;
}

.blog-entrada:hover .card-title-blog-entrada{
  color: #24282E!important;
}
.card-blog-item:hover .card-title-blog-entrada{
  color: #24282E;
}
.card-blog-item:hover .blog-entrada{
  background-color: #F37320;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.img-card-blog{
  height: 260px;
}
.blog-index-last-post{
  height: 420px;
  width: 800px;
}
.card-destacada{
  height: 373px;
}

/*Blog Entrada*/
.blog-titulo{
  font-weight: 800;
  font-size: 40px;
  line-height: 48px;
  color:#F37320;
}
.autora{
  font-size: 12px;
  line-height: 16px;
  color: #576E81;
}
.blog-texto p{
  font-size: 16px;
  line-height: 24px;
  color: #24282E;
}
.blog-texto h1{
  color: #24282E;
}
.blog-texto img{
  max-width: 100%;
  height: auto;
}
.blog-texto #sdfootnote1{
  margin-top: 2em;
}
.blog-texto .sdfootnote-western{
  font-size: 16px;
  line-height: 24px;
  color: #585858;
}
.blog-texto .sdfootnotesym{
  font-size: 16px;
  line-height: 24px;
  color: #F37320;
  text-decoration: none;
  margin-right: 4px;

}
.row-comparte{
  background-color: #F37320;
  border-radius: 12px;
}
.h3-comparte{
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
  text-align: justify;
  color: #F9F9F4;
}

/* Ajustes generales para móvil */
@media (max-width: 768px) {
  /* Navbar */
  .navbar-nav {
    text-align: center;
    padding-top: 1rem;
  }
  .navbar-toggler{
    color: #f8f9f4;
    border-color: #f8f9f4;
  }
  .navbar-toggler-icon{
    color: #f8f9f4;
    border-color: #f8f9f4;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(248, 249, 244, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
  }
  /* Hero Section */
  .hero-h1 {
    font-size: 40px; /* Móvil */
  }
  .hero-h4 {
    font-size: 24px;
    line-height: 1.3;
  }

  /* Sección Pioneros */
  .h3-pioneros {
    font-size: 32px;
    text-align: center;
  }

  /* Footer */
  .redes-sociales {
    justify-content: center !important;
  }
  .carousel-item {
    padding: 0 15px !important; /* Reduce padding */
  }
  .card-cliente {
    margin: 0 auto; /* Centra la card */
    max-width: 100%; /* Evita overflow */
    min-height: 380px;
  }
  li-techs {
    border-right: 1px solid #FE9205; /* Color naranja */
  }
  .li-techs {
    border-right: none !important;
  }

  /* Ensure card buttons are perfectly rounded on mobile */
  .card-body .btn-redondo {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .btn-redondo svg {
    vertical-align: middle;
  }
  .somos-h2{
    font-size: 40px;
  }
  .card-socie {
    width: 100%;
    height: auto;
  }
  .blog-titulo {
    font-size: 32px;
    line-height: 1.2;
  }

  /* Contacto Pages Mobile Adjustments */
  .h4-contacto {
    font-size: 36px; /* Reduced from 52px */
  }
  .h5-contacto {
    font-size: 18px; /* Reduced from 20px */
  }
  .input, .textarea {
    font-size: 16px; /* Reduced from 24px */
  }
  .h3-unete {
    font-size: 22px; /* Reduced from 28px */
    line-height: 1.3;
  }
}