/* estilos encabezados de articulos */

@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap'); 

/* Estilos base para las presentaciones de artículos */
.presentacion-articulo {
  font-family: 'Merienda', cursive; /* Fuente principal */
  font-size: 1.2em; /* Tamaño base */
  margin: 15px 0; /* Espaciado */
  padding: 10px; /* Relleno interior */
  border-radius: 5px; /* Bordes redondeados */
  line-height: 1.5; /* Espaciado entre líneas para mejor legibilidad */
}

/* Variación para Artículo 1: Ligero y elegante */
.presentacion-articulo-1 {
  font-weight: 300; /* Peso ligero */
  background-color: #f9f9f9; /* Fondo gris claro */
  color: #333; /* Color de texto oscuro */
  font-style: italic; /* Cursiva */
  border-left: 4px solid #ccc; /* Borde izquierdo para destaque */
}

/* Variación para Artículo 2: Bold y vibrante */
.presentacion-articulo-2 {
  font-weight: 700; /* Peso bold */
  background-color: #e3f2fd; /* Fondo azul claro */
  color: #0d47a1; /* Color azul oscuro */
  text-transform: uppercase; /* Todo en mayúsculas */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Variación para Artículo 3: Extra bold y espaciado */
.presentacion-articulo-3 {
  font-weight: 900; /* Peso extra bold */
  background-color: #fff3e0; /* Fondo naranja claro */
  color: #ef6c00; /* Color naranja */
  letter-spacing: 1px; /* Espaciado entre letras */
  text-align: center; /* Alineación centrada */
}

/* Estilos adicionales para imágenes en la presentación */
.post.cover.image.left img {
  max-width: 200px; /* Ancho máximo de la imagen */
  border-radius: 10px; /* Bordes redondeados en la imagen */
  margin-right: 10px; /* Espacio a la derecha */
}

/* Media query para responsive (opcional, para móviles) */
@media (max-width: 768px) {
  .presentacion-articulo {
    font-size: 1em; /* Reduce tamaño en pantallas pequeñas */
    padding: 8px;
  }
}