/* Estilos para el bloque Muestra Blog */
.muestra-blog {
    display: flex;
    gap: 20px;
    margin: 20px 0;
    height: 600px;
    position: relative;
}

.muestra-blog .entrada {
    border: 1px solid #ddd;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Ajustar la sombra a 0.4 */
    flex: 1 1 calc(33.333% - 20px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Por defecto, ocultamos todas las tarjetas */
.muestra-blog .entrada {
  display: none;
}

/* En pantallas pequeñas (móviles) solo se muestra 1 tarjeta */
@media (max-width: 600px) {
  .muestra-blog .entrada:not(:nth-child(1)) {
    display: none;
  }
}

/* En pantallas medianas (tablets) se muestran 2 tarjetas */
@media (min-width: 601px) and (max-width: 1024px) {
  .muestra-blog .entrada:nth-child(1),
  .muestra-blog .entrada:nth-child(2) {
    display: block;
  }
}

/* En pantallas grandes (portátiles y superiores) se muestran todas las tarjetas */
@media (min-width: 1025px) {
  .muestra-blog .entrada {
    display: block;
  }
}


.muestra-blog .entrada img {
    width: 100%;
    height: 250px; /* Aumentar la altura de las imágenes */
    object-fit: cover; /* Recortar las imágenes si es necesario */
    display: block;
}

.muestra-blog .entrada .categoria {
    position: absolute;
    top: 220px;
    left: 0px;
    background-color: green; /* Fondo verde */
    color: white; /* Texto blanco */
    padding: 5px;
    border-radius: 0px;
    font-size: 12px;
    font-weight: normal; /* Asegurar que el texto sea más visible */
    font-family: Arial, sans-serif; /* Cambiar el tipo de letra si es necesario */
}

.muestra-blog .entrada .categoria a {
    color: white;
}

.muestra-blog .entrada h3 {
    color: black;
    font-size: 18px;
    margin: 10px 15px;
    font-weight: bold; /* Título en negrita */
}

.muestra-blog .entrada h3 a {
    color: inherit; /* Mantener el color heredado */
    text-decoration: none;
}

.muestra-blog .entrada h3 a:hover {
    color: green; /* Cambiar a verde al pasar el ratón */
}

.muestra-blog .entrada p {
    font-size: 18px;
    color: #555;
    margin: 0 15px 15px 15px; /* Aumentar la separación entre el texto de la entrada y la fecha */
}

.muestra-blog .entrada .fecha {
    position: absolute;
    right: 0px;
    /*align-self: flex-end;*/
    font-size: 18px;
    color: #999;
    margin: auto 15px 10px 15px;
    bottom: 0px;
}

/* Estilos para las flechas de navegación */
.muestra-blog .flecha-izquierda,
.muestra-blog .flecha-derecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: grey; /* Flechas en gris */
    padding: 10px;
    cursor: pointer;
    font-size: 32px; /* Tamaño de las flechas */
    transition: color 0.3s ease; /* Añadir una transición suave */
}

.muestra-blog .flecha-izquierda:hover,
.muestra-blog .flecha-derecha:hover {
    color: rgb(90, 90, 90); /* Oscurecer las flechas al pasar el ratón */
}
.muestra-blog .flecha-izquierda {
    left: -55px; /* Ajustar la distancia desde el borde */
}

.muestra-blog .flecha-derecha {
    right: -55px; /* Ajustar la distancia desde el borde */
}