/* Capelli & Capricci — foglio di stile unico
   Ordine: token, base, tipografia, impianto, barra, bottoni,
   eroe, cartella, pagine interne, contatti, piede, entrata. */

/* ---------- caratteri, serviti dal sito ----------
   Nessuna richiesta a Google: i file stanno in fonts/.
   Il browser scarica solo i sottoinsiemi che la pagina usa. */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/dm-mono-normal-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/dm-mono-normal-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/dm-mono-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/dm-mono-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/dm-mono-normal-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/dm-mono-normal-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url('fonts/fraunces-normal-300_900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url('fonts/fraunces-normal-300_900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url('fonts/instrument-sans-italic-400_700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url('fonts/instrument-sans-italic-400_700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/instrument-sans-normal-400_700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/instrument-sans-normal-400_700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* solo la "&" del marchio: 4,9 KB invece dei 273 del corsivo completo */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url('fonts/fraunces-italic-amp.woff2') format('woff2');unicode-range:U+26}

/* ---------- token ---------- */
:root{
  --calce:#F3F0F4;
  --calce-2:#E9E4EE;
  --inchiostro:#241A28;
  --inchiostro-2:#6A5D70;
  --ottone:#A88A4E;
  --ottone-chiaro:#D8BE85;       /* ottone per fondi scuri: sul prugna il --ottone
                                    dà solo 3,26:1, sotto la soglia di leggibilità */
  --ottone-testo:#7A6132;        /* ottone scurito per il TESTO su fondo chiaro:
                                    il --ottone darebbe 2,90:1, questo 5,19:1 */

  /* impostati da capelliecapricci.js in base alla ciocca scelta */
  --capriccio:#543350;
  --su-capriccio:#F7F0F6;

  /* prugna fisso della fascia delle porte: NON cambia con la ciocca scelta,
     altrimenti mezza homepage cambierebbe colore da un'altra pagina */
  --prugna:#543350;

  --display:"Fraunces",Georgia,serif;
  --testo:"Instrument Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --misura:74rem;
  --bordo:1px solid color-mix(in srgb,var(--inchiostro) 14%,transparent);
  --transizione:520ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  /* clip e non hidden: taglia la sporgenza delle ciocche ruotate
     senza creare un contenitore di scorrimento che romperebbe lo sticky */
  overflow-x:clip;
  background:var(--calce);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--capriccio);outline-offset:3px;border-radius:2px}
.sezione--scura :focus-visible,.eroe :focus-visible{outline-color:var(--ottone)}
[hidden]{display:none !important}
.solo-lettori{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  font-weight:420;
  line-height:.98;
  letter-spacing:-.018em;
}
.occhiello{
  font-family:var(--mono);
  font-size:.7rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--inchiostro-2);
  margin:0;
}
.codice{font-family:var(--mono);font-feature-settings:"tnum"}

/* ---------- impianto ---------- */
.contenitore{width:min(100% - 2.5rem,var(--misura));margin-inline:auto}
.sezione{padding-block:clamp(4rem,8vw,7rem)}
.sezione--scura{background:var(--inchiostro);color:var(--calce)}
.sezione--scura .occhiello{color:color-mix(in srgb,var(--calce) 55%,transparent)}

.titolo-sezione{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;
  margin:0 0 2.5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--ottone);
}
.titolo-sezione h2{margin:0;font-size:clamp(1.8rem,1.3rem + 2.2vw,2.9rem)}
.titolo-sezione .occhiello{margin-left:auto;text-align:right}
/* senza filo dove le voci sotto portano già il proprio separatore:
   due righe parallele a poche decine di pixel dicono la stessa cosa */
.titolo-sezione--nudo{border-bottom:0;padding-bottom:0;margin-bottom:2.5rem}

/* ---------- barra ---------- */
.barra{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--calce) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--bordo);
  transition:background 320ms ease,border-color 320ms ease,color 320ms ease;
}
.barra__interno{display:flex;align-items:center;gap:1rem;min-height:3.75rem}
.barra__marchio{
  font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
  font-size:1.05rem;font-weight:500;
  text-decoration:none;letter-spacing:-.01em;
  white-space:nowrap;
}
.barra__marchio em{font-style:italic;color:var(--capriccio);transition:color var(--transizione)}
.barra__voci{display:flex;gap:1.35rem;margin-left:auto;align-items:center;font-size:.88rem}
.barra__voci a{text-decoration:none;color:var(--ottone-testo);white-space:nowrap}
.barra__voci a:hover{color:var(--inchiostro)}
.barra__voci a[aria-current="page"]{
  color:var(--inchiostro);
  text-decoration:underline;
  text-decoration-color:var(--ottone);
  text-underline-offset:.45em;
  text-decoration-thickness:1px;
}
/* barra trasparente sopra la foto, finché non si scorre */
.barra--sopra-foto{
  background:transparent;backdrop-filter:none;
  border-bottom-color:transparent;color:var(--calce);
  text-shadow:0 1px 20px rgba(36,26,40,.65);
}
.barra--sopra-foto .barra__marchio em{color:var(--ottone-chiaro)}
/* sopra la foto l'ottone non è praticabile: darebbe 1,68:1 e per portarlo
   in soglia servirebbe una barra scura piena, perdendo la trasparenza.
   Qui il bianco pieno (5,25:1) sostituisce il bianco al 78% (4,12:1). */
.barra--sopra-foto .barra__voci a{color:#fff}
.barra--sopra-foto .barra__voci a:hover,
.barra--sopra-foto .barra__voci a[aria-current="page"]{color:#fff}
@media (max-width:46rem){.barra__voci .nascondi-stretto{display:none}}
/* su schermi molto stretti il menu si stringe. Stava dentro il blocco
   della vecchia cartella colori, insieme a regole ormai morte: qui
   sta col resto della barra, dove si trova. */
@media (max-width:34rem){
  .barra__voci{gap:.9rem;font-size:.82rem}
  .barra__marchio{font-size:.95rem}
}

/* ---------- eroe: foto a tutto schermo ---------- */
.eroe{
  position:sticky;top:0;z-index:0;
  height:100vh;height:100svh;    /* svh evita il salto con le barre del browser mobile */
  min-height:34rem;
  margin-top:-3.75rem;           /* la barra galleggia sopra la foto */
  overflow:hidden;
  /* riga e colonna bloccate: senza minmax(0,1fr) la griglia si dimensiona
     sull'altezza vera della foto (2000px) e spinge il testo sotto la piega */
  display:grid;
  grid-template:minmax(0,1fr) / minmax(0,1fr);
  isolation:isolate;
}
.eroe__foto{
  grid-area:1/1;
  width:100%;height:100%;min-height:0;
  object-fit:cover;
  /* Niente zoom: lo scorrimento sposta l'inquadratura DENTRO la foto, così
     quello che il ritaglio nasconde all'inizio si scopre scorrendo.
     L'asse che non ha ritaglio resta fermo da solo: su schermo largo si
     muove in verticale di pochi pixel, su telefono attraversa la foto
     da sinistra a destra, dalle mani allo specchio. */
  object-position:calc(34% + var(--p,0) * 62%) calc(var(--p,0) * 100%);
  will-change:object-position;
}
/* Quando lo schermo è più stretto di 3:2 la foto sborda in orizzontale, e la
   panoramica diventa uno slittamento laterale mentre si scorre in verticale:
   sul telefono è disorientante. Lì l'inquadratura resta ferma. Sopra il 3:2
   lo sbordo è verticale e il movimento è di pochi pixel, quindi resta. */
@media (max-aspect-ratio:3/2){
  .eroe__foto{object-position:42% 50%}
}
.eroe__velo{
  grid-area:1/1;
  /* la foto è in controluce e molto chiara: senza questo velo il marchio
     nella barra e il titolo non reggono il contrasto */
  background:
    linear-gradient(180deg,rgba(36,26,40,.58) 0%,rgba(36,26,40,.22) 12%,rgba(36,26,40,0) 26%),
    linear-gradient(0deg,rgba(36,26,40,.88) 0%,rgba(36,26,40,.66) 22%,rgba(36,26,40,.3) 46%,rgba(36,26,40,0) 70%);
  opacity:calc(.9 + var(--p,0) * .1);
}
.eroe__contenuto{
  grid-area:1/1;
  align-self:end;
  width:min(100% - 2.5rem,var(--misura));
  margin-inline:auto;
  padding-bottom:clamp(2.5rem,6vh,4.5rem);
  color:var(--calce);
  text-shadow:0 1px 30px rgba(36,26,40,.5);
  opacity:calc(1 - var(--p,0) * 1.5);
  translate:0 calc(var(--p,0) * -6vh);
}
.eroe .occhiello{color:color-mix(in srgb,#fff 72%,transparent)}
/* il marchio sta sempre su una riga sola: la misura scende col
   viewport invece di mandare "& Capricci" a capo */
.marchio{
  margin:1rem 0 0;
  font-size:min(7.4rem,11.4vw);
  white-space:nowrap;
}
.marchio .amp{
  font-style:italic;
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 144;
  color:var(--ottone);
}
.eroe__frase{
  margin:1.25rem 0 0;max-width:64ch;
  color:color-mix(in srgb,#fff 86%,transparent);
  font-size:clamp(.92rem,.86rem + .22vw,1.02rem);
  line-height:1.55;
}
.eroe__invito{
  display:flex;align-items:center;gap:.75rem;
  margin:2.25rem 0 0;
  opacity:calc(1 - var(--p,0) * 2.6);
}
.eroe__invito .occhiello{color:color-mix(in srgb,#fff 62%,transparent)}
.eroe__invito::after{
  content:"";height:1px;flex:0 0 clamp(2rem,7vw,5rem);
  background:var(--ottone);
  scale:calc(1 - var(--p,0)) 1;transform-origin:left;
}
/* tutto ciò che segue scorre sopra la foto */
.dopo{position:relative;z-index:1;background:var(--calce)}

/* ---------- chi sono: foto a sinistra, racconto a destra ---------- */
.ritratto{
  display:grid;gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:56rem){
  .ritratto{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}
.ritratto__foto{margin:0}
/* con un testo lungo accanto, la foto resta in vista invece di lasciare
   mezza colonna vuota sotto di sé */
@media (min-width:56rem){
  .ritratto__foto--segue{position:sticky;top:5rem}
}
.ritratto__foto img{width:100%;height:auto}
.ritratto__attacco{
  margin:0 0 1.15rem;
  font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 60;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem);
  font-weight:400;line-height:1.28;letter-spacing:-.012em;
  color:var(--inchiostro);
  text-wrap:balance;
}
.ritratto__testo p{margin:0 0 1.05rem;color:var(--inchiostro-2);max-width:58ch}
.ritratto__testo p:last-child{margin-bottom:0}
/* firma: in tondo e non in corsivo, perché il Fraunces corsivo installato
   contiene solo la "&" e il browser dovrebbe inclinarlo artificialmente */
.ritratto__firma{
  margin:1.6rem 0 0 !important;
  padding-top:1.1rem;
  border-top:1px solid var(--ottone);
}
.ritratto__firma-nome{
  display:block;
  font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 60;
  font-size:1.28rem;font-weight:500;
  color:var(--inchiostro);
  letter-spacing:-.012em;
}
.ritratto__firma-ruolo{
  display:block;margin-top:.25rem;
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--inchiostro-2);
}

/* ---------- porte verso le altre pagine ---------- */
/* fascia prugna a metà pagina: il colore separa le due sezioni chiare
   e mette in risalto l'elemento che porta nelle altre pagine */
.porte{
  display:grid;gap:1px;
  background:color-mix(in srgb,#fff 16%,var(--prugna));  /* le righe di separazione */
}
@media (min-width:52rem){.porte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porta{
  display:block;text-decoration:none;
  background:var(--prugna);color:var(--calce);
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem);
  transition:background 260ms ease;
}
.porta:hover{background:color-mix(in srgb,#fff 9%,var(--prugna))}
.porte :focus-visible{outline-color:var(--ottone-chiaro)}
.porta .occhiello{color:color-mix(in srgb,#fff 58%,transparent)}
.porta h3{
  font-family:var(--display);font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 60;
  font-size:1.5rem;font-weight:500;margin:.6rem 0 .5rem;
}
.porta p{margin:0;color:color-mix(in srgb,#fff 76%,transparent);font-size:.95rem}
.porta__freccia{
  display:inline-block;margin-top:1rem;
  font-family:var(--mono);font-size:.78rem;color:var(--ottone-chiaro);
  transition:translate 240ms ease;
}
.porta:hover .porta__freccia{translate:.3rem 0}

/* ---------- testata pagine interne ---------- */
.testata{padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem)}
.testata h1{margin:.9rem 0 0;font-size:clamp(2.6rem,1.7rem + 4.6vw,5rem)}
.testata__sottotitolo{
  margin:1.05rem 0 0;
  font-size:clamp(1.35rem,1.1rem + 1.15vw,1.95rem);
  font-weight:400;
  color:var(--inchiostro-2);
}
.testata p{margin:1.4rem 0 0;max-width:62ch;color:var(--inchiostro-2);font-size:1.06rem}

/* ---------- introduzione ai servizi ---------- */
.introduzione{max-width:68ch}
.introduzione p{margin:0 0 1.15rem;color:var(--inchiostro-2)}
.introduzione p:last-child{margin-bottom:0;color:var(--inchiostro)}
.introduzione a{
  color:var(--capriccio);
  text-decoration-color:var(--ottone);
  text-underline-offset:.25em;
  transition:color var(--transizione);
}

/* ---------- servizi ---------- */
/* niente fondi pieni: ogni servizio si apre con un filo prugna sopra il
   titolo, e attorno resta molto bianco */
.gruppo{padding-block:clamp(3rem,6vw,5.25rem)}
.gruppo + .gruppo{padding-top:0}
.gruppo::before{                    /* il filo, dal margine fino a metà pagina */
  content:"";display:block;
  width:50%;height:3px;
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
  background:var(--prugna);
}
.gruppo__griglia{display:grid;gap:1.25rem clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){.gruppo__griglia{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
/* il titolo di ogni categoria è una targa prugna: dà colore alla pagina
   e segna dove comincia un servizio mentre si scorre l'elenco accanto */
.gruppo h2{
  margin:0;
  font-size:clamp(1.85rem,1.35rem + 2.1vw,2.75rem);
  color:var(--inchiostro);
}

/* si muove tutta la colonna, targa e descrizione insieme: se restasse
   appiccicato solo l'h2, scorrendo coprirebbe il testo sotto di sé */
@media (min-width:56rem){
  .gruppo__griglia > div:first-child{position:sticky;top:5rem}
}
.gruppo__intro{margin:0 0 2.1rem;color:var(--inchiostro-2);max-width:64ch}
.servizio{padding:1.4rem 0;border-bottom:var(--bordo)}
.servizio:last-child{border-bottom:0;padding-bottom:0}
.servizio h3{
  font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 40;
  font-size:1.22rem;font-weight:500;margin:0 0 .35rem;
}
/* elenco dei servizi di una categoria, senza prezzi */
.elenco{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
/* due colonne solo dove le voci sono tante, altrimenti restano celle vuote */
@media (min-width:40rem){
  .elenco--due{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2rem,4vw,3.5rem)}
}
.elenco a{
  color:var(--prugna);
  text-decoration-color:var(--ottone);text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.elenco li{
  padding:.72rem 0;border-bottom:var(--bordo);
  font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 40;
  font-size:1.08rem;font-weight:500;
}
.servizio p{margin:0;max-width:64ch;color:var(--inchiostro-2)}
/* p.servizio__meta e non .servizio__meta: serve la stessa specificità
   di .servizio p, altrimenti il margine sopra viene annullato */
p.servizio__meta{
  margin:.7rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;max-width:none;
  font-family:var(--mono);font-size:.74rem;color:var(--inchiostro-2);
}
.servizio__meta b{font-weight:400;color:var(--capriccio);transition:color var(--transizione)}

/* ---------- listino prezzi ---------- */
/* il listino su un pannello in tinta chiarissima: dà una massa alle righe,
   che prima galleggiavano sul bianco, senza aggiungere colori alla palette */
.listino--pannello{
  background:var(--calce-2);
  padding:clamp(.5rem,1.6vw,1.1rem) clamp(1.1rem,2.6vw,1.85rem);
  column-gap:clamp(2rem,5vw,3.5rem);
}
.listino--pannello .voce:last-child{border-bottom:0}
@media (min-width:52rem){
  /* con due colonne l'ultima riga di ciascuna resta senza filo */
  .listino--pannello .voce:nth-last-child(2){border-bottom:0}
}

.listino{display:grid;gap:0 clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:52rem){.listino{grid-template-columns:repeat(2,minmax(0,1fr))}}
.voce{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:.35rem .75rem;
  padding:1.05rem 0;border-bottom:var(--bordo);
}
.voce__nome{
  font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 40;
  font-size:1.14rem;font-weight:500;margin:0;
}
.voce__prezzo{
  margin:0;
  font-family:var(--mono);font-size:.98rem;white-space:nowrap;
  color:var(--capriccio);transition:color var(--transizione);
}
.voce__durata{
  margin:0;grid-column:1/-1;
  font-family:var(--mono);font-size:.74rem;color:var(--inchiostro-2);
}
.nota{margin:2.25rem 0 0;color:var(--inchiostro-2);font-size:.93rem;max-width:58ch}
.sezione--scura .nota{color:color-mix(in srgb,var(--calce) 70%,transparent)}

/* ---------- persone ---------- */
.mani{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:52rem){.mani{grid-template-columns:repeat(3,minmax(0,1fr))}}
.persona{border-top:2px solid var(--capriccio);padding-top:1.1rem;transition:border-color var(--transizione)}
.persona h3{
  font-family:var(--display);font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 60;
  font-size:1.4rem;font-weight:500;margin:0 0 .2rem;
}
.persona__ruolo{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--inchiostro-2);margin:0 0 .85rem;
}
.persona p:last-child{margin:0;color:var(--inchiostro-2)}
/* nella sezione scura --inchiostro-2 dava 2,72:1: pensato per il fondo
   chiaro della homepage, illeggibile qui. E il filo in prugna su quasi
   nero era a 1,57:1, cioè invisibile proprio dove serve a separare. */
.sezione--scura .persona p:last-child{color:color-mix(in srgb,var(--calce) 72%,transparent)}
.sezione--scura .persona{border-top-color:var(--ottone)}

/* ---------- contatti ---------- */
/* banda con l'immagine sfumata dietro al testo: l'immagine nasce su fondo
   nero, quindi non si può renderla trasparente con i modi di fusione —
   qui è l'opacità a farla arretrare fino a diventare trama */
.fascia{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(2.25rem,5vw,3.75rem);
  margin-bottom:clamp(.5rem,2vw,1.5rem);
}
.fascia__sfondo{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  opacity:.14;
}
.fascia__testo p{margin:0;max-width:62ch;font-size:1.06rem}

.orari{margin:0;font-family:var(--mono);font-size:.94rem;max-width:32rem}
.orari div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:var(--bordo);
}
.orari dt{color:var(--inchiostro-2)}
.orari dd{margin:0}
/* il giorno di oggi lo segna capelliecapricci.js: fondo prugna, così l'orario
   di oggi si trova senza leggere tutta la tabella */
.orari .oggi{
  background:var(--prugna);
  margin-inline:-.85rem;
  padding-inline:.85rem;
  border-bottom-color:transparent;
}
.orari .oggi dt,.orari .oggi dd{color:var(--calce)}
.orari .oggi dt::after{content:" · oggi"}

/* dati dell'attività: stesso ritmo della tabella degli orari, così i due
   blocchi della pagina si leggono come una cosa sola */
/* a tutta colonna, così i fili delle righe finiscono esattamente dove
   finisce la mappa qui sotto; il valore sta accanto all'etichetta e non
   spinto al bordo destro, che a questa larghezza lascerebbe un vuoto */
.dati{margin:0 0 2rem}
.dati div{
  display:grid;grid-template-columns:12.5rem minmax(0,1fr);
  gap:.2rem 1.5rem;padding:.78rem 0;border-bottom:var(--bordo);
}
.dati dt{
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-2);
  padding-top:.2rem;
}
.dati dd{margin:0;font-size:.96rem;line-height:1.45}
.dati a{text-decoration-color:var(--ottone);text-underline-offset:.25em}
@media (max-width:40rem){.dati div{grid-template-columns:minmax(0,1fr)}}

/* ---------- riquadro d'attesa della mappa ---------- */
.mappa{margin:0;border:var(--bordo)}
.mappa__telaio{display:block;width:100%;aspect-ratio:16/10;border:0}
.mappa__attesa{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:.7rem;aspect-ratio:16/10;padding:clamp(1.25rem,3vw,2rem);
  background:var(--calce-2);
}
.mappa__attesa-titolo{
  margin:0;font-family:var(--display);
  font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 60;
  font-size:1.2rem;font-weight:500;
}
.mappa__attesa-testo{margin:0;max-width:46ch;font-size:.94rem;color:var(--inchiostro-2)}
.mappa__attesa .bottone{margin-top:.3rem}
.mappa__attesa-nota{margin:.2rem 0 0;max-width:46ch;font-size:.82rem;color:var(--inchiostro-2)}
.mappa__attesa-nota a{color:var(--prugna);text-decoration-color:var(--ottone);text-underline-offset:.22em}
@media (max-width:40rem){
  .mappa__telaio{aspect-ratio:4/3}
  .mappa__attesa{aspect-ratio:auto}
}

/* ---------- banner del consenso ---------- */
.banner{
  position:fixed;inset:auto 0 0 0;z-index:60;
  background:var(--inchiostro);color:var(--calce);
  border-top:2px solid var(--ottone);
  box-shadow:0 -12px 30px -18px rgba(36,26,40,.7);
}
.banner__interno{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem clamp(1.5rem,4vw,3rem);
  padding-block:1.15rem;
}
.banner__parole{flex:1 1 26rem;min-width:0}
.banner__titolo{
  margin:0 0 .3rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--calce) 62%,transparent);
}
.banner__testo{
  margin:0;max-width:72ch;font-size:.92rem;line-height:1.5;
  color:color-mix(in srgb,var(--calce) 84%,transparent);
}
.banner__testo a{color:var(--calce);text-decoration-color:var(--ottone);text-underline-offset:.24em}
/* le due finalità, una per riga. Le caselle NON sono preselezionate:
   il consenso deve essere un gesto, non un'omissione */
.banner__finalita{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.5rem;max-width:72ch}
.banner__finalita label{
  display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;
  font-size:.86rem;line-height:1.45;
  color:color-mix(in srgb,var(--calce) 78%,transparent);
}
.banner__finalita b{color:var(--calce);font-weight:600}
.banner__finalita input{
  flex:0 0 auto;margin:.18rem 0 0;width:1.05rem;height:1.05rem;
  accent-color:var(--ottone);cursor:pointer;
}
/* i due pulsanti sono identici di proposito: la legge chiede che rifiutare
   non sia più faticoso né meno visibile che accettare */
.banner__scelte{display:flex;gap:.6rem;flex:0 0 auto}
.banner__scelta{
  font:inherit;font-size:.92rem;font-weight:600;
  padding:.7rem 1.6rem;cursor:pointer;
  background:transparent;color:var(--calce);
  border:1px solid color-mix(in srgb,var(--calce) 55%,transparent);
  border-radius:2rem;
  transition:background 200ms ease,border-color 200ms ease;
}
.banner__scelta:hover{background:color-mix(in srgb,var(--calce) 12%,transparent);border-color:var(--calce)}
.banner :focus-visible{outline-color:var(--ottone-chiaro)}
@media (max-width:44rem){
  .banner__scelte{width:100%;flex-wrap:wrap}
  /* con tre pulsanti su schermo stretto, "Salva le scelte" non ci sta
     in riga: va a capo a tutta larghezza, gli altri due restano pari */
  .banner__scelta{flex:1 1 8rem}
}
@media (prefers-reduced-motion:no-preference){
  .banner{animation:sale-banner 380ms cubic-bezier(.22,.61,.36,1) backwards}
  @keyframes sale-banner{from{translate:0 100%}}
}

.istruzioni p{margin:0 0 1.2rem;max-width:56ch;color:var(--inchiostro-2)}
.istruzioni p:last-child{margin-bottom:0}
.istruzioni b{font-weight:600;color:var(--inchiostro)}


.bottoni-contatto{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 0}

/* ---------- bottoni ---------- */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.5rem;
  font:inherit;font-size:.94rem;font-weight:600;
  border:1px solid transparent;border-radius:2rem;
  cursor:pointer;text-decoration:none;
  background:var(--capriccio);color:var(--su-capriccio);
  transition:background var(--transizione),color var(--transizione),translate 160ms ease;
}
.bottone:hover{translate:0 -1px}
.bottone svg{width:1.05em;height:1.05em;flex:none}
.bottone--vuoto{background:transparent;color:var(--inchiostro);border-color:color-mix(in srgb,var(--inchiostro) 28%,transparent)}
.bottone--vuoto:hover{border-color:var(--inchiostro)}
.sezione--scura .bottone--vuoto,.eroe .bottone--vuoto{color:var(--calce);border-color:color-mix(in srgb,var(--calce) 34%,transparent)}
.bottone--whatsapp{background:#1FA855;color:#062B14}
.bottone--whatsapp:hover{background:#25C263}

/* ---------- piede ---------- */
.piede{border-top:var(--bordo);padding-block:clamp(2rem,4vw,3rem)}
.piede__interno{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:1.4rem clamp(1.5rem,4vw,3.25rem);
}
/* 5rem su un file da 159px: su schermi a doppia densità i pixel
   corrispondono e il tratto resta nitido */
.piede__logo{flex:0 0 auto;width:5rem;height:auto}
.piede__dati{
  flex:1 1 24rem;min-width:0;
  display:flex;flex-direction:column;gap:.5rem;
  font-size:.83rem;line-height:1.5;color:var(--inchiostro-2);
}
.piede__dati p{margin:0}
/* 78% dava 3,45:1 su testo da 13px, sotto la soglia di 4,5:1 richiesta.
   93% e' il primo valore che la supera (4,64:1) e lascia comunque la
   riga del copyright un gradino sotto a quella dell'indirizzo. */
.piede__copia{color:color-mix(in srgb,var(--inchiostro-2) 93%,transparent)}
.piede a{text-decoration-color:var(--ottone);text-underline-offset:.25em}
.piede__legale a[aria-current="page"]{color:var(--inchiostro)}


/* ---------- recensioni ---------- */
.recensioni{display:grid;gap:1px;background:color-mix(in srgb,var(--inchiostro) 14%,transparent)}
@media (min-width:56rem){.recensioni{grid-template-columns:repeat(3,minmax(0,1fr))}}
.recensione{
  margin:0;padding:1.5rem clamp(1.1rem,2.5vw,1.6rem);
  background:var(--calce-2);
  display:flex;flex-direction:column;gap:.9rem;
}
.recensione p{margin:0;color:var(--inchiostro-2);font-size:.96rem;line-height:1.55;flex:1 1 auto}
.recensione footer{
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inchiostro-2);
}
/* le stelle sono disegnate dal CSS: nell'HTML resta una sola cifra da
   cambiare (data-stelle), invece di cinque blocchi di codice vettoriale */
.stelle{
  display:block;height:.85rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 19'%3E%3Cpath fill='%237A6132' d='M9.5 0l2.9 6 6.6 1-4.8 4.6 1.2 6.4-5.9-3.1L3.6 18l1.1-6.4L0 7l6.6-1z'/%3E%3C/svg%3E") repeat-x left center / 1.05rem .85rem;
}
.stelle[data-stelle="1"]{width:1.05rem}
.stelle[data-stelle="2"]{width:2.1rem}
.stelle[data-stelle="3"]{width:3.15rem}
.stelle[data-stelle="4"]{width:4.2rem}
.stelle[data-stelle="5"]{width:5.25rem}
.recensioni__fonte{
  margin:1.1rem 0 0;font-family:var(--mono);font-size:.78rem;
}
.recensioni__fonte a{color:var(--prugna);text-decoration-color:var(--ottone);text-underline-offset:.25em}

/* ---------- pagine legali ---------- */
.testo-legale{max-width:68ch}
.testo-legale p{margin:0 0 1.1rem;color:var(--inchiostro-2)}
.testo-legale p:last-child{margin-bottom:0}
.testo-legale b{font-weight:600;color:var(--inchiostro)}
.testo-legale a{color:var(--prugna);text-decoration-color:var(--ottone);text-underline-offset:.22em}
.testo-legale h3{
  margin:1.9rem 0 .6rem;
  font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 40;
  font-size:1.12rem;font-weight:500;color:var(--inchiostro);
}
.testo-legale h3:first-child{margin-top:0}
.testo-legale ul{margin:0 0 1.1rem;padding-left:1.1rem;color:var(--inchiostro-2)}
.testo-legale li{margin-bottom:.45rem}
.testo-legale code{font-family:var(--mono);font-size:.9em;color:var(--inchiostro)}

.tabella-legale{
  width:100%;border-collapse:collapse;margin:0 0 1.1rem;
  font-size:.92rem;text-align:left;
}
.tabella-legale th{
  font-family:var(--mono);font-size:.68rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-2);
  padding:0 .8rem .6rem 0;border-bottom:1px solid var(--ottone);
}
.tabella-legale td{
  padding:.85rem .8rem .85rem 0;border-bottom:var(--bordo);
  color:var(--inchiostro-2);vertical-align:top;
}
@media (max-width:44rem){
  .tabella-legale,.tabella-legale tbody,.tabella-legale tr,.tabella-legale td{display:block;width:100%}
  .tabella-legale thead{display:none}
  .tabella-legale tr{padding:.6rem 0;border-bottom:var(--bordo)}
  .tabella-legale td{border:0;padding:.15rem 0}
  .tabella-legale td:first-child{color:var(--inchiostro);font-family:var(--mono)}
}

.piede__legale a{text-decoration-color:var(--ottone);text-underline-offset:.25em}
.piede__legale a[aria-current="page"]{color:var(--inchiostro)}

/* ---------- entrata ----------
   fill-mode backwards: a fine animazione l'elemento torna alle sue
   regole normali, così hover e ciocca scelta restano vivi. */
@media (prefers-reduced-motion:no-preference){
  .anima{animation:sali 700ms cubic-bezier(.22,.61,.36,1) backwards;animation-delay:var(--ritardo,0ms)}
  @keyframes sali{from{opacity:0;translate:0 14px}}
  .ciocca{animation:cade 620ms cubic-bezier(.28,.9,.36,1) backwards;animation-delay:var(--ritardo,0ms)}
  @keyframes cade{from{opacity:0;rotate:calc(var(--angolo) * var(--apertura,1) * 2.4);translate:0 -1.5rem}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
  .eroe__foto{object-position:40% 50%}
  .eroe__contenuto{opacity:1;translate:0}
  .eroe__invito{opacity:1}
}