/* =========================================================
   Skinnora — foglio di stile principale
   Palette: chiaro / argento / perla / cipria / loto
   ========================================================= */

:root{
  /* colori base */
  --chiaro:      #FBF9FA;
  --perla:       #ECE7EA;
  --argento:     #D3D5DB;
  --argento-cupo:#B9BCC5;
  --cipria:      #E9D6DD;
  --cipria-viva: #E0C2CD;
  --loto:        #D6B0BF;
  --loto-cupo:   #B78DA0;
  --loto-scuro:  #8F6577;

  /* testo */
  --inchiostro:  #3E3540;
  --inchiostro-morbido:#655A68;
  --tenue:       #8C8290;

  /* superfici */
  --superficie:  #FFFFFF;
  --superficie-2:#F6F1F4;
  --linea:       #E7DFE4;

  /* effetti */
  --ombra-s: 0 2px 10px rgba(143,101,119,.08);
  --ombra-m: 0 12px 34px rgba(143,101,119,.12);
  --ombra-l: 0 26px 60px rgba(143,101,119,.16);
  --raggio-s: 12px;
  --raggio-m: 20px;
  --raggio-l: 30px;
  --raggio-pill: 999px;

  /* tipografia fluida */
  --font-display: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --font-testo: ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --passo: clamp(1rem, .6rem + 1.6vw, 1.5rem);
  --gutter: clamp(1.15rem, .7rem + 2vw, 2.5rem);
  --sezione: clamp(3.5rem, 2rem + 6vw, 7rem);
  --contenitore: 1180px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--font-testo);
  color:var(--inchiostro);
  background:
    radial-gradient(1200px 600px at 82% -10%, rgba(214,176,191,.22), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(211,213,219,.30), transparent 55%),
    var(--chiaro);
  line-height:1.62;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--loto-scuro); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.14;
  color:var(--inchiostro);
  letter-spacing:.2px;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.3rem,1.5rem + 3.6vw,4rem); }
h2{ font-size:clamp(1.8rem,1.25rem + 2.2vw,2.85rem); }
h3{ font-size:clamp(1.2rem,1rem + .8vw,1.55rem); }
p{ margin:0 0 1rem; color:var(--inchiostro-morbido); }

.avvolgi{ width:min(100% - (var(--gutter)*2), var(--contenitore)); margin-inline:auto; }

.occhiello{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-testo);
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--loto-cupo);
  background:linear-gradient(120deg, rgba(233,214,221,.7), rgba(236,231,234,.7));
  border:1px solid var(--linea);
  padding:.4rem .85rem; border-radius:var(--raggio-pill);
}
.occhiello::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--loto)); box-shadow:0 0 0 3px rgba(214,176,191,.25); }

/* ---------- pulsanti ---------- */
.tasto{
  --bg1:var(--loto); --bg2:var(--loto-cupo);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-testo); font-weight:600; font-size:1rem;
  color:#fff; cursor:pointer;
  padding:.95rem 1.7rem; border:0; border-radius:var(--raggio-pill);
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  box-shadow:0 10px 26px rgba(183,141,160,.4);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  text-decoration:none; position:relative; overflow:hidden;
}
.tasto:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(183,141,160,.5); text-decoration:none; filter:saturate(1.05); }
.tasto:active{ transform:translateY(0); }
.tasto:focus-visible{ outline:3px solid var(--loto-cupo); outline-offset:3px; }
.tasto--fantasma{
  background:transparent; color:var(--loto-scuro);
  border:1.5px solid var(--loto); box-shadow:none;
}
.tasto--fantasma:hover{ background:rgba(214,176,191,.12); box-shadow:none; }
.tasto--largo{ width:100%; }
.tasto__brillio{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; }

/* =========================================================
   INTESTAZIONE / NAV
   ========================================================= */
.intestazione{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(1.2) blur(12px);
  background:rgba(251,249,250,.78);
  border-bottom:1px solid var(--linea);
  transition:box-shadow .3s ease, background .3s ease;
}
.intestazione.compatta{ box-shadow:var(--ombra-s); background:rgba(251,249,250,.92); }
.barra{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; }
.marchio{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--inchiostro); letter-spacing:.5px; }
.marchio:hover{ text-decoration:none; }
.marchio__segno{
  width:34px; height:34px; border-radius:11px; flex:none;
  background:conic-gradient(from 210deg, var(--loto), var(--cipria), var(--argento), var(--loto));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), var(--ombra-s);
  position:relative;
}
.marchio__segno::after{ content:""; position:absolute; inset:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--cipria)); }

.menu{ display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; }
.menu a{
  color:var(--inchiostro-morbido); font-weight:500; font-size:.96rem;
  padding:.5rem .8rem; border-radius:var(--raggio-pill); transition:color .2s, background .2s;
}
.menu a:hover{ color:var(--loto-scuro); background:rgba(233,214,221,.45); text-decoration:none; }
.nav-azione{ display:flex; align-items:center; gap:.6rem; }

.apri-menu{
  display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--linea);
  background:var(--superficie); cursor:pointer; align-items:center; justify-content:center;
}
.apri-menu span{ position:relative; width:20px; height:2px; background:var(--inchiostro); border-radius:2px; transition:.3s; }
.apri-menu span::before,.apri-menu span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--inchiostro); border-radius:2px; transition:.3s; }
.apri-menu span::before{ top:-6px; } .apri-menu span::after{ top:6px; }
.apri-menu[aria-expanded="true"] span{ background:transparent; }
.apri-menu[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.apri-menu[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* =========================================================
   1 · HERO
   ========================================================= */
.faro{ position:relative; overflow:hidden; }
.faro__griglia{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(3rem,2rem + 5vw,6rem);
}
.faro__testo{ max-width:38rem; }
.faro h1{ margin-top:1rem; }
.faro h1 em{ font-style:normal; color:var(--loto-cupo); }
.faro__sotto{ font-size:clamp(1.05rem,1rem + .5vw,1.28rem); color:var(--inchiostro-morbido); margin:.4rem 0 1.6rem; }
.faro__azioni{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.faro__nota{ font-size:.9rem; color:var(--tenue); margin-top:1.2rem; }

.faro__media{ position:relative; }
.faro__cornice{
  border-radius:var(--raggio-l); overflow:hidden; box-shadow:var(--ombra-l);
  border:1px solid rgba(255,255,255,.6); aspect-ratio:16/11;
  background:linear-gradient(135deg,var(--perla),var(--cipria));
}
.faro__cornice img{ width:100%; height:100%; object-fit:cover; }
.faro__pillola{
  position:absolute; left:-14px; bottom:26px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border:1px solid var(--linea); border-radius:var(--raggio-m);
  padding:.85rem 1.1rem; box-shadow:var(--ombra-m); display:flex; gap:.7rem; align-items:center;
}
.faro__pillola b{ font-family:var(--font-display); font-size:1.25rem; color:var(--inchiostro); }
.faro__pillola span{ font-size:.82rem; color:var(--tenue); display:block; }
.faro__disco{ width:40px;height:40px;border-radius:50%;flex:none;
  background:conic-gradient(from 0deg,var(--loto),var(--cipria),var(--argento),var(--loto)); }

/* barra fiducia */
.fiducia{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); background:rgba(255,255,255,.5); }
.fiducia__riga{ display:flex; flex-wrap:wrap; gap:clamp(1rem,3vw,2.5rem); justify-content:center; padding:1.1rem 0; }
.fiducia__voce{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--inchiostro-morbido); font-weight:500; }
.fiducia__voce svg{ width:20px; height:20px; color:var(--loto-cupo); flex:none; }

/* =========================================================
   2 · BENEFICI
   ========================================================= */
.benefici{ padding-block:var(--sezione); }
.intestazione-sezione{ max-width:44rem; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.griglia-benefici{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(1rem,2.4vw,1.6rem);
}
.scheda-b{
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--raggio-m);
  padding:1.8rem 1.6rem; box-shadow:var(--ombra-s); transition:transform .3s, box-shadow .3s;
  position:relative; overflow:hidden;
}
.scheda-b::after{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--loto),var(--cipria)); opacity:.9; }
.scheda-b:hover{ transform:translateY(-6px); box-shadow:var(--ombra-m); }
.scheda-b__icona{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:1rem;
  background:linear-gradient(135deg,rgba(233,214,221,.9),rgba(236,231,234,.9));
  border:1px solid var(--linea);
}
.scheda-b__icona svg{ width:26px; height:26px; color:var(--loto-cupo); }
.scheda-b h3{ margin-bottom:.4rem; }
.scheda-b p{ margin:0; font-size:.97rem; }

/* =========================================================
   3 · PRESENTAZIONE PRODOTTO
   ========================================================= */
.vetrina{ padding-block:var(--sezione); background:
  linear-gradient(180deg,transparent, rgba(236,231,234,.5) 40%, transparent),
  radial-gradient(700px 380px at 12% 30%, rgba(214,176,191,.16), transparent 60%); }
.vetrina__griglia{ display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:clamp(1.5rem,4vw,3.5rem); }
.vetrina__media{ position:relative; display:grid; place-items:center; }
.vetrina__alone{
  position:absolute; width:min(78%,420px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(233,214,221,.9), rgba(214,176,191,.35) 55%, transparent 72%);
  filter:blur(2px); z-index:0;
}
.vetrina__prodotto{ position:relative; z-index:1; width:min(78%,380px); filter:drop-shadow(0 30px 40px rgba(143,101,119,.28)); }
.vetrina__prezzo{ display:flex; align-items:baseline; gap:.6rem; margin:.4rem 0 1.2rem; }
.vetrina__prezzo .cifra{ font-family:var(--font-display); font-size:clamp(2.4rem,1.8rem+2vw,3.2rem); color:var(--inchiostro); font-weight:700; }
.vetrina__prezzo .iva{ font-size:.9rem; color:var(--tenue); }
.elenco-caratteristiche{ list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.7rem; }
.elenco-caratteristiche li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--inchiostro-morbido); }
.elenco-caratteristiche svg{ width:22px; height:22px; color:var(--loto-cupo); flex:none; margin-top:1px; }
.vetrina__azioni{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* =========================================================
   4 · STILE DI VITA
   ========================================================= */
.benessere{ padding-block:var(--sezione); }
.benessere__griglia{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.benessere__figura{ margin:0; border-radius:var(--raggio-l); overflow:hidden; box-shadow:var(--ombra-m); border:1px solid rgba(255,255,255,.6); aspect-ratio:7/5; }
.benessere__figura img{ width:100%; height:100%; object-fit:cover; }
.pilastri{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:1rem; }
.pilastri li{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--raggio-m); padding:1.1rem 1.3rem; box-shadow:var(--ombra-s); }
.pilastri h3{ font-size:1.12rem; margin-bottom:.25rem; display:flex; align-items:center; gap:.6rem; }
.pilastri h3 .punto{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--loto),var(--cipria-viva)); flex:none; }
.pilastri p{ margin:0; font-size:.96rem; }

/* =========================================================
   5 · COME USARLO
   ========================================================= */
.rituale{ padding-block:var(--sezione); background:linear-gradient(180deg, rgba(236,231,234,.55), transparent); }
.passi{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); counter-reset:passo; }
.passo{
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--raggio-m);
  padding:2.2rem 1.6rem 1.6rem; position:relative; box-shadow:var(--ombra-s); text-align:left;
}
.passo__n{
  position:absolute; top:-22px; left:1.6rem; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:#fff;
  background:linear-gradient(135deg,var(--loto),var(--loto-cupo)); box-shadow:0 8px 18px rgba(183,141,160,.4);
}
.passo h3{ margin:.4rem 0 .35rem; font-size:1.2rem; }
.passo p{ margin:0; font-size:.96rem; }

/* =========================================================
   6 · QUALITÀ
   ========================================================= */
.qualita{ padding-block:var(--sezione); }
.qualita__pannello{
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(246,241,244,.9)),
    radial-gradient(500px 300px at 90% 10%, rgba(214,176,191,.18), transparent 60%);
  border:1px solid var(--linea); border-radius:var(--raggio-l); box-shadow:var(--ombra-m);
  padding:clamp(1.8rem,4vw,3.2rem);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
.qualita__lista{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:1.1rem; }
.qualita__figura{ margin:1.4rem 0 0; border-radius:var(--raggio-m); overflow:hidden; box-shadow:var(--ombra-s); border:1px solid rgba(255,255,255,.6); aspect-ratio:16/9; }
.qualita__figura img{ width:100%; height:100%; object-fit:cover; }
.qualita__lista li{ display:flex; gap:.9rem; align-items:flex-start; }
.qualita__badge{ width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:var(--superficie); border:1px solid var(--linea); box-shadow:var(--ombra-s); }
.qualita__badge svg{ width:23px; height:23px; color:var(--loto-cupo); }
.qualita__lista h3{ font-size:1.08rem; margin:0 0 .2rem; }
.qualita__lista p{ margin:0; font-size:.94rem; }

/* =========================================================
   7 · FAQ
   ========================================================= */
.domande{ padding-block:var(--sezione); background:linear-gradient(180deg,transparent, rgba(233,214,221,.35)); }
.accordi{ max-width:820px; margin:0 auto; display:grid; gap:.9rem; }
.accordo{ background:var(--superficie); border:1px solid var(--linea); border-radius:var(--raggio-m); overflow:hidden; box-shadow:var(--ombra-s); }
.accordo__testa{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:1.25rem 1.4rem; font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--inchiostro);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.accordo__testa:hover{ color:var(--loto-scuro); }
.accordo__testa:focus-visible{ outline:3px solid var(--loto-cupo); outline-offset:-3px; }
.accordo__segno{ width:26px; height:26px; flex:none; position:relative; transition:transform .3s; }
.accordo__segno::before,.accordo__segno::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--loto-cupo); border-radius:2px; }
.accordo__segno::before{ width:14px; height:2px; }
.accordo__segno::after{ width:2px; height:14px; transition:transform .3s; }
.accordo[aria-expanded="true"] .accordo__segno::after{ transform:translate(-50%,-50%) scaleY(0); }
.accordo__corpo{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.accordo__corpo p{ padding:0 1.4rem 1.3rem; margin:0; font-size:.98rem; }

/* =========================================================
   8 · CTA FINALE + ORDINE
   ========================================================= */
.ordine{ padding-block:var(--sezione); }
.ordine__pannello{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  background:
    linear-gradient(135deg, rgba(214,176,191,.16), rgba(211,213,219,.14)),
    var(--superficie);
  border:1px solid var(--linea); border-radius:var(--raggio-l); box-shadow:var(--ombra-l);
  padding:clamp(1.8rem,4vw,3.4rem); overflow:hidden; position:relative;
}
.ordine__riepilogo{ display:flex; gap:1.1rem; align-items:center; margin:1.2rem 0; padding:1.1rem; border:1px solid var(--linea); border-radius:var(--raggio-m); background:var(--superficie-2); }
.ordine__riepilogo img{ width:78px; height:78px; object-fit:contain; flex:none; }
.ordine__riepilogo .prezzo{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--inchiostro); }
.ordine__riepilogo .sconto{ font-size:.85rem; color:var(--loto-cupo); font-weight:600; }

.modulo{ display:grid; gap:1rem; }
.campo{ display:grid; gap:.4rem; }
.campo label{ font-size:.9rem; font-weight:600; color:var(--inchiostro); }
.campo input{
  font-family:var(--font-testo); font-size:1rem; color:var(--inchiostro);
  padding:.9rem 1rem; border:1.5px solid var(--linea); border-radius:var(--raggio-s);
  background:var(--superficie); transition:border-color .2s, box-shadow .2s;
}
.campo input::placeholder{ color:#B4AAB8; }
.campo input:focus{ outline:0; border-color:var(--loto); box-shadow:0 0 0 4px rgba(214,176,191,.25); }
.campo input[aria-invalid="true"]{ border-color:#C87A93; box-shadow:0 0 0 4px rgba(200,122,147,.18); }
.campo .errore{ font-size:.82rem; color:#B5567A; min-height:1em; }
.consenso{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color:var(--tenue); }
.consenso input{ margin-top:.25rem; accent-color:var(--loto-cupo); }
.modulo__nota{ font-size:.82rem; color:var(--tenue); margin:0; }

/* =========================================================
   PIÈ DI PAGINA
   ========================================================= */
.pdp{ background:linear-gradient(180deg, var(--superficie-2), var(--perla)); border-top:1px solid var(--linea); padding-block:clamp(2.5rem,5vw,4rem) 1.5rem; margin-top:2rem; }
.pdp__griglia{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; }
.pdp__marchio{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--inchiostro); margin-bottom:.7rem; }
.pdp p{ font-size:.92rem; color:var(--inchiostro-morbido); }
.pdp h4{ font-family:var(--font-testo); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--loto-cupo); margin:0 0 .9rem; }
.pdp ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pdp ul a{ color:var(--inchiostro-morbido); font-size:.94rem; }
.pdp ul a:hover{ color:var(--loto-scuro); }
.pdp__contatti{ font-style:normal; font-size:.92rem; color:var(--inchiostro-morbido); display:grid; gap:.45rem; }
.pdp__contatti a{ color:var(--inchiostro-morbido); }
.pdp__disclaimer{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--linea); font-size:.82rem; color:var(--tenue); }
.pdp__base{ display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; justify-content:space-between; align-items:center; margin-top:1.2rem; font-size:.85rem; color:var(--tenue); }

/* =========================================================
   BANNER COOKIE
   ========================================================= */
.cookie{
  position:fixed; inset:auto 1rem 1rem 1rem; z-index:90; max-width:520px; margin-inline:auto;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border:1px solid var(--linea); border-radius:var(--raggio-m); box-shadow:var(--ombra-l);
  padding:1.3rem 1.4rem; transform:translateY(140%); opacity:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s;
}
.cookie.mostra{ transform:translateY(0); opacity:1; }
.cookie h3{ font-size:1.15rem; margin:0 0 .4rem; }
.cookie p{ font-size:.9rem; margin:0 0 1rem; }
.cookie__azioni{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cookie__azioni .tasto{ padding:.7rem 1.15rem; font-size:.92rem; }
.cookie__pref{ background:transparent; border:1.5px solid var(--linea); color:var(--inchiostro-morbido); }
.cookie__pref:hover{ background:var(--superficie-2); box-shadow:none; }

/* pannello preferenze */
.pref-strato{ position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:1rem;
  background:rgba(62,53,64,.4); backdrop-filter:blur(3px); }
.pref-strato.aperto{ display:grid; }
.pref-scatola{ background:var(--superficie); border-radius:var(--raggio-l); box-shadow:var(--ombra-l); max-width:520px; width:100%; padding:clamp(1.5rem,4vw,2.4rem); }
.pref-scatola h3{ margin-top:0; }
.pref-voce{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--linea); }
.pref-voce:last-of-type{ border-bottom:0; }
.pref-voce h4{ margin:0 0 .2rem; font-family:var(--font-display); font-size:1.05rem; }
.pref-voce p{ margin:0; font-size:.85rem; }
.interruttore{ position:relative; width:48px; height:27px; flex:none; }
.interruttore input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.interruttore .traccia{ position:absolute; inset:0; border-radius:999px; background:var(--argento); transition:.25s; }
.interruttore .traccia::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:var(--ombra-s); transition:.25s; }
.interruttore input:checked + .traccia{ background:linear-gradient(135deg,var(--loto),var(--loto-cupo)); }
.interruttore input:checked + .traccia::after{ transform:translateX(21px); }
.interruttore input:disabled + .traccia{ opacity:.55; }
.interruttore input:focus-visible + .traccia{ outline:3px solid var(--loto-cupo); outline-offset:2px; }
.pref-scatola__azioni{ display:flex; gap:.7rem; margin-top:1.4rem; }

/* =========================================================
   PAGINE LEGALI
   ========================================================= */
.legale{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.legale__wrap{ width:min(100% - 2.4rem, 820px); margin-inline:auto; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--raggio-l); box-shadow:var(--ombra-s); padding:clamp(1.6rem,5vw,3.4rem); }
.legale__wrap h1{ margin-bottom:.3rem; }
.legale__data{ color:var(--tenue); font-size:.9rem; margin-bottom:2rem; }
.legale__wrap h2{ font-size:1.5rem; margin-top:2.2rem; }
.legale__wrap h3{ font-size:1.15rem; margin-top:1.5rem; }
.legale__wrap p, .legale__wrap li{ color:var(--inchiostro-morbido); font-size:.98rem; }
.legale__wrap ul{ padding-left:1.2rem; display:grid; gap:.4rem; margin:0 0 1rem; }
.torna{ display:inline-flex; align-items:center; gap:.4rem; margin-bottom:1.5rem; font-weight:600; }

/* =========================================================
   PAGINA SUCCESSO
   ========================================================= */
.esito{ min-height:70vh; display:grid; place-items:center; padding-block:var(--sezione); text-align:center; }
.esito__scatola{ max-width:560px; background:var(--superficie); border:1px solid var(--linea); border-radius:var(--raggio-l); box-shadow:var(--ombra-l); padding:clamp(2rem,5vw,3.4rem); }
.esito__cerchio{ width:88px; height:88px; border-radius:50%; margin:0 auto 1.4rem; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--cipria),var(--loto)); box-shadow:0 14px 30px rgba(183,141,160,.4); }
.esito__cerchio svg{ width:44px; height:44px; color:#fff; }
.esito__azioni{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.6rem; }

/* =========================================================
   RIVELA (animazioni allo scroll)
   ========================================================= */
.rivela{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rivela.visto{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rivela{ opacity:1; transform:none; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .faro__griglia,
  .vetrina__griglia,
  .benessere__griglia,
  .qualita__pannello,
  .ordine__pannello{ grid-template-columns:1fr; }
  .vetrina__media{ order:-1; }
  .benessere__figura{ order:-1; }
  .passi{ grid-template-columns:1fr; }
  .passo{ padding-top:2.4rem; }
  .pdp__griglia{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  .menu, .nav-azione .tasto{ display:none; }
  .apri-menu{ display:inline-flex; }
  .menu.mobile{
    display:flex; position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:rgba(251,249,250,.98); backdrop-filter:blur(12px);
    padding:1rem var(--gutter) 1.5rem; border-bottom:1px solid var(--linea); box-shadow:var(--ombra-m);
    animation:cala .3s ease;
  }
  .menu.mobile a{ padding:.9rem 1rem; font-size:1.05rem; }
  @keyframes cala{ from{ opacity:0; transform:translateY(-10px);} to{ opacity:1; transform:none;} }
}
@media (max-width: 560px){
  .pdp__griglia{ grid-template-columns:1fr; }
  .fiducia__riga{ gap:.9rem 1.4rem; }
  .cookie{ inset:auto .7rem .7rem .7rem; }
}