/* Meditadores v2 — contemplative design.
   Light = stone & ivory; dark = "veillée" (vigil by candlelight).
   Liturgical accents: violet (advent/lent), gold (christmas/easter),
   red (holy week/pentecost), green (ordinary time). */

:root {
  --paper:#f7f4ec; --panel:#efeade; --panel2:#e8e2d2; --ink:#292433;
  --muted:#6f6878; --line:#dcd5c6; --shadow:0 1px 3px rgba(41,36,51,.07);
  /* accents validated with the dataviz palette checker (2026-08-14) */
  --violet:#6b53a8; --violet-soft:#e9e4f4; --gold:#a1780c; --gold-soft:#f0e7cd;
  --red:#b03a3a; --red-soft:#f1dfdf; --green:#1f8a4e; --green-soft:#dfe9e1;
  --player-h:5.2rem;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,"Segoe UI",system-ui,sans-serif;
}
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) {
  --paper:#16131f; --panel:#201c2b; --panel2:#282336; --ink:#eae6db;
  --muted:#a79fb4; --line:#363047; --shadow:0 1px 3px rgba(0,0,0,.35);
  --violet:#a794db; --violet-soft:#302a45; --gold:#dcb75a; --gold-soft:#383021;
  --red:#c86060; --red-soft:#3f2a2a; --green:#6fb583; --green-soft:#263427;
} }
html[data-theme="dark"] {
  --paper:#16131f; --panel:#201c2b; --panel2:#282336; --ink:#eae6db;
  --muted:#a79fb4; --line:#363047; --shadow:0 1px 3px rgba(0,0,0,.35);
  --violet:#a794db; --violet-soft:#302a45; --gold:#dcb75a; --gold-soft:#383021;
  --red:#c86060; --red-soft:#3f2a2a; --green:#6fb583; --green-soft:#263427;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); margin:0;
  font-family:var(--serif); font-size:1.06rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; }
main { max-width:46rem; margin:0 auto; padding:1.4rem 1.1rem calc(var(--player-h) + 3rem); }
a { color:var(--violet); }
button { font-family:var(--sans); cursor:pointer; }
::selection { background:var(--violet-soft); }

/* fade between views */
main.fade { animation:fade .35s ease; }
@keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------------------------------------------------------------- header */
header.top { border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:20; backdrop-filter:blur(6px); }
header.top nav { max-width:46rem; margin:0 auto; padding:.7rem 1.1rem; display:flex;
  align-items:baseline; gap:1rem; flex-wrap:wrap; font-family:var(--sans); }
header.top nav > * { flex:none; }  /* wrap instead of clipping on narrow screens */
@media (max-width:34rem) {
  header.top nav { gap:.7rem; padding:.55rem .8rem; }
  header.top .brand { font-size:1.15rem; }
  header.top a.nav { font-size:.8rem; }
}
header.top .brand { font-family:var(--serif); font-size:1.3rem; font-weight:700;
  color:var(--ink); text-decoration:none; margin-right:.4rem; }
header.top a.nav { font-size:.85rem; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:.1rem; }
header.top a.nav:hover { color:var(--ink); }
header.top a.nav.active { color:var(--ink); border-bottom-color:var(--gold); }
button.theme { margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:999px; width:1.9rem; height:1.9rem; color:var(--muted);
  font-size:.95rem; line-height:1; align-self:center; }
button.theme:hover { color:var(--ink); border-color:var(--muted); }

/* ---------------------------------------------------------------- type */
h1 { font-size:1.75rem; line-height:1.22; margin:1.1rem 0 .5rem; text-wrap:balance;
  font-weight:700; letter-spacing:-.01em; }
h2 { font-size:1.28rem; margin:2.4rem 0 .8rem; }
.lede, .intro { color:var(--muted); font-size:1.02rem; }
.eyebrow { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin:1.6rem 0 .3rem; font-family:var(--sans); }

/* ---------------------------------------------------------------- chips & tags */
.chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border-radius:999px; padding:.18rem .7rem;
  font-family:var(--sans); text-decoration:none; }
.chip.violet { background:var(--violet-soft); color:var(--violet); }
.chip.gold { background:var(--gold-soft); color:var(--gold); }
.chip.red { background:var(--red-soft); color:var(--red); }
.chip.green { background:var(--green-soft); color:var(--green); }
.tags { display:flex; flex-wrap:wrap; gap:.35rem; margin:.7rem 0; }
.tag { font-size:.72rem; border:1px solid var(--line); border-radius:999px;
  padding:.12rem .55rem; color:var(--muted); font-family:var(--sans);
  background:none; }
button.tag { cursor:pointer; }
button.tag[aria-pressed="true"] { background:var(--violet-soft); color:var(--violet);
  border-color:var(--violet); }

/* ---------------------------------------------------------------- cards */
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:1rem 1.15rem; margin:.9rem 0; box-shadow:var(--shadow);
  transition:border-color .2s; }
.card:hover { border-color:var(--muted); }
.card h3 { margin:.45rem 0 .15rem; font-size:1.13rem; line-height:1.3; }
.card h3 a { color:var(--ink); text-decoration:none; }
.card h3 a:hover { color:var(--violet); }
.card .row { display:flex; align-items:center; gap:.7rem; }
.meta { font-size:.8rem; color:var(--muted); font-family:var(--sans); margin:.1rem 0 .45rem; }
.sum { font-size:.95rem; margin:.35rem 0 .6rem; }
.note { font-size:.8rem; color:var(--muted); font-style:italic; }
.refs { font-size:.82rem; color:var(--muted); border-top:1px dashed var(--line);
  padding-top:.6rem; font-family:var(--sans); }

/* play buttons on cards / fiche */
.playbtn { flex:none; width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid var(--line); background:var(--panel2); color:var(--ink);
  font-size:1rem; display:grid; place-items:center; transition:all .2s; }
.playbtn:hover { background:var(--violet); border-color:var(--violet); color:#fff; }
.playbtn.playing { background:var(--violet); border-color:var(--violet); color:#fff; }
.playbtn.big { width:3.4rem; height:3.4rem; font-size:1.3rem; }
.resume-hint { font-size:.78rem; color:var(--muted); font-family:var(--sans); }

/* ---------------------------------------------------------------- home */
.hero { margin:1.8rem 0 1.2rem; }
.continue { border:1px solid var(--gold); background:var(--gold-soft);
  border-radius:12px; padding:.9rem 1.15rem; margin:1.2rem 0; display:flex;
  align-items:center; gap:.9rem; }
.continue .txt { min-width:0; }
.continue .txt a { color:var(--ink); text-decoration:none; font-weight:700; }
.continue .txt a:hover { color:var(--gold); }

.wheelwrap { display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  align-items:center; margin:1.4rem 0 2rem; }
@media (max-width:40rem) { .wheelwrap { grid-template-columns:1fr; } }
.wheel { width:min(300px, 78vw); height:auto; display:block; margin:0 auto; }
.wheel .seg { cursor:pointer; transition:opacity .2s, transform .25s; transform-origin:50% 50%; }
.wheel .seg:hover { opacity:1 !important; }
.wheel-center-name { font-family:var(--serif); font-weight:700; }
.seasons { list-style:none; margin:0; padding:0; width:100%; font-family:var(--sans); }
.seasons li { border-bottom:1px dashed var(--line); }
.seasons li:last-child { border-bottom:none; }
.seasons a { display:flex; align-items:center; gap:.6rem; padding:.42rem .2rem;
  text-decoration:none; color:var(--ink); font-size:.93rem; border-radius:6px; }
.seasons a:hover { background:var(--panel); }
.seasons .dot { flex:none; width:.7rem; height:.7rem; border-radius:50%; }
.dot.violet { background:var(--violet); } .dot.gold { background:var(--gold); }
.dot.red { background:var(--red); } .dot.green { background:var(--green); }
.seasons .count { margin-left:auto; color:var(--muted); font-size:.8rem; }
.seasons a.selected { background:var(--panel); font-weight:700; }

/* season block loaded under the wheel */
.season-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; }
.season-head .eyebrow { display:inline-flex; align-items:center; gap:.5rem; }
.season-head .dot { flex:none; width:.7rem; height:.7rem; border-radius:50%; }
.season-head .seemore { font-family:var(--sans); font-size:.8rem;
  color:var(--muted); align-self:center; }
.season-head .seemore:hover { color:var(--violet); }
.seasons .now { font-size:.68rem; color:var(--gold); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; }

/* ---------------------------------------------------------------- filters */
.filters { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 .4rem;
  font-family:var(--sans); }
.fchip { font-size:.8rem; border:1px solid var(--line); border-radius:999px;
  padding:.25rem .8rem; background:none; color:var(--muted); }
.fchip[aria-pressed="true"] { background:var(--ink); color:var(--paper);
  border-color:var(--ink); }
.count-line { font-size:.8rem; color:var(--muted); font-family:var(--sans); margin:.3rem 0 0; }

/* ---------------------------------------------------------------- search */
.searchbox { display:flex; gap:.5rem; margin:1.2rem 0; }
.searchbox input { flex:1; font-family:var(--serif); font-size:1.05rem;
  padding:.65rem .9rem; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink); }
.searchbox input:focus { outline:2px solid var(--violet); border-color:transparent; }
mark { background:var(--gold-soft); color:inherit; border-radius:3px; padding:0 .1em; }
.snippet { font-size:.88rem; color:var(--muted); margin:.3rem 0 0; }
.snippet .src { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  font-family:var(--sans); color:var(--gold); margin-right:.4rem; }

/* ---------------------------------------------------------------- fiche */
.backlink { font-size:.85rem; font-family:var(--sans); text-decoration:none; }
.fiche-play { display:flex; align-items:center; gap:1rem; margin:1.2rem 0; }
.serienav { display:flex; justify-content:space-between; gap:1rem; margin:1.2rem 0;
  font-family:var(--sans); font-size:.85rem; }
.btn { display:inline-block; border:1px solid var(--line); border-radius:8px;
  padding:.5rem .9rem; text-decoration:none; color:var(--ink); background:var(--panel);
  font-family:var(--sans); font-size:.85rem; }
.btn:hover { border-color:var(--violet); }
details.transcript { margin:1.4rem 0; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); }
details.transcript summary { cursor:pointer; padding:.8rem 1.1rem; font-weight:600;
  font-family:var(--sans); font-size:.9rem; }
details.transcript .body { padding:0 1.3rem 1.1rem; font-size:var(--tsize, .96rem);
  color:var(--ink); opacity:.85; max-width:40rem; }
details.transcript .body p { margin:.6rem 0; }

/* ---------------------------------------------------------------- quote */
.quote { font-style:italic; border-left:3px solid var(--gold); padding:.3rem 0 .3rem 1rem;
  color:var(--muted); margin:1.4rem 0; }

footer.bottom { border-top:1px solid var(--line); margin-top:3rem; padding-top:1rem;
  font-size:.78rem; color:var(--muted); font-family:var(--sans); }

/* ---------------------------------------------------------------- player */
.player { position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--panel); border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(0,0,0,.08); }
.p-progress { height:14px; cursor:pointer; display:flex; align-items:center;
  padding:0 0; }
.p-progress::before { content:""; position:absolute; left:0; right:0; height:3px;
  background:var(--line); }
.p-bar { position:relative; height:3px; background:var(--gold); width:0%;
  transition:width .2s linear; }
.p-bar::after { content:""; position:absolute; right:-5px; top:50%;
  transform:translateY(-50%); width:11px; height:11px; border-radius:50%;
  background:var(--gold); opacity:0; transition:opacity .15s; }
.p-progress:hover .p-bar::after, .p-progress:focus .p-bar::after { opacity:1; }
.p-row { max-width:46rem; margin:0 auto; padding:.45rem 1.1rem .7rem; display:flex;
  align-items:center; gap:1rem; }
.p-info { min-width:0; flex:1; display:flex; flex-direction:column; }
.p-title { font-family:var(--serif); font-weight:700; font-size:.95rem;
  color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.p-title:hover { color:var(--violet); }
.p-time { font-size:.72rem; color:var(--muted); font-family:var(--sans);
  font-variant-numeric:tabular-nums; }
.p-controls { display:flex; align-items:center; gap:.45rem; }
.p-controls button { background:none; border:1px solid var(--line); color:var(--ink);
  border-radius:999px; font-size:.75rem; padding:.35rem .6rem; min-width:2.2rem; }
.p-controls button:hover { border-color:var(--violet); color:var(--violet); }
.p-controls .p-play { width:2.7rem; height:2.7rem; font-size:1rem; padding:0;
  background:var(--violet); border-color:var(--violet); color:#fff; }
.p-controls .p-play:hover { color:#fff; filter:brightness(1.1); }
@media (max-width:34rem) {
  .p-row { gap:.6rem; padding:.4rem .7rem .6rem; }
  .p-controls { gap:.3rem; }
  #pRate { display:none; }
}

/* ---------------------------------------------------------------- zen mode */
/* zen is always dark, whatever the theme — it is the "vigil" screen */
.zen { position:fixed; inset:0; z-index:50; background:#14111d; color:#d8d2c6;
  display:flex; align-items:center; justify-content:center; }
.zen[hidden], .player[hidden] { display:none; }
.zen-inner { text-align:center; padding:2rem; max-width:30rem; }
.zen-circle { width:11rem; height:11rem; margin:0 auto 2.2rem; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #4d3f78, #241e38 70%);
  box-shadow:0 0 70px 12px rgba(122,95,181,.28); cursor:pointer;
  animation:breathe 9s ease-in-out infinite; }
.zen.paused .zen-circle { animation-play-state:paused; opacity:.6; }
@keyframes breathe {
  0%,100% { transform:scale(.86); box-shadow:0 0 45px 6px rgba(122,95,181,.18); }
  45% { transform:scale(1.05); box-shadow:0 0 90px 18px rgba(122,95,181,.35); }
  60% { transform:scale(1.05); box-shadow:0 0 90px 18px rgba(122,95,181,.35); }
}
.zen-title { font-family:var(--serif); font-size:1.25rem; margin:.2rem 0; color:#eae5da; }
.zen-time { font-family:var(--sans); font-size:.85rem; color:#8f88a0;
  font-variant-numeric:tabular-nums; margin:.2rem 0 1.6rem; }
.zen-hint { font-family:var(--sans); font-size:.75rem; color:#6d6680;
  letter-spacing:.06em; }
.zen-close { position:absolute; top:1rem; right:1.1rem; background:none;
  border:1px solid #3a3450; color:#8f88a0; border-radius:999px;
  width:2.3rem; height:2.3rem; font-size:.9rem; }
.zen-close:hover { color:#eae5da; border-color:#8f88a0; }

/* ------------------------------------------------- listened checkmarks */
.done { color:var(--green); font-family:var(--sans); font-size:.85em;
  font-weight:700; vertical-align:.08em; }

/* ------------------------------------------------- share / download bar */
.sharebar { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0; }
.sharebar .btn { font-size:.83rem; }

/* ------------------------------------------------- transcript text size */
.ts-controls { display:flex; align-items:center; gap:.45rem; justify-content:flex-end;
  font-family:var(--sans); font-size:.75rem; color:var(--muted);
  border-bottom:1px dashed var(--line); padding:.5rem 0 .7rem; margin-bottom:.4rem; }
.ts-controls button { border:1px solid var(--line); background:var(--panel2);
  color:var(--ink); border-radius:999px; min-width:2.4rem; height:1.9rem;
  font-size:.8rem; }
.ts-controls button:hover { border-color:var(--violet); color:var(--violet); }

/* ------------------------------------------------- zen sleep timer */
.zen-sleep { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.45rem; margin:0 0 1.4rem; font-family:var(--sans); }
.zen-sleep .zs-label { font-size:.75rem; color:#6d6680; letter-spacing:.06em; }
.zen-sleep button { background:none; border:1px solid #3a3450; color:#8f88a0;
  border-radius:999px; font-size:.75rem; padding:.35rem .75rem; }
.zen-sleep button:hover { color:#d8d2c6; border-color:#8f88a0; }
.zen-sleep button[aria-pressed="true"] { background:#302a45; color:#dcb75a;
  border-color:#dcb75a; }

/* ------------------------------------------------- seasonal section heroes
   One discreet motif per liturgical color family:
   violet = star (watching in the night: Adviento/Cuaresma)
   gold   = radiant sun (Navidad/Pascua) · red = flame (Semana Santa/Pentecostés)
   green  = leaf (Ordinario/verano/practicar) */
.sec-hero { border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem 1.2rem;
  margin:.9rem 0 .4rem; background-color:var(--panel); background-size:30px 30px; }
.sec-hero h1 { margin:.55rem 0 .35rem; }
.sec-hero .intro { margin:.2rem 0 0; }
.sec-hero.violet { background-color:var(--violet-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 7l1.7 6.3L23 15l-6.3 1.7L15 23l-1.7-6.3L7 15l6.3-1.7Z' fill='%236b53a8' fill-opacity='.10'/%3E%3C/svg%3E"); }
.sec-hero.gold { background-color:var(--gold-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg stroke='%23a1780c' stroke-opacity='.13' stroke-width='1.3'%3E%3Ccircle cx='15' cy='15' r='3.4' fill='none'/%3E%3Cpath d='M15 6v4M15 20v4M6 15h4M20 15h4M8.6 8.6l2.9 2.9M18.5 18.5l2.9 2.9M21.4 8.6l-2.9 2.9M11.5 18.5l-2.9 2.9'/%3E%3C/g%3E%3C/svg%3E"); }
.sec-hero.red { background-color:var(--red-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 6c4 5 5.2 8 5.2 10.6a5.2 5.2 0 1 1-10.4 0C9.8 14 11 11 15 6Z' fill='%23b03a3a' fill-opacity='.10'/%3E%3C/svg%3E"); }
.sec-hero.green { background-color:var(--green-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 6.5c5.6 3.8 5.6 13.2 0 17-5.6-3.8-5.6-13.2 0-17Z' fill='%231f8a4e' fill-opacity='.10'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .sec-hero {
  background-blend-mode:screen; } }
html[data-theme="dark"] .sec-hero { background-blend-mode:screen; }

/* ------------------------------------------------- card quick actions */
.card-actions { display:flex; align-items:center; gap:.55rem; margin-top:.7rem;
  padding-top:.6rem; border-top:1px dashed var(--line); font-family:var(--sans); }
.ca { font-size:.78rem; color:var(--muted); text-decoration:none; }
.ca:hover { color:var(--violet); }
.ca-spacer { flex:1; }
.ca.icon { display:grid; place-items:center; width:2rem; height:2rem;
  border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.ca.icon:hover { border-color:var(--violet); color:var(--violet); }
.ca.icon.wa:hover { color:#1da851; border-color:#1da851; }
.sharebar .btn { display:inline-flex; align-items:center; gap:.45rem; }