/* Estilos específicos y compactos para páginas de blog */

.blog-imagen-principal {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow-medium);
}

.blog-imagen-derecha {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow-light);
}

.fig-derecha { float: right; margin: 0 0 1.2rem 1.2rem; max-width: 300px; }
.fig-derecha img { display: block; border-radius: 8px; }
@media (max-width: 768px) { .fig-derecha { float: none; margin: 1.2rem auto; display: block; } }

.blog-contenedor-normal {
  display: flex;
  align-items: flex-start;
  background: var(--secondary-bg);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: var(--shadow-medium);
}

.blog-contenedor-normal .contenido-articulo { flex: 1; text-align: left; }

.articulo-completo {
  border-radius: 10px;
  margin: 0 auto 24px;
  background: var(--secondary-bg);
  box-shadow: var(--shadow-medium);
  padding: 24px;
  box-sizing: border-box;
  max-width: 100%;
  width: fit-content;
}

ul { margin: 0 0 1em 2em; padding-left: 1em; list-style: disc; color: var(--text-color-dark); }

.blog-contenedor-normal p, .articulo-completo p { margin-bottom: 1em; }

/* Separador decorativo bajo el título del blog */
.articulo-completo h2::after,
.blog-contenedor-normal .contenido-articulo > h2:first-child::after {
  content: "";
  display: block;
  height: 6px;
  margin-top: 0.5rem;
  background-size: 100% 6px;
  color: var(--separator-color);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><line x1='0' y1='3' x2='100' y2='3' stroke='currentColor' stroke-width='1' stroke-linecap='round'/><circle cx='50' cy='3' r='1.5' fill='currentColor' /></svg>");
  opacity: .8;
}