.card-servicios {
  display: inline-block;
}

.card-container-li {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: 100%;
   
  padding: 5px 50px;
  background: red;
}

.card-container-li .card-item {
  background: greenyellow;
  width: 120px;
  height: 80px;
}








.li-soap {    
	animation: slideIn-li 2s forwards; /* Aplica la animación de entrada */  
  padding: 0px;
  margin: 0px;
  position: relative;  
  z-index: 1;
  top:-140px;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}



.link-interes-li {    
	animation: slideIn-li 2s forwards; /* Aplica la animación de entrada */  
  padding: 0px;
  margin: 0px;
  position: relative;  
  top: -80px;
  z-index: 1;
}

.container-li-soap {
    width: 100%;
    padding: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    height: auto;    
    border-radius: 7px;
    border: 1px solid #33333370;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);    
}
@keyframes slideIn-li {
  from {
    transform: translateY(-10%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.container-li {
    width: 100%;
    padding: 10px 40px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 10px;
    height: auto;    
    border-radius: 7px;
    border: 1px solid #33333370;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);
}























.item-li {
  padding: 15px 0px; 
}
.container-li h2 {
    font-size: 14px;
    color: var(--color-base-Negro);
    margin: 0px;
    padding: 0px;
}
.link-interes-li .container-li hr {
  position: relative;
  margin: 0px ;
  padding: 0;
  background: #33333370;
} 
.card-li {
  position: relative;
  display: flex;
  height: 75px; 
  object-fit: contain;      
  border-radius: 7px;
  border: 1px solid #33333370;
  background: var(--color-base-Blanco);     
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 1;
}
.card-li:hover {
  border: 2px solid var(--color-base-Negro);
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);
  transform: scale3d(1.09, 1.09, 1.09);  
}
.card-li .card-logo { 
  object-fit: contain;
  width: 65px;
  height: 65px;
  padding: 10px;
}
.li-soap .container-li-soap .tab-2 .card-li p,
.card-li p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: var(--color-base-Blanco);
  background: var(--color-base-Negro);
  font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 0px 7px 7px;
  bottom: 7px;
  width: 100%;
}
.card-img-wrapper img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;  
}
.card-li-webp {
  display: flex; 
  justify-items: center;
  align-items: center;
  text-align: center;
  height: 75px;
  object-fit: contain;      
  border-radius: 7px;
  border: 1px solid var(--color-base-Negro);
  background: var(--color-base-Blanco);   
  padding: 0px 7px;
  margin-top: 10px;
  line-height: 15px;  
}
.card-li-webp:hover {
  border: 2px solid var(--color-base-Negro);
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);
  transform: scale3d(1.09, 1.09, 1.09);  
}
.card-li-webp span {
  font-size: 11px;
  font-weight: bold;  
  color: var(--color-base-Negro);  
}





.Web-interes,
.lic-dg-li {    
	animation: slideIn-li 2s forwards; /* Aplica la animación de entrada */  
  padding: 0px;
  margin: 0px;
  position: relative;  
  z-index: 1;
  top:-130px;
  margin-bottom: 20px;

}







.container-web-li {
    width: 100%;
    /* padding: 10px 20px 20px 20px;*/
    padding: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 10px;
    height: auto;    
    border-radius: 7px;
    border: 1px solid #33333370;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);    
}

.title-web-li {
  margin-bottom: 15px; 
  border-bottom: 1px solid var(--color-base-Negro);
  background: var(--color-base-Negro);
  color: var(--color-base-Blanco);
  margin:0px;
  padding: 5px 20px;
  border-radius: 7px 7px 0px 0px;
  text-align: left;
  
  span {
    color: var(--color-base-Blanco);
    font-weight: bold;
    font-size: 12px;    
    
  }
  i {
    color: var(--color-base-Blanco);  
    font-weight: bold;
    font-size: 16px;
    padding-left: 10px;
  }
  hr{
    margin: 0px 0px 1px 0px;
  }
}
.title-web-li:hover {
  span,i{color: var(--color-base-Dorado);}
  hr{background: var(--color-base-Dorado);}
}
.apo-margen-container {
  margin: 10px 30px 0px 30px;
}
.text-title {
  margin: 5px 30px 0px 30px;
  color: black;
  text-align: justify;
}


.container-card-web-li {
  margin: 20px 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.card-web-li {
  height: 80px;
  width: 120px;
  border-radius: 7px;  
  color: var(--color-base-Negro);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 12px;
  position: relative;
  padding: 0;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);
  transition: 5s ease ease-in-out;

  img {
    width: 120px;
    height: 80px;
    border-radius: 7px;
    object-fit: fill;
  }

  span {    
    width: 100%;   
    position: absolute;
    display: flex;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color-base-Blanco);
    text-shadow: 1px 1px 2px black; /*  Sombra sutil */
    font-size: 11px;
    padding: 8px;
    
    justify-content: center;
    text-align: center;
    align-items: center;
    border-top: 2px solid var(--color-base-Blanco);
    border-bottom: 2px solid var(--color-base-Blanco);
  }
  span:nth-of-type(4){
    background-color: rgba(0, 0, 255, 1); /*  Fondo semitransparente */
  }
}

.card-web-li:hover {
  span{
    border-top: none;
    border-bottom: none;
    top: 50%;
    width: 100%;
    height: 100%;    
    background-color: rgba(0, 0, 0, 0.7); /*  Fondo semitransparente */
    border-radius: 7px;
  }  
}
.card-web-li:nth-child(4n) span{
  padding: 8px 3px;
  background-color: rgba(255, 0, 0, 0.7); /*  Fondo semitransparente */
}
.card-web-li:nth-child(4n) span:hover{
  background-color: rgba(255, 0, 0, 0.7); /*  Fondo semitransparente */
}
.card-web-li:nth-child(5){
  padding: 5px;

  span {
    padding: 14.5px 3px;
    color: transparent;
    text-shadow: none;
    font-weight: 600;
    background-color: transparent;
    border-top: transparent;
    border-bottom: transparent;
  }
} 
.card-web-li:nth-child(5) span:hover{
  color: var(--color-base-Negro);
  text-shadow: none;
  font-weight: bold;
  background-color: rgba(255, 255, 0, 0.7); /*  Fondo semitransparente */
}

.card-web-li:nth-child(6n) span{
  padding: 3px;
  background-color: rgba(145, 145, 147, 0.7); /*  Fondo semitransparente */
}
.card-web-li:nth-child(6n) span:hover{
  background-color: rgba(145, 145, 147, 0.7); /*  Fondo semitransparente */
}

.card-web-li:nth-child(7n) span{
  background-color: rgba(0, 112, 150, 0.7); /*  Fondo semitransparente */
}
.card-web-li:nth-child(7n) span:hover{
  background-color: rgba(0, 112, 150, 0.7); /*  Fondo semitransparente */
}

.card-web-li:nth-child(8n) span{
  padding: 13px 5px;
  background-color: rgba(219, 219, 219, 0.7); /*  Fondo semitransparente */
}
.card-web-li:nth-child(8n) span:hover{
  background-color: rgba(219, 219, 219, 0.7); /*  Fondo semitransparente */
}


.card-web-li:nth-child(9n) span{
  padding: 13px 5px;
  background-color: rgba(189, 195, 239, 0.7); /*  Fondo semitransparente */
}
.card-web-li:nth-child(9n) span:hover{
  background-color: rgba(189, 195, 239, 0.7); /*  Fondo semitransparente */
}





.card-web-li:nth-child(10n) span{
  padding: 7px 5px;
  background-color: rgba(189, 195, 239, 0.7); /*  Fondo semitransparente */
}
.card-web-li:nth-child(10n) span:hover{
  background-color: rgba(189, 195, 239, 0.7); /*  Fondo semitransparente */
}

.card-web-li:nth-child(11){
  padding: 5px;
  
  span {
    padding: 14.5px 3px;
    color: transparent;
    text-shadow: none;
    font-weight: 600;
    background-color: transparent;
    border-top: transparent;
    border-bottom: transparent;
  }
}
.card-web-li:nth-child(11) span:hover{
  color: var(--color-base-Blanco);
  text-shadow: none;
  font-weight: bold;
  background-color: rgba(0, 44, 72, 0.7); /*  Fondo semitransparente */
}

.card-web-li:nth-child(12) {
  padding: 5px;
  span {
    padding: 8px 5px;
    background-color: rgba(0, 44, 72, 0.7); /*  Fondo semitransparente */
  }
}
.card-web-li:nth-child(12) span:hover{
  background-color: rgba(0, 44, 72, 0.7); /*  Fondo semitransparente */
}


.card-web-li:nth-child(13){
  padding: 0px;
  img {
    border-radius: 0px;
    height: 30px;
    width: 70%;
    top: -50px;
  }
  span {
    padding: 14.5px 3px;
    color: transparent;
    text-shadow: none;
    font-weight: 600;
    background-color: transparent;
    border-top: transparent;
    border-bottom: transparent;
  }
} 
.card-web-li:nth-child(13) span:hover{
  color: transparent;
  text-shadow: none;
  font-weight: bold;
  background-color: rgba(215, 214, 214, 0.303); /* Fondo semitransparente */
}




.card-web-li:nth-child(16){
  padding: 5px;
  
  span {
    padding: 14.5px 3px;
    color: transparent;
    text-shadow: none;
    font-weight: 600;
    background-color: transparent;
    border-top: transparent;
    border-bottom: transparent;
  }
}
.card-web-li:nth-child(16) span:hover{
  color: var(--color-base-Blanco);
  text-shadow: none;
  font-weight: bold;
  background-color: rgba(0, 44, 72, 0.7); /*  Fondo semitransparente */
}










































.container-web-elec {
  width: 100%;   
  padding: 0px;
  margin: 0px;
  height: auto;
}

.container-card-electricidad {
  margin: 0px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px; 
  place-items: center;
  justify-items: center;
  align-items: center;
}

.card-web-elec {
  height: 200px;
  width: 100%;
  background: #333333dd;
  border-radius: 7px; 
  color: var(--color-base-Blanco);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 12px;
  position: relative;
  padding: 0;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);
  transition: 5s ease ease-in-out;

  a {
    display: grid; place-items: center; text-align: center;
    
    img {     
      width: 120px;
      height: 80px;
      margin-bottom: 10px;
      border-radius: 7px;     
      /* cambiar color imagen sgv */
      -webkit-filter: brightness(100);
      filter: brightness(100);
       
      /*
      filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
      */
     /* color de fondo imagen
      background-image: url("ruta/a/mi.svg");
      background-color: White;
      background-repeat: no-repeat;
      background-size: cover;
      filter: brightness(150%) saturate(200%);
      */      
    }
   
  
    span {
      width: 100%;    
      color: var(--color-base-Blanco);
      font-size: 11px;
      line-height: 15px;
      padding: 8px; 
    }
  } 
}

.card-web-elec:hover {
  background: var(--color-base-Blanco);

  a {
     img{
      /* valor 0 color negro
      /* valor 1 por defecto color de la imagen */      
      -webkit-filter: brightness(1);
       filter: brightness(1);
    }
    span{
      color: black;
    }
  }  
}



























.card-neon2,
.card-lic-dg-li {
  height: 290px;
  width: 210px;
  border-radius: 7px;  
  color: var(--color-base-Negro);
  position: relative;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 12px;
  padding: 6px;
  border: 0.7px solid var(--color-base-Negro);
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.05), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);
  transition: 5s ease ease-in-out; 
  overflow: hidden;

  

  i {
    font-size: 18px;
    margin-right: 5px;
  }

  .title-card {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 10px;
    padding: 0 0 5px 0;   
    border-bottom: 1px solid var(--color-base-Negro);
    font-size: 11px;
    font-weight: bold;
    
  }
  .img-lic-dg-1 {
    
    height: 80px;
    width: 80px;
    object-fit: contain;
  }
  .img-lic-dg-2 {    
    height: 80px;
    width: 100px;
    object-fit: contain;
  }
  .img-lic-dg-3 {
    height: 80px;
    width: 100px;
    object-fit: contain;
  }
  .img-lic-dg-4 {
    height: 80px;
    width: 170px;
    object-fit: fill;
  }
    
  p {
    font-size: 11px;
    width: 100%;
    margin: 0;
    padding: 10px 5px;
    color: var(--color-base-Negro);
    line-height: 15px;
    text-align: justify;    
  }  
  .btn-lic-dg-1 {
    position: absolute;    
    left: 10px;
    right: 10px;
    display: inline-flex;
    margin: 0px;     
    border: 1px solid var(--color-base-Negro);
    border-radius: 6px;
    bottom: 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: bottom;
    padding: 3px 5px;
    width: auto;
    background: var(--color-base-Negro);
    cursor: pointer;
    /*transition: background-color 2.5s ease;*/    
    box-shadow: inset 0 0 0 0 var(--color-base-Blanco);
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.7s;
    
    i {
      margin: 0;
      font-size: 20px;
      padding: 0; 
      color: var(--color-base-Blanco);
      justify-content: center;
      align-items: center; 

    }
    p {
      margin: 0;
      margin-left: 10px;
      padding: 10px 0px;
      font-size: 12px;   
      color: var(--color-base-Blanco);
      font-weight: bold;
      width: auto;
      justify-content: center;
      align-items: center;   
    }
  }   
  .card-foter {
    /* display: bottom; */
    position: absolute;
    bottom: 5px;
    background: #00ffff;
  }
  .btn-lic-dg-1:hover {    
    box-shadow: inset 400px 0 0 0 var(--color-base-Blanco);   
    i,p {color: var(--color-base-Negro);}
  }
  .btn-lic-dg-2 {
    position: absolute;    
    left: 10px;
    right: 10px;
    display: inline-flex;
    margin: 0px;     
    border: 1px solid var(--color-base-Negro);
    border-radius: 6px;
    bottom: 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: bottom;
    padding: 0px 5px;    
    width: auto;
    background: var(--color-base-Negro);
    cursor: pointer;     
    box-shadow: inset 0 0 0 0 var(--color-base-Blanco);
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.7s;

    i {
      color: var(--color-base-Blanco);
      font-size: 28px;
    }
    .p-texto {
      position: relative;      
      margin: 0;
      padding: 0;      
      display: block;
      line-height: 10px;
      text-align: left;
    }       
    .p-1 {
      position: relative;
      display: flex;
      margin: 0;
      padding: 0;     
      font-size: 11;
      font-weight: 500;  
      color: var(--color-base-Blanco);   
      height: 14px;
      text-align: left;   
      left:4px;  
    }
    .p-2 {
      position: relative;
      display: flex;
      margin: 0;
      padding: 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--color-base-Blanco);
      height: 25px;
      top: -5px;
      text-align: left;      
    }
    img {height: 24px;}
  }
  .btn-lic-dg-2:hover {
    box-shadow: inset 400px 0 0 0 var(--color-base-Blanco);
    i, .p-1, .p-2 {color: var(--color-base-Negro);}    
  }
}
  



.card-lic-dg-li:hover {
  border: none;
  transition: 0.2s ease-in-out;
  background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 5px, transparent 5px) 0% 0%/7px 7px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 5px, transparent 5px) 100% 0%/7px 7px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 5px, transparent 5px) 0% 100%/7px 7px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 5px, transparent 5px) 100% 100%/7px 7px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 4px) calc(100% - 14px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 14px) calc(100% - 4px) no-repeat,
            linear-gradient(2deg, #00ffff 1%, #00ffff 6%, #ffff00 19%, #ffff00 39%, #ff00ff 63%, #ff00ff 80%, #000000 94%, #000000 100%);
  border-radius: 7px;
  padding: 7px;
  box-sizing: border-box;

}


.container-card-lic-dg-li {
  margin: 0;
  padding: 15px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;

}


  .card-lic-dg-li:nth-child(2n),
  .card-lic-dg-li:nth-child(3n) {    
    p {
      text-align: center;
    }
    
  }





/* link interes entidades Publicas */
.li-ETPublicas {    
	animation: slideIn-li 2s forwards; /* Aplica la animación de entrada */  
  padding: 0px;
  margin: 0px;
  position: relative;  
  z-index: 1;
  top: 0px;
  margin-bottom: 20px; 
}
.container-ETPublicas {
    width: 100%;    
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 10px;
    height: auto;    
    border-radius: 7px;
    border: 1px solid #33333370;
    box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);    
}
.card-body{
  padding: 10px 40px;
  
}

.card-lic-dg-li:hover {
  border: none;
  transition: 0.2s ease-in-out;
  background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 5px, transparent 5px) 0% 0%/7px 7px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 5px, transparent 5px) 100% 0%/7px 7px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 5px, transparent 5px) 0% 100%/7px 7px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 5px, transparent 5px) 100% 100%/7px 7px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 4px) calc(100% - 14px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 14px) calc(100% - 4px) no-repeat,
            linear-gradient(2deg, #00ffff 1%, #00ffff 6%, #ffff00 19%, #ffff00 39%, #ff00ff 63%, #ff00ff 80%, #000000 94%, #000000 100%);
  border-radius: 7px;
  padding: 7px;
  box-sizing: border-box;

}



/* link interes entidades Publicas */
.li-intro {    
	animation: slideIn-li 2s forwards; /* Aplica la animación de entrada */  
  padding: 0px;
  margin: 0px;
  position: relative;  
  z-index: 1;
  top: -100px;
  margin-bottom: 20px;
  
}
.container-li-intro {
  width: 100%;    
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  margin-bottom: 10px;
  height: auto;    
  border-radius: 7px;
  border: 1px solid #33333370;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.2), -4px -4px 10px 0 rgba(0, 0, 0, 0.19);
  overflow: hidden; 
}

.descripcion-li-intro { 
  margin: 20px;
  padding: 0px;  
  /* white-space: 10px;*/

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  grid-template-rows: repeat(2, 1fr);  
  gap: 15px;  
}
.cards-li-intro {
  position: relative;
  display: flex;
  margin: 0px;  
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.09), -4px -4px 10px 0 rgba(0, 0, 0, 0.09);
  border-radius: 7px;
  overflow: hidden;  
}
.cards-li-intro:nth-child(1) {
  grid-column: span 3 / span 3;
  height: auto;
  background: #1a76d125;
  .img-li-intro { width: 90px; background: var(--color-base-Azul); color: var(--color-base-Blanco);}
  
}
.cards-li-intro:nth-child(2) {
  grid-row-start: 2;
  background: rgba(255, 217, 0, 0.130);
  .img-li-intro {width: 210px; background: gold; color: var(--color-base-Negro);}
}
.cards-li-intro:nth-child(3) {
  grid-row-start: 2;
  background: #de002c28;
  .img-li-intro {width: 90px; background: #DE002B; color: var(--color-base-Blanco);}
}
.cards-li-intro:nth-child(4) {
  grid-row-start: 2;
  background: #3333331c;
  .img-li-intro {width: 90px; background: var(--color-base-Negro); color: var(--color-base-Blanco);}
}


.img-li-intro {  
  display: flex;
  position: relative;
  margin: 0;
  justify-content: center;
  align-items: center;  
}
.img-li-intro i {
  margin: 0;
  padding: 0;
  display: flex;
  font-size: 40px;
  justify-self: center;
}
.contenido-li-intro {
  display: block;
  margin: 0;
  padding: 15px;
  justify-content: center;
  align-items: center;
}
.contenido-li-intro span {
  font-size: 12px;
  font-weight: bold;  
  /*text-decoration: underline;*/ /* subrayado */
  color: black;
  margin: 0;
  
}
.contenido-li-intro p {
  margin: 0;
  font-size: 12px;
  color: black;
  text-align: justify;
  line-height: 18px;  
}
.contenido-li-intro ul.lista-personalizada {
  margin: 0;
  font-size: 12px;
  color: black;
  text-align: justify;
  line-height: 18px;
  list-style-type: none; /* Cambia la viñeta */  
}




.contenido-li-intro ul.lista-personalizada li::marker {
    color: red; /* Color solo de la viñeta */
  }

.texto-movil-li-intro {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 20px;
  background: #FEF5EE;
}

.texto-movil-li-intro::before,
.texto-movil-li-intro::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px; /* Ancho del efecto de opacidad */
  height: 100%;
  filter: blur(0px); /* Intensidad del difuminado */
  z-index: 1;
}

/* Lado izquierdo */
.texto-movil-li-intro::before {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,229,229,0.5));
}

/* Lado derecho */
.texto-movil-li-intro::after {
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,229,229,0.5));
}











@media (max-width:468px) { 
  .li-intro {top: -65px;}
  .li-soap {
    top:0px;
    margin: 5px;
  }
  .Web-interes {
    top: 0px;
    margin: 5px;
  }
  .lic-dg-li {
    top:0px;
    margin: 5px;

    .card-lic-dg-li {
      padding: 10px 30px 20px 30px;
      width: 100%;
      height: 320px;      
      
      .img-lic-dg-1 {
        object-fit: contain;
        height: 110px;
        width: 110px;
      }
      .img-lic-dg-2 {
        object-fit: contain;
        height: 135px;
        width: 135px;
      }
      a,
      .btn-lic-dg-1
      .btn-lic-dg-2 { 
        margin: 10px 20px;
      }

    }    
  }  

  .link-interes-li {
    top: 0;
    margin: 5px;
  }  
}


@media (min-width:468px) {
  .li-intro {top: 30px; }

  .container-ETPublicas {max-width: 540px}
  .li-soap {top: -30px;}
  .container-li-soap {max-width: 540px}
  .lic-dg-li {top: -20px}
  .container-card-lic-dg-li{
    width: 100%;   
  }
  .card-lic-dg-li {
    height: 290px;
    width: 100%;
  }
  .Web-interes{top: -20px}
  .container-web-li {max-width: 540px;}
  .container-li {max-width: 540px}
}


@media (min-width:576px) {
  .container-ETPublicas {max-width: 540px;}
  .li-soap {top: -40px;}
  .container-li-soap {max-width: 540px}
  .lic-dg-li {top: -30px}
  .Web-interes{top: -30px;}
  .container-web-li {max-width: 540px;}
  .container-li {max-width: 540px}
}

@media (min-width:768px) {
  .li-intro {top: -80px}
  .li-ETPublicas {top: -70px;}
  .container-ETPublicas {max-width: 720px;}
  .li-soap {top: -70px;}
  .container-li-soap {max-width: 720px;}
  .lic-dg-li {top: -60px}
  .Web-interes{top: -60px}
  .container-web-li {max-width: 720px;}
  .container-li {max-width: 720px}
}

@media (min-width:992px) {
  
  .container-ETPublicas {max-width: 1140px;}
  .li-soap {top: -70px;}
  .container-li-soap {max-width: 1140px}
  .lic-dg-li {top: -130px}
  .Web-interes{top: -130px}
  .container-web-li {max-width: 1140px;}
  .container-li {max-width: 1140px }
}

@media (min-width:1200px) {
  .li-intro {top: -90px;}
  .container-li-intro {max-width: 1140px;}
  .container-ETPublicas {max-width: 1140px}

  .li-soap {top: 0px;}
  .container-li-soap {max-width: 1140px}
  .lic-dg-li {top: 0px}
  .Web-interes{top: 0px}
  .container-web-li {max-width: 1140px;}
  .container-li {max-width: 1140px }
}