/* Virgen de Medjugorje · Recomendados (/recomendados)
   Arriba, a todo el ancho y sobre una banda de piedra, la primera recomendación:
   «Manual para enamorarse», con un motivo dibujado de la familia del sitio (línea de 1.5 px
   y mancha plana; ninguna imagen de fuera). Debajo, dos columnas parejas de referencias,
   cada una con su título encima de su lista (.lista-ed, de sitio.css).
   Sin fotos, sin reproductores, sin imágenes externas: solo enlaces.
   Solo usa los tokens de sitio.css. Las clases propias llevan el prefijo rec-. Sin sombras. */

/* ==========================================================================
   El destacado: «Manual para enamorarse»
   ========================================================================== */

.rec-destacado {
  padding-block: var(--e-6);
  background-color: var(--banda-piedra);
  transition: background-color var(--dur-tema) ease;
}
.rec-destacado__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.rec-destacado__cabeza { min-width: 0; }
.rec-destacado__titulo {
  margin: 0 0 var(--e-1);
  font-family: var(--f-titulo);
  font-size: var(--t-2xl);
  font-style: italic;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.rec-destacado__autor {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  color: var(--tinta-2);
}
.rec-destacado__texto {
  max-width: 32rem;
  margin: 0;
  color: var(--tinta-2);
  line-height: 1.55;
}

/* El motivo: un libro abierto con su cinta (el color del tiempo) y un corazón en la página.
   Dibujo propio; no representa la portada del libro. */
.rec-motivo {
  display: block;
  width: min(100%, 13rem);
  height: auto;
  margin-top: var(--e-5);
  overflow: visible;
  color: var(--piedra-texto);
}
.rec-motivo__tapa,
.rec-motivo__hoja,
.rec-motivo__renglon,
.rec-motivo__corazon {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-tema) ease, stroke var(--dur-tema) ease;
}
.rec-motivo__tapa { fill: none; }
.rec-motivo__hoja { fill: var(--fondo); }
.rec-motivo__renglon { fill: none; stroke: var(--linea-fuerte); }
.rec-motivo__corazon { fill: var(--banda-piedra); stroke: var(--piedra); }
.rec-motivo__cinta { fill: var(--lit); transition: fill var(--dur-tema) ease; }

/* ==========================================================================
   Referencias: dos columnas, cada una con su título encima de su lista
   ========================================================================== */

.rec-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
  padding-block: var(--e-7) var(--e-6);
}
.rec-bloque { min-width: 0; }
.rec-bloque .etiqueta { margin-bottom: var(--e-2); }
.rec-bloque__titulo {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.rec-bloque .lista-ed { border-top-color: var(--tinta); }

/* ==========================================================================
   Lista de enlaces: ajustes sobre .lista-ed para enlaces que salen del sitio
   ========================================================================== */

.rec-lista .lista-ed__marca {
  font-size: var(--t-base);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
}
.rec-lista .lista-ed__desc { max-width: 34rem; }
.rec-lista .lista-ed__enlace > .flecha { line-height: 1.2; }
/* En celular el dominio no se repite: ya lo dicen el título o la descripción */
@media (max-width: 639.98px) {
  .rec-lista .lista-ed__meta { display: none; }
  .rec-lista .lista-ed__marca { font-size: var(--t-sm); line-height: 1.6; }
}
/* Un dato que no debe partirse en dos renglones (el ISBN) */
.rec-entero { white-space: nowrap; }

/* Enlaces a otras páginas de este sitio, debajo de la lista */
.rec-internos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-5);
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .rec-destacado { padding-block: var(--e-7); }
  .rec-destacado__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e-8);
    align-items: center;
  }
  .rec-motivo { width: 15rem; margin-top: var(--e-6); }
  .rec-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); padding-block: var(--e-8) var(--e-7); }
  .rec-lista .lista-ed__marca { min-width: 4.75rem; }
}
/* En las dos columnas el dominio baja al renglón de la descripción: no cabe a un lado */
@media (min-width: 640px) {
  .rec-columnas .lista-ed__meta { grid-column: 2; grid-row: 2; text-align: left; white-space: normal; }
  .rec-columnas .lista-ed__enlace { row-gap: .15rem; }
  .rec-columnas .lista-ed__enlace > .flecha { grid-row: 1; }
}

/* ==========================================================================
   Cierre: la fecha de verificación y las fuentes plegadas
   ========================================================================== */

.rec-cierre { padding-bottom: var(--seccion); }
.rec-fuentes { margin-top: var(--e-4); }
.rec-fuentes > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}
.rec-fuentes > summary::-webkit-details-marker { display: none; }
.rec-fuentes > summary::after {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  margin-bottom: .2rem;
  border-right: 1.5px solid var(--lit);
  border-bottom: 1.5px solid var(--lit);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-tema) ease;
}
.rec-fuentes[open] > summary::after { margin-bottom: -.15rem; transform: rotate(-135deg); }
.rec-fuentes__titulo {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.rec-fuentes__cuenta { font-weight: 500; letter-spacing: .04em; color: var(--tinta-3); }
.rec-fuentes .fuentes { margin-top: var(--e-2); padding-top: 0; border-top: 0; }

@media print {
  .rec-destacado { background: none; padding-block: 0 1rem; }
  .rec-motivo { display: none; }
  .rec-lista a.lista-ed__enlace[href^="http"]::after {
    content: attr(href);
    grid-column: 2 / -1;
    font-size: .85em;
    word-break: break-all;
  }
  .rec-fuentes > summary::after { display: none; }
}