/* ============================================================
   AYCA 2026 · Página de artículos — se carga después de cronica/cronica.css
   Lectura tipo texto: columna estrecha, índice al inicio y en el lateral.
   ============================================================ */
body[data-day="articulos"]{ --day:var(--orange); --day-dark:var(--orange-dark); }

.ar-hero{ min-height:min(64svh,600px); }
.ar-hero h1{ max-width:20ch; font-size:clamp(2.3rem,5.4vw,4.4rem); }

/* ---------------- índice ---------------- */
.ix{ max-width:980px; margin:0 auto 5rem; scroll-margin-top:90px; }
.ix-h{ margin-bottom:1.2rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--day-dark); display:flex; align-items:center; gap:.9rem; }
.ix-h::after{ content:''; flex:1; height:1px; background:var(--line); }
.ix-list{ border-top:1px solid var(--line); }
.ix-row a{ display:grid; grid-template-columns:200px minmax(0,1fr) auto; align-items:baseline; gap:.4rem 2rem; padding:1.35rem .4rem; border-bottom:1px solid var(--line); transition:background-color .3s ease, padding-left .4s var(--ease); }
.ix-row a:hover{ background:color-mix(in srgb,var(--day) 6%,transparent); padding-left:1rem; }
.ix-author{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--day-dark); }
.ix-title{ font-size:clamp(1.15rem,2vw,1.5rem); font-weight:300; line-height:1.25; color:var(--navy); }
.ix-title em{ font-style:normal; color:var(--ink-55); }
.ix-meta{ display:inline-flex; align-items:center; gap:.6rem; font-size:.76rem; color:var(--ink-55); white-space:nowrap; }
.ix-meta i{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--orange); color:#fff; transition:transform .4s var(--ease); }
.ix-row.is-ext .ix-meta i{ background:var(--teal); }
.ix-row a:hover .ix-meta i{ transform:translateX(3px); }

/* ---------------- artículos ---------------- */
@media (min-width:1100px){ .ar-layout{ grid-template-columns:216px minmax(0,740px); } }
.rail a{ white-space:normal; }
@media (max-width:1099px){ .rail a{ white-space:nowrap; } }
.art{ padding:4.2rem 0 3rem; border-top:1px solid var(--line); scroll-margin-top:86px; }
.ar-col > .art:first-child{ border-top:0; padding-top:0; }
.art-by{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-bottom:1rem; }
.art-author{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--day-dark); }
.art-time{ display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; color:var(--ink-55); }
.art-time::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.art-head h2{ font-weight:200; font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.1; letter-spacing:-.018em; }
.art-dek{ margin-top:1rem; font-size:1.15rem; font-weight:300; line-height:1.65; color:var(--navy); max-width:40rem; }
.art-role{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line-soft); font-size:.82rem; line-height:1.6; color:var(--ink-55); max-width:40rem; }
.art-prose{ margin-top:2.2rem; }
.art-prose > p.art-first::first-letter{ float:left; margin:.2rem .65rem 0 0; font-size:4.2rem; line-height:.78; font-weight:300; color:var(--day); }
.art-h{ margin:2.6rem 0 1rem; font-weight:300; font-size:clamp(1.3rem,2.3vw,1.65rem); line-height:1.25; color:var(--navy); }
.art-list{ margin:0 0 1.3rem; display:grid; gap:.8rem; max-width:44rem; }
.art-list li{ position:relative; padding:1rem 1.2rem 1rem 1.4rem; border-radius:16px; background:var(--paper); border:1px solid var(--line); font-size:1rem; line-height:1.75; color:var(--ink); }
.art-list li::before{ content:''; position:absolute; left:0; top:1.1rem; bottom:1.1rem; width:3px; border-radius:0 3px 3px 0; background:var(--day); }
.art-list strong{ font-weight:600; color:var(--navy); }
.art-fig, .art-cover{ margin:2rem 0 2.2rem; max-width:44rem; }
.art-cover{ margin-top:2rem; }
.art-fig .ph, .art-cover .ph{ aspect-ratio:16/9; border-radius:22px; box-shadow:0 22px 50px rgba(9,46,110,.12); }
.art-fig .ph span{ font-size:.66rem; }
.art-fig figcaption{ display:flex; gap:.6rem; align-items:center; margin-top:.75rem; font-size:.78rem; color:var(--ink-55); }
.art-fig figcaption::before{ content:''; width:22px; height:2px; background:var(--day); border-radius:2px; flex:none; }
.art-source{ margin:.4rem 0 0; font-size:.8rem; }
.art-source a{ display:inline-flex; align-items:center; gap:.4rem; color:var(--day-dark); font-weight:600; border-bottom:1px solid transparent; transition:border-color .25s ease; }
.art-source a:hover{ border-bottom-color:currentColor; }
.art-top{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem; padding:.55rem 1rem; border-radius:999px; border:1.5px solid var(--line); font-size:.78rem; font-weight:600; color:var(--ink-55); transition:border-color .3s ease, color .3s ease; }
.art-top:hover{ border-color:var(--day); color:var(--navy); }

/* ---------------- móvil ---------------- */
@media (max-width:767px){
  .ix{ margin-bottom:3.4rem; }
  .ix-row a{ grid-template-columns:1fr; text-align:center; justify-items:center; gap:.45rem; padding:1.2rem .2rem; }
  .ix-row a:hover{ padding-left:.2rem; }
  .art{ padding-top:3.2rem; }
  .art-head{ text-align:center; }
  .art-by{ justify-content:center; }
  .art-dek, .art-role{ margin-left:auto; margin-right:auto; }
  .art-dek{ font-size:1.05rem; }
  .art-prose > p.art-first::first-letter{ font-size:3.6rem; }
  .art-top{ display:flex; width:max-content; margin-left:auto; margin-right:auto; }
  .art-source{ text-align:center; }
}