/* Contenedor del artículo */ article { max-width: 800px; padding: 1.5rem; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); font-family: "Inter", sans-serif; color: #333; line-height: 1.8; } /* Títulos */ article h1 { font-size: 2.5rem; font-weight: bold; text-align: center; margin-bottom: 1.5rem; color: #222; } article h2 { font-size: 1.8rem; font-weight: 600; margin: 2rem 0 1rem; color: #444; } article h3 { font-size: 1.4rem; font-weight: 500; margin: 1.5rem 0 1rem; color: #555; } /* Párrafos */ article p { margin: 1rem 0; font-size: 1.1rem; } /* Imágenes */ article img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px; margin: 1.5rem 0; display: block; } /* Listas */ article ul { list-style: disc inside; margin: 1rem 0; padding-left: 1rem; } article ol { list-style: decimal inside; margin: 1rem 0; padding-left: 1rem; } /* Citas */ article blockquote { font-style: italic; border-left: 4px solid #4b9ce2; background: #f4faff; padding: 0.75rem 1rem; margin: 1.5rem 0; } /* Líneas divisorias */ article hr { border: none; border-top: 2px solid #ddd; margin: 2rem 0; } /* Enlaces */ article a { color: #4b9ce2; text-decoration: underline; transition: color 0.2s ease; } article a:hover { color: #2563eb; } /* Código en línea */ article code { background: #f3f4f6; padding: 0.2rem 0.4rem; border-radius: 4px; font-family: monospace; font-size: 0.95rem; } /* Bloques de código */ article pre { background: #f3f4f6; padding: 1rem; border-radius: 8px; overflow-x: auto; font-family: monospace; font-size: 1rem; margin: 1.5rem 0; } /* Secciones dentro del artículo */ article section { margin-top: 2rem; } /* Responsive */ @media (max-width: 600px) { article h1 { font-size: 2rem; } article h2 { font-size: 1.5rem; } article h3 { font-size: 1.2rem; } }