/* Artículos de APE: usan estilos.css de la web y añaden la cabecera y el cuerpo de lectura. */
.art-cab { background: var(--osc); padding: 18px 0; }
.art-cab .w { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.art-cab img { height: 42px; width: auto; }
.art-cab a.volver { color: var(--ts); font-weight: 700; text-decoration: none; font-size: 15px; }
.art { padding: 56px 0 72px; }
.art h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 14px; max-width: 22ch; }
.art .bajada { font-size: 20px; color: var(--s); margin-bottom: 10px; }
.art .meta { font-size: 14px; color: var(--s); margin-bottom: 34px; }
.art h2 { font-size: clamp(23px, 3vw, 28px); max-width: none; margin: 38px 0 12px; }
.art p, .art li { color: #2b3f3a; }
.art ul, .art ol { padding-left: 22px; display: grid; gap: 8px; margin: 0 0 16px; }
.art .clave { background: var(--papel); border-left: 5px solid var(--m); border-radius: 0; padding: 18px 22px; margin: 26px 0; }
.art .clave p:last-child { margin: 0; }
.art .cierre { background: var(--osc2); color: #e8f5f1; border-radius: var(--r); padding: 28px; margin-top: 42px; }
.art .cierre h2 { color: #fff; margin-top: 0; }
.art .cierre p { color: var(--ts); }
.art .fuentes { margin-top: 40px; font-size: 14px; color: var(--s); border-top: 1px solid var(--l); padding-top: 18px; }
.art .fuentes li { color: var(--s); }
.art .nota-ia { font-size: 14px; color: var(--s); font-style: italic; }

/* Lista lateral con los demás artículos */
.art-marco { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.art-marco .art { max-width: 760px; }
.art-lateral { padding-top: 56px; position: sticky; top: 0; }
.art-lateral-in { background: var(--papel); border: 1px solid var(--l); border-radius: var(--r); padding: 22px; }
.art-lateral ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.art-lateral li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--l); text-decoration: none; color: var(--t); }
.art-lateral li a:hover b { color: var(--mo); }
.art-lateral .art-tema { display: block; font-size: 12px; font-weight: 800; color: var(--mo); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.art-lateral b { display: block; font-family: var(--f-d); line-height: 1.25; }
.art-lateral small { color: var(--s); }
.art-todos { font-weight: 800; color: var(--mo); text-decoration: none; display: inline-block; margin-bottom: 18px; }
.art-lateral-cta { background: var(--osc2); color: #e8f5f1; border-radius: 14px; padding: 16px; }
.art-lateral-cta p { color: var(--ts); font-size: 14px; margin: 4px 0 10px; }
@media (max-width: 960px) { .art-marco { grid-template-columns: 1fr; gap: 0; } .art-lateral { position: static; padding: 0 0 56px; } }