/* Sezioni: manifesto, spazi (parete + mosaico), dove siamo, come funziona,
   recensioni, libro degli ospiti, footer, motion. Catch-all delle sezioni
   di contenuto che non appartengono a nav/hero/suite/form. */

  /* ============ Manifesto ============ */
  /* Titolo centrato e tre pilastri in fila, senza foto (scelta di Paolo, 26/07:
     la maschera organica qui è bocciata e la foto non stava aggiungendo nulla).
     I tre punti NON sono una sequenza come i quattro passi di "Come funziona":
     sono tre ragioni parallele. Per questo il filo è lo stesso ma le icone
     restano nei quadratini chiari dei pilastri e non diventano dischi pieni:
     stesso alfabeto, due parole diverse, così le sezioni non sono gemelle. */
  .manifesto__head{ text-align:center; max-width:62ch; margin-inline:auto; }
  .manifesto__head .lead-in{ margin-inline:auto; }

  .pillars-wrap{
    --pic:clamp(46px,5.2vw,58px);
    --pgap:clamp(1.2rem,3vw,2.4rem);
    position:relative; margin-top:clamp(2.2rem,5vw,3.2rem);
  }
  /* stesso filo di "Come funziona", con due creste invece di tre.
     Larghezza DICHIARATA e non dedotta da left+right: un <svg> è un elemento
     sostituito, con width:auto tiene la misura intrinseca del viewBox.
     2 colonne + 2 gap = 2 * (100% + gap) / 3. */
  .pillars__thread{
    position:absolute; z-index:0; pointer-events:none;
    top:calc(var(--pic)/2); transform:translateY(-50%);
    height:clamp(22px,2.8vw,34px);
    left:calc(var(--pic)/2);
    width:calc(2 * (100% + var(--pgap)) / 3);
  }
  .pillars__thread path{
    fill:none; stroke:var(--hill-front); stroke-opacity:.55;
    stroke-width:2; stroke-dasharray:5 8; stroke-linecap:round;
    vector-effect:non-scaling-stroke;
  }
  .pillars{ list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:2rem var(--pgap); }
  .pillar{ position:relative; z-index:1; }
  .pillar__ic{ width:var(--pic); height:var(--pic); border-radius:14px;
    background:var(--card); color:var(--accent);
    display:grid; place-items:center; box-shadow:var(--shadow-sm); margin-bottom:1rem; }
  .pillar__ic .icon{ width:calc(var(--pic) * .42); height:calc(var(--pic) * .42); }
  .pillar h3{ margin:.1rem 0 .2rem; font-size:1.1rem; }
  .pillar p{ margin:0; color:var(--ink-soft); }

  /* sotto le tre colonne il filo si raddrizza, come nei quattro passi */
  

  /* ============ Spazi: fotografia a tutta pagina, velo per il testo ============ */
  /* Sesto giro (03/08): dopo i tentativi a taglio (onda verticale, sbieco,
     mezzaluna) la scelta è la più semplice — foto a tutta larghezza come parete
     di fondo della sezione, testo a sinistra su un velo sfumato color pagina.
     Via lo squircle e il blob dei giri precedenti: stesso posto nel tetto decorativo. */
  .spazi{ position:relative; }  /* niente overflow:hidden — la foto sconfina di proposito nelle fasce dei divisori */
  .spazi .wrap{ position:relative; z-index:1; }
  .spazi-top{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(1.6rem,4vw,3rem); align-items:center; align-content:center;
    min-height:clamp(440px,60vh,620px);
  }
  /* La foto prende TUTTA la larghezza della sezione e si infila SOTTO le colline
     dei divisori sopra e sotto (sconfina di un'altezza pari alla fascia dei .sep,
     e le creste — coi loro svg a z-index:2 — le si chiudono sopra). A far leggere
     il testo è un velo color pagina, opaco sotto la colonna di sinistra, che
     sfuma e lascia la fotografia pulita sulla destra. */
  .spazi__foto{
    position:absolute; left:0; right:0;
    /* Il +1px in cima non e' un ritocco a occhio: il .sep sopra ha margin-top:-1px
       (guadagna un pixel sulla banda precedente per chiudere il seam di subpixel,
       vedi base.css), quindi la sua cresta comincia un pixel piu' in alto della
       fine della sezione. La foto e' posizionata e il sep e' statico, percio' nel
       paint order la foto sta sopra: senza questa compensazione il pixel di foto
       non coperto dalla collina affiora come una riga sottile a tutta larghezza
       fra le suite e le parti comuni (segnalato da Paolo il 19/08 sull'anteprima,
       presente anche nella demo da sempre). Sotto resta il valore pieno: li' il
       sep successivo non ha lo stesso scarto. */
    top:calc(-1 * clamp(46px,6.5vw,92px) + 1px);
    bottom:calc(-1 * clamp(46px,6.5vw,92px));
    margin:0; z-index:0;
  }
  /* carosello a tutta larghezza: annulla il rapporto fisso ereditato da .carousel */
  .spazi__foto.carousel{ aspect-ratio:auto; }
  .spazi__foto .carousel__track{ height:100%; }
  .spazi__foto .carousel__slide{ height:100%; }
  .spazi__foto img{ display:block; width:100%; height:100%; object-fit:cover; }
  /* Niente più velo diagonale: con le foto che ruotano il testo non può dipendere
     da cosa c'è dietro. Il pannello pieno sotto il testo (regola .spazi-pannello)
     garantisce la leggibilità qualunque foto sia a schermo. */
  /* Frecce al CENTRO in basso, dentro la foto (08/08, richiesta di Paolo):
     la coppia sta affiancata sotto, non più ai lati. top/transform annullati
     rispetto alla regola base (che le centra in verticale), e l'hover viene
     ridefinito senza il translateY che le sposterebbe in alto. */
  /* la foto sconfina sotto la sezione di clamp(46px,6.5vw,92px) (fascia dei sep):
     l'offset dal basso deve saltare quella fascia, o i controlli finiscono
     sotto la cresta dell'ondina */
  .spazi__foto .carousel__nav{ top:auto; bottom:calc(clamp(46px,6.5vw,92px) + 1.2rem); transform:none; }
  .spazi__foto .carousel__nav:hover{ transform:scale(1.06); }
  .spazi__foto .carousel__nav--prev{ left:calc(50% - 3.3rem); }
  .spazi__foto .carousel__nav--next{ right:auto; left:calc(50% + .8rem); }
  /* niente pallini su questa parete (08/08): con 21 slide erano una fila lunga
     e ridondante rispetto alle frecce — la navigazione resta frecce + swipe */
  .spazi__foto .carousel__dots{ display:none; }
  .spazi__foto .carousel__dots{ left:auto; right:clamp(1.4rem,4vw,3rem); bottom:calc(clamp(46px,6.5vw,92px) + 2.15rem); justify-content:flex-end; }
  /* Il pannello: superficie piena su cui poggia il testo, così la leggibilità non
     dipende dalla foto di turno. Colore della banda scura della palette, quindi
     valgono le scale --on-deep già usate in "Come funziona" e nel footer. */
  
  

  /* ============ Spazi — VARIANTE B IN PROVA: mosaico ============ */
  /* Alternativa alla parete fotografica qui sopra: tutti gli scatti visibili
     senza clic — una dominante che guida, sei tile con didascalia. Stessi
     token delle foto in pagina (radius 14, shadow-md). Se vince, sostituisce
     la sezione .spazi; se perde, si rimuove questo blocco intero. */
  .mosaico{
    display:grid; grid-template-columns:repeat(12,1fr);
    gap:clamp(.9rem,1.8vw,1.3rem);
    margin-top:clamp(1.8rem,3.5vw,2.6rem);
  }
  .mosaico figure{ margin:0; display:flex; flex-direction:column; }
  /* height:auto, NON 100%: col 100% l'altezza della figure e quella dell'img
     si definiscono a vicenda (ciclo) e su mobile la didascalia della dominante
     sbordava sotto le tile. Le altezze le governano gli aspect-ratio;
     solo la dominante desktop riempie via flex. */
  .mosaico img{
    display:block; width:100%; height:auto; object-fit:cover;
    border-radius:14px; box-shadow:var(--shadow-md);
  }
  .mosaico figcaption{ margin-top:.5rem; font-size:.85rem; color:var(--ink-soft); }
  .mosaico__dom{ grid-column:1/9; grid-row:1/3; }
  /* la dominante è un carosello: prende l'altezza delle due tile a destra
     (flex:1 dentro la figure), radius e ombra stanno sul contenitore che
     ritaglia — alle immagini delle slide vanno azzerati, altrimenti negli
     scorrimenti si vedrebbero gli angoli tondi interni */
  .mosaico__dom .carousel{
    flex:1; min-height:0; aspect-ratio:auto;
    border-radius:14px; overflow:hidden; box-shadow:var(--shadow-md);
  }
  /* aspect-ratio qui NON decide il taglio a schermo (vince l'height definita dal
     flex): serve nel calcolo INTRINSECO della griglia — senza, una foto quadrata
     gonfia le righe e sparpaglia le tile di destra */
  .mosaico__dom .carousel img{ border-radius:0; box-shadow:none; height:100%; aspect-ratio:4/3; }
  /* stesso trattamento della parete «Le parti comuni» (08/08): frecce affiancate
     al centro in basso (hover senza il translateY della regola base) e niente
     pallini — la didascalia sotto la foto già dice a che punto del giro siamo */
  .mosaico__dom .carousel__nav{ top:auto; bottom:1.2rem; transform:none; }
  .mosaico__dom .carousel__nav:hover{ transform:scale(1.06); }
  .mosaico__dom .carousel__nav--prev{ left:calc(50% - 3.3rem); }
  .mosaico__dom .carousel__nav--next{ right:auto; left:calc(50% + .8rem); }
  .mosaico__dom .carousel__dots{ display:none; }
  .mosaico__t1{ grid-column:9/13; grid-row:1; }
  .mosaico__t2{ grid-column:9/13; grid-row:2; }
  .mosaico__t1 img,.mosaico__t2 img{ aspect-ratio:4/3; }
  .mosaico__b1{ grid-column:1/4; }
  .mosaico__b2{ grid-column:4/7; }
  .mosaico__b3{ grid-column:7/10; }
  .mosaico__b4{ grid-column:10/13; }
  .mosaico__b1 img,.mosaico__b2 img,.mosaico__b3 img,.mosaico__b4 img{ aspect-ratio:1/1; }
  

  .place{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,2.6rem); align-items:center; }
  .map-card{ border-radius:14px; overflow:hidden; box-shadow:var(--shadow-md); background:var(--card); border:1px solid var(--line); }
  /* La mappa e' un'immagine REALE, generata una volta sola e servita dal nostro
     dominio: a runtime non parte nessuna richiesta verso terzi, che e' il vincolo
     dichiarato nel manifesto ("niente cookie, nessun dato raccolto, ne' io ne'
     altri") ed e' la stessa ragione per cui la scheda Google resta un link e non
     un embed. Si rigenera con risorse/strategia/genera-mappa-statica.py.
     Fondo CARTO su dati OpenStreetMap: l'attribuzione in .map-credit e' dovuta. */
  .map-static{ position:relative; aspect-ratio:16/10; background:var(--surface2); }
  .map-static img{ display:block; width:100%; height:100%; object-fit:cover; }
  /* Il pin cade sulle coordinate vere del civico (45,8088813 N - 9,0402467 E),
     misurate sull'immagine generata: 25,01% da sinistra, 59,68% dall'alto.
     La Y e' -87,5% e non -100% perche' dentro il viewBox 24x24 la punta sta a
     y=21, cioe' all'87,5% del riquadro: con -100% il vertice resterebbe 12,5%
     di altezza sopra il posto vero. */
  /* display:flex e non il default: da elemento in linea il riquadro del pin
     sarebbe alto quanto la RIGA DI TESTO e non quanto l'icona, e la punta
     scivolerebbe di ~2% piu' in basso del posto vero (misurato: ~2% piu' in basso). */
  /* Il marcatore non e' piu' un pin generico ma LA CASA: foto tonda cerchiata dal
     verde del sito, con la punta sotto dello stesso verde. Il vertice della punta
     cade sul punto vero, e il conto torna perche' la punta occupa esattamente il
     padding-bottom del blocco: fondo del blocco = vertice = coordinate del civico. */
  .map-pin{ position:absolute; left:25.01%; top:59.68%; transform:translate(-50%,-100%);
    width:94px; padding-bottom:12px; filter:drop-shadow(0 5px 8px rgba(var(--shadow-rgb),.28)); }
  .map-pin img{ display:block; width:88px; height:66px; border-radius:6px; object-fit:cover;
    border:3px solid var(--accent); background:var(--surface2); }
  .map-pin::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    border:7px solid transparent; border-bottom:0; border-top:12px solid var(--accent); }
  /* Le etichette sono NOSTRE, nel carattere del sito: le tessere si scaricano senza
     scritte (light_nolabels) perche' le loro andavano a capo e si tagliavano fra loro.
     Le percentuali vengono dalle coordinate reali dei due luoghi. */
  .map-etichetta{ position:absolute; transform:translate(-50%,-50%); pointer-events:none;
    font:700 .72rem/1 'Karla',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
    text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.9); }
  .map-etichetta--paese{ transform:translate(0,-50%); font-size:.62rem; }
  .map-credit{ position:absolute; right:.4rem; bottom:.35rem; padding:.1rem .4rem; border-radius:5px;
    font-size:.62rem; line-height:1.5; color:var(--ink-soft);
    background:color-mix(in srgb,var(--card) 76%, transparent); }
  .map-credit a{ color:inherit; }
  .map-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; }
  .map-card__foot small{ color:var(--ink-soft); }

  /* ============ Come funziona (banda sabbia) ============
     I quattro passi sono un PERCORSO, non quattro colonne affiancate.
     Il filo che li unisce è lo stesso profilo di collina dei divisori,
     ridisegnato sottile e tratteggiato: non è un elemento decorativo nuovo,
     è la collina in scala piccola (tetto: bande · collina · maschera · chip). */
  .band--sun{ color:var(--ink); }
  .steps{
    --disc:clamp(54px,6.4vw,68px);
    --stepgap:clamp(1rem,2.6vw,1.9rem);
    position:relative; display:grid; grid-template-columns:repeat(4,1fr);
    gap:2rem var(--stepgap); margin-top:clamp(2rem,4vw,2.8rem);
  }
  /* Il filo va dal centro del primo disco al centro dell'ultimo: si ferma lì
     perché sul quarto passo il percorso ARRIVA, non prosegue.
     La larghezza è dichiarata, non dedotta da left+right: un <svg> è un
     elemento SOSTITUITO, quindi con width:auto tiene la sua misura intrinseca
     (rapporto del viewBox × height) e la coppia left/right viene ignorata.
     3 colonne + 3 gap = 3 * (100% + gap) / 4. */
  .steps__thread{
    position:absolute; z-index:0; pointer-events:none;
    top:calc(var(--disc)/2); transform:translateY(-50%);
    height:clamp(26px,3.4vw,42px);
    left:calc(var(--disc)/2);
    width:calc(3 * (100% + var(--stepgap)) / 4);
  }
  /* non-scaling-stroke: senza, lo stiramento orizzontale dell'SVG assottiglia
     il tratto sui segmenti piatti e lo ingrossa sulle creste. */
  .steps__thread path{
    fill:none; stroke:var(--hill-front); stroke-opacity:.55;
    stroke-width:2; stroke-dasharray:5 8; stroke-linecap:round;
    vector-effect:non-scaling-stroke;
  }

  .step{ position:relative; z-index:1; }
  .step__disc{
    width:var(--disc); height:var(--disc); border-radius:50%;
    background:var(--accent); color:var(--on-deep);
    display:grid; place-items:center; margin-bottom:1rem;
    font-family:'Young Serif',serif; font-size:calc(var(--disc) * .44); line-height:1;
  }
  .step h3{ font-size:1.12rem; }
  .step p{ color:var(--chip-ink); margin:0; }
  /* Sulla banda verde profonda i passi invertono: dischi avorio col numero scuro,
     filo tratteggiato in avorio velato, corpo testo nella scala --on-deep.
     (l'h3 è già coperto da .band--deep h3 in testa al foglio) */
  .band--deep .step__disc{ background:var(--on-deep); color:var(--band-deep); }
  .band--deep .steps__thread path{ stroke:var(--on-deep); stroke-opacity:.4; }
  .band--deep .step p{ color:var(--on-deep-body); }
  .band--deep .step:not(:last-child)::before{ border-left-color:color-mix(in srgb,var(--on-deep) 45%, transparent); }

  /* Sotto le quattro colonne il filo si raddrizza: tratteggio verticale
     che scende da un disco al successivo. */
  

  /* ============ Recensioni — fondo CHIARO, testo verde scuro (richiesta Roberto 24/07) ============ */
  .badges{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.4rem; }
  .badge{ display:inline-flex; align-items:center; gap:1rem; background:var(--card);
    border:1px solid var(--line); border-radius:14px; padding:.8rem 1.2rem; box-shadow:var(--shadow-sm); }
  /* il giallo sole su crema è illeggibile (1,4:1): per le stelle serve un ocra scuro.
     Selettore con la classe sull'elemento: .badge__meta b è più specifico e vincerebbe. */
  .badge__meta b.badge__stars{ color:var(--star); letter-spacing:.06em; }
  .badge__score{ font-family:'Young Serif',serif; font-size:2.2rem; line-height:1; color:var(--accent); }
  .badge__meta{ font-size:.9rem; color:var(--ink-soft); }
  .badge__meta b{ color:var(--ink); }
  /* ============ Carosello recensioni (card larghe) ============
     Riusa il componente .carousel delle suite: stessa meccanica, altra misura.
     Due card per volta su desktop, una su mobile — a tutta larghezza il testo
     supererebbe i 100 caratteri per riga e diventerebbe faticoso da leggere. */
  .quotes{ margin-top:2rem; }
  .quotes.carousel{ aspect-ratio:auto; }
  .quotes .carousel__track{ height:auto; align-items:stretch; gap:1.2rem; padding-bottom:.2rem; }
  .quotes .carousel__slide{ flex:0 0 calc(50% - .6rem); height:auto; scroll-snap-align:start; }
  

  /* qui i comandi stanno sotto, non sovrapposti: coprirebbero il testo */
  .carousel__controls{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.2rem; }
  .carousel__controls .carousel__nav{ position:static; transform:none; }
  .carousel__controls .carousel__nav:hover{ transform:scale(1.06); }
  .carousel__controls .carousel__nav:disabled{ opacity:.35; cursor:default; transform:none; }
  .carousel__controls .carousel__dots{ position:static; }

  .quote{ display:flex; flex-direction:column; gap:.9rem; margin:0; height:100%;
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.4rem 1.2rem; box-shadow:var(--shadow-sm); }
  .quote__mark{ font-family:'Young Serif',serif; font-size:2.6rem; line-height:.6; color:var(--sun); height:1rem; }
  .quote p{ margin:0; color:var(--ink); font-size:1.02rem; }
  .quote footer{ margin-top:auto; padding-top:.7rem; font-size:.85rem; color:var(--ink-soft); border-top:1px solid var(--line); }
  .quote footer b{ color:var(--ink); font-weight:700; }
  /* voto per-recensione (08/08): ciascuna fonte nella sua scala nativa — stelle
     per Google, punteggio su 10 per Booking; l'ocra dei badge fa da colore-voto
     comune. Valori verificati, non inventati: Google via scrape Apify 08/08
     (tutte 5 stelle), Booking dall'extranet di Roberto (tutte voto 10). */
  .quote__stars{ color:var(--star); letter-spacing:.08em; }
  /* il punteggio è TESTO (non glifo come le stelle): l'ocra --star su card
     bianca fa 3,05:1, sotto soglia per 13,6px bold → derivato più scuro
     mescolando verso l'ink, misurato ~5:1 al render */
  .quote__score{ color:color-mix(in srgb, var(--star) 62%, var(--ink)); font-weight:700; }

  /* --- Libro degli ospiti: chiude la sezione col registro emotivo (il ricordo, non la prova sociale).
         Le pagine vere fotografate da Roberto, sfogliabili sul posto. --- */
  .guestbook{ margin-top:clamp(2.4rem,5vw,3.4rem); padding-top:clamp(1.8rem,4vw,2.6rem); border-top:1px solid var(--line); }
  .guestbook h3{ margin:0 0 .5rem; }
  .guestbook__intro{ max-width:58ch; margin:0 0 1.8rem; font-size:1.06rem; color:var(--ink); }
  /* Carosello delle pagine DEFINITIVE (scelta di Paolo, 08/08, dopo carosello
     4:5, masonry e riga-del-tempo tutti scartati): gli scatti rifatti da lui,
     libro SCONTORNATO (png con alpha, webp con alpha), 16:9, in
     img/libro-ospiti/definitive/.
     Click su una pagina -> lightbox (la sola foto grande, overlay sopra la
     pagina: stessa URL, si chiude e si torna dov'eri — regola del 27/07). */
  .gb-car{ max-width:880px; margin:4.6rem auto 0; position:relative; }
  /* I cuori acquerello di Paolo (definitive/cuori/, png con alpha):
     sparsi per la sezione ad altezze e ascisse tutte diverse, ancorati alla
     SEZIONE e non al carosello — solo il --4 gli sta accostato, nessuno lo
     copre (verificato a misura). Taglie tutte diverse, 250 è l'originale
     (il doppio cuore), le altre solo ridotte. Animazione sullo span e
     rotazione sull'img (il translateY dei keyframes cancellerebbe il rotate).
     Decorativi puri: alt vuoto, niente click, via sotto i 900px, fermi con
     prefers-reduced-motion. */
  .guestbook{ position:relative; }
  .gb-heart{ position:absolute; z-index:2; pointer-events:none;
    animation:cardFloat 5.5s ease-in-out infinite; }
  .gb-heart img{ display:block; width:100%;
    filter:drop-shadow(0 6px 12px rgba(var(--photo-shadow-rgb),.16)); }
  .gb-heart--1{ width:125px; left:620px; top:82px; animation-duration:6.6s; }
  .gb-heart--1 img{ transform:rotate(6deg); }
  .gb-heart--2{ width:76px; left:-2px; top:30%; animation-delay:-2.1s; }
  .gb-heart--2 img{ transform:rotate(-8deg); }
  .gb-heart--3{ width:120px; right:-40px; top:56%; animation-delay:-3.4s; animation-duration:7.2s; }
  .gb-heart--3 img{ transform:rotate(9deg); }
  .gb-heart--4{ width:145px; left:-60px; bottom:7%; animation-delay:-1.2s; }
  .gb-heart--4 img{ transform:rotate(-5deg); }
  /* sotto i 1240px le fasce ai lati del carosello si stringono: i cuori
     laterali non avrebbero posto senza coprire il libro; resta il doppio
     cuore in alto a destra, che sta sopra il carosello, non di fianco */
  
  
  
  /* le foto sono scontornate (alpha): niente scatola — nessun radius né ombra
     di contenitore, l'ombra sta sul libro via drop-shadow, che segue il
     contorno dell'alpha invece del rettangolo */
  .gb-car .carousel{ aspect-ratio:16/9; overflow:hidden; }
  /* stesso trattamento di parete e dominante: frecce affiancate al centro in
     basso, hover senza translateY, niente pallini (la didascalia fa da guida) */
  .gb-car .carousel__nav{ top:auto; bottom:1.1rem; transform:none; }
  .gb-car .carousel__nav:hover{ transform:scale(1.06); }
  .gb-car .carousel__nav--prev{ left:calc(50% - 3.3rem); }
  .gb-car .carousel__nav--next{ right:auto; left:calc(50% + .8rem); }
  .gb-car .carousel__dots{ display:none; }
  .gb-car figcaption{ margin-top:.55rem; text-align:center; font-size:.88rem; color:var(--ink-soft); }
  .gb-open{ display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
  .gb-open img{ width:100%; height:100%; object-fit:contain; display:block;
    filter:drop-shadow(0 14px 26px rgba(var(--photo-shadow-rgb),.35)); }
  /* Lightbox: overlay a tutta finestra sopra la navbar (--z-overlay), scrim
     della banda scura, foto intera (contain), chiusura con X, sfondo ed Esc */
  .gb-lightbox{ position:fixed; inset:0; z-index:var(--z-overlay);
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--band-deep) 90%, black);
    padding:2.4rem clamp(3.2rem,7vw,5rem); }
  .gb-lightbox[hidden]{ display:none; }
  .gb-lightbox figure{ margin:0; max-width:min(1100px,100%); text-align:center; }
  .gb-lightbox img{ max-width:100%; max-height:80vh;
    filter:drop-shadow(0 18px 44px rgba(0,0,0,.55)); }
  .gb-lightbox figcaption{ margin-top:.7rem; color:var(--on-deep-soft); font-size:.9rem; }
  /* i comandi riusano il tondo di .carousel__nav; qui vanno riposizionati */
  .gb-lightbox .carousel__nav{ position:absolute; }
  .gb-lightbox__close{ top:1rem; right:1rem; left:auto; transform:none; }
  .gb-lightbox__close:hover{ transform:scale(1.06); }
  .gb-lightbox__prev{ left:clamp(.5rem,2vw,1.6rem); }
  .gb-lightbox__next{ right:clamp(.5rem,2vw,1.6rem); left:auto; }
  /* nota di lavorazione: esiste solo nella demo, esce in produzione */
  .demo-note{ max-width:70ch; margin:1.6rem 0 0; font-size:.82rem; font-style:italic; color:var(--ink-soft); }

  /* ============ Footer ============ */
  .foot{ background:var(--band-deep); color:var(--on-deep-soft); padding-block:clamp(2.4rem,5vw,3.4rem); }
  .foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
  .foot h4{ font-family:'Young Serif',serif; font-weight:400; color:var(--on-deep); font-size:1.1rem; margin:0 0 .6rem; }
  .foot a{ color:var(--on-deep-link); }
  .foot__brand{ font-family:'Young Serif',serif; font-size:1.4rem; color:var(--on-deep); }
  .foot small{ color:var(--on-deep-faint); }
  .foot__licenze{ font-size:.8rem; color:var(--on-deep-faint); margin-top:.6rem; }
  .foot__bye{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid color-mix(in srgb, var(--on-deep) 14%, transparent); color:var(--on-deep-link); }
  

  /* demo ribbon */
  .demo-flag{ position:fixed; bottom:14px; left:14px; z-index:var(--z-overlay);
    background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:.74rem; letter-spacing:.02em;
    padding:.4rem .7rem; border-radius:999px; box-shadow:var(--shadow-md); opacity:.92; }

  /* ============ Motion ============ */
  .reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .js-anim .reveal{ opacity:0; transform:translateY(18px); }
  .js-anim .reveal.in{ opacity:1; transform:none; }
  .hero h1,.hero__sub,.hero__io,.hero__cta,.hero__sign,.hero__mark{ opacity:0; transform:translateY(16px); animation:heroIn .9s var(--ease) forwards; }
  .hero__sub{ animation-delay:.12s; } .hero__io{ animation-delay:.18s; } .hero__sign{ animation-delay:.24s; } .hero__cta{ animation-delay:.36s; }
  @keyframes heroIn{ to{ opacity:1; transform:none; } }