/* Estilos para dispositivos con un ancho máximo de 768px */
      @media (max-width: 768px) {

        /* Utilizamos Flexbox para cambiar el orden de los divs */
        .container1 {
          display: flex;
          flex-direction: column;
          /* Los divs se apilan verticalmente */
        }

        .mueve-este-div {
          order: -1;
          /* Mueve este div arriba del todo */
        }
      }
.img-fluid{
  height: 330px;
  object-fit: contain;
}
.img-fluida{
  padding:10px;
}

.text {
    overflow: hidden;
  }

  .read-more-btn {
    display: none;
    border: 1px solid #ccc;
    margin-bottom: -1px;
  }
  
      .div-contenido {
        margin: 10px;
        padding: 10px;
        border: 1px solid #ddd;
      }


.texto__container  li{
    margin-bottom: 8px;
    padding-left: 15px; 
    position: relative;
  }

.texto__container li::before {
    font-family: 'Font Awesome 6 Pro'; 
    content: '\f058'; 
    margin-right: 10px; 
    font-size: 16px; 
    color: #117a8b; 
}

.clickable__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none; /* Para quitar el subrayado del enlace */
    color: inherit; /* Para heredar el color del texto del contenedor */
    transition: color 0.3s;
}
.clickable__link:hover {
    color: #103964; /* Cambia a tu color deseado al pasar el ratón por encima */  
}

.clickable__link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px; /* Grosor del efecto "___" */
    background-color: #4576aa; /* Color del efecto "___" */
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s; /* Agrega una transición suave para el ancho del efecto "___" */
}

.clickable__link:hover::after {
    width: 100%; /* Ancho completo al pasar el ratón por encima */
}


/* Regla de medios para dispositivos pequeños (por ejemplo, smartphones en posición vertical) */
@media only screen and (max-width: 480px) {
    .clickable__link {
        display: inline;
        width: initial;
        height: initial;
        /* Otros ajustes según sea necesario para pantallas pequeñas */
    }
}

/* Regla de medios para dispositivos medianos (por ejemplo, smartphones en posición horizontal o tablets) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .clickable__link {
        display: inline;
        width: initial;
        height: initial;
        /* Otros ajustes según sea necesario para pantallas medianas */
    }
}

/* Regla de medios para dispositivos móviles */
@media only screen and (max-width: 768px) {
    .clickable__link {
        display: inline; /* Otra opción podría ser display: inline-block; según tus necesidades específicas */
        width: initial;
        height: initial;
    }
}
.titulo__descripciones
{
  font-size: 1rem;
}