/* ═══════════════════════════════════════════════════════
   ASPA — Sistema de componentes del portal
   Todo hereda de tokens.css. Ningún color literal aquí.
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--aspa-bg-page);
  color: var(--aspa-text-body);
  font-family: var(--aspa-font-sans);
  font-size: var(--aspa-fs-body);
  line-height: var(--aspa-lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--aspa-text-active); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Retícula ────────────────────────────────────────── */
.wrap {
  max-width: var(--aspa-maxw);
  margin: 0 auto;
  padding: 0 var(--aspa-margin);
}
@media (max-width: 860px) { .wrap { padding: 0 var(--aspa-margin-sm); } }

.section { padding: var(--aspa-sp-24) 0; }
.section--subtle { background: var(--aspa-bg-subtle); }
.section--accent { background: var(--aspa-bg-accent); }
.prose { max-width: var(--aspa-maxw-text); }

/* ── Tipografía ──────────────────────────────────────── */
.display, h1.display {
  font-family: var(--aspa-font-serif);
  font-size: clamp(34px, 5vw, var(--aspa-fs-display));
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--aspa-b-700);
  margin: 0 0 var(--aspa-sp-4);
}
.display em, h1 em, h2 em { font-style: italic; color: var(--aspa-c-500); }

h1 {
  font-family: var(--aspa-font-serif);
  font-size: clamp(28px, 4vw, var(--aspa-fs-h1));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--aspa-b-700);
  margin: 0 0 var(--aspa-sp-4);
}
h2 {
  font-family: var(--aspa-font-sans);
  font-size: var(--aspa-fs-h2);
  font-weight: 600;
  line-height: 1.3;
  color: var(--aspa-b-700);
  margin: 0 0 var(--aspa-sp-3);
}
h3 {
  font-family: var(--aspa-font-sans);
  font-size: var(--aspa-fs-h3);
  font-weight: 600;
  color: var(--aspa-b-700);
  margin: 0 0 var(--aspa-sp-2);
}
p { margin: 0 0 var(--aspa-sp-4); }
.lead { font-size: 17px; color: var(--aspa-text-muted); line-height: 1.6; }
.muted { color: var(--aspa-text-muted); }

.label {
  font-size: var(--aspa-fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aspa-c-600);
}
.mono {
  font-family: var(--aspa-font-mono);
  font-size: var(--aspa-fs-mono);
  color: var(--aspa-text-muted);
}

/* Encabezado de sección: label + título + bajada */
.sec-head { margin-bottom: var(--aspa-sp-10); max-width: var(--aspa-maxw-text); }
.sec-head .label { display: block; margin-bottom: var(--aspa-sp-2); }

/* ── Motivo del aspa · textura de marca ──────────────── */
.aspa-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(120% 100% at 85% 10%, #000 25%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 85% 10%, #000 25%, transparent 75%);
}
/* Variante para superficies claras — trama de aspa en carmín, como la portada del manual */
.aspa-motif--light {
  background-image:
    repeating-linear-gradient(45deg,  rgba(217,58,90,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-45deg, rgba(217,58,90,.05) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 30%, transparent 80%);
}

/* ── Botones ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aspa-sp-2);
  padding: 11px var(--aspa-sp-6);
  border: 1px solid transparent;
  border-radius: var(--aspa-r-md);
  font-family: var(--aspa-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--aspa-ease), border-color .18s var(--aspa-ease), color .18s var(--aspa-ease);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--aspa-c-500); outline-offset: 2px; }

/* Primario: azul institucional */
.btn--primary { background: var(--aspa-btn-primary); color: var(--aspa-n-0); }
.btn--primary:hover { background: var(--aspa-b-800); }

/* CTA: carmín — reservado para la acción principal de la página */
.btn--cta { background: var(--aspa-btn-cta); color: var(--aspa-n-0); }
.btn--cta:hover { background: var(--aspa-c-600); }

/* Secundario y fantasma */
.btn--outline { background: transparent; border-color: var(--aspa-line); color: var(--aspa-b-700); }
.btn--outline:hover { border-color: var(--aspa-b-700); background: var(--aspa-b-50); }
.btn--ghost { background: transparent; color: var(--aspa-text-muted); }
.btn--ghost:hover { background: var(--aspa-n-50); color: var(--aspa-b-700); }

/* Sobre fondo azul */
.btn--on-dark { background: var(--aspa-n-0); color: var(--aspa-b-700); }
.btn--on-dark:hover { background: var(--aspa-b-50); }
.btn--outline-on-dark { background: transparent; border-color: rgba(255,255,255,.35); color: var(--aspa-n-0); }
.btn--outline-on-dark:hover { border-color: var(--aspa-n-0); background: rgba(255,255,255,.08); }

.btn--sm { padding: 8px var(--aspa-sp-4); font-size: 13px; }
.btn--block { display: flex; width: 100%; }

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--aspa-r-pill);
  font-size: var(--aspa-fs-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.badge--brand   { background: var(--aspa-b-50);  color: var(--aspa-b-700); }
.badge--accent  { background: var(--aspa-c-50);  color: var(--aspa-c-700); }
.badge--solid   { background: var(--aspa-c-500); color: var(--aspa-n-0); }
.badge--neutral { background: var(--aspa-n-100); color: var(--aspa-n-600); }
.badge--ok      { background: var(--aspa-ok-bg);   color: var(--aspa-ok); }
.badge--warn    { background: var(--aspa-warn-bg); color: var(--aspa-warn); }
.badge--err     { background: var(--aspa-err-bg);  color: var(--aspa-err); }
.badge--on-dark { background: rgba(255,255,255,.14); color: var(--aspa-n-0); }

/* ── Tarjetas ────────────────────────────────────────── */
.card {
  background: var(--aspa-n-0);
  border: 1px solid var(--aspa-line-soft);
  border-radius: var(--aspa-r-lg);
  padding: var(--aspa-sp-6);
  transition: box-shadow .2s var(--aspa-ease), transform .2s var(--aspa-ease);
}
.card--link:hover { box-shadow: var(--aspa-sh-md); transform: translateY(-2px); }
.card--accent { background: var(--aspa-b-50); border-color: var(--aspa-b-100); }
.card--dark { background: var(--aspa-b-700); border-color: var(--aspa-b-600); color: var(--aspa-b-100); }
.card--dark h3, .card--dark h2 { color: var(--aspa-n-0); }
.card--flush { padding: 0; overflow: hidden; }

.card-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--aspa-r-md);
  background: var(--aspa-c-50);
  color: var(--aspa-c-500);
  margin-bottom: var(--aspa-sp-4);
}
.card-ico svg { width: 20px; height: 20px; }

/* ── Grid utilitario ─────────────────────────────────── */
.grid { display: grid; gap: var(--aspa-gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ── Alertas ─────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--aspa-sp-3);
  padding: var(--aspa-sp-4);
  border-radius: var(--aspa-r-md);
  border: 1px solid transparent;
  font-size: 14px;
}
.alert--info { background: var(--aspa-b-50);    border-color: var(--aspa-b-100); color: var(--aspa-b-800); }
.alert--ok   { background: var(--aspa-ok-bg);   border-color: #BFE3CE; color: var(--aspa-ok); }
.alert--warn { background: var(--aspa-warn-bg); border-color: #EFD9A8; color: var(--aspa-warn); }
.alert--err  { background: var(--aspa-err-bg);  border-color: #EBC3C3; color: var(--aspa-err); }

/* ── Formularios ─────────────────────────────────────── */
.field { margin-bottom: var(--aspa-sp-4); }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--aspa-b-700);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px var(--aspa-sp-3);
  border: 1px solid var(--aspa-line);
  border-radius: var(--aspa-r-md);
  background: var(--aspa-n-0);
  font-family: var(--aspa-font-sans);
  font-size: 14px;
  color: var(--aspa-text-primary);
  transition: border-color .15s var(--aspa-ease), box-shadow .15s var(--aspa-ease);
}
.field input::placeholder { color: var(--aspa-n-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--aspa-b-400);
  box-shadow: 0 0 0 3px rgba(21, 52, 83, .1);
}
/* Colegiado, fechas y datos legales van en mono — regla del manual */
.field input.mono-input { font-family: var(--aspa-font-mono); }
.field .hint { margin-top: 5px; font-size: 12px; color: var(--aspa-text-faint); }

/* ── Header / navegación ─────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--aspa-b-700);
  color: var(--aspa-n-0);
}
.site-head .wrap {
  display: flex; align-items: center; gap: var(--aspa-sp-8);
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { height: 30px; width: auto; }
.brand b {
  font-family: var(--aspa-font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--aspa-n-0);
}
.site-nav { display: flex; gap: var(--aspa-sp-6); margin-left: auto; }
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--aspa-b-100);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--aspa-ease), border-color .15s var(--aspa-ease);
}
.site-nav a:hover { color: var(--aspa-n-0); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--aspa-n-0); border-bottom-color: var(--aspa-c-500); }
/* El "Ingresar" dentro de la nav es solo para el menú móvil; en escritorio vive en .head-actions */
.site-nav > .btn { display: none; }
.head-actions { display: flex; align-items: center; gap: var(--aspa-sp-3); flex-shrink: 0; margin-left: var(--aspa-sp-6); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent; border: 0; color: var(--aspa-n-0);
  padding: 8px; cursor: pointer;
}
@media (max-width: 980px) {
  .site-nav {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--aspa-b-800);
    padding: var(--aspa-sp-2) var(--aspa-margin-sm) var(--aspa-sp-4);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--aspa-b-600); }
  .nav-toggle { display: block; }
  .head-actions { display: none; }
  .site-nav > .btn { display: flex; margin-top: var(--aspa-sp-4); border-bottom: 0; }
}

/* ── Hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #22456A 0%, var(--aspa-b-700) 46%, var(--aspa-b-900) 100%);
  color: var(--aspa-n-0);
  padding: var(--aspa-sp-24) 0;
}
.hero-in { position: relative; max-width: 780px; }
.hero .label { color: var(--aspa-c-200); display: block; margin-bottom: var(--aspa-sp-3); }
.hero h1 {
  font-size: clamp(34px, 5.4vw, 54px);
  color: var(--aspa-n-0);
  line-height: 1.05;
  margin-bottom: var(--aspa-sp-6);
}
.hero h1 em { color: var(--aspa-c-300); }
.hero p { color: var(--aspa-b-100); font-size: 17px; max-width: 620px; }
.hero-cta { display: flex; gap: var(--aspa-sp-3); flex-wrap: wrap; margin-top: var(--aspa-sp-8); }
.hero-rule { width: 58px; height: 4px; background: var(--aspa-c-500); border-radius: 2px; margin-bottom: var(--aspa-sp-6); }

/* ── Franja de marca · logo a color sobre fondo claro ── */
.brand-band {
  position: relative;
  overflow: hidden;
  background: var(--aspa-bg-subtle);
  border-top: 1px solid var(--aspa-line-soft);
  border-bottom: 1px solid var(--aspa-line-soft);
  text-align: center;
}
.brand-band-in { position: relative; z-index: 1; }
.brand-band-logo {
  width: min(360px, 74vw);
  height: auto;
  margin: 0 auto var(--aspa-sp-6);
}
.brand-band-tag {
  font-family: var(--aspa-font-serif);
  font-style: italic;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--aspa-b-700);
  margin: 0;
}
.brand-band-sub {
  margin: var(--aspa-sp-3) auto 0;
  max-width: 560px;
  color: var(--aspa-text-muted);
  font-size: 15px;
}

/* ── Cifras ──────────────────────────────────────────── */
.stat { text-align: center; }
.stat b {
  display: block;
  font-family: var(--aspa-font-serif);
  font-size: 38px;
  font-weight: 600;
  color: var(--aspa-b-700);
  line-height: 1.1;
}
.stat span {
  font-size: var(--aspa-fs-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aspa-text-faint);
}

/* ── Noticias ────────────────────────────────────────── */
.news-media {
  aspect-ratio: 16 / 9;
  background: var(--aspa-b-100);
  position: relative;
  overflow: hidden;
}
.news-media--dark { background: linear-gradient(140deg, var(--aspa-b-600), var(--aspa-b-900)); }
.news-body { padding: var(--aspa-sp-6); }
.news-meta {
  display: flex; align-items: center; gap: var(--aspa-sp-3);
  margin-bottom: var(--aspa-sp-3);
  font-family: var(--aspa-font-mono);
  font-size: 12px;
  color: var(--aspa-text-faint);
}
.news-body h3 { font-size: 17px; line-height: 1.35; margin-bottom: var(--aspa-sp-2); }
.news-body p { font-size: 14px; color: var(--aspa-text-muted); margin: 0; }

/* ── Calendario / actividades ────────────────────────── */
.act-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: var(--aspa-sp-6);
  align-items: center;
  padding: var(--aspa-sp-4) 0;
  border-bottom: 1px solid var(--aspa-line-soft);
}
.act-row:last-child { border-bottom: 0; }
.act-date {
  text-align: center;
  border: 1px solid var(--aspa-b-100);
  border-radius: var(--aspa-r-md);
  padding: var(--aspa-sp-2) 0;
  background: var(--aspa-b-50);
}
.act-date b {
  display: block;
  font-family: var(--aspa-font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--aspa-b-700);
  line-height: 1;
}
.act-date span {
  font-family: var(--aspa-font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aspa-c-600);
}
.act-info h3 { margin-bottom: 4px; }
.act-info .mono { font-size: 12px; }
.act-tags { display: flex; gap: var(--aspa-sp-2); margin-top: var(--aspa-sp-2); flex-wrap: wrap; }
@media (max-width: 720px) {
  .act-row { grid-template-columns: 60px 1fr; }
  .act-row > .btn { grid-column: 2; justify-self: start; }
}

/* Filtros */
.filters { display: flex; gap: var(--aspa-sp-2); flex-wrap: wrap; margin-bottom: var(--aspa-sp-8); }
.chip {
  padding: 7px 14px;
  border: 1px solid var(--aspa-line);
  border-radius: var(--aspa-r-pill);
  background: var(--aspa-n-0);
  font-size: 13px;
  font-weight: 500;
  color: var(--aspa-text-muted);
  cursor: pointer;
  transition: all .15s var(--aspa-ease);
}
.chip:hover { border-color: var(--aspa-b-400); color: var(--aspa-b-700); }
.chip[aria-pressed="true"] {
  background: var(--aspa-b-700);
  border-color: var(--aspa-b-700);
  color: var(--aspa-n-0);
}

/* ── Footer ──────────────────────────────────────────── */
.site-foot {
  position: relative;
  overflow: hidden;
  background: var(--aspa-b-800);
  color: var(--aspa-b-200);
  padding: var(--aspa-sp-16) 0 var(--aspa-sp-8);
  font-size: 14px;
}
.foot-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--aspa-sp-8);
  padding-bottom: var(--aspa-sp-10);
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-brand img { height: 34px; margin-bottom: var(--aspa-sp-4); }
.foot-brand p { color: var(--aspa-b-300); font-size: 13.5px; max-width: 280px; }
.foot-col h4 {
  font-size: var(--aspa-fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aspa-n-0);
  margin: 0 0 var(--aspa-sp-4);
}
.foot-col a { display: block; padding: 5px 0; color: var(--aspa-b-200); font-size: 14px; }
.foot-col a:hover { color: var(--aspa-n-0); text-decoration: none; }
.foot-bar {
  position: relative;
  border-top: 1px solid var(--aspa-b-600);
  padding-top: var(--aspa-sp-6);
  display: flex; justify-content: space-between; gap: var(--aspa-sp-4);
  flex-wrap: wrap;
  font-family: var(--aspa-font-mono);
  font-size: 12px;
  color: var(--aspa-b-300);
}

/* ── Carrusel de agrupaciones socias ─────────────────── */
.socias-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--aspa-sp-4); margin-bottom: var(--aspa-sp-8); flex-wrap: wrap; }
.socias-head .label { display: block; margin-bottom: var(--aspa-sp-2); }
.socias-head h2 { margin: 0; }
/* Cuadrícula estática — sin movimiento, 5 agrupaciones espaciadas */
.socias-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--aspa-sp-6); }
@media (max-width: 1080px) { .socias-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .socias-grid { grid-template-columns: repeat(2, 1fr); } }

.socia-card {
  display: flex; flex-direction: column;
  background: var(--aspa-n-0);
  border: 1px solid var(--aspa-line-soft);
  border-radius: var(--aspa-r-lg);
  overflow: hidden;
  transition: box-shadow .2s var(--aspa-ease), transform .2s var(--aspa-ease);
}
.socia-card:hover { box-shadow: var(--aspa-sh-md); transform: translateY(-2px); text-decoration: none; }
/* Imagen/placeholder prominente, a todo el ancho */
.socia-media {
  width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  font-family: var(--aspa-font-serif); font-weight: 600; font-size: 46px; color: #fff;
  letter-spacing: .02em;
}
/* Texto compacto bajo la imagen (mitad del alto anterior, sin enlace) */
.socia-body { padding: var(--aspa-sp-3) var(--aspa-sp-4) var(--aspa-sp-4); }
.socia-body b { display: block; color: var(--aspa-b-700); font-size: 15px; line-height: 1.2; }
.socia-dept { display: block; font-family: var(--aspa-font-mono); font-size: 10.5px; color: var(--aspa-c-600); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.socia-desc { font-size: 12.5px; color: var(--aspa-text-muted); line-height: 1.45; margin-top: var(--aspa-sp-2); }

/* ═══════════════════════════════════════════════════════
   Publicaciones · espacio editorial (noticia + opinión)
   ═══════════════════════════════════════════════════════ */

/* ── Badge de formato · familia con marcador en aspa ─── */
.fmt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px;
  border-radius: var(--aspa-r-pill);
  background: var(--aspa-n-50);
  border: 1px solid var(--aspa-line-soft);
  font-family: var(--aspa-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aspa-n-700);
  line-height: 1.5;
  white-space: nowrap;
}
.fmt::before {
  content: "";
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--aspa-c-500);
  flex-shrink: 0;
}
.fmt--noticia::before    { background: var(--aspa-b-400); }
.fmt--opinion::before    { background: var(--aspa-c-500); }
.fmt--ensayo::before     { background: var(--aspa-b-700); }
.fmt--analisis::before   { background: var(--aspa-ok); }
.fmt--entrevista::before { background: var(--aspa-warn); }
.fmt--debate::before     { background: var(--aspa-c-700); }
.fmt--resena::before     { background: var(--aspa-n-400); }
/* Sobre superficies oscuras */
.fmt--on-dark { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: var(--aspa-b-100); }

/* ── Avatar de autor · iniciales ─────────────────────── */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-family: var(--aspa-font-serif);
  font-weight: 600; font-size: 15px;
  color: #fff;
  background: linear-gradient(140deg, var(--aspa-b-500), var(--aspa-b-800));
}
.avatar--c  { background: linear-gradient(140deg, var(--aspa-c-500), var(--aspa-c-700)); }
.avatar--lg { width: 56px; height: 56px; font-size: 20px; }

/* ── Firma de autor · avatar + nombre + dato ─────────── */
.byl { display: flex; align-items: center; gap: var(--aspa-sp-3); }
.byl .who b {
  display: block;
  color: var(--aspa-b-700);
  font-size: 14px; font-weight: 600; line-height: 1.25;
}
.byl .who span {
  font-family: var(--aspa-font-mono);
  font-size: 11px;
  color: var(--aspa-text-faint);
  letter-spacing: .02em;
}

/* ── Tarjeta editorial ───────────────────────────────── */
.ed-card {
  display: flex; flex-direction: column;
  background: var(--aspa-n-0);
  border: 1px solid var(--aspa-line-soft);
  border-radius: var(--aspa-r-lg);
  overflow: hidden;
  transition: box-shadow .2s var(--aspa-ease), transform .2s var(--aspa-ease);
}
.ed-card:hover { box-shadow: var(--aspa-sh-md); transform: translateY(-2px); text-decoration: none; }
.ed-media {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, var(--aspa-b-600), var(--aspa-b-900));
}
.ed-media .fmt { position: absolute; top: var(--aspa-sp-3); left: var(--aspa-sp-3); z-index: 1; }
.ed-body { padding: var(--aspa-sp-5, 20px) var(--aspa-sp-6) var(--aspa-sp-6); display: flex; flex-direction: column; flex: 1; }
.ed-body h3 {
  font-family: var(--aspa-font-serif);
  font-size: 20px; font-weight: 600; line-height: 1.22;
  letter-spacing: -.01em;
  margin: var(--aspa-sp-3) 0 var(--aspa-sp-2);
}
.ed-card:hover .ed-body h3 { color: var(--aspa-c-600); }
.ed-dek { font-size: 14px; color: var(--aspa-text-muted); line-height: 1.55; margin: 0 0 var(--aspa-sp-4); }
.ed-foot {
  margin-top: auto;
  padding-top: var(--aspa-sp-4);
  border-top: 1px solid var(--aspa-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: var(--aspa-sp-3);
}
.ed-meta { font-family: var(--aspa-font-mono); font-size: 11px; color: var(--aspa-text-faint); text-align: right; }
.byl--sm .avatar { width: 30px; height: 30px; font-size: 12px; }

/* ── Aviso de prototipo ──────────────────────────────── */
.proto-note {
  background: var(--aspa-warn-bg);
  border-bottom: 1px solid #EFD9A8;
  color: var(--aspa-warn);
  font-family: var(--aspa-font-mono);
  font-size: 11.5px;
  text-align: center;
  padding: 7px var(--aspa-sp-4);
  letter-spacing: .04em;
}