/* =====================================================================
   MEDICINA OLISTICA DEL BENESSERE — Villa Literno
   Palette dai materiali reali del cliente:
     fondo brochure #2A1E15 · oro tipografia #B0A454  (campionati)

   L'idea: l'ORO LIQUIDO. Olio caldo e oro fuso sono le due materie di
   questo mestiere. Tutto il sito si muove come un liquido denso:
   le luci dell'hero, i bordi che si accendono sotto il dito, il testo
   che affiora, i numeri che salgono.
   ===================================================================== */

/* =========================== 1 · TOKEN =========================== */
:root{
  --oro:#C4A961;
  --oro-chiaro:#E8D69A;
  --oro-scuro:#8A7434;
  --oro-rgb:196,169,97;

  --fondo:#1B1309;
  --fondo-0:#120C06;
  --fondo-2:#241A0F;
  --fondo-3:#332516;
  --testo:#F5EEE1;
  --testo-2:rgba(245,238,225,.70);
  --testo-3:rgba(245,238,225,.45);
  --bordo:rgba(var(--oro-rgb),.16);
  --bordo-forte:rgba(var(--oro-rgb),.45);
  --velo:rgba(var(--oro-rgb),.08);
  --vetro:rgba(36,26,15,.62);
  --ombra:rgba(0,0,0,.9);
  --testata-bg:rgba(18,12,6,.82);

  --lam-1:var(--oro-scuro); --lam-2:var(--oro); --lam-3:var(--oro-chiaro); --lam-4:#FFF7E4;

  --f-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --f-testo:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-dato:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --t-micro:.6875rem; --t-s:.9375rem; --t-m:1.0625rem; --t-l:1.25rem;
  --t-xl:clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem);
  --t-2xl:clamp(2.1rem, 1.3rem + 3.2vw, 3.8rem);
  --t-hero:clamp(2.4rem, 1.15rem + 3.5vw, 4.4rem);
  --t-gigante:clamp(4rem, 1.5rem + 9vw, 10rem);

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:6.5rem; --s-10:9rem;

  --larghezza:1240px;
  --r-s:3px; --r-m:6px; --r-l:16px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-morbido:cubic-bezier(.65,.05,.36,1);
}

:root[data-theme="light"]{
  --oro:#8A6A22; --oro-chiaro:#B08F33; --oro-scuro:#634D18; --oro-rgb:138,106,34;
  --fondo:#F6F1E5; --fondo-0:#FCF9F2; --fondo-2:#EFE8D8; --fondo-3:#E5DAC4;
  --testo:#20170E; --testo-2:rgba(32,23,14,.74); --testo-3:rgba(32,23,14,.5);
  --bordo:rgba(138,106,34,.22); --bordo-forte:rgba(138,106,34,.5);
  --velo:rgba(138,106,34,.07); --vetro:rgba(252,249,242,.7);
  --ombra:rgba(70,50,20,.3); --testata-bg:rgba(246,241,229,.86);
  --lam-1:#634D18; --lam-2:#93712A; --lam-3:#C2A046; --lam-4:#E0C878;
}

/* =========================== 2 · BASE =========================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--fondo); color:var(--testo);
  font-family:var(--f-testo); font-size:var(--t-m); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .6s var(--ease), color .6s var(--ease);
}
img{max-width:100%; display:block}
a{color:inherit}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:600; line-height:1.02; letter-spacing:-.022em}

.wrap{max-width:var(--larghezza); margin-inline:auto; padding-inline:clamp(var(--s-4),4.5vw,var(--s-7))}
.salta{position:absolute; left:var(--s-4); top:-100px; z-index:200; background:var(--oro); color:#20170E; padding:.7em 1.2em; border-radius:var(--r-s); font-weight:700; text-decoration:none; transition:top .25s var(--ease)}
.salta:focus{top:var(--s-3)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--oro); outline-offset:3px; border-radius:var(--r-s)}

/* La grana a schermo intero è stata TOLTA: la procedura 16 §6 vieta grane e
   overlay animati perché fanno scattare lo scroll. La grana ora sta dentro
   le foto, cotta nel file. */

/* =================== 3 · ORO LIQUIDO (hero) ===================== */
.liquido{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.liquido .goccia{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  will-change:transform;
}
.g1{width:46vmax; height:46vmax; left:38%; top:-14%;  background:radial-gradient(circle, rgba(var(--oro-rgb),.85), transparent 66%); animation:fluire1 26s var(--ease-morbido) infinite}
.g2{width:34vmax; height:34vmax; left:56%; top:22%;   background:radial-gradient(circle, rgba(232,214,154,.65), transparent 64%); animation:fluire2 32s var(--ease-morbido) infinite}
.g3{width:40vmax; height:40vmax; left:12%; top:44%;   background:radial-gradient(circle, rgba(138,116,52,.7), transparent 68%);  animation:fluire3 38s var(--ease-morbido) infinite}
.g4{width:24vmax; height:24vmax; left:70%; top:58%;   background:radial-gradient(circle, rgba(var(--oro-rgb),.6), transparent 62%); animation:fluire2 29s var(--ease-morbido) infinite reverse}
@keyframes fluire1{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-9%,7%,0) scale(1.18)}}
@keyframes fluire2{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(11%,-9%,0) scale(.84)}}
@keyframes fluire3{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(7%,-12%,0) scale(1.22)}}
:root[data-theme="light"] .liquido .goccia{opacity:.42; filter:blur(70px)}

/* il puntatore sposta la luce: la lampada che segue la mano */
.liquido{--px:50%; --py:40%}
.luce-mano{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(28vmax 28vmax at var(--px) var(--py), rgba(255,247,228,.16), transparent 62%);
  transition:background .18s linear;
}

/* ==================== 4 · LAMINA E TESTI ======================== */
.lamina{color:var(--oro-chiaro)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .lamina{
    background-image:linear-gradient(100deg, var(--lam-1) 0%, var(--lam-2) 18%, var(--lam-3) 34%, var(--lam-4) 42%, var(--lam-3) 50%, var(--lam-2) 66%, var(--lam-1) 88%, var(--lam-2) 100%);
    background-size:280% 100%; background-position:var(--lamina,30%) 0;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
}
/* il testo affiora da sotto, riga per riga */
.riga{display:block; overflow:hidden}
.riga > span{display:block; transform:translateY(105%); transition:transform 1.05s var(--ease)}
.mostra .riga > span{transform:none}
.riga:nth-child(1) > span{transition-delay:.05s}
.riga:nth-child(2) > span{transition-delay:.16s}
.riga:nth-child(3) > span{transition-delay:.27s}
.riga:nth-child(4) > span{transition-delay:.38s}

.occhiello{font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.28em; text-transform:uppercase; color:var(--oro); display:inline-flex; align-items:center; gap:.9em}
.occhiello::before{content:""; width:26px; height:1px; background:var(--oro); flex:none}
.regola{height:1px; margin-top:var(--s-5); background:linear-gradient(90deg,var(--oro),var(--bordo) 42%,transparent); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease) .12s}
.rv.in .regola{transform:scaleX(1)}

/* ===================== 5 · PULSANTI ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65em; text-decoration:none;
  background:linear-gradient(150deg, var(--oro-chiaro), var(--oro) 45%, var(--oro-scuro));
  color:#20170E; border:0; border-radius:var(--r-pill); cursor:pointer;
  padding:1.05em 2em; font-family:inherit; font-size:var(--t-s); font-weight:700;
  position:relative; overflow:hidden; isolation:isolate; will-change:transform;
  box-shadow:0 1px 0 rgba(255,247,228,.5) inset, 0 18px 36px -20px var(--ombra);
  transition:box-shadow .35s var(--ease);
}
.btn svg{width:1.1em; height:1.1em; flex:none}
.btn::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 46%,transparent 62%); transform:translateX(-140%); transition:transform .8s var(--ease)}
.btn:hover{box-shadow:0 1px 0 rgba(255,247,228,.65) inset, 0 26px 50px -22px var(--ombra)}
.btn:hover::after{transform:translateX(140%)}
.btn--linea{background:transparent; color:var(--oro); box-shadow:none; border:1px solid var(--bordo); padding:.95em 1.7em}
.btn--linea:hover{border-color:var(--oro); background:var(--velo); box-shadow:none}

/* cursore d'oro (solo dove c'è un vero puntatore) */
.cursore{position:fixed; left:0; top:0; width:12px; height:12px; border-radius:50%; background:var(--oro); z-index:300; pointer-events:none; opacity:0; mix-blend-mode:normal; transition:width .3s var(--ease), height .3s var(--ease), opacity .3s, background .3s}
.cursore.viva{opacity:.9}
.cursore.grande{width:46px; height:46px; background:rgba(var(--oro-rgb),.22); border:1px solid var(--oro)}
@media (hover:none){ .cursore{display:none} }

/* ===================== 6 · TESTATA ============================== */
.avanzamento{position:fixed; left:0; top:0; height:2px; width:100%; z-index:90; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--oro-scuro),var(--oro),var(--oro-chiaro))}
.testata{position:sticky; top:0; z-index:80; background:transparent; transition:background .45s var(--ease), border-color .45s, backdrop-filter .45s; border-bottom:1px solid transparent}
/* niente backdrop-filter: vietato dalla procedura 16 §6, fa scattare lo scroll */
.testata.giu{background:var(--fondo-0); border-bottom-color:var(--bordo)}
.testata .wrap{display:flex; align-items:center; gap:var(--s-5); padding-block:var(--s-4)}
.marchio{display:flex; align-items:center; gap:.75rem; text-decoration:none; margin-right:auto}
.marchio img{width:34px; filter:drop-shadow(0 3px 10px var(--ombra))}
.marchio b{display:block; font-family:var(--f-display); font-size:1.0625rem; font-weight:600; line-height:1.15; letter-spacing:.01em}
/* solo la riga piccola sotto al nome, non il contenitore */
.marchio > span > span{display:block; font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--testo-3); margin-top:2px}
.menu{display:flex; gap:var(--s-5); align-items:center}
.menu a{text-decoration:none; font-size:var(--t-s); color:var(--testo-2); position:relative; padding-block:.4em; transition:color .3s}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--oro); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.menu a:hover,.menu a[aria-current="true"]{color:var(--oro)}
.menu a:hover::after,.menu a[aria-current="true"]::after{transform:scaleX(1)}
.tondo{width:42px; height:42px; display:grid; place-items:center; cursor:pointer; background:transparent; border:1px solid var(--bordo); border-radius:var(--r-pill); color:var(--oro); transition:border-color .3s, background .3s, transform .4s var(--ease); flex:none}
.tondo:hover{border-color:var(--oro); background:var(--velo); transform:rotate(-20deg)}
.tondo svg{width:18px; height:18px}
.tema .sole{display:none}
:root[data-theme="light"] .tema .luna{display:none}
:root[data-theme="light"] .tema .sole{display:block}
.hamburger{display:none}
@media (max-width:1000px){ .menu{display:none} .hamburger{display:grid} .testata > .wrap > .btn{display:none} }
@media (max-width:520px){
  .marchio b{font-size:.8125rem; max-width:19ch; line-height:1.25}
  .marchio > span > span{display:none}
  .marchio img{width:26px}
  .testata .wrap{gap:var(--s-3); padding-block:var(--s-3)}
  .tondo{width:38px; height:38px}
}

.pannello{position:fixed; inset:0; z-index:95; background:var(--fondo-0); display:flex; flex-direction:column; justify-content:center; gap:var(--s-5); padding:var(--s-8) clamp(var(--s-5),8vw,var(--s-9)); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s}
.pannello[data-aperto="true"]{opacity:1; visibility:visible; transform:none}
.pannello a{font-family:var(--f-display); font-size:var(--t-2xl); text-decoration:none}
.pannello a:hover{color:var(--oro)}
.pannello .chiudi{position:absolute; top:var(--s-5); right:var(--s-5)}
.pannello .btn{margin-top:var(--s-5); align-self:flex-start}

/* ======================= 7 · HERO =============================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding-block:var(--s-9) var(--s-8); overflow:hidden}
.hero .wrap{position:relative; z-index:3; width:100%}
.hero .interno{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-8); align-items:center}
.hero h1{font-size:var(--t-hero); max-width:18ch; margin-block:var(--s-4) var(--s-5)}
.hero .sotto{font-size:var(--t-l); max-width:44ch; color:var(--testo-2); line-height:1.6; opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s}
.hero.mostra .sotto{opacity:1; transform:none}
.hero .azioni{display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-6); align-items:center; margin-top:var(--s-7); opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease) .66s, transform .9s var(--ease) .66s}
.hero.mostra .azioni{opacity:1; transform:none}
.hero .cred{font-family:var(--f-dato); font-size:var(--t-micro); line-height:1.9; letter-spacing:.1em; text-transform:uppercase; color:var(--testo-3); padding-left:var(--s-5); border-left:1px solid var(--bordo)}
.hero .cred b{display:block; color:var(--oro); font-weight:600}

.sigillo{position:relative; width:min(32vw,320px); justify-self:end; opacity:0; transform:scale(.9) rotate(-6deg); transition:opacity 1.4s var(--ease) .3s, transform 1.4s var(--ease) .3s}
.hero.mostra .sigillo{opacity:1; transform:none}
.sigillo img{width:100%; filter:drop-shadow(0 24px 60px var(--ombra)); animation:respiro 9s ease-in-out infinite}
@keyframes respiro{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(1.6deg)}}
.sigillo::after{content:""; position:absolute; inset:-12% -14%; border:1px solid var(--bordo); border-radius:50%; animation:gira 34s linear infinite; mask-image:linear-gradient(200deg,#000 25%,transparent 60%)}
@keyframes gira{to{transform:rotate(360deg)}}
@media (max-width:960px){ .hero .interno{grid-template-columns:1fr} .sigillo{display:none} }

.scorri{position:absolute; left:50%; bottom:var(--s-6); z-index:3; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem; font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--testo-3)}
.scorri i{width:1px; height:44px; background:linear-gradient(var(--oro),transparent); animation:cala 2.2s var(--ease) infinite}
@keyframes cala{0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}
@media (max-height:700px){ .scorri{display:none} }

/* ==================== 8 · NASTRO SCORREVOLE ===================== */
.nastro{overflow:hidden; padding-block:var(--s-5); border-block:1px solid var(--bordo); background:var(--fondo-0)}
.nastro .pista{display:flex; width:max-content; animation:scorri-nastro 42s linear infinite}
.nastro:hover .pista{animation-play-state:paused}
.nastro span{font-family:var(--f-display); font-size:clamp(1.3rem, .9rem + 1.4vw, 2rem); padding-inline:var(--s-6); display:inline-flex; align-items:center; gap:var(--s-6); color:var(--testo-2); white-space:nowrap}
.nastro span::after{content:""; width:7px; height:7px; transform:rotate(45deg); background:var(--oro); flex:none}
@keyframes scorri-nastro{to{transform:translateX(-50%)}}

/* ====================== 9 · SEZIONI ============================= */
.sez{padding-block:var(--s-9); position:relative; z-index:1}
.sez h2{font-size:var(--t-2xl); max-width:18ch; margin-top:var(--s-4)}
.sez .intro{max-width:56ch; color:var(--testo-2); font-size:var(--t-l); line-height:1.6; margin-top:var(--s-5)}
.testa-sez{margin-bottom:var(--s-7)}

/* =============== 10 · CONFRONTO PRIMA / DOPO ==================== */
/* riquadro d'oro della sezione «La prova» */
.telaio{margin-top:var(--s-7); position:relative; padding:12px; border-radius:var(--r-l);
  background:linear-gradient(150deg, var(--bordo-forte), var(--velo) 42%, var(--bordo-forte))}
.telaio .dentro{position:relative; aspect-ratio:16/9; border-radius:calc(var(--r-l) - 6px); overflow:hidden; background:var(--fondo-0)}
.telaio img{width:100%; height:100%; object-fit:cover}
.telaio .velo{position:absolute; inset:0; background:linear-gradient(to top, rgba(18,12,6,.86) 0%, rgba(18,12,6,.18) 46%, transparent 72%)}
:root[data-theme="light"] .telaio .velo{background:linear-gradient(to top, rgba(246,241,229,.9) 0%, rgba(246,241,229,.2) 46%, transparent 72%)}
.telaio .scritta{position:absolute; left:0; right:0; bottom:0; padding:clamp(var(--s-5),3vw,var(--s-7))}
.telaio .scritta p{font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--oro)}
.telaio .scritta strong{display:block; font-family:var(--f-display); font-weight:600; font-size:var(--t-xl); margin-top:var(--s-3); letter-spacing:-.015em}
.telaio .tacca{position:absolute; width:18px; height:18px; border:1px solid var(--oro); opacity:.7; z-index:2}
.telaio .t1{top:5px; left:5px; border-right:0; border-bottom:0}
.telaio .t2{top:5px; right:5px; border-left:0; border-bottom:0}
.telaio .t3{bottom:5px; left:5px; border-right:0; border-top:0}
.telaio .t4{bottom:5px; right:5px; border-left:0; border-top:0}
.attesa{margin-top:var(--s-4); font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--testo-3)}

/* ===================== 11 · BIVIO =============================== */
.bivio{display:grid; grid-template-columns:1fr; gap:var(--s-5); margin-top:var(--s-7)}
@media (min-width:860px){ .bivio{grid-template-columns:1fr 1fr; gap:var(--s-6)} }
.strada{
  display:block; text-decoration:none; padding:clamp(var(--s-6),4vw,var(--s-8));
  background:linear-gradient(165deg,var(--fondo-2),var(--fondo)); border:1px solid var(--bordo);
  border-radius:var(--r-l); position:relative; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* il bordo si accende dove appoggi il dito */
.strada::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .45s var(--ease);
  background:radial-gradient(300px 300px at var(--mx,50%) var(--my,50%), rgba(var(--oro-rgb),.22), transparent 70%);
}
.strada:hover{transform:translateY(-6px); border-color:var(--bordo-forte); box-shadow:0 40px 80px -50px var(--ombra)}
.strada:hover::before{opacity:1}
.strada h3{font-size:var(--t-xl); margin-block:var(--s-4) var(--s-3)}
.strada p{color:var(--testo-2); font-size:var(--t-s); line-height:1.7}
.strada .vai{display:inline-flex; align-items:center; gap:.5em; margin-top:var(--s-6); font-size:var(--t-s); font-weight:600; color:var(--oro)}
.strada .vai svg{width:1em; transition:transform .4s var(--ease)}
.strada:hover .vai svg{transform:translateX(6px)}

/* =================== 12 · TRATTAMENTI ========================== */
.filtri{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6)}
.filtro{font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--testo-2); background:transparent; border:1px solid var(--bordo); border-radius:var(--r-pill); padding:.7em 1.35em; cursor:pointer; transition:color .3s, border-color .3s, background .3s}
.filtro:hover{color:var(--oro); border-color:var(--bordo-forte)}
.filtro[aria-pressed="true"]{color:#20170E; border-color:transparent; background:linear-gradient(150deg,var(--oro-chiaro),var(--oro))}

.carte{display:grid; grid-template-columns:1fr; gap:var(--s-4); margin-top:var(--s-6)}
@media (min-width:680px){ .carte{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .carte{grid-template-columns:repeat(3,1fr)} }
.carta{
  position:relative; border-radius:var(--r-l); isolation:isolate;
  background:linear-gradient(165deg,var(--fondo-2),var(--fondo-0)); border:1px solid var(--bordo);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.carta:hover{transform:translateY(-5px)}
.carta .corpo{padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); flex:1}

/* la foto del trattamento */
.carta .foto{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--fondo-0)}
.carta .foto img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.carta:hover .foto img{transform:scale(1.06)}
/* sfuma nel colore della carta, così la foto non è un rettangolo incollato */
.carta .foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,12,6,.10) 0%, rgba(18,12,6,.05) 45%, var(--fondo-2) 100%);
}
:root[data-theme="light"] .carta .foto::after{
  background:linear-gradient(to bottom, rgba(246,241,229,.05) 0%, rgba(246,241,229,.05) 45%, var(--fondo-2) 100%);
}
/* per il trattamento senza foto adatta: pannello del marchio, non una foto sbagliata */
.carta .foto--marchio{display:grid; place-items:center;
  background:radial-gradient(80% 80% at 50% 40%, var(--velo), transparent 70%), var(--fondo-0)}
.carta .foto--marchio img{width:44%; height:auto; object-fit:contain; opacity:.9}
.carta::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%), rgba(var(--oro-rgb),.16), transparent 68%)}
.carta:hover{border-color:var(--bordo-forte); box-shadow:0 40px 70px -45px var(--ombra)}
.carta:hover::before{opacity:1}
.carta[hidden]{display:none}
.carta .fam{font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--oro); display:flex; align-items:center; gap:.55em}
.carta .fam i{width:6px; height:6px; transform:rotate(45deg); background:var(--oro); flex:none}
.carta h3{font-size:var(--t-xl); hyphens:manual; -webkit-hyphens:manual}
.carta h3 em{display:block; font-size:var(--t-s); font-style:italic; color:var(--oro); margin-top:.4rem; letter-spacing:0; font-family:var(--f-display)}
.carta p{color:var(--testo-2); font-size:var(--t-s); line-height:1.7; flex:1}
.carta .scrivi{margin-top:var(--s-3); font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--oro); display:inline-flex; align-items:center; gap:.5em}
.carta .scrivi svg{width:1em; transition:transform .35s var(--ease)}
.carta:hover .scrivi svg{transform:translateX(5px)}
.nessuno{padding-block:var(--s-7); color:var(--testo-3); font-style:italic}

/* ==================== 13 · PASSI APPICCICATI ==================== */
.metodo{display:grid; grid-template-columns:1fr; gap:var(--s-7); margin-top:var(--s-7)}
@media (min-width:960px){ .metodo{grid-template-columns:.85fr 1.15fr; gap:var(--s-9); align-items:start} }
.metodo .fermo{position:sticky; top:22vh}
.metodo .grande{font-family:var(--f-display); font-size:var(--t-gigante); line-height:.82; letter-spacing:-.05em}
.metodo .etich{font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--testo-3); margin-top:var(--s-4)}
/* I passi si sbiadiscono SOLO se il JS è vivo: senza JS restano tutti leggibili */
.passo{padding:var(--s-7) 0; border-top:1px solid var(--bordo); transition:opacity .6s var(--ease)}
:root.js .passo{opacity:.34}
:root.js .passo.attivo{opacity:1}
.passo h3{font-size:var(--t-xl); margin-bottom:var(--s-3)}
.passo p{color:var(--testo-2); font-size:var(--t-s); line-height:1.7}

/* ====================== 14 · INVITO ============================= */
.invito{margin-top:var(--s-8); padding:clamp(var(--s-7),6vw,var(--s-10)); border-radius:var(--r-l); position:relative; overflow:hidden;
  background:radial-gradient(120% 150% at 88% 6%, rgba(var(--oro-rgb),.2), transparent 58%), linear-gradient(160deg,var(--fondo-3),var(--fondo-0));
  border:1px solid var(--bordo)}
.invito h2{max-width:16ch}
.invito p{max-width:44ch; margin-top:var(--s-5); font-size:var(--t-l); color:var(--testo-2); line-height:1.6}
.invito .btn{margin-top:var(--s-7)}
.invito .eco{position:absolute; right:-6%; bottom:-32%; width:min(38%,340px); opacity:.13; pointer-events:none; animation:respiro 11s ease-in-out infinite}

/* ====================== 15 · MOTIVI E CIFRE ===================== */
.motivi{display:grid; grid-template-columns:1fr; gap:var(--s-6); margin-top:var(--s-7)}
@media (min-width:780px){ .motivi{grid-template-columns:1fr 1fr; column-gap:var(--s-9); row-gap:var(--s-8)} }
.motivo{padding-top:var(--s-4); border-top:1px solid var(--bordo)}
.motivo h3{font-size:var(--t-l); margin-bottom:var(--s-3)}
.motivo p{color:var(--testo-2); font-size:var(--t-s); line-height:1.75}

.cifre{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s-6); margin-top:var(--s-7)}
.cifra{border-left:1px solid var(--bordo); padding-left:var(--s-5)}
/* ⚠️ clamp(): SEMPRE spazi attorno a + e −, altrimenti il CSS è invalido
   e la riga viene scartata in silenzio. Già successo tre volte. */
.cifra b{display:block; font-family:var(--f-display); font-size:clamp(2.6rem, 1.5rem + 3.8vw, 4.6rem); line-height:.95; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.cifra span{display:block; margin-top:var(--s-3); font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--testo-3)}

/* ======================== 16 · FAQ ============================== */
.faq{margin-top:var(--s-7); border-top:1px solid var(--bordo)}
.faq details{border-bottom:1px solid var(--bordo)}
.faq summary{cursor:pointer; list-style:none; padding-block:var(--s-6); display:flex; align-items:center; gap:var(--s-4); font-family:var(--f-display); font-size:var(--t-l); font-weight:600; transition:color .3s}
.faq summary:hover{color:var(--oro)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; margin-left:auto; flex:none; width:11px; height:11px; border-right:1px solid var(--oro); border-bottom:1px solid var(--oro); transform:rotate(45deg) translateY(-20%); transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-20%)}
.faq .risposta{padding-bottom:var(--s-6); color:var(--testo-2); max-width:64ch; font-size:var(--t-s); line-height:1.85}

/* ===================== 17 · CHIUSURA E PIEDE ==================== */
.chiusura{text-align:center; padding-block:var(--s-10)}
.chiusura h2{margin-inline:auto; max-width:16ch}
.chiusura p{color:var(--testo-2); margin-top:var(--s-5); font-size:var(--t-l)}
.chiusura .btn{margin-top:var(--s-7)}
.fregio{display:flex; align-items:center; justify-content:center; gap:var(--s-4); margin-bottom:var(--s-6)}
.fregio i{width:70px; height:1px; background:linear-gradient(90deg,transparent,var(--oro))}
.fregio i + i{background:linear-gradient(90deg,var(--oro),transparent)}
.fregio span{width:7px; height:7px; transform:rotate(45deg); background:var(--oro)}

.piede{border-top:1px solid var(--bordo); padding-block:var(--s-8) var(--s-6); background:var(--fondo-0); position:relative; overflow:hidden}
.piede .marchione{font-family:var(--f-display); font-size:clamp(2.4rem, 1rem + 6vw, 6rem); line-height:1; letter-spacing:-.04em; margin-bottom:var(--s-8)}
.piede .righe{display:grid; grid-template-columns:1fr; gap:var(--s-7)}
@media (min-width:780px){ .piede .righe{grid-template-columns:1.5fr 1fr 1fr} }
.piede b{display:block; font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--oro); margin-bottom:var(--s-4)}
.piede,.piede a{color:var(--testo-3); font-size:var(--t-s); text-decoration:none}
.piede a{transition:color .3s}
.piede a:hover{color:var(--oro)}
.piede li{margin-bottom:var(--s-2)}
.piede .legale{margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--bordo); display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.08em}

/* =================== 18 · BARRA E BISCOTTI ====================== */
.barra{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background:var(--fondo-0); border-top:1px solid var(--bordo)}
.barra .btn{width:100%}
@media (max-width:820px){ .barra{display:block} body{padding-bottom:5.6rem} }

.biscotti{position:fixed; right:var(--s-4); bottom:var(--s-4); z-index:96; max-width:400px; padding:var(--s-5); background:var(--fondo-2); border:1px solid var(--bordo); border-radius:var(--r-m); box-shadow:0 34px 80px -44px var(--ombra); display:none; gap:var(--s-4); flex-direction:column}
.biscotti[data-mostra="true"]{display:flex}
.biscotti p{font-size:var(--t-s); color:var(--testo-2); line-height:1.6}
.biscotti .scelte{display:flex; gap:var(--s-3); flex-wrap:wrap}
.biscotti .btn{padding:.72em 1.3em; font-family:var(--f-dato); font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase}
@media (max-width:820px){ .biscotti{left:var(--s-4); right:var(--s-4); bottom:5.4rem; max-width:none} }

/* ============== 19 · REVEAL + RETE DI SICUREZZA ================= */
.rv{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv[data-ritardo="1"]{transition-delay:.09s}
.rv[data-ritardo="2"]{transition-delay:.18s}
.rv[data-ritardo="3"]{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important; transform:none !important; transition:none !important}
  .riga > span{transform:none !important}
  .hero .sotto,.hero .azioni,.sigillo{opacity:1 !important; transform:none !important}
  .regola{transform:scaleX(1) !important}
  :root.js .passo{opacity:1 !important}
  .grana,.avanzamento,.cursore,.scorri{display:none}
  .liquido .goccia,.sigillo img,.sigillo::after,.invito .eco,.nastro .pista{animation:none !important}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ================= 20 · PAGINE DI TESTO ======================== */
.testo-lungo{max-width:70ch; padding-block:var(--s-9)}
.testo-lungo h1{font-size:var(--t-2xl); margin-bottom:var(--s-5)}
.testo-lungo h2{font-size:var(--t-xl); margin-top:var(--s-7); margin-bottom:var(--s-3)}
.testo-lungo p,.testo-lungo li{color:var(--testo-2); font-size:var(--t-s); line-height:1.9}
.testo-lungo ul{margin-top:var(--s-3)}
.testo-lungo li{position:relative; padding-left:1.5em; margin-bottom:var(--s-2)}
.testo-lungo li::before{content:""; position:absolute; left:0; top:.75em; width:5px; height:5px; transform:rotate(45deg); background:var(--oro)}
.testo-lungo a{color:var(--oro)}
.errore{text-align:center; padding-block:var(--s-10)}
.errore .numero{font-family:var(--f-display); font-size:var(--t-gigante); line-height:1; letter-spacing:-.05em}