/**
 * home-epica.css - Home "epica" brandogallo.com
 *
 * Generato da claude/design-system/proto/home-epica.html (proto 2026-07-14).
 * Tutto scoped sotto .bg-epica, il wrapper del contenuto in front-page.php.
 * Mappa delle trasformazioni applicate al CSS del proto:
 *   :root  ->  .bg-epica          (i token restano confinati alla home)
 *   body   ->  .bg-epica          (background/font/line-height sul wrapper)
 *   *      ->  .bg-epica, .bg-epica *
 *   html   ->  html:has(.bg-epica)
 *   .js X  ->  .js .bg-epica X
 * Le @keyframes sono prefissate bge-* per non collidere col resto del tema.
 * Le regole di .site-header / .site-footer del proto sono rimosse: header e
 * footer reali arrivano da get_header() / get_footer().
 *
 * NON modificare a mano senza riportare la modifica anche nel proto.
 */

/* ============ TOKEN ============ */
.bg-epica{
  --bg:#0C0C0B; --text:#F2F2F2; --accent:#E63929; --paper:#F5F0E8;
  --text-2:rgba(242,242,242,.5); --text-3:rgba(242,242,242,.35);
  --border:rgba(242,242,242,.08); --border-hover:rgba(242,242,242,.38);
  --overlay:rgba(0,0,0,.72);
  --f-serif:"Lora",Georgia,serif;
  --f-sans:"Manrope","Helvetica Neue",Arial,sans-serif;
  --f-logo:"Playfair Display",Georgia,serif;
  --pad-x:clamp(20px,4vw,40px); --pad-section:clamp(60px,8vw,100px);
  --gap-cols:clamp(24px,5vw,60px); --gap-block:clamp(20px,3vw,32px);
  --gap-text:1.5rem; --gap-inline:.75rem;
  --radius-img:5px; --radius-card:16px; --radius-btn:2px;
  --track-hero:-0.02em; --track-tight:-0.015em; --track-normal:-0.01em;
  --track-body:0; --track-cta:.04em; --track-ui:.1em; --track-wide:.14em; --track-wider:.18em;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-s:200ms; --dur-m:400ms; --dur-l:700ms;
  --max-width:1280px; --max-width-text:720px;
}

/* ============ OVERRIDE TEMA: sticky del finale ============
   Non presente nel proto: serve solo dentro WordPress.
   style.css dichiara `html, body {overflow-x:hidden}` per bloccare lo scroll
   orizzontale. Un antenato con overflow diverso da visible diventa il
   contenitore di scroll di riferimento per position:sticky — e siccome il body
   non scrolla, la cartolina del finale non si agganciava e scorreva via.
   `clip` taglia l'overflow orizzontale esattamente come `hidden` ma non crea un
   contenitore di scroll, quindi lo sticky torna a riferirsi al viewport.
   Scoped su .bg-epica: le altre pagine restano su `hidden`. */
html:has(.bg-epica), body.home:has(.bg-epica) { overflow-x: clip; }

/* ============ OVERRIDE ASTRA ============
   Non presente nel proto: serve solo dentro WordPress.
   Astra inietta inline `h1,h2,h3,h4,h5,h6{color:var(--ast-global-color-2)}`.
   Nel proto gli heading ereditavano il colore dal body; qui una dichiarazione
   diretta batte sempre un valore ereditato, a prescindere dalla specificita',
   quindi i titoli uscivano neri su fondo scuro. `inherit` li riporta a
   ereditare: dentro la cartolina finale, dove il fondo e' carta chiara,
   ereditano il colore scuro giusto senza bisogno di eccezioni.
   Sta prima delle regole del proto: a parita' di specificita' vincono quelle. */
.bg-epica h1, .bg-epica h2, .bg-epica h3,
.bg-epica h4, .bg-epica h5, .bg-epica h6 { color: inherit; }

/* Stesso meccanismo, sui font: custom-style.css dichiara
   `body, p, li, a, span, label, button, input, textarea, select {font-family:var(--f-sans)}`.
   Nel proto le parole della hero (`.hero__title .w`), i frammenti del manifesto
   (`.mfrag`) e il messaggio della cartolina sono span/p che EREDITANO il font dal
   contenitore: quella regola diretta li riportava tutti a Manrope, perdendo Lora
   sul titolo e Homemade Apple sulla cartolina. `inherit` li rimette a ereditare. */
.bg-epica p, .bg-epica li, .bg-epica a, .bg-epica span,
.bg-epica label, .bg-epica button, .bg-epica input,
.bg-epica textarea, .bg-epica select { font-family: inherit; }

/* ============ OVERRIDE TEMA: hero a filo sotto l'header ============
   Non presente nel proto, dove la hero parte da y=0.
   Queste regole stavano in home-hero.css (disattivato con la home precedente):
   il masthead resta sopra la hero, che risale sotto di lui con un margine
   negativo pari alla sua altezza. Senza, la hero parte a 80px e sopra resta una
   banda nera.
   `position:relative` sul masthead serve anche a un secondo scopo: annullare lo
   `position:sticky !important` inline di functions.php. Sulle altre pagine quello
   sticky non funziona perche' `overflow-x:hidden` lo rompe, e il masthead scorre
   via lasciando solo il custom sticky header; qui `overflow-x:clip` (vedi sopra)
   lo farebbe funzionare davvero, mostrando i due header insieme. Cosi' la home
   torna a comportarsi come tutte le altre pagine. */
body.home:has(.bg-epica) #masthead { position: relative !important; z-index: 10; }
body.home:has(.bg-epica) .site-content,
body.home:has(.bg-epica) .site-content > .ast-container { padding-top: 0 !important; }
.bg-epica .hero { margin-top: -80px; }

@media (max-width: 768px) {
  /* masthead nascosto: nessun offset da recuperare */
  .bg-epica .hero { margin-top: 0; }
}

/* custom-style.css @767.98px azzera `body.home [class*="hero"]{padding-inline:0}`:
   selettore ad attributo scritto per `.bg-home-hero`, che pero' prende anche
   `.hero__content` e su mobile lasciava il testo della hero attaccato al bordo.
   Ripristinato con specificita' superiore (0,3,1 contro 0,2,1). */
@media (max-width: 767.98px) {
  body.home .bg-epica .hero__content {
    padding-left: var(--pad-x) !important;
    padding-right: var(--pad-x) !important;
  }
}

/* ============ BASE ============ */
.bg-epica,.bg-epica *{margin:0;padding:0;box-sizing:border-box}
html:has(.bg-epica){scroll-behavior:smooth}
.bg-epica{
  background:#000; color:var(--text);
  font-family:var(--f-sans); font-weight:400; font-size:1rem; line-height:1.8;
  letter-spacing:var(--track-body);
  font-synthesis:none; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
.bg-epica img{max-width:100%;display:block}
.bg-epica a{color:inherit;text-decoration:none}
.bg-epica ::selection{background:rgba(242,242,242,.35);color:var(--text)}
.bg-epica ::-moz-selection{background:rgba(242,242,242,.35);color:var(--text)}
.bg-epica :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============ TIPOGRAFIA ============ */
.bg-epica .eyebrow{font-family:var(--f-sans);font-size:.68rem;font-weight:600;letter-spacing:var(--track-wider);text-transform:uppercase;color:var(--text-2)}
.bg-epica .label{font-family:var(--f-sans);font-size:.72rem;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-3)}
.bg-epica .hero-title{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.6rem,5.8vw,5rem);line-height:1.08;letter-spacing:var(--track-hero);text-align:left}
.bg-epica .display{font-family:var(--f-serif);font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:1.05;letter-spacing:var(--track-hero);text-align:center}
.bg-epica .h2{font-family:var(--f-serif);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.2;letter-spacing:var(--track-tight)}
.bg-epica .h2--xl{font-size:clamp(2.2rem,4.6vw,3.7rem);font-weight:400;line-height:1.14}
.bg-epica .h3{font-family:var(--f-sans);font-size:.82rem;font-weight:600;letter-spacing:var(--track-ui);text-transform:uppercase}
.bg-epica .body{font-size:1rem;line-height:1.8;color:var(--text)}
.bg-epica .body-lead{font-family:var(--f-serif);font-style:italic;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.65;letter-spacing:var(--track-normal)}
.bg-epica .caption-narrative{font-family:var(--f-serif);font-size:.85rem;line-height:1.55;color:var(--text-2)}
.bg-epica .caption-data{font-size:.75rem;line-height:1.45;letter-spacing:.01em;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ============ BUTTON & LINK — allineati a assets/css/buttons.css ============ */
.bg-epica .btn-primary, .bg-epica .link-op{
  font-family:var(--f-sans);font-size:.8125rem;font-weight:600;letter-spacing:var(--track-ui);
  text-transform:uppercase;line-height:1;
  display:inline-flex;align-items:center;gap:.5em;
  color:var(--text);cursor:pointer;text-decoration:none;
}
/* 04 · primaria — rettangolo outline, hover a riempimento */
.bg-epica .btn-primary{
  background:transparent;border:1px solid var(--text);border-radius:var(--radius-btn);
  padding:1rem 2.25rem;
  transition:background-color var(--dur-s) var(--ease-out),color var(--dur-s) var(--ease-out);
}
.bg-epica .btn-primary:hover, .bg-epica .btn-primary:focus-visible{
  background-color:var(--text);color:var(--bg);-webkit-text-stroke:.45px var(--bg);
}
/* 01 · link operativo — underline animato currentColor + freccia che scorre */
.bg-epica .link-op{background:transparent;border:0;padding:0;position:relative}
.bg-epica .link-op, .bg-epica .link-op:hover, .bg-epica .link-op:focus, .bg-epica .link-op:focus-visible, .bg-epica .link-op:active, .bg-epica .link-op:visited{color:var(--text)}
.bg-epica .link-op .text{position:relative;display:inline-block}
.bg-epica .link-op .text::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background-color:currentColor;transition:width var(--dur-s) var(--ease-out);
}
.bg-epica .link-op:hover .text::after, .bg-epica .link-op:focus-visible .text::after{width:100%}
.bg-epica .link-op .arrow{font-size:1.35em;font-weight:700;display:inline-block;line-height:1;transition:transform var(--dur-s) var(--ease-out)}
.bg-epica .link-op:hover .arrow, .bg-epica .link-op:focus-visible .arrow{transform:translateX(.25em)}

/* ============ LAYOUT ============ */
.bg-epica .section{padding:var(--pad-section) var(--pad-x)}
.bg-epica .wrap{max-width:var(--max-width);margin:0 auto}
.bg-epica .section-head{display:flex;flex-direction:column;gap:var(--gap-inline);margin-bottom:var(--gap-cols)}
.bg-epica .rule{border:none;border-top:1px solid var(--border)}

/* ============ REVEAL (scroll, entrata in dissolvenza + salita) ============ */
/* lo stato nascosto vive sotto .js: se lo script non parte il contenuto resta visibile.
   Entrata calma editoriale: solo opacity + traslazione verticale, nessuna
   rotazione/prospettiva 3D (contraddiceva la sobrietà su titoli e immagini). */
/* Durate: 520ms sui blocchi pesanti. Erano 1200ms — con uno scroll normale un
   elemento attraversa il viewport in ~500ms, quindi l'animazione finiva quando
   era già uscito di scena: è questo che si leggeva come salto. Registro invariato
   (Premium: nessun overshoot, stessa easing), solo portato dal doppio del massimo
   di fascia al centro. La salita scende da 30 a 16px: a 520ms una traslazione di
   30px si legge come strappo, distanza e durata vanno tenute in proporzione.

   DUE CURVE, NON UNA. --ease-out è cubic-bezier(.22,1,.36,1), una decelerazione
   molto aggressiva: giusta per il movimento (un oggetto che rallenta arrivando a
   posto), sbagliata per l'opacità. Su 520ms portava l'immagine all'83% in 156ms —
   la dissolvenza *percepita* durava ~150ms e si leggeva come uno scatto, non come
   una dissolvenza. La luminosità l'occhio la legge in modo pressoché lineare,
   quindi l'opacità va su `linear`: la dissolvenza dura quanto dice il numero.
   (Su fondo #000 questa è già, otticamente, una dissolvenza dal nero:
   risultato = α × colore. Non serve un velo nero sopra, sarebbe la stessa cosa.) */
.bg-epica .reveal{
  transition:opacity 520ms linear,transform 520ms var(--ease-out);
}
.js .bg-epica .reveal{
  opacity:0;
  transform:translateY(16px);
}
.bg-epica .reveal.is-in{opacity:1;transform:none}
/* Lo stagger non sta più qui. I vecchi transition-delay fissi (data-delay 0/180/
   360/540 e il pattern nth-child sulle fasi) erano tarati sulla griglia desktop,
   dove una riga entra tutta insieme. In colonna singola ogni elemento tocca la
   soglia in un momento diverso ma si portava dietro il ritardo della griglia:
   chi stava sotto con ritardo 0 scavalcava chi stava sopra con ritardo 540.
   Misurate 42 inversioni a scroll veloce — vedi log 2026-07-29.
   Ora la cascata la calcola il JS all'innesco, in ordine di documento. */
/* elemento già scorso oltre il bordo alto: si mostra secco, senza cascata */
.bg-epica .reveal.no-anim, .bg-epica .reveal.no-anim img{transition:none}
/* Layer secondario: le foto in reveal (Progetto, Bio) si assestano da un lieve
   zoom (1.03→1), un filo dopo il contenitore — profondità senza rotazione.
   Solo su figure.reveal: mappa e feature-blog hanno già un loro movimento. */
.js .bg-epica figure.reveal img{transform:scale(1.03);transition:transform 900ms var(--ease-out) 140ms}
.bg-epica figure.reveal.is-in img{transform:none}
/* Reveal a TRE pesi.
   380ms — elementi minori (label, eyebrow, link operativo, righe FAQ): mezzo
     secondo su un'etichetta di due parole si legge come indugio.
   520ms — testo, titoli, card.
   760ms — le fotografie grandi. I 520ms nascono dall'argomento del tempo di
     permanenza in schermo ("l'elemento attraversa il viewport in ~500ms"): vale
     per una riga di testo, non per una foto a piena larghezza, che resta in scena
     per secondi ed è la cosa su cui ci si ferma. Dare a una fotografia il tempo
     del testo minore la faceva scattare. */
.bg-epica .label.reveal, .bg-epica .eyebrow.reveal, .bg-epica .link-op.reveal, .bg-epica .faq-grid details.reveal{transition-duration:380ms}
/* .blog-feature__media non è in questa lista: dichiara la propria transition più
   in basso nel foglio (ha l'hover) e la sua durata è scritta lì. */
.bg-epica figure.reveal, .bg-epica .mappa__shot.reveal{transition-duration:760ms}

/* ============ HEADER ============ */







@media(max-width:767px){}

/* ============ HERO ============ */
.bg-epica .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.bg-epica .hero__media{position:absolute;inset:0;z-index:0}
.bg-epica .hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
/* will-change solo mentre l'elemento è davvero in scena (classe messa dall'IO in fondo) */
.bg-epica .hero__media img.is-live, .bg-epica [data-prlx].is-live{will-change:transform}
.bg-epica .hero__media::after{
  content:"";position:absolute;inset:-2px;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.35) 40%,rgba(12,12,11,.92) 100%);
}
.bg-epica .hero__content{
  /* max-width comprende il padding (border-box): così il testo si allinea al .wrap
     delle sezioni, dove il pad-x sta fuori dal max-width e non rientra il contenuto */
  position:relative;z-index:1;width:100%;
  max-width:calc(var(--max-width) + var(--pad-x) * 2);margin:0 auto;
  /* padding-bottom generoso: lascia respirare lo scroll cue sotto i tasti.
     Il termine additivo serve su mobile, dove --pad-section scende a 60px e il
     cue (bottom 20px + ~30px di altezza) finiva addosso al CTA. */
  padding:calc(var(--pad-section)*.9) var(--pad-x) calc(var(--pad-section)*1.2 + clamp(2rem,5vh,3rem));
  display:flex;flex-direction:column;gap:clamp(1rem,2vh,1.5rem);
}
.bg-epica .hero__title{max-width:16ch}
.bg-epica .hero__title .w{display:inline-block;opacity:0;transform:translateY(.6em);animation:bge-wordUp 750ms var(--ease-out) forwards}
@keyframes bge-wordUp{to{opacity:1;transform:none}}
/* il lead entra dopo le parole del titolo (che finiscono ~1.3s): delay .9s per un
   passaggio di consegne fluido, non un vuoto. Riusa wordUp: fade + salita .6em. */
.bg-epica .hero__lead{max-width:72ch;color:var(--text);opacity:0;transform:translateY(.6em);animation:bge-wordUp 800ms var(--ease-out) .9s forwards}
.bg-epica .hero__cta{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;margin-top:.75rem;opacity:0;transform:translateY(.6em);animation:bge-wordUp 800ms var(--ease-out) 1.5s forwards}
/* Scroll cue — replica di assets/css/hero-scroll-cue.css (sito) */
.bg-epica .bg-hero-scroll-cue{
  position:absolute;bottom:clamp(20px,3vw,40px);left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  animation:bge-cue-fade-in 800ms 600ms var(--ease-out) backwards;
  transition:opacity var(--dur-s) var(--ease-out);
  -webkit-appearance:none;appearance:none;
}
.bg-epica .bg-hero-scroll-cue:hover{opacity:.7}
.bg-epica .bg-hero-scroll-cue:focus{outline:none}
.bg-epica .bg-hero-scroll-cue:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:2px}
.bg-epica .bg-hero-scroll-cue__label{
  font-family:var(--f-sans);text-transform:uppercase;font-size:.62rem;font-weight:600;
  letter-spacing:var(--track-wider);color:var(--text);
}
.bg-epica .bg-hero-scroll-cue__arrow{
  width:14px;height:18px;stroke:var(--text);stroke-width:1.25;fill:none;
  animation:bge-cue-bounce 1.8s var(--ease-out) infinite;
}
@keyframes bge-cue-fade-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes bge-cue-bounce{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(4px);opacity:1}}

/* ============ IL PROGETTO ============ */
/* label fuori dalla griglia (come la home); il titolo entra nella colonna testo
   così l'immagine si allinea alla sua quota, non a quella del label */
.bg-epica .progetto-label{margin-bottom:var(--gap-inline)}
/* stretch: la foto copre l'altezza della colonna testo — attacca al titolo
   e chiude sull'ultimo rigo */
.bg-epica .progetto-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap-cols);align-items:stretch}
.bg-epica .progetto-grid .col-text{display:flex;flex-direction:column;gap:var(--gap-text);max-width:56ch}
.bg-epica .progetto-grid figure{display:flex;min-height:0;overflow:hidden;border-radius:var(--radius-img)}
.bg-epica .progetto-grid img{border-radius:var(--radius-img);object-fit:cover;width:100%;height:100%;min-height:0}
@media(max-width:900px){
  .bg-epica .progetto-grid{grid-template-columns:1fr}
  .bg-epica .progetto-grid img{height:auto;aspect-ratio:3/2}
}
.bg-epica .progetto-grid .col-text p{color:var(--text-2)}
.bg-epica .progetto-grid .col-text p strong{color:var(--text);font-weight:600}

/* ============ METODO ============ */
/* Le sei fasi sono tutte in scena: elenco a sinistra, testo della fase
   sotto il cursore in dissolvenza nel pannello a destra. Nessuno scroll pinnato. */
.bg-epica .metodo-wrap{
  max-width:calc(var(--max-width) + var(--pad-x) * 2);margin:0 auto;
  padding:var(--pad-section) var(--pad-x);
}
/* Intestazione a tutta larghezza (titolo + intro), poi la griglia delle fasi. */
.bg-epica .metodo-head{margin-bottom:clamp(2.5rem,6vh,4rem)}
.bg-epica .metodo-titolo{display:flex;flex-direction:column;gap:var(--gap-inline);margin-bottom:var(--gap-inline)}
.bg-epica .metodo-intro{max-width:var(--max-width-text);color:var(--text-2)}
/* Sei fasi in una sola riga (desktop): i titoli (numero · nome) restano fissi,
   equidistanti, e non si spostano mai. La descrizione compare all'hover come card
   in overlay ancorata SOTTO il titolo puntato (fuori dal flusso: non muove i
   titoli, non ci va sopra). Vedi @media min-width:901. */
.bg-epica .fasi{
  display:flex;align-items:flex-start;
  column-gap:var(--gap-cols);
}
.bg-epica .fase{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  padding-top:.9rem;
  border-top:1px solid var(--border);
  transition:opacity var(--dur-s) var(--ease-out);
}
.bg-epica .fase__head{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.bg-epica .fase__num{
  font-family:var(--f-serif);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1;letter-spacing:var(--track-tight);
  color:var(--text-3);font-variant-numeric:tabular-nums;
}
.bg-epica .fase__name{
  font-family:var(--f-sans);font-weight:500;font-size:clamp(1.1rem,1.6vw,1.35rem);
  letter-spacing:var(--track-tight);
}
/* Descrizione a comparsa: da chiusa la riga della griglia è 0fr (altezza 0),
   il figlio ha overflow:hidden. Su desktop si apre all'hover della fase; il
   tap (.is-open, da JS) la apre su touch. Stessa animazione di altezza usata
   nell'accordion mobile. */
.bg-epica .fase__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-m) var(--ease-out);
}
.bg-epica .fase.is-open .fase__panel{grid-template-rows:1fr}
.bg-epica .fase__text{max-width:100%;color:var(--text-2);overflow:hidden;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.bg-epica .fase.is-open .fase__text{padding-top:.9rem}
/* L'apertura all'hover vale solo dove c'è un puntatore vero. Su touch il :hover
   resta appiccicato all'ultimo elemento toccato: teneva il pannello aperto anche
   dopo che il tap aveva già tolto .is-open — la fase "che non si chiude". */
@media(hover:hover){
  .bg-epica .fase:hover .fase__panel{grid-template-rows:1fr}
  .bg-epica .fase:hover .fase__text{padding-top:.9rem}
}
/* All'hover di una fase gli altri titoli si oscurano: la puntata attiva resta
   piena. Si oscura solo .fase__head, non l'intera .fase, così la linea di
   avanzamento (bordo superiore) resta indipendente e può restare accesa. */
@media(hover:hover){
  /* Oscura solo le ALTRE caselle-titolo; quella puntata resta piena → evidenziata.
     Il :not(:hover) evita la guerra di specificità che prima oscurava anche il
     titolo sotto il mouse. */
  .bg-epica .fase__head{transition:opacity var(--dur-s) var(--ease-out)}
  .bg-epica .fasi:has(.fase__head:hover) .fase:not(:hover) .fase__head, .bg-epica .fasi:has(.fase__panel:hover) .fase:not(:hover) .fase__head{opacity:.25}
}
/* Desktop wide: la descrizione esce dal flusso e diventa una card in overlay,
   ancorata sotto il titolo della fase puntata. I titoli non si spostano e la card
   non li copre (sta sotto, top:100%). La riga si riserva lo spazio sotto per
   accoglierla senza invadere la sezione seguente. Larghezza fissa di lettura,
   indipendente dalla colonna stretta; le colonne di destra si ancorano a destra
   per non uscire dal bordo. */
@media(min-width:901px){
  .bg-epica .fase{position:relative}
  .bg-epica .fasi{padding-bottom:clamp(8rem,15vh,11rem)}
  /* Aree di hover affiancate: ogni casella-titolo copre l'intera colonna + metà
     gap per lato, così tra un titolo e l'altro c'è sempre una testa in hover e la
     linea si estende con continuità (niente azzeramento negli spazi → niente
     scatti). Il padding ricompensa il margine negativo: il testo resta allineato. */
  .bg-epica .fase__head{
    box-sizing:border-box;
    width:calc(100% + var(--gap-cols));
    margin-inline:calc(var(--gap-cols) / -2);
    padding-inline:calc(var(--gap-cols) / 2);
  }
  /* Linea di avanzamento sopra le fasi: una riga unica e continua. Ogni fase
     controlla il proprio tratto (via ::before), esteso a coprire il column-gap
     verso la fase successiva così i tratti si saldano in una linea sola. Opaca a
     riposo; si accende fino alla fase col titolo puntato (selettori :has). */
  .bg-epica .fase{border-top-color:transparent}
  .bg-epica .fase::before{
    content:"";position:absolute;top:0;height:2px;
    left:0;right:calc(var(--gap-cols) * -1);
    background:var(--border);
    transition:background var(--dur-s) var(--ease-out);
  }
  .bg-epica .fase:last-child::before{right:10px} /* il tratto termina sul bordo sinistro del pallino: si toccano, senza sovrapporsi */
  /* Accensione fino alla fase puntata: la fase col titolo in hover, più tutte le
     precedenti (fasi che hanno, tra i fratelli successivi, un titolo in hover). */
  .bg-epica .fase:has(.fase__head:hover)::before, .bg-epica .fase:has(.fase__panel:hover)::before, .bg-epica .fase:has(~ .fase .fase__head:hover)::before, .bg-epica .fase:has(~ .fase .fase__panel:hover)::before{background:var(--text)}
  /* Pallino d'arrivo, collegato al termine della linea, stesso spessore del tratto
     (border 2px), centrato sull'asse della linea. Vuoto (ring) a riposo, pieno
     quando si arriva in fondo (titolo 06 puntato). */
  .bg-epica .fase:last-child::after{
    content:"";position:absolute;top:-4px;right:0;
    width:10px;height:10px;box-sizing:border-box;border-radius:50%;
    border:2px solid var(--border);background:transparent;
    transition:border-color var(--dur-s) var(--ease-out),background var(--dur-s) var(--ease-out);
  }
  .bg-epica .fase:last-child:has(.fase__head:hover)::after, .bg-epica .fase:last-child:has(.fase__panel:hover)::after{border-color:var(--text);background:var(--text)}
  .bg-epica .fase__panel{
    position:absolute;top:100%;left:0;
    display:block;width:min(340px,44vw);padding-top:.7rem;
    opacity:0;transform:translateY(-.4rem);pointer-events:none;z-index:2;
    transition:opacity var(--dur-s) var(--ease-out),transform var(--dur-s) var(--ease-out);
  }
  /* colonne della metà destra: la card si ancora a destra della colonna e il
     testo, pur restando giustificato, chiude l'ultima riga a destra. */
  .bg-epica .fase:nth-child(n+4) .fase__panel{left:auto;right:0}
  .bg-epica .fase:nth-child(n+4) .fase__text{text-align-last:right}
  /* La card compare all'hover della casella-titolo (.fase__head), non dell'intera
     colonna né dell'area sotto i titoli; resta aperta se il puntatore passa sulla
     card stessa. */
  .bg-epica .fase:has(.fase__head:hover) .fase__panel, .bg-epica .fase__panel:hover{opacity:1;transform:none;pointer-events:auto}
  .bg-epica .fase__text{overflow:visible;padding-top:0}
}
/* Indicatore del toggle (stella FAQ): solo mobile (vedi media query). */
.bg-epica .fase__toggle{display:none}
/* Sotto il desktop wide si torna alla griglia: due colonne su tablet, una su
   mobile. Qui la descrizione non è a comparsa orizzontale ma resta sotto il
   titolo (hover) o si apre al tap (.is-open). */
@media(max-width:900px){
  .bg-epica .metodo-intro{max-width:none}
  .bg-epica .fasi{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--gap-cols);
    row-gap:clamp(2.5rem,5vw,4rem);
  }
}
/* Mobile: una colonna e descrizione a comparsa al tap (accordion).
   Il testo lungo, tutto aperto, renderebbe la sezione altissima; qui resta
   chiuso finché non si tocca la fase. La classe .is-open è messa dal JS. */
@media(max-width:560px){
  .bg-epica .fasi{grid-template-columns:1fr}
  .bg-epica .fase{padding-top:1.1rem;gap:0} /* lo spazio col testo lo dà il pannello da aperto */
  /* il pointer sta sulla casella-titolo perché è lei l'area di tap, non l'intera fase */
  .bg-epica .fase__head{flex-direction:row;align-items:baseline;gap:.9rem;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .bg-epica .fase__name{margin-right:auto} /* spinge il toggle a fondo riga */
  /* Stella concava a 4 punte come nelle FAQ: quadrato/rombo da chiuso, dritta da aperto. */
  .bg-epica .fase__toggle{
    display:block;flex:0 0 auto;align-self:center;
    width:14px;height:14px;
    background-color:var(--text);
    clip-path:polygon(50% 0%, 72% 28%, 100% 50%, 72% 72%, 50% 100%, 28% 72%, 0% 50%, 28% 28%);
    transform:rotate(45deg);transition:transform var(--dur-s) var(--ease-out);
  }
  .bg-epica .fase.is-open .fase__toggle{transform:rotate(0deg)}
  /* Apertura animata: la riga della griglia passa da 0fr a 1fr, così l'altezza
     scorre fino alla misura esatta del testo. Il figlio ha overflow:hidden. */
  .bg-epica .fase__panel{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows var(--dur-m) var(--ease-out);
  }
  .bg-epica .fase.is-open .fase__panel{grid-template-rows:1fr}
  .bg-epica .fase__text{overflow:hidden;padding-top:.9rem}
}
/* Manifesto — blocco centrato, niente pin: tolta la scrittura scroll-driven,
   non c'è più nulla da "contenere" agganciando la sezione. Entra, appare per
   frammenti all'ingresso in viewport, poi lo scroll prosegue libero. */
.bg-epica .manifesto-pin{position:relative;background:#000;padding:var(--pad-section) var(--pad-x)}
.bg-epica .manifesto-sticky{
  min-height:60svh;
  display:flex;align-items:center;justify-content:center;
}
/* Size sul gradino .h2 della scala (TYPE_SCALE v6.4) — non un valore a occhio.
   Registro: Lora italic 400 (FONT_STACK vieta 500 italic, non è caricato).
   Line-height e tracking dal registro citazione (.blockquote), non da titolo:
   è un blocco da leggere. text-wrap:pretty come gli altri corsivi di testo. */
.bg-epica .manifesto{
  max-width:900px;margin:0 auto;text-align:center;
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.6;letter-spacing:var(--track-normal);
  text-wrap:pretty;
}
/* ============ CHI SONO ============ */
.bg-epica .bio-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-cols);align-items:center}
.bg-epica .bio-grid figure{overflow:hidden;border-radius:var(--radius-img);line-height:0}
.bg-epica .bio-grid img{border-radius:var(--radius-img);aspect-ratio:4/5;object-fit:cover;width:100%}
.bg-epica .bio-grid .col-text{display:flex;flex-direction:column;gap:var(--gap-text)}
.bg-epica .bio-grid .col-text p{color:var(--text-2);max-width:52ch}
@media(max-width:900px){.bg-epica .bio-grid{grid-template-columns:1fr}}

/* ============ PORTFOLIO ============ */
.bg-epica .portfolio{padding-left:0;padding-right:0}
.bg-epica .portfolio .section-head, .bg-epica .portfolio .portfolio-foot{
  max-width:calc(var(--max-width) + var(--pad-x) * 2);margin-left:auto;margin-right:auto;
  padding:0 var(--pad-x);
}
.bg-epica .strip{
  display:flex;gap:var(--gap-block);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad-x) 1.2rem;
  scrollbar-width:none;
  /* trackpad due dita: lo scorrimento orizzontale non deve innescare il "back" del browser */
  overscroll-behavior-x:contain;
  cursor:grab;
}
/* durante il trascinamento lo snap va spento: combatte con lo scrollLeft impostato da JS */
.bg-epica .strip.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.bg-epica .strip::-webkit-scrollbar{display:none}
.bg-epica .strip__item{
  flex:0 0 auto;width:min(1000px,88vw);scroll-snap-align:start;
  position:relative;
}
.bg-epica .strip__item a{display:block;position:relative;overflow:hidden;border-radius:var(--radius-img)}
/* Il drag nativo di link e immagini (quello che trascina l'url nei segnalibri)
   annulla la sequenza di pointer event e uccide il trascinamento della strip. */
.bg-epica .strip__item a, .bg-epica .strip__item img{user-select:none;-webkit-user-drag:none}
.bg-epica .strip__item img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform var(--dur-m) var(--ease-out)}
.bg-epica .strip__item a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(12,12,11,.82) 100%)}
.bg-epica .strip__item a:hover img{transform:scale(1.025)}
.bg-epica .strip__meta{
  position:absolute;left:clamp(1.2rem,3vw,2.5rem);bottom:clamp(1.2rem,3vw,2.2rem);z-index:1;
  display:flex;flex-direction:column;gap:.4rem;pointer-events:none;
}
.bg-epica .strip__index{font-family:var(--f-sans);font-size:.72rem;font-weight:600;letter-spacing:var(--track-wide);color:var(--text-2);font-variant-numeric:tabular-nums}
.bg-epica .strip__title{font-family:var(--f-serif);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.7rem);letter-spacing:var(--track-tight);line-height:1.1}
.bg-epica .portfolio-foot{margin-top:var(--gap-block);display:flex;justify-content:space-between;align-items:center}
.bg-epica .strip-nav{display:flex;gap:1.6rem}
.bg-epica .strip-nav button{
  background:none;border:none;color:var(--text);cursor:pointer;
  font-family:var(--f-sans);font-size:1.3rem;font-weight:400;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:.3rem;
  opacity:.7;transition:opacity var(--dur-s) var(--ease-out);
}
.bg-epica .strip-nav button:hover{opacity:1}
/* ---- Portfolio su mobile ---- */
@media(max-width:560px){
  /* Card in verticale: il 16/9 su schermo stretto lasciava una banda alta poco
     più di 190px, troppo poco per reggere il titolo. 4/5 tiene il peek della
     card successiva e non straborda oltre l'altezza dello schermo. */
  .bg-epica .strip__item img{aspect-ratio:4/5}
  /* con più altezza il gradiente può partire più in basso: scurisce quanto serve
     al titolo, non mezza fotografia */
  .bg-epica .strip__item a::after{background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(12,12,11,.82) 100%)}
  /* In riga il link andava a capo su due righe e finiva addosso alle frecce.
     Si impila: frecce subito sotto il carosello, link sotto. Entrambi allineati
     a sinistra sul --pad-x, in colonna con il titolo di sezione. */
  .bg-epica .strip{padding-bottom:.5rem}
  .bg-epica .portfolio-foot{flex-direction:column;align-items:flex-start;gap:1.3rem;margin-top:.6rem}
  .bg-epica .strip-nav{order:-1;align-self:flex-start;gap:1.9rem;margin-left:-.4rem} /* -.4rem: compensa il padding del bottone, il glifo cade sul filo del testo */
  .bg-epica .strip-nav button{padding:.5rem .4rem} /* area di tap più alta: il glifo resta nudo */
}

/* ============ MAPPA ============ */
.bg-epica .mappa{position:relative;overflow:hidden;padding:calc(var(--pad-section)*1.5) var(--pad-x);min-height:92vh;display:flex;align-items:center}
/* translateZ(0): promuove il media a layer compositato proprio, così immagine e overlay
   sono rasterizzati con lo stesso arrotondamento del clip di .mappa. Senza, a DPR
   frazionari (Windows 125%/150%) resta scoperta una riga di immagine chiara sul bordo. */
.bg-epica .mappa__media{position:absolute;inset:0;transform:translateZ(0)}
.bg-epica .mappa__media img{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);object-fit:cover;filter:brightness(.85)}
.bg-epica .mappa__media::after{
  /* inset allineato a quello dell'img: se l'overlay stesse a 0, con DPR frazionari
     (Windows 125%/150%) il clip di .mappa e il box del pseudo-elemento si arrotondano
     a pixel diversi e resta scoperta una riga di immagine sul bordo. */
  content:"";position:absolute;inset:-8px;
  background:linear-gradient(90deg,rgba(12,12,11,.9) 0%,rgba(12,12,11,.6) 45%,rgba(12,12,11,.3) 100%),
             linear-gradient(180deg,rgba(12,12,11,.7) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(12,12,11,.7) 100%);
}
.bg-epica .mappa__content{
  position:relative;z-index:1;width:100%;max-width:var(--max-width);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-cols);align-items:center;
}
.bg-epica .mappa__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-text)}
.bg-epica .mappa__text p{max-width:48ch;color:var(--text)}
.bg-epica .mappa__shot{
  width:100%;display:block;border-radius:var(--radius-img);
  border:1px solid var(--border-hover);
}
@media(max-width:900px){.bg-epica .mappa__content{grid-template-columns:1fr}}

/* ============ DAL BLOG ============ */
/* Un articolo in evidenza (foto + testo, come la .bg-home-feature della home reale),
   poi i recenti in tre colonne di sola tipografia: senza foto il blocco resta basso
   e non compete con portfolio e mappa, che qui sopra sono già tutti immagine. */
.bg-epica .blog-feature{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--gap-cols);align-items:center;
}
@media(max-width:900px){.bg-epica .blog-feature{grid-template-columns:1fr}}
/* L'opacità va elencata QUI. Questa regola sta più in basso di .reveal, ha la
   stessa specificità e usa la forma abbreviata: sovrascriveva l'intera transition
   del reveal, e l'opacità restava fuori lista — la foto in evidenza non sfumava,
   compariva di scatto. Difetto che c'era da prima dei tre pesi.
   Durata 760ms (peso fotografie) e curva lineare come gli altri reveal; il
   transform resta su --dur-m perché è l'hover, non l'entrata. */
.bg-epica .blog-feature__media{
  display:block;overflow:visible;border-radius:var(--radius-img);
  transform-origin:bottom center;
  transition:opacity 760ms linear,
             transform var(--dur-m) var(--ease-out),
             box-shadow var(--dur-m) var(--ease-out);
}
/* will-change è un preavviso, non una dichiarazione permanente: tenuto a riposo
   allocava un layer GPU per tutta la vita della pagina. Si accende sul puntatore,
   appena prima che serva davvero. */
@media(hover:hover){.bg-epica .blog-feature__media:hover{will-change:transform}}
.bg-epica .blog-feature__media img{
  aspect-ratio:3/2;object-fit:cover;width:100%;display:block;border-radius:var(--radius-img);
}
/* la carta grande si stacca dal piano: bump verticale + ombra soffusa, niente zoom */
.bg-epica .blog-feature__media:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.bg-epica .blog-feature__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-text)}
/* meta in riga: categoria · data · lettura — i punti sono generati, non digitati */
.bg-epica .blog-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.bg-epica .blog-meta__cat{
  font-family:var(--f-sans);font-size:.68rem;font-weight:600;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-2);
}
.bg-epica .blog-meta span + span::before{content:"·";margin-right:.5rem;color:var(--text-3)}
.bg-epica .blog-feature__title{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.14;letter-spacing:var(--track-tight);
  text-wrap:pretty;
}
.bg-epica .blog-feature__title a{background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size var(--dur-s) var(--ease-out)}
.bg-epica .blog-feature__title a:hover{background-size:100% 2px}
.bg-epica .blog-feature__excerpt{color:var(--text-2);max-width:46ch}
/* I recenti: filetto sopra ciascuno, come le voci committenti delle card servizio */
.bg-epica .blog-recenti{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 var(--gap-cols);margin-top:var(--pad-section)
}
@media(max-width:760px){.bg-epica .blog-recenti{grid-template-columns:1fr}}
.bg-epica .blog-recente{
  padding:0 0 1.4rem;
  display:flex;flex-direction:column;gap:.7rem;
}
.bg-epica .blog-recente__media{
  display:block;overflow:visible;border-radius:5px;margin-bottom:.2rem;
  transform-origin:bottom center;
  transition:transform var(--dur-m) var(--ease-out);
}
@media(hover:hover){.bg-epica .blog-recente:hover .blog-recente__media{will-change:transform}}
.bg-epica .blog-recente__media img{
  aspect-ratio:3/2;object-fit:cover;width:100%;display:block;border-radius:5px;
}
/* solo l'immagine si solleva come una carta pescata: sinistra inclina a sinistra,
   centrale resta dritta, destra inclina a destra. Solo con un puntatore vero: su
   touch il :hover resta appiccicato all'ultima card toccata, che restava
   sollevata e storta dopo il tap. */
@media(hover:hover){
  .bg-epica .blog-recente:hover .blog-recente__media{transform:translateY(-10px) rotate(-2deg)}
  .bg-epica .blog-recente:nth-child(3n-1):hover .blog-recente__media{transform:translateY(-10px)}
  .bg-epica .blog-recente:nth-child(3n):hover .blog-recente__media{transform:translateY(-10px) rotate(2deg)}
}
.bg-epica .blog-recente__title{
  font-family:var(--f-serif);font-weight:500;font-size:1.15rem;
  line-height:1.4;letter-spacing:var(--track-tight);text-wrap:pretty;
}
.bg-epica .blog-recente__arrow{
  margin-top:auto;font-size:1.1rem;line-height:1;color:var(--text-3);
  transition:transform var(--dur-s) var(--ease-out),color var(--dur-s) var(--ease-out);
}
.bg-epica .blog-recente:hover .blog-recente__arrow{transform:translateX(.25em);color:var(--text)}
.bg-epica .blog-foot{margin-top:var(--gap-cols)}
/* il titoletto dei recenti serve solo dove diventano carosello: in griglia le
   tre card si leggono già come blocco a sé */
.bg-epica .blog-recenti-label{display:none}
/* ---- Recenti su mobile: da colonna a carosello ----
   Impilati, i tre articoli occupavano quasi tre schermate per un contenuto
   secondario. In riga scorrevole ne resta una, e il taglio della card seguente
   dice che ce n'è dell'altra. Stesso meccanismo della strip portfolio. */
@media(max-width:560px){
  /* Titoletto: separa i recenti dall'articolo in evidenza, che senza stacco
     sembravano la sua coda. Il filetto fa da riga di sezione. */
  .bg-epica .blog-recenti-label{
    display:block;margin-top:2rem;margin-bottom:1.1rem;
    padding-top:1.1rem;border-top:1px solid var(--border);
  }
  .bg-epica .blog-recenti{
    display:flex;gap:var(--gap-block);margin-top:0;
    /* La corsia esce a filo schermo da entrambi i lati: l'overflow si ritaglia
       sul padding box, quindi le card che escono a sinistra si tagliano sul
       bordo dello schermo, non sul filo del testo. Il padding interno vale solo
       da fermo, per la prima card. */
    margin-inline:calc(var(--pad-x) * -1);
    padding:0 var(--pad-x) .6rem;
    /* niente scroll-snap: portava per forza alla card successiva. Il dito scorre
       libero e si ferma dove vuole. */
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .bg-epica .blog-recenti::-webkit-scrollbar{display:none}
  .bg-epica .blog-recente{flex:0 0 auto;width:min(300px,74vw);padding-bottom:0}
  /* Le card 2 e 3 nascono fuori dal viewport orizzontale: da sole resterebbero a
     opacity 0 e il taglio della successiva — l'unico invito a scorrere — non si
     vedrebbe. Appena la prima è rivelata, entrano insieme a lei. */
  .bg-epica .blog-recenti:has(.reveal.is-in) .reveal{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .bg-epica .blog-feature__media:hover{transform:none}
  .bg-epica .blog-recente:hover .blog-recente__media, .bg-epica .blog-recente:nth-child(3n-1):hover .blog-recente__media, .bg-epica .blog-recente:nth-child(3n):hover .blog-recente__media{transform:none}
  .bg-epica .blog-recente:hover .blog-recente__arrow{transform:none}
}

/* ============ SERVIZI ============ */
/* griglia 2x3 con media laterale — stesso pattern della .bg-services-grid reale */
.bg-epica .servizi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-block)}
@media(max-width:760px){.bg-epica .servizi-grid{grid-template-columns:1fr}}
.bg-epica .servizio{perspective:1400px}
.bg-epica .servizio__inner{
  position:relative;height:100%;
  transform-style:preserve-3d;
  transition:transform var(--dur-l) var(--ease-in-out);
}
/* :hover isolato in @media (hover: hover): su touch resta appiccicato dopo il
   tap e terrebbe la card girata anche dopo la rimozione di .is-flipped,
   rendendo il secondo tap apparentemente inefficace. */
@media (hover: hover){
  .bg-epica .servizio:hover .servizio__inner{transform:rotateX(-180deg)}
}
.bg-epica .servizio:focus-within .servizio__inner, .bg-epica .servizio.is-flipped .servizio__inner{transform:rotateX(-180deg)}
.bg-epica .servizio__front, .bg-epica .servizio__back{
  border:1px solid var(--border);border-radius:var(--radius-card);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:border-color var(--dur-s) var(--ease-out);
}
/* #000 come il body, non var(--bg) (#0C0C0B): su fondo nero puro si leggeva grigio.
   flex-direction:row -> media a lato: l'altezza della card e' il maggiore tra
   foto e testo, non la somma. Split 48/52 come .bg-card--media-side del tema. */
.bg-epica .servizio__front{background:#000;height:100%;overflow:hidden;display:flex;flex-direction:row;align-items:stretch}
.bg-epica .servizio__back{
  position:absolute;inset:0;transform:rotateX(-180deg);
  /* nero come il fronte: #000 del body, non var(--bg) (#0C0C0B) */
  background:#000;color:var(--text);border-color:var(--border);
  /* inchiostro rimappato su bianco: h4/num/label restano grigi, le voci bianche */
  --ink-2:var(--text-2); --ink-3:var(--text-3); --rule:var(--border);
  display:flex;flex-direction:column;gap:.6rem;
  padding:1.05rem 1.15rem 1.15rem;overflow:hidden;
}
.bg-epica .servizio:hover .servizio__front, .bg-epica .servizio:focus-within .servizio__front{border-color:var(--border-hover)}
/* niente aspect-ratio: la foto riempie l'altezza dettata dal body (align-items:stretch) */
.bg-epica .servizio__img{flex:0 0 48%;overflow:hidden}
.bg-epica .servizio__img img{width:100%;height:100%;object-fit:cover}
.bg-epica .servizio__body{flex:1 1 52%;min-width:0;padding:1.15rem 1.25rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.bg-epica .servizio .num{font-family:var(--f-sans);font-size:.68rem;font-weight:600;letter-spacing:var(--track-wide);color:var(--text-3);font-variant-numeric:tabular-nums}
/* riga meta: numero + label di categoria (eyebrow delle card servizio reali).
   Il separatore "·" sta sul numero, non sul label: così quando una categoria
   lunga ("Patrimonio culturale") va a capo, la seconda riga si allinea alla
   prima lettera della categoria e non al punto. Stessa regola in servizi-cards.css. */
.bg-epica .servizio__meta{display:flex;align-items:baseline;gap:.5rem}
.bg-epica .servizio__meta .num::after{content:"·";margin-left:.5rem}
.bg-epica .servizio__label{font-family:var(--f-sans);font-size:.68rem;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;line-height:1.2;color:var(--text-3)}
.bg-epica .servizio__back .servizio__label{color:var(--ink-3)}
.bg-epica .servizio h3{font-family:var(--f-sans);font-weight:500;font-size:1.05rem;letter-spacing:var(--track-tight);line-height:1.3}
.bg-epica .servizio p{font-size:.85rem;color:var(--text-2);line-height:1.55}
.bg-epica .servizio__back .num{color:var(--ink-3)}
.bg-epica .servizio__back h4{
  font-family:var(--f-sans);font-size:.72rem;font-weight:600;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-2);
}
/* 2 colonne: la card media-side e' larga e bassa, 6 voci in colonna singola non ci stanno */
.bg-epica .servizio__committenti{
  list-style:none;margin:0;padding:0;flex:1;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:1.5rem;align-content:start;
}
.bg-epica .servizio__committenti li{
  font-family:var(--f-sans);font-size:.85rem;line-height:1.4;letter-spacing:var(--track-normal);
  color:var(--text);border-top:1px solid var(--rule);padding:.38rem 0;
}
/* prima riga della griglia = primi due li, non solo il primo */
.bg-epica .servizio__committenti li:nth-child(-n+2){border-top:0;padding-top:0}
/* underline currentColor -> segue l'inchiostro.
   align-self:flex-end -> CTA a destra come la .bg-card__cta delle card servizio reali */
.bg-epica .servizio__back .link-op{margin-top:auto;align-self:flex-end;font-size:.85rem}
.bg-epica .servizio__back .link-op, .bg-epica .servizio__back .link-op:hover, .bg-epica .servizio__back .link-op:focus, .bg-epica .servizio__back .link-op:focus-visible, .bg-epica .servizio__back .link-op:active, .bg-epica .servizio__back .link-op:visited{color:var(--text)}
/* underline: nessun override, 1px come tutte le .link-op (DS buttons.css) */

/* ============ FAQ ============ */
.bg-epica .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap-cols)}
@media(max-width:900px){.bg-epica .faq-grid{grid-template-columns:1fr}}
.bg-epica .faq-grid details{border-top:1px solid var(--border);padding:1.4rem 0}
.bg-epica .faq-grid summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--f-serif);font-weight:500;font-size:1.15rem;letter-spacing:var(--track-tight);line-height:1.4;
}
.bg-epica .faq-grid summary::-webkit-details-marker{display:none}
/* Stella concava a 4 punte — quadrato da chiuso, rombo da aperto */
.bg-epica .faq-grid summary::after{
  content:"";flex:0 0 auto;width:16px;height:16px;align-self:flex-start;margin-top:.25rem;
  background-color:var(--text);
  clip-path:polygon(50% 0%, 72% 28%, 100% 50%, 72% 72%, 50% 100%, 28% 72%, 0% 50%, 28% 28%);
  transform:rotate(45deg);transition:transform var(--dur-s) var(--ease-out)
}
.bg-epica .faq-grid details[open] summary::after{transform:rotate(0deg)}
.bg-epica .faq-grid details p{margin-top:.9rem;font-size:.95rem;color:var(--text-2);line-height:1.7;max-width:56ch}

/* ============ CTA FINALE — cartolina pinnata + CTA che sale sopra ============ */
/* --finale-stop: quota d'arresto della CTA in vh sotto il centro del pin.
   La legge il JS (readStop) al load e al resize: qui sta il breakpoint. */
.bg-epica .finale-pin{position:relative;height:320vh;--finale-stop:12}
/* Su mobile con 12 il titolo comincia sul centro della foto. Con 14 la seconda
   riga chiude sul bordo inferiore e paragrafo + CTA restano sotto, su nero.
   Valore misurato a 390x844 e 375x667, non stimato: vedi log di sessione. */
@media(max-width:560px){.bg-epica .finale-pin{--finale-stop:14}}
.bg-epica .finale-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;place-items:center;padding:var(--pad-section) var(--pad-x);
}
.bg-epica .finale-sticky > .cartolina3d, .bg-epica .finale-sticky > .finale-cta{grid-area:1/1}   /* stack centrato */
/* Cartolina 3D dal territorio — flip retro→fronte legato allo scroll */
.bg-epica .cartolina3d{
  /* 100% è già netto del padding laterale dello sticky: la cartolina si allinea
     alla gabbia --pad-x come tutte le altre sezioni della home */
  width:min(430px,100%);aspect-ratio:3/2;perspective:950px;z-index:1;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.6)) drop-shadow(0 8px 12px rgba(0,0,0,.35));
}
/* CTA che scorre sopra la cartolina e si ferma centrata */
.bg-epica .finale-cta{
  z-index:3;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--gap-text);
}
.bg-epica .finale-cta .display{text-shadow:0 2px 40px rgba(12,12,11,.55)}
.bg-epica .finale-cta p{max-width:44ch;color:var(--text);text-shadow:0 1px 18px rgba(12,12,11,.7)}
.bg-epica .cartolina3d__inner{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
}
/* Questi due si muovono davvero a ogni frame, ma solo dentro il pin: il preavviso
   al compositor vale mentre la sezione è in scena, non per tutta la pagina.
   .is-live la mette lo stesso observer che pilota il finale (vedi JS). */
.bg-epica .finale-pin.is-live .cartolina3d__inner{will-change:transform}
.bg-epica .finale-pin.is-live .finale-cta{will-change:transform,opacity}
.bg-epica .cartolina3d__front, .bg-epica .cartolina3d__back{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:var(--radius-img);overflow:hidden;
}
/* fronte foto — bordo carta + vignettatura per profondità */
.bg-epica .cartolina3d__front{
  width:100%;height:100%;object-fit:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -10px 22px rgba(0,0,0,.3), inset 0 8px 16px rgba(0,0,0,.14);
}
.bg-epica .cartolina3d__back{
  transform:rotateY(180deg);
  background:var(--paper);color:#0C0C0B;
  display:grid;grid-template-columns:1.15fr 1fr;gap:1rem;
  padding:1.15rem 1.25rem;text-align:left;   /* stesso passo delle card .servizio__body */
  box-shadow:inset 0 0 0 1px rgba(12,12,11,.07);
}
/* texture carta */
.bg-epica .cartolina3d__back::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='0.55'/%3E%3C/svg%3E");
}
.bg-epica .cartolina3d__msg{
  position:relative;z-index:1;
  font-family:"Homemade Apple",cursive;font-size:clamp(.92rem,1.35vw,1.15rem);line-height:1.7;
  color:#26304d;   /* inchiostro blu-nero */
  border-right:1px solid rgba(12,12,11,.22);padding-right:1rem;
  display:flex;align-items:center;
}
/* l'inclinazione sta sul testo, non sul contenitore: così il filetto resta a piombo */
.bg-epica .cartolina3d__msg p{transform:rotate(-1.2deg)}
.bg-epica .cartolina3d__back p{color:#26304d;max-width:none}
.bg-epica .cartolina3d__dx{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end}

/* Francobollo — immagine reale, sfondo bianco tolto via fusione multiply */
.bg-epica .francobollo-img{
  width:98px;height:auto;
  margin:-.5rem -.5rem 0 0;   /* scavalca il padding della carta: più alto e più a destra */
  filter:contrast(1.03) saturate(1.04);
}
.bg-epica .cartolina3d__lines{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:13px;padding-top:10px}
.bg-epica .cartolina3d__lines span{
  min-height:1px;border-bottom:1px solid rgba(12,12,11,.28);
  font-family:"Homemade Apple",cursive;font-size:clamp(.58rem,.8vw,.72rem);line-height:1.85;
  color:#26304d;padding-left:.2em;white-space:nowrap;overflow:hidden;
}

/* ============ FOOTER ============ */


@media(max-width:900px){}
@media(max-width:560px){}










/* ============ IMMERSIVE LAYER (v4) ============ */
/* Grana fotografica su tutta la pagina — FERMA.
   Era animata (6 ripaint a schermo pieno ogni 800ms). A opacità .045 il movimento
   non si legge, il costo sì: da solo portava la media dei frame da 22ms a 58ms e
   l'82% dei frame oltre i 33ms su CPU di fascia media. La texture ferma dà lo
   stesso identico risultato visivo a riposo, che è come la si guarda. */
.bg-epica::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat:repeat;
  opacity:.045;
}
/* Parallax di profondità: le img marcate scalano e vengono traslate via JS
   (will-change è dichiarato con .is-live nella sezione HERO) */
.bg-epica .mappa__media img{transform:scale(1.18)}
/* (tilt 3D card portfolio rimosso: la strip si scorre con drag e trackpad) */
/* Manifesto — comparsa per frammenti: la frase si posa in pochi tratti sicuri,
   come appena scritta. Il blocco sale una volta (settle di 10px); ogni clausola
   entra mettendosi a fuoco (opacity + blur), in sequenza. Un caret finale
   lampeggia due volte e si spegne: la penna che si alza. Motion: archetipo
   Premium — decelerate --ease-out, 0 overshoot. Tempo: ~1,1s dall'ingresso
   all'ultimo frammento a fuoco. Era 2,7s più 4,4s di caret: con uno scorrimento
   normale il manifesto stava ancora scrivendosi quando era già fuori schermo. */
.bg-epica .manifesto{transform:translateY(10px);transition:transform 900ms var(--ease-out)}
.bg-epica .manifesto.is-in{transform:translateY(0)}
/* frammento inline: solo opacity+filter (translateY spezzerebbe il wrapping) */
.bg-epica .manifesto .mfrag{
  opacity:0;filter:blur(5px);
  transition:opacity 700ms var(--ease-out),filter 700ms var(--ease-out);
}
.bg-epica .manifesto .mfrag.on{opacity:1;filter:blur(0)}
/* caret finale: appare all'ultimo frammento, lampeggia due volte, poi si spegne */
.bg-epica .manifesto .mcaret{
  display:inline-block;width:2px;height:.86em;margin-left:.1em;
  background:var(--text);vertical-align:-.06em;opacity:0;
}
.bg-epica .manifesto .mcaret.blink{animation:bge-mcaret 1800ms linear forwards}
@keyframes bge-mcaret{
  0%{opacity:1}  20%{opacity:0}  35%{opacity:1}  55%{opacity:0}
  70%{opacity:1} 85%{opacity:1}  100%{opacity:0}
}
/* Rail capitoli fissa */
.bg-epica .rail{
  position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:20;
  display:flex;flex-direction:column;align-items:flex-end;gap:1.1rem;
  transition:opacity var(--dur-m) var(--ease-out);
}
/* nascosta finché si è sulla hero: l'indice apre il corpo del racconto, non la copertina */
.bg-epica .rail.is-hidden{opacity:0;pointer-events:none}
/* Sopra il footer esce in dissolvenza insieme al logo dello sticky header:
   stessa soglia (classe body messa da custom-header.js) e stessa transition. */
body.sticky-logo-hidden .bg-epica .rail{opacity:0;pointer-events:none}
.bg-epica .rail a{
  position:relative;
  font-family:var(--f-sans);font-size:.62rem;font-weight:600;letter-spacing:var(--track-wide);
  color:var(--text-3);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
  transition:color 140ms var(--ease-out),opacity var(--dur-s) var(--ease-out);
}
.bg-epica .rail a::before{content:"";width:14px;height:1px;background:currentColor;transition:width var(--dur-s) var(--ease-out)}
.bg-epica .rail a.on{color:var(--text)}
.bg-epica .rail a.on::before{width:26px}
/* Titolo del capitolo: fuori flusso (right:100%) così l'apparizione non
   sposta i numeri, che restano incolonnati sul bordo destro. */
.bg-epica .rail__label{
  position:absolute;right:calc(100% + .55rem);top:50%;
  white-space:nowrap;text-transform:none;letter-spacing:var(--track-ui);
  color:var(--text-2);pointer-events:none;
  opacity:0;transform:translate(6px,-50%);
  transition:opacity 220ms var(--ease-out) 40ms,transform 220ms var(--ease-out) 40ms;
}
/* Hover/focus dopo .on: a pari specificità vince l'ordine sorgente, così il
   capitolo attivo reagisce come gli altri quando lo si punta. */
.bg-epica .rail a:hover,.bg-epica .rail a:focus-visible{color:var(--text)}
.bg-epica .rail a:hover::before,.bg-epica .rail a:focus-visible::before{width:30px}
.bg-epica .rail a:hover .rail__label,.bg-epica .rail a:focus-visible .rail__label{
  opacity:1;transform:translate(0,-50%)
}
/* Messa a fuoco: i capitoli non puntati arretrano invece di restare tutti accesi. */
.bg-epica .rail:hover a:not(:hover){opacity:.4}
.bg-epica .rail:focus-within a:not(:focus-visible){opacity:.4}
@media(max-width:1100px){.bg-epica .rail{display:none}}

/* ============ REDUCED MOTION ============ */
/* Crossfade su hover solo dove il puntatore esiste davvero (vedi nota sul flip). */
@media (prefers-reduced-motion: reduce) and (hover: hover){
  .bg-epica .servizio:hover .servizio__back{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  html:has(.bg-epica){scroll-behavior:auto}
  /* Metodo mobile: apertura fase senza animazione di altezza */
  .bg-epica .fase__panel, .bg-epica .fase__toggle{transition:none}
  /* Flip servizi -> crossfade */
  .bg-epica .servizio{perspective:none}
  .bg-epica .servizio__inner{transform:none !important;transition:none}
  .bg-epica .servizio__front, .bg-epica .servizio__back{-webkit-backface-visibility:visible;backface-visibility:visible}
  .bg-epica .servizio__back{transform:none;opacity:0;pointer-events:none;transition:opacity var(--dur-s) linear}
  .bg-epica .servizio:focus-within .servizio__back, .bg-epica .servizio.is-flipped .servizio__back{opacity:1}
  .bg-epica .hero__title .w{animation:none;opacity:1;transform:none}
  .bg-epica .hero__lead{animation:none;opacity:1;transform:none}
  .bg-epica .hero__cta{animation:none;opacity:1;transform:none}
  .bg-epica .hero__media img{transform:none !important}
  .bg-epica .bg-hero-scroll-cue{animation:none}
  .bg-epica .bg-hero-scroll-cue__arrow{animation:none;opacity:.7}
  /* .js per battere la specificità di .js .reveal: resta la sola dissolvenza.
     I selettori dei tre pesi vanno ripetuti: sono più specifici di .reveal e
     altrimenti reimporrebbero qui le loro durate (380/760ms). */
  .bg-epica .reveal, .bg-epica .label.reveal, .bg-epica .eyebrow.reveal, .bg-epica .link-op.reveal, .bg-epica .faq-grid details.reveal, .bg-epica figure.reveal, .bg-epica .mappa__shot.reveal, .bg-epica .blog-feature__media.reveal{
    transition:opacity var(--dur-m) linear
  }
  .js .bg-epica .reveal{transform:none}
  .js .bg-epica figure.reveal img{transform:none}
  .bg-epica .strip__item a:hover img{transform:none}
  /* body::after: la grana è ferma per tutti, non serve più spegnerla qui */
  .bg-epica .mappa__media img{transform:none !important}
  .bg-epica .manifesto{transform:none;transition:none}
  .bg-epica .manifesto .mfrag{opacity:1;filter:none;transition:none}
  .bg-epica .manifesto .mcaret{display:none}
  .bg-epica .metodo-head{margin-bottom:var(--gap-cols)}
  .bg-epica .link-op .text::after, .bg-epica .link-op .arrow, .bg-epica .btn-primary{transition:none}
  /* Rail: resta la dissolvenza del titolo, niente crescita del tratto né scorrimento */
  .bg-epica .rail a::before{transition:none}
  .bg-epica .rail__label{transform:translateY(-50%);transition:opacity var(--dur-s) linear}
  .bg-epica .rail a:hover .rail__label, .bg-epica .rail a:focus-visible .rail__label{transform:translateY(-50%)}
  .bg-epica .hero__content{transform:none !important}
  .bg-epica .finale-pin{height:auto}
  .bg-epica .finale-sticky{position:static;height:auto;display:block;overflow:visible;padding:var(--pad-section) var(--pad-x)}
  .bg-epica .finale-sticky > .cartolina3d, .bg-epica .finale-sticky > .finale-cta{grid-area:auto}
  .bg-epica .cartolina3d{margin:0 auto}
  .bg-epica .cartolina3d__inner{transform:none !important} /* mostra il fronte (foto) */
  .bg-epica .finale-cta{transform:none !important;opacity:1 !important;margin-top:var(--pad-section)}
}