/* components.css — Componentes: tarjetas, badges, botones, formularios.
   Sin valores literales de color, tipografía ni espaciado: solo var(--…) de tokens.css. */

/* ---------------------------------------------------------------------
   Badges de estado del evento
   --------------------------------------------------------------------- */
.asp-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.2;
  padding: var(--sp-1) 0;
}

.asp-badge::before {
  content: "";
  width: var(--sp-3);
  height: 1px;
  background: currentColor;
}

.asp-badge--abierta,
.asp-badge--en_curso {
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
}

.asp-badge--reserva {
  color: var(--c-state-reserva-fg);
}

.asp-badge--cerrada,
.asp-badge--agotado,
.asp-badge--realizado {
  color: var(--c-state-realizado-fg);
}

/* Chip de tipo (Artículo, Serie, Conferencia, PDF) */
.asp-chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent);
  line-height: 1.4;
}

.asp-chip--accent {
  color: var(--c-accent);
  font-weight: var(--fw-semibold);
}

/* Filtros de Recursos: píldoras de 44 px */
.asp-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.asp-filtros {
  gap: var(--sp-5);
}

.asp-filtros a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
  box-shadow: inset 0 -1px 0 transparent;
}

.asp-filtros .is-active a,
.asp-filtros a:hover {
  color: var(--c-text);
  box-shadow: inset 0 -1px 0 var(--c-accent);
}

/* ---------------------------------------------------------------------
   Botones y enlaces de acción
   --------------------------------------------------------------------- */
.asp-btn {
  height: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--control-px);
  border-radius: var(--radius-3);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.asp-btn:hover {
  color: var(--c-accent-ink);
  background: var(--c-text);
}

.asp-btn--block {
  display: flex;
  width: 100%;
}

.asp-cta__cerrado {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin: 0;
}

.asp-btn--secundario {
  border: var(--border-hairline) solid var(--c-border-strong);
  background: transparent;
  color: var(--c-accent);
  font-size: var(--fs-xs);
}

.asp-btn--secundario:hover {
  background: var(--c-surface-2);
  color: var(--c-accent);
}

.asp-cta-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
}

.asp-link-archivo {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--c-accent);
  border-bottom: var(--border-hairline) solid var(--c-accent);
}

.asp-link-titulo {
  color: var(--c-text);
}

.asp-cta__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}

.asp-cta__motivo {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------------------
   Banda del flyer: contenido, nunca recortado
   --------------------------------------------------------------------- */
/* La imagen va absoluta dentro de la banda y con object-fit: contain, así
   entra entera siempre (regla 5). Antes usaba max-height en porcentaje dentro
   de una grilla: el porcentaje no se resolvía, la imagen tomaba su alto
   natural y el overflow: hidden le cortaba el pie. */
.asp-flyer {
  position: relative;
  display: block;
  aspect-ratio: var(--band-ratio-mobile);
  background: var(--c-flyer-band);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.asp-flyer img {
  position: absolute;
  top: calc((100% - var(--band-flyer-h)) / 2);
  left: calc((100% - var(--band-flyer-h)) / 2);
  width: var(--band-flyer-h);
  height: var(--band-flyer-h);
  object-fit: contain;
}

.asp-flyer--desktop-wide {
  /* En columnas anchas de escritorio la banda pasa a 4:3 */
}

.asp-flyer--column {
  max-width: var(--w-flyer-column);
}

@media (min-width: 1024px) {
  .asp-flyer--desktop-wide {
    aspect-ratio: var(--band-ratio-desktop);
  }
  .asp-flyer--desktop-wide img {
    top: calc((100% - var(--band-flyer-h-desktop)) / 2);
    left: calc((100% - var(--band-flyer-h-desktop)) / 2);
    width: var(--band-flyer-h-desktop);
    height: var(--band-flyer-h-desktop);
  }
}

/* ---------------------------------------------------------------------
   Ciudad y país: tratamiento tipográfico, sin banderas
   --------------------------------------------------------------------- */
.asp-lugar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.asp-lugar--md {
  font-size: var(--fs-md);
}

.asp-lugar__icono {
  display: block;
  flex: none;
  width: var(--icon-loc);
  height: var(--icon-loc);
}

.asp-lugar__sep {
  width: 1px;
  height: var(--sep-h);
  background: var(--c-border-strong);
}

.asp-lugar__pais {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* Variante grande, apilada: ciudad en display y país bajo un filete corto */
.asp-lugar-grande {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.asp-lugar-grande__ciudad {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
}

.asp-lugar-grande__ciudad .asp-lugar__icono {
  width: var(--icon-loc-lg);
  height: var(--icon-loc-lg);
  color: var(--c-text-muted);
}

.asp-lugar-grande__pais {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.asp-lugar-grande__pais::before {
  content: "";
  width: var(--rule-short);
  height: 1px;
  background: var(--c-border-strong);
}

/* ---------------------------------------------------------------------
   Fecha
   --------------------------------------------------------------------- */
.asp-fecha {
  font-family: var(--font-numeral);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  font-weight: var(--fw-medium);
}

.asp-fecha--xl {
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
}

/* Fecha grande entre filetes: ocupa el lugar del flyer en la ficha vacía y en el hero */
.asp-fecha-grande {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-top: var(--border-hairline) solid var(--c-border);
  border-bottom: var(--border-hairline) solid var(--c-border);
}

.asp-fecha-grande__dias {
  font-family: var(--font-numeral);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-display);
}

.asp-fecha-grande__mes {
  font-family: var(--font-numeral);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------------------
   Tarjeta de evento (listado, home)
   --------------------------------------------------------------------- */
.asp-card-evento {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-card-evento__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.asp-card-evento__titulo {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
}

.asp-card-evento__titulo a {
  color: var(--c-text);
}

.asp-card-evento__sede {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

@media (min-width: 1024px) {
  .asp-card-evento--ancha {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-7);
    align-items: start;
    border: 0;
    border-top: var(--border-hairline) solid var(--c-border);
    border-radius: 0;
    padding-top: var(--sp-5);
    overflow: visible;
  }

  .asp-card-evento--ancha.asp-card-evento--sin-flyer {
    grid-template-columns: minmax(0, 1fr);
  }

  .asp-card-evento--ancha .asp-card-evento__cuerpo {
    padding: 0;
    align-items: flex-start;
    max-width: var(--w-column);
  }

  .asp-card-evento--ancha .asp-card-evento__titulo {
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
  }

  .asp-card-evento--ancha .asp-fecha {
    font-size: var(--fs-xl);
  }
}

/* ---------------------------------------------------------------------
   Fila del archivo por año
   --------------------------------------------------------------------- */
.asp-anio {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.asp-anio__num {
  font-family: var(--font-numeral);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
  line-height: 1;
}

.asp-anio::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.asp-archivo-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top: var(--border-hairline) solid var(--c-border);
  color: var(--c-text);
}

.asp-archivo-item:hover {
  color: var(--c-text);
}

.asp-archivo-item__principal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.asp-archivo-item__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.asp-archivo-item__fecha {
  font-family: var(--font-numeral);
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
  color: var(--c-text-muted);
}

.asp-archivo-item__iniciativa {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent);
}

.asp-archivo-item__extra {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

@media (min-width: 1024px) {
  .asp-anio__num {
    font-size: var(--fs-xl);
  }

  .asp-archivo-item--ancho {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 260px 160px;
    gap: var(--sp-5);
    align-items: center;
    padding: var(--sp-5) 0;
  }

  .asp-archivo-item__titulo {
    font-size: var(--fs-lg);
  }
}

/* ---------------------------------------------------------------------
   /eventos/: cabecera, próximos y archivo como grilla de flyers
   --------------------------------------------------------------------- */
.asp-eventos__cab {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block: var(--sp-7) var(--sp-6);
}

.asp-eventos__cab .asp-indice-anios {
  align-items: baseline;
}

.asp-eventos__proximos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-bottom: var(--sp-7);
}

.asp-eventos__archivo {
  padding-bottom: var(--sp-8);
}

/* El encabezado es pegajoso: el ancla del año no puede quedar debajo. */
[id^="archivo-"] {
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

.asp-grilla-eventos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
}

.asp-evento-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  color: var(--c-text);
}

.asp-evento-tile:hover {
  color: var(--c-text);
}

.asp-flyer--tile {
  aspect-ratio: var(--band-ratio-tile);
  transition: background-color var(--dur) var(--ease);
}

.asp-flyer--tile img {
  top: calc((100% - var(--band-flyer-h-tile)) / 2);
  left: calc((100% - var(--band-flyer-h-tile)) / 2);
  width: var(--band-flyer-h-tile);
  height: var(--band-flyer-h-tile);
}

.asp-evento-tile:hover .asp-flyer--tile {
  background: var(--c-border-strong);
}

/* Sin flyer: la fecha en numerales ocupa la banda, como en la ficha */
.asp-evento-tile__sinflyer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  aspect-ratio: var(--band-ratio-tile);
  padding: var(--sp-4);
  background: var(--c-flyer-band);
  border-radius: var(--radius-4);
}

.asp-evento-tile__dias {
  font-family: var(--font-numeral);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--c-accent);
}

.asp-evento-tile__mes {
  font-family: var(--font-numeral);
  font-size: var(--fs-sm);
  color: var(--c-flyer-band-ink);
}

.asp-evento-tile__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.asp-evento-tile__iniciativa {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  color: var(--c-accent-alt);
}

.asp-evento-tile__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  text-wrap: pretty;
  transition: color var(--dur) var(--ease);
}

.asp-evento-tile:hover .asp-evento-tile__titulo {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.asp-evento-tile:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 4px;
}

.asp-evento-tile__meta {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-heading);
  color: var(--c-text-muted);
}

@media (min-width: 768px) {
  .asp-grilla-eventos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-5);
  }
}

@media (min-width: 1024px) {
  .asp-eventos__cab {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-block: var(--sp-8) var(--sp-7);
  }

  .asp-eventos__cab .asp-indice-anios {
    justify-content: flex-end;
  }

  .asp-eventos__proximos {
    padding-bottom: var(--sp-8);
  }

  .asp-grilla-eventos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .asp-evento-tile__titulo {
    font-size: var(--fs-lg);
  }
}

/* ---------------------------------------------------------------------
   /iniciativas/: un bloque por iniciativa, texto y flyer alternando lado
   --------------------------------------------------------------------- */
.asp-iniciativas {
  padding-bottom: var(--sp-8);
}

.asp-iniciativa-fila {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-iniciativa-fila__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.asp-iniciativa-fila__num {
  font-family: var(--font-numeral);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-accent-alt);
}

.asp-iniciativa-fila__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.asp-iniciativa-fila__titulo a {
  color: var(--c-text);
}

.asp-iniciativa-fila__titulo a:hover {
  color: var(--c-accent);
}

.asp-iniciativa-fila__desc {
  max-width: 52ch;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.asp-iniciativa-fila__desc p {
  margin: 0;
}

.asp-iniciativa-fila__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.asp-iniciativa-fila__proxima {
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
}

.asp-iniciativa-fila__vitrina {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--c-text);
}

.asp-iniciativa-fila__vitrina:hover {
  color: var(--c-text);
}

.asp-iniciativa-fila__vitrina:hover .asp-flyer--tile {
  background: var(--c-border-strong);
}

.asp-iniciativa-fila__vitrina:hover .asp-iniciativa-fila__evento {
  color: var(--c-accent);
}

.asp-iniciativa-fila__vitrina:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 4px;
}

.asp-iniciativa-fila__pie {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.asp-iniciativa-fila__evento {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  transition: color var(--dur) var(--ease);
}

.asp-iniciativa-fila__cuando {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.asp-iniciativa__ediciones {
  padding-top: var(--sp-6);
}

@media (min-width: 1024px) {
  .asp-iniciativa-fila {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--sp-8);
    align-items: center;
    padding-block: var(--sp-8);
  }

  .asp-iniciativa-fila--sin-vitrina {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Cada bloque con su forma: el flyer cambia de lado en cada iniciativa. */
  .asp-iniciativa-fila:nth-child(even) .asp-iniciativa-fila__vitrina {
    order: -1;
  }

  .asp-iniciativa-fila__titulo {
    font-size: var(--fs-3xl);
  }
}

/* Fila compacta de evento en la home */
.asp-evento-fila {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: var(--border-hairline) solid var(--c-border);
  color: var(--c-text);
}

.asp-evento-fila:hover {
  color: var(--c-text);
}

.asp-evento-fila__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.asp-evento-fila__fecha {
  font-family: var(--font-numeral);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.asp-evento-fila__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

/* ---------------------------------------------------------------------
   Ficha de evento
   --------------------------------------------------------------------- */
.asp-ficha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block: var(--sp-6) var(--sp-8);
}

.asp-ficha--vacia {
  gap: var(--sp-6);
  padding-block: var(--sp-7) var(--sp-9);
}

.asp-ficha__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

.asp-ficha__titulo--compacto {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
}

.asp-ficha__cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.asp-bloque {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-bloque--sin-filete {
  padding-top: 0;
  border-top: 0;
}

.asp-bloque__valor {
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
}

.asp-bloque__detalle {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

.asp-sede__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

/* Cómo llegar y agregar al calendario: enlaces secundarios, con alto táctil */
.asp-link-accion {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--control-h);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.asp-link-accion:hover {
  text-decoration-thickness: 2px;
}

.asp-agenda {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.asp-agenda__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-5);
}

.asp-ficha-aside .asp-agenda {
  margin-top: var(--sp-4);
}

/* Columna lateral de la ficha en escritorio */
.asp-ficha-aside {
  display: none;
}

@media (min-width: 1024px) {
  .asp-ficha {
    padding-block: var(--sp-7) var(--sp-8);
  }

  .asp-ficha__titulo,
  .asp-ficha__titulo--compacto {
    font-size: var(--fs-3xl);
    line-height: var(--lh-tight);
  }

  .asp-ficha__linea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    font-family: var(--font-numeral);
    font-size: var(--fs-xl);
  }

  .asp-ficha__linea .asp-lugar__sep {
    height: var(--sep-h-lg);
  }

  .asp-ficha-aside {
    display: flex;
    flex-direction: column;
    border-top: var(--border-hairline) solid var(--c-border);
    background: var(--c-bg);
  }

  .asp-ficha-aside__cta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
  }

  .asp-ficha-aside__precio {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .asp-ficha-aside__bloque {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-5) 0;
    border-top: var(--border-hairline) solid var(--c-border);
  }

  .asp-ficha-aside__bloque > .asp-lugar__icono {
    color: var(--c-text-muted);
    margin-top: 3px;
  }

  .asp-ficha-aside__bloque .asp-stack {
    gap: var(--sp-1);
    min-width: 0;
  }

  .asp-ficha-aside .asp-lugar-grande__pais {
    margin-top: var(--sp-1);
  }

  /* En escritorio, los bloques móviles duplicados en la columna lateral se ocultan */
  .asp-solo-movil {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  .asp-solo-escritorio {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
   Oradores: lista densa con bio desplegable
   --------------------------------------------------------------------- */
.asp-oradores {
  display: flex;
  flex-direction: column;
}

.asp-orador {
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-orador:first-child {
  border-top: 0;
}

.asp-orador__fila {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}

.asp-orador summary.asp-orador__fila {
  cursor: pointer;
}

.asp-orador__foto {
  flex: none;
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  border-radius: 0;
  object-fit: cover;
  filter: grayscale(1);
  background: repeating-linear-gradient(135deg, var(--c-avatar-stripe-a) 0 var(--avatar-stripe), var(--c-avatar-stripe-b) var(--avatar-stripe) calc(var(--avatar-stripe) * 2));
}

.asp-orador__nombre {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asp-orador__nombre strong {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.asp-orador__nombre span {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}

.asp-orador__toggle {
  flex: none;
  width: var(--control-h);
  height: var(--control-h);
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--c-accent);
}

.asp-orador__toggle::before {
  content: "+";
}

.asp-orador[open] .asp-orador__toggle::before {
  content: "–";
}

.asp-orador__bio {
  margin: 0 0 var(--sp-4) calc(var(--avatar-sm) + var(--sp-4));
  padding: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

.asp-orador__bio a {
  box-shadow: inset 0 -1px 0 var(--c-accent);
}

@media (min-width: 1024px) {
  .asp-oradores--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }

  .asp-oradores--grid .asp-orador:nth-child(2) {
    border-top: 0;
  }

  .asp-oradores--grid .asp-orador__foto {
    width: var(--avatar-md);
    height: var(--avatar-md);
  }

  .asp-oradores--grid .asp-orador__bio {
    margin-left: calc(var(--avatar-md) + var(--sp-4));
  }
}

/* ---------------------------------------------------------------------
   Programa
   --------------------------------------------------------------------- */
.asp-programa {
  display: flex;
  flex-direction: column;
}

.asp-programa__fila {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-programa__fila:first-child {
  border-top: 0;
}

.asp-programa__hora {
  font-family: var(--font-numeral);
  font-size: var(--fs-md);
}

.asp-programa__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
}

.asp-programa__orador {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  margin-top: 2px;
}

.asp-programa__dia {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* Aliados: texto separado por puntos medios, o logos si existen */
.asp-aliados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.asp-aliados img {
  height: var(--sp-6);
  width: auto;
}

/* ---------------------------------------------------------------------
   Hero: fotografía documental con velo
   --------------------------------------------------------------------- */
.asp-hero {
  position: relative;
  background: var(--c-photo-placeholder-b);
  color: var(--c-photo-text);
  overflow: hidden;
}

.asp-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asp-hero__velo {
  position: relative;
  min-height: var(--hero-min-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-5);
  padding-block: var(--sp-8) var(--sp-7);
  background: linear-gradient(to top, var(--c-photo-scrim-strong) 0%, var(--c-photo-scrim) 55%, var(--c-photo-scrim-none) 100%);
}

.asp-hero__velo--centrado {
  align-items: stretch;
}

.asp-hero--nosotros .asp-hero__velo {
  min-height: var(--hero-nosotros-min-h);
}

.asp-hero__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  max-width: 22ch;
}

.asp-hero__cita {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  font-weight: var(--fw-regular);
}

.asp-hero__texto {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  max-width: 38ch;
}

.asp-hero__texto--ancho {
  max-width: 60ch;
}

.asp-hero .asp-label {
  color: var(--c-photo-text);
}

.asp-hero__filete {
  height: 1px;
  background: var(--c-photo-rule);
}

.asp-hero__ultimo {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--c-photo-text);
}

.asp-hero__ultimo:hover {
  color: var(--c-photo-text);
}

.asp-hero__ultimo-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}

.asp-hero__sep {
  width: 1px;
  height: 12px;
  background: var(--c-photo-rule);
}

@media (min-width: 1024px) {
  .asp-hero__velo {
    min-height: var(--hero-min-h-desktop);
    padding-block: var(--sp-9) var(--sp-8);
  }

  .asp-hero__titulo {
    font-size: var(--fs-3xl);
  }

  .asp-hero__texto {
    font-size: var(--fs-lg);
  }
}

/* Hero con evento destacado (sin fotografía): columna de texto */
.asp-hero-evento {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-7) var(--sp-8);
}

.asp-hero-evento__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

/* Misión sobre fotografía */
.asp-mision .asp-hero__velo {
  min-height: 0;
  justify-content: flex-start;
  padding-block: var(--sp-8);
}

@media (min-width: 1024px) {
  .asp-mision .asp-hero__velo {
    padding-block: var(--sp-9);
  }
}

/* Galería de la home */
.asp-galeria__item {
  position: relative;
  border-radius: var(--radius-4);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.asp-grid-galeria > :first-child.asp-galeria__item {
  aspect-ratio: 3 / 2;
}

.asp-galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------
   Personas: consejo pastoral y tarjeta de persona
   --------------------------------------------------------------------- */
.asp-persona-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  text-align: left;
  color: var(--c-text);
}

.asp-persona-box:hover {
  color: var(--c-accent);
}

.asp-persona-box__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  margin-bottom: var(--sp-2);
  background: repeating-linear-gradient(135deg, var(--c-avatar-stripe-a) 0 var(--avatar-stripe), var(--c-avatar-stripe-b) var(--avatar-stripe) calc(var(--avatar-stripe) * 2));
}

.asp-persona-box__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.asp-persona-box__iglesia {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

.asp-persona-box__lugar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.asp-persona-box:hover .asp-persona-box__foto {
  filter: none;
}

/* Cita destacada en caja */
.asp-cita {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-surface-2);
  border-radius: var(--radius-4);
}

.asp-cita blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  font-weight: var(--fw-regular);
  font-style: italic;
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .asp-cita {
    padding: var(--sp-6);
  }
  .asp-cita blockquote {
    font-size: var(--fs-xl);
  }
}

/* Caja con borde (Sobre este documento, serie) */
.asp-caja {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: var(--border-hairline) solid var(--c-border);
  border-bottom: var(--border-hairline) solid var(--c-border);
}

.asp-caja--surface,
.asp-caja--suave {
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 0;
}

/* ---------------------------------------------------------------------
   Afirmaciones y Negaciones
   --------------------------------------------------------------------- */
.asp-indice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.asp-indice a,
.asp-indice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--sp-2);
  border-bottom: var(--border-hairline) solid var(--c-border-strong);
  font-family: var(--font-numeral);
  font-size: var(--fs-md);
  color: var(--c-text);
}

.asp-indice a:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.asp-indice span {
  color: var(--c-text-faint);
}

.asp-articulo-af {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  border-top: var(--border-hairline) solid var(--c-border);
  scroll-margin-top: var(--sp-6);
}

.asp-articulo-af__num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}

.asp-articulo-af__num strong {
  font-family: var(--font-numeral);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--c-text-faint);
  line-height: 1;
}

.asp-articulo-af__parte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.asp-articulo-af__parte p {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.asp-articulo-af__parte--niega p {
  color: var(--c-text-muted);
}

.asp-articulos-af {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

@media (min-width: 1024px) {
  .asp-articulo-af__num strong {
    font-size: var(--fs-3xl);
  }
}

@media print {
  .asp-header, .asp-footer, .asp-indice, .asp-franja, .asp-section--proximo {
    display: none !important;
  }
  .asp-articulo-af {
    break-inside: avoid;
  }
}

/* ---------------------------------------------------------------------
   Artículos (Recursos)
   --------------------------------------------------------------------- */
.asp-articulo-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: var(--border-hairline) solid var(--c-border);
  color: var(--c-text);
}

.asp-articulo-item:hover {
  color: var(--c-text);
}

.asp-articulo-item__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.asp-articulo-item__fecha {
  font-family: var(--font-numeral);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.asp-serie-lista {
  display: flex;
  flex-direction: column;
}

.asp-serie-lista__fila {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: var(--border-hairline) solid var(--c-border);
  color: var(--c-text);
}

.asp-serie-lista__fila:first-child {
  border-top: 0;
}

.asp-serie-lista__fila.is-current {
  color: var(--c-accent);
}

.asp-serie-lista__num {
  flex: none;
  width: 26px;
  font-family: var(--font-numeral);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-faint);
}

.asp-serie-lista__fila.is-current .asp-serie-lista__num {
  color: var(--c-accent);
}

.asp-articulo__cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.asp-articulo__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.asp-articulo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: var(--border-hairline) solid var(--c-border);
}

.asp-articulo__meta > div {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.asp-articulo__meta a {
  color: var(--c-text);
  box-shadow: inset 0 -1px 0 var(--c-border-strong);
}

.asp-aside-caja {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--c-border);
}

/* Paginación nativa */
.asp-paginacion .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-paginacion .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--sp-2);
  font-family: var(--font-numeral);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.asp-paginacion .page-numbers.current {
  color: var(--c-text);
  box-shadow: inset 0 -1px 0 var(--c-accent);
}

/* ---------------------------------------------------------------------
   Iniciativas
   --------------------------------------------------------------------- */
.asp-iniciativa-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: var(--border-hairline) solid var(--c-border);
  color: var(--c-text);
}

.asp-iniciativa-card:hover {
  color: var(--c-accent);
}

.asp-iniciativa-card__titulo {
  font-size: var(--fs-lg);
}

.asp-iniciativa-card__bajada {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------------------
   Formularios (búsqueda, contacto)
   --------------------------------------------------------------------- */
.asp-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.asp-form label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.asp-form input[type="text"],
.asp-form input[type="search"],
.asp-form input[type="email"],
.asp-form textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-hairline) solid var(--c-border-strong);
  border-radius: var(--radius-3);
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
}

.asp-buscador {
  display: flex;
  gap: var(--sp-2);
}

.asp-buscador input {
  flex: 1;
  min-width: 0;
}

/* Página genérica y 404 */
.asp-pagina__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

@media (min-width: 1024px) {
  .asp-pagina__titulo {
    font-size: var(--fs-3xl);
  }
}

/* Botón del menú móvil */
.asp-header__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text);
  cursor: pointer;
}

.asp-btn--inline {
  align-self: flex-start;
}

/* Lugar: la ciudad no se parte del ícono; el país no se parte en dos */
.asp-lugar {
  flex-wrap: wrap;
}

.asp-lugar > span:not(.asp-lugar__sep) {
  white-space: nowrap;
}

.asp-lugar--md {
  font-size: var(--fs-sm);
}

@media (min-width: 1024px) {
  .asp-lugar--md {
    font-size: var(--fs-md);
  }
}

/* Archivo: título y datos extra apilados también en móvil */
.asp-archivo-item__principal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

@media (min-width: 1024px) {
  .asp-header__toggle {
    display: none;
  }
}

/* Ficha sin columna izquierda: la lateral ocupa el ancho de lectura */
@media (min-width: 1024px) {
  .asp-grid-ficha--solo-aside {
    grid-template-columns: minmax(0, 520px);
  }
}

/* ---------------------------------------------------------------------
   Franja "Próximo evento": bloque a sangre de color pleno bajo el hero.
   Único fondo saturado de la página. Texto a opacidad completa.
   --------------------------------------------------------------------- */
.asp-franja {
  background: var(--c-franja-bg);
  color: var(--c-franja-fg);
}

.asp-franja a {
  color: var(--c-franja-fg);
}

.asp-franja a:hover {
  color: var(--c-franja-fg);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.asp-franja__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-block: var(--sp-7);
}

.asp-franja__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.asp-franja__cabecera .asp-label {
  color: var(--c-franja-fg);
  font-weight: var(--fw-medium);
}

.asp-franja__sep {
  width: 1px;
  height: var(--sep-h);
  background: var(--c-franja-rule-strong);
}

.asp-franja__fecha {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.asp-franja__dias {
  font-family: var(--font-numeral);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

.asp-franja__mes {
  font-family: var(--font-numeral);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.asp-franja__datos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.asp-franja__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}

.asp-franja__titulo a {
  display: inline-block;
  min-height: var(--control-h);
}

.asp-franja .asp-lugar,
.asp-franja .asp-lugar__pais {
  color: var(--c-franja-fg);
}

.asp-franja .asp-lugar__sep {
  background: var(--c-franja-rule);
}

.asp-franja__estado {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.asp-btn--invertido {
  background: var(--c-btn-invertido-bg);
  color: var(--c-btn-invertido-fg);
}

.asp-btn--invertido:hover {
  background: var(--c-btn-invertido-bg);
  color: var(--c-btn-invertido-fg);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.asp-franja__btn-largo {
  display: none;
}

@media (min-width: 769px) {
  .asp-franja__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8);
  }

  .asp-franja__datos {
    gap: var(--sp-4);
    padding-left: var(--sp-8);
    border-left: var(--border-hairline) solid var(--c-franja-rule);
  }

  .asp-franja__titulo {
    font-size: var(--fs-2xl);
  }

  .asp-franja .asp-btn--block {
    display: inline-flex;
    width: auto;
  }

  .asp-franja__btn-corto {
    display: none;
  }

  .asp-franja__btn-largo {
    display: inline;
  }
}

/* Franja en móvil: etiqueta y estado primero, después la fecha, el título,
   el lugar y el botón. Los hijos de "datos" pasan al nivel del contenedor. */
@media (max-width: 768px) {
  .asp-franja__datos {
    display: contents;
  }
  .asp-franja__cabecera { order: 1; }
  .asp-franja__fecha    { order: 2; }
  .asp-franja__titulo   { order: 3; }
  .asp-franja .asp-lugar { order: 4; }
  .asp-franja .asp-btn  { order: 5; }
}

/* El botón invertido gana a la regla genérica de enlaces de la franja */
.asp-franja .asp-btn--invertido,
.asp-franja .asp-btn--invertido:hover {
  color: var(--c-btn-invertido-fg);
}

/* ---------------------------------------------------------------------
   Portada: el evento sobre la fotografía a sangre. Velo en degradado, solo
   abajo, para que la foto se vea.
   --------------------------------------------------------------------- */
.asp-portada {
  position: relative;
  background: var(--c-photo-placeholder-b);
  color: var(--c-photo-text);
  overflow: hidden;
}

.asp-portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asp-portada__velo {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  /* Velo abajo para el texto del evento y un velo corto arriba para la cabecera transparente */
  background:
    linear-gradient(to bottom, var(--c-photo-scrim) 0, var(--c-photo-scrim-none) var(--header-h-desktop)),
    radial-gradient(ellipse 55% 60% at 100% 0%, var(--c-photo-scrim-strong) 0%, var(--c-photo-scrim-none) 100%),
    linear-gradient(to top, var(--c-photo-scrim-strong) 0%, var(--c-photo-scrim) 45%, var(--c-photo-scrim-none) 100%);
}

.asp-portada__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-block: var(--sp-9) var(--sp-8);
}

.asp-portada .asp-label,
.asp-portada .asp-lugar,
.asp-portada .asp-lugar__pais {
  color: var(--c-photo-text);
}

.asp-portada .asp-lugar__sep {
  background: var(--c-photo-rule);
}

.asp-portada__cab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.asp-portada__sep {
  width: 1px;
  height: var(--sep-h);
  background: var(--c-photo-rule);
}

.asp-portada__fecha {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asp-portada__dias {
  display: block;
  font-family: var(--font-numeral);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.asp-portada__mes {
  font-family: var(--font-numeral);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-heading);
}

.asp-portada__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  max-width: 18ch;
}

.asp-portada__titulo a {
  color: var(--c-photo-text);
}

.asp-portada__titulo a:hover {
  color: var(--c-photo-text);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.asp-portada__pie {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-2);
}

.asp-portada__cita {
  font-size: var(--fs-2xl);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  max-width: 24ch;
}

@media (min-width: 1024px) {
  .asp-portada__velo {
    min-height: 88vh;
  }

  .asp-portada__inner {
    padding-block: var(--sp-10) var(--sp-9);
  }

  .asp-portada__titulo {
    font-size: var(--fs-3xl);
  }

  .asp-portada__pie {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .asp-portada__cita {
    font-size: var(--fs-3xl);
  }
}

/* Quiénes somos: texto grande en serif y cita en itálica */
.asp-editorial__texto {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}

.asp-editorial__cita {
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.asp-editorial__cita .asp-label {
  font-style: normal;
  margin-left: var(--sp-2);
}

/* Lista numerada con filetes (iniciativas) */
.asp-lista-numerada {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-lista-numerada__item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-5) 0;
  border-bottom: var(--border-hairline) solid var(--c-border);
  color: var(--c-text);
}

.asp-lista-numerada__item:hover {
  color: var(--c-accent);
}

.asp-lista-numerada__num {
  font-family: var(--font-numeral);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  color: var(--c-accent);
  line-height: 1;
}

.asp-lista-numerada__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.asp-lista-numerada__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
}

.asp-lista-numerada__bajada {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

@media (min-width: 1024px) {
  .asp-lista-numerada__item {
    grid-template-columns: 5rem minmax(0, 1fr);
    padding: var(--sp-6) 0;
  }
  .asp-lista-numerada__titulo {
    font-size: var(--fs-xl);
  }
}

/* Fotografía: una a sangre y una tira de tres */
.asp-fotos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-8);
}

.asp-fotos__principal {
  aspect-ratio: 16 / 10;
  background: var(--c-surface-2);
  overflow: hidden;
}

.asp-fotos__principal img,
.asp-fotos__tira img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asp-fotos__tira {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.asp-fotos__tira figure {
  aspect-ratio: 4 / 3;
  background: var(--c-surface-2);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .asp-fotos__principal {
    aspect-ratio: 21 / 9;
  }
  .asp-fotos__tira {
    gap: var(--sp-4);
  }
}

/* Retratos del consejo: cuadrados 4:5, sin círculos */
.asp-retratos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
}

.asp-retrato {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--c-text);
}

.asp-retrato:hover {
  color: var(--c-accent);
}

.asp-retrato__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: repeating-linear-gradient(135deg, var(--c-avatar-stripe-a) 0 var(--avatar-stripe), var(--c-avatar-stripe-b) var(--avatar-stripe) calc(var(--avatar-stripe) * 2));
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur) var(--ease);
}

.asp-retrato:hover .asp-retrato__foto {
  filter: none;
}

.asp-retrato__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
  margin-top: var(--sp-1);
}

.asp-retrato__iglesia {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

@media (min-width: 768px) {
  .asp-retratos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .asp-retratos {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Pie oscuro */
.asp-footer__marca {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.asp-footer__logo img {
  filter: invert(1) brightness(1.2);
}

.asp-footer__mision {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-dark-muted);
  max-width: 44ch;
}

.asp-footer__contacto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}

.asp-footer__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}

@media (min-width: 1024px) {
  .asp-footer__redes {
    flex-direction: column;
    gap: var(--sp-2);
  }
}

/* Retrato en la ficha de persona */
.asp-persona-ficha__foto {
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: repeating-linear-gradient(135deg, var(--c-avatar-stripe-a) 0 var(--avatar-stripe), var(--c-avatar-stripe-b) var(--avatar-stripe) calc(var(--avatar-stripe) * 2));
}

/* ---------------------------------------------------------------------
   Recursos: cabecera, saltos y último artículo en grande
   --------------------------------------------------------------------- */
.asp-recursos__cab {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-7) var(--sp-6);
}

.asp-recursos__bajada {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  color: var(--c-text-muted);
  max-width: 34ch;
}

.asp-recursos__saltos {
  display: flex;
  /* Tres rótulos en mayúsculas no entran en 375 px: bajan de línea en vez
     de desbordar la página. */
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
}

.asp-recursos__saltos a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text);
  box-shadow: inset 0 -1px 0 var(--c-border-strong);
}

.asp-recursos__saltos a:hover {
  box-shadow: inset 0 -1px 0 var(--c-accent);
}

.asp-filtros--columna {
  gap: var(--sp-2) var(--sp-5);
}

.asp-articulo-destacado {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: var(--border-hairline) solid var(--c-border);
}

.asp-articulo-destacado__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  max-width: 22ch;
}

.asp-articulo-destacado__resumen {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  max-width: 60ch;
}

.asp-articulo-destacado__meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

@media (min-width: 1024px) {
  .asp-recursos__cab {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-block: var(--sp-8) var(--sp-7);
  }

  .asp-filtros--columna {
    flex-direction: column;
    gap: 0;
  }

  .asp-filtros--columna a {
    min-height: var(--sp-6);
  }

  .asp-articulo-destacado__titulo {
    font-size: var(--fs-3xl);
  }

  .asp-articulo-destacado__resumen {
    font-size: var(--fs-lg);
  }
}

/* ---------------------------------------------------------------------
   Predicaciones: filas y reproductor
   --------------------------------------------------------------------- */
.asp-predicacion-fila {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: var(--border-hairline) solid var(--c-border);
  color: var(--c-text);
}

.asp-predicacion-fila:hover .asp-predicacion-fila__titulo {
  color: var(--c-accent);
}

.asp-predicacion-fila__tipo {
  padding-top: 0.35em;
}

.asp-predicacion-fila__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.asp-predicacion-fila__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
}

.asp-predicacion-fila__meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.asp-predicacion-fila__evento {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.asp-predicacion-fila__fecha {
  grid-column: 2;
  font-family: var(--font-numeral);
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
}

@media (min-width: 1024px) {
  .asp-predicacion-fila {
    grid-template-columns: 5rem minmax(0, 1fr) 12rem;
    align-items: start;
  }
  .asp-predicacion-fila__fecha {
    grid-column: 3;
    text-align: right;
    padding-top: 0.35em;
  }
}

.asp-reproductor {
  margin-block: var(--sp-2) var(--sp-4);
}

.asp-reproductor--video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-photo-placeholder-b);
}

.asp-reproductor--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.asp-reproductor--audio audio {
  display: block;
  width: 100%;
}

/* ---------------------------------------------------------------------
   Imágenes: artículos y predicaciones.
   Acá sí se recorta (16:9). El flyer del evento es el único que nunca se
   recorta, y tiene su propia banda; ver regla 5 de CLAUDE.md.
   --------------------------------------------------------------------- */
.asp-imagen {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-4);
  background: var(--c-surface-2);
  line-height: 0;
}

.asp-imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.asp-imagen--tarjeta,
.asp-imagen--miniatura,
.asp-imagen--apertura {
  aspect-ratio: 16 / 9;
}

a:hover > .asp-imagen img,
a:hover .asp-imagen img {
  transform: scale(1.03);
}

/* Artículo en listados: la foto arriba, el texto debajo */
.asp-articulo-item--con-imagen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.asp-articulo-item__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* Último artículo: apertura a todo el ancho de la columna */
.asp-articulo-destacado__foto {
  display: block;
  margin-bottom: var(--sp-2);
}

/* Apertura dentro de la ficha del artículo */
.asp-imagen--apertura {
  margin-block: var(--sp-5);
}

/* Predicación con miniatura: el video se ve antes de leerse */
.asp-predicacion-fila--con-imagen {
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: start;
}

.asp-predicacion-fila__foto {
  position: relative;
  display: block;
}

/* Play en la esquina inferior: en el centro tapaba el texto que las
   miniaturas de YouTube suelen llevar ("El llamado"). */
.asp-play {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--c-photo-scrim-strong);
}

.asp-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.125rem;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.5rem;
  border-color: transparent transparent transparent var(--c-accent-ink);
}

@media (min-width: 768px) {
  /* En columna ancha el artículo pasa a foto a la izquierda */
  .asp-articulo-item--con-imagen {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
  }

  .asp-predicacion-fila--con-imagen {
    grid-template-columns: 11rem minmax(0, 1fr) auto;
  }
}

.asp-articulo-item__resumen {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------
   Archivo de predicaciones: grilla en vez de una fila abajo de la otra.
   Con más de cien sesiones, la lista vertical era kilométrica.
   --------------------------------------------------------------------- */
.asp-indice-anios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-numeral);
  font-size: var(--fs-sm);
}

.asp-indice-anios a {
  color: var(--c-accent);
  box-shadow: inset 0 -1px 0 var(--c-border-strong);
}

.asp-indice-anios a:hover {
  box-shadow: inset 0 -1px 0 var(--c-accent);
}

.asp-anio__num--grilla {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.asp-anio__cuenta {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.asp-grilla-predicaciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
}

.asp-predicacion-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--c-text);
}

.asp-predicacion-tarjeta:hover .asp-predicacion-tarjeta__titulo {
  color: var(--c-accent);
}

.asp-predicacion-tarjeta__foto {
  position: relative;
  display: block;
}

.asp-predicacion-tarjeta__sinfoto {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--c-surface-2);
  border-radius: var(--radius-4);
  color: var(--c-text-muted);
}

.asp-predicacion-tarjeta__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.asp-predicacion-tarjeta__meta {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

@media (min-width: 768px) {
  .asp-grilla-predicaciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }
}

@media (min-width: 1024px) {
  .asp-grilla-predicaciones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .asp-predicacion-tarjeta__titulo {
    font-size: var(--fs-md);
  }
}

/* El encabezado del sitio es pegajoso: el ancla del año no puede quedar
   debajo de él. */
[id^="anio-"] {
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

/* Año plegable del archivo de predicaciones */
.asp-anio-plegable > summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--sp-2);
}

.asp-anio-plegable > summary::-webkit-details-marker {
  display: none;
}

.asp-anio-plegable > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--c-accent);
  border-bottom: 1.5px solid var(--c-accent);
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform var(--dur) var(--ease);
}

.asp-anio-plegable[open] > summary::after {
  transform: rotate(-135deg) translateY(-0.15rem);
}

.asp-anio-plegable > summary:hover span:first-child {
  color: var(--c-accent);
}

.asp-anio-plegable > summary:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Inicio: cada bloque con su forma
   --------------------------------------------------------------------- */

/* Dos enlaces al pie de un texto */
.asp-row--enlaces {
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}

/* Encabezado de sección fuera de la grilla editorial */
.asp-cab-suelto {
  margin-bottom: var(--sp-5);
}

@media (min-width: 768px) {
  .asp-cab-suelto {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
}

/* Predicaciones sobre banda oscura: es el bloque con más color del inicio */
.asp-banda-oscura {
  background: var(--c-dark-bg);
  color: var(--c-dark-fg);
}

.asp-banda-oscura .asp-label,
.asp-banda-oscura .asp-predicacion-tarjeta,
.asp-banda-oscura .asp-predicacion-tarjeta__titulo {
  color: var(--c-dark-fg);
}

.asp-banda-oscura .asp-predicacion-tarjeta__meta {
  color: var(--c-dark-muted);
}

.asp-banda-oscura .asp-predicacion-tarjeta:hover .asp-predicacion-tarjeta__titulo {
  color: var(--c-dark-muted);
}

.asp-banda-oscura .asp-cta-link {
  color: var(--c-dark-fg);
  text-decoration-color: var(--c-dark-rule);
}

.asp-banda-oscura .asp-cta-link:hover {
  text-decoration-color: var(--c-dark-fg);
}

.asp-banda-oscura .asp-imagen,
.asp-banda-oscura .asp-predicacion-tarjeta__sinfoto {
  background: var(--c-dark-surface);
}

/* Eventos en tamaño chico (inicio). En el teléfono: flyer a la izquierda,
   datos a la derecha. Desde 768 px: tres columnas. El flyer siempre entero
   sobre la banda tonal, nunca recortado (regla 5). */
.asp-grilla-eventos-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.asp-evento-mini {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  color: var(--c-text);
}

.asp-evento-mini:hover .asp-evento-mini__titulo {
  color: var(--c-accent);
}

/* Un solo formato para los tres casos (flyer 4:5, flyer cuadrado, sin
   flyer): la misma caja con el mismo fondo neutro. El flyer va absoluto y
   con object-fit: contain, así nunca empuja la caja ni se recorta (regla 5).
   Antes la imagen desbordaba la caja y overflow: hidden le cortaba el pie. */
.asp-evento-mini__visual {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--c-flyer-band);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.asp-evento-mini__flyer {
  position: absolute;
  inset: var(--sp-2);
  display: block;
}

.asp-evento-mini__flyer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sin flyer: la fecha sobre el mismo fondo, en azul. Mismo peso que un flyer,
   no un bloque de color que parezca otra cosa. */
.asp-evento-mini__fecha {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--sp-1);
  color: var(--c-accent);
  text-align: center;
}

.asp-evento-mini__dias {
  font-family: var(--font-numeral);
  font-size: var(--fs-lg);
  line-height: 1;
}

.asp-evento-mini__mes {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xs);
}

.asp-evento-mini__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.asp-evento-mini__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  transition: color var(--dur) var(--ease);
}

.asp-evento-mini__dato {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

@media (min-width: 768px) {
  .asp-grilla-eventos-mini {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .asp-evento-mini {
    grid-template-columns: minmax(0, 1fr);
  }

  .asp-evento-mini__visual {
    aspect-ratio: 4 / 3;
  }

  .asp-evento-mini__flyer {
    inset: var(--sp-3);
  }

  .asp-evento-mini__dias {
    font-size: var(--fs-2xl);
  }
}

/* ---------------------------------------------------------------------
   Iniciativas: tarjetas con foto propia o bloque de color, nombre grande.
   Reemplazan a las cajas con filete y párrafo recortado.
   --------------------------------------------------------------------- */
.asp-grilla-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

/* Numeral arriba, nombre y próximo encuentro abajo. Sin proporción fija: con
   4:5 eran bloques altos y vacíos que parecían placeholders, y cuando un
   nombre ocupaba tres líneas los numerales quedaban desalineados. */
.asp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 10rem;
  padding: var(--sp-4);
  overflow: hidden;
  border-radius: var(--radius-4);
  color: var(--c-tile-ink);
  isolation: isolate;
}

.asp-tile:hover {
  color: var(--c-tile-ink);
}

.asp-tile--tono-1 { background: var(--c-tile-1); }
.asp-tile--tono-2 { background: var(--c-tile-2); }
.asp-tile--tono-3 { background: var(--c-tile-3); }
.asp-tile--tono-4 { background: var(--c-tile-4); }

.asp-tile__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

/* Con foto, velo desde abajo para que el nombre pase AA sobre cualquier imagen */
.asp-tile--con-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--c-photo-scrim-strong) 0%, var(--c-photo-scrim) 45%, var(--c-photo-scrim-none) 100%);
}

.asp-tile:hover .asp-tile__foto {
  transform: scale(1.04);
}

.asp-tile__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.asp-tile__num {
  font-family: var(--font-numeral);
  font-size: var(--fs-sm);
  opacity: 0.75;
}

.asp-tile__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  text-wrap: balance;
}

.asp-tile__flecha {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.asp-tile:hover .asp-tile__flecha {
  opacity: 1;
  transform: translateX(3px) rotate(45deg);
}

/* ---------------------------------------------------------------------
   Artículos en el inicio: a la escala de las predicaciones
   --------------------------------------------------------------------- */
.asp-grilla-articulos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.asp-articulo-tarjeta {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  color: var(--c-text);
}

.asp-articulo-tarjeta--sin-foto {
  grid-template-columns: minmax(0, 1fr);
}

.asp-articulo-tarjeta:hover .asp-articulo-tarjeta__titulo {
  color: var(--c-accent);
}

.asp-articulo-tarjeta__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.asp-articulo-tarjeta__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  transition: color var(--dur) var(--ease);
}

.asp-articulo-tarjeta__meta {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------------------
   Cierre: "Sumate" sobre la foto de la galería
   --------------------------------------------------------------------- */
.asp-fotos__tira--cierre {
  padding-block: var(--sp-6) var(--sp-4);
}

.asp-cierre {
  position: relative;
  background: var(--c-dark-bg);
  color: var(--c-photo-text);
  isolation: isolate;
  overflow: hidden;
}

.asp-cierre__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asp-cierre__velo {
  display: flex;
  align-items: flex-end;
  min-height: 22rem;
}

.asp-cierre--con-foto .asp-cierre__velo {
  min-height: 70vh;
  background: linear-gradient(to top, var(--c-photo-scrim-strong) 0%, var(--c-photo-scrim) 50%, var(--c-photo-scrim-none) 100%);
}

.asp-cierre__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-7);
}

.asp-cierre__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--c-photo-text);
}

.asp-cierre__texto {
  max-width: 46ch;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-photo-text);
}

@media (min-width: 768px) {
  .asp-grilla-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .asp-tile {
    min-height: 13rem;
    padding: var(--sp-5);
  }

  .asp-tile__titulo {
    font-size: var(--fs-lg);
  }

  .asp-grilla-articulos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .asp-articulo-tarjeta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .asp-tile__foto,
  .asp-tile__flecha,
  .asp-imagen img {
    transition: none;
  }
}


/* ---------------------------------------------------------------------
   Ajustes de la revisión de diseño del 23-9-2026
   --------------------------------------------------------------------- */

/* Cabecera de sección: rótulo y enlace sobre la misma línea. Solo en fila:
   en el teléfono van apilados y "center" los centraba en horizontal. */
@media (min-width: 768px) {
  .asp-cab-suelto {
    align-items: center;
  }
}

.asp-cab-suelto .asp-cta-link {
  font-size: var(--fs-label);
}

/* Un solo ritmo vertical entre los bloques del inicio */
.asp-home-bloque,
.asp-editorial.asp-home-bloque {
  padding-block: var(--sp-home);
}

/* Hero: manda el nombre del evento, no la fecha */
.asp-portada__dias {
  font-size: var(--fs-xl);
}

.asp-portada__titulo {
  font-size: var(--fs-2xl);
}

/* En el inicio el hero ya es el próximo evento: el aviso de la cabecera
   repetía exactamente lo mismo. */
.home .asp-header__cta,
.home .asp-nav__proximo {
  display: none;
}

/* Quiénes somos: la referencia va debajo de la cita, alineada con el texto */
.asp-editorial__cita .asp-label {
  display: block;
  margin-left: 0;
  margin-top: var(--sp-2);
}

/* Iniciativas */
.asp-tile__dato {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-tile-ink);
}

/* Metadatos de tarjeta legibles a tamaño real */
.asp-predicacion-tarjeta__meta,
.asp-articulo-tarjeta__meta {
  font-size: var(--fs-sm);
}

/* Filete entre secciones: del ancho del contenido, no del contenedor con
   sus márgenes. Antes el borde iba sobre la caja con padding y sobresalía. */
.asp-container.asp-section--rule {
  border-top: 0;
  background-image: linear-gradient(var(--c-border), var(--c-border));
  background-repeat: no-repeat;
  background-position: center top;
  background-size: calc(100% - 2 * var(--w-gutter)) var(--border-hairline);
}

.asp-banda > .asp-section--rule {
  background-image: none;
}

/* Pie */
.asp-footer__inner {
  padding-block: var(--sp-7) var(--sp-6);
}

.asp-footer__redes {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--sp-3) var(--sp-5);
}

/* Una dirección de email en mayúsculas se lee mal: va en minúsculas y sin
   tracking, con el mismo tamaño que el resto de la columna. */
.asp-footer__email[href^="mailto:"] {
  text-transform: none;
  letter-spacing: normal;
}

/* Contacto y redes con el mismo tratamiento que la columna "Sitio" */
.asp-footer__email,
.asp-footer__redes a {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.asp-footer__legal {
  padding-block: var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-dark-muted);
  background-image: linear-gradient(var(--c-dark-rule), var(--c-dark-rule));
  background-repeat: no-repeat;
  background-position: center top;
  background-size: calc(100% - 2 * var(--w-gutter)) var(--border-hairline);
}

@media (min-width: 768px) {
  .asp-portada__pie {
    justify-content: flex-start;
    gap: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  .asp-portada__dias {
    font-size: var(--fs-2xl);
  }

  .asp-portada__titulo {
    font-size: var(--fs-3xl);
    max-width: 16ch;
  }
}

/* ---------------------------------------------------------------------
   Titulares de sección, buscador, testimonio y movimiento (23-9-2026)
   --------------------------------------------------------------------- */

/* Cada bloque abre con un titular de verdad, no con un rótulo de 13 px */
.asp-seccion__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--c-text);
}

.asp-banda-oscura .asp-seccion__titulo {
  color: var(--c-dark-fg);
}

@media (min-width: 768px) {
  /* Titular grande y enlace chico: se alinean por la línea base. El enlace
     trae align-self: flex-start de su regla general y le ganaba al
     contenedor; hay que pisarlo acá. */
  .asp-cab-suelto {
    align-items: baseline;
  }

  .asp-cab-suelto .asp-cta-link {
    align-self: baseline;
  }
}

/* Buscador de predicaciones */
.asp-buscador {
  display: flex;
  width: 100%;
  max-width: 36rem;
}

.asp-buscador__campo {
  flex: 1;
  min-width: 0;
  min-height: var(--control-h);
  padding-inline: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-bg);
  border: var(--border-hairline) solid var(--c-border-strong);
  border-right: 0;
  border-radius: var(--radius-3) 0 0 var(--radius-3);
}

.asp-buscador__campo::placeholder {
  color: var(--c-text-faint);
}

.asp-buscador__campo:focus-visible,
.asp-buscador__boton:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.asp-buscador__boton {
  min-height: var(--control-h);
  padding-inline: var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  background: var(--c-accent);
  border: 0;
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
  cursor: pointer;
}

/* En la banda oscura: campo translúcido, botón invertido */
.asp-buscador--banda {
  margin-bottom: var(--sp-6);
}

.asp-buscador--banda .asp-buscador__campo {
  color: var(--c-dark-fg);
  background: var(--c-dark-surface);
  border-color: var(--c-dark-border);
}

.asp-buscador--banda .asp-buscador__campo::placeholder {
  color: var(--c-dark-muted);
}

.asp-buscador--banda .asp-buscador__boton {
  color: var(--c-btn-invertido-fg);
  background: var(--c-btn-invertido-bg);
}

.asp-buscador--banda .asp-buscador__campo:focus-visible,
.asp-buscador--banda .asp-buscador__boton:focus-visible {
  outline-color: var(--c-dark-fg);
}

/* Atajos por orador */
.asp-atajos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
}

.asp-atajo {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
  text-underline-offset: 0.35em;
}

.asp-atajo:hover,
.asp-atajo.is-activo {
  text-decoration-color: currentColor;
}

.asp-atajo.is-activo {
  font-weight: var(--fw-semibold);
}

.asp-busqueda__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-5);
}

.asp-busqueda__vacia {
  max-width: 48ch;
  margin-bottom: var(--sp-5);
  color: var(--c-text-muted);
}

/* Testimonio: una voz, grande, sin caja */
.asp-testimonio__figura {
  max-width: 44rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.asp-testimonio__cita {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  text-wrap: pretty;
}

.asp-testimonio__cita p::before { content: "«"; }
.asp-testimonio__cita p::after  { content: "»"; }

.asp-testimonio__autor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.asp-testimonio__nombre {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.asp-testimonio__iglesia {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

@media (min-width: 1024px) {
  .asp-seccion__titulo {
    font-size: var(--fs-3xl);
  }

  .asp-testimonio__cita {
    font-size: var(--fs-2xl);
  }
}

/* ---------------------------------------------------------------------
   Movimiento. Todo es CSS y todo se apaga si la persona pidió menos
   movimiento en su sistema. Donde el navegador no lo soporta, la página se
   ve completa y quieta: no hay nada que dependa de esto.
   --------------------------------------------------------------------- */

/* Transición entre páginas: la navegación se funde en vez de parpadear */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@keyframes asp-aparece {
  from {
    opacity: 0;
    translate: 0 var(--sp-5);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Cada pieza entra al aparecer en pantalla, atada al scroll y no a un
   reloj: si la persona scrollea rápido, llega rápido. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .asp-home-bloque .asp-cab-suelto,
    .asp-grilla-tiles > *,
    .asp-grilla-eventos-mini > *,
    .asp-banda-oscura .asp-grilla-predicaciones > *,
    .asp-grilla-articulos > *,
    .asp-testimonio__figura,
    .asp-cierre__inner {
      animation: asp-aparece linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    /* Escalonado: en una fila, cada tarjeta entra un poco después */
    .asp-grilla-tiles > :nth-child(2),
    .asp-grilla-eventos-mini > :nth-child(2),
    .asp-banda-oscura .asp-grilla-predicaciones > :nth-child(2),
    .asp-grilla-articulos > :nth-child(2) {
      animation-range: entry 8% entry 53%;
    }

    .asp-grilla-tiles > :nth-child(3),
    .asp-grilla-eventos-mini > :nth-child(3),
    .asp-banda-oscura .asp-grilla-predicaciones > :nth-child(3),
    .asp-grilla-articulos > :nth-child(3) {
      animation-range: entry 16% entry 61%;
    }

    .asp-grilla-tiles > :nth-child(4),
    .asp-banda-oscura .asp-grilla-predicaciones > :nth-child(4) {
      animation-range: entry 24% entry 69%;
    }
  }
}

/* Cabecera del archivo de predicaciones: título y saltos arriba; buscador e
   índice de años cada uno en su fila, a todo el ancho. Como tercera columna
   el buscador quedaba apretado entre los enlaces. */
@media (min-width: 1024px) {
  .asp-recursos__cab:has(.asp-buscador-zona) {
    flex-wrap: wrap;
    row-gap: var(--sp-5);
  }

  .asp-recursos__cab .asp-buscador-zona,
  .asp-recursos__cab .asp-indice-anios {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------
   Segunda revisión de diseño (24-9-2026)
   --------------------------------------------------------------------- */

/* Hero: sin palabras viudas ("El cuidado de las / almas") */
.asp-portada__titulo,
.asp-seccion__titulo {
  text-wrap: balance;
}

/* Quiénes somos: el texto sigue en su columna de lectura */
.asp-somos__cuerpo {
  max-width: var(--w-column);
}

/* Bloques a sangre (banda oscura, cierre): el aire blanco antes y después
   tiene que ser el mismo que entre dos secciones normales, que suman el
   padding de las dos. Sin esto quedaba la mitad. */
.asp-banda-oscura {
  margin-block: var(--sp-home);
}

.asp-cierre {
  margin-top: var(--sp-home);
}

/* Buscador de la banda: calza en la grilla. En el teléfono ocupa las dos
   columnas; en escritorio, exactamente dos de las cuatro. */
.asp-buscador--banda {
  max-width: none;
}

@media (min-width: 1024px) {
  .asp-buscador--banda {
    max-width: calc((100% - var(--sp-5)) / 2);
  }
}

/* Fotos de artículos en los listados: una leve desaturación les da unidad
   aunque vengan de fuentes muy distintas; al pasar el mouse recuperan el
   color. Dentro del artículo la foto va tal cual. */
.asp-articulo-tarjeta .asp-imagen img,
.asp-articulo-item .asp-imagen img,
.asp-articulo-destacado__foto img {
  filter: saturate(0.6) contrast(1.03);
  transition: filter var(--dur) var(--ease), transform 420ms ease;
}

.asp-articulo-tarjeta:hover .asp-imagen img,
.asp-articulo-item:hover .asp-imagen img,
.asp-articulo-destacado__foto:hover img {
  filter: none;
}

/* Un solo evento en la grilla de tres: en vez de una tarjeta en un tercio y
   dos tercios vacíos, ocupa todo el ancho en formato horizontal. */
@media (min-width: 768px) {
  .asp-grilla-eventos-mini > .asp-evento-mini:only-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-6);
  }

  .asp-grilla-eventos-mini > .asp-evento-mini:only-child .asp-evento-mini__titulo {
    font-size: var(--fs-xl);
  }
}

/* ---------------------------------------------------------------------
   Artículo individual: cuerpo, cierre y columna lateral
   --------------------------------------------------------------------- */

/* Vuelta al listado, arriba de todo */
.asp-volver {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  margin-bottom: calc(var(--sp-6) * -1 + var(--sp-2));
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.asp-volver:hover {
  color: var(--c-accent);
}

/* Sin índice ni serie: la columna de lectura va centrada */
.asp-grid-articulo--solo {
  max-width: var(--w-column);
  margin-inline: auto;
}

/* Epígrafe de la foto de apertura */
.asp-articulo__apertura .asp-imagen--apertura {
  margin-bottom: 0;
}

.asp-articulo__pie {
  margin-top: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* Citas bíblicas: tantas en un mismo párrafo que el subrayado del enlace
   común ensuciaba la lectura. Quedan en azul con un filete apenas visible,
   que toma el azul al pasar. El filete se conserva: sin él, el enlace se
   distinguiría solo por color. */
.asp-prose a[href*="biblia.com/"],
.asp-prose a[href*="biblegateway.com/"],
.asp-prose a[href*="bible.com/"] {
  box-shadow: inset 0 -1px 0 var(--c-border-strong);
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.asp-prose a[href*="biblia.com/"]:hover,
.asp-prose a[href*="biblegateway.com/"]:hover,
.asp-prose a[href*="bible.com/"]:hover {
  color: var(--c-accent);
  box-shadow: inset 0 -1px 0 var(--c-accent);
}

/* Lista numerada con el numeral colgante, en la serif del título. Se usa
   el marcador nativo para que respete el atributo start. */
.asp-prose .asp-lista-num {
  list-style: decimal outside;
  padding-left: 1.75em;
}

.asp-prose .asp-lista-num > li {
  padding-left: var(--sp-2);
}

.asp-prose .asp-lista-num > li + li {
  margin-top: var(--sp-4);
}

.asp-prose .asp-lista-num > li::marker {
  font-family: var(--font-numeral);
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
}

/* Fuente: más chica, en la letra de los rótulos, con un filete arriba */
.asp-prose .asp-fuente {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: var(--border-hairline) solid var(--c-border);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Cierre: serie, compartir y autor */
.asp-articulo__cierre {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-2);
}

.asp-serie-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--border-hairline) solid var(--c-border);
  border-bottom: var(--border-hairline) solid var(--c-border);
}

.asp-serie-nav__enlace {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  color: var(--c-text);
}

.asp-serie-nav__enlace + .asp-serie-nav__enlace {
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-serie-nav__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  transition: color var(--dur) var(--ease);
}

.asp-serie-nav__enlace:hover .asp-serie-nav__titulo {
  color: var(--c-accent);
}

.asp-compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.asp-compartir .asp-label {
  margin-right: var(--sp-2);
}

.asp-compartir__boton {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding-inline: var(--sp-4);
  border: var(--border-hairline) solid var(--c-border-strong);
  border-radius: var(--radius-3);
  background: var(--c-bg);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.asp-compartir__boton:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.asp-compartir__boton[hidden] {
  display: none;
}

.asp-autor-pie {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--radius-4);
}

.asp-autor-pie__foto {
  flex: none;
  display: block;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--c-surface-2);
}

.asp-autor-pie__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.asp-autor-pie__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--c-text);
}

.asp-autor-pie__nombre:hover {
  color: var(--c-accent);
}

.asp-autor-pie__linea {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
}

.asp-autor-pie .asp-cta-link {
  min-height: auto;
  margin-top: var(--sp-2);
}

/* Relacionados: separados del artículo por un filete */
.asp-relacionados {
  border-top: var(--border-hairline) solid var(--c-border);
}

/* Columna lateral: solo en escritorio, donde hay lugar a la derecha.
   En el teléfono la serie se recorre con anterior/siguiente al pie. */
.asp-articulo__aside {
  display: none;
}

.asp-indice-art {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.asp-indice-art a {
  display: block;
  padding-block: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: var(--border-hairline) solid var(--c-border);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-heading);
  color: var(--c-text-muted);
}

.asp-indice-art a:hover {
  color: var(--c-accent);
  border-left-color: var(--c-accent);
}

@media (min-width: 768px) {
  .asp-serie-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .asp-serie-nav__enlace + .asp-serie-nav__enlace {
    border-top: 0;
  }

  .asp-serie-nav__enlace--siguiente {
    grid-column: 2;
    text-align: right;
    align-items: flex-end;
  }

  .asp-autor-pie__foto {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
  }
}

@media (min-width: 1024px) {
  .asp-articulo__aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-7);
    top: calc(var(--header-h-desktop) + var(--sp-5));
  }
}

/* ---------------------------------------------------------------------
   Recursos: índice con un bloque de forma distinta por tipo de contenido
   --------------------------------------------------------------------- */
.asp-recursos-bloque {
  padding-block: var(--sp-home);
}

.asp-recursos__entrada {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  max-width: 36rem;
}

/* Temas: entrada por interés, con cuántos artículos hay */
.asp-temas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.asp-tema {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding-inline: var(--sp-4);
  border: var(--border-hairline) solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.asp-tema:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.asp-tema.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.asp-tema__n {
  font-family: var(--font-numeral);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.asp-tema:hover .asp-tema__n {
  color: var(--c-accent);
}

/* Destacados: uno grande y dos medianos al lado */
/* Solo el primer bloque, pegado a la cabecera, va con menos aire arriba.
   (Con :first-of-type caían también las secciones dentro de cada banda.) */
.asp-recursos-bloque--primero {
  padding-top: var(--sp-5);
}

.asp-recursos-destacados {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}

.asp-recursos-destacados .asp-articulo-destacado {
  padding-bottom: 0;
  border-bottom: 0;
}

.asp-recursos-destacados .asp-imagen--apertura {
  margin-block: 0;
}

.asp-recursos-destacados__lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-content: start;
}

.asp-articulo-tarjeta--mediana .asp-articulo-tarjeta__titulo {
  font-size: var(--fs-lg);
}

/* Serie: banda del tono de los flyers, título grande y capítulos numerados */
.asp-banda-serie {
  margin-block: var(--sp-home);
  background: var(--c-surface-2);
}

/* Dos bandas seguidas se tocan: el blanco entre ellas cortaba el ritmo */
.asp-banda-serie:has(+ .asp-banda-serie, + .asp-banda-oscura) {
  margin-bottom: 0;
}

.asp-banda-serie + .asp-banda-serie,
.asp-banda-serie + .asp-banda-oscura {
  margin-top: 0;
}

.asp-serie-banda {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}

.asp-serie-banda__cab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.asp-serie-banda__titulo {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.asp-serie-banda__autor {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.asp-serie-banda__desc {
  max-width: 48ch;
  color: var(--c-text-muted);
}

.asp-serie-banda .asp-btn {
  margin-top: var(--sp-2);
}

.asp-serie-banda__partes {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.asp-serie-banda__partes li + li {
  border-top: var(--border-hairline) solid var(--c-border-strong);
}

.asp-serie-banda__parte {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-5);
  color: var(--c-text);
}

.asp-serie-banda__num {
  font-family: var(--font-numeral);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--c-accent);
}

.asp-serie-banda__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.asp-serie-banda__parte-titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  transition: color var(--dur) var(--ease);
}

.asp-serie-banda__parte:hover .asp-serie-banda__parte-titulo {
  color: var(--c-accent);
}

.asp-serie-banda__resumen {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
}

/* Predicaciones como colección: de qué encuentro son y cuántas */
.asp-coleccion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}

.asp-coleccion__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--border-hairline) solid var(--c-dark-rule);
}

.asp-coleccion__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--c-dark-fg);
}

.asp-coleccion__meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-dark-muted);
}

/* Artículos recientes: lista compacta, sin fotos */
.asp-lista-compacta {
  display: flex;
  flex-direction: column;
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-articulo-compacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: var(--border-hairline) solid var(--c-border);
  color: var(--c-text);
}

.asp-articulo-compacto__fecha {
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.asp-articulo-compacto__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.asp-articulo-compacto__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  transition: color var(--dur) var(--ease);
}

.asp-articulo-compacto:hover .asp-articulo-compacto__titulo {
  color: var(--c-accent);
}

.asp-articulo-compacto__meta {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Conferencias con uno o dos eventos: una línea, no un archivo vacío */
.asp-recursos-bloque--linea {
  padding-top: 0;
}

.asp-conferencias-linea {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-conferencias-linea__lista {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.asp-conferencias-linea__lista a {
  color: var(--c-text);
  box-shadow: inset 0 -1px 0 var(--c-border-strong);
}

.asp-conferencias-linea__lista a:hover {
  color: var(--c-accent);
  box-shadow: inset 0 -1px 0 var(--c-accent);
}

/* Archivo de artículos */
.asp-archivo-articulos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: var(--w-column);
}

.asp-archivo-articulos .asp-volver {
  margin-bottom: 0;
}

.asp-articulo-item__autor {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

@media (min-width: 768px) {
  .asp-articulo-compacto {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: baseline;
  }

  .asp-conferencias-linea {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-6);
  }

  .asp-conferencias-linea__lista {
    flex: 1;
  }
}

@media (min-width: 1024px) {
  .asp-recursos__entrada {
    align-items: flex-end;
  }

  .asp-recursos__entrada .asp-temas {
    justify-content: flex-end;
  }

  .asp-recursos-destacados {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .asp-recursos-destacados--solo {
    grid-template-columns: minmax(0, 1fr);
  }

  .asp-recursos-destacados__lado {
    gap: var(--sp-7);
  }

  .asp-recursos-destacados__lado .asp-articulo-tarjeta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }

  .asp-serie-banda {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }

  .asp-serie-banda__titulo {
    font-size: var(--fs-2xl);
  }

  .asp-serie-banda__parte {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .asp-coleccion .asp-grilla-predicaciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Con la grilla de tres, el buscador llega justo al borde de la segunda
     columna (la regla general lo calza en la grilla de cuatro). */
  .asp-recursos-bloque .asp-buscador--banda {
    max-width: calc((100% - 2 * var(--sp-5)) / 3 * 2 + var(--sp-5));
  }
}

/* Después de la lista compacta, que ya cierra con su filete, la línea de
   conferencias no suma otro. */
.asp-recursos-bloque:has(.asp-lista-compacta) + .asp-recursos-bloque--linea .asp-conferencias-linea {
  padding-top: 0;
  border-top: 0;
}

.asp-conferencias-linea__anio {
  color: var(--c-text-muted);
}

.asp-recursos-anios {
  margin-top: var(--sp-6);
}