:root {
  color-scheme: dark;
  --ink: #f6f0e2;
  --gold: #efc34e;
  --muted: #e2d4b9;
  --night: #17120c;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); scrollbar-color: #927438 var(--night); }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background: var(--night);
  font-family: Georgia, 'Times New Roman', serif;
  text-align: center;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(rgba(18, 14, 8, .46), rgba(18, 14, 8, .56)), url('/es/assets/nubes-doradas.webp') center / cover no-repeat;
  pointer-events: none;
}
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 24px 44px;
}
.devotional-brand { margin: 0 auto 22px; color: var(--gold); }
.brand-symbol { display: block; width: 48px; height: 48px; margin: 0 auto 8px; }
.devotional-brand p { margin: 0; }
.brand-name { display: block; font-size: 25px; line-height: 1.12; font-weight: 700; letter-spacing: .015em; }
.brand-subtitle { display: block; margin-top: 5px; font: 600 11px/1.5 Arial, Helvetica, sans-serif; letter-spacing: .18em; }
h1 {
  max-width: 740px;
  margin: 0 auto 13px;
  color: var(--gold);
  font-size: 46px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 span { display: block; }
.date-line {
  margin: 0 auto 25px;
  max-width: 850px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.4;
  text-wrap: pretty;
}
.date-line strong { font-weight: 700; }
.date-line time { white-space: nowrap; }
.vsl {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: #090806;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.end-message {
  max-width: 410px;
  margin: 22px auto 0;
  color: var(--muted);
  font: 400 15px/1.65 Arial, Helvetica, sans-serif;
}
.end-message strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
noscript p { color: var(--ink); font: 16px/1.5 Arial, Helvetica, sans-serif; }
::selection { color: #20170b; background: var(--gold); }
a { color: var(--gold); text-underline-offset: .2em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
@media (max-width: 600px) {
  main { padding: 22px 18px 32px; }
  .devotional-brand { margin-bottom: 20px; }
  .brand-symbol { width: 38px; height: 38px; margin-bottom: 6px; }
  .brand-name { font-size: 22px; }
  .brand-subtitle { font-size: 11px; letter-spacing: .14em; }
  h1 { max-width: 420px; margin-bottom: 13px; font-size: clamp(28px, 7.5vw, 39px); line-height: 1.1; }
  h1 span { display: inline; }
  h1 span + span::before { content: ' '; }
  .date-line { max-width: 420px; margin-bottom: 22px; font-size: 17px; line-height: 1.45; }
  .end-message { margin-top: 20px; font-size: 14px; }
}