/* planesdebien.com — pantalla dividida con el versículo fijo, olivo y terracota.
   La fila de diseño pide Syne para los encabezados y Schibsted Grotesk para el
   texto corrido, con el panel adherido del versículo como ornamento propio.
   Deliberadamente no se embarca fuente alguna ni aparece @font-face en este
   archivo: falta la verificación de licencia de los artefactos concretos
   (¿se permite recortar glifos?, ¿bajo qué crédito se redistribuye?), y hasta
   cerrarla el carácter se aproxima con grotescas y geométricas del sistema.
   Ninguna URL sale de esta hoja. */

:root {
  --olivo: #5a6335;
  --olivo-oscuro: #3a4022;
  --terracota: #c06a3b;            /* identity accent: borders, rules, ornament */
  --terracota-texto: #a45b32;      /* text on cream backgrounds (4.51:1) */
  --terracota-sobre-olivo: #d69a79; /* text on the dark olive band (4.52:1) */
  --crema-olivar: #f5f1e3;
  --tierra-texto: #2f2b20;
  --encabezar: "Syne", "Avenir Next", Futura, "Century Gothic", "Segoe UI", sans-serif;
  --corrido: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema-olivar);
  color: var(--tierra-texto);
  font-family: var(--corrido);
  font-size: 1.03rem;
  line-height: 1.64;
}

.pantalla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2.6rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.4rem 1.3rem 3rem;
}
@media (max-width: 52rem) {
  .pantalla { grid-template-columns: 1fr; gap: 1.4rem; }
  .atril { position: static; }
}

/* el panel adherido: el versículo nunca sale de la vista */
.atril {
  position: sticky;
  top: 1.2rem;
  align-self: start;
  background: var(--olivo-oscuro);
  color: var(--crema-olivar);
  padding: 1.2rem 1.3rem 1.4rem;
  border-bottom: 6px solid var(--terracota);
}
.fijo { margin: 0 0 1rem; }
.fijo-etiqueta {
  display: block;
  font-family: var(--encabezar);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terracota-sobre-olivo);
  margin-bottom: 0.35rem;
}
.fijo-nota { font-size: 0.85rem; color: #cfcab2; margin: 0.2rem 0 0.9rem; }
.atril-app { font-size: 0.9rem; margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--olivo); }
.atril-app a { color: var(--terracota-sobre-olivo); }

.lectura header h1 {
  font-family: var(--encabezar);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.08;
  color: var(--olivo-oscuro);
  margin: 0 0 0.6rem;
}
.arranque { font-size: 1.12rem; color: var(--olivo); margin: 0; }

.ruta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.3rem;
  margin: 1.2rem 0 0.4rem;
  padding: 0.6rem 0;
  border-top: 3px solid var(--olivo);
  border-bottom: 1px solid var(--olivo);
  font-family: var(--encabezar);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.ruta a { color: var(--olivo); text-decoration: none; }
.ruta a:hover, .ruta a:focus { color: var(--terracota-texto); }
.ruta [aria-current="page"] { color: var(--terracota-texto); border-bottom: 2px solid var(--terracota); }

.lectura h2 {
  font-family: var(--encabezar);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--olivo-oscuro);
  margin: 2.2rem 0 0.5rem;
}
.lectura h3 { font-size: 1.04rem; margin: 1.6rem 0 0.35rem; }

.pregunta-par { margin: 0 0 1.3rem; }

.injerto {
  margin: 1.1rem 0;
  padding: 0.9rem 1.1rem;
  background: rgba(90, 99, 53, 0.12);
  border-left: 4px solid var(--terracota);
}
.injerto .fijo-etiqueta { color: var(--olivo-oscuro); }

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

.enlace-seguir a { color: var(--terracota-texto); }

.pie-olivar {
  background: var(--olivo-oscuro);
  color: #d9d4bd;
  padding: 1.5rem 1.3rem 2.3rem;
  font-size: 0.86rem;
}
.pie-olivar p { max-width: 64rem; margin: 0.45rem auto; }
.pie-olivar a { color: var(--terracota-sobre-olivo); }