@charset "utf-8";
/* texto expandible con transición */
.read-more-container {
  scroll-margin-top: 20px; /* Espacio para scroll suave */
}

.read-more-content {
  display: block; /* Cambiamos a block para que max-height funcione */
  max-height: 0; /* Altura inicial en 0 */
  opacity: 0;
  overflow: hidden;
  transition: max-height 1.1s ease-in-out, opacity 0.8s ease-in-out;
  margin: 0; /* Eliminar cualquier margen */
  padding: 0; /* Eliminar cualquier padding */
}

.read-more-content.expanded {
  max-height: none; /* Se ajustará automáticamente al contenido */
  opacity: 1;
  padding-top: 10px; /* Añadir algo de espacio solo cuando está expandido */
}

.read-more-dots {
  display: inline; /* Muestra los puntos suspensivos inicialmente */
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.read-more-dots.hidden {
  opacity: 0;
  display: none;
}
.read-more-button {
  background-color: rgba(213,25,83,1); /* Color de fondo */
  border: none; /* Sin borde */
  color: white; /* Color del texto */
  padding: 3px 10px; /* Espaciado interno */
  text-align: center; /* Alineación del texto */
  text-decoration: none; /* Sin subrayado */
  display: inline-block; /* Mostrar como bloque en línea */
  font-size: 1.02em; /* Tamaño de la fuente */
  margin: 1.5em 2px; /* Margen externo */
  cursor: pointer; /* Cambiar el cursor al pasar por encima */
  border-radius: 5px; /* Bordes redondeados */
  transition: background-color 0.6s; /* Transición suave */
}

.read-more-button:hover {
  background-color: rgba(87,136,153,1); /* Cambiar el color al pasar por encima */
}
/* fin de texto expandible*/