
.page-header{
  text-align: center;    display: inline;
}
 /* NAVBAR */

    .navbar {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .navbar-brand img {
        height: 40px;
        object-fit: contain;
      }
      .navbar-nav .nav-link {
        color: #dc3545 !important;
        font-weight: 500;
        transition: color 0.3s ease;
      }
      .navbar-nav .nav-link:hover {
        color: #c82333 !important;
      }
      .members-label {
        color: #6c757d;
        margin-right: 5px;
      }
      .members-count {
        color: #dc3545;
        font-weight: bold;
      }
  
      /* Slick Carousel */
      .slick-carousel-wrapper {
        width: 100%;
        position: relative;
        margin: 0 auto;
        background: #f8f9fa;
        height: 150px; /* Alto fijo para el carrusel */
        overflow: hidden; /* Oculta el desbordamiento */
      }
      .slick-carousel img {
        width: 100%;
        height: 150px; /* Alto fijo para las imágenes */
        object-fit: cover; /* Ajusta la imagen sin distorsionar */
        border: 5px solid black;
      }
      .slick-prev, .slick-next {
        z-index: 1;
      }
      .slick-prev:before, .slick-next:before {
        color: #dc3545;
      }
      .slick-slide {
        transition: transform 0.3s ease; /* Transición suave */
      }
  
      /* Filtros (sidebar) */
      .filters {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .filters h5 {
        color: #dc3545;
        font-weight: bold;
      }
      .filters ul {
        list-style: none;
        padding-left: 0;
      }
      .filters ul li a {
        text-decoration: none;
        color: #f0f0f0;
        transition: color 0.3s ease;
      }
      .filters ul li a:hover {
        color: #faedef;
      }
  
      /* Sección central */
      .section-title {
        color: #dc3545;
        font-weight: bold;
        margin-bottom: 1rem;
      }
      .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      .card img {
        width: 100%;
        height: 150px;
        object-fit: cover;
      }
      .btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
        transition: background-color 0.3s ease, border-color 0.3s ease;
      }
      .btn-danger:hover {
        background-color: #c82333;
        border-color: #bd2130;
      }
  
      /* Nuevas Publicaciones: imagen pequeña + texto a la derecha */
      .publication-item {
        transition: transform 0.3s ease;
      }
      .publication-item:hover {
        transform: translateX(5px);
      }
      .publication-item img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 5px;
      }
      .publication-item a {
        color: #333;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
      }
      .publication-item a:hover {
        color: #dc3545;
      }
  
      /* Footer */
      footer.bg-dark {
        color: #fff;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
      }
      footer a.text-white {
        transition: color 0.3s ease;
      }
      footer a.text-white:hover {
        color: #dc3545 !important;
      }

      .slick-carousel-wrapper {
        width: 100%;
        position: relative;
        margin: 0 auto;
        background: #f8f9fa;
        height: 150px; /* Altura fija para el carrusel */
        overflow: hidden; /* Oculta el desbordamiento */
      }
      .slick-carousel img {
        width: 100%;
        height: 150px; /* Mantiene la altura fija */
        object-fit: cover; /* Ajusta la imagen para que se recorte sin distorsión */
        border: 5px solid black;
      }
      .card img {
        width: 100%;
        height: 200px; /* Altura fija para las imágenes dentro de las tarjetas */
        object-fit: cover; /* Mantiene la imagen en proporción sin distorsionarla */
      }
       