/* ============================================================
   TAMO — Foglio di stile
   Palette e caratteri secondo 03_Identita_marca.md
   ============================================================ */

/* ---------- 1. Token ---------- */

:root{
  /* Palette di marca */
  --travertino:        #E6DFD1;
  --travertino-chiaro: #F6F7F2;
  --travertino-scuro:  #D8CFBD;
  --basalto:           #1A1917;
  --basalto-tenue:     #4C4740;
  --porfido:           #6E2A38;
  --bronzo:            #A87B3C;
  --bronzo-chiaro:     #C99B58;
  --oro:               #E3C07C;

  /* Ruoli */
  --fondo:        var(--travertino);
  --fondo-scheda: var(--travertino-chiaro);
  --testo:        var(--basalto);
  --testo-2:      var(--basalto-tenue);
  --bordo:        rgba(26,25,23,.14);
  --bordo-tenue:  rgba(26,25,23,.08);

  /* Caratteri */
  --display: "Cinzel", "Optima", Georgia, serif;
  --testo-f:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Misure */
  --max:     1200px;
  --max-str: 720px;   /* colonna di lettura */
  --gutter:  clamp(20px, 5vw, 64px);
  --sez-y:   clamp(80px, 11vw, 148px);

  /* Movimento */
  --e-out:  cubic-bezier(.16,.84,.44,1);
  --e-soft: cubic-bezier(.33,1,.68,1);
}

/* ---------- 2. Base ---------- */

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--testo);
  font-family:var(--testo-f);
  font-size:17px;              /* mai sotto 16: pubblico over 50 */
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:.005em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.3rem, 5.4vw, 4.15rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.9rem, 3.9vw, 3rem); }
h3{ font-size:clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing:0; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--oro); color:var(--basalto); }

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

/* ---------- 3. Impianto ---------- */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sezione{ padding-block:var(--sez-y); position:relative; }
.sezione--chiara{ background:var(--travertino-chiaro); }
.sezione--scura{ background:var(--basalto); color:var(--travertino); }
.sezione--scura .occhiello{ color:var(--bronzo-chiaro); }
.sezione--scura .filo::after{ background:rgba(230,223,209,.22); }

.stretta{ max-width:var(--max-str); }

/* Occhiello — registro burocratico, IBM Plex Mono maiuscoletto */
.occhiello{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bronzo);
  margin:0 0 1.15rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.occhiello::before{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  flex:none;
  transform-origin:left;
  animation:filoIn .8s var(--e-out) both;
}

.sommario{
  font-size:clamp(1.05rem, 1.35vw, 1.2rem);
  color:var(--testo-2);
  max-width:60ch;
  margin-top:1.35rem;
}

/* ---------- 4. Marchio ---------- */

/* Lastra incisa: capitali romane, oro nel solco, luce a 25° da alto-sinistra */
.marchio{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.30em;          /* le capitali lapidarie vogliono aria */
  text-transform:uppercase;
  line-height:1;
  display:inline-block;
  padding-right:.30em;           /* compensa lo spazio finale */
  /* Oro profondo: sul travertino chiaro le tonalità pallide sparivano.
     I toni scuri fanno il contrasto, il colpo di luce centrale fa il metallo. */
  background:linear-gradient(96deg,
      #4A3210 0%, #6E4C1C 22%, #A87B3C 42%,
      #E8CB8E 51%, #A87B3C 60%, #6E4C1C 80%, #4A3210 100%);
  background-size:220% 100%;
  background-position:88% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* solco: ombra chiara in alto-sx, scura in basso-dx */
  filter:drop-shadow(-.5px -.5px 0 rgba(255,255,255,.6))
         drop-shadow(.5px .9px .8px rgba(26,25,23,.5));
}
/* su fondo scuro il solco si inverte: l'oro torna chiaro */
.sezione--scura .marchio,
.piede .marchio{
  background:linear-gradient(96deg,
      #8A6428 0%, var(--bronzo) 24%, var(--oro) 44%,
      #FFF0CE 51%, var(--oro) 58%, var(--bronzo) 78%, #8A6428 100%);
  background-size:220% 100%;
  background-position:88% 0;
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
.marchio--vivo{ animation:oroSweep 7s var(--e-soft) 1.2s infinite; }

@keyframes oroSweep{
  0%,72%,100%{ background-position:88% 0; }
  86%        { background-position:12% 0; }
}

/* ---------- 5. Barra di navigazione ---------- */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  padding-block:.85rem;
  transition:background .45s var(--e-out), box-shadow .45s var(--e-out),
             padding .45s var(--e-out), backdrop-filter .45s;
}
/* velo sotto la barra: sopra la foto dell'apertura marchio e voci
   restavano illeggibili. Sfuma verso il basso, non si vede come fascia. */
.nav::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:230%;
  pointer-events:none;
  background:linear-gradient(180deg,
      rgba(230,223,209,.96) 0%, rgba(230,223,209,.82) 42%,
      rgba(230,223,209,.42) 72%, rgba(230,223,209,0) 100%);
  transition:opacity .45s var(--e-out);
}
.nav.is-attaccata::before{ opacity:0; }
.nav__in{ position:relative; }
.nav__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.nav__marchio{
  font-size:clamp(1.5rem, 2.3vw, 1.9rem);
  text-decoration:none;
  transition:font-size .45s var(--e-out);
}
.nav__voci{
  display:flex;
  align-items:center;
  gap:clamp(1rem, 2.2vw, 2.1rem);
  list-style:none;
  margin:0; padding:0;
}
/* :not(.btn) è necessario, non cosmetico: questo selettore ha specificità
   maggiore di .btn e altrimenti impone il proprio colore anche al pulsante,
   che finiva grigio scuro su fondo nero. Il pulsante si colora da sé. */
.nav__voci a:not(.btn){
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  color:var(--testo);          /* sopra la foto il grigio spariva */
  position:relative;
  padding-block:.3rem;
  transition:color .25s;
}
.nav__voci a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--bronzo);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--e-out);
}
.nav__voci a:not(.btn):hover{ color:var(--testo); }
.nav__voci a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }

.nav.is-attaccata{
  background:rgba(246,247,242,.86);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:0 1px 0 var(--bordo-tenue), 0 8px 30px -18px rgba(26,25,23,.4);
  padding-block:.6rem;
}
.nav.is-attaccata .nav__marchio{ font-size:clamp(1.3rem, 1.9vw, 1.55rem); }

@media (max-width:820px){
  .nav__voci li:not(.nav__cta){ display:none; }
}

/* ---------- 6. Pulsanti ---------- */

.btn{
  --bg:var(--basalto);
  --fg:var(--travertino-chiaro);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--testo-f);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  padding:1rem 1.9rem;
  border:1px solid transparent;
  border-radius:2px;               /* lapidario: spigoli quasi vivi */
  background:var(--bg);
  color:var(--fg);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-out),
             color .3s, border-color .3s;
}
/* riempimento oro che sale dal basso */
.btn::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:linear-gradient(180deg, var(--bronzo-chiaro), var(--bronzo));
  transform:translateY(101%);
  transition:transform .48s var(--e-out);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -14px rgba(26,25,23,.55);
  color:var(--basalto);
}
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }

.btn--fantasma{
  --bg:transparent;
  --fg:var(--testo);
  border-color:var(--bordo);
}
.btn--fantasma:hover{ border-color:transparent; }

.btn--largo{ width:100%; }

/* ---------- 7. Apertura ---------- */

.hero{
  position:relative;
  min-height:min(100svh, 940px);
  display:flex;
  align-items:center;
  padding-block:clamp(120px,15vh,180px) clamp(60px,9vh,110px);
  overflow:hidden;
}
.hero__sfondo{
  position:absolute; inset:0;
  z-index:0;
}
.hero__sfondo img{
  width:100%; height:100%;
  object-fit:cover;
  /* 49%: tiene la coppia al centro del riquadro e spinge il quadro della
     ragazza al margine destro. La regia lo vuole dettaglio laterale, mai
     ritratto frontale grande. Così si legge anche l'orologio delle 22:22. */
  object-position:49% 50%;
  transform:scale(1.1);
  animation:respiro 22s ease-out both;
}
/* velo per la leggibilità del testo a sinistra */
.hero__sfondo::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(230,223,209,.97) 0%, rgba(230,223,209,.9) 30%,
                    rgba(230,223,209,.55) 50%, rgba(230,223,209,.1) 72%),
    linear-gradient(180deg, rgba(230,223,209,.5) 0%, transparent 22%, rgba(230,223,209,.35) 100%);
}

/* Su schermo stretto il taglio è severo: il testo occupa tutta la larghezza,
   quindi il velo diventa verticale e la foto resta un fondo tenue. */
@media (max-width:820px){
  .hero__sfondo img{ object-position:57% 46%; }
  .hero__sfondo::after{
    background:
      linear-gradient(180deg, rgba(230,223,209,.88) 0%, rgba(230,223,209,.9) 46%,
                      rgba(230,223,209,.72) 78%, rgba(230,223,209,.6) 100%);
  }
}
.hero__in{ position:relative; z-index:1; width:100%; }
/* misura in em, non in ch: con le capitali di Cinzel il "ch" è strettissimo
   e manderebbe il titolo su sei righe */
.hero h1{ margin-bottom:0; max-width:10.4em; }
.hero .sommario{ max-width:44ch; }
.hero__azione{ margin-top:2.4rem; }
/* Karla, non monospazio: sotto il pulsante il registro burocratico
   raffreddava il messaggio proprio nel punto più caldo della pagina. */
.hero__nota{
  font-family:var(--testo-f);
  font-size:1.02rem;
  letter-spacing:0;
  color:var(--testo-2);
  margin-top:1.15rem;
}
.hero__nota b{ color:var(--testo); font-weight:600; }

@keyframes respiro{
  from{ transform:scale(1.13); }
  to  { transform:scale(1.02); }
}

/* Freccia di scorrimento */
.hero__giu{
  position:absolute;
  left:50%; bottom:26px;
  translate:-50% 0;
  z-index:1;
  width:24px; height:40px;
  border:1px solid var(--bordo);
  border-radius:14px;
  opacity:.65;
}
.hero__giu::after{
  content:"";
  position:absolute;
  left:50%; top:8px;
  translate:-50% 0;
  width:3px; height:7px;
  border-radius:2px;
  background:var(--bronzo);
  animation:goccia 2.1s var(--e-soft) infinite;
}
@keyframes goccia{
  0%,100%{ transform:translateY(0);    opacity:0; }
  22%    { opacity:1; }
  70%    { transform:translateY(15px); opacity:0; }
}
@media (max-height:700px){ .hero__giu{ display:none; } }

/* ---------- 8. Il problema — righe che si accendono ---------- */

.problema__elenco{
  list-style:none;
  margin:2.6rem 0 0;
  padding:0;
  border-top:1px solid var(--bordo-tenue);
}
.problema__elenco li{
  border-bottom:1px solid var(--bordo-tenue);
  padding:1.15rem 0 1.15rem 3.4rem;
  position:relative;
  font-size:1.06rem;
  color:var(--testo-2);
  transition:color .4s, padding-left .4s var(--e-out);
}
.problema__elenco li::before{
  content:attr(data-n);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--bronzo);
  position:absolute;
  left:0; top:1.35rem;
}
.problema__elenco li:hover{ color:var(--testo); padding-left:3.9rem; }

/* ---------- 9. Come funziona — filo che si disegna ---------- */

.passi{
  display:grid;
  gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2.8rem,5vw,4rem);
  position:relative;
}
@media (max-width:860px){ .passi{ grid-template-columns:1fr; } }

.passo{ position:relative; padding-top:3.1rem; }
.passo__n{
  position:absolute;
  top:0; left:0;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.2em;
  color:var(--bronzo);
}
/* filo orizzontale che collega i passi, si disegna allo scroll.
   Sta sotto il numero, non attraverso: altrimenti sembra barrato. */
.passo::before{
  content:"";
  position:absolute;
  top:1.75rem; left:0;
  width:100%; height:1px;
  background:var(--bordo);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s var(--e-out);
}
.is-vista .passo::before{ transform:scaleX(1); }
.is-vista .passo:nth-child(2)::before{ transition-delay:.18s; }
.is-vista .passo:nth-child(3)::before{ transition-delay:.36s; }

.passo h3{ margin-bottom:.65rem; }
.passo p{ color:var(--testo-2); font-size:1rem; }

/* ---------- 10. Registro delle conferme — 52 settimane ---------- */

.registro{
  background:var(--travertino-chiaro);
  border:1px solid var(--bordo);
  border-radius:3px;
  padding:clamp(1.6rem,3.4vw,2.6rem);
  margin-top:clamp(3rem,5vw,4.2rem);
  box-shadow:0 26px 50px -40px rgba(26,25,23,.6);
}
.sezione--chiara .registro{ background:var(--travertino); }

.registro__testa{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.2rem 2rem;
  margin-bottom:1.7rem;
}
.registro__testa h3{ font-size:clamp(1.3rem,2vw,1.65rem); }
.registro__testa p{ color:var(--testo-2); font-size:.98rem; margin:.45rem 0 0; }

.registro__conta{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--testo-2);
  white-space:nowrap;
}
.registro__conta b{
  color:var(--bronzo);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* la griglia: 52 caselle = un anno */
.griglia{
  display:grid;
  grid-template-columns:repeat(26,1fr);
  gap:5px;
  margin-bottom:1.7rem;
}
@media (max-width:560px){ .griglia{ grid-template-columns:repeat(13,1fr); gap:4px; } }

.cella{
  aspect-ratio:1;
  border:1px solid var(--bordo-tenue);
  border-radius:1px;
  background:transparent;
  transition:background .45s var(--e-out), border-color .45s, transform .45s var(--e-out);
}
.cella.is-piena{
  background:linear-gradient(150deg, var(--oro), var(--bronzo));
  border-color:var(--bronzo);
}
.cella.is-nuova{ animation:incisione .6s var(--e-out) both; }

@keyframes incisione{
  0%  { transform:scale(.3); opacity:0; }
  55% { transform:scale(1.34); opacity:1;
        box-shadow:0 0 0 4px rgba(168,123,60,.22); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(168,123,60,0); }
}

.registro__piede{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.5rem;
}
.registro__esito{
  font-size:.98rem;
  color:var(--testo-2);
  min-height:1.5em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .45s var(--e-out), transform .45s var(--e-out);
}
.registro__esito.is-visibile{ opacity:1; transform:none; }

.registro__chiusa{
  margin-top:1.5rem;
  padding-top:1.3rem;
  border-top:1px solid var(--bordo-tenue);
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--testo-2);
}

/* ---------- 11. Cosa custodisci — 12 schede ---------- */

.voci{
  display:grid;
  gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:clamp(2.8rem,5vw,4rem);
  background:var(--bordo-tenue);
  border:1px solid var(--bordo-tenue);
}
.voce{
  background:var(--travertino-chiaro);
  padding:1.7rem 1.6rem 1.8rem;
  position:relative;
  transition:background .4s var(--e-out), transform .4s var(--e-out);
}
.sezione--chiara .voce{ background:var(--travertino); }
.voce::after{                       /* filo d'oro che entra da sinistra */
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--oro),var(--bronzo));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .45s var(--e-out);
}
.voce:hover{ transform:translateY(-3px); }
.voce:hover::after{ transform:scaleY(1); }
.voce h3{
  font-family:var(--testo-f);
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:.4rem;
}
.voce p{ font-size:.95rem; color:var(--testo-2); line-height:1.55; }
.voce__i{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--bronzo);
  display:block;
  margin-bottom:.75rem;
}

/* ---------- 12. Fasce con foto ---------- */

.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.4rem,5vw,4.5rem);
  align-items:center;
}
.duo--invertito .duo__foto{ order:-1; }
@media (max-width:880px){
  .duo{ grid-template-columns:1fr; gap:2.4rem; }
  .duo--invertito .duo__foto{ order:0; }
}

.duo__foto{
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:var(--travertino-scuro);
}
.duo__foto img{
  width:100%;
  /* height:auto è indispensabile, non cosmetico: gli attributi width e height
     nell'HTML valgono come altezza fissa e scavalcano aspect-ratio. Senza,
     la fascia della sicurezza risultava alta 982px invece di 459 — il doppio
     del dovuto, con una grande area vuota sotto. */
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.4s var(--e-out);
}
/* La seconda forma serve quando data-anima sta sulla foto stessa e non su un
   contenitore: in quel caso "is-vista" finisce sullo stesso elemento e il
   selettore discendente non matcherebbe mai — il sipario resterebbe alzato
   per sempre, lasciando un rettangolo vuoto al posto della foto. */
.is-vista .duo__foto img,
.duo__foto.is-vista img{ transform:scale(1); }

/* sipario che si alza sull'immagine */
.duo__foto::after{
  content:"";
  position:absolute; inset:0;
  background:var(--travertino);
  transform-origin:bottom;
  transition:transform 1s var(--e-out) .1s;
}
.is-vista .duo__foto::after,
.duo__foto.is-vista::after{ transform:scaleY(0); }

/* ---------- 13. Quote — barra della legittima ---------- */

.quote{
  margin-top:2.6rem;
  border:1px solid var(--bordo);
  border-radius:3px;
  overflow:hidden;
  background:var(--travertino-chiaro);
}
.sezione--chiara .quote{ background:var(--travertino); }

.quote__scelta{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-bottom:1px solid var(--bordo);
}
.quote__tab{
  flex:1 1 auto;
  min-width:132px;
  font-family:var(--testo-f);
  font-size:.9rem;
  font-weight:600;
  padding:.9rem .8rem;
  background:transparent;
  border:0;
  border-right:1px solid var(--bordo-tenue);
  color:var(--testo-2);
  cursor:pointer;
  position:relative;
  transition:color .3s, background .3s;
}
.quote__tab:last-child{ border-right:0; }
.quote__tab::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:100%; height:2px;
  background:var(--bronzo);
  transform:scaleX(0);
  transition:transform .4s var(--e-out);
}
.quote__tab:hover{ color:var(--testo); }
.quote__tab[aria-selected="true"]{ color:var(--testo); background:rgba(168,123,60,.06); }
.quote__tab[aria-selected="true"]::after{ transform:scaleX(1); }

.quote__corpo{ padding:clamp(1.4rem,3vw,2.2rem); }

.barra{
  display:flex;
  gap:2px;                   /* stacco fra i segmenti: li separa senza bordi */
  height:54px;
  border-radius:2px;
  overflow:hidden;
  border:1px solid var(--bordo);
  background:var(--travertino-scuro);
}
.barra__parte{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45em;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
  overflow:hidden;
  width:0;
  transition:width .85s var(--e-out);
}
.barra__frazione{ opacity:.85; }
/* nei segmenti stretti il nome verrebbe troncato a metà parola:
   sotto i 700px resta la sola frazione, il nome sta nella legenda */
@media (max-width:700px){
  .barra__nome{ display:none; }
  .barra__parte{ font-size:.82rem; letter-spacing:.04em; }
}
/* I due bronzi di prima — #A87B3C e #B8894A — erano indistinguibili:
   ΔE 4,8 a vista normale, contro una soglia minima di 15, e finivano
   adiacenti proprio nel caso "coniuge e un figlio". Questa terna è
   validata: ΔE 23 a vista normale, 20,7 con deuteranopia/protanopia.
   Il colore del testo segue la luminosità del segmento, mai bianco fisso:
   il bianco sul bronzo stava a 3,77:1, sotto la soglia di leggibilità. */
.barra__parte--coniuge  { background:var(--basalto-tenue);    color:#fff; }
.barra__parte--legittima{ background:var(--bronzo);           color:var(--basalto); }
.barra__parte--libera   { background:var(--travertino-scuro); color:var(--basalto); }

.legenda{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  margin-top:1.1rem;
  font-size:.92rem;
  color:var(--testo-2);
}
.legenda span{ display:flex; align-items:center; gap:.5rem; }
.legenda i{
  width:11px; height:11px;
  border-radius:1px;
  flex:none;
}
.quote__nota{
  font-size:.95rem;
  color:var(--testo-2);
  margin-top:1.2rem;
}
.quote__legge{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bronzo);
  margin-top:.9rem;
}

/* Avviso — accento porfido, usato di rado */
.avviso{
  margin-top:1.9rem;
  padding:1.2rem 1.4rem;
  border-left:3px solid var(--porfido);
  background:rgba(110,42,56,.05);
  font-size:.96rem;
  color:var(--testo-2);
  border-radius:0 2px 2px 0;
}
.avviso b{ color:var(--porfido); }

/* ---------- 14. Sicurezza ---------- */

.sicurezza{
  display:grid;
  gap:clamp(1.5rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
  margin-top:clamp(2.8rem,5vw,4rem);
}
.scudo{
  padding:1.9rem 1.7rem;
  border:1px solid rgba(230,223,209,.16);
  border-radius:3px;
  background:rgba(230,223,209,.035);
  transition:background .45s var(--e-out), border-color .45s, transform .45s var(--e-out);
}
.scudo:hover{
  background:rgba(230,223,209,.07);
  border-color:rgba(168,123,60,.5);
  transform:translateY(-3px);
}
.scudo h3{ margin-bottom:.6rem; color:var(--travertino-chiaro); }
.scudo p{ font-size:.97rem; color:rgba(230,223,209,.72); line-height:1.6; }
.scudo__i{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--bronzo-chiaro);
  display:block;
  margin-bottom:.85rem;
}

/* ---------- 15. Prezzo ---------- */

.prezzo{
  border:1px solid var(--bordo);
  border-radius:3px;
  background:var(--travertino-chiaro);
  padding:clamp(2rem,4.4vw,3.4rem);
  margin-top:clamp(2.4rem,4vw,3.2rem);
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 60px -46px rgba(26,25,23,.65);
}
.prezzo::before{                     /* luce radente da alto-sinistra, come la lastra */
  content:"";
  position:absolute;
  inset:-40% -10% auto;
  height:180%;
  background:radial-gradient(60% 50% at 22% 0%, rgba(227,192,124,.24), transparent 70%);
  pointer-events:none;
}
.prezzo__cifra{
  font-family:var(--display);
  font-size:clamp(3.4rem,9vw,6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  display:block;
  /* niente tabular-nums su una cifra grande e isolata: darebbe a ogni
     numero la larghezza dello zero e "99" risulterebbe slabbrato.
     Le cifre tabulari servono nelle colonne, non qui. */
}
.prezzo__unita{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--testo-2);
  display:block;
  margin-top:.9rem;
}
.prezzo__testo{
  max-width:52ch;
  margin:1.9rem auto 0;
  color:var(--testo-2);
}
.prezzo__regalo{
  display:inline-block;
  margin:1.9rem 0 0;
  padding:.85rem 1.5rem;
  border:1px solid var(--bronzo);
  border-radius:2px;
  background:rgba(168,123,60,.09);
  font-weight:700;
  font-size:1rem;
}
.prezzo__azione{ margin-top:2.1rem; }
.prezzo__sotto{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.09em;
  color:var(--testo-2);
  margin-top:1.2rem;
}

/* ---------- 16. Domande ---------- */

.faq{
  margin-top:clamp(2.4rem,4vw,3.4rem);
  border-top:1px solid var(--bordo);
}
.faq__voce{ border-bottom:1px solid var(--bordo); }
.faq__q{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
  text-align:left;
  font-family:var(--testo-f);
  font-size:clamp(1.02rem,1.5vw,1.14rem);
  font-weight:700;
  color:var(--testo);
  background:none;
  border:0;
  padding:1.5rem 0;
  cursor:pointer;
  transition:color .3s;
}
.faq__q:hover{ color:var(--bronzo); }
.faq__piu{
  flex:none;
  width:20px; height:20px;
  position:relative;
  margin-top:.25rem;
}
.faq__piu::before,.faq__piu::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  background:var(--bronzo);
  translate:-50% -50%;
  transition:transform .4s var(--e-out), opacity .3s;
}
.faq__piu::before{ width:14px; height:1.5px; }
.faq__piu::after { width:1.5px; height:14px; }
.faq__q[aria-expanded="true"] .faq__piu::after{ transform:rotate(90deg); opacity:0; }

.faq__r{
  overflow:hidden;
  height:0;
  transition:height .45s var(--e-out);
}
.faq__r > div{
  padding-bottom:1.6rem;
  padding-right:clamp(0px,6vw,60px);
  color:var(--testo-2);
  font-size:1.02rem;
}

/* ---------- 17. Chiusura ---------- */

.chiusura{ text-align:center; }
.chiusura h2{ max-width:11.5em; margin-inline:auto; }
.chiusura .btn{ margin-top:2.4rem; }

/* ---------- 18. Piè di pagina ---------- */

.piede{
  background:var(--basalto);
  color:rgba(230,223,209,.62);
  padding-block:clamp(3.4rem,6vw,5rem) 2.2rem;
  font-size:.94rem;
}
.piede__alto{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:2.8rem;
  border-bottom:1px solid rgba(230,223,209,.13);
}
@media (max-width:760px){ .piede__alto{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .piede__alto{ grid-template-columns:1fr; } }

.piede__marchio{ font-size:1.5rem; display:inline-block; }
.piede__firma{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  color:rgba(230,223,209,.45);
  margin-top:1rem;
}
.piede h4{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bronzo-chiaro);
  margin-bottom:1.1rem;
}
.piede ul{ list-style:none; margin:0; padding:0; }
.piede li{ margin-bottom:.65rem; }
.piede a{
  text-decoration:none;
  color:rgba(230,223,209,.72);
  transition:color .25s;
}
.piede a:hover{ color:var(--oro); }

.piede__legale{
  margin-top:2.4rem;
  font-size:.85rem;
  line-height:1.65;
  color:rgba(230,223,209,.5);
  max-width:88ch;
}
.piede__basso{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(230,223,209,.13);
  display:flex;
  flex-wrap:wrap;
  gap:.8rem 1.6rem;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:rgba(230,223,209,.42);
}

/* ---------- 19. Comparse allo scorrimento ---------- */

[data-anima]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--e-out), transform .85s var(--e-out);
  will-change:opacity, transform;
}
[data-anima].is-vista{ opacity:1; transform:none; }

/* ritardi a cascata */
[data-ritardo="1"]{ transition-delay:.08s; }
[data-ritardo="2"]{ transition-delay:.16s; }
[data-ritardo="3"]{ transition-delay:.24s; }
[data-ritardo="4"]{ transition-delay:.32s; }
[data-ritardo="5"]{ transition-delay:.40s; }
[data-ritardo="6"]{ transition-delay:.48s; }

/* le schede compaiono in sequenza da sole */
.voci .voce{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--e-out), transform .7s var(--e-out), background .4s;
}
.voci.is-vista .voce{ opacity:1; transform:none; }

/* filo decorativo sotto i titoli */
.filo{ position:relative; padding-bottom:1.4rem; }
.filo::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:56px; height:1px;
  background:var(--bordo);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--e-out) .2s;
}
.is-vista .filo::after,
.filo.is-vista::after{ transform:scaleX(1); }

@keyframes filoIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* apertura: entrata a cascata senza attendere lo scorrimento */
.hero [data-entra]{
  opacity:0;
  transform:translateY(22px);
  animation:entra 1s var(--e-out) forwards;
}
.hero [data-entra="1"]{ animation-delay:.15s; }
.hero [data-entra="2"]{ animation-delay:.3s;  }
.hero [data-entra="3"]{ animation-delay:.45s; }
.hero [data-entra="4"]{ animation-delay:.62s; }
.hero [data-entra="5"]{ animation-delay:.76s; }

@keyframes entra{ to{ opacity:1; transform:none; } }

/* ---------- 20. Chi preferisce meno movimento ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-anima],.hero [data-entra],.voci .voce{ opacity:1; transform:none; }
  .duo__foto::after{ transform:scaleY(0); }
  .hero__sfondo img{ transform:scale(1.02); }
}

/* ---------- 21. Pagine di testo (legale) ---------- */

.doc{
  padding-block:clamp(120px,15vh,175px) clamp(70px,9vw,110px);
}
.doc__testa{ margin-bottom:clamp(2.4rem,4vw,3.4rem); }
.doc__data{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--testo-2);
  margin-top:1.1rem;
}
.doc h2{
  font-size:clamp(1.25rem,2.1vw,1.55rem);
  margin:2.6rem 0 .9rem;
  padding-top:1.6rem;
  border-top:1px solid var(--bordo-tenue);
}
.doc h2:first-of-type{ border-top:0; padding-top:0; }
.doc p, .doc li{ color:var(--testo-2); font-size:1.03rem; }
.doc b, .doc strong{ color:var(--testo); font-weight:700; }
.doc ul{ padding-left:1.15rem; margin:0 0 1.1em; }
.doc li{ margin-bottom:.55rem; }

/* avviso di bozza, in porfido: si deve vedere */
.bozza{
  border:1px solid var(--porfido);
  border-left-width:3px;
  background:rgba(110,42,56,.06);
  border-radius:0 2px 2px 0;
  padding:1.15rem 1.35rem;
  margin-bottom:2.4rem;
}
.bozza p{ color:var(--testo); font-size:.98rem; }
.bozza b{ color:var(--porfido); }

.torna{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--testo-2);
  text-decoration:none;
  margin-bottom:1.6rem;
  transition:color .25s, gap .3s var(--e-out);
}
.torna:hover{ color:var(--bronzo); gap:.85rem; }
.torna::before{ content:"←"; }

/* ---------- 22. Modulo lista d'attesa ---------- */

.lista{
  max-width:560px;
  margin:2.6rem auto 0;
  text-align:left;
}
.lista__riga{
  display:flex;
  gap:.7rem;
}
@media (max-width:560px){ .lista__riga{ flex-direction:column; } }

.campo{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--testo-f);
  font-size:1.02rem;
  color:var(--testo);
  background:var(--travertino-chiaro);
  border:1px solid var(--bordo);
  border-radius:2px;
  padding:1rem 1.1rem;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.sezione--chiara .campo{ background:var(--travertino); }
.campo::placeholder{ color:rgba(76,71,64,.55); }
.campo:focus{
  outline:0;
  border-color:var(--bronzo);
  box-shadow:0 0 0 3px rgba(168,123,60,.16);
}
.campo[aria-invalid="true"]{
  border-color:var(--porfido);
  box-shadow:0 0 0 3px rgba(110,42,56,.13);
}

/* consenso: casella mai pre-spuntata, obbligatoria */
.consenso{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  margin-top:1.2rem;
  font-size:.95rem;
  line-height:1.55;
  color:var(--testo-2);
  cursor:pointer;
}
.consenso input{
  flex:none;
  width:20px; height:20px;
  margin:.15rem 0 0;
  accent-color:var(--bronzo);
  cursor:pointer;
}
.consenso a{ color:var(--bronzo); text-decoration:underline; text-underline-offset:2px; }
.consenso a:hover{ color:var(--basalto); }

.lista__errore{
  display:block;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--porfido);
  margin-top:.8rem;
  min-height:1.2em;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .3s var(--e-out), transform .3s var(--e-out);
}
.lista__errore.is-visibile{ opacity:1; transform:none; }

.lista__nota{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--testo-2);
  margin-top:1.3rem;
  line-height:1.7;
}

/* esito: la lastra si incide */
.lista__fatto{
  display:none;
  border:1px solid var(--bronzo);
  border-radius:2px;
  background:rgba(168,123,60,.08);
  padding:1.7rem 1.6rem;
  text-align:center;
}
.lista.is-fatto .lista__fatto{ display:block; animation:incisione .7s var(--e-out) both; }
.lista.is-fatto .lista__modulo{ display:none; }
.lista__fatto h3{
  font-size:clamp(1.2rem,1.9vw,1.45rem);
  margin-bottom:.6rem;
}
.lista__fatto p{ color:var(--testo-2); font-size:.98rem; }

/* il pulsante dentro il modulo non eredita lo stacco della chiusura:
   deve restare allineato al campo email */
.chiusura .lista .btn{ margin-top:0; }
.lista__riga .btn{ flex:none; white-space:nowrap; }

/* nota di bozza: in coda al documento, in piccolo */
.bozza-piede{
  margin-top:3.2rem;
  padding-top:1.4rem;
  border-top:1px solid var(--bordo-tenue);
  font-family:var(--mono);
  font-size:.72rem;
  line-height:1.75;
  letter-spacing:.04em;
  color:var(--testo-2);
}
.bozza-piede b{ color:var(--porfido); font-weight:500; }

/* tabella della cookie policy */
.tabella{
  width:100%;
  border-collapse:collapse;
  margin:1.4rem 0 1.1rem;
  font-size:.95rem;
}
.tabella th,.tabella td{
  text-align:left;
  padding:.75rem .9rem;
  border-bottom:1px solid var(--bordo-tenue);
  vertical-align:top;
}
.tabella th{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bronzo);
  border-bottom-color:var(--bordo);
}
.tabella td{ color:var(--testo-2); }
.tabella code{
  font-family:var(--mono);
  font-size:.88em;
  color:var(--testo);
  background:rgba(26,25,23,.05);
  padding:.15em .45em;
  border-radius:2px;
}
.tabella-avvolge{ overflow-x:auto; }

/* ---------- 23. Video messaggi ---------- */

/* il fondo della sezione video lo decide la classe della sezione */

.video__scena{
  margin:clamp(2.8rem,5vw,4rem) 0 0;
  position:relative;
}
.video__foto{
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:var(--basalto);
}
.video__foto img{
  width:100%;
  height:auto;              /* vedi la nota su .duo__foto img */
  aspect-ratio:16/9;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform 1.6s var(--e-out);
}
.is-vista .video__foto img,
.video__foto.is-vista img{ transform:scale(1); }
/* sipario, come le altre foto */
.video__foto::after{
  content:"";
  position:absolute; inset:0;
  background:var(--travertino);
  transform-origin:bottom;
  transition:transform 1s var(--e-out) .1s;
}
.is-vista .video__foto::after,
.video__foto.is-vista::after{ transform:scaleY(0); }

/* la schermata che vedono gli eredi, sovrapposta in basso a sinistra */
.video__didascalia{
  display:block;
  margin-top:1.2rem;
}
.video__eco{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.05rem,1.7vw,1.32rem);
  line-height:1.4;
  color:var(--testo);
  padding-left:1.1rem;
  border-left:2px solid var(--bronzo);
}
.video__eco b{ font-weight:700; }
.video__nota{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bronzo);
  margin-top:.75rem;
  padding-left:1.1rem;
}

@media (min-width:880px){
  .video__didascalia{
    position:absolute;
    left:clamp(1.5rem,3vw,2.6rem);
    bottom:clamp(1.5rem,3vw,2.6rem);
    max-width:26rem;
    margin:0;
    padding:1.4rem 1.6rem;
    background:rgba(246,247,242,.93);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:2px;
    box-shadow:0 20px 50px -30px rgba(0,0,0,.8);
  }
  .video__eco{ padding-left:0; border-left:0; }
  .video__nota{ padding-left:0; }
}

.video__passi{
  display:grid;
  gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2.6rem,4.5vw,3.6rem);
}
@media (max-width:760px){ .video__passi{ grid-template-columns:1fr; } }
.video__passi h3{
  font-family:var(--testo-f);
  font-size:1.04rem;
  font-weight:700;
  margin-bottom:.45rem;
}
.video__passi p{ color:var(--testo-2); font-size:.98rem; }

/* ---------- 24. Pulsante della barra, in bronzo ---------- */

/* Nero pieno in alto pesava sul travertino e rubava l'occhio al pulsante
   grande dell'apertura. Qui il richiamo è caldo e leggero; resta un solo
   pulsante nero per pagina, quello che conta davvero. */
.btn--bronzo{
  --bg:transparent;
  --fg:#6E4C1C;                  /* bronzo scuro: sul chiaro il bronzo pieno non regge */
  border-color:rgba(168,123,60,.55);
  font-weight:700;
}
.btn--bronzo::before{
  background:linear-gradient(180deg, var(--bronzo-chiaro), var(--bronzo));
}
.btn--bronzo:hover{
  color:var(--basalto);
  border-color:var(--bronzo);
  box-shadow:0 12px 24px -14px rgba(168,123,60,.8);
}
/* sul piede scuro il bronzo si schiarisce */
.piede .btn--bronzo{
  --fg:var(--oro);
  border-color:rgba(227,192,124,.45);
}

/* ---------- 25. La lastra in chiusura ---------- */

.lastra{
  margin:0 auto clamp(2.4rem,4.5vw,3.6rem);
  max-width:min(560px, 100%);
  /* la foto è già su fondo chiaro: niente cornice, si posa sulla pagina */
}
.lastra img{
  width:100%;
  height:auto;
  border-radius:2px;
  /* solo l'ombra dell'oggetto, appena accennata */
  filter:drop-shadow(0 18px 34px rgba(26,25,23,.18));
  transform:scale(.965);
  opacity:0;
  transition:transform 1.3s var(--e-out), opacity 1s var(--e-out);
}
.is-vista .lastra img{ transform:scale(1); opacity:1; }

@media (prefers-reduced-motion:reduce){
  .lastra img{ opacity:1; transform:none; }
}

/* ---------- 26. Sipari: il colore deve seguire la sezione ---------- */

/* Il sipario che copre le foto finché non compaiono era sempre travertino.
   Nella sezione scura diventava un rettangolo crema in mezzo al nero —
   ben visibile per tutto il secondo dell'animazione, e in modo permanente
   se la comparsa non scattava. Ogni fondo ha il suo sipario. */
.sezione--chiara .duo__foto::after,
.sezione--chiara .video__foto::after{ background:var(--travertino-chiaro); }

.sezione--scura .duo__foto::after,
.sezione--scura .video__foto::after{ background:var(--basalto); }

/* ---------- 27. I numeri — riga di riquadri, non un grafico ---------- */

/* Tre cifre isolate: la forma giusta è il riquadro, non il diagramma. */
.numeri{
  display:grid;
  gap:1px;
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2.6rem,5vw,3.8rem);
  background:var(--bordo-tenue);
  border:1px solid var(--bordo-tenue);
}
@media (max-width:760px){ .numeri{ grid-template-columns:1fr; } }

.numero{
  background:var(--travertino);
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1.4rem,2.4vw,1.8rem);
}
.sezione--chiara .numero{ background:var(--travertino-chiaro); }

.numero__cifra{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.6rem,5.5vw,3.6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--bronzo);
  margin-bottom:.9rem;
  /* cifre proporzionali: sono valori grandi e isolati, non colonne */
}
.numero__cifra small{
  font-size:.42em;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--testo-2);
  display:block;
  margin-top:.5rem;
}
.numero h3{
  font-family:var(--testo-f);
  font-size:1.02rem;
  font-weight:700;
  margin-bottom:.4rem;
}
.numero p{ font-size:.95rem; color:var(--testo-2); line-height:1.55; }

.fonte{
  margin-top:1.6rem;
  font-family:var(--mono);
  font-size:.71rem;
  line-height:1.75;
  letter-spacing:.03em;
  color:var(--testo-2);
}
.fonte a{ color:var(--bronzo); }

/* ---------- 28. Il fascicolo su carta ---------- */

.fascicolo{
  margin-top:clamp(2.4rem,4.5vw,3.4rem);
  border:1px solid var(--bordo);
  border-radius:3px;
  background:var(--travertino-chiaro);
  padding:clamp(1.7rem,3.4vw,2.6rem);
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 46px -38px rgba(26,25,23,.6);
}
.sezione--chiara .fascicolo{ background:var(--travertino); }

/* piega di carta nell'angolo: dice "foglio" senza disegnare un'icona */
.fascicolo::after{
  content:"";
  position:absolute;
  top:0; right:0;
  border-width:0 34px 34px 0;
  border-style:solid;
  border-color:var(--travertino) transparent;
  filter:drop-shadow(-2px 2px 2px rgba(26,25,23,.14));
}
.sezione--chiara .fascicolo::after{ border-color:var(--travertino-chiaro) transparent; }

.fascicolo__testa{ margin-bottom:1.2rem; }
.fascicolo__testa h3{ font-size:clamp(1.25rem,2vw,1.55rem); }
.fascicolo p{ color:var(--testo-2); font-size:1.02rem; }
.fascicolo b{ color:var(--testo); font-weight:700; }

.fascicolo__voci{
  list-style:none;
  margin:1.5rem 0;
  padding:0;
  border-top:1px solid var(--bordo-tenue);
}
.fascicolo__voci li{
  border-bottom:1px solid var(--bordo-tenue);
  padding:.8rem 0 .8rem 1.7rem;
  position:relative;
  font-size:.98rem;
  color:var(--testo-2);
}
.fascicolo__voci li::before{
  content:"";
  position:absolute;
  left:0; top:1.35rem;
  width:9px; height:1px;
  background:var(--bronzo);
}

.fascicolo__nota{
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--bordo-tenue);
  font-size:.94rem !important;
}

/* ---------- 29. Lo scudo del primo stadio ---------- */

/* Risponde all'obiezione più concreta che si possa fare al servizio —
   "il funerale sarà già fatto" — quindi ha un rilievo maggiore. */
.scudo--urgente{
  border-color:rgba(227,192,124,.45);
  background:rgba(227,192,124,.07);
  position:relative;
}
.scudo--urgente .scudo__i{ color:var(--oro); }
.scudo--urgente h3{ color:#fff; }
.scudo--urgente p b{ color:var(--oro); font-weight:600; }
.scudo--urgente:hover{
  background:rgba(227,192,124,.11);
  border-color:rgba(227,192,124,.7);
}
@media (min-width:900px){
  /* occupa due colonne: è il blocco che deve fermare l'occhio */
  .scudo--urgente{ grid-column:span 2; }
}

/* ---------- 30. Banner dei cookie ---------- */

/* Sobrio, in fondo, non copre la lettura. I due pulsanti hanno lo stesso
   identico rilievo grafico: il Garante lo richiede, e la vostra cookie
   policy lo mette per iscritto. Nessuna X per chiudere: chiudere senza
   scegliere equivarrebbe a un consenso implicito, che non è valido. */
.cookie{
  position:fixed;
  inset:auto 0 0 0;
  z-index:120;
  background:var(--travertino-chiaro);
  border-top:1px solid var(--bordo);
  box-shadow:0 -18px 40px -30px rgba(26,25,23,.5);
  padding:clamp(1.1rem,2.4vw,1.5rem) 0;
  transform:translateY(100%);
  transition:transform .5s var(--e-out);
}
.cookie.is-visibile{ transform:translateY(0); }

.cookie__in{
  display:flex;
  align-items:center;
  gap:clamp(1rem,3vw,2.4rem);
  flex-wrap:wrap;
}
.cookie__testo{
  flex:1 1 380px;
  min-width:0;
  font-size:.97rem;
  line-height:1.55;
  color:var(--testo-2);
  margin:0;
}
.cookie__testo b{ color:var(--testo); font-weight:700; }
.cookie__testo a{ color:var(--bronzo); text-underline-offset:2px; }
.cookie__testo a:hover{ color:var(--basalto); }

.cookie__scelte{
  display:flex;
  gap:.7rem;
  flex:0 0 auto;
}
@media (max-width:620px){
  .cookie__scelte{ width:100%; }
  .cookie__scelte .btn{ flex:1 1 0; padding-inline:.9rem; }
}

/* i due pulsanti sono deliberatamente identici */
.cookie__scelte .btn{
  --bg:transparent;
  --fg:#6E4C1C;
  border-color:rgba(168,123,60,.55);
  font-size:.95rem;
  padding:.85rem 1.4rem;
  white-space:nowrap;
}
.cookie__scelte .btn:hover{
  color:var(--basalto);
  border-color:var(--bronzo);
}

/* collegamento nel piè di pagina per cambiare idea dopo */
.piede button.ripensaci{
  font:inherit;
  background:none;
  border:0;
  padding:0;
  color:rgba(230,223,209,.72);
  cursor:pointer;
  text-align:left;
}
.piede button.ripensaci:hover{ color:var(--oro); }

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