/* --- ESTILOS DE LA PORTADA DEL BLOG (blog.html) --- */
html, body {
  overflow-x: hidden; /* Solo oculta el desbordamiento lateral */
  overflow-y: auto;   /* Permite scroll vertical */
  height: auto;       /* No fuerces altura 100% */
}
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 50px; }
.blog-card { background: #121212; border: 1px solid #222; border-radius: 4px; overflow: hidden; transition: transform 0.3s ease; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-10px); border-color: var(--dorado-suave); }
.blog-img { width: 100%; height: 220px; object-fit: cover; filter: grayscale(30%); transition: filter 0.3s; }
.blog-card:hover .blog-img { filter: grayscale(0%); }
.blog-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.blog-category { color: var(--dorado-suave); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 10px; }
.blog-title { font-family: 'Playfair Display', serif; color: #fff; font-size: 22px; margin-bottom: 15px; line-height: 1.3; }
.blog-excerpt { color: #999; font-size: 14px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.read-more { color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid var(--dorado-suave); padding-bottom: 3px; align-self: flex-start; }

/* --- ESTILOS DE LOS ARTÍCULOS INDIVIDUALES --- */
.article-container { 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 160px 20px 100px; /* Más espacio arriba (160px) para que el header no lo tape */
  min-height: 100vh; /* Asegura que la página tenga altura */
  position: relative; /* Para que el z-index funcione bien con el header */
  z-index: 1;
  overflow: visible; 
  height: auto;
}
.article-header { text-align: center; margin-bottom: 50px; border-bottom: 1px solid #333; padding-bottom: 40px; }
.article-category { color: var(--dorado-suave); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 15px; }
.article-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 5vw, 48px); color: #fff; margin: 10px 0; line-height: 1.2; }
.article-meta { color: #666; font-size: 14px; margin-top: 15px; }
.article-body { font-family: 'Montserrat', sans-serif; font-size: 18px; line-height: 1.8; color: #ccc; }
.article-body h2 { font-family: 'Playfair Display', serif; color: #fff; font-size: 28px; margin-top: 50px; margin-bottom: 20px; border-left: 3px solid var(--dorado-suave); padding-left: 15px; }
.article-body p { margin-bottom: 20px; }
.article-body ul { margin-bottom: 30px; padding-left: 20px; border-left: 1px solid #333; }
.article-body li { margin-bottom: 15px; list-style: none; position: relative; padding-left: 15px; }
.article-body li::before { content: "•"; color: var(--dorado-suave); font-weight: bold; position: absolute; left: -5px; }
.highlight-box { background: #121212; border: 1px solid #333; padding: 30px; margin: 40px 0; border-radius: 8px; }
.cta-box { background: linear-gradient(135deg, #111, #000); border: 1px solid var(--dorado-suave); padding: 50px 30px; text-align: center; margin-top: 80px; border-radius: 8px; }