/* ===== Optimasiti — estilos complementarios a Tailwind (config en partials/header.php) ===== */

html { scroll-behavior: smooth; }

body { font-family: 'Inter', sans-serif; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.hero-pattern {
  background-image: radial-gradient(#007BFF22 1px, transparent 1px);
  background-size: 32px 32px;
}

.icon { display: inline-block; vertical-align: middle; }

/* Contenido de una entrada de blog (HTML generado a partir de Markdown) */
.blog-content { color: #44474d; font-size: 18px; line-height: 1.75; }
.blog-content > * + * { margin-top: 1.25em; }
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 {
  color: #0a192f; font-weight: 700; line-height: 1.3; margin-top: 1.75em;
}
.blog-content h1 { font-size: 30px; }
.blog-content h2 { font-size: 26px; }
.blog-content h3 { font-size: 22px; }
.blog-content h4 { font-size: 18px; }
.blog-content a { color: #007bff; text-decoration: underline; text-underline-offset: 2px; }
.blog-content a:hover { color: #0070ea; }
.blog-content strong { color: #0a192f; font-weight: 700; }
.blog-content ul, .blog-content ol { padding-left: 1.5em; }
.blog-content ul { list-style-type: disc; }
.blog-content ol { list-style-type: decimal; }
.blog-content li + li { margin-top: 0.5em; }
.blog-content blockquote {
  border-left: 4px solid #007bff; padding-left: 1.25em; color: #44474d; font-style: italic;
}
.blog-content code {
  background: #eceef0; border-radius: 0.25rem; padding: 0.15em 0.4em; font-size: 0.9em;
  font-family: 'JetBrains Mono', monospace;
}
.blog-content pre {
  background: #0d1c32; color: #f7f9fb; border-radius: 0.5rem; padding: 1.25em; overflow-x: auto;
}
.blog-content pre code { background: transparent; padding: 0; color: inherit; }
.blog-content img { border-radius: 0.5rem; max-width: 100%; }
.blog-content hr { border: none; border-top: 1px solid #e2e8f0; }