/* --- articulo.css --- */

/* 1. HEADER (Hero) */
.article-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
    padding-top: 140px; padding-bottom: 80px; text-align: center;
    color: white; position: relative;
}
.article-header h1 {
    font-size: 3rem; max-width: 900px; margin: 15px auto;
    line-height: 1.2; font-weight: 800; text-transform: uppercase;
}
.article-meta {
    font-size: 0.85rem; color: var(--accent-color); font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    background: rgba(255,255,255,0.1); padding: 5px 15px; border-radius: 20px; display: inline-block;
}

/* 2. CONTENIDO (Aquí aplicamos las variables) */
.article-content {
    max-width: 720px; margin: 0 auto; padding: 80px 20px;
    font-size: 1.2rem;
    color: var(--text-main); /* CAMBIO: Color adaptable */
    font-family: 'Inter', sans-serif;
}

.article-content p { margin-bottom: 30px; line-height: 1.8; color: var(--text-secondary); /* CAMBIO */ }

.article-content h2 {
    font-size: 2rem; margin-top: 60px; margin-bottom: 25px;
    color: var(--text-main); /* CAMBIO */
    font-weight: 800; letter-spacing: -0.5px;
}

.article-content ul { list-style: none; margin-bottom: 40px; }
.article-content li { margin-bottom: 15px; padding-left: 30px; position: relative; }
.article-content li::before { content: '✔'; color: var(--accent-color); font-weight: bold; position: absolute; left: 0; }

/* Caja de Destacado */
.highlight-box {
    background-color: var(--header-cat-bg); /* CAMBIO: Fondo gris claro en light, oscuro en dark */
    border-left: 6px solid var(--accent-color);
    padding: 30px; margin: 50px 0; border-radius: 8px;
    font-style: italic; font-size: 1.3rem;
    color: var(--text-main); /* CAMBIO */
}

/* Botón de volver */
.back-link {
    display: inline-block; margin-top: 50px;
    color: var(--text-main); /* CAMBIO */
    font-weight: 700; font-size: 1rem; text-transform: uppercase;
    border-bottom: 2px solid var(--accent-color);
}

/* --- Ajustes Móvil Global --- */
@media (max-width: 768px) {
    .article-header h1 { font-size: 1.8rem; padding: 0 15px; }
    .article-content { padding: 40px 15px; font-size: 1rem; }
    .article-content h2 { font-size: 1.5rem; }
    .highlight-box { font-size: 1.1rem; padding: 20px; }
}