/* 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--apaisado {
  aspect-ratio: var(--band-ratio-desktop);
}

.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/ (28-9-2026): próximos sobre una banda, con el siguiente grande
   y el resto en filas; archivo en lista tipográfica, plegado por año.
   --------------------------------------------------------------------- */
.asp-eventos__cab {
  padding-block: var(--sp-7) var(--sp-6);
}

.asp-eventos__proximos {
  background: var(--c-surface);
  padding-block: var(--sp-7);
}

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

.asp-eventos__proximos .asp-card-evento {
  padding-top: 0;
  border-top: 0;
}

.asp-proximos-lista {
  display: grid;
  gap: var(--sp-5);
}

.asp-proximo-fila {
  display: grid;
  grid-template-columns: var(--w-flyer-mini) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-top: var(--sp-5);
  border-top: var(--border-hairline) solid var(--c-border-strong);
}

.asp-proximo-fila__visual {
  display: block;
}

.asp-proximo-fila__fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  aspect-ratio: 1 / 1;
  padding: var(--sp-2);
  border-radius: var(--radius-4);
  background: var(--c-flyer-band);
  color: var(--c-text);
  text-align: center;
}

.asp-proximo-fila__dias {
  font-family: var(--font-numeral);
  font-size: var(--fs-xl);
  line-height: 1;
}

.asp-proximo-fila__mes {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: var(--lh-heading);
  color: var(--c-flyer-band-ink);
}

.asp-proximo-fila__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-width: 0;
}

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

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

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

.asp-proximo-fila .asp-btn {
  margin-top: var(--sp-2);
}

.asp-proximo-fila .asp-fecha {
  font-size: var(--fs-md);
}

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

.asp-eventos__archivo {
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-7) var(--sp-8);
}

.asp-eventos__archivo-cab {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}

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

.asp-eventos__anio {
  padding-block: var(--sp-3);
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-eventos__lista {
  padding-bottom: var(--sp-4);
}

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

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

  .asp-proximos-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-7);
  }

  .asp-proximo-fila {
    grid-template-columns: var(--w-flyer-mini-desktop) minmax(0, 1fr);
    gap: var(--sp-5);
  }

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

  .asp-eventos__archivo-cab {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-7);
  }

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

/* 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-text-faint);
}

.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-grilla-eventos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

/* ---------------------------------------------------------------------
   /iniciativas/: una fila compacta por iniciativa, flyer en miniatura
   --------------------------------------------------------------------- */
.asp-iniciativas {
  display: grid;
  padding-bottom: var(--sp-8);
}

.asp-iniciativa-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--w-flyer-mini);
  grid-template-areas: "cab vitrina" "desc desc";
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  padding-block: var(--sp-5);
  border-top: var(--border-hairline) solid var(--c-border);
}

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

.asp-iniciativa-fila__cab {
  grid-area: cab;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

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

.asp-iniciativa-fila__num {
  margin-right: var(--sp-2);
  font-family: var(--font-numeral);
  color: var(--c-text-faint);
}

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

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

.asp-iniciativa-fila__desc {
  grid-area: desc;
  max-width: 60ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

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

.asp-iniciativa-fila__desc p + p {
  margin-top: var(--sp-2);
}

.asp-iniciativa-fila__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  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 {
  grid-area: vitrina;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--c-text-muted);
}

.asp-iniciativa-fila__vitrina .asp-flyer {
  transition: background-color var(--dur) var(--ease);
}

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

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

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

.asp-iniciativa-fila__rotulo {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: var(--lh-heading);
  text-align: center;
  white-space: nowrap;
  color: inherit;
}

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

  .asp-iniciativa-fila {
    grid-template-columns: minmax(0, 1fr) var(--w-flyer-mini-desktop);
    grid-template-rows: auto 1fr;
    grid-template-areas: "cab vitrina" "desc vitrina";
    gap: var(--sp-3) var(--sp-5);
    padding-block: var(--sp-6);
  }

  /* En escritorio sobra ancho: la descripción sube al lado del flyer. */
  .asp-iniciativa-fila--sin-vitrina {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cab" "desc";
  }

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

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

/* 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--datos {
  gap: var(--sp-5);
}

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

.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);
  font: inherit;
  letter-spacing: inherit;
}

/* El año de Predicaciones es un h2 dentro del <summary>: se ve como antes. */
.asp-anio__titulo {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.asp-articulo-af__volver {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-accent);
}

.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-control);
  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 .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 arriba, con piso de contraste,
     para el menú de la cabecera transparente (antes daba 2,1:1). */
  background:
    linear-gradient(to bottom, var(--c-photo-scrim-text) 0, var(--c-photo-scrim-text) var(--header-h-desktop), var(--c-photo-scrim-none) calc(var(--header-h-desktop) + var(--sp-8))),
    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%);
}

/* Piso de velo detrás de todo bloque de texto sobre foto: desde un poco
   arriba del texto hasta abajo, nunca menos que --c-photo-scrim-text, a
   todo el ancho. El degradado general solo no alcanzaba: el rótulo
   «Próximo evento» quedaba en 3,2:1 sobre fotos claras. */
.asp-portada__inner,
.asp-cierre--con-foto .asp-cierre__inner,
.asp-contacto-portada--con-foto .asp-contacto-portada__inner {
  position: relative;
  isolation: isolate;
}

.asp-portada__inner::before,
.asp-cierre--con-foto .asp-cierre__inner::before,
.asp-contacto-portada--con-foto .asp-contacto-portada__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--sp-8));
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: linear-gradient(to top, var(--c-photo-scrim-text) calc(100% - var(--sp-8)), var(--c-photo-scrim-none) 100%);
  pointer-events: none;
}

.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;
  }
}

/* En la columna lateral (unos 300 px) la fila de predicación queda
   compacta a cualquier ancho: la versión de 11rem dejaba al título en 92 px
   y una palabra por renglón. */
.asp-aside-caja .asp-predicacion-fila,
.asp-aside-caja .asp-predicacion-fila--con-imagen {
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
}

.asp-aside-caja .asp-predicacion-fila__titulo {
  font-size: var(--fs-base);
}

.asp-aside-caja .asp-predicacion-fila__fecha {
  grid-column: 2;
  padding-top: 0;
  text-align: left;
}

.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: 0 var(--sp-4);
  font-family: var(--font-numeral);
  font-size: var(--fs-sm);
}

.asp-indice-anios a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  min-width: var(--control-h);
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-color: var(--c-border-strong);
  text-underline-offset: 0.3em;
}

.asp-indice-anios a:hover {
  text-decoration-color: 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);
}

/* Año plegado: una línea, sin el aire de una sección abierta. Ocho años
   cerrados sumaban unos 930 px casi vacíos en el teléfono. */
.asp-anio-plegable:not([open]) > .asp-anio__num--grilla {
  margin-bottom: 0;
}

section:has(> .asp-anio-plegable:not([open])) {
  padding-block: var(--sp-3);
}

.asp-anio-plegable > summary:hover .asp-anio__titulo {
  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);
}

/* ---------------------------------------------------------------------
   Contacto: portada con foto, vías directas y el formulario en su panel
   --------------------------------------------------------------------- */
.asp-contacto-portada {
  position: relative;
  background: var(--c-dark-bg);
  color: var(--c-photo-text);
  isolation: isolate;
  overflow: hidden;
}

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

.asp-contacto-portada__velo {
  display: flex;
  align-items: flex-end;
  min-height: var(--h-portada-contacto);
}

.asp-contacto-portada--con-foto .asp-contacto-portada__velo {
  background: linear-gradient(to top, var(--c-photo-scrim-strong) 0%, var(--c-photo-scrim) 55%, var(--c-photo-scrim-none) 100%);
}

.asp-contacto-portada__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block: var(--sp-7) var(--sp-6);
}

.asp-contacto-portada__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-contacto-portada__texto,
.asp-contacto-portada__texto p {
  max-width: 40ch;
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-photo-text);
}

.asp-contacto {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-9);
}

.asp-contacto__bloque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.asp-contacto__email {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

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

.asp-contacto__redes {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) solid var(--c-border);
}

.asp-contacto__redes li {
  border-bottom: var(--border-hairline) solid var(--c-border);
}

.asp-contacto__redes a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--control-h);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--c-text);
}

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

.asp-contacto__flecha {
  font-family: var(--font-ui);
  color: var(--c-accent);
  transition: transform var(--dur) var(--ease);
}

.asp-contacto__redes a:hover .asp-contacto__flecha {
  transform: translate(2px, -2px);
}

.asp-contacto__evento {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--c-accent);
}

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

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

.asp-contacto__evento-dato {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
}

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

/* El formulario es lo único con caja en la página: se la gana. */
.asp-contacto__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-inline: calc(-1 * var(--w-gutter));
  padding: var(--sp-6) var(--w-gutter);
  background: var(--c-surface);
  scroll-margin-top: var(--header-h);
}

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

.asp-contacto__fila {
  display: grid;
  gap: var(--sp-4);
}

/* Consejo Pastoral en Nosotros: un grupo por país, con el nombre del país
   sobre un filete. */
.asp-consejo-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.asp-consejo-grupo + .asp-consejo-grupo {
  margin-top: var(--sp-4);
}

.asp-consejo-grupo__pais {
  padding-top: var(--sp-2);
  border-top: var(--border-hairline) solid var(--c-border-strong);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--c-text);
}

/* Asunto precargado desde otra página (?motivo=taller) */
.asp-contacto__asunto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding-block: var(--sp-3);
  border-block: var(--border-hairline) solid var(--c-border);
  font-size: var(--fs-md);
}

.asp-contacto__enviar {
  align-self: stretch;
  justify-content: center;
}

.asp-contacto__estado {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--c-accent);
  background: var(--c-bg);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.asp-contacto__estado--ok {
  background: var(--c-surface-2);
}

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

  .asp-contacto__enviar {
    align-self: flex-start;
  }
}

@media (min-width: 1024px) {
  .asp-contacto-portada__velo {
    min-height: var(--h-portada-contacto-desktop);
  }

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

  .asp-contacto-portada__titulo,
  .asp-contacto-portada__texto {
    max-width: 42%;
  }

  /* Mail, redes y evento a la izquierda; el panel ocupa toda la derecha.
     La última fila es flexible para que el alto del panel no abra huecos
     entre los bloques de la izquierda. */
  .asp-contacto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--sp-9);
    row-gap: var(--sp-6);
    align-items: start;
    padding-top: 0;
  }

  .asp-contacto > * {
    grid-column: 1;
  }

  .asp-contacto > .asp-contacto__panel {
    grid-column: 2;
    grid-row: 1 / span 4;
  }

  .asp-contacto__mail {
    padding-top: var(--sp-7);
  }

  /* En escritorio el panel sube y se monta sobre la foto. */
  .asp-contacto__panel {
    position: relative;
    margin-inline: 0;
    margin-top: calc(-1 * var(--sp-9));
    padding: var(--sp-7);
    border: var(--border-hairline) solid var(--c-border);
    border-radius: var(--radius-4);
    background: var(--c-bg);
    scroll-margin-top: var(--header-h-desktop);
  }
}

.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-control);
  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);
}

/* Persona sin foto: sus iniciales, del tamaño de la caja que ocupa la foto */
.asp-iniciales {
  display: grid;
  place-items: center;
  container-type: inline-size;
  background: var(--c-surface-2);
  filter: none;
}

.asp-iniciales > span {
  font-family: var(--font-display);
  font-size: 38cqi;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--c-text-faint);
}

/* Búsqueda: un bloque por tipo de resultado */
.asp-busqueda-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

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

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

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

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

/* ---------------------------------------------------------------------
   Inicio en escritorio (28-9-2026): cuatro grillas iguales seguidas, con
   títulos de sección de 76 px y títulos de evento de 19 px. Ahora cada
   bloque tiene su forma: el próximo evento grande y el resto en lista, y
   los artículos como lista editorial.
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .asp-home-bloque .asp-seccion__titulo {
    font-size: var(--fs-2xl);
  }

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

  /* Dos o más eventos: el primero ocupa la columna ancha y los demás van
     en lista a su derecha, con el flyer chico al costado. */
  .asp-grilla-eventos-mini:has(> :nth-child(2)) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-auto-rows: min-content;
    column-gap: var(--sp-7);
    row-gap: var(--sp-5);
  }

  .asp-grilla-eventos-mini:has(> :nth-child(2)) > :first-child {
    grid-row: 1 / span 3;
  }

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

  .asp-grilla-eventos-mini:has(> :nth-child(2)) > :not(:first-child) {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
    border-bottom: var(--border-hairline) solid var(--c-border);
  }

  .asp-grilla-eventos-mini:has(> :nth-child(2)) > :not(:first-child) .asp-evento-mini__visual {
    aspect-ratio: 1 / 1;
  }

  .asp-grilla-eventos-mini:has(> :nth-child(2)) > :not(:first-child) .asp-evento-mini__flyer {
    inset: var(--sp-2);
  }

  /* Artículos: lista editorial, una fila por artículo con la foto al costado */
  .asp-home-bloque .asp-grilla-articulos {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: var(--w-column);
  }

  .asp-home-bloque .asp-articulo-tarjeta {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: center;
    padding-block: var(--sp-5);
    border-top: var(--border-hairline) solid var(--c-border);
  }

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

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

/* Campo que faltó en el último envío */
.asp-form [aria-invalid="true"] {
  border-color: var(--c-text);
  border-width: 2px;
}