/* ==========================================================================
   Guia del Monestir de Sant Cugat — sistema de disseny
   Mobile-first. Sense dependències. Colors de marca heretats del lloc original.
   ========================================================================== */

:root {
  --brand-900: #5e2c19;
  --brand-700: #8c4529;
  --brand-600: #a35b2b;
  --brand-300: #dec6b6;
  --sand-200: #f0d2b3;
  --cream-100: #f7efe4;
  --cream-50: #f7f3eb;
  --ink: #3b2016;
  --ink-soft: #6b4a3a;
  --white: #fff;
  --focus: #1a73e8;

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --reading-size: 18px;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 999px;
  --shadow-1: 0 1px 2px rgba(59, 32, 22, .08), 0 2px 8px rgba(59, 32, 22, .06);
  --shadow-2: 0 8px 28px rgba(59, 32, 22, .22);

  --gutter: 16px;
  --maxw: 760px;
  --header-h: 60px;
  --player-h: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
}
body.has-player { padding-bottom: calc(var(--player-h) + var(--safe-b) + 16px); }

img, video { display: block; max-width: 100%; }
a { color: var(--brand-700); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--brand-700); color: var(--white); padding: 10px 14px; border-radius: var(--radius-s);
}
.skip-link:focus { top: 8px; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* ---------- Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(247, 243, 235, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(140, 69, 41, .12);
}
.site-header__inner { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.site-header__logo img { height: 44px; width: auto; }
.site-header__back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0;
  color: var(--brand-700); font-weight: 700; text-decoration: none; text-transform: uppercase;
  font-size: 14px; letter-spacing: .02em;
}
.site-header__back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header__back .icon { width: 22px; height: 22px; }
.site-header__spacer { flex: 1; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--brand-700);
}
.icon-btn:hover { background: rgba(140, 69, 41, .08); }
.icon-btn .icon { width: 28px; height: 28px; }

/* ---------- Drawer menu ------------------------------------------------ */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--brand-700); color: var(--white);
  transform: translateX(100%); transition: transform .28s ease, overlay .28s allow-discrete, display .28s allow-discrete;
}
.drawer[open] { transform: none; }
@starting-style { .drawer[open] { transform: translateX(100%); } }
.drawer::backdrop { background: rgba(30, 15, 8, .45); }
.drawer__inner { display: flex; flex-direction: column; min-height: 100%; padding: 12px 20px calc(24px + var(--safe-b)); }
.drawer__close { align-self: flex-end; color: var(--white); }
.drawer__close:hover { background: rgba(255, 255, 255, .12); }
.drawer nav ul { list-style: none; margin: 8px 0 24px; padding: 0; }
.drawer nav a {
  display: flex; align-items: center; gap: 12px; padding: 14px 4px; min-height: 48px;
  color: var(--white); text-decoration: none; font-size: 19px; font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.drawer nav a[aria-current="page"] { font-weight: 700; }
.drawer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.drawer__logo { margin-top: auto; width: 180px; opacity: .95; }

/* ---------- Language switch ------------------------------------------- */
.lang-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.lang-switch a {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 36px; padding: 0 10px;
  border-radius: var(--radius-l); border: 1.5px solid currentColor;
  font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--brand-700);
}
.lang-switch a[aria-current="true"] { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }
.lang-switch--light a { color: var(--white); }
.lang-switch--light a[aria-current="true"] { background: var(--white); border-color: var(--white); color: var(--brand-700); }

/* ---------- Home ------------------------------------------------------ */
.home {
  position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: 32px var(--gutter) calc(32px + var(--safe-b)); color: var(--white); text-align: center;
  background: var(--brand-900) center / cover no-repeat;
  isolation: isolate;
}
.home::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(94, 44, 25, .55) 0%, rgba(140, 69, 41, .72) 55%, rgba(60, 26, 12, .92) 100%);
}
.home__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.home__content { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; max-width: 420px; }
.home__logo { width: min(78vw, 320px); height: auto; }
.home h1 { margin: 0; font-size: clamp(22px, 6vw, 30px); line-height: 1.2; font-weight: 700; }
.home__tagline { margin: -16px 0 0; opacity: .9; }
.home__langs { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.home__langs p { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.home__langs .lang-switch { justify-content: center; }
.home__langs .lang-switch a { min-width: 96px; min-height: 44px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.home__note { margin: 0; font-size: 14px; opacity: .85; max-width: 34ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-m);
  font-weight: 700; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
}
.btn--light { background: var(--cream-100); color: var(--brand-700); box-shadow: var(--shadow-2); }
.btn--light:hover { background: var(--white); }

/* ---------- Search by number ------------------------------------------ */
.num-search { margin: 16px 0; }
.num-search__form {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-600); color: var(--white); border-radius: var(--radius-l);
  padding: 6px 6px 6px 20px; box-shadow: var(--shadow-1);
}
.num-search__form .icon { opacity: .9; }
.num-search input {
  flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--white);
  font-size: 20px; font-weight: 700; letter-spacing: .04em;
  border-bottom: 2px solid rgba(255, 255, 255, .6); border-radius: 0; padding: 0 4px;
}
.num-search input::placeholder { color: rgba(255, 255, 255, .75); font-weight: 400; }
.num-search input:focus { outline: none; border-bottom-color: var(--white); }
.num-search button {
  height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-l);
  background: var(--cream-100); color: var(--brand-700); font-weight: 700;
}
.num-search__msg { min-height: 1.5em; margin: 6px 12px 0; color: #9b1c1c; font-size: 14px; font-weight: 500; }

/* ---------- Index ----------------------------------------------------- */
.page-title { margin: 20px 0 4px; color: var(--brand-700); font-size: 30px; line-height: 1.15; }
.page-intro { margin: 0 0 8px; color: var(--ink-soft); }

.toc { list-style: none; margin: 8px 0 32px; padding: 0; display: grid; gap: 12px; }
.toc-group { position: relative; overflow: hidden; border-radius: var(--radius-m); background: var(--brand-700) center / cover no-repeat; box-shadow: var(--shadow-1); isolation: isolate; }
.toc-group__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.toc-group::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(120, 58, 33, .94) 0%, rgba(140, 69, 41, .72) 60%, rgba(140, 69, 41, .35) 100%);
}
.toc-group__link {
  display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 14px 16px;
  color: var(--white); text-decoration: none;
}
.toc-group__link:hover .toc-title { text-decoration: underline; text-underline-offset: 3px; }
.toc-num {
  display: inline-grid; place-items: center; flex: none; min-width: 36px; height: 36px; padding: 0 6px;
  border: 2px solid rgba(255, 255, 255, .95); border-radius: var(--radius-l);
  font-weight: 700; font-size: 15px; line-height: 1;
}
.toc-title { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }
.toc-audio { width: 22px; height: 22px; opacity: .9; }
.toc-sub { list-style: none; position: relative; margin: 0; padding: 0 12px 14px 48px; display: grid; gap: 8px; }
.toc-sub::before { content: ""; position: absolute; left: 33px; top: 0; bottom: 18px; width: 2px; background: rgba(255, 255, 255, .4); border-radius: 2px; }
.toc-sub a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px;
  background: var(--cream-100); color: var(--brand-900); border-radius: var(--radius-s);
  text-decoration: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.toc-sub a:hover { background: var(--white); }
.toc-sub .toc-num { border: 0; border-radius: 6px; background: var(--sand-200); min-width: 38px; height: 30px; font-size: 14px; }
.toc-sub .toc-title { text-transform: none; letter-spacing: 0; font-size: 15.5px; }
.toc-sub .toc-audio { color: var(--brand-700); }

/* ---------- Map ------------------------------------------------------- */
.map-wrap { margin: 12px auto 24px; max-width: 560px; }
.map { position: relative; margin: 0; }
.map img { width: 100%; height: auto; }
.map__pin {
  /* Mateix ancoratge que el widget "hotspot" d'Elementor: a x=0 la vora esquerra
     toca el marge, a x=100 la vora dreta; així cap marcador surt del plànol. */
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  translate: calc(var(--x) * -1%) calc(var(--y) * -1%);
  display: grid; place-items: center; width: 42px; height: 36px;
  border-radius: var(--radius-s); background: var(--brand-700); color: var(--white);
  font-weight: 700; font-size: 16px; text-decoration: none;
  box-shadow: 0 0 0 5px rgba(140, 69, 41, .16), var(--shadow-1);
  transition: scale .15s ease, background-color .15s ease;
}
.map__pin:hover, .map__pin:focus-visible { scale: 1.12; background: var(--brand-900); }
.map-extra { margin: 0 0 32px; }
.map-extra h2 { font-size: 16px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Obra ------------------------------------------------------ */
.gallery { position: relative; margin: 0 calc(-1 * var(--gutter)); background: #1d120c; }
.gallery__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
/* L'obra s'ha de veure sencera: mai retallem (contain) i adaptem l'escenari a la pantalla */
.gallery__slide {
  flex: 0 0 100%; scroll-snap-align: center; position: relative; margin: 0;
  aspect-ratio: 1 / 1; max-height: min(64vh, 64svh); width: 100%;
}
.gallery__slide > button, .gallery__slide > video { width: 100%; height: 100%; border: 0; padding: 0; background: none; }
.gallery__slide img, .gallery__slide video { width: 100%; height: 100%; object-fit: contain; }
.gallery__slide video { object-fit: contain; background: #000; }
.gallery__zoom {
  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-l); background: rgba(0, 0, 0, .45); color: var(--white); pointer-events: none;
}
.gallery__nav {
  position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--radius-l); background: rgba(247, 243, 235, .88); color: var(--brand-700); box-shadow: var(--shadow-1);
}
.gallery__nav[disabled] { opacity: 0; pointer-events: none; }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.gallery__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: width .2s; }
.gallery__dots span[aria-current="true"] { width: 18px; border-radius: 4px; background: var(--white); }
.gallery__fallback { padding: 24px; color: var(--white); text-align: center; }
.gallery__fallback a { color: var(--white); }

.obra-head { display: flex; align-items: center; gap: 14px; margin: 20px 0 8px; }
.obra-num {
  display: grid; place-items: center; flex: none; min-width: 84px; height: 64px; padding: 0 14px;
  border-radius: var(--radius-l); background: var(--brand-700); color: var(--white);
  font-size: 34px; font-weight: 700; letter-spacing: -.01em;
}
.obra-tools { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.text-size { display: flex; gap: 4px; }
.text-size button {
  display: grid; place-items: center; min-width: 44px; height: 40px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--brand-700); font-weight: 700;
}
.text-size button:hover { background: rgba(140, 69, 41, .08); }
.text-size button[disabled] { opacity: .35; cursor: default; }
.text-size [data-size="-1"] { font-size: 16px; }
.text-size [data-size="1"] { font-size: 22px; }

.obra-title { margin: 8px 0 12px; color: var(--brand-700); font-size: clamp(26px, 7vw, 36px); line-height: 1.15; }
.obra-text { font-size: var(--reading-size); line-height: 1.65; color: var(--ink); }
.obra-text p { margin: 0 0 1em; }
.obra-text strong { color: var(--brand-900); }
.notice {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; padding: 12px 14px;
  border-radius: var(--radius-s); background: var(--cream-100); color: var(--ink-soft); font-size: 15px;
}

.children { margin: 28px 0 8px; }
.children h2 { font-size: 15px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.children .toc-sub { padding: 0; }
.children .toc-sub::before { display: none; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 8px; }
.pager a {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-height: 64px; border-radius: var(--radius-s);
  background: var(--white); box-shadow: var(--shadow-1); text-decoration: none; color: var(--brand-900);
}
.pager small { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.pager span { font-weight: 700; font-size: 15px; line-height: 1.25; }
.pager .pager__next { grid-column: 2; text-align: right; }

/* ---------- Audio player ---------------------------------------------- */
.player {
  position: fixed; z-index: 25; left: 50%; bottom: calc(12px + var(--safe-b)); translate: -50% 0;
  width: calc(100% - 24px); max-width: 720px;
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 22px;
  background: var(--brand-700); color: var(--white); box-shadow: var(--shadow-2);
}
.player__btn {
  display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--cream-100); color: var(--brand-700);
}
.player__btn .icon { width: 26px; height: 26px; }
.player__btn--ghost { width: 40px; height: 40px; background: transparent; color: var(--white); }
.player__btn--ghost .icon { width: 24px; height: 24px; }
.player__btn .i-pause, .player.is-playing .player__btn .i-play { display: none; }
.player.is-playing .player__btn .i-pause { display: block; }
.player.is-loading .player__btn { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.player__timeline { display: grid; gap: 2px; min-width: 0; }
.player__time { display: flex; justify-content: space-between; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .92; }
.player__range {
  --p: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.player__range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--white) var(--p), rgba(255, 255, 255, .3) var(--p)); }
.player__range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.player__range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--white); }
.player__range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--white); border: 0; }
.player__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 0; }
.player__range:focus-visible { outline-offset: 0; }
.player__speed {
  min-width: 52px; height: 36px; padding: 0 8px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: var(--radius-l);
  background: transparent; color: var(--white); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}

/* Avís abans de demanar el micròfon (truc de l'auricular a iPhone) */
.ear-dialog {
  width: min(420px, calc(100% - 32px)); margin: auto; padding: 22px 20px 18px; border: 0; border-radius: var(--radius-m);
  background: var(--cream-50); color: var(--ink); box-shadow: var(--shadow-2);
}
.ear-dialog::backdrop { background: rgba(20, 10, 6, .55); }
.ear-dialog h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; color: var(--brand-700); }
.ear-dialog p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; }
.ear-dialog__btns { display: grid; gap: 8px; }
.ear-dialog__btns button { min-height: 48px; border-radius: var(--radius-s); font-weight: 700; font-size: 15px; border: 1.5px solid var(--brand-700); }
.ear-dialog__yes { background: var(--brand-700); color: var(--white); }

@media (max-width: 359px) {
  .player { gap: 6px; padding-right: 10px; }
  .player__speed { min-width: 44px; padding: 0 4px; }
}

/* ---------- Pantalla completa / app instal·lada -------------------------
   A pantalla completa (o instal·lada a l'iPhone) el contingut pot quedar sota la
   zona del rellotge i la bateria: es deixa l'espai de seguretat del sistema. */
.site-header { padding-top: env(safe-area-inset-top, 0px); }
.drawer__inner { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.home { padding-top: calc(32px + env(safe-area-inset-top, 0px)); }

/* Consell per a iPhone: afegir la guia a la pantalla d'inici */
.ios-hint {
  position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 20px var(--gutter) 0;
  padding: 12px 40px 12px 14px; border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 14px; line-height: 1.45; text-align: left;
  box-shadow: var(--shadow-1);
}
.ios-hint p { margin: 0; }
.ios-hint .icon { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; color: var(--brand-700); }
.ios-hint__close {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: var(--ink-soft);
}

/* ---------- NFC ------------------------------------------------------- */
.num-search__nfc {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; margin-top: 10px;
  border: 1.5px solid var(--brand-700); border-radius: var(--radius-l); background: transparent; color: var(--brand-700);
  font-weight: 700; font-size: 15px;
}
.num-search__nfc[hidden] { display: none; }
.num-search__nfc .icon { width: 22px; height: 22px; }
.num-search__nfc.is-on { background: var(--brand-700); color: var(--white); }
.num-search__nfc.is-on::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6fdc8c; animation: pulse 1.4s ease-in-out infinite;
}
.num-search__nfc-status { min-height: 0; margin: 6px 12px 0; font-size: 14px; color: var(--ink-soft); }
.num-search__nfc-status:empty { display: none; }
.num-search__nfc-status[data-kind="err"] { color: #9b1c1c; font-weight: 500; }

/* Botó gran per començar l'àudio quan el navegador no deixa que soni sol */
.tap-listen { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(20, 10, 6, .55); }
.tap-listen__btn {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 36px; border: 0; border-radius: var(--radius-m);
  background: var(--brand-700); color: var(--white); font-weight: 700; font-size: 20px; box-shadow: var(--shadow-2);
}
.tap-listen__btn .icon { width: 56px; height: 56px; }

/* ---------- Lightbox -------------------------------------------------- */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 7, 4, .96); color: var(--white); }
.lightbox::backdrop { background: rgba(12, 7, 4, .96); }
.lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide { flex: 0 0 100%; display: grid; place-items: center; scroll-snap-align: center; padding: 56px 8px; }
.lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__close { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; color: var(--white); }
.lightbox__close:hover { background: rgba(255, 255, 255, .12); }
.lightbox__count { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); left: 16px; font-size: 14px; opacity: .85; font-variant-numeric: tabular-nums; }

/* ---------- Footer / misc --------------------------------------------- */
.site-footer { padding: 24px var(--gutter) 32px; color: var(--ink-soft); font-size: 14px; text-align: center; }
.site-footer p { margin: 0 auto 12px; max-width: 46ch; }
.site-footer .lang-switch { justify-content: center; }

.center-page { min-height: 70vh; display: grid; place-content: center; text-align: center; gap: 12px; }

@media (orientation: landscape) and (max-height: 500px) {
  .gallery__slide { aspect-ratio: 16 / 9; max-height: 80vh; }
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 68px; }
  .gallery { margin: 16px 0 0; border-radius: var(--radius-m); overflow: hidden; }
  .gallery__slide { aspect-ratio: 16 / 10; max-height: 72vh; }
  .toc-group__link { min-height: 96px; }
  .player { bottom: calc(20px + var(--safe-b)); }
}

@media (hover: hover) {
  .gallery__slide > button { cursor: zoom-in; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .player, .num-search, .gallery, .pager, .drawer { display: none !important; }
  body { background: #fff; }
}

/* ---------- Cercador flotant ------------------------------------------- */
.num-search-slot { position: relative; }
.num-search__form { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; }
.num-search__form:focus-within { box-shadow: 0 0 0 3px rgba(74, 18, 32, .22), 0 8px 24px rgba(46, 10, 20, .14); }
.num-search button { transition: background-color .2s ease, color .2s ease, transform .12s ease, opacity .2s ease; }
.num-search button:active { transform: scale(.94); }
.num-search__form.is-error { animation: num-shake .36s ease; }
@keyframes num-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.num-search__form.is-going button { animation: pulse .7s ease-in-out infinite; }
.num-search__msg:empty { min-height: 0; margin: 0; }

/* Enganxat a dalt (només mòbil; el posa app.js) */
.num-search.is-docked {
  position: fixed; z-index: 28; left: 12px; right: 12px; margin: 0;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 8px);
  animation: num-dock .22s ease-out;
}
.num-search.is-docked .num-search__nfc, .num-search.is-docked .num-search__nfc-status { display: none; }
.num-search.is-docked .num-search__msg:not(:empty) {
  display: inline-block; margin: 6px 0 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
@keyframes num-dock { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.has-docked-search { scroll-padding-top: calc(var(--header-h) + 84px); }
@media (prefers-reduced-motion: reduce) {
  .num-search.is-docked, .num-search__form.is-error, .num-search__form.is-going button { animation: none; }
}

/* ---------- Peus de foto ---------------------------------------------- */
.gallery__slide { position: relative; }
.gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; pointer-events: none;
  padding: 9px 52px 9px 14px;
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: .01em;
}
.lightbox__slide { grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.lightbox__caption { max-width: 60ch; margin: 0; padding: 8px 14px; border-radius: 4px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 15px; line-height: 1.4; text-align: center; }

/* ---------- Carrusel: més espectacular i amb més resposta visual ------- */
.gallery { overflow: hidden; }
/* la foto activa entra amb un lleuger zoom; les veïnes s'apaguen mentre llisques */
.gallery__slide img, .gallery__slide video { transition: opacity .45s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.gallery__slide:not(.is-active) img { opacity: .35; transform: scale(.94); }
.gallery__slide.is-active img { opacity: 1; transform: scale(1); }
.gallery__slide > button { cursor: zoom-in; }
.gallery__slide > button:active img { transform: scale(.985); }
/* el peu de foto puja quan la foto es fa activa */
.gallery__caption { transition: transform .45s cubic-bezier(.2, .7, .2, 1) .1s, opacity .35s ease .1s; }
.gallery__slide:not(.is-active) .gallery__caption { opacity: 0; transform: translateY(100%); }
.gallery__zoom { transition: transform .2s ease; }
.gallery__slide.is-active .gallery__zoom { animation: zoom-pop .5s ease .25s both; }
@keyframes zoom-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }

/* Pantalles tàctils: la foto segueix el dit sense encongir-se, apagar-se ni rebotar (sense «efecte molla») */
@media (hover: none), (pointer: coarse) {
  .gallery__slide img, .gallery__slide video { transition: none; }
  .gallery__slide:not(.is-active) img, .gallery__slide > button:active img { opacity: 1; transform: none; }
  .gallery__slide.is-active .gallery__zoom { animation: none; }
  .gallery__progress i { transition: width .2s ease; }
}

/* fletxes rodones amb efecte vidre */
.gallery__nav {
  width: 46px; height: 46px; border-radius: 50%; z-index: 2;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transition: transform .15s ease, opacity .25s ease, background-color .2s ease;
}
.gallery__nav:hover { background: rgba(255, 255, 255, .95); transform: scale(1.06); }
.gallery__nav:active { transform: scale(.9); }
.gallery__nav .icon { width: 24px; height: 24px; }

/* comptador i barra de progrés */
.gallery__count {
  position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.gallery__progress { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; background: rgba(0, 0, 0, .15); pointer-events: none; }
.gallery__progress i { display: block; height: 100%; width: 0; background: var(--copper, #b98459); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.gallery.has-thumbs .gallery__dots { display: none; }

/* tira de miniatures */
.gallery__thumbs {
  display: flex; gap: 8px; margin-top: 8px; padding: 4px 2px 6px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
  position: relative; flex: 0 0 60px; height: 60px; padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: #222; cursor: pointer; scroll-snap-align: center; opacity: .55;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { opacity: .85; }
.gallery__thumb:active { transform: scale(.92); }
.gallery__thumb.is-active { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--burgundy, #4a1220), 0 6px 14px rgba(0, 0, 0, .25); }
.gallery__thumb--video { display: grid; place-items: center; color: #fff; }
.gallery__thumb--video svg { width: 26px; height: 26px; fill: currentColor; }

/* pista de «llisca» la primera vegada */
.gallery__hint {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 4px;
  padding: 10px 14px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; pointer-events: none;
  transition: opacity .35s ease;
}
.gallery__hint svg { width: 22px; height: 22px; fill: currentColor; }
.gallery__hint i { width: 26px; height: 26px; border-radius: 50%; background: #fff; animation: hint-swipe 1.4s ease-in-out infinite; }
.gallery__hint.is-gone { opacity: 0; }
@keyframes hint-swipe { 0%, 100% { transform: translateX(-12px); opacity: .5; } 50% { transform: translateX(12px); opacity: 1; } }

/* ampliació: fletxes, zoom amb doble toc i lliscar per tancar */
.lightbox { background: rgba(12, 7, 4, calc(.96 * var(--lb-fade, 1))); }
.lightbox[open] .lightbox__track { animation: lb-in .3s ease-out; }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lightbox__track { transition: transform .2s ease; }
.lightbox__slide img { transition: transform .35s cubic-bezier(.2, .7, .2, 1); cursor: zoom-in; touch-action: manipulation; }
.lightbox__slide.is-zoomed img { transform: scale(2.2); cursor: zoom-out; }
.lightbox__slide.is-zoomed .lightbox__caption { opacity: 0; }
.lightbox__nav {
  position: fixed; z-index: 2; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .16); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s ease, opacity .25s ease, background-color .2s;
}
.lightbox__nav svg { width: 26px; height: 26px; fill: currentColor; }
.lightbox__nav:hover { background: rgba(255, 255, 255, .3); }
.lightbox__nav:active { transform: scale(.9); }
.lightbox__nav[disabled] { opacity: 0; pointer-events: none; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__count { z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); }

@media (prefers-reduced-motion: reduce) {
  .gallery__slide img, .gallery__caption, .gallery__progress i, .gallery__thumb, .lightbox__slide img { transition: none; }
  .gallery__slide.is-active .gallery__zoom, .gallery__hint i, .lightbox[open] .lightbox__track { animation: none; }
}
.gallery__zoom { z-index: 2; top: 10px; bottom: auto; right: 10px; width: 34px; height: 34px; }
.lightbox__slide { margin: 0; }

/* ---------- Text de les obres justificat (amb partició de mots perquè no quedin forats) */
.obra-text p, .obra-text li {
  text-align: justify; text-justify: inter-word;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
  overflow-wrap: break-word;
}

/* un avís amagat (p. ex. «àudio no disponible» mentre l'àudio funciona) no s'ha de veure mai */
.notice[hidden], [data-audio-error][hidden] { display: none !important; }

/* marge interior del text de les obres: 4% a cada costat */
.obra-text { padding-left: 4%; padding-right: 4%; }

/* ---------- Mapa del monestir: més resposta visual ------------------- */
.map--live .map__pin {
  opacity: 0; transform: translateY(-14px) scale(.6);
  transition: opacity .35s ease var(--d, 0ms), transform .5s cubic-bezier(.2, 1.4, .4, 1) var(--d, 0ms),
              background-color .2s ease, box-shadow .2s ease, filter .2s ease, scale .2s ease;
}
.map--live.is-in .map__pin { opacity: 1; transform: none; }
.map--live .map__pin::after {           /* pols suau que convida a tocar */
  content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(185, 132, 89, .55); animation: map-pulse 2.6s ease-out infinite; animation-delay: calc(var(--d, 0ms) + .8s);
}
@keyframes map-pulse { 0% { box-shadow: 0 0 0 0 rgba(185, 132, 89, .5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(185, 132, 89, 0); } }
.map--live .map__pin:active { scale: .9; }
.map--live.has-active .map__pin:not(.is-active) { filter: saturate(.3); opacity: .45; }
.map--live .map__pin.is-active {
  z-index: 3; scale: 1.25; background: var(--burgundy, #4a1220);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(74, 18, 32, .35), 0 10px 22px rgba(46, 10, 20, .35);
}
.map--live .map__pin.is-active::after { animation: none; }
/* etiqueta amb el nom (ordinador) */
@media (hover: hover) {
  .map--live .map__pin::before {
    content: attr(data-label); position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px;
    padding: 6px 10px; border-radius: 8px; background: rgba(26, 14, 18, .88); color: #fff; white-space: nowrap;
    font: 700 12px/1.2 var(--sans, system-ui); letter-spacing: .02em; pointer-events: none; opacity: 0;
    transition: opacity .15s ease, translate .15s ease;
  }
  .map--live .map__pin:hover::before { opacity: 1; translate: -50% 0; }
  .map--live .map__pin:hover { scale: 1.12; }
}
/* targeta de l'obra triada */
.map-card {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(14px + var(--safe-b, 0px)); max-width: 520px; margin: 0 auto;
  border-radius: 20px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 18px 44px rgba(46, 10, 20, .28), 0 2px 6px rgba(46, 10, 20, .1);
  transform: translateY(calc(100% + 30px)); opacity: 0; transition: transform .38s cubic-bezier(.2, .9, .2, 1), opacity .25s ease;
}
.map-card.is-open { transform: none; opacity: 1; }
.map-card__link { display: flex; align-items: center; gap: 14px; padding: 12px 52px 12px 12px; color: inherit; text-decoration: none; }
.map-card__link:active { transform: scale(.985); }
.map-card__art {
  flex: none; width: 76px; height: 76px; border-radius: 14px; background: #eee8de center / cover no-repeat;
  position: relative; overflow: hidden;
}
.map-card__art:not(.is-loaded)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 80%);
  animation: map-shimmer 1.1s linear infinite;
}
@keyframes map-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.map-card__art.is-loaded { animation: map-art-in .35s ease; }
@keyframes map-art-in { from { opacity: 0; } to { opacity: 1; } }
.map-card__body { display: grid; gap: 4px; min-width: 0; }
.map-card__num { font: 400 30px/1 var(--serif, Georgia); color: var(--copper, #b98459); }
.map-card__title { font: 400 18px/1.2 var(--serif, Georgia); color: var(--ink, #1a1a1a); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.map-card__cta {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 7px 12px 7px 9px; border-radius: 999px;
  background: var(--burgundy, #4a1220); color: #fff; font: 700 11px/1 var(--sans, system-ui); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(74, 18, 32, .28);
}
.map-card__cta .icon { width: 14px; height: 14px; fill: currentColor; }
.map-card__close {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(74, 18, 32, .08); color: var(--burgundy, #4a1220); cursor: pointer; transition: background-color .2s ease, transform .15s ease;
}
.map-card__close .icon { width: 18px; height: 18px; fill: currentColor; }
.map-card__close:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
  .map--live .map__pin, .map-card { transition: none; }
  .map--live .map__pin::after, .map-card__art::after { animation: none; }
}

/* ---------- Galeries: sense scroll, només «swipe» lateral ----------------- */
/* La galeria NO és una zona desplaçable: la .gallery retalla (overflow: clip/hidden) i la pista
   es mou amb transform des d'app.js. Cada foto s'ajusta exactament al contenidor (contain),
   així que no hi ha res que es pugui desplaçar ni en vertical ni en horitzontal. El navegador
   només gestiona el gest vertical (scroll de la pàgina, touch-action: pan-y); el lateral el
   fa app.js per passar de foto. */
/* Qui retalla és la .gallery (que no es mou), no la pista: si la pista retallés, el seu retall
   es desplaçaria amb el transform i la foto 2 i següents quedarien fora (galeria en blanc) */
.gallery { overflow: hidden; overflow: clip; }
.gallery__track {
  overflow: visible; scroll-snap-type: none; scroll-behavior: auto;
  touch-action: pan-y pinch-zoom; overscroll-behavior: auto;
  transform: translate3d(calc(var(--gal-i, 0) * -100%), 0, 0);
  transition: transform .38s cubic-bezier(.25, .8, .25, 1);
  will-change: transform;
}
.gallery__track.is-dragging { transition: none; cursor: grabbing; }
.gallery__slide { overflow: hidden; overflow: clip; scroll-snap-align: none; }
.gallery__slide > button, .gallery__slide > video { display: block; width: 100%; height: 100%; }
.gallery__slide img, .gallery__slide video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* les miniatures també caben sempre: una fila que s'ajusta a l'amplada, sense scroll */
.gallery__thumbs {
  display: grid; grid-template-columns: repeat(var(--gal-cols, var(--gal-n, 1)), minmax(0, 58px)); justify-content: center;
  overflow: hidden; overflow: clip; scroll-snap-type: none; touch-action: pan-y;
}
/* (l'espai entre miniatures i la mida a la maqueta: vegeu theme-maqueta.css, que es carrega després) */
.gallery__thumb, .theme-maqueta .gallery__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; flex: none; }
/* Pantalles tàctils: cap moviment vertical dins la galeria; el peu de foto només s'esvaeix
   i la miniatura activa no puja */
@media (hover: none), (pointer: coarse) {
  .gallery__slide:not(.is-active) .gallery__caption { transform: none; }
  .gallery__caption { transition: opacity .35s ease .1s; }
  .gallery__thumb.is-active, .gallery__thumb:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gallery__track { transition: none; } }
/* la foto no s'arrossega ni se selecciona (ni amb pulsació llarga a l'iPhone) */
.gallery__slide img, .gallery__thumb img, .lightbox__slide img {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.lightbox__track { overflow-y: hidden; }
.build-tag { display: block; margin-top: 24px; opacity: .45; font-size: 11px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }