/* Community Oltre il Velo — foglio di stile
   Mondo visivo: l'acquerello dell'albero che Elisa usa già. Cielo azzurro-crema,
   foglie corallo e rosa, luce che sale da terra. Tutto chiaro, arioso, luminoso.
   Il fondo è un'immagine vera velata di bianco: i contenuti stanno su vetro. */

:root {
  /* colori presi dall'acquerello */
  --cielo: #bdd8e0;
  --cielo-tenue: #dcecf1;
  --crema: #fbf1e2;
  --crema-calda: #f7e3c8;
  --corallo: #ef9f9f;
  --rosa: #e58aa6;
  --rosa-acceso: #d96b95;
  --prugna: #6d4f68;
  --inchiostro: #453249;
  --inchiostro-tenue: #7a6a80;
  --oro: #c8a25f;

  /* le schede devono leggersi anche dove il fondo è quasi bianco:
     vetro più fitto, bordo più deciso, ombra che stacca davvero */
  --vetro: rgba(255, 255, 255, .9);
  --vetro-fitto: rgba(255, 255, 255, .95);
  --bordo: rgba(109, 79, 104, .2);
  --bordo-vivo: rgba(217, 107, 149, .42);
  --ombra: 0 14px 34px -14px rgba(69, 50, 73, .3), 0 2px 8px -3px rgba(69, 50, 73, .12);
  --ombra-alta: 0 26px 58px -20px rgba(69, 50, 73, .4), 0 3px 10px -3px rgba(69, 50, 73, .16);

  --raggio: 22px;
  --raggio-piccolo: 14px;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max: 1120px;
}

* { box-sizing: border-box; }

/* il crema sta sull'html: se lo mettiamo sul body, copre l'albero che sta dietro.
   overflow-x nascosto perché la copertina a tutto schermo usa 100vw, che sui
   desktop con la barra di scorrimento è qualche pixel più largo della pagina. */
html { background: #f7f3ee; overflow-x: hidden; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--inchiostro);
  background-color: transparent;
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── il cielo: l'immagine vera, velata perché il testo resti leggibile ── */
/* Lo sfondo è la coppia di acquerelli di Elisa: l'albero a sinistra e la sua
   gemella speculare a destra. Insieme riempiono qualsiasi larghezza senza dover
   ingrandire l'immagine, e il centro resta la foschia chiara dove sta il testo. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: .8;
  background:
    url('/img/sfondo-sinistra.webp') left bottom / auto 100% no-repeat,
    url('/img/sfondo-destra.webp') right bottom / auto 100% no-repeat,
    /* la foschia che cuce le due metà quando lo schermo è più largo di entrambe */
    linear-gradient(180deg, #d3dfe6 0%, #e6e0e4 42%, #f3e8de 74%, #f7ece0 100%);
}

/* su telefono una sola basta e riempie tutto */
@media (max-width: 820px) {
  body::before {
    background: url('/img/sfondo-sinistra.webp') center bottom / cover no-repeat;
  }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  /* velo che schiarisce il centro, dove sta il testo, e lascia vivi i bordi */
  background:
    radial-gradient(ellipse 78% 96% at 52% 48%,
      rgba(255, 255, 255, .78) 0%,
      rgba(255, 255, 255, .58) 40%,
      rgba(255, 255, 255, .3) 68%,
      rgba(255, 255, 255, .12) 86%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .18) 34%, rgba(251, 241, 226, .38) 100%);
}


/* Quando si sta nell'archivio il mondo e' notturno: il velo bianco del tema
   chiaro (body::after) passerebbe SOPRA il bosco e lo laverebbe via — misurato,
   il fondo veniva grigio-azzurro invece che notte. La classe la mette vaiA(). */
body.buio::before,
body.buio::after { display: none; }

/* ── tipografia ── */
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: .005em;
  color: var(--prugna);
  margin: 0 0 .45em;
}
h1 { font-size: clamp(2.3rem, 6.5vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); }

p { margin: 0 0 1.1em; }
a { color: var(--rosa-acceso); text-decoration: none; }
a:hover { text-decoration: underline; }

.occhiello {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}

.tenue { color: var(--inchiostro-tenue); }
.piccolo { font-size: .93rem; line-height: 1.6; }
.centro { text-align: center; }
.stretto { max-width: 660px; margin-left: auto; margin-right: auto; }

.contenitore { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ── il filo con il loto ── */
.filo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 44px 0;
  color: var(--oro);
}
.filo::before, .filo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 162, 95, .55), transparent);
}
.filo svg { width: 34px; height: 34px; flex: none; opacity: .8; }

/* ── vetro ── */
.scheda {
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 30px;
  box-shadow: var(--ombra);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.scheda:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); border-color: var(--bordo-vivo); text-decoration: none; }

.griglia { display: grid; gap: 20px; }
@media (min-width: 760px) { .griglia.due { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .griglia.tre { grid-template-columns: repeat(3, 1fr); } }

/* ── bottoni ── */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--corallo), var(--rosa-acceso));
  box-shadow: 0 12px 26px -10px rgba(217, 107, 149, .7);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.bottone:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 18px 34px -12px rgba(217, 107, 149, .8); text-decoration: none; }
.bottone:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.bottone.chiaro {
  color: var(--prugna);
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--bordo);
  box-shadow: var(--ombra);
}
.bottone.chiaro:hover { border-color: var(--bordo-vivo); }
.bottone.chiaro.scelta {
  color: #fff;
  background: linear-gradient(135deg, var(--corallo), var(--rosa-acceso));
  border-color: transparent;
}

/* ── campi ── */
.campo {
  width: 100%;
  padding: 17px 20px;
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--inchiostro);
  background: rgba(255, 255, 255, .84);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  outline: none;
  box-shadow: inset 0 1px 3px rgba(69, 50, 73, .05);
}
.campo:focus { border-color: var(--rosa); box-shadow: 0 0 0 4px rgba(229, 138, 166, .18); }
.campo::placeholder { color: var(--inchiostro-tenue); opacity: .75; }

.video { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--raggio-piccolo); background: rgba(255,255,255,.5); }

/* ── la barra in basso ─────────────────────────────────────────────────
   Una sola striscia da bordo a bordo: sei voci uguali, ben distanziate,
   nessuna bolla al centro. Vetro scuro con un filo d'oro sopra, cosi' sta
   bene sia sul crema della home sia sul bosco notturno. La voce attiva ha
   la lineetta d'oro; su telefono le etichette si accorciano (data-corto). */

.olv-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999999;
  display: flex; justify-content: center; align-items: stretch;
  padding: 0 clamp(6px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(18, 12, 24, .84) 0%, rgba(9, 6, 13, .97) 100%);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid rgba(214, 176, 106, .2);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, .35);
  font-family: 'Cinzel', Georgia, serif;
}
/* il filo d'oro che corre sul bordo alto */
.olv-nav::before {
  content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 200, 138, .85), transparent);
}
.olv-link {
  position: relative; flex: 1 1 0; max-width: 200px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  height: 74px; padding: 10px 4px 12px; text-decoration: none;
  color: rgba(214, 196, 170, .62);
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  transition: color .25s ease;
}
.olv-link svg { width: 23px; height: 23px; flex: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1), filter .3s ease; }
.olv-lab { display: block; white-space: nowrap; }
.olv-link:hover { color: #f2e6d2; text-decoration: none; }
.olv-link:hover svg { transform: translateY(-2px); }
.olv-link.olv-active { color: #f6e7c8; text-shadow: 0 0 12px rgba(214, 176, 106, .35); }
.olv-link.olv-active svg { transform: translateY(-2px); filter: drop-shadow(0 0 7px rgba(214, 176, 106, .8)); }
.olv-link.olv-active::after {
  content: ''; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e3c489, transparent);
  box-shadow: 0 0 10px rgba(214, 176, 106, .8);
}
@media (max-width: 600px) {
  .olv-nav { padding-left: 2px; padding-right: 2px; }
  .olv-link { height: 64px; gap: 5px; padding: 8px 2px 10px; font-size: 8px; letter-spacing: .06em; }
  .olv-link svg { width: 21px; height: 21px; }
  .olv-link.olv-active::after { bottom: 5px; width: 22px; }
}
@media (max-width: 460px) {
  /* etichette corte: sei voci ci stanno senza schiacciarsi */
  .olv-lab { font-size: 0; }
  .olv-lab::after { content: attr(data-corto); font-size: 8px; letter-spacing: .05em; }
}
@media (max-width: 380px) {
  /* telefoni stretti (360): con Personale le voci sono sei, senza spaziatura le etichette lunghe non si toccano */
  .olv-lab::after { letter-spacing: 0; }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .olv-nav { padding-bottom: env(safe-area-inset-bottom); }
  main { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

main { padding: 40px 0 120px; }

.sezione { display: none; }
.sezione.viva { display: block; animation: sale .45s cubic-bezier(.22, 1, .36, 1); }
/* L'animazione muove SOLO la posizione, mai l'opacita': se dovesse restare
   ferma sul primo fotogramma la sezione sarebbe comunque leggibile,
   invece che completamente invisibile. */
@keyframes sale { from { transform: translateY(14px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sezione.viva { animation: none; }
  .scheda, .registrazione, .bottone { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   LA LIBRERIA — lo scaffale scolpito nel tronco riempie tutto lo schermo.
   L'immagine e' fissa. I libri stanno nelle sue sei nicchie, posizionate in
   percentuale sull'immagine (misurata: 1023x1537). Per non sfalsarle, lo
   scaffale mantiene sempre il suo rapporto: dietro, una copia sfocata riempie
   i bordi quando lo schermo e' piu' largo.
   ══════════════════════════════════════════════════════════════════════ */

.libreria-piena {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -40px;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  padding: 26px 0 130px;
}
/* il bosco: sta fermo dietro e da' il contesto a tutta la pagina */
.libreria-piena::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('/img/bosco.webp') center / cover no-repeat;
}
/* un velo scuro appena accennato: stacca lo scaffale e copre l'eventuale morbidezza
   dell'immagine sugli schermi molto larghi */
.libreria-piena::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 70% at 50% 42%, rgba(0, 0, 0, 0) 0%, rgba(4, 10, 16, .55) 100%),
    linear-gradient(180deg, rgba(4, 10, 16, .3), rgba(3, 7, 12, .6));
}

.scaffale {
  position: relative;
  z-index: 2;
  flex: none;
  /* Cresce per riempire, ma mai oltre i 2400 px dell'immagine servita: piu' in la'
     si sgranerebbe. Il rapporto resta fisso, cosi' i ripiani non si spostano. */
  width: min(2400px, max(100vw, calc(100svh * 2400 / 3086)));
  aspect-ratio: 2400 / 3086;
  background: url('/img/scaffale.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7));
  /* le misure dell'insegna «Preghiere» seguono la larghezza dello scaffale (unità cqw) */
  container-type: inline-size;
}

/* I quattro ripiani, misurati sull'immagine. Due libri per ripiano. */
.posto {
  position: absolute;
  /* flex e non griglia: con la griglia la riga si allarga fino all'altezza
     naturale dell'immagine e le percentuali del libro si calcolano su quella */
  display: flex;
  align-items: flex-end;     /* i libri poggiano sul ripiano */
  justify-content: center;
}
.posto[data-lato="sx"] { left: 24.5%; width: 25.0%; }
.posto[data-lato="dx"] { left: 50.5%; width: 25.0%; }
.posto[data-lato="centro"] { left: 37.5%; width: 25.0%; }   /* una preghiera da sola, al centro del suo ripiano */
/* cambiando pagina i libri scivolano al loro posto (transizione: lo stato finale è quello normale) */
.posto { transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.posto.entra-dx { transform: translateX(32%); opacity: 0; }
.posto.entra-sx { transform: translateX(-32%); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .posto { transition: none; } }
/* l'altezza arriva fino al PAVIMENTO della mensola, non al bordo dell'ombra:
   cosi' il libro ci appoggia sopra invece di sfondarlo */
.posto[data-ripiano="1"] { top: 26.70%; height: 15.38%; }   /* pavimento 42.08% */
.posto[data-ripiano="2"] { top: 42.70%; height: 16.00%; }   /* pavimento 58.70% */
.posto[data-ripiano="3"] { top: 59.80%; height: 14.87%; }   /* pavimento 74.67% */
.posto[data-ripiano="4"] { top: 75.33%; height: 13.69%; }   /* pavimento 89.02% */

.libro {
  /* misure PIENE, non un tetto: senza un'altezza definita l'immagine dentro
     non sa a cosa riferirsi e sborda sotto la mensola */
  height: 74%;
  width: 62%;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .75));
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), filter .28s ease;
}
.libro img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
/* un bagliore caldo che va e viene, come le lanterne dello scaffale:
   dice che il libro si puo' aprire senza farlo levitare */
@keyframes bagliore {
  0%, 100% { filter: drop-shadow(0 10px 12px rgba(0,0,0,.75)) drop-shadow(0 0 6px rgba(255,196,110,.16)); }
  50%      { filter: drop-shadow(0 10px 12px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(255,196,110,.42)); }
}
.libro { animation: bagliore 4.2s ease-in-out infinite; }
.posto[data-lato="dx"] .libro { animation-delay: -1.4s; }
.posto[data-ripiano="2"] .libro { animation-delay: -2.3s; }
.posto[data-ripiano="3"] .libro { animation-delay: -3.2s; }
.posto[data-ripiano="4"] .libro { animation-delay: -0.7s; }
@media (prefers-reduced-motion: reduce) { .libro { animation: none; } }

.libro:hover, .libro:focus-visible {
  animation: none;
  transform: translateY(-8px) scale(1.05);
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .85)) brightness(1.1);
  outline: none;
}

/* il ripiano delle preghiere (v93): una luce calda appena accennata, come di candela... */
.luce-preghiere {
  position: absolute; left: 25%; width: 50%; top: 76%; height: 13.2%; pointer-events: none;
  background: radial-gradient(ellipse 58% 75% at 50% 88%, rgba(255, 196, 120, .24), rgba(255, 170, 90, .08) 55%, transparent 76%);
  mix-blend-mode: screen;
}
/* ...e sul cornicione in basso l'insegna «Preghiere», di legno come quella in cima («Biblioteca di Elisa») */
.insegna-preghiere {
  position: absolute; left: 50%; top: 89.35%; z-index: 1; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.1cqw; padding: .55cqw 3.3cqw 1cqw; pointer-events: none;
  border-radius: 48% / 50%;
  background:
    repeating-linear-gradient(177deg, rgba(0, 0, 0, .09) 0 .18cqw, transparent .18cqw .7cqw),
    repeating-linear-gradient(3deg, rgba(255, 214, 160, .05) 0 .1cqw, transparent .1cqw 1.1cqw),
    radial-gradient(ellipse 80% 90% at 50% 30%, #6e4629 0%, #533219 58%, #3b2211 100%);
  box-shadow:
    inset 0 0 0 .2cqw #2a170a, inset 0 0 0 .55cqw #8c5d36, inset 0 0 0 .75cqw #3a2211,
    inset 0 .5cqw 1.2cqw rgba(0, 0, 0, .55), 0 .7cqw 1.6cqw rgba(0, 0, 0, .65);
}
.insegna-preghiere .scritta {
  font-family: 'Great Vibes', 'Cormorant Garamond', cursive; font-size: 5.4cqw; line-height: 1.15; color: #f3dfc2;
  text-shadow: 0 .16cqw 0 rgba(0, 0, 0, .6), 0 -.07cqw 0 rgba(255, 238, 208, .28), 0 0 1.2cqw rgba(255, 200, 130, .25);
}
.insegna-preghiere .ramo { display: block; width: 3.2cqw; height: 3.2cqw; color: #e7cfa6; opacity: .9; }
.insegna-preghiere .ramo svg { display: block; width: 100%; height: 100%; }
.insegna-preghiere .ramo.dx { transform: scaleX(-1); }

/* le frecce: due nodi di legno ai lati di ogni parte (v93: a metà dei ripiani dei libri, e a metà di
   quello delle preghiere), accanto alle nicchie ma sempre dentro lo schermo; solo se c'è da scorrere */
.sfoglia {
  position: absolute; top: 50.7%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; z-index: 6;
  color: #f0dcb8;
  background: radial-gradient(circle at 34% 28%, #7a5330 0%, #4a3119 58%, #2a1a0d 100%);
  border: 1px solid rgba(226, 195, 140, .5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 226, 176, .22);
  transition: transform .2s ease, filter .2s ease;
}
.sfoglia:hover { filter: brightness(1.18); transform: translateY(-50%) scale(1.07); }
.sfoglia:disabled { opacity: .28; cursor: not-allowed; }
.sfoglia[hidden] { display: none; }
.sfoglia svg { width: 22px; height: 22px; }
.sfoglia.giu { top: 82.2%; }
.sfoglia.prima { left: max(calc((100% - 100vw) / 2 + 12px), calc(24.5% - 66px)); }
.sfoglia.dopo  { right: max(calc((100% - 100vw) / 2 + 12px), calc(24.5% - 66px)); }
@media (max-width: 640px) {
  .sfoglia { width: 44px; height: 44px; }
  .sfoglia.prima { left: max(calc((100% - 100vw) / 2 + 6px), calc(24.5% - 52px)); }
  .sfoglia.dopo  { right: max(calc((100% - 100vw) / 2 + 6px), calc(24.5% - 52px)); }
}

/* ── l'estratto nella scena ───────────────────────────────────────────
   Scena scura: leggio e lanterna a sinistra, buio profondo a destra dove
   scorre il testo. Misurato: il crema sul fondo scuro fa 16,1:1 di contrasto
   (sul pannello chiaro faceva 1,1:1, illeggibile). Niente copertina: solo
   le parole. Solo transizioni con stato finale dichiarato. */

.tomo {
  position: fixed; inset: 0; z-index: 999999;
  display: none; overflow-y: auto;
  background: #07050a;
}
.tomo.aperto { display: block; opacity: 1; }

.vetrina { position: relative; width: 100%; min-height: 100svh; display: grid; place-items: center; }
.vetrina::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background: url('/img/leggio.webp') center / cover no-repeat;
  filter: blur(52px) brightness(.34);
  transform: scale(1.14);
}

.vt-scena {
  position: relative;
  width: min(1600px, 100vw);
  aspect-ratio: 1672 / 941;
  background: url('/img/leggio.webp') center / cover no-repeat;
}

/* la copertina appoggiata sul leggio: inclinata come il piano (misurato 4,5°)
   e leggermente coricata, cosi' sembra posata sopra e non appesa davanti */
.vt-volume {
  position: absolute;
  left: 14.2%; width: 12%;
  top: 35.5%;
  transform: rotate(6deg) skewY(4.5deg);
  opacity: 0; transition: opacity .5s ease .06s;
}
.tomo.aperto .vt-volume { opacity: 1; }
.vt-volume img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(4px 12px 14px rgba(0, 0, 0, .85));
}

.vt-parola {
  position: absolute;
  left: 48%; right: 6%;
  top: 50%; transform: translateY(-50%);
  max-height: 88%;
  overflow-y: auto; scrollbar-width: none;
  opacity: 0; transition: opacity .55s ease .12s;
}
.vt-parola::-webkit-scrollbar { width: 0; }
.tomo.aperto .vt-parola { opacity: 1; }

.vt-occhiello {
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(.54rem, .78vw, .68rem); font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase;
  color: #d8ab63; margin: 0 0 14px;
}
.vt-titolo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.06;
  color: #fbf1e0; margin: 0;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .85);
}
.vt-filo {
  display: block; width: 88px; height: 1px; margin: 20px 0 22px;
  background: linear-gradient(90deg, #d8ab63, rgba(216, 171, 99, 0));
}
.vt-corpo {
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(.92rem, 1.16vw, 1.1rem);
  line-height: 1.58; color: #ece1d0;
  max-width: 44ch;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .9);
}
.vt-corpo p { margin: 0 0 .7em; }
.vt-corpo p:last-child { margin-bottom: 0; }

.vt-invito {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 26px; padding: 13px 28px;
  border-radius: 999px;
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(.74rem, .95vw, .88rem); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: #f7e3bd;
  background: linear-gradient(160deg, rgba(104, 70, 34, .92), rgba(46, 29, 13, .94));
  border: 1px solid rgba(216, 171, 99, .5);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 219, 160, .18);
  transition: gap .25s ease, filter .25s ease, border-color .25s ease;
}
.vt-invito svg { width: 17px; height: 17px; }
.vt-invito:hover { gap: 18px; filter: brightness(1.2); border-color: #e8c88a; text-decoration: none; }

.tomo-chiudi {
  position: fixed; top: 22px; right: 24px; z-index: 10;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  color: #d8ab63;
  background: rgba(20, 12, 5, .72);
  border: 1px solid rgba(216, 171, 99, .42);
  transition: color .2s ease, border-color .2s ease, transform .25s ease;
}
.tomo-chiudi svg { width: 19px; height: 19px; }
.tomo-chiudi:hover { color: #fff5e2; border-color: #e8c88a; transform: rotate(90deg); }

/* ══ TELEFONO: scena verticale — buio in alto per il testo, leggio in basso ══ */
@media (max-width: 860px) {
  .vetrina { display: block; min-height: auto; }
  .vetrina::before { background-image: url('/img/leggio-vert.webp'); }
  .vt-scena {
    width: 100vw;
    aspect-ratio: 864 / 1821;
    background-image: url('/img/leggio-vert.webp');
    background-size: cover;
    background-position: center;
    min-height: 100svh;
  }
  /* il testo sta nel buio in alto, sopra il leggio */
  /* il riquadro non scorre: scorre SOLO il testo, cosi' l'invito
     resta sempre a schermo invece di finire sotto la piega */
  .vt-parola {
    left: 7%; right: 7%;
    top: 4%; bottom: auto; transform: none;
    max-height: 60%;
    overflow: hidden;
    display: flex; flex-direction: column;
    text-align: center;
  }
  .vt-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .vt-corpo::-webkit-scrollbar { width: 0; }
  .vt-invito { flex: none; align-self: center; }
  .vt-occhiello { font-size: .6rem; letter-spacing: .32em; margin-bottom: 12px; }
  .vt-titolo { font-size: clamp(1.8rem, 7.6vw, 2.4rem); }
  .vt-filo {
    margin: 18px auto 20px;
    background: linear-gradient(90deg, rgba(216,171,99,0), #d8ab63, rgba(216,171,99,0));
  }
  .vt-corpo { font-size: 1.06rem; line-height: 1.55; max-width: none; }
  .vt-volume {
    left: 27%; width: 21%;
    top: 75.5%;
    transform: rotate(5deg) skewY(4deg);
  }
  .vt-invito { margin-top: 22px; padding: 14px 28px; font-size: .8rem; }
  .tomo-chiudi { top: 16px; right: 16px; }
}

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

/* da telefono lo schermo e' piccolo: i libri crescono un po' per restare leggibili */
@media (max-width: 640px) {
  .libro { height: 82%; width: 72%; }
}

/* ══════════════════════════════════════════════════════════════════════
   L'ARCHIVIO — le registrazioni.
   Stesso mondo della biblioteca: il bosco di notte, il legno, l'oro.
   Ogni serata e' una tavoletta di legno inciso appoggiata nel buio.

   Il 3D qui e' STRUTTURALE prima che animato, cosi' si vede anche in una
   foto ferma: le tavolette stanno su una superficie curva (chi e' in alto
   si corica all'indietro, chi e' in basso viene avanti) e hanno uno
   spessore vero, due bordi di legno piegati a 90 gradi nello spazio.
   Il movimento e' solo il di piu': lo scorrimento le ruota, il dito le
   preme, il mouse le inclina. Lo stato di riposo e' sempre dichiarato
   (0 gradi): se il codice non gira, resta tutto dritto e leggibile.
   ══════════════════════════════════════════════════════════════════════ */

#s-registrazioni {
  --oro-vivo: #d6b06a;
  --oro-tenue: rgba(214, 176, 106, .34);
  --crema-scritta: #f2e6d2;
  --crema-tenue: #bfa98c;
}

/* il bosco: fermo dietro, come nella biblioteca */
#s-registrazioni.viva::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('/img/bosco.webp') center / cover no-repeat;
}
/* la notte: un velo leggero, il bosco deve vedersi (i pannelli hanno il loro fondo) */
#s-registrazioni.viva::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 74% 68% at 50% 36%, rgba(0, 0, 0, .06) 0%, rgba(3, 6, 10, .5) 100%),
    linear-gradient(180deg, rgba(4, 8, 13, .28), rgba(2, 4, 8, .62));
}
/* sul telefono (schermo in verticale) il bosco e' quello disegnato apposta in verticale:
   alberi e lanterne ai lati, il sentiero al centro, fermo dietro mentre si scorre */
@media (max-aspect-ratio: 4/5) {
  #s-registrazioni.viva::before, .sezione.notte.viva::before { background-image: url('/img/bosco-verticale.webp'); background-position: center top; }
}

/* la colonna: mai attaccata ai bordi, ne' sopra ne' sotto */
.arc {
  position: relative;
  z-index: 1;
  padding: clamp(30px, 6vw, 64px) clamp(6px, 2.4vw, 30px) 150px;
}

/* ── la testata ─────────────────────────────────────────────────────── */
.arc-testata { text-align: center; margin-bottom: clamp(30px, 5vw, 52px); }

.arc-occhiello {
  margin: 0 0 14px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--oro-vivo);
}
/* il filo d'oro sotto l'occhiello */
.arc-occhiello::after {
  content: '';
  display: block;
  width: 74px;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--oro-vivo), transparent);
}

.arc-titolo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.6vw, 3.9rem);
  line-height: 1.06;
  color: var(--crema-scritta);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .75);
}

.arc-titolo.grande { font-size: clamp(2.9rem, 9vw, 5rem); font-weight: 400; letter-spacing: .01em; }
/* la piccola cornice separatoria sotto il titolo: lo stesso filo d'oro dell'occhiello, con un punto in mezzo */
.arc-fregio { position: relative; display: block; width: 150px; height: 1px; margin: 22px auto 0; background: linear-gradient(90deg, transparent, var(--oro-vivo), transparent); }
.arc-fregio::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); background: var(--oro-vivo); box-shadow: 0 0 10px rgba(214, 176, 106, .7); }
.arc-guida {
  max-width: 30em;
  margin: 16px auto 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(1rem, 2.5vw, 1.14rem);
  line-height: 1.68;
  color: var(--crema-tenue);
}

/* ── i comandi: ricerca e ordinamento ───────────────────────────────── */
.arc-comandi {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(22px, 3.6vw, 34px);
}

.arc-cerca {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
  display: flex;
  align-items: center;
}
.arc-cerca svg {
  position: absolute;
  left: 18px;
  width: 19px; height: 19px;
  color: var(--oro-vivo);
  opacity: .8;
  pointer-events: none;
}
.arc-cerca input {
  width: 100%;
  padding: 15px 20px 15px 50px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.05rem;
  color: var(--crema-scritta);
  background: rgba(12, 9, 7, .62);
  border: 1px solid var(--oro-tenue);
  border-radius: 4px;
  outline: none;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.arc-cerca input::placeholder { color: rgba(191, 169, 140, .62); }
.arc-cerca input:focus {
  border-color: rgba(214, 176, 106, .78);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6), 0 0 0 3px rgba(214, 176, 106, .13);
}
.arc-cerca input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.arc-vista {
  display: inline-flex;
  padding: 4px;
  gap: 3px;
  border: 1px solid var(--oro-tenue);
  border-radius: 4px;
  background: rgba(12, 9, 7, .62);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6);
}
.arc-vista button {
  padding: 11px 22px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Cinzel', Georgia, serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crema-tenue);
  background: transparent;
  transition: color .22s ease, background .22s ease;
}
.arc-vista button:hover { color: var(--crema-scritta); }
.arc-vista button.scelto {
  color: #241a12;
  background: linear-gradient(180deg, #e3c489, #c39d55);
  box-shadow: 0 1px 0 rgba(255, 240, 214, .5) inset, 0 4px 12px -4px rgba(0, 0, 0, .8);
}

/* ── le targhette degli argomenti ───────────────────────────────────── */
.arc-temi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: clamp(30px, 5vw, 50px);
}
.arc-temi:empty { display: none; }

.arc-temi button {
  padding: 10px 20px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--crema-tenue);
  border: 1px solid rgba(214, 176, 106, .26);
  border-radius: 3px;
  /* legno inciso: venatura finissima piu' un rilievo in alto */
  background:
    linear-gradient(180deg, rgba(255, 226, 178, .09), rgba(0, 0, 0, .3)),
    linear-gradient(135deg, #33251a, #241a12);
  box-shadow: 0 1px 0 rgba(255, 224, 176, .1) inset, 0 6px 16px -8px rgba(0, 0, 0, .85);
  transition: color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.arc-temi button:hover {
  color: var(--crema-scritta);
  border-color: rgba(214, 176, 106, .55);
  transform: translateY(-2px);
}
.arc-temi button.scelto {
  color: #241a12;
  border-color: rgba(240, 214, 160, .85);
  background: linear-gradient(180deg, #e8cd97, #c49e57);
  box-shadow: 0 1px 0 rgba(255, 244, 220, .6) inset, 0 10px 22px -10px rgba(214, 176, 106, .55);
}

/* ── il capo di ogni argomento ──────────────────────────────────────── */
.arc-gruppo { margin-bottom: clamp(38px, 6vw, 64px); }

.arc-capo {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  color: var(--crema-scritta);
}
/* il filo d'oro che corre fino al bordo */
.arc-capo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--oro-tenue), transparent);
}
.arc-capo em {
  flex: none;
  order: 3;
  font-family: 'Cinzel', Georgia, serif;
  font-style: normal;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-vivo);
  opacity: .85;
}

/* ── la griglia ─────────────────────────────────────────────────────── */
.arc-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(20px, 2.6vw, 30px);
  /* respiro perche' le tavolette, inclinandosi, escono un po' dal loro posto */
  padding: 10px 2px 26px;
}

/* ── la tavoletta ───────────────────────────────────────────────────── */
.arc-scheda {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  /* lo spazio 3D e' di ogni tavoletta: cosi' ognuna ha il suo punto di fuga
     e nessuna si deforma per colpa di dove sta nella griglia */
  transform-style: preserve-3d;
  transform:
    perspective(1200px)
    rotateX(calc(var(--incX, 0deg) + var(--mX, 0deg)))
    rotateY(var(--mY, 0deg))
    translateZ(var(--dz, 0px));
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
/* mentre il mouse la sta guidando deve seguirlo, non inseguirlo */
.arc-scheda.segue { transition: transform .08s linear; }
.arc-scheda:focus-visible { outline: 2px solid var(--oro-vivo); outline-offset: 6px; }

/* i due spessori di legno: piegati di 90 gradi dentro lo schermo, si vedono
   quando la tavoletta si corica — sopra se si allontana, sotto se viene avanti */
.arc-scheda::before,
.arc-scheda::after {
  content: '';
  position: absolute;
  left: 5px; right: 5px;
  height: 15px;
  pointer-events: none;
}
.arc-scheda::before {
  bottom: 100%;
  transform: rotateX(90deg);
  transform-origin: bottom center;
  background: linear-gradient(0deg, #5c4530 0%, #33251a 60%, #1a120c 100%);
}
.arc-scheda::after {
  top: 100%;
  transform: rotateX(-90deg);
  transform-origin: top center;
  background: linear-gradient(180deg, #503a27 0%, #2b1f16 58%, #140e09 100%);
}

/* la lastra: il legno vero, con la cornice d'oro incisa dentro */
.arc-lastra {
  position: relative;
  display: block;
  padding: 26px 26px 22px;
  border: 1px solid rgba(214, 176, 106, .2);
  border-radius: 4px;
  /* legno: luce dall'alto a sinistra, venatura, fondo scuro */
  background:
    linear-gradient(150deg, rgba(255, 224, 176, .1) 0%, rgba(255, 224, 176, 0) 42%),
    repeating-linear-gradient(94deg,
      rgba(0, 0, 0, .06) 0 2px, rgba(255, 236, 204, .014) 2px 6px),
    linear-gradient(160deg, #3b2b1f 0%, #2b1f16 48%, #1f1610 100%);
  box-shadow:
    0 1px 0 rgba(255, 228, 182, .14) inset,
    0 -1px 0 rgba(0, 0, 0, .5) inset,
    0 26px 46px -22px rgba(0, 0, 0, .92);
  transition: box-shadow .4s ease, border-color .3s ease;
}
/* la cornice incisa, un filo d'oro rientrato dal bordo */
.arc-lastra::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(214, 176, 106, .16);
  border-radius: 2px;
  pointer-events: none;
  transition: border-color .3s ease;
}
.arc-scheda:hover .arc-lastra,
.arc-scheda:focus-visible .arc-lastra {
  border-color: rgba(214, 176, 106, .5);
  box-shadow:
    0 1px 0 rgba(255, 228, 182, .2) inset,
    0 -1px 0 rgba(0, 0, 0, .5) inset,
    0 40px 66px -26px rgba(0, 0, 0, .95),
    0 0 46px -14px rgba(214, 176, 106, .3);
}
.arc-scheda:hover .arc-lastra::before { border-color: rgba(214, 176, 106, .4); }

/* la riga alta: la data incisa e il disco per far partire */
.arc-alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.arc-data {
  font-family: 'Cinzel', Georgia, serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-vivo);
  opacity: .92;
}
.arc-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(214, 176, 106, .45);
  background: rgba(214, 176, 106, .08);
  color: var(--oro-vivo);
  transition: background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.arc-play svg { width: 13px; height: 13px; margin-left: 2px; }
.arc-scheda:hover .arc-play {
  background: linear-gradient(180deg, #e8cd97, #c49e57);
  color: #241a12;
  transform: scale(1.08);
  box-shadow: 0 0 22px -4px rgba(214, 176, 106, .6);
}

.arc-tit {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.42rem, 2.9vw, 1.72rem);
  line-height: 1.18;
  color: var(--crema-scritta);
  transition: color .28s ease;
}
.arc-scheda:hover .arc-tit { color: #fdf3e2; }

.arc-som {
  display: block;
  margin-top: 10px;
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.03rem;
  line-height: 1.62;
  color: var(--crema-tenue);
}

.arc-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(214, 176, 106, .14);
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(214, 176, 106, .72);
}

/* la serata senza video: si vede che c'e', ma non si preme */
.arc-scheda.muta { cursor: default; }
.arc-scheda.muta .arc-lastra { opacity: .62; }
.arc-attesa {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(191, 169, 140, .6);
}

/* ── messaggi ───────────────────────────────────────────────────────── */
.arc-vuoto {
  padding: 60px 20px;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.1rem;
  color: var(--crema-tenue);
}

/* ── telefono ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .arc { padding: clamp(24px, 7vw, 40px) 4px 150px; }
  .arc-griglia { grid-template-columns: 1fr; gap: 18px; }
  .arc-lastra { padding: 22px 20px 20px; }
  .arc-comandi { gap: 10px; }
  .arc-cerca { flex: 1 1 100%; max-width: none; }
  .arc-vista { width: 100%; }
  .arc-vista button { flex: 1; padding: 12px 10px; }
  .arc-capo { gap: 12px; }
}

/* chi non vuole il movimento non lo ha: resta lo spessore, sparisce la curva */
@media (prefers-reduced-motion: reduce) {
  .arc-scheda { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   v17 — L'ARCHIVIO A CARTELLE, IL LETTORE CON L'INDICE, LE MEDITAZIONI
   Le regole di sempre: il 3D e' strutturale e lo stato di riposo e' 0 gradi;
   niente animazioni a fotogrammi sull'opacita'; contrasto misurato (crema
   su legno scuro). Le tinte delle cartelle sono terne RGB, cosi' si usano
   dentro rgba() a qualsiasi trasparenza.
   ══════════════════════════════════════════════════════════════════════ */


/* le aree notturne condividono il bosco e la notte (registrazioni + meditazioni) */
#s-meditazioni {
  --oro-vivo: #d6b06a;
  --oro-tenue: rgba(214, 176, 106, .34);
  --crema-scritta: #f2e6d2;
  --crema-tenue: #bfa98c;
}
.sezione.notte.viva::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background: url('/img/bosco.webp') center / cover no-repeat;
}
.sezione.notte.viva::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 74% 68% at 50% 36%, rgba(0, 0, 0, .06) 0%, rgba(3, 6, 10, .5) 100%),
    linear-gradient(180deg, rgba(4, 8, 13, .28), rgba(2, 4, 8, .62));
}

.arc-corpo[hidden] { display: none; }
.arc-blocco { margin-bottom: clamp(40px, 6vw, 70px); }

/* le tinte: una per cartella */
[data-tinta="aldila"], [data-cartella="aldila"]         { --tinta: 111, 91, 214; }
[data-tinta="segni"], [data-cartella="segni"]           { --tinta: 91, 143, 214; }
[data-tinta="lasciare"], [data-cartella="lasciare"]     { --tinta: 214, 122, 160; }
[data-tinta="medianita"], [data-cartella="medianita"]   { --tinta: 214, 162, 91; }
[data-tinta="domande"], [data-cartella="domande"]       { --tinta: 91, 191, 176; }
[data-tinta="raccontami"], [data-cartella="raccontami"] { --tinta: 194, 91, 111; }
[data-tinta="evento"], [data-cartella="evento"]         { --tinta: 224, 192, 112; }

/* il legno, una volta sola */
.reg-lastra, .med-lastra, .cart-fondo, .cart-testa {
  background:
    linear-gradient(150deg, rgba(255, 224, 176, .1) 0%, rgba(255, 224, 176, 0) 42%),
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .06) 0 2px, rgba(255, 236, 204, .014) 2px 6px),
    linear-gradient(160deg, #3b2b1f 0%, #2b1f16 48%, #1f1610 100%);
}

/* ── tutto cio' che e' in rilievo: stessa trasformazione, stesse variabili ── */
.tre-d {
  position: relative;
  transform-style: preserve-3d;
  transform:
    perspective(1400px)
    rotateX(calc(var(--incX, 0deg) + var(--mX, 0deg)))
    rotateY(var(--mY, 0deg))
    translateZ(var(--dz, 0px));
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.tre-d.segue { transition: transform .08s linear; }
.tre-d:focus-visible { outline: 2px solid var(--oro-vivo); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .tre-d { transition: none; } }

/* ── la scheda di una serata: anteprima a sinistra, parole a destra ── */
.reg-lista { display: grid; gap: clamp(16px, 2.2vw, 24px); }
.reg-lista.ultime { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.reg {
  display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
  border: 0; background: none; color: inherit; font: inherit;
}
/* lo spessore del legno, piegato nello spazio */
.reg::before, .reg::after, .med::before, .med::after {
  content: ''; position: absolute; left: 5px; right: 5px; height: 14px; pointer-events: none;
}
.reg::before, .med::before {
  bottom: 100%; transform: rotateX(90deg); transform-origin: bottom center;
  background: linear-gradient(0deg, #5c4530 0%, #33251a 60%, #1a120c 100%);
}
.reg::after, .med::after {
  top: 100%; transform: rotateX(-90deg); transform-origin: top center;
  background: linear-gradient(180deg, #503a27 0%, #2b1f16 58%, #140e09 100%);
}

.reg-lastra {
  position: relative; display: grid; grid-template-columns: minmax(220px, 40%) 1fr; align-items: center;
  border: 1px solid rgba(214, 176, 106, .2); border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 228, 182, .14) inset, 0 -1px 0 rgba(0, 0, 0, .5) inset, 0 26px 46px -22px rgba(0, 0, 0, .92);
  transition: box-shadow .4s ease, border-color .3s ease;
}
.reg:hover .reg-lastra, .reg:focus-visible .reg-lastra {
  border-color: rgba(214, 176, 106, .5);
  box-shadow: 0 1px 0 rgba(255, 228, 182, .2) inset, 0 -1px 0 rgba(0, 0, 0, .5) inset,
              0 40px 66px -26px rgba(0, 0, 0, .95), 0 0 46px -14px rgba(214, 176, 106, .3);
}
.reg.grande .reg-lastra { grid-template-columns: 1fr; }

/* la locandina si vede INTERA: e' l'immagine a dare l'altezza (niente ritagli),
   la colonna di legno riempie il resto e il testo accanto si centra */
.reg-ant {
  position: relative; display: block; width: 100%; height: auto; min-height: 0; overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(var(--tinta, 214, 176, 106), .42) 0%, rgba(var(--tinta, 214, 176, 106), .1) 45%, rgba(10, 7, 5, 0) 75%),
    linear-gradient(180deg, #221810, #120c08);
  border-right: 1px solid rgba(214, 176, 106, .14);
}
.reg.grande .reg-ant { border-right: 0; border-bottom: 1px solid rgba(214, 176, 106, .14); }
.reg-ant img { display: block; width: 100%; height: auto; }
/* senza locandina resta il simbolo, su un riquadro 16:9 */
.reg-ant.senza { aspect-ratio: 16 / 9; }
.reg-arte { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(240, 217, 168, .78); }
.reg-simbolo { width: 40%; height: 40%; filter: drop-shadow(0 0 16px rgba(var(--tinta, 214, 176, 106), .55)); }
.reg-ant .arc-play { position: absolute; right: 12px; bottom: 12px; }
.reg-attesa {
  position: absolute; left: 12px; bottom: 14px;
  font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(191, 169, 140, .7);
}
.reg.muta .reg-corpo { opacity: .82; }

.reg-corpo { display: flex; flex-direction: column; min-width: 0; padding: 20px 24px 18px; }
.reg-alto {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px;
  font-family: 'Cinzel', Georgia, serif; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro-vivo);
}
.reg-tit {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.62rem); line-height: 1.18; color: var(--crema-scritta);
}
.reg.grande .reg-tit { font-size: clamp(1.5rem, 3vw, 1.95rem); }
.reg-som {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 10px; font-family: 'Times New Roman', Times, serif; font-size: 1rem; line-height: 1.6; color: var(--crema-tenue);
}
.reg.grande .reg-som { -webkit-line-clamp: 8; font-size: 1.04rem; }
.reg-piedi {
  display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: auto; padding-top: 14px;
  font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(214, 176, 106, .72);
}
.reg-piedi em { font-style: normal; }
.reg-piedi em + em::before { content: '·'; margin: 0 10px; opacity: .5; }
.reg-piedi .con-med { color: #e6c7d3; }
.reg-piedi .con-cam { color: #cfe0d8; }
/* sul telefono: solo L'ULTIMA serata, in una scheda compatta (locandina a sinistra, testo a destra, descrizione a 3 righe) */
.solo-tel { display: none; }
@media (max-width: 600px) {
  .solo-pc { display: none; }
  .solo-tel { display: inline; }
  .reg-lista.ultime .reg:nth-child(n+2) { display: none; }
  .reg-lista.ultime .reg.grande .reg-lastra { grid-template-columns: 42% 1fr; align-items: stretch; }
  .reg-lista.ultime .reg.grande .reg-ant { border-bottom: 0; border-right: 1px solid rgba(214, 176, 106, .14); align-self: center; }
  .reg-lista.ultime .reg.grande .reg-corpo { padding: 10px 12px 10px; }
  .reg-lista.ultime .reg.grande .reg-tit { font-size: 1.12rem; line-height: 1.15; }
  .reg-lista.ultime .reg.grande .reg-alto { font-size: .58rem; letter-spacing: .12em; }
  .reg-lista.ultime .reg.grande .reg-som { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .98rem; line-height: 1.35; margin-top: 6px; }
  .reg-lista.ultime .reg.grande .reg-piedi { display: none; }
}
@media (max-width: 760px) {
  .reg-lastra { grid-template-columns: 1fr; }
  .reg-ant { border-right: 0; border-bottom: 1px solid rgba(214, 176, 106, .14); }
  .reg-corpo { padding: 16px 18px 16px; }
}

/* ── le tessere delle cartelle: legno, luce colorata, simbolo che galleggia, targa d'oro ── */
.cart-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(18px, 2.6vw, 30px); padding: 10px 2px 30px;
}
@media (max-width: 760px) { .cart-griglia { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.cart {
  display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; background: none;
  cursor: pointer; color: inherit; font: inherit; text-decoration: none;
}
.cart-scena { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: 6px; }
.cart-fondo {
  position: absolute; inset: 0; border-radius: 6px;
  border: 1px solid rgba(214, 176, 106, .22);
  box-shadow: 0 1px 0 rgba(255, 228, 182, .14) inset, 0 30px 50px -24px rgba(0, 0, 0, .95);
  transition: box-shadow .4s ease, border-color .3s ease;
}
.cart:hover .cart-fondo { border-color: rgba(214, 176, 106, .55); box-shadow: 0 1px 0 rgba(255, 228, 182, .2) inset, 0 44px 70px -26px rgba(0, 0, 0, .95), 0 0 50px -12px rgba(var(--tinta), .35); }
/* la luce: segue la mano (--lx/--ly) e sta un passo dietro il simbolo */
.cart-luce {
  position: absolute; inset: 10px; border-radius: 4px;
  background:
    radial-gradient(circle at var(--lx, 50%) var(--ly, 36%), rgba(var(--tinta), .58) 0%, rgba(var(--tinta), .2) 34%, rgba(8, 6, 10, 0) 68%),
    linear-gradient(180deg, rgba(var(--tinta), .1), rgba(0, 0, 0, .38));
  transform: translateZ(12px);
}
.cart-cornice {
  position: absolute; inset: 10px; border-radius: 4px; pointer-events: none;
  border: 1px solid rgba(214, 176, 106, .45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  transform: translateZ(28px);
}
.cart-cornice::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(214, 176, 106, .18); border-radius: 3px; }
.cart-arte {
  position: absolute; left: 50%; top: 42%; width: 54%; aspect-ratio: 1;
  display: grid; place-items: center; color: #f0d9a8;
  transform: translate(-50%, -50%) translateZ(46px);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(var(--tinta), .6));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cart-simbolo { width: 100%; height: 100%; }
.cart-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* il respiro: solo posizione, mai opacita'. Se restasse fermo, si vede uguale. */
@keyframes respiro {
  0%, 100% { transform: translate(-50%, -50%) translateZ(46px) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateZ(46px) translateY(-7px); }
}
.cart-arte { animation: respiro 5.2s ease-in-out infinite; }
.cart:nth-child(2n) .cart-arte { animation-delay: -1.7s; }
.cart:nth-child(3n) .cart-arte { animation-delay: -3.1s; }
.cart:hover .cart-arte { animation: none; transform: translate(-50%, -50%) translateZ(64px) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .cart-arte { animation: none; } }
.cart-targa {
  position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 11px 10px 10px; text-align: center; border-radius: 3px;
  background: linear-gradient(180deg, #e3c489, #b8914b);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 244, 220, .6);
  transform: translateZ(60px);
}
.cart-nome {
  display: block; font-family: 'Cinzel', Georgia, serif; font-size: clamp(.72rem, 1.3vw, .9rem); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: #2a1c10;
}
.cart-sotto { display: block; margin-top: 4px; font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(42, 28, 16, .7); }
@media (max-width: 760px) {
  .cart-targa { left: 10px; right: 10px; bottom: 10px; padding: 9px 6px 8px; }
  .cart-cornice, .cart-luce { inset: 7px; }
}

/* ── la tessera con la locandina (immagine intera 2:3, numero di serate sotto) ── */
.cart.con-img { aspect-ratio: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cart.con-img .cart-scena {
  position: relative; inset: auto; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(214, 176, 106, .28);
  box-shadow: 0 1px 0 rgba(255, 228, 182, .14) inset, 0 30px 50px -24px rgba(0, 0, 0, .95);
  transition: box-shadow .4s ease, border-color .3s ease;
}
.cart.con-img:hover .cart-scena { border-color: rgba(214, 176, 106, .6); box-shadow: 0 44px 70px -26px rgba(0, 0, 0, .95), 0 0 50px -12px rgba(var(--tinta), .4); }
.cart.con-img .cart-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0) scale(1); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.cart.con-img:hover .cart-img { transform: translateZ(0) scale(1.04); }
/* un velo di luce che segue la mano, come sulle altre tessere */
.cart-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 30%), rgba(255, 236, 200, .16) 0%, rgba(255, 236, 200, 0) 45%);
  transform: translateZ(10px);
}
/* la carta ha gia' la sua cornice di legno: niente bordo ne' seconda cornice sopra;
   gli angoli arrotondati seguono quelli della carta (i suoi angoli sono neri) */
.cart.con-img .cart-cornice { display: none; }
.cart.con-img .cart-scena { border: 0; border-radius: 4.2% / 2.8%; background: #000; }
.cart.con-img .cart-velo { background: radial-gradient(circle at var(--lx, 50%) var(--ly, 30%), rgba(255, 236, 200, .1) 0%, rgba(255, 236, 200, 0) 45%); }
.cart-testa-arte.locandina img { border-radius: 4.2% / 2.8%; }
.cart-fuori {
  display: block; text-align: center;
  font-family: 'Cinzel', Georgia, serif; font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro-vivo); opacity: .85;
}
.cart-testa-arte.locandina { aspect-ratio: 2 / 3; }

/* ── dentro una cartella ── */
.cart-indietro {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 10px 18px 10px 14px;
  border: 1px solid rgba(214, 176, 106, .3); border-radius: 999px; background: rgba(12, 9, 7, .55);
  font-family: 'Cinzel', Georgia, serif; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-vivo); text-decoration: none;
}
.cart-indietro svg { width: 18px; height: 18px; }
.cart-indietro:hover { color: var(--crema-scritta); border-color: rgba(214, 176, 106, .6); text-decoration: none; }

.cart-testa {
  display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: clamp(18px, 3vw, 34px); align-items: center;
  margin-bottom: clamp(30px, 5vw, 50px); padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(214, 176, 106, .22); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 228, 182, .14) inset, 0 26px 46px -22px rgba(0, 0, 0, .92);
}
.cart-testa-arte {
  aspect-ratio: 4 / 5; display: grid; place-items: center; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(214, 176, 106, .3); color: #f0d9a8;
  background: radial-gradient(circle at 50% 40%, rgba(var(--tinta), .5), rgba(8, 6, 10, .2) 72%);
}
.cart-testa-simbolo { width: 60%; height: 60%; filter: drop-shadow(0 0 16px rgba(var(--tinta), .6)); }
.cart-testa-arte img { width: 100%; height: 100%; object-fit: cover; }
.cart-testa-tit { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.05; color: var(--crema-scritta); }
.cart-testa-sotto { margin: 6px 0 0; font-family: 'Cinzel', Georgia, serif; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-vivo); }
.cart-testa-desc { margin: 16px 0 0; max-width: 62ch; font-family: 'Times New Roman', Times, serif; font-size: clamp(1rem, 2vw, 1.1rem); line-height: 1.65; color: var(--crema-tenue); }
@media (max-width: 640px) {
  .cart-testa { grid-template-columns: 1fr; }
  .cart-testa-arte { max-width: 150px; }
}

.sez { margin-bottom: clamp(30px, 5vw, 48px); }
.sez-capo {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px;
  font-family: 'Cinzel', Georgia, serif; font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro-vivo);
}
.sez-capo::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--oro-tenue), transparent); }
.sez-capo em { order: 3; flex: none; font-family: var(--sans); font-style: normal; font-size: .62rem; letter-spacing: .16em; color: rgba(214, 176, 106, .6); }

/* ── il lettore: sipario scuro, il video sopra, sotto la scheda e l'indice ── */
.lettore {
  position: fixed; inset: 0; z-index: 90; display: none; overflow-y: auto;
  padding: clamp(16px, 4vw, 40px) clamp(12px, 3vw, 32px) 70px;
  background: rgba(6, 5, 9, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  --oro-vivo: #d6b06a; --crema-scritta: #f2e6d2; --crema-tenue: #bfa98c;
}
.lettore.aperto { display: block; }
/* il sipario sale e scende con una transizione: lo stato acceso e' dichiarato (visibile) */
.lettore { opacity: 0; transition: opacity .35s ease; }
.lettore.aperto.visibile { opacity: 1; }
.lettore .telaio { width: 100%; max-width: 1080px; margin: 0 auto; }

/* la locandina in volo: una copia posata sopra a tutto, che passa dalla scheda
   alla cornice con UNA trasformazione (fluida anche sui telefoni) */
.volante {
  position: fixed; z-index: 95; pointer-events: none;
  border-radius: 6px; border: 1px solid rgba(214, 176, 106, .45);
  background: #120c08 center / cover no-repeat;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(214, 176, 106, .35);
  opacity: 1; will-change: transform;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
.volante.vuoto { background: radial-gradient(circle at 50% 40%, rgba(214, 176, 106, .35), rgba(10, 7, 5, 0) 72%), linear-gradient(180deg, #221810, #120c08); }
.volante.arrivato { opacity: 0; }

/* sotto il video, le parole e l'indice salgono da sotto un attimo dopo la locandina */
.lettore-sotto { opacity: 0; transform: translateY(34px); transition: opacity .5s ease .3s, transform .6s cubic-bezier(.22, 1, .36, 1) .3s; }
.lettore.visibile .lettore-sotto { opacity: 1; transform: none; }
.lettore .chiudi { opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .35s ease .45s, transform .45s cubic-bezier(.22, 1, .36, 1) .45s, background .2s ease, border-color .2s ease; }
.lettore.visibile .chiudi { opacity: 1; transform: none; }

/* sui telefoni niente sfocatura dietro il sipario: costa troppo e fa scattare il volo */
@media (max-width: 800px) {
  .lettore { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 5, 9, .975); }
}
@media (prefers-reduced-motion: reduce) {
  .lettore, .lettore-sotto, .lettore .chiudi { transition: none; }
  .lettore-sotto, .lettore .chiudi { opacity: 1; transform: none; }
  .volante { display: none; }
}
.video-cornice { position: relative; }
.lettore .video {
  border: 1px solid rgba(214, 176, 106, .38); border-radius: 6px; background: #000;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95);
}
.lettore .video[hidden] { display: none; }
.video-senza {
  aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 30px; text-align: center;
  border: 1px dashed rgba(214, 176, 106, .35); border-radius: 6px;
  font-family: 'Times New Roman', Times, serif; font-size: 1.05rem; color: var(--crema-tenue);
}
.video-senza p { margin: 0; max-width: 34em; }
.video-senza[hidden] { display: none; }
/* con il lettore aperto la barra RESTA (Andrea, 16/9/26: «deve sempre rimanere, solo a schermo intero deve
   sparire»): il lettore lascia sotto lo spazio della barra; a schermo intero il video copre tutto e la barra si toglie */
body.col-lettore .lettore { padding-bottom: calc(var(--au-menu, 74px) + env(safe-area-inset-bottom, 0px) + 40px); }
html.schermo-intero .olv-nav { display: none; }
.chiudi {
  position: fixed; top: clamp(14px, 3vw, 26px); right: clamp(14px, 3vw, 26px); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(214, 176, 106, .42); background: rgba(30, 22, 15, .85); color: #e6cf9f;
  cursor: pointer; font-size: 1.5rem; line-height: 1;
}
.chiudi:hover { background: rgba(52, 38, 24, .9); border-color: rgba(214, 176, 106, .7); }

.lettore-sotto {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 44px); margin-top: clamp(18px, 3vw, 28px);
}
/* senza indice (l'Evento): la parola prende tutta la larghezza */
.lettore.senza-indice .lettore-sotto { grid-template-columns: 1fr; }
.lettore.senza-indice .lettore-capitoli { display: none; }
.lettore-parola h3 { margin: 6px 0 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.1; color: #f3e6cf; }
.lettore-meta { margin: 0 0 14px; font-family: 'Cinzel', Georgia, serif; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-vivo); }
.lettore-descrizione { margin: 0; font-family: 'Times New Roman', Times, serif; font-size: 1.06rem; line-height: 1.66; color: #d9c9b0; }
#lettore-occhiello:empty { display: none; }

.lx { margin-top: 22px; padding: 16px 18px; border: 1px solid rgba(214, 176, 106, .22); border-radius: 4px; background: rgba(255, 224, 176, .04); }
.lx-capo { margin: 0 0 4px; font-family: 'Cinzel', Georgia, serif; font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-vivo); }
.lx-tit { margin: 0 0 12px; font-family: var(--serif); font-size: 1.25rem; color: var(--crema-scritta); }
.lx-azioni { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── l'Evento dentro il lettore: fregio, slide, scatti, pdf, ringraziamento (come su systeme.io) ── */
.ev-fregio { display: block; width: min(100%, 520px); height: auto; margin: 26px auto 6px; opacity: .85; }
.ev-sez { margin-top: 26px; }
.ev-capo { margin: 0 0 12px; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--crema-scritta); }
.ev-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ev-griglia.slide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.ev-foto { position: relative; display: block; width: 100%; padding: 0; border: 1px solid rgba(214, 176, 106, .25); border-radius: 4px; overflow: hidden; background: #000; cursor: zoom-in; aspect-ratio: 3 / 2; transition: transform .2s ease, border-color .2s ease; }
.ev-griglia.slide .ev-foto { aspect-ratio: 16 / 10; }
.ev-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-foto:hover { transform: scale(1.03); border-color: rgba(214, 176, 106, .7); }
.ev-testo { margin: 0 0 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.18rem; line-height: 1.55; color: var(--crema-scritta); }
.ev-lettera { padding: 18px 20px; border: 1px solid rgba(214, 176, 106, .25); border-radius: 4px; background: rgba(255, 224, 176, .05); }
.ev-chiusura { margin: 14px 0 0; text-align: center; font-family: 'Cinzel', Georgia, serif; font-size: .9rem; font-weight: 700; letter-spacing: .18em; color: var(--oro-vivo); }
.ev-sez .lx-azioni { margin-top: 12px; }
.ev-sez .bgl { text-decoration: none; }
.ev-sez .bgl::before, .ev-sez .bgl::after { background: #0b0805; }
@media (max-width: 600px) { .ev-griglia { grid-template-columns: repeat(2, 1fr); } .ev-capo { font-size: 1.25rem; } }

/* la scatola di luce */
.lucebox { position: fixed; inset: 0; z-index: 1000000; display: grid; place-items: center; background: rgba(0, 0, 0, .94); }
.lucebox[hidden] { display: none; }
.lucebox img { max-width: 96vw; max-height: 88vh; border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .9); cursor: zoom-out; }
.lucebox-chiudi { position: absolute; top: 12px; right: 14px; width: 46px; height: 46px; border: 1px solid rgba(214, 176, 106, .5); border-radius: 50%; background: rgba(0, 0, 0, .5); color: var(--oro-vivo); font-size: 30px; line-height: 1; cursor: pointer; }
.lucebox-freccia { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #f2e6d2; font-size: 44px; line-height: 1; cursor: pointer; }
.lucebox-freccia.prima { left: 8px; } .lucebox-freccia.dopo { right: 8px; }
.lucebox-conta { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; font-family: 'Cinzel', Georgia, serif; font-size: .72rem; letter-spacing: .2em; color: rgba(242, 230, 210, .75); }
.lx-b {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(214, 176, 106, .5); background: linear-gradient(180deg, #e3c489, #b8914b); color: #2a1c10;
  font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: filter .2s ease;
}
.lx-b.chiaro { background: rgba(12, 9, 7, .5); color: var(--oro-vivo); }
.lx-b:hover { filter: brightness(1.12); text-decoration: none; }

.cap-capo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px;
  font-family: 'Cinzel', Georgia, serif; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-vivo);
}
.cap-capo em { font-family: var(--sans); font-style: normal; font-size: .6rem; letter-spacing: .1em; text-transform: none; color: rgba(214, 176, 106, .6); }
.cap {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; width: 100%; margin-bottom: 4px; padding: 10px 12px;
  text-align: left; cursor: pointer; border: 1px solid transparent; border-radius: 4px;
  background: rgba(255, 224, 176, .03); color: inherit; font: inherit;
  transition: background .2s ease, border-color .2s ease;
}
.cap:hover { background: rgba(214, 176, 106, .1); border-color: rgba(214, 176, 106, .3); }
.cap.ora { background: rgba(214, 176, 106, .16); border-color: rgba(214, 176, 106, .55); }
.cap-t { padding-top: 3px; font-family: 'Cinzel', Georgia, serif; font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--oro-vivo); }
.cap-tit { font-family: 'Times New Roman', Times, serif; font-size: .98rem; line-height: 1.45; color: #e6d7bd; }
.cap-nota { margin: 10px 0 0; font-family: var(--sans); font-size: .78rem; color: rgba(191, 169, 140, .7); }
@media (max-width: 800px) { .lettore-sotto { grid-template-columns: 1fr; } }

/* ── il consigliere: il box in cui si scrive, e la lettera con il consiglio ── */
.chiedi { max-width: 760px; margin: 0 auto clamp(26px, 4vw, 40px); }
.chiedi-capo {
  display: block; margin: 0 0 8px; text-align: center;
  font-family: 'Great Vibes', 'Cormorant Garamond', cursive; font-size: clamp(2rem, 4.6vw, 2.6rem); font-weight: 400; line-height: 1.1;
  color: var(--oro-vivo); text-shadow: 0 0 18px rgba(214, 176, 106, .35);
}
.chiedi-box {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: 12px;
  /* intagliata nello sfondo: ombra dentro dall'alto, un filo di luce sul bordo basso */
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(0, 0, 0, .55);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .85), inset 0 1px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 236, 200, .13), 0 0 0 1px rgba(255, 236, 200, .04);
  transition: box-shadow .25s ease;
}
.chiedi-box:focus-within { box-shadow: inset 0 3px 10px rgba(0, 0, 0, .85), inset 0 1px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 236, 200, .18), 0 0 0 2px rgba(125, 70, 201, .35); }
.chiedi-box textarea {
  flex: 1; min-width: 0; min-height: 44px; max-height: 220px; padding: 10px 8px; resize: none; overflow-y: hidden;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.22rem; line-height: 1.45;
  color: var(--crema-scritta); background: transparent; border: 0; outline: none;
}
.chiedi-box textarea::placeholder { color: rgba(191, 169, 140, .62); }
/* il tasto: viola, che si veda, scritta chiara */
.chiedi-btn {
  flex: none; padding: 12px 22px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: linear-gradient(180deg, #8d55dc, #6d3cc0); color: #fff7e6;
  font-family: 'Cinzel', Georgia, serif; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 4px 14px -4px rgba(125, 70, 201, .8);
  transition: filter .2s ease, box-shadow .2s ease;
}
.chiedi-btn:hover { filter: brightness(1.1); box-shadow: 0 6px 18px -4px rgba(125, 70, 201, .95); }
.chiedi-btn:focus-visible { outline: 1px solid rgba(214, 176, 106, .8); outline-offset: 3px; }
.chiedi-btn:disabled { opacity: .55; cursor: wait; }
.chiedi-spiega { margin: 14px 4px 0; text-align: left; }
.chiedi-spiega-capo { margin: 0 0 2px; font-family: 'Cinzel', Georgia, serif; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-vivo); }
.chiedi-nota { margin: 0; text-align: left; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.12rem; line-height: 1.45; color: rgba(214, 196, 160, .85); }
.chiedi-nota strong { color: var(--oro-vivo); font-weight: 700; }
@media (max-width: 600px) {
  .chiedi-box { padding: 4px 4px 4px 12px; gap: 6px; }
  .chiedi-box textarea { min-height: 40px; padding: 8px 4px; font-size: 1.05rem; line-height: 1.35; }
  .chiedi-box textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chiedi-btn { padding: 10px 14px; font-size: .72rem; letter-spacing: .1em; }
}
/* le domande che fanno piu' spesso: si toccano e partono */
.chiedi-domande { margin-top: 14px; }
/* la riga si apre con la freccetta a sinistra: chiusa di partenza, cosi' la pagina resta pulita */
.chiedi-domande-capo {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 6px; cursor: pointer;
  border: 0; background: transparent; text-align: left;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.15rem; color: rgba(214, 176, 106, .9);
}
.chiedi-freccia { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid rgba(214, 176, 106, .5); color: var(--oro-vivo); transition: transform .25s ease, background .2s ease; }
.chiedi-freccia svg { width: 14px; height: 14px; }
.chiedi-domande.aperte .chiedi-freccia { transform: rotate(90deg); background: rgba(214, 176, 106, .14); }
.chiedi-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; padding: 0 4px; transition: max-height .35s ease, opacity .3s ease, padding .3s ease; }
.chiedi-domande.aperte .chiedi-chips { max-height: 600px; opacity: 1; padding: 4px 4px 8px; }
.chip {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(214, 176, 106, .32); background: rgba(12, 9, 7, .5); color: var(--crema-scritta);
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.08rem; line-height: 1.2;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.chip:hover { border-color: rgba(214, 176, 106, .75); background: rgba(214, 176, 106, .1); transform: translateY(-1px); }
@media (max-width: 600px) { .chip { font-size: 1.02rem; padding: 9px 14px; } }

/* ── la lettera con il consiglio: una pergamena (rotolo sopra, corpo, rotolo sotto) ──
   I tre pezzi vengono dal disegno di ChatGPT ritagliato (scratchpad/pergamena.py):
   larghezza 1024, rotolo alto 261, rotolo basso 287, corpo 520 che si ripete;
   i rotoli si sovrappongono al corpo per 70/1024 della larghezza (sfumati). */
.perg { position: relative; max-width: 900px; margin: 0 auto clamp(34px, 5vw, 56px); filter: drop-shadow(0 26px 28px rgba(0, 0, 0, .7)); }
.perg-alto, .perg-basso { position: relative; z-index: 2; display: block; width: 100%; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.perg-alto { aspect-ratio: 1024 / 261; background-image: url('/img/pergamena-alto.webp'); margin-bottom: -6.8%; }
.perg-basso { aspect-ratio: 1024 / 287; background-image: url('/img/pergamena-basso.webp'); margin-top: -6.8%; }
.cons-lettera {
  position: relative; z-index: 1; margin: 0; padding: 2% 13% 4%;
  color: #3b2a1b;
  background: url('/img/pergamena-corpo.webp') center top / 100% auto repeat-y;
}
.cons-lettera.attenzione .arc-occhiello { color: #9a3d5a; }
/* il sigillo: la fiammella in cima, poi il titolo in calligrafia */
.cons-lettera .arc-occhiello {
  display: block; margin: -6px 0 14px; text-align: center; letter-spacing: 0; text-transform: none; text-indent: 0;
  font-family: 'Great Vibes', 'Cormorant Garamond', cursive; font-weight: 400; font-size: clamp(2.3rem, 5vw, 3rem); line-height: 1.1;
  color: #6b4a1f;
}
.cons-lettera .arc-occhiello::after { content: ''; display: block; width: 90px; height: 1px; margin: 8px auto 0; background: linear-gradient(90deg, transparent, #a67c3c, transparent); }
.cons-lettera .arc-occhiello::before { content: ''; display: block; width: 34px; height: 34px; margin: 0 auto 6px; background: url('/img/consigliami.png') center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.cons-testo { margin: 0 0 12px; max-width: 62ch; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(1.22rem, 2.3vw, 1.36rem); line-height: 1.6; color: #3b2a1b; }
.cons-attesa { margin: 0; text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.3rem; color: #6b4a1f; }
/* il filo che scorre mentre il cervello pensa: solo un movimento di fondo, niente da far comparire */
.cons-filo { display: block; height: 1px; margin-top: 16px; background: linear-gradient(90deg, transparent, #a67c3c, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: filo-scorre 1.6s ease-in-out infinite alternate; }
@keyframes filo-scorre { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .cons-filo { animation: none; background-size: 100% 100%; } }
.cons-capo { margin: 26px 0 12px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.35rem; color: #8a5f24; }
.cons-capo::before { content: '— '; color: #b8913f; }
.cons-lista { display: grid; gap: 18px; margin-top: 18px; }

/* la serata consigliata: una tavola SCURA appoggiata sulla pergamena (forte contrasto),
   con la fotografia, il titolo in crema, e la nota «Perché te la consiglio» su carta chiara */
.cons-lastra {
  display: grid; grid-template-columns: minmax(200px, 36%) 1fr; gap: 20px; align-items: start;
  padding: 16px; border-radius: 6px;
  color: #f3e7d2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(214, 176, 106, .16), rgba(214, 176, 106, 0) 60%),
    linear-gradient(160deg, #2a1c12 0%, #1a1109 55%, #120c07 100%);
  box-shadow: 0 0 0 1px #6b4a1f, 0 0 0 3px #1a1109, 0 0 0 4px rgba(214, 176, 106, .45), 0 18px 30px -14px rgba(0, 0, 0, .8);
}
.cons.grande .cons-lastra { grid-template-columns: minmax(240px, 42%) 1fr; }
.cons-ant {
  position: relative; display: block; width: 100%; padding: 6px 6px 8px; border: 0; cursor: pointer;
  background: #fffdf8; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .3);
  transform: rotate(-1.4deg); transition: transform .3s ease, box-shadow .3s ease;
}
.cons:nth-child(even) .cons-ant { transform: rotate(1deg); }
.cons-ant:hover { transform: rotate(0) scale(1.02); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .9), 0 0 0 1px rgba(214, 176, 106, .6); }
.cons-ant img { display: block; width: 100%; height: auto; }
.cons-ant .arc-play { position: absolute; right: 16px; bottom: 18px; }
.cons-ant .reg-arte { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: #1a120b; color: #d6b06a; }
.cons-corpo { min-width: 0; padding: 4px 2px 2px; }
.cons-corpo .reg-alto, .cons-corpo .reg-alto span { color: #d6b06a; }
.cons-tit { margin: 6px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 2.7vw, 1.9rem); line-height: 1.12; color: #fbf1dc; }
.cons-desc { margin: 10px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.2rem; line-height: 1.5; color: #e2d3b8; }
/* la nota chiara: un foglietto appoggiato sulla tavola scura */
.cons-perche {
  position: relative; margin: 16px 0 0; padding: 12px 14px 12px 16px; border-radius: 3px;
  background: linear-gradient(180deg, #fbf3e2, #f1e3c6);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .25) inset;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.24rem; line-height: 1.5; color: #2e2013;
}
.cons-perche::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #e3c489, #b8914b); border-radius: 3px 0 0 3px; }
.cons-perche-capo { display: block; margin-bottom: 3px; font-style: normal; font-weight: 700; font-size: 1.02rem; letter-spacing: .04em; color: #8a5f24; }
.cons-cap { display: block; margin-top: 6px; font-size: 1.1rem; color: #5a3d1c; }
.cons .lx-azioni { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ── i biglietti: i tasti della serata, con le tacche ai lati come un biglietto d'ingresso ── */
.bgl {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 20px 0 14px; border: 0; border-radius: 6px; cursor: pointer;
  font-family: 'Cinzel', Georgia, serif; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
/* le due tacche: sono del colore della tavola scura sotto */
.bgl::before, .bgl::after {
  content: ''; position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%);
  background: #1a1109; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.bgl::before { left: -7px; } .bgl::after { right: -7px; }
/* la linea tratteggiata interna, come sul bordo di un biglietto da strappare */
.bgl .bgl-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.bgl .bgl-ico svg { width: 16px; height: 16px; }
.bgl .bgl-testo { white-space: nowrap; }
.bgl .bgl-num { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 1.32rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1; }
.bgl.oro {
  color: #2b1a08;
  background: linear-gradient(180deg, #f6dfa4 0%, #e0bd6f 45%, #c99d4c 55%, #ecc97f 100%);
  box-shadow: 0 1px 0 rgba(255, 248, 225, .7) inset, 0 -1px 0 rgba(120, 80, 20, .5) inset, 0 6px 0 #7a5a24, 0 10px 18px -6px rgba(0, 0, 0, .9);
  outline: 1px dashed rgba(90, 60, 15, .6); outline-offset: -6px;
}
.bgl.oro .bgl-ico { background: #2b1a08; color: #f6dfa4; }
.bgl.oro .bgl-ico svg { fill: currentColor; }
.bgl.scuro {
  color: #f0d59a;
  background: linear-gradient(180deg, #3a2716 0%, #24170d 60%, #1a1109 100%);
  box-shadow: 0 1px 0 rgba(255, 228, 182, .18) inset, 0 0 0 1px #8a6a2c, 0 6px 0 #0c0805, 0 10px 18px -6px rgba(0, 0, 0, .9);
  outline: 1px dashed rgba(214, 176, 106, .55); outline-offset: -6px;
}
.bgl.scuro .bgl-ico { background: rgba(214, 176, 106, .16); color: #f0d59a; box-shadow: 0 0 0 1px rgba(214, 176, 106, .5); }
.bgl:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bgl:active { transform: translateY(5px); }
.bgl.oro:active { box-shadow: 0 1px 0 rgba(255, 248, 225, .7) inset, 0 1px 0 #7a5a24; }
.bgl.scuro:active { box-shadow: 0 0 0 1px #8a6a2c, 0 1px 0 #0c0805; }
.bgl:focus-visible { outline: 2px solid #f6dfa4; outline-offset: 3px; }
.cons-med { margin: 22px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.22rem; color: #3b2a1b; }
.cons-med a { color: #8a5f24; text-decoration: underline; text-underline-offset: 3px; }

/* ── sul telefono: una colonna, tasti larghi e comodi, testi grandi ── */
@media (max-width: 760px) {
  .cons-lastra, .cons.grande .cons-lastra { grid-template-columns: 1fr; gap: 14px; padding: 12px; }
  .perg { width: calc(100% + 18px); margin-left: -9px; }   /* fino ai bordi dello schermo: la carta si allarga */
  .cons-lettera { padding-left: 11%; padding-right: 11%; }
  .cons-ant { transform: rotate(-0.8deg); }
  .cons:nth-child(even) .cons-ant { transform: rotate(0.6deg); }
  .cons-tit { font-size: 1.5rem; }
  .cons-testo, .cons-desc, .cons-perche { font-size: 1.22rem; }
  .cons .lx-azioni { flex-direction: column; gap: 14px; margin-top: 16px; }
  .bgl { width: 100%; min-height: 54px; justify-content: flex-start; padding: 8px 14px 8px 12px; font-size: .76rem; letter-spacing: .06em; }
  .bgl .bgl-testo { white-space: normal; line-height: 1.25; }
}

/* ── le meditazioni ── */
.med-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(18px, 2.6vw, 28px); }
.med-lastra {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(214, 176, 106, .2); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 228, 182, .14) inset, 0 -1px 0 rgba(0, 0, 0, .5) inset, 0 26px 46px -22px rgba(0, 0, 0, .92);
  transition: box-shadow .4s ease, border-color .3s ease;
}
.med:hover .med-lastra { border-color: rgba(214, 176, 106, .5); }
.med-cop {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(214, 162, 91, .4), rgba(10, 7, 5, 0) 72%), linear-gradient(180deg, #221810, #120c08);
  border-bottom: 1px solid rgba(214, 176, 106, .14);
}
.med-cop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.med-arte { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(240, 217, 168, .78); }
.med-simbolo { width: 36%; height: 36%; }
.med-nuova {
  position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px;
  background: rgba(12, 9, 7, .72); border: 1px solid rgba(214, 176, 106, .4);
  font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-vivo);
}
.med-corpo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.med-tit { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.15; color: var(--crema-scritta); }
.med-som { margin: 0; font-family: 'Times New Roman', Times, serif; font-size: 1rem; line-height: 1.55; color: var(--crema-tenue); }
.med-da { margin: 0; font-family: var(--sans); font-size: .76rem; line-height: 1.5; color: rgba(191, 169, 140, .78); }
.med .lx-azioni { margin-top: auto; padding-top: 10px; }
.med.evidenza .med-lastra { border-color: rgba(214, 176, 106, .7); box-shadow: 0 0 0 1px rgba(214, 176, 106, .4), 0 0 40px -10px rgba(214, 176, 106, .5); }


/* ══════════════════════════════════════════════════════════════════════
   REGISTRAZIONI — VERSIONE 2 «APP» (10/9/26)
   Chiara, semplice, pulsanti grandi, cartelle a forma di cartella.
   La versione 1 (carte di legno, bosco, pergamena) e' nel tag git
   v1-registrazioni-carte: le sue regole qui sotto restano ma non si usano.
   ══════════════════════════════════════════════════════════════════════ */
#s-registrazioni.app {
  --ap-fondo: #f6f1e8; --ap-carta: #ffffff; --ap-testo: #26201a; --ap-tenue: #7b6f62; --ap-linea: #e6dccd;
  --ap-primario: #5b3a86; --ap-primario-scuro: #4a2e6e; --ap-oro: #b8913f;
  --ap-cart-dietro: #d9b978; --ap-cart-davanti: #f1dfb6; --ap-cart-piega: #e3c68e;
  color: var(--ap-testo); font-family: var(--sans);
}
/* niente bosco e niente velo scuro: fondo crema pieno */
#s-registrazioni.app.viva::before { background: var(--ap-fondo); }
#s-registrazioni.app.viva::after { display: none; }
.ap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: clamp(18px, 4vw, 40px) clamp(14px, 3vw, 28px) 150px; }
.ap-testa { margin-bottom: 18px; }
.ap-titolo { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1.05; color: var(--ap-testo); letter-spacing: -.01em; }
.ap-sotto { margin: 6px 0 0; font-size: 1.02rem; color: var(--ap-tenue); }

/* la ricerca: una barra grande, bianca, con il tasto viola dentro */
.ap-cerca { margin-bottom: 26px; }
.ap-cerca-box {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px;
  background: var(--ap-carta); border: 1px solid var(--ap-linea); border-radius: 18px;
  box-shadow: 0 6px 20px -12px rgba(60, 40, 20, .35);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ap-cerca-box:focus-within { border-color: rgba(91, 58, 134, .5); box-shadow: 0 0 0 4px rgba(91, 58, 134, .12), 0 6px 20px -12px rgba(60, 40, 20, .35); }
.ap-lente { width: 22px; height: 22px; flex: none; color: var(--ap-tenue); }
.ap-cerca-box textarea {
  flex: 1; min-width: 0; min-height: 46px; max-height: 200px; padding: 12px 4px; resize: none; overflow-y: hidden;
  font-family: var(--sans); font-size: 1.05rem; line-height: 1.4; color: var(--ap-testo); background: transparent; border: 0; outline: none;
}
.ap-cerca-box textarea::placeholder { white-space: nowrap; }
.ap-cerca-box .ap-btn { padding: 0 18px; }
@media (max-width: 420px) { .ap-cerca-box { padding-left: 12px; gap: 6px; } .ap-cerca-box textarea { font-size: 1rem; } .ap-cerca-box .ap-btn { padding: 0 14px; min-height: 46px; } }
.ap-cerca-box textarea::placeholder { color: #a0958a; }
/* i tasti: grandi, pieni, con un solo colore */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em;
  background: #ece5d9; color: var(--ap-testo);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ap-btn svg { width: 22px; height: 22px; flex: none; }
.ap-btn:hover { background: #e3dacb; }
.ap-btn:active { transform: scale(.98); }
.ap-btn.primario { background: var(--ap-primario); color: #fff; box-shadow: 0 8px 18px -8px rgba(91, 58, 134, .7); }
.ap-btn.primario:hover { background: var(--ap-primario-scuro); }
.ap-btn.primario:disabled { opacity: .55; cursor: wait; }
.ap-btn.largo { width: 100%; min-height: 56px; font-size: 1.08rem; }
.ap-btn.indietro { margin-bottom: 18px; padding-left: 14px; }
.ap-cerca .chiedi-domande { margin-top: 8px; }
.ap-cerca .chiedi-domande-capo { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: .98rem; color: var(--ap-primario); padding: 10px 4px; }
.ap-cerca .chiedi-freccia { border-color: rgba(91, 58, 134, .35); color: var(--ap-primario); }
.ap-cerca .chiedi-domande.aperte .chiedi-freccia { background: rgba(91, 58, 134, .1); }
.ap-cerca .chip { border: 1px solid var(--ap-linea); background: var(--ap-carta); color: var(--ap-testo); font-family: var(--sans); font-weight: 600; font-size: .98rem; padding: 10px 16px; }
.ap-cerca .chip:hover { border-color: var(--ap-primario); background: #f4effa; }

.ap-blocco { margin-top: 30px; }
.ap-capo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 12px; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ap-testo); }
.ap-capo em { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: .92rem; color: var(--ap-tenue); }
.ap-etichetta { margin: 0 0 6px; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ap-primario); }
.ap-vuoto { padding: 30px 10px; text-align: center; color: var(--ap-tenue); font-size: 1.05rem; }

/* l'ultima serata: una scheda grande con il tasto sotto */
.ap-ultima { display: grid; grid-template-columns: 1fr; overflow: hidden; background: var(--ap-carta); border: 1px solid var(--ap-linea); border-radius: 22px; box-shadow: 0 14px 34px -22px rgba(60, 40, 20, .5); }
.ap-ultima-ant { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #e9e1d4; cursor: pointer; }
.ap-ultima-ant img { display: block; width: 100%; height: auto; }
.ap-ultima-corpo { padding: 18px 18px 20px; }
.ap-ultima-tit { margin: 0 0 6px; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.12; color: var(--ap-testo); }
.ap-ultima-desc { margin: 10px 0 16px; font-size: 1.02rem; line-height: 1.55; color: #4e4337; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 760px) { .ap-ultima { grid-template-columns: minmax(300px, 46%) 1fr; align-items: center; } .ap-ultima-corpo { padding: 22px 26px; } }
.ap-riga-play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ap-primario); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.ap-riga-play svg { width: 18px; height: 18px; margin-left: 2px; }
.ap-riga-play.grande { right: 14px; bottom: 14px; width: 56px; height: 56px; }
.ap-riga-play.grande svg { width: 26px; height: 26px; }

/* le cartelle: una griglia di cartelle vere */
.ap-cartelle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 560px) { .ap-cartelle { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ap-cartelle { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.ap-cart {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 16px; cursor: pointer;
  background: var(--ap-carta); border: 1px solid var(--ap-linea); border-radius: 22px;
  box-shadow: 0 10px 26px -20px rgba(60, 40, 20, .5);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.ap-cart:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(60, 40, 20, .55); border-color: #d8ccb8; }
.ap-cart:active { transform: scale(.98); }
.ap-cart-icona { position: relative; width: 74%; max-width: 150px; aspect-ratio: 120 / 96; margin-bottom: 8px; }
.ap-cart-icona.piccola { width: 92px; margin: 0; flex: none; }
.ap-cart-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(120, 90, 30, .22)); }
.ap-cart-dietro { fill: var(--ap-cart-dietro); }
.ap-cart-davanti { fill: var(--ap-cart-davanti); }
.ap-cart-piega { stroke: var(--ap-cart-piega); stroke-width: 1.5; fill: none; }
.ap-cart-simbolo { position: absolute; left: 50%; top: 56%; width: 34%; height: 34%; transform: translate(-50%, -50%); color: #7a5a1f; opacity: .9; }
.ap-cart-n { position: absolute; right: 6%; bottom: 8%; min-width: 26px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 13px; background: var(--ap-primario); color: #fff; font-weight: 800; font-size: .82rem; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.ap-cart-nome { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; line-height: 1.1; text-align: center; color: var(--ap-testo); }
.ap-cart-sotto { font-size: .9rem; color: var(--ap-tenue); }
/* una tinta diversa per cartella, discreta */
.ap-cart[data-tinta="aldila"], .ap-cart-testa[data-tinta="aldila"] { --ap-cart-dietro: #9fb3d6; --ap-cart-davanti: #dbe5f3; --ap-cart-piega: #c3d1e6; }
.ap-cart[data-tinta="segni"], .ap-cart-testa[data-tinta="segni"] { --ap-cart-dietro: #c3a6d6; --ap-cart-davanti: #ebdff3; --ap-cart-piega: #d9c8e6; }
.ap-cart[data-tinta="lasciare"], .ap-cart-testa[data-tinta="lasciare"] { --ap-cart-dietro: #dea3a3; --ap-cart-davanti: #f6dede; --ap-cart-piega: #ecc9c9; }
.ap-cart[data-tinta="medianita"], .ap-cart-testa[data-tinta="medianita"] { --ap-cart-dietro: #d9b978; --ap-cart-davanti: #f1dfb6; --ap-cart-piega: #e3c68e; }
.ap-cart[data-tinta="domande"], .ap-cart-testa[data-tinta="domande"] { --ap-cart-dietro: #8fc0b4; --ap-cart-davanti: #d9ede8; --ap-cart-piega: #bfdcd4; }
.ap-cart[data-tinta="raccontami"], .ap-cart-testa[data-tinta="raccontami"] { --ap-cart-dietro: #e0b08a; --ap-cart-davanti: #f7e3d2; --ap-cart-piega: #ecd0b8; }
.ap-cart[data-tinta="evento"], .ap-cart-testa[data-tinta="evento"] { --ap-cart-dietro: #a58cc7; --ap-cart-davanti: #e6dcf1; --ap-cart-piega: #d2c3e4; }

/* dentro una cartella: testata + righe grandi */
.ap-cart-testa { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 16px; background: var(--ap-carta); border: 1px solid var(--ap-linea); border-radius: 22px; }
.ap-cart-testa-tit { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.08; color: var(--ap-testo); }
.ap-cart-testa-desc { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: #4e4337; }
.ap-sez + .ap-sez { margin-top: 26px; }
.ap-lista { display: flex; flex-direction: column; gap: 10px; }
.ap-riga {
  display: grid; grid-template-columns: 128px 1fr 28px; align-items: center; gap: 14px; width: 100%; padding: 10px; text-align: left; cursor: pointer;
  background: var(--ap-carta); border: 1px solid var(--ap-linea); border-radius: 18px; color: var(--ap-testo);
  box-shadow: 0 8px 20px -18px rgba(60, 40, 20, .5);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.ap-riga:hover { border-color: #d8ccb8; box-shadow: 0 12px 24px -16px rgba(60, 40, 20, .55); }
.ap-riga:active { transform: scale(.99); }
.ap-riga.muta { opacity: .75; }
.ap-riga-ant { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #e9e1d4; }
.ap-riga-ant img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-riga-vuota { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ap-tenue); }
.ap-riga-simbolo { width: 40%; height: 40%; }
.ap-riga .ap-riga-play { width: 30px; height: 30px; right: 6px; bottom: 6px; }
.ap-riga .ap-riga-play svg { width: 14px; height: 14px; }
.ap-riga-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-riga-tit { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; line-height: 1.15; color: var(--ap-testo); }
.ap-riga-meta { margin: 0; font-size: .9rem; color: var(--ap-tenue); }
.ap-riga-sotto { font-size: .95rem; color: #5b5044; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-chev { width: 28px; height: 28px; color: #b8ad9f; justify-self: end; }
@media (max-width: 480px) { .ap-riga { grid-template-columns: 104px 1fr 22px; gap: 10px; } .ap-riga-tit { font-size: 1.1rem; } .ap-riga-sotto { display: none; } }

/* il consiglio nella versione app: pannello chiaro, schede bianche, tasto viola */
.ap-consiglio { margin: 0 0 26px; padding: 20px 18px; background: var(--ap-carta); border: 1px solid var(--ap-linea); border-radius: 22px; box-shadow: 0 14px 34px -22px rgba(60, 40, 20, .5); color: var(--ap-testo); }
.ap-consiglio .arc-occhiello { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 1.6rem; letter-spacing: 0; text-transform: none; text-indent: 0; color: var(--ap-testo); }
.ap-consiglio .arc-occhiello::after, .ap-consiglio .arc-occhiello::before { display: none; }
.ap-consiglio .cons-testo, .ap-consiglio .cons-attesa, .ap-consiglio .cons-med { font-family: var(--sans); font-size: 1.05rem; line-height: 1.55; color: #4e4337; text-align: left; }
.ap-consiglio .cons-filo { background: linear-gradient(90deg, transparent, var(--ap-primario), transparent); background-size: 40% 100%; background-repeat: no-repeat; }
.ap-consiglio .cons-lista { gap: 12px; margin-top: 14px; }
.ap-consiglio .cons-lastra { grid-template-columns: minmax(150px, 34%) 1fr; gap: 14px; padding: 10px; background: #faf6ef; border-radius: 16px; box-shadow: 0 0 0 1px var(--ap-linea); color: var(--ap-testo); }
.ap-consiglio .cons-ant { padding: 0; border-radius: 12px; overflow: hidden; background: #e9e1d4; box-shadow: none; transform: none; }
.ap-consiglio .cons-ant:hover { transform: none; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .35); }
.ap-consiglio .cons-corpo .reg-alto, .ap-consiglio .cons-corpo .reg-alto span { color: var(--ap-tenue); }
.ap-consiglio .cons-tit { font-size: 1.3rem; color: var(--ap-testo); }
.ap-consiglio .cons-perche { padding: 10px 12px; border-radius: 12px; background: #f1ebf7; font-family: var(--sans); font-style: normal; font-size: 1rem; color: #4e4337; }
.ap-consiglio .cons-perche::before { display: none; }
.ap-consiglio .cons-perche-capo { color: var(--ap-primario); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.ap-consiglio .bgl { min-height: 48px; padding: 0 18px; border-radius: 14px; background: var(--ap-primario); color: #fff; font-family: var(--sans); font-size: .98rem; letter-spacing: .01em; text-transform: none; box-shadow: 0 8px 18px -8px rgba(91, 58, 134, .7); outline: 0; }
.ap-consiglio .bgl::before, .ap-consiglio .bgl::after { display: none; }
.ap-consiglio .bgl .bgl-ico { background: rgba(255, 255, 255, .18); color: #fff; }
.ap-consiglio .bgl:active { transform: scale(.98); box-shadow: none; }
.ap-consiglio .cons-med a { color: var(--ap-primario); }
@media (max-width: 760px) { .ap-consiglio .cons-lastra { grid-template-columns: 1fr; } .ap-consiglio { padding: 16px 14px; } }

/* ══════════════════════════════════════════════════════════════════════
   HOME NOTTURNA (16/9/26) — Andrea: «anche la home va fatta simile» a registrazioni
   e meditazioni. Stessi colori della notte prugna (med.css), SOLO dentro #s-home:
   .scheda, .bottone e .occhiello restano come prima nel resto della community,
   e la biblioteca tiene il suo tema (Andrea: «quella è l'unica parte che ha un tema suo»).
   ══════════════════════════════════════════════════════════════════════ */
/* nelle aree notturne anche il fondo della pagina (e il rimbalzo dello scorrimento) è prugna */
html:has(body.buio) { background: #1a1226; }
body:has(#s-home.viva) { background: #1a1226; }
#s-home { color: #f3ede9; }
#s-home h1, #s-home h2, #s-home h3 { color: #fff; }
#s-home .tenue { color: #cfc4dd; }
#s-home .occhiello { color: #e2b95c; font-weight: 800; letter-spacing: .24em; }
#s-home .filo { color: #e2b95c; }
#s-home .scheda { background: #241a33; border-color: #372a4a; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
#s-home a.scheda { color: #f3ede9; }
#s-home a.scheda:hover { border-color: rgba(226, 185, 92, .55); box-shadow: 0 24px 46px -26px rgba(0, 0, 0, .95); }
#s-home .video { background: #120c1b; }
#s-home .bottone.chiaro { color: #2b1a4a; background: #fff; border-color: #fff; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8); }
#s-home .bottone.chiaro:hover { background: #f3ede9; border-color: #f3ede9; }
#s-home .numero { color: #f2d79a; }

/* ── lo spazio in fondo alle pagine (16/9/26) ──
   «.contenitore» (padding: 0 22px) annullava il padding di «main»: in fondo alla home i pulsanti
   di «Hai un problema tecnico?» finivano sotto il menu fisso. Qui il fondo torna libero;
   con la barra dell'audio vale la regola più forte di audio.css (body.con-audio main). */
main.contenitore { padding-bottom: calc(var(--au-menu, 74px) + 40px + env(safe-area-inset-bottom, 0px)); }