/* =============================================================================
   stile.css · il foglio condiviso delle pagine costruite il 21/09/2026 (P06)
   =============================================================================
   PERCHE' ESISTE, E PERCHE' LE DUE PAGINE VECCHIE NON LO USANO.

   Dal 21/09 il sito ha 17 pagine invece di 2. Copiare ventimila caratteri di
   CSS dentro ognuna vuol dire che il giorno in cui un colore cambia, cambia in
   diciassette posti — ed e' esattamente il modo in cui un prezzo scritto a mano
   in nove punti diventa due prezzi (la ragione per cui esiste `lib/prezzo.js`).
   Qui i token sono scritti una volta.

   🔴 `index.html` e `fatto/index.html` CONTINUANO A PORTARE IL LORO CSS DENTRO
      LA PAGINA, e non e' pigrizia: `glare_v2/scripts/prezzo_esposto.mjs` legge
      `font-size` di `.plan .amount .big` e `.plan .lordo` **dal testo della
      pagina** per decidere se il totale IVA inclusa e' leggibile senza cercarlo
      (art. 22 Cod. Cons.). Spostando quelle due regole in un file esterno il
      controllo non le troverebbe piu' e andrebbe rosso — o peggio, se un giorno
      qualcuno lo allargasse per farlo passare, diventerebbe verde senza misurare
      niente. La duplicazione dei token fra quelle due pagine e questo file e'
      il prezzo dichiarato di quella misura.

   I valori dei token sono COPIATI da `fatto/index.html` (tavolozza Rosa Cipria,
   la stessa dell'app): chi ne cambia uno li cambia in tutt'e tre i posti.
   ============================================================================= */

:root{
  --bg:#FAF5F4; --surface:#FFFFFF; --surface-2:#F4EBEA; --surface-3:#EFE3E3;
  --text:#241820; --muted:#82707A; --border:#EBDCDC;
  --accent:#7A2E52; --accent-2:#93375F; --accent-ink:#FFFFFF;
  --highlight:#E9964F; --highlight-soft:#FBE7CF;
  --good:#3E8E6E;
  --ring:rgba(122,46,82,.30);
  --shadow:0 1px 2px rgba(36,24,32,.05), 0 12px 30px -12px rgba(122,46,82,.18);
  --shadow-sm:0 1px 2px rgba(36,24,32,.06), 0 6px 16px -10px rgba(122,46,82,.16);
  --display:"Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --body:"Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:"Space Mono", ui-monospace, Menlo, monospace;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --bg:#161016; --surface:#201620; --surface-2:#291D28; --surface-3:#332532;
    --text:#F4EAEF; --muted:#B29AA6; --border:#37262F;
    --accent:#DB8CB6; --accent-2:#E7A6C9; --accent-ink:#241820;
    --highlight:#F0A85F; --highlight-soft:#3a2a1c;
    --good:#74C2A0;
    --ring:rgba(219,140,182,.40);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 34px -14px rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#161016; --surface:#201620; --surface-2:#291D28; --surface-3:#332532;
  --text:#F4EAEF; --muted:#B29AA6; --border:#37262F;
  --accent:#DB8CB6; --accent-2:#E7A6C9; --accent-ink:#241820;
  --highlight:#F0A85F; --highlight-soft:#3a2a1c;
  --good:#74C2A0;
  --ring:rgba(219,140,182,.40);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 34px -14px rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -12px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{width:min(1120px,92vw); margin-inline:auto}
section{padding:clamp(44px,7vw,88px) 0}

/* 🔴 30/09/2026 · UNA SCATOLA SENZA IMMAGINE NON EREDITA L'ARIA DI UNA CHE CE L'HA.
   Rilievo di Giorgio (P06 v12 §3). Misurato prima di toccare, su
   /fatto/parrucchieri/ a 1280: sette sezioni, UNA sola con immagini, e tutte
   con gli stessi 88+88 px di respiro. La sezione «E sai sempre come sta
   andando» era alta 299 px e ne portava 176 di aria: piu' di meta' della sua
   altezza era vuoto. Il risultato sono i buchi verticali che si vedono
   scorrendo.
   Le due misure sono separate perche' servono a cose diverse: una sezione con
   una schermata dentro ha bisogno di respiro intorno all'immagine, una di
   testo no — il testo ha gia' il suo interlinea.
   La classe la mette `costruisci.py` contando le immagini della sezione: non
   si usa `:has()` perche' una regola che dipende dal supporto del browser
   cambia il layout a seconda di chi guarda, e questa e' una misura. */
section.magra{padding:clamp(26px,3.4vw,44px) 0}

/* Due sezioni magre di fila non fanno 88 px di vuoto in mezzo: la seconda
   recupera. Senza questa riga, accorpare le scatole sposta il buco invece di
   chiuderlo. */
section.magra + section.magra{padding-top:clamp(14px,2vw,26px)}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.06; text-wrap:balance; margin:0}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.2vw,2.2rem)}
h3{font-size:1.14rem; font-weight:700; letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
ul{margin:0; padding:0; list-style:none}
.eyebrow{font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--accent)}
.lede{color:var(--muted); font-size:1.12rem; max-width:62ch}
.stack > * + *{margin-top:1rem}
.center{text-align:center}

/* Il solo elemento non decorativo di questo file: chi arriva da tastiera deve
   poter saltare la barra. Era assente sulle pagine vecchie e non lo rifaccio. */
.salta{position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--text);
  padding:.7em 1.1em; border-radius:0 0 12px 0; z-index:99; text-decoration:none; font-weight:600}
.salta:focus{left:0}

/* ── bottoni ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--body); font-weight:600;
  border-radius:999px; padding:.85em 1.4em; font-size:1rem; cursor:pointer; text-decoration:none;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
@media (prefers-reduced-motion: reduce){ .btn:hover{transform:none} }
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}

/* ── barra ───────────────────────────────────────────────────────────────── */
header{position:sticky; top:0; z-index:50; background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; gap:1.2rem; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:800;
  font-size:1.3rem; letter-spacing:-.03em; text-decoration:none}
.tick{width:1.5em; height:1.5em; flex:none; color:var(--accent)}
.tick path{fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.nav-links{display:flex; gap:1.3rem; margin-left:auto; font-size:.96rem; font-weight:500}
.nav-links a{color:var(--muted); text-decoration:none; transition:color .15s}
.nav-links a:hover{color:var(--text)}
@media(max-width:860px){ .nav-links{display:none} }
/* Come su /fatto/: la porta di chi e' gia' cliente sta FUORI da .nav-links,
   perche' la riga qui sopra nasconde quei collegamenti sul telefono e un tasto
   d'accesso che sparisce per meta' di chi guarda e' un tasto che non c'e'. */
.nav a.login{margin-left:auto; color:var(--muted); text-decoration:none; font-weight:600;
  font-size:.96rem; white-space:nowrap; transition:color .15s}
.nav-links + a.login{margin-left:0}
.nav a.login:hover{color:var(--text)}
.nav a.login:focus-visible{outline:3px solid var(--ring); outline-offset:3px; border-radius:6px}
.iconbtn{background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.iconbtn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
@media(max-width:420px){ .nav{gap:.7rem} .brand{font-size:1.12rem} }

/* ── briciole ────────────────────────────────────────────────────────────── */
.briciole{padding:1rem 0 0; font-size:.88rem; color:var(--muted)}
.briciole ol{display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none}
.briciole li + li:before{content:"›"; margin-right:.4rem; color:var(--border)}
.briciole a{color:var(--muted)}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(28px,4vw,52px); padding-bottom:clamp(28px,4vw,52px)}
.hero .lede{margin-top:1.2rem; font-size:1.16rem}
.prove{display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:1.4rem; font-size:.94rem; color:var(--muted)}
.prove span{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap}
.prove b{color:var(--good); font-weight:700}

/* ── griglie e schede ────────────────────────────────────────────────────── */
.griglia{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.griglia.due{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.scheda{background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:24px; box-shadow:var(--shadow-sm)}
.scheda h3{margin-bottom:.35rem}
.scheda p{color:var(--muted); font-size:.98rem}
.scheda img{margin-top:16px; border-radius:12px; border:1px solid var(--border); display:block;
  width:100%; max-width:340px; height:auto; margin-inline:auto}
a.scheda{text-decoration:none; display:block; transition:transform .18s ease, border-color .2s}
a.scheda:hover{transform:translateY(-3px); border-color:color-mix(in oklab,var(--accent) 35%, var(--border))}
a.scheda:focus-visible{outline:3px solid var(--ring); outline-offset:3px}
.fondo{background:var(--surface-2)}

/* ── elenchi di spunte ───────────────────────────────────────────────────── */
.spunte li{position:relative; padding-left:1.7rem; margin-bottom:.55rem; color:var(--muted)}
.spunte li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--good); font-weight:700}
.spunte li b{color:var(--text); font-weight:600}
.croci li{position:relative; padding-left:1.7rem; margin-bottom:.55rem; color:var(--muted)}
.croci li:before{content:"✕"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700}

/* ── passi numerati ──────────────────────────────────────────────────────── */
.passi{counter-reset:p; display:grid; gap:14px}
.passi li{counter-increment:p; position:relative; padding-left:3rem; color:var(--muted)}
.passi li:before{content:counter(p); position:absolute; left:0; top:-.1rem; width:2.1rem; height:2.1rem;
  border-radius:999px; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:.95rem}
.passi li b{color:var(--text); font-weight:700; display:block}

/* ── listino d'esempio ───────────────────────────────────────────────────── */
.listino{width:100%; border-collapse:collapse; font-size:.97rem; margin-top:1rem}
.listino caption{text-align:left; color:var(--muted); font-size:.9rem; padding-bottom:.6rem}
.listino th,.listino td{text-align:left; padding:.62em .8em; border-bottom:1px solid var(--border)}
.listino th{font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.listino td:last-child,.listino th:last-child{text-align:right; font-family:var(--mono); font-size:.9rem}
.tabellone{overflow-x:auto}

/* ── domande ─────────────────────────────────────────────────────────────── */
/* 🔴 LE SCATOLE PURAMENTE DESCRITTIVE SI ACCORPANO (P06 v12 §3).
   Misurato a 1280 prima di toccare: `.domande` era `grid` con UNA colonna da
   1120 px, quindi le quattro domande stavano incolonnate su tutta la larghezza
   dello schermo — quattro scatole alte 116, 91, 91 e 116 px con 1120 px di
   larghezza ciascuna. Due colonne sopra i 900 px dimezzano quella pila senza
   toccare né i titoli né il markup: `grid-template-columns` cambia come si
   DISPONGONO, non che cosa sono.
   Sotto i 900 px torna a una colonna: su un telefono due colonne di testo si
   leggono peggio di una pila. */
.domande{display:grid; gap:14px; margin-top:1.2rem}
@media (min-width:900px){ .domande{grid-template-columns:1fr 1fr; gap:14px 18px} }
.domanda{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 22px}
.domanda h3{font-size:1.04rem; margin-bottom:.4rem}
.domanda p{color:var(--muted); font-size:.98rem}

/* ── prezzo ──────────────────────────────────────────────────────────────── */
.plan{background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:clamp(26px,4vw,40px); box-shadow:var(--shadow); max-width:560px}
.plan .amount{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.plan .amount .big{font-family:var(--display); font-weight:800; font-size:3.2rem; letter-spacing:-.03em}
.plan .amount .per{color:var(--muted); font-size:1.02rem}
.plan .lordo{font-size:1rem; color:var(--muted); margin-top:.35rem}
.plan .anno{margin-top:.7rem; font-size:1rem; color:var(--text); font-weight:600}
.plan ul{margin-top:1.3rem}

/* ── figure e schermate ──────────────────────────────────────────────────── */
figure{margin:0}
figure img{display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--border); background:var(--surface-2)}
figcaption{color:var(--muted); font-size:.86rem; margin-top:.6rem}
.schermate{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:1.4rem}
.schermate figure img{max-width:340px; margin-inline:auto}

/* ── chiusura ────────────────────────────────────────────────────────────── */
.finale{background:var(--accent); color:var(--accent-ink); border-radius:24px;
  padding:clamp(30px,5vw,56px); text-align:center; position:relative; overflow:hidden}
.finale:after{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(90% 120% at 100% 0%, color-mix(in oklab,var(--highlight) 40%, transparent), transparent 55%)}
.finale h2,.finale p{position:relative}
.finale p{opacity:.93; margin:.8rem auto 0; max-width:48ch}
.finale .btn{position:relative; margin-top:1.5rem; background:var(--surface); color:var(--accent)}

/* ── fonti (controllo 1 della guardia: una cifra pubblicata ha la sua fonte) ─ */
.fonti{margin-top:2rem; padding-top:1.2rem; border-top:1px dashed var(--border);
  font-size:.86rem; color:var(--muted)}
.fonti h2{font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; font-family:var(--body); font-weight:700; margin-bottom:.6rem}
.fonti li{margin-bottom:.4rem}

/* ── piede ───────────────────────────────────────────────────────────────── */
footer{padding:44px 0 60px; border-top:1px solid var(--border); color:var(--muted); font-size:.9rem}
.piede-griglia{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.piede-griglia h2{font-family:var(--body); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.14em; font-weight:700; color:var(--text); margin-bottom:.7rem}
.piede-griglia a{color:var(--muted); text-decoration:none; display:block; padding:.18rem 0}
.piede-griglia a:hover{color:var(--text)}
.piede-legale{margin-top:26px; padding-top:18px; border-top:1px dashed var(--border); font-size:.84rem}