/* Wavais · artículo de blog.
   Página de lectura larga: una sola columna estrecha para que la línea no
   pase de ~70 caracteres, que es donde el ojo deja de seguir bien el texto.
   Reutiliza los tokens; no define ningún color propio. */

.article-shell{max-width:var(--max);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem)}

/* --- Cabecera del artículo ---------------------------------------------- */
.article-head{max-width:820px;padding:4.5rem 0 2.5rem}
.article-breadcrumb{margin:0 0 1.6rem;color:var(--muted);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.article-breadcrumb a{color:var(--muted);text-decoration:none}
.article-breadcrumb a:hover{color:var(--violet)}
.article-head h1{margin:0;font-size:var(--fs-h1)}
.article-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.8rem 0 0;color:var(--muted);font-size:.72rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}

/* --- Imagen de portada --------------------------------------------------- */
.article-hero-img{margin:0 0 3.5rem;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.article-hero-img img{display:block;width:100%;height:auto}

/* --- Cuerpo -------------------------------------------------------------- */
.article-body{max-width:720px;padding-bottom:4rem;font-size:1.02rem;line-height:1.72}
.article-body p{margin:0 0 1.4rem;color:var(--ink-soft)}
.article-body h2{margin:3.4rem 0 1.2rem;font-size:var(--fs-h2-compact)}
.article-body h3{margin:2.4rem 0 .7rem;font-size:var(--fs-card-sm)}
.article-body em{color:var(--violet);font-style:italic}
.article-body a{color:var(--violet);text-decoration:underline;text-underline-offset:.18em}
.article-body a:hover{color:var(--fire)}

/* Entradilla: primer párrafo un punto mayor, sin llegar a titular. */
.article-lead{font-size:1.15rem;line-height:1.62}
.article-lead p{color:var(--ink)}

/* TL;DR: el resumen que las IAs citan. Se destaca porque es la pieza que
   más se lee y la que responde la pregunta del titular de una sola vez. */
.article-tldr{margin:0 0 3rem;padding:1.7rem 1.9rem;border-left:4px solid var(--violet);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--violet-soft)}
.article-tldr p{margin:0;color:var(--ink);font-weight:750}

/* --- Tabla comparativa --------------------------------------------------- */
.article-table{margin:2rem 0 2.6rem;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.article-table table{width:100%;border-collapse:collapse;font-size:.88rem}
.article-table th,.article-table td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.article-table thead th{color:var(--on-brand);background:var(--violet);font-size:.72rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;border-bottom:0}
.article-table tbody tr:last-child th,.article-table tbody tr:last-child td{border-bottom:0}
.article-table tbody th{color:var(--ink);font-weight:850}
.article-table td{color:var(--ink-soft)}

/* --- FAQ ----------------------------------------------------------------- */
.article-faq{margin:1.4rem 0 0;border-top:1px solid var(--line)}
.article-faq-item{padding:1.5rem 0;border-bottom:1px solid var(--line)}
.article-faq-item h3{margin:0 0 .6rem;font-size:var(--fs-card-sm)}
.article-faq-item p{margin:0}

/* --- Cierre y siguiente paso --------------------------------------------- */
.article-end{margin:3.5rem 0 0;padding:2rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.article-end p:last-child{margin-bottom:0}

/* Conmutador: aquí NO cambia de idioma en la misma URL, salta a la URL
   hermana traducida. Por eso vive dentro del artículo y no solo en la nav. */
.article-langs{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 2.5rem;color:var(--muted);font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.article-langs a{padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none}
.article-langs a:hover{border-color:var(--violet);color:var(--violet)}
.article-langs [aria-current="true"]{border-color:var(--violet);background:var(--violet);color:var(--on-brand)}

@media(max-width:650px){
  .article-head{padding:3rem 0 2rem}
  .article-hero-img{margin-bottom:2.5rem;border-radius:var(--radius-md)}
  .article-body{font-size:.98rem}
  .article-lead{font-size:1.06rem}
  .article-tldr{padding:1.3rem 1.4rem}
  .article-end{padding:1.5rem}
}