/* ============================================================
   Visita Virtual dels Patis del Museu Picasso de Barcelona
   Rediseny — Home + Ficha 360°
   Mides, colors i tipografies extrets directament del Figma.
   ============================================================ */

/* --- Tipografia Garnett Semibold (titulars) ---
   Garnett és una font comercial. Quan la tingueu, deseu el woff2
   a assets/fonts/ i descomenteu:
   @font-face{
     font-family:'Garnett Semibold';
     src:url('../assets/fonts/Garnett-Semibold.woff2') format('woff2');
     font-weight:600; font-display:swap;
   }
   Mentrestant s'usa Inter com a alternativa. */

:root{
  --negro:#091B39;
  --white:#ffffff;
  --gris-clar:#F7F7F7;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--white);
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
a{text-decoration:none;color:inherit;}

/* focus accessible coherent a tot el lloc */
button:focus-visible,
a:focus-visible{
  outline:2px solid rgba(120,150,200,.9);
  outline-offset:3px;
  border-radius:6px;
}

/* ===========================================================
   Pantalla de càrrega (index) + entrada del contingut
   =========================================================== */
.loader{
  position:fixed;inset:0;z-index:100;
  background:var(--negro);
  transition:opacity .6s ease,visibility .6s;
}
.loader.is-done{opacity:0;visibility:hidden;}

/* entrada del contingut quan la pàgina està llesta (body.is-ready).
   Fins llavors el loader ho tapa tot, així que no cal amagar res abans. */
@keyframes rise{
  from{opacity:0;transform:translateY(18px);}
  to  {opacity:1;transform:translateY(0);}
}
@keyframes soft{ from{opacity:0;} to{opacity:1;} }
@keyframes hero-in{ from{transform:scale(1.1);} to{transform:scale(1);} }

.is-ready .brand,
.is-ready .home__lang {animation:soft .8s ease .05s backwards;}
.is-ready #heroPhoto  {animation:hero-in 1.5s ease both;}
.is-ready .home__title{animation:rise .7s cubic-bezier(.22,1,.36,1) .15s backwards;}
.is-ready .home__lead {animation:rise .7s cubic-bezier(.22,1,.36,1) .28s backwards;}
.is-ready .btn-pill   {animation:rise .7s cubic-bezier(.22,1,.36,1) .40s backwards;}
.is-ready .home__caption{animation:soft .9s ease .5s backwards;}
.is-ready .home__skyline{animation:rise .7s cubic-bezier(.22,1,.36,1) .52s backwards;}

@media (prefers-reduced-motion:reduce){
  .is-ready .brand,.is-ready .home__lang,.is-ready #heroPhoto,.is-ready .home__title,
  .is-ready .home__lead,.is-ready .btn-pill,.is-ready .home__caption,
  .is-ready .home__skyline{animation:none;}
  .minimap__art{transition:none;}
}

/* ===========================================================
   HOME
   =========================================================== */
.page-home{overflow:hidden;}
.home{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:660px;
  background:var(--negro);
  display:grid;
  grid-template-columns:770fr 670fr;
}

/* --- columna esquerra (blau marí) --- */
/* El logo va en absolute i flota sobre aquesta columna, així que el
   padding superior li reserva el lloc: sense això, en finestres baixes el
   text es centra cap amunt i acaba per sota del logotip. */
.home__left{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:150px 50px 40px 70px;
}
.brand{
  position:absolute;
  top:28px;left:30px;
  width:105px;height:105px;
}
.brand img{width:100%;height:100%;object-fit:contain;}

.home__content{max-width:650px;}
.home__title{
  margin:0;
  font-family:'Garnett Semibold','Garnett','Inter',sans-serif;
  font-weight:600;
  font-size:55px;
  line-height:60px;
  letter-spacing:0;
}
.home__lead{
  margin:20px 0 0;
  max-width:580px;
  font-weight:400;
  font-size:20px;
  line-height:30px;
}
.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:36px;
  padding:8px 24px;
  border:1px solid var(--white);
  border-radius:70px;
  font-weight:600;
  font-size:24px;
  line-height:30px;
  background:transparent;
  transition:background .25s ease,box-shadow .25s ease,transform .12s ease;
}
.btn-pill__arrow{
  width:33px;height:21px;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.btn-pill:hover{
  background:rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.btn-pill:hover .btn-pill__arrow{transform:translateX(6px);}
.btn-pill:active{transform:scale(.98);}
/* petita crida d'atenció: la fletxa fa un "nudge" cada pocs segons */
@media (prefers-reduced-motion:no-preference){
  .btn-pill__arrow{animation:arrow-nudge 3.4s ease-in-out 1.4s infinite;}
  .btn-pill:hover .btn-pill__arrow{animation:none;}
}
@keyframes arrow-nudge{
  0%,84%,100%{transform:translateX(0);}
  90%{transform:translateX(5px);}
  96%{transform:translateX(0);}
}

/* edificis (skyline) sota el botó — cada un és un botó de palau */
.home__skyline{
  position:relative;
  margin-top:40px;
  width:100%;
  max-width:650px;
}
.home__skyline svg{width:100%;height:auto;display:block;}
.home__skyline .edif{cursor:pointer;}
/* non-scaling-stroke: el gruix s'aplica en píxels de pantalla, no en unitats
   del viewBox. Sense això el traç queda per sota d'1 px en escalar el dibuix,
   es dibuixa difuminat, i allà on dos contorns comparteixen aresta la
   cobertura se suma i aquell tram es veu més marcat que la resta. */
.home__skyline .edif path{
  stroke:#848D9C;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  transition:stroke .2s ease;
}
.home__skyline .edif:hover path,
.home__skyline .edif.is-on path{stroke:var(--white);}

/* sota els edificis, només el nom del palau que s'està mostrant */
.skyline__name{
  display:block;
  margin-top:14px;
  font-weight:500;
  font-size:15px;
  line-height:20px;
  color:var(--white);
}

/* --- columna dreta (foto) --- */
/* tota la columna és l'enllaç al palau que s'hi mostra */
.home__media{position:relative;display:block;overflow:hidden;}
.home__photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
/* la imatge nova entra per sobre de l'actual: fosa + un lleu zoom
   (crossfade real, mai es veu el fons) */
.home__photo--enter{
  animation:photo-in .85s ease both;
}
@keyframes photo-in{
  from{opacity:0;transform:scale(1.06);}
  to  {opacity:1;transform:scale(1);}
}
.home__photo-grad{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);
}
.home__caption{
  position:absolute;
  left:35px;right:35px;bottom:77px;
}
.home__caption-line{
  display:block;
  width:100%;height:1px;
  background:var(--white);
}
/* sota la línia, el nom del palau, alineat a l'esquerra */
.home__caption-row{
  display:flex;
  align-items:center;
  margin-top:16px;
}
.home__caption-text{
  font-weight:700;
  font-size:30px;
  line-height:35px;
  transition:opacity .3s ease;
}
.home__caption-text.is-fading{opacity:0;}

/* ===========================================================
   Selector d'idioma — CAT / ES / EN
   =========================================================== */
.lang-switch{
  display:flex;
  align-items:center;
  gap:2px;
}
.lang-switch__btn{
  background:none;
  border:1px solid transparent;
  padding:4px 8px;
  border-radius:999px;
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  letter-spacing:.5px;
  color:rgba(255,255,255,.55);
  transition:color .2s ease,border-color .2s ease;
}
.lang-switch__btn:hover{color:rgba(255,255,255,.9);}
.lang-switch__btn.is-active{
  color:var(--white);
  border-color:var(--white);
}
.lang-switch__sep{
  color:rgba(255,255,255,.3);
  font-size:12px;
}

/* flotant a dalt a la dreta de la columna blava, a l'alçada del logo.
   Només surt a la home: a la fitxa 360° l'idioma es tria abans d'entrar-hi
   i es manté durant tota la visita, sense selector propi. */
.home__lang{
  position:absolute;
  top:44px;right:50px;
  z-index:5;
}
@media (max-width:1024px){ .home__lang{top:36px;right:30px;} }
@media (max-width:600px){ .home__lang{top:24px;right:16px;} .home__lang .lang-switch__btn{font-size:11px;} }

/* ===========================================================
   HEADER del lloc — només el logotip
   =========================================================== */
.page-ficha{overflow:hidden;background:var(--negro);}

/* el header no ocupa espai: flota sobre la imatge, que va a sang.
   pointer-events:none perquè no bloquegi l'arrossegament del panorama;
   només el logo torna a ser clicable. */
.site-header{
  position:absolute;
  top:0;left:0;
  z-index:20;
  width:100%;
  height:160px;
  pointer-events:none;
}
.site-header .brand{pointer-events:auto;}

/* ===========================================================
   FICHA — vista 360°
   =========================================================== */
/* la imatge va a sang: ocupa tota la finestra, sense marge ni cantonades
   arrodonides. El logo i la interfície floten a sobre. */
.ficha{
  width:100vw;
  height:100vh;
  padding:0;
  background:var(--negro);
}
.viewer{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  background:#0b1426;
}

/* llenç 360 */
.viewer__canvas{position:absolute;inset:0;z-index:0;touch-action:none;cursor:grab;}
.viewer__canvas:active{cursor:grabbing;}
.viewer__canvas canvas{display:block;}
/* ombra del peu: arrenca a mitja alçada, no de dalt de tot, perquè només
   ha d'assegurar la lectura del carrusel sense enfosquir tot el pati */
.viewer__grad{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.9) 100%);
}

/* carregant */
.viewer__loading{
  position:absolute;inset:0;z-index:8;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:16px;
  background:var(--negro);
  color:rgba(255,255,255,.8);
  font-size:14px;
  transition:opacity .4s ease;
}
.viewer__loading.is-hidden{opacity:0;pointer-events:none;}
.spinner{
  width:38px;height:38px;
  border:3px solid rgba(255,255,255,.2);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}


/* visor d'imatge plana ampliable (arrossega per moure, roda per fer zoom) */
.flatview{
  position:absolute;inset:0;z-index:2;
  display:none;
  overflow:hidden;
  background:#0b1426;
  cursor:grab;
  touch-action:none;
}
.flatview.is-open{display:block;}
.flatview:active{cursor:grabbing;}
.flatview img{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  max-width:none;
  -webkit-user-select:none;user-select:none;
}
/* el mateix degradat que el panorama, perquè el carrusel es llegeixi
   per sobre de la imatge (el .viewer__grad queda per sota d'aquesta capa) */
.flatview::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.9) 100%);
}

/* minimapa */
/* l'ample va fixat (dibuix + padding) i no el posa el contingut: si no,
   el nom del palau que canvia en fer hover sobre els edificis eixampla i
   estreny la caixa (es veia sobretot a Firefox) */
.minimap{
  position:absolute;top:36px;right:30px;z-index:3;
  display:flex;flex-direction:column;
  gap:0;
  width:382px;               /* 330 del dibuix + 26 de padding per banda */
  padding:26px;
  background:rgba(0,0,0,.6);
  border-radius:13px;
}
/* l'espai avall va al marge de l'art, no al gap del flex, perquè el gap no
   es pot animar per element i en plegar-se ha de desaparèixer amb ell */
.minimap__art{
  width:330px;height:78px;
  margin-bottom:13px;
  overflow:hidden;
  transition:height .3s cubic-bezier(.4,0,.2,1),
             margin-bottom .3s cubic-bezier(.4,0,.2,1),
             opacity .22s ease;
}
.minimap__art svg{width:100%;height:100%;display:block;}
/* els 4 palaus del minimapa; s'il·lumina el que s'està visitant */
.minimap .edif{cursor:pointer;}
/* aquí el dibuix es veu encara més petit (330 px i avall) i sobre la imatge
   del pati, així que el traç va una mica més gruixut que a la home */
.minimap .edif path{
  stroke:#848D9C;
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  transition:stroke .2s ease;
}
.minimap .edif:hover path{stroke:rgba(255,255,255,.7);}
/* el contorn blanc sol no acaba de separar el palau que s'està visitant de la
   resta del skyline: a sota hi va la seva silueta plena de blanc, amb els
   detalls retallats (l'afegeix el JS, vegeu addHighlightShape). En
   hover, un tast de la mateixa silueta anticipa quin edifici se seleccionarà */
.minimap .edif__hl{
  fill:var(--white);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.minimap .edif:hover .edif__hl{opacity:.14;}
.minimap .edif.is-on .edif__hl{opacity:1;}
/* dins de la màscara mana la lluminositat: el blanc deixa veure el ple i el
   negre el retalla. El traç blanc tapa les escletxes que deixen les formes
   del dibuix en trobar-se, que no encaixen al decimal. */
.minimap .edif__mask-solid path{
  fill:#fff;stroke:#fff;
  stroke-width:1.4;vector-effect:non-scaling-stroke;
}
/* les juntes de dins de la silueta (la cornisa sota la teulada, la partió
   entre les dues ales) també es tallen: el JS ja n'ha tret els trams que van
   pel contorn, que és per on s'hi colaria la línia de l'edifici del costat */
.minimap .edif__mask-line path{
  fill:none;stroke:#000;
  stroke-width:1;vector-effect:non-scaling-stroke;
}
/* els detalls es retallen plens: la finestra és el forat, no el seu contorn.
   Van sense traç: engreixar-los els soldaria amb el veí, que sovint els
   toca. */
.minimap .edif__mask-hole path{
  fill:#000;stroke:none;
}
/* i el fil blanc que els torna a separar. Prim, que no és una línia del
   dibuix sinó la junta entre dues figures retallades */
.minimap .edif__mask-seam path{
  fill:none;stroke:#fff;
  stroke-width:0.8;vector-effect:non-scaling-stroke;
}
/* amb la silueta plena, la línia del dibuix ja no s'ha de pintar: és el buit
   que la retalla */
.minimap .edif.is-on path,
.minimap .edif.is-on:hover path{stroke:transparent;}
/* peu del minimapa: nom del palau i la seva posició dins dels 4 */
.minimap__current{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
/* el nom del palau és el contingut: el que ha de pesar més dels dos textos */
/* min-width:0 el deixa encongir dins de l'ample fix de la caixa: si un nom
   no hi cap, salta de línia en comptes d'eixamplar el minimapa */
.minimap__label{
  min-width:0;
  font-weight:600;
  font-size:18px;
  color:var(--white);
}
.minimap__index{
  flex:none;
  font-weight:500;
  font-size:12px;
  color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}
/* títol del selector: en desktop plega i desplega els edificis;
   en mòbil, on els edificis no hi caben, desplega la llista de palaus */
.minimap__switch{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;   /* el chevron, a la vora dreta */
  gap:12px;
  margin-bottom:13px;
  padding:0;
  border:0;
  background:none;
  color:var(--white);
  cursor:pointer;
  text-align:left;
}
/* el títol només retola el control: va en versaletes, petit i apagat, de
   manera que no competeixi amb el nom del palau (sobretot amb els edificis
   plegats, on els dos textos queden un damunt de l'altre) */
.minimap__title{
  font-weight:600;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  transition:color .2s ease;
}
.minimap__switch:hover .minimap__title,
.minimap__switch:hover .minimap__caret,
.minimap__switch:focus-visible .minimap__title{color:var(--white);}
.minimap__caret{
  width:10px;height:6px;flex:none;
  color:rgba(255,255,255,.6);   /* va amb el títol, no amb el nom del palau */
  transition:transform .2s ease,color .2s ease;
}
/* el chevron acompanya el títol "Selecciona un palau": avall en repòs i
   amunt quan el control ja ha obert alguna cosa (la llista en mòbil) o ha
   plegat els edificis */
.minimap.is-open .minimap__caret,
.minimap.is-collapsed .minimap__caret{transform:rotate(180deg);}
/* plegat: els edificis desapareixen, de manera que del minimapa només en
   queden el títol i el nom del palau */
.minimap.is-collapsed .minimap__art{height:0;margin-bottom:0;opacity:0;}
.minimap__list{
  display:none;                 /* amagat en desktop */
  position:absolute;
  top:100%;right:0;
  margin-top:10px;
  min-width:210px;
  padding:6px;
  background:var(--negro);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  z-index:10;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.minimap.is-open .minimap__list{
  opacity:1;
  visibility:visible;
  transform:none;
}
.minimap__list a{
  display:block;
  padding:11px 13px;
  border-radius:8px;
  font-size:13px;
  color:var(--white);
}
.minimap__list a:hover{background:rgba(255,255,255,.09);}
.minimap__list a.is-current{background:rgba(255,255,255,.13);font-weight:600;}

/* barra de controls */
/* controls en columna vertical, ancorats a la dreta (a tots els breakpoints)
   perquè no xoquin amb el carrusel d'elements a la cantonada esquerra.
   L'àudio va en una càpsula pròpia, separada de la resta de controls. */
.controls-stack{
  position:absolute;right:31px;bottom:41px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;
  gap:14px;
}
.controls{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;
  padding:14px 9px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.4);
  border-radius:70px;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.controls button{
  position:relative;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;
  background:transparent;
  transition:background .15s ease,transform .12s ease;
}
.controls button img{width:24px;height:24px;}
.controls button:hover{background:rgba(255,255,255,.22);}
.controls button:active{transform:scale(.86);}
.controls button.is-active{background:rgba(255,255,255,.32);}
/* càpsula de l'àudio, separada dels controls de vista. En repòs només s'hi
   veu el símbol de reproducció; en passar-hi per sobre (o mentre sona) la
   càpsula s'eixampla cap a l'esquerra i apareix el text "Audioguia". */
/* plegada fa exactament l'amplada de la columna de controls (34 + 9×2 = 52),
   de manera que les dues càpsules queden alineades i del mateix gruix */
.controls--content{
  padding:9px;
  transition:padding .32s cubic-bezier(.4,0,.2,1),background .2s ease;
}
/* només amb el rató a sobre (o amb el focus de teclat): en marxar-ne, es
   torna a plegar encara que l'àudio estigui sonant. El :hover va tancat
   dins de (hover:hover): en tàctil els navegadors deixen el hover
   "enganxat" després d'un toc i la càpsula quedava mig oberta, amb un
   buit entre el botó blanc i la vora dreta. */
@media (hover:hover){
  .controls--content:hover{padding:9px 18px 9px 9px;}
}
.controls--content:has(.audio-btn:focus-visible){padding:9px 18px 9px 9px;}
.controls .audio-btn{
  width:auto;height:auto;
  gap:0;
  border-radius:70px;
}
.controls .audio-btn,
.controls .audio-btn:hover,
.controls .audio-btn.is-active{background:transparent;}
.controls .audio-btn:hover .audio-btn__icon{transform:scale(1.06);}
.controls .audio-btn:active{transform:none;}
.controls .audio-btn:active .audio-btn__icon{transform:scale(.9);}
/* el símbol: cercle blanc ple, que és el que destaca sobre la imatge */
.audio-btn__icon{
  flex:none;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--white);
  color:var(--negro);
  transition:transform .12s ease;
}
.audio-btn__icon svg{width:14px;height:16px;display:block;}
.audio-btn__icon .ico-play{margin-left:2px;}   /* el triangle, òpticament centrat */
.audio-btn__icon .ico-pause{display:none;}
.audio-btn.is-active .ico-play{display:none;}
.audio-btn.is-active .ico-pause{display:block;}
/* el text surt d'entre el símbol i la vora: creix d'amplada alhora que
   entra en opacitat, així la càpsula no fa cap salt */
.audio-btn__label{
  max-width:0;
  margin-left:0;
  overflow:hidden;
  font-weight:600;
  font-size:15px;
  line-height:1;
  color:var(--white);
  white-space:nowrap;
  opacity:0;
  transform:translateX(-6px);
  transition:max-width .32s cubic-bezier(.4,0,.2,1),
             margin-left .32s cubic-bezier(.4,0,.2,1),
             opacity .24s ease .04s,
             transform .32s cubic-bezier(.4,0,.2,1);
}
@media (hover:hover){
  .controls--content:hover .audio-btn__label{
    max-width:140px;
    margin-left:10px;
    opacity:1;
    transform:none;
  }
}
.controls--content:has(.audio-btn:focus-visible) .audio-btn__label{
  max-width:140px;
  margin-left:10px;
  opacity:1;
  transform:none;
}
/* mentre sona, la càpsula s'omple una mica perquè es noti l'estat */
.controls--content:has(.audio-btn.is-active){background:rgba(255,255,255,.3);}
/* en tàctil no hi ha hover: el text s'hi queda sempre… fins que s'engega
   l'àudio per primer cop. Llavors el text ja ha fet la seva feina i la
   càpsula es replega, deixant només el botó de play/pausa (la classe
   audio-started la posa toggleAudio a viewer.js). */
@media (hover:none){
  .controls--content{padding:9px 18px 9px 9px;}
  .audio-btn__label{max-width:140px;margin-left:10px;opacity:1;transform:none;}
  .controls--content.audio-started{padding:9px;}
  .controls--content.audio-started .audio-btn__label{
    max-width:0;margin-left:0;opacity:0;transform:translateX(-6px);
  }
}
@media (prefers-reduced-motion:reduce){
  .controls--content,
  .audio-btn__label{transition:none;}
}

/* informació del pati — botó flotant sota el logotip. El `top` el calcula
   layoutInfoPanel() mesurant el logo, que canvia de mida segons pantalla. */
.viewer__info{
  position:absolute;top:150px;left:32px;z-index:4;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background .18s ease,transform .12s ease,opacity .2s ease,visibility .2s;
}
.viewer__info img{
  width:26px;height:26px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.viewer__info:hover{background:rgba(255,255,255,.32);}
.viewer__info:active{transform:scale(.9);}
/* mentre el panell és obert, el panell n'ocupa el lloc i el botó s'amaga.
   Amb visibility (no display) conserva la caixa, que és d'on layoutInfoPanel
   pren la cantonada on ha d'anar el panell. */
.viewer.info-open .viewer__info{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* elements destacats — carrusel */
.elements{
  position:absolute;left:40px;bottom:42px;z-index:3;
  display:flex;flex-direction:column;
  gap:14px;
}
/* títol a l'esquerra i les fletxes a la dreta, tots dos sobre la línia */
.elements__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:634px;
  max-width:100%;
}
.elements__head h2{
  margin:0;
  font-weight:500;
  font-size:21px;
  color:var(--white);
}
.elements__nav{
  display:flex;
  gap:8px;
  flex:none;
}
.elements__arrow{
  width:34px;height:34px;
  padding:0;border:0;background:none;
  transition:transform .2s ease,opacity .2s ease;
}
.elements__arrow img{width:100%;height:100%;}
/* la fletxa d'anar enrere és la mateixa, girada */
.elements__prev img{transform:scaleX(-1);}
.elements__arrow:hover{transform:scale(1.08);}
.elements__arrow:active{transform:scale(.94);}
.elements__line{
  width:634px;height:1px;
  background:rgba(255,255,255,.55);
}
.elements__row{
  display:flex;align-items:center;
}
.elements__viewport{
  width:636px;
  /* espai vertical perquè el hover (translateY -3px) i el marc actiu
     no es tallin amb l'overflow que retalla el carrusel en horitzontal */
  padding:8px 0;
  overflow:hidden;
}
.elements__track{
  display:flex;
  gap:18px;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.thumb{
  flex:0 0 200px;
  width:200px;height:112.5px;
  padding:0;
  border:1.5px solid rgba(255,255,255,.35);
  border-radius:10px;
  overflow:hidden;
  background:#1a2438;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb:hover{border-color:rgba(255,255,255,.75);transform:translateY(-3px);}
.thumb.is-active{border-color:var(--white);box-shadow:0 0 0 1px var(--white);}

/* panells (info / ajuda) */
.panel{
  position:absolute;z-index:6;
  width:420px;max-width:calc(100% - 64px);
  padding:30px 32px;
  background:rgba(9,27,57,.93);
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.panel.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
}
/* el panell d'informació ocupa la columna dreta: comença sota el minimapa
   i acaba just abans dels controls. Els valors exactes els posa
   layoutInfoPanel() a viewer.js mesurant-los; aquí hi ha els de reserva. */
/* S'obre just a sobre del botó (i) i a l'esquerra de la columna de
   controls. Els valors exactes els posa layoutInfoPanel() mesurant el
   botó, la barra i el minimapa; aquests són els de reserva. */
.panel--info{
  left:32px;
  right:auto;
  top:150px;
  bottom:auto;
  max-height:calc(100vh - 420px);
  display:flex;
  flex-direction:column;
}
.panel--help{right:95px;bottom:41px;width:320px;}
/* barreta d'arrossegar i fletxa de desplegar del full inferior:
   només existeixen en mòbil */
.panel__grip{display:none;}
.panel__expand{display:none;}
.panel__close{
  position:absolute;top:14px;right:16px;
  width:28px;height:28px;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.14);
  color:var(--white);
  font-size:15px;line-height:1;
  transition:background .15s ease;
}
.panel__close:hover{background:rgba(255,255,255,.3);}
.panel__kicker{
  margin:0 0 4px;
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.panel h3{
  margin:0 0 12px;
  font-weight:600;
  font-size:21px;
  padding-right:32px;
}
/* època de l'element (Barroc, segle XVII…) */
.panel__period{
  margin:-8px 0 12px;
  font-size:13px;
  font-style:italic;
  color:rgba(255,255,255,.62);
}
/* Foto de l'element, com a les fitxes del museu. Les fotos van de molt
   apaïsades (3,7) a molt verticals (0,63): limitant l'alçada, les verticals
   s'estrenyen i se centren en comptes d'estirar-se i empènyer el text
   fora del panell. Així es veuen senceres, sense retallar-les. */
.panel__photo{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:var(--photo-max,200px);
  margin:0 auto 14px;
  border-radius:8px;
}
/* el cos omple el panell i fa scroll si el text és llarg;
   el botó de tancar es queda fix a la cantonada */
.panel__body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
}
.panel p{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}
.panel ul{
  margin:4px 0 0;
  padding-left:18px;
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,.86);
}

/* ===========================================================
   Responsiu — el Figma és a 1440px; aquí només evitem que
   es trenqui en pantalles més petites.
   =========================================================== */
@media (max-width:1200px){
  .home__title{font-size:44px;line-height:50px;}
  .home__lead{font-size:18px;}
  .home__caption-text{font-size:24px;line-height:28px;}
}
/* ---------- tauleta ----------
   A aquestes amplades el carrusel arribava fins a x≈754 i el panell
   d'informació hi topava, cosa que l'obligava a enfilar-se sota el
   minimapa. Escurçant-los tots dos, el panell es pot quedar alineat amb
   el botó (i), que és on ha d'anar. */
@media (max-width:1100px){
  .elements__viewport{width:418px;}
  .elements__line{width:418px;}
  .elements__head{width:418px;}
}
@media (max-width:1200px){
  .panel--info{width:340px;}
}

/* logo compacte (80×80) en tauleta i mòbil */
@media (max-width:1024px){
  .brand{width:80px;height:80px;}
  /* el logo és més baix: el text pot pujar una mica */
  .home__left{padding-top:125px;}
  /* el minimapa a 330 px és massa ample en tauleta */
  .minimap{width:290px;padding:18px;gap:0;border-radius:11px;}
  .minimap__art{width:254px;height:60px;margin-bottom:10px;}
  .minimap__switch{margin-bottom:10px;}
  .minimap__title{font-size:11px;}
  .minimap__label{font-size:16px;}
  .minimap__index{font-size:11px;}
}

/* ---------- finestres baixes ----------
   La home es dimensiona a 100vh i el hero no fa scroll, així que en
   pantalles baixes (portàtils petits, navegador amb moltes barres) el
   text s'ha d'encongir per no quedar tallat ni xocar amb el logo. */
@media (max-height:820px){
  .home__title{font-size:42px;line-height:48px;}
  .home__lead{font-size:17px;line-height:26px;margin-top:16px;}
  .btn-pill{font-size:20px;line-height:26px;margin-top:26px;}
  .home__skyline{margin-top:24px;max-width:520px;}
  .home__caption{bottom:56px;}
}
@media (max-height:680px){
  /* un logo de 105 px desequilibra una finestra tan baixa, i a més no
     cabria dins del padding que reserva la columna de text */
  .brand{width:80px;height:80px;}
  .home__left{padding-top:118px;padding-bottom:24px;}
  .home__title{font-size:32px;line-height:38px;}
  .home__lead{font-size:15px;line-height:22px;margin-top:12px;}
  .btn-pill{font-size:18px;line-height:24px;margin-top:18px;padding:6px 18px;}
  .home__skyline{margin-top:16px;max-width:420px;}
  .skyline__name{margin-top:8px;font-size:12px;line-height:16px;}
  .home__caption{bottom:28px;}
  .home__caption-text{font-size:22px;line-height:26px;}
}
/* molt baixa (mòbil en horitzontal): els edificis són el primer que sobra */
@media (max-height:540px){
  .home__skyline{display:none;}
  .home__title{font-size:26px;line-height:31px;}
  .home__lead{font-size:14px;line-height:20px;}
}
/* ≤900 (tauleta portrait i mòbil): la home passa a un stack d'alçada
   natural amb scroll. Per sobre de 900px es manté el 2-columnes amb la
   imatge a la dreta, com a 1024/1440. */
@media (max-width:900px){
  /* tot el contingut dins de 100vh, sense scroll: contingut compacte a
     dalt i la imatge omplint la resta */
  .page-home{overflow:hidden;}
  .home{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    height:100vh;min-height:0;
  }
  .home__left{padding:148px 24px 28px;justify-content:flex-start;}
  .home__media{min-height:0;}
  .home__title{font-size:30px;line-height:36px;}
  .home__lead{font-size:15px;line-height:23px;margin-top:20px;}
  .btn-pill{font-size:20px;line-height:26px;margin-top:30px;padding:7px 20px;}
  /* edificis sota el botó, compactes */
  .home__skyline{margin-top:24px;max-width:420px;}
  .skyline__name{margin-top:10px;font-size:13px;line-height:18px;}
  .home__caption{left:20px;right:20px;bottom:20px;}
  .home__caption-text{font-size:20px;line-height:24px;}
  .ficha{padding:0;height:100vh;}
  .elements__viewport{width:418px;}
  .elements__line{width:418px;}
  .elements__head{width:418px;}
}

/* ---------- fitxa 360° en finestres baixes ----------
   La columna de controls fa uns 450 px. A més de xocar amb el minimapa en
   finestres baixes, s'menja la banda entre el minimapa i el botó (i), que
   és on s'obre el panell d'informació. Per això s'encongeix ja a partir de
   920 px d'alçada, que cobreix els portàtils de 900 cap avall. */
@media (max-height:920px){
  .minimap{top:22px;width:290px;padding:18px;gap:0;border-radius:11px;}
  .minimap__art{width:254px;height:60px;margin-bottom:10px;}
  .minimap__switch{margin-bottom:10px;}
  .minimap__title{font-size:11px;}
  .minimap__label{font-size:16px;}
  .minimap__index{font-size:11px;}
  .controls-stack{bottom:24px;gap:10px;}
  .controls{gap:9px;padding:11px 8px;}
  /* aquí els botons fan 30 i la columna 46 (30 + 8×2): la càpsula de
     l'àudio hi va a joc */
  .controls--content{padding:8px;}
  .controls--content:has(.audio-btn:focus-visible){padding:8px 16px 8px 8px;}
  .controls button{width:30px;height:30px;}
  .controls button img{width:21px;height:21px;}
  .controls .audio-btn{width:auto;height:auto;gap:0;}
  .audio-btn__icon{width:30px;height:30px;}
  .audio-btn__icon svg{width:12px;height:14px;}
  .audio-btn__label{font-size:14px;}
  .viewer__info{width:40px;height:40px;}
  .viewer__info img{width:23px;height:23px;}
  .elements{bottom:26px;}
}
/* el hover de la càpsula de l'àudio en finestres baixes, fora del bloc de
   dalt perquè només toca amb ratolí (en tàctil el hover queda enganxat) */
@media (max-height:920px) and (hover:hover){
  .controls--content:hover{padding:8px 16px 8px 8px;}
}
/* encara més baixa: el minimapa s'encongeix i les fletxes de gir marxen.
   Són prescindibles (el gir es fa arrossegant) i escurcen la columna 156 px,
   que és el que fa que hi càpiga el panell entre el minimapa i la (i). */
@media (max-height:720px){
  .minimap{width:238px;padding:14px;gap:0;}
  .minimap__art{width:210px;height:50px;margin-bottom:8px;}
  .minimap__switch{margin-bottom:8px;}
  .minimap__title{font-size:10px;}
  .minimap__label{font-size:15px;}
  .minimap__index{font-size:11px;}
  .controls [data-action="left"],
  .controls [data-action="right"],
  .controls [data-action="up"],
  .controls [data-action="down"]{display:none;}
}
/* molt baixa (mòbil en horitzontal): el gir ja es fa arrossegant, i els
   edificis del minimapa no s'hi veurien */
@media (max-height:560px){
  /* sense els edificis no hi ha hover que canviï el text: l'ample pot
     tornar a ser el del contingut */
  .minimap{width:auto;}
  .minimap__art{display:none;}
  .minimap__list{display:block;}
  .thumb{flex:0 0 150px;width:150px;height:84px;}
  .elements__head h2{font-size:17px;}
  /* aquí el panell no cap entre minimapa i controls: centrat i a la seva
     esquerra (ho respecta layoutInfoPanel, que en aquest cas no hi toca) */
  .panel--info{
    top:50%;bottom:auto;right:95px;
    width:380px;max-height:88vh;
    transform:translateY(-50%);
  }
  .panel--info.is-open{transform:translateY(-50%);}
}

/* ---------- Capçalera + fitxa 360° en mòbil ---------- */
@media (max-width:600px){
  /* header compacte (només el logo, 80×80) */
  .brand{width:80px;height:80px;top:16px;left:16px;}
  .site-header{height:112px;}
  .home__left{padding-top:116px;}
  /* dvh: l'alçada del que realment es veu. Amb 100vh, la barra del
     navegador mòbil tapa el peu de la pàgina i s'enduia part del full
     d'informació entreobert */
  .ficha{height:100vh;height:100dvh;}

  .viewer__info{left:16px;width:40px;height:40px;}
  .viewer__info img{width:23px;height:23px;}

  /* auto-amagar: la interfície es mostra en tocar i s'amaga sola,
     deixant la imatge neta */
  .minimap,
  .viewer__info,
  .controls-stack,
  .elements{
    transition:opacity .3s ease,visibility .3s;
  }
  .viewer.chrome-hidden .minimap,
  .viewer.chrome-hidden .viewer__info,
  .viewer.chrome-hidden .controls-stack,
  .viewer.chrome-hidden .elements{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  /* en mòbil, els edificis són massa petits i tapen la imatge:
     només deixem el nom del palau, que fa de selector de palau */
  .minimap{top:16px;right:16px;width:auto;padding:7px 13px;gap:0;background:rgba(0,0,0,.5);}
  .minimap__art{display:none;}
  .minimap__switch{margin-bottom:3px;}
  .minimap__title{font-size:10px;}
  .minimap__label{font-size:14px;}
  .minimap__index{font-size:10px;}
  .minimap__list{display:block;}

  /* controls: només els essencials (àudio, zoom, ajuda). El gir es fa
     arrossegant amb el dit, així que amaguem les fletxes de direcció.
     Columna centrada verticalment a la dreta, lluny del carrusel */
  .controls-stack{top:50%;bottom:auto;right:12px;transform:translateY(-50%);gap:10px;}
  .controls{gap:10px;}
  /* en mòbil els botons tornen a fer 34: la càpsula manté els 9 px de
     costat perquè les dues columnes segueixin alineades */
  .controls--content{padding:9px 16px 9px 9px;}
  .controls .audio-btn{gap:0;}
  .audio-btn__label{margin-left:9px;font-size:14px;}
  .controls [data-action="left"],
  .controls [data-action="right"],
  .controls [data-action="up"],
  .controls [data-action="down"]{display:none;}

  /* carrusel a tot l'ample amb scroll horitzontal (sense fletxa) */
  .elements{
    left:16px;right:16px;bottom:16px;gap:10px;
    transition:bottom .32s cubic-bezier(.4,0,.2,1),
               opacity .3s ease,visibility .3s;
  }
  .elements__line{width:100%;}
  .elements__head{width:100%;}
  .elements__nav{display:none;}
  .elements__row{gap:0;}
  .elements__viewport{
    width:100%;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;   /* ancoratge net; tots els ítems abastables */
  }
  .elements__viewport::-webkit-scrollbar{display:none;}
  .elements__track{transform:none !important;gap:12px;}
  .thumb{
    flex:0 0 150px;width:150px;height:84px;
    scroll-snap-align:start;
  }

  /* panell d'informació: full inferior (bottom sheet). Surt entreobert,
     mostrant només el títol; es desplega lliscant amunt o arrossegant la
     barreta, i es replega lliscant avall. El translateY del mode entreobert
     el calcula initInfoSheet() a viewer.js mesurant on acaba el títol. */
  .panel--info{
    top:auto;bottom:0;left:0;right:0;width:auto;
    max-width:none;
    max-height:72vh;                /* el cos (.panel__body) ja fa scroll */
    max-height:72dvh;
    padding:6px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0;
    border-left:0;border-right:0;border-bottom:0;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1),
               opacity .25s ease,visibility .25s;
  }
  .panel--info.is-open{transform:none;}   /* sense JS, el full surt sencer */
  .panel--info.is-dragging{transition:none;}
  /* entreobert: el cos queda sota el tall i no ha de fer scroll, i el gest
     de lliscar va sencer al full, no al navegador */
  .panel--info:not(.is-expanded){touch-action:none;}
  .panel--info:not(.is-expanded) .panel__body{overflow:hidden;}
  /* desplegat: el cos ha de poder fer scroll amb el dit */
  .panel--info.is-expanded .panel__body{
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
  }
  /* entreobert es mostra la fletxa de desplegar; desplegat, la creu */
  .panel--info .panel__expand{
    position:absolute;top:14px;right:16px;
    width:28px;height:28px;
    display:none;
    align-items:center;justify-content:center;
    padding:0;border:0;border-radius:50%;
    background:rgba(255,255,255,.14);
    color:var(--white);
    transition:background .15s ease;
  }
  .panel--info .panel__expand svg{width:12px;height:7px;}
  .panel--info:not(.is-expanded) .panel__expand{display:flex;}
  .panel--info:not(.is-expanded) .panel__close{display:none;}
  .panel--info h3{font-size:17px;}
  .panel--info .panel__grip{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:26px;
    margin:0 0 2px;
    padding:0;border:0;background:none;
    touch-action:none;
    cursor:grab;
  }
  .panel__grip-bar{
    width:42px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.45);
  }
  /* el carrusel s'aparta cap amunt mentre el full entreobert li tapa el peu
     (l'alçada del tram visible la posa initInfoSheet a --sheet-peek) */
  .viewer.info-open .elements{bottom:calc(var(--sheet-peek,96px) + 12px);}
  /* ajuda centrada verticalment (a l'esquerra dels controls) */
  .panel--help{left:16px;right:76px;top:50%;bottom:auto;width:auto;transform:translateY(-50%);}
  .panel--help.is-open{transform:translateY(-50%);}
}