/* salmo23oracion.com — tarjeta devocional del día, rosa de amanecer sobre pizarra.
   La matriz asigna Prata para el despliegue y Andada Pro para la lectura, con
   viñetas botánicas como ornamento. Ningún archivo de fuente acompaña a este
   sitio ni hay @font-face en esta hoja: verificar la licencia del artefacto
   descargado (¿permite subconjunto?, ¿pide atribución?) es un paso previo que
   sigue pendiente, así que se aproximan las voces con familias del sistema.
   Las viñetas son caracteres tipográficos, nunca imágenes ni recursos externos. */

:root {
  --rosa-alba: #f6e7e4;
  --rosa-viva: #ab4b58;
  --pizarra: #3d4753;
  --pizarra-suave: #606b77;
  --papel-tarjeta: #fdf8f4;
  --despliegue: "Prata", "Playfair Display", Didot, "Bodoni MT", Georgia, serif;
  --texto-andado: "Andada Pro", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rosa-alba);
  color: var(--pizarra);
  font-family: var(--texto-andado);
  font-size: 1.06rem;
  line-height: 1.66;
  padding: clamp(0.8rem, 3vw, 2.4rem);
}

.tarjeta {
  background: var(--papel-tarjeta);
  max-width: 41rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid var(--rosa-viva);
  box-shadow: 0.4rem 0.4rem 0 rgba(189, 106, 117, 0.18);
}

.alba { text-align: center; margin-bottom: 1.2rem; }
.alba h1 {
  font-family: var(--despliegue);
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  margin: 0.3rem 0 0;
  color: var(--pizarra);
}
.lema { color: var(--rosa-viva); font-style: italic; margin: 0; }
/* viñeta botánica bajo la cabecera de cada tarjeta */
.alba::after {
  content: "❦ ❧ ❦";
  display: block;
  color: var(--rosa-viva);
  letter-spacing: 0.9em;
  margin-top: 0.8rem;
  font-size: 0.9rem;
}

.tarjetero {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.2rem;
  font-size: 0.85rem;
  margin: 0 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--rosa-viva);
}
.tarjetero a { color: var(--pizarra-suave); text-decoration: none; }
.tarjetero a:hover, .tarjetero a:focus { color: var(--rosa-viva); text-decoration: underline; }
.tarjetero [aria-current="page"] { color: var(--rosa-viva); font-weight: 700; }

.tarjeta h2 {
  font-family: var(--despliegue);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 2rem 0 0.6rem;
}
.tarjeta h3 { font-size: 1.02rem; margin: 1.5rem 0 0.35rem; color: var(--pizarra); }

.pastos { margin: 1.2rem 0; }
.pastos figcaption, .cayado {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rosa-viva);
  margin-bottom: 0.3rem;
}
.pastos p {
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: rgba(189, 106, 117, 0.08);
  border-left: 3px solid var(--rosa-viva);
}

.cambio-version { font-style: italic; color: var(--pizarra-suave); font-size: 0.95rem; }

q { quotes: "“" "”"; }
q::before, q::after { color: var(--rosa-viva); }

.indice { list-style: none; padding: 0; margin: 0.8rem 0; }
.indice li { padding: 0.45rem 0 0.45rem 1.4rem; position: relative; }
.indice li::before { content: "✿"; position: absolute; left: 0; color: var(--rosa-viva); }
.indice a { color: var(--pizarra); }

.paso { margin: 0.9rem 0; }

.pie-tarjeta {
  margin-top: 2.2rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--rosa-viva);
  font-size: 0.98rem;
}
.pie-tarjeta a { color: var(--rosa-viva); }

.firma {
  max-width: 41rem;
  margin: 1.4rem auto 0;
  font-size: 0.84rem;
  color: var(--pizarra-suave);
  text-align: center;
}