:root { --primary: #2563EB; --secondary: #06B6D4; --accent: #10B981; --text: #111827; --gray-light: #F9FAFB; --gray-border: #E5E7EB; --gray-text: #6B7280; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--text); line-height: 1.7; }
.container { max-width: 800px; margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; color: var(--primary); }
header { border-bottom: 1px solid var(--gray-border); position: sticky; top: 0; background: white; z-index: 100; padding: 15px 0; text-align: center; }
.logo { font-family: 'Poppins'; font-weight: 800; font-size: 24px; color: var(--primary); }
.breadcrumbs { font-size: 14px; color: var(--gray-text); margin-top: 30px; }
.post-header { margin: 20px 0 40px 0; }
.post-title { font-family: 'Poppins'; font-size: 36px; line-height: 1.2; margin: 15px 0; color: var(--text); }
.post-meta { font-size: 14px; color: var(--gray-text); display: flex; gap: 15px; flex-wrap: wrap; }
.toc { background: var(--gray-light); border: 1px solid var(--gray-border); padding: 20px; border-radius: 8px; margin-bottom: 40px; }
.toc h3 { font-family: 'Poppins'; font-size: 18px; margin-bottom: 10px; }
.toc ul { list-style: none; }
.toc ul li a { font-size: 15px; display: block; padding: 4px 0; }
.ad-placeholder { background: #f3f4f6; border: 2px dashed #d1d5db; color: #9ca3af; text-align: center; padding: 30px; margin: 40px 0; border-radius: 8px; font-size: 14px; }
.content h2 { font-family: 'Poppins'; font-size: 24px; margin: 40px 0 15px 0; }
.content p { margin-bottom: 20px; color: #374151; }
.content ul { margin-bottom: 20px; padding-left: 20px; }
.content li { margin-bottom: 10px; }
.content blockquote { border-left: 4px solid var(--primary); padding: 15px; margin: 20px 0; color: var(--gray-text); font-style: italic; background: var(--gray-light); border-radius: 0 8px 8px 0; }
footer { background: var(--text); color: #9ca3af; text-align: center; padding: 30px; margin-top: 60px; font-size: 14px; }
footer a { color: #9ca3af; }
/* Estilos para las nuevas imágenes reales */
.card-img { height: 180px; overflow: hidden; background: #f3f4f6; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .card-img img { transform: scale(1.05); }