/* Contenedor Principal */
.single-post-container {
    max-width: 800px; /* Más estrecho para mejor lectura */
    margin: 60px auto;
    padding: 0 20px;
    font-family: system-ui, sans-serif;
    color: #333;
}

/* 1. Estilos del Artículo */
.post-header { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.post-category { 
    font-size: 0.8rem; text-transform: uppercase; color: #2c5e4f; font-weight: bold; 
    letter-spacing: 1px;
}
.post-title { font-size: 2.2rem; margin: 10px 0; line-height: 1.2; color: #1a1a1a; }
.post-meta { font-size: 0.9rem; color: #888; }
.post-body { font-size: 1.1rem; line-height: 1.8; color: #444; margin-bottom: 60px; }
.post-body p { margin-bottom: 1.5em; }

/* 2. Artículos Recomendados */
.section-title { font-size: 1.5rem; margin-bottom: 20px; border-left: 4px solid #2c5e4f; padding-left: 10px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 60px; }
.related-card { display: block; text-decoration: none; border: 1px solid #eee; border-radius: 6px; overflow: hidden; transition: transform 0.2s; }
.related-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.related-img { height: 120px; background-size: cover; background-position: center; }
.related-info { padding: 15px; }
.related-info h4 { margin: 0 0 8px; font-size: 1rem; color: #1a1a1a; }
.related-excerpt { font-size: 0.85rem; color: #666; margin: 0; line-height: 1.4; }

/* 3. Comentarios */
.comments-wrapper { background: #f9f9f9; padding: 30px; border-radius: 8px; }
.comment-item { display: flex; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.comment-item:last-child { border-bottom: none; }
.comment-avatar { 
    width: 40px; height: 40px; background: #ddd; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; font-weight: bold; color: #555; 
}
.comment-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: #888; margin-bottom: 5px; }
.comment-header strong { color: #333; }
.comment-body p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* Formulario */
.comment-form-wrapper { margin-top: 30px; padding-top: 30px; border-top: 2px solid #ddd; }
.comment-form { display: flex; flex-direction: column; gap: 12px; }
.comment-form input, .comment-form textarea { 
    padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; 
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: #2c5e4f; }
.btn-submit-comment { 
    align-self: flex-start; padding: 10px 20px; background: #2c5e4f; color: #fff; 
    border: none; border-radius: 4px; cursor: pointer; font-weight: 600; 
}
.btn-submit-comment:hover { background: #1e4237; }