/* ═══════════════════════════════════════════════════════════════════
   àvalos.cat — full d'estil únic
   1. Variables      2. Base       3. Capçalera    4. Menú
   5. Contingut      6. Peu        7. Adaptació a pantalles petites
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Variables ────────────────────────────────────────────────────
   Per canviar tota la gamma de colors del lloc només cal tocar aquí. */
:root {
  --fosc:        #1e3a42;   /* verd fosc dominant: capçalera i peu     */
  --fosc-clar:   #2c5560;   /* superfícies dins del fosc               */
  --accent:      #b23556;   /* el teu rosa fosc: enllaços i detalls    */
  --accent-fosc: #8d2743;   /* el mateix, per a estats de passada      */
  --paper:       #f3f6f6;   /* fons de la pàgina, fred, no crema       */
  --paper-pur:   #ffffff;   /* fons de l'àrea de text                  */
  --tinta:       #16242a;   /* text principal                          */
  --tinta-suau:  #5d7178;   /* text secundari, dades, peus             */
  --vora:        #d9e2e2;   /* línies i separacions                    */
  --taronja:      #ff5113;  /* el del logotip, per a fons clars         */
  --taronja-clar: #ff7a4d;  /* el mateix aclarit, per a text sobre fosc */

  --serif: "IBM Plex Serif", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
  --titol: "Saira", "Trebuchet MS", sans-serif;   /* només per al nom de la capçalera */

  --ample:  1060px;         /* amplada màxima del contingut            */
  --alt-barra: 48px;        /* alçada de la barra del títol; el JS l'ajusta */
  --radi:   6px;
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alt-barra) + 3.5rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--tinta);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; }
h1 { font-size: clamp(1.9rem, 1.25rem + 2vw, 2.5rem); margin: 0 0 1.2rem; }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem); margin: 2.4rem 0 .9rem; }
h3 { font-size: 1.1rem; margin: 1.8rem 0 .5rem; }

p { margin: 0 0 1.1rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-fosc); }

img { max-width: 100%; height: auto; display: block; }

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

.salta-al-contingut {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radi) 0;
}
.salta-al-contingut:focus { left: 0; top: 0; }

/* ── 3. Capçalera ────────────────────────────────────────────────── */
.capcalera {
  background: var(--fosc); color: #fff;
  position: sticky; top: 0; z-index: 30;
}

.capcalera__barra {
  /* Ocupa tota l'amplada: la marca sempre arran de l'esquerra i les
     icones arran de la dreta, a distància constant de les vores. */
  padding: .38rem 1.4rem .34rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

/* Logotip + nom, un sol enllaç cap a la portada */
.marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: #fff;
}
.marca__logo { width: 34px; height: 34px; flex: 0 0 auto; }
.marca__nom {
  font-family: var(--titol);
  font-weight: 500;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.42rem);
  letter-spacing: .005em;
  line-height: 1.1;
}
.marca:hover .marca__nom { color: #f4dbe1; }

/* Icones socials: SVG monocrom que hereta el color */
.xarxes { display: flex; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.xarxes a {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 5px;
  color: #93aeae;
  transition: color .18s, background .18s;
}
.xarxes svg { width: 17px; height: 17px; fill: currentColor; }
.xarxes a:hover { color: #fff; background: rgba(255,255,255,.11); }

.nomes-lectors {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Bàner: dues fotografies superposades que es fonen en passar-hi el ratolí,
   i que es desplega a alçada completa en clicar el tirador.
   Les imatges fan 1920×650 → la proporció completa és 33.85% de l'amplada. */
.baner-zona { container-type: inline-size; }

.baner {
  position: relative;
  overflow: hidden;
  background: var(--fosc);
  line-height: 0;
  height: clamp(200px, 22cqw, 380px);      /* panoràmic, per defecte */
  transition: height .55s cubic-bezier(.3,.7,.3,1);
  cursor: pointer;                         /* tota la imatge commuta */
}
.baner.desplegat { height: min(33.85cqw, 650px); }   /* imatge sencera */

.baner__foto {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  object-position: center top;
}

.baner__estiu {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .baner:hover .baner__estiu,
  .baner:focus-within .baner__estiu { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .baner, .baner__estiu { transition: none; }
}

/* Tirador per desplegar i replegar */
.tirador {
  position: absolute; right: clamp(.5rem, 2vw, 1.5rem); bottom: 0;
  display: flex; align-items: center; gap: .35rem;
  margin: 0; padding: .22rem .45rem .24rem;
  border: 0; border-radius: 4px 4px 0 0;
  background: rgba(22, 36, 42, .6);
  color: #d3e0e0;
  font: 400 .54rem/1 var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .2s, color .2s;
}
.tirador:hover { background: rgba(22, 36, 42, .88); color: #fff; }

.tirador__galo { transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.tirador[aria-expanded="true"] .tirador__galo { transform: rotate(180deg); }

.tirador__tancar { display: none; }
.tirador[aria-expanded="true"] .tirador__obrir  { display: none; }
.tirador[aria-expanded="true"] .tirador__tancar { display: inline; }

/* El lema va imprès a la imatge; el mantenim al codi per als lectors de pantalla */
.baner__lema {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── 4. Menú ─────────────────────────────────────────────────────── */
.menu { background: var(--fosc-clar); position: sticky; top: var(--alt-barra); z-index: 20; }

.menu__llista {
  max-width: var(--ample);
  margin: 0 auto; padding: 0 1rem;
  list-style: none;
  display: flex; flex-wrap: wrap;
}
.menu__llista a {
  display: block;
  padding: .7rem .85rem;
  color: #cfdcdc; text-decoration: none;
  font-size: .875rem; letter-spacing: .01em;
  border-bottom: 4px solid transparent;
  transition: background .18s, border-bottom-color .18s, color .18s;
}
/* El filet acompanya el cursor, però mig apagat: així la pestanya
   activa continua distingint-se mentre en recorres unes altres. */
.menu__llista a:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
  border-bottom-color: rgba(255,122,77,.5);
}
.menu__llista a[aria-current="page"] {
  color: #fff; border-bottom-color: var(--taronja-clar);
}

.menu__boto {
  display: none;
  width: 100%; padding: .8rem 1.2rem;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.15);
  color: #fff; font: 600 .95rem var(--sans); text-align: left;
  align-items: center; gap: .7rem; cursor: pointer;
}
.menu__ratlles { width: 20px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.menu__ratlles::before, .menu__ratlles::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.menu__ratlles::before { top: -6px; }
.menu__ratlles::after  { top:  6px; }

/* ── 5. Contingut ────────────────────────────────────────────────── */
.contingut {
  max-width: var(--ample);
  margin: 1.9rem auto 3.5rem;
  padding: 2.1rem clamp(1.2rem, 4vw, 3.2rem);
  background: var(--paper-pur);
  border: 1px solid var(--vora);
  border-radius: var(--radi);
}

/* Dades: cursos, dates, ISBN… tot el que és registre, en monoespaiada */
.dada {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--tinta-suau);
}

/* Bloc de presentació: text + retrat */
.presentacio { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3rem); }
.presentacio__retrat { margin: .4rem 0 0; }
.presentacio__retrat img { border-radius: var(--radi); }
.presentacio p { text-align: justify; hyphens: auto; }

.separador { border: 0; border-top: 1px solid var(--vora); margin: 2.5rem 0; }

/* ── 6. Peu ──────────────────────────────────────────────────────── */
.peu { background: var(--fosc); color: #dbe6e6; }

.peu__targetes {
  /* D'extrem a extrem de la finestra, com la barra del títol:
     així hi caben quatre targetes sense estrènyer-les. */
  padding: 3rem clamp(1.4rem, 3vw, 2.6rem) 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-template-rows: auto auto;          /* capçalera i text, per separat */
  gap: clamp(1.4rem, 2.4vw, 2.4rem);
  align-items: start;
}

/* Cada targeta ocupa les dues files de la graella del pare i n'hereta
   les alçades. Així les tres capçaleres fan el mateix alt i els tres
   paràgrafs arrenquen exactament a la mateixa línia. */
.targeta {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: .7rem;
}

.targeta__enllac {
  display: flex; align-items: center; gap: .9rem;
  text-decoration: none;
  min-height: 64px;                       /* recanvi si no hi ha subgrid */
}
.targeta__enllac img { flex: 0 0 64px; width: 64px; height: auto; }
.targeta__enllac h2 {
  margin: 0;
  font-family: var(--titol);
  font-weight: 500;
  font-size: 1.14rem; line-height: 1.25;
  letter-spacing: .005em;
  color: #fff;
}
.targeta__enllac:hover h2 { color: var(--taronja-clar); }

.targeta p {
  font-size: .92rem; line-height: 1.65; margin: 0; color: #b9cbcb;
  text-align: justify; hyphens: auto;
}

.peu__credit {
  margin: 0 clamp(1.4rem, 3vw, 2.6rem);
  padding: 1.6rem 0 2.2rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .04em;
  color: var(--taronja-clar); text-align: center;
}

/* ── 7. Pantalles petites ────────────────────────────────────────── */
@media (max-width: 820px) {
  .presentacio { grid-template-columns: 1fr; }
  .presentacio__retrat { order: -1; }
  .presentacio__retrat img { margin: 0 auto; }
}

@media (max-width: 700px) {
  .menu { position: static; }
  .menu__boto { display: flex; }
  .menu__llista { display: none; padding: .4rem 0 .8rem; flex-direction: column; }
  .menu__llista.obert { display: flex; }
  .menu__llista a { padding: .6rem 1.2rem; border-bottom: 0; border-left: 4px solid transparent; }
  .menu__llista a:hover { border-bottom-color: transparent; border-left-color: rgba(255,122,77,.5); }
  .menu__llista a[aria-current="page"] { border-left-color: var(--taronja-clar); }
  .contingut { margin: 1.2rem auto 2rem; border-radius: 0; border-left: 0; border-right: 0; }

  /* El text imprès a la imatge seria il·legible: retallem la foto i
     recuperem el lema com a text de debò. */
  .baner { height: 165px; }
  .baner.desplegat { height: min(33.85cqw, 260px); }
  .baner__foto { object-position: 22% center; }
  .tirador { right: .45rem; font-size: .52rem; padding: .2rem .4rem .22rem; }
  .baner__lema {
    position: static; width: auto; height: auto;
    margin: 0; padding: 1.1rem 1.2rem 1.3rem;
    overflow: visible; clip-path: none; white-space: normal;
    background: var(--fosc); color: #dbe6e6;
    font-family: var(--mono); font-size: .8rem; line-height: 1.6;
  }
}

/* ── 8. Fitxes de currículum ─────────────────────────────────────────
   Data a l'esquerra, en monoespaiada; contingut a la dreta.
   El filet vertical uneix les entrades d'una mateixa secció. */
.fitxes { margin: 0 0 1rem; }

.fitxa {
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  gap: 0 2rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--vora);
}
.fitxa:first-child { border-top: 0; }

.fitxa__data {
  margin: .15rem 0 0;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.55;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta-suau);
}

.fitxa__lloc {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--fosc);
}
.fitxa__lloc .ciutat { font-weight: 400; color: var(--tinta-suau); }

.fitxa__cos p { margin: 0 0 .8rem; text-align: justify; hyphens: auto; }
.fitxa__cos p:last-child { margin-bottom: 0; }

/* Variant amb imatge: data · miniatura · contingut */
.fitxa--amb-imatge { grid-template-columns: 12.5rem 92px 1fr; gap: 0 1.6rem; }
.fitxa__imatge { margin: .1rem 0 0; }
.fitxa__imatge img {
  width: 92px; height: 92px;
  object-fit: contain;                 /* logotips i fotos, sense retallar res */
  background: #f2f6f6;
  border: 1px solid var(--vora);
  border-radius: var(--radi);
  padding: 5px;
}

/* Seccions dins d'una pàgina de currículum */
.seccio { margin: 3rem 0 0; }
.seccio:first-of-type { margin-top: 1.5rem; }
.seccio > h2 {
  margin: 0 0 .25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--accent);
  color: var(--fosc);
}

@media (max-width: 700px) {
  .fitxa { grid-template-columns: 1fr; gap: .35rem; }
  .fitxa--amb-imatge { grid-template-columns: 68px 1fr; gap: .35rem 1rem; }
  .fitxa--amb-imatge .fitxa__data { grid-column: 1 / -1; }
  .fitxa__imatge img { width: 68px; height: 68px; }
  .fitxa__data { margin: 0; }
}

/* ── 9. Llistes de recursos i pertinences ────────────────────────── */
.llista { list-style: none; margin: 0 0 1rem; padding: 0; }
.llista > li {
  padding: .95rem 0;
  border-top: 1px solid var(--vora);
}
.llista > li:first-child { border-top: 0; }
.llista__nom { font-weight: 600; }
.llista__nom a { text-decoration: none; }
.llista__nom a:hover { text-decoration: underline; }
.llista p { margin: .25rem 0 0; font-size: .96rem; color: #46585f; }

/* ── 10. Graella de materials (Produccions) ──────────────────────── */
.materials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
  margin: 1.5rem 0 0;
}
/* Cada targeta ocupa dues files de la graella i n'hereta les alçades:
   així, dins d'una mateixa fila, tots els textos arrenquen igual. */
.material {
  display: grid;
  grid-row: span 3;               /* capçalera · text · accions */
  grid-template-rows: subgrid;
  gap: .9rem;
  padding: 1.2rem 1.3rem 1.2rem;
  background: #f7fafa;
  border: 1px solid var(--vora);
  border-radius: var(--radi);
}

.material__cap { display: flex; align-items: flex-start; gap: .85rem; }
.material__cap img { flex: 0 0 42px; width: 42px; height: auto; }

.material__titol { margin: 0; font-size: 1rem; line-height: 1.35; }
.material__titol a { text-decoration: none; }
.material__titol a:hover { text-decoration: underline; }
.material__tipus {
  display: block;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suau); margin-top: .3rem;
}

.material__text { margin: 0; font-size: .88rem; line-height: 1.6; }

.material__accions {
  margin: 0; align-self: end;
  padding-top: .7rem;
  border-top: 1px solid var(--vora);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .2rem .55rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .03em;
  color: var(--tinta-suau);
}
.material__accions a { white-space: nowrap; }
.material__accions a { text-transform: uppercase; text-decoration: none; font-weight: 500; }
.material__accions a:hover { text-decoration: underline; }


/* ── 11. Llibres (Lectures) ──────────────────────────────────────── */
.llibre {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0 1.8rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--vora);
}
.llibre:first-child { border-top: 0; }
.llibre__portada { margin: 0; }
.llibre__portada img { width: 100px; height: auto; border-radius: 3px; box-shadow: 0 2px 8px rgba(22,36,42,.18); }
.llibre__titol { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.llibre__autor { display: block; font-size: .95rem; font-weight: 400; font-style: italic; color: var(--accent); margin-top: .1rem; }
.llibre__edicio { margin: .45rem 0 .9rem; font-family: var(--mono); font-size: .74rem; line-height: 1.6; color: var(--tinta-suau); }
.llibre__resenya { margin: 0; text-align: justify; hyphens: auto; }

/* ── 12. Els meus webs ───────────────────────────────────────────── */
.webs { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 2.2rem; margin: 1.6rem 0 0; }
.web__captura { display: block; margin: 0 0 .8rem; }
.web__captura img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  border: 1px solid var(--vora); border-radius: var(--radi); }
.web__nom { margin: 0 0 .4rem; font-family: var(--titol); font-weight: 500; font-size: 1.12rem; }
.web__nom a { text-decoration: none; }
.web__nom a:hover { text-decoration: underline; }
.web p { margin: 0; font-size: .9rem; line-height: 1.65; text-align: justify; hyphens: auto; }

/* ── 13. Contacte ────────────────────────────────────────────────── */
.contactes {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 46rem;
}
.contactes a {
  display: flex; align-items: center; gap: 1rem; height: 100%;
  padding: 1rem 1.3rem;
  background: #f7fafa; border: 1px solid var(--vora); border-radius: var(--radi);
  text-decoration: none; color: var(--tinta);
  transition: border-color .18s, background .18s;
}
.contactes a:hover { border-color: var(--accent); background: #fff; }
.contactes svg { width: 22px; height: 22px; fill: var(--accent); flex: 0 0 auto; }
.contactes span { line-height: 1.45; }
.contactes b { font-family: var(--mono); font-weight: 500; font-size: .95rem; }
.contactes > li > a > span > :first-child { font-size: .82rem; color: var(--tinta-suau); }

@media (max-width: 700px) {
  /* En una sola columna el subgrid no alinea res i, en canvi, trenca:
     les targetes tornen a ser blocs normals apilats. */
  .material {
    grid-row: auto;
    grid-template-rows: none;
    display: flex; flex-direction: column;
  }
  .material__accions { margin-top: auto; }

  .llibre { grid-template-columns: 72px 1fr; gap: 0 1.1rem; }
  .llibre__portada img { width: 72px; }
  .material__cap img { flex: 0 0 36px; width: 36px; }
}

.llibres { margin: 1.6rem 0 0; }

/* ── 14. Pàgina de la versió anterior ────────────────────────────── */
.justificacio {
  max-width: 60ch;
  border-left: 3px solid var(--vora);
  padding-left: clamp(1rem, 3vw, 1.8rem);
  margin: 0 0 2.5rem;
}
.justificacio p { text-align: justify; hyphens: auto; }
.justificacio p:last-child { margin-bottom: 0; }

.anar-hi { margin: 0; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }

.boto {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.3rem;
  background: var(--fosc); color: #fff;
  border-radius: var(--radi);
  font-family: var(--titol); font-weight: 500; font-size: 1rem;
  text-decoration: none;
  transition: background .18s;
}
.boto:hover { background: var(--accent); color: #fff; }
.boto svg { opacity: .75; }

.anar-hi__nota {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .03em; color: var(--tinta-suau);
}

/* ── 14. Avís d'arxiu i botó ─────────────────────────────────────── */
.avis-arxiu {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.6rem 1.6rem;
  background: #f2f6f6;
  border: 1px solid var(--vora);
  border-left: 4px solid var(--taronja);
  border-radius: var(--radi);
}
.avis-arxiu p { font-size: .94rem; margin: 0; }
.avis-arxiu__accio { margin-top: 1.2rem !important; }

.boto {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.3rem;
  background: var(--fosc); color: #fff;
  border-radius: var(--radi);
  font-family: var(--titol); font-weight: 500; font-size: .95rem;
  text-decoration: none;
  transition: background .18s;
}
.boto:hover { background: var(--accent); color: #fff; }

/* ── 15. Comentari dels esdeveniments ────────────────────────────────
   Un distintiu discret al cantó de la miniatura. El text no es veu
   fins que s'hi passa el ratolí o es clica el distintiu. */
.fitxa--comentada { position: relative; }

/* Distintiu en forma d'exponent, enganxat al final del títol.
   Com que cada títol té una llargada diferent, no formen columna. */
/* Distintiu en forma de bafarada, com un exponent al final del títol.
   Com que cada títol té una llargada diferent, no formen columna. */
.nota__marca {
  display: inline-grid; place-items: center;
  vertical-align: super;
  margin-left: .45em;
  width: 22px; height: 22px; padding: 0;
  background: none; border: 0;
  cursor: pointer; line-height: 0;
  filter: drop-shadow(0 1px 1.5px rgba(22,36,42,.3));
  transition: transform .18s, filter .18s;
}
.nota__marca svg { width: 20px; height: 19px; display: block; overflow: visible; }
.fitxa--comentada:hover .nota__marca { transform: translateY(-1px) scale(1.14); }
.nota__marca:hover {
  transform: translateY(-1px) scale(1.14);
  filter: drop-shadow(0 2px 3px rgba(22,36,42,.4));
}
.nota__marca[aria-expanded="true"] {
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 1px 2px rgba(22,36,42,.45));
}

.nota {
  position: absolute; z-index: 15;
  left: 12.5rem; right: 0; top: calc(100% - .9rem);
  transform-origin: top center;
  padding: 1rem 1.2rem;
  background: #fffdf7;
  border: 1px solid #e8dfc9;
  border-left: 3px solid var(--taronja);
  border-radius: var(--radi);
  box-shadow: 0 8px 26px rgba(22,36,42,.18);
  opacity: 0; visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.nota p {
  margin: 0;
  font-size: .9rem; line-height: 1.6;
  color: #3d4a4f; text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .fitxa--comentada:hover .nota {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}
.nota.oberta { opacity: 1; visibility: visible; transform: translateY(0); }

/* Quan no hi ha prou espai a sota, la nota surt per sobre de la fitxa */
.nota--adalt {
  top: auto; bottom: calc(100% - .9rem);
  transform-origin: bottom center;
  transform: translateY(5px);
  border-left-width: 1px; border-left-color: #e8dfc9;
  border-right: 3px solid var(--taronja);
}
.fitxa--comentada:hover .nota--adalt,
.nota--adalt.oberta { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) { .nota { transition: none; } }

@media (max-width: 700px) {
  .nota {
    position: static; margin-top: .7rem;
    box-shadow: none; transform: none; display: none;
  }
  .nota.oberta { display: block; opacity: 1; visibility: visible; }
  .nota__marca { margin-left: .4em; width: 20px; height: 20px; }
  .nota__marca svg { width: 18px; height: 17px; }
}

/* ── 16. Cites ───────────────────────────────────────────────────── */
.cita {
  margin: 2.5rem 0 1.2rem;
  padding: 2.2rem clamp(1.4rem, 5vw, 3rem);
  background: #fffdf7;
  border: 1px solid #e8dfc9;
  border-left: 4px solid var(--taronja);
  border-radius: var(--radi);
}
.cita blockquote { margin: 0; }
.cita__text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.5;
  color: var(--fosc);
  transition: opacity .25s;
}
.cita__autor {
  margin-top: 1.2rem;
  text-align: right;
  font-family: var(--sans);
  font-style: italic;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.28rem);
  line-height: 1.35;
  color: #3f6470;
  transition: opacity .25s;
}
.cita__dates { color: #6b8590; font-size: .9em; white-space: nowrap; }

.cita.canviant .cita__text,
.cita.canviant .cita__autor { opacity: 0; }

.cita__accions { margin: 0; }

/* ── 17. Llibre de visites ────────────────────────────────────────
   La pastilla blanca conté només el títol i el botó, i es queda fixa.
   Els missatges van a sota, en una àrea amb desplaçament propi. */
.contingut--llibre {
  padding: 0;
  background: none; border: 0;
  margin-bottom: 2.5rem;
}

.llibre__capcalera {
  position: sticky; top: calc(var(--alt-barra) + 3rem);
  z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.5rem clamp(1.2rem, 4vw, 3.2rem) 1.6rem;
  background: var(--paper-pur);
  border: 1px solid var(--vora);
  border-radius: var(--radi);
}
.llibre__capcalera h1 { margin: 0; }

.llibre__llista {
  /* El marge de dalt és l'espai lliure entre la capçalera fixa i el
     primer missatge; el padding evita que el text toqui les vores. */
  margin-top: 1.8rem;
  padding: .2rem 0;
  max-height: calc(100vh - var(--alt-barra) - 16rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--vora) transparent;
}
.llibre__llista::-webkit-scrollbar { width: 9px; }
.llibre__llista::-webkit-scrollbar-thumb {
  background: #c3d2d2; border-radius: 5px;
  border: 2px solid var(--paper);
}
.llibre__llista:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.llibre__buit { padding-top: 1.6rem; color: var(--tinta-suau); }

/* El formulari, entre la capçalera i la llista */
.formulari {
  max-height: 0; overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s, margin .35s;
}
.formulari.obert { max-height: 48rem; opacity: 1; margin: 1.4rem 0 0; }
.formulari form {
  padding: 1.5rem clamp(1.2rem, 3vw, 1.8rem) 1.2rem;
  background: var(--paper-pur);
  border: 1px solid var(--vora);
  border-radius: var(--radi);
}
.formulari__nota {
  margin: 0 0 1.4rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--vora);
  font-size: .92rem; color: var(--tinta-suau);
}
.formulari__camp { margin: 0 0 1.1rem; }
.formulari__camp label {
  display: block; margin-bottom: .35rem;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-suau);
}
.formulari__camp .opcional { text-transform: none; letter-spacing: 0; }
.formulari textarea,
.formulari input[type="text"] {
  width: 100%; padding: .7rem .85rem;
  font: 400 1rem/1.6 var(--sans);
  color: var(--tinta); background: #fff;
  border: 1px solid var(--vora); border-radius: var(--radi);
}
.formulari textarea { resize: vertical; min-height: 8rem; }
.formulari textarea:focus,
.formulari input[type="text"]:focus { border-color: var(--accent); outline: none; }
.formulari__error {
  margin: 0 0 1rem; padding: .8rem 1rem;
  background: #fdf0f3; border-left: 3px solid var(--accent);
  border-radius: var(--radi); font-size: .92rem;
}
.formulari__parany {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Els missatges: cada un a la seva targeta */
.visita {
  margin-bottom: 1rem;
  padding: 1.5rem clamp(1.2rem, 3.5vw, 2rem) 1.3rem;
  background: var(--paper-pur);
  border: 1px solid var(--vora);
  border-left: 3px solid #c3d2d2;
  border-radius: var(--radi);
}
.visita:last-child { margin-bottom: .4rem; }
.visita__text { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--tinta); }
.visita__signatura {
  margin: 1rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--vora);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: flex-end;          /* signatura i hora, a la dreta */
  gap: .2rem .9rem;
}
.visita__nom {
  font-family: var(--sans); font-style: italic;
  font-size: 1.02rem; color: #3f6470;
}
.visita__nom--anonim { color: var(--tinta-suau); font-style: normal; font-size: .92rem; }
.visita__data {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .03em; color: var(--tinta-suau);
}

/* Moderació */
.visita--pendent {
  background: #fffdf7; border-color: #e8dfc9;
  border-left: 3px solid var(--taronja);
}
.visita__accions { margin: 1rem 0 0; display: flex; gap: .7rem; flex-wrap: wrap; }
.boto--discret { background: none; color: var(--tinta-suau); border: 1px solid var(--vora); }
.boto--discret:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.peu__pendents {
  display: inline-grid; place-items: center;
  vertical-align: super;
  margin-left: .5em;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--taronja); color: #fff;
  border-radius: 20px;
  font-family: var(--mono); font-weight: 500;
  font-size: .62rem; line-height: 1;
  box-shadow: 0 1px 3px rgba(22,36,42,.35);
  transition: transform .18s;
}
.targeta__enllac:hover .peu__pendents { transform: translateY(-1px) scale(1.12); }

@media (max-width: 700px) {
  /* A pantalla petita, res de desplaçament dins del desplaçament */
  .llibre__capcalera { position: static; }
  .llibre__llista { max-height: none; overflow: visible; margin-top: 1.4rem; }
  .visita { padding: 1.2rem 1.1rem 1.1rem; }
}