/* =============================================================================
   ESTETICA LUCE — sito pubblico
   Design system + pagine. Nessuna dipendenza esterna: un solo carattere,
   Arial, gia' presente su ogni sistema.

   La palette non e' inventata: esce dal logo (cerchio oro su bianco, lettering
   nero molto spaziato) e dalle fotografie dello studio (intonaco avorio, ombre
   di palme, dettagli cipria).

   REGOLA DI CONTRASTO CHE VINCOLA TUTTO IL RESTO
   L'oro #C6A24A su avorio da' 2,4:1, sotto il minimo AA di 4,5:1 per il testo.
   Percio' l'oro del marchio qui e' SOLO bordo, filetto, cerchio, riempimento
   di pulsante. Il pulsante "Prenota" e' oro pieno con testo inchiostro
   (9,1:1), non testo oro su bianco.
   L'unica eccezione e' --oro-testo (#7A6020), un oro scurito apposta per la
   parola accentata dentro i titoli: 5,4:1 sull'avorio. Anche #A8873A, che
   prima faceva questo lavoro, non bastava: 3,17:1 sull'avorio e fino a 2,2:1
   sopra alle fotografie dell'hero.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   UN SOLO CARATTERE, NIENTE CORSIVI

   Il sito usa Arial e nient'altro. Niente @import da Google Fonts: il
   carattere e' gia' installato su ogni computer e su ogni telefono, quindi
   la pagina non aspetta il download di un font per mostrare il testo e non
   fa nessuna richiesta a un dominio esterno (un problema in meno per
   l'informativa privacy).

   Le due variabili --serif e --sans restano, e puntano tutte e due ad Arial:
   sono usate in un centinaio di punti fra style.css e admin.css, e tenerle
   permette di cambiare idea in un file solo. Chi in futuro vorra' due
   caratteri diversi cambia queste due righe e basta.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  /* Colori */
  --oro:        #C6A24A;
  --oro-scuro:  #A8873A;   /* per bordi su fondo chiaro, dove serve piu' stacco */
  /* L'unico oro che puo' fare il TESTO su fondo chiaro. Misurato: #A8873A
     sull'avorio da' 3,17:1, e sotto una fotografia con il velo dell'hero
     scende fra 2,2 e 3,0:1, cioe' sotto il minimo di 3:1 anche per il testo
     grande. Questo da' 5,4:1 sull'avorio e non scende mai sotto 3,9:1
     sull'hero. Si usa solo per .acc; bordi, filetti e cerchi restano oro. */
  --oro-testo:  #7A6020;
  --oro-chiaro: #E3CE93;
  --avorio:     #FAF7F2;
  --avorio-2:   #F4EFE7;
  --greige:     #E7E0D6;
  --cipria:     #E6D3CC;
  --cipria-tenue:#F3E7E3;
  --inchiostro: #1A1A1A;
  --inchiostro-60: #6B6B6B;   /* 5,3:1 su avorio — passa AA per testo normale */
  --inchiostro-40: #9A9A9A;   /* solo decorativo, mai testo informativo */
  --bianco:     #FFFFFF;

  /* Tipografia */
  --serif: Arial, Helvetica, sans-serif;
  --sans:  Arial, Helvetica, sans-serif;

  /* Scala tipografica fluida: nessuna media query per i corpi di testo */
  --t-hero:  clamp(2.9rem, 8vw, 6.5rem);
  --t-h1:    clamp(2.3rem, 5.5vw, 4rem);
  --t-h2:    clamp(1.9rem, 4vw, 3rem);
  --t-h3:    clamp(1.35rem, 2.4vw, 1.75rem);
  --t-body:  clamp(1rem, 1.05vw, 1.075rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Spaziatura */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: clamp(4.5rem, 10vw, 9rem);   /* respiro verticale fra sezioni */

  /* Struttura */
  --larghezza:  1240px;
  --larghezza-stretta: 760px;
  --bordo:      1px solid var(--greige);
  --raggio:     2px;          /* quasi squadrato: il marchio non ha angoli molli */
  --raggio-img: 3px;

  /* Movimento */
  --molla: cubic-bezier(0.22, 1, 0.36, 1);
  --lento: 0.8s var(--molla);
  --medio: 0.45s var(--molla);
  --breve: 0.25s ease;

  /* Ombre: appena percettibili, il fondo e' gia' caldo */
  --ombra-1: 0 1px 3px rgba(26,26,26,.05);
  --ombra-2: 0 6px 24px rgba(26,26,26,.07);
  --ombra-3: 0 18px 50px rgba(26,26,26,.10);

  --nav-h: 76px;
}

/* -----------------------------------------------------------------------------
   2. Azzeramento e basi
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* compensa la barra fissa quando si salta a un'ancora */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.75;
  color: var(--inchiostro);
  background: var(--avorio);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  /* 400 e non 300: Arial ha due soli pesi, e un 300 viene reso 400 comunque.
     Scriverlo esplicitamente evita di credere che ci sia una gerarchia di
     peso che il carattere non puo' dare: qui la gerarchia la fa la misura. */
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
  margin: 0 0 var(--s-2);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

/* Il focus non si toglie mai: e' l'unico modo di navigare da tastiera.
   Si ridisegna perche' l'outline predefinito stona, non perche' dia fastidio. */
:focus-visible {
  outline: 2px solid var(--oro-scuro);
  outline-offset: 3px;
  border-radius: var(--raggio);
}

::selection { background: var(--cipria); color: var(--inchiostro); }

/* -----------------------------------------------------------------------------
   3. Utilita' di impaginazione
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--larghezza));
  margin-inline: auto;
}
@media (min-width: 768px) {
  .wrap { width: min(100% - 5rem, var(--larghezza)); }
}

.wrap--stretto { width: min(100% - 2.5rem, var(--larghezza-stretta)); margin-inline: auto; }

.sez { padding-block: var(--s-7); }
.sez--greige { background: var(--avorio-2); }
.sez--scura  { background: var(--inchiostro); color: var(--avorio); }
.sez--scura h2, .sez--scura h3 { color: var(--avorio); }

/* Solo per chi legge con uno screen reader */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salta al contenuto: primo elemento focalizzabile della pagina */
.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
  background: var(--inchiostro); color: var(--avorio);
  padding: .75rem 1.5rem; z-index: 200;
  font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase;
  transition: transform var(--breve);
}
.skip:focus { transform: translate(-50%, 0); }

/* -----------------------------------------------------------------------------
   4. Occhielli, filetti, titoli di sezione
   -------------------------------------------------------------------------- */

/* L'occhiello riprende il lettering del logo: maiuscolo, molto spaziato,
   piccolo. Il filetto oro che lo precede e' il richiamo del cerchio. */
.occhiello {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--inchiostro-60);
  margin-bottom: var(--s-2);
}
.occhiello::before {
  content: ''; width: 34px; height: 1px; background: var(--oro); flex: none;
}
.occhiello--centro { justify-content: center; }
.occhiello--centro::after {
  content: ''; width: 34px; height: 1px; background: var(--oro); flex: none;
}
.sez--scura .occhiello { color: var(--oro-chiaro); }

.testata { margin-bottom: var(--s-5); }
.testata--centro { text-align: center; max-width: 720px; margin-inline: auto; }
.testata p {
  color: var(--inchiostro-60);
  max-width: 62ch;
  margin-top: var(--s-2);
}
.testata--centro p { margin-inline: auto; }
.sez--scura .testata p { color: var(--greige); }

/* La parola accentata dentro un titolo: oro scuro e un filo piu' pesante del
   resto della riga. Prima era in corsivo; con un carattere solo il corsivo
   non si usa piu' da nessuna parte, e la differenza la fanno colore e peso.
   Vale per una parola sola dentro un titolo, mai per un paragrafo. */
.acc { color: var(--oro-testo); font-weight: 700; }
.sez--scura .acc { color: var(--oro-chiaro); }

/* -----------------------------------------------------------------------------
   5. Pulsanti
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 1.05rem 2.3rem;
  border: 1px solid transparent; border-radius: var(--raggio);
  cursor: pointer;
  transition: background var(--breve), color var(--breve),
              border-color var(--breve), transform var(--breve);
  /* i tocchi sul telefono devono avere almeno 44px di bersaglio */
  min-height: 48px;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

/* Primario: ORO PIENO CON TESTO INCHIOSTRO.
   Non testo oro su bianco — quello non passa AA e sparisce sul fondo caldo. */
.btn--oro {
  background: var(--oro); color: var(--inchiostro);
  border-color: var(--oro);
  font-weight: 500;
}
.btn--oro:hover { background: var(--oro-scuro); border-color: var(--oro-scuro); color: var(--bianco); }

.btn--scuro { background: var(--inchiostro); color: var(--avorio); border-color: var(--inchiostro); }
.btn--scuro:hover { background: transparent; color: var(--inchiostro); }

.btn--linea { background: transparent; color: var(--inchiostro); border-color: var(--inchiostro); }
.btn--linea:hover { background: var(--inchiostro); color: var(--avorio); }

.sez--scura .btn--linea { color: var(--avorio); border-color: rgba(250,247,242,.45); }
.sez--scura .btn--linea:hover { background: var(--avorio); color: var(--inchiostro); border-color: var(--avorio); }

.btn--chiaro { background: var(--avorio); color: var(--inchiostro); border-color: var(--avorio); }
.btn--chiaro:hover { background: var(--oro); border-color: var(--oro); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}

.btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btns--centro { justify-content: center; }

/* Link con freccia: l'invito discreto dentro le schede */
.freccia {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-small); letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--oro);
  transition: gap var(--breve), border-color var(--breve);
}
.freccia::after { content: '→'; transition: transform var(--breve); }
.freccia:hover { gap: .9rem; border-color: var(--inchiostro); }
.freccia:hover::after { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
   6. Barra di navigazione
   -------------------------------------------------------------------------- */
/* LA BARRA E' SEMPRE PIENA, SU TUTTE LE PAGINE, FIN DAL PRIMO PIXEL.

   Prima nasceva trasparente sopra alla fotografia (l'hero in home, la
   testata sulle altre pagine) e diventava avorio solo dopo 30px di scroll.
   Per farla leggere in quello stato serviva un velo scuro dietro al menu, e
   sul marchio un contorno o un'ombra — tre marchingegni per un effetto che,
   sulle foto piu' chiare del carosello della home, restava comunque debole
   e veniva segnalato come sporco.

   Adesso non c'e' nessuno stato trasparente: la barra e' avorio piena da
   subito, identica sulle sette pagine — stesso fondo, stesso marchio
   (logo1-nav.png, il file originale, senza contorni ne' ombre aggiunte),
   stesse voci color inchiostro. Non serve piu' il velo dietro al menu, non
   serve piu' la coppia di marchi che si scambiava in dissolvenza, non serve
   piu' nessun filtro sul lettering: il colore di sfondo che c'era gia' dopo
   lo scroll (qui sotto) è ora anche quello di partenza. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(250,247,242,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ombra-1);
  border-bottom: var(--bordo);
  transition: box-shadow var(--medio), height var(--medio);
}
.nav__in {
  width: min(100% - 2.5rem, var(--larghezza));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
@media (min-width: 768px) { .nav__in { width: min(100% - 5rem, var(--larghezza)); } }

/* UN SOLO MARCHIO, NON PIU' DUE IMPILATI.

   Con la barra sempre piena serve un solo file, logo1-nav.png (lettering
   inchiostro), sempre alla stessa opacita': niente da scambiare in
   dissolvenza, niente coppia di immagini nella stessa cella di griglia.

   PERCHE' logo1-nav.png E NON logo1.png RIDIMENSIONATO
   logo1.png ha un margine trasparente largo: su 724 pixel di altezza il
   disegno ne occupa 580. Ridimensionandolo si paga quel vuoto, e il lettering
   arriva piccolo. logo1-nav.png e' lo stesso file ritagliato sul disegno
   (2013x580, circa 3,5:1): a parita' di altezza CSS il marchio e' un quarto
   piu' grande, e "ESTETICA LUCE" si legge. */
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 56px; width: auto; transition: height var(--medio); }
.nav.stuck .nav__logo img { height: 46px; }
@media (max-width: 1000px) {
  .nav__logo img { height: 50px; }
  .nav.stuck .nav__logo img { height: 42px; }
}
@media (max-width: 420px) {
  .nav__logo img { height: 40px; }
  .nav.stuck .nav__logo img { height: 36px; }
}

.nav__menu { display: none; }
@media (min-width: 1000px) {
  .nav__menu { display: flex; align-items: center; gap: var(--s-4); }
}
.nav__link {
  position: relative;
  font-size: var(--t-small); font-weight: 300;
  letter-spacing: .17em; text-transform: uppercase;
  padding-block: .4rem;
  transition: color var(--breve);
}
/* Il filetto oro sotto la voce: cresce da sinistra, non compare di colpo */
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--oro);
  transition: width var(--medio);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { font-weight: 400; }

.nav__cta { display: none; }
@media (min-width: 1000px) { .nav__cta { display: inline-flex; padding: .8rem 1.7rem; } }

/* Hamburger: tre linee che diventano una croce */
.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 12px;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span {
  display: block; height: 1px; width: 100%; background: var(--inchiostro);
  transition: transform var(--medio), opacity var(--breve);
}
.burger.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menu a schermo intero (telefono e tablet: si vede sotto i 1000px)

   PERCHE' "HOME" VENIVA TAGLIATA, E COM'E' RISOLTA.

   Il menu era una colonna con justify-content: center dentro un riquadro
   fisso alto quanto la finestra, senza padding e senza scorrimento. Due
   conseguenze, entrambe sulla PRIMA voce:

     1. la barra di navigazione e' fissa, alta 76px, e sta SOPRA al menu
        (z-index 100 contro 99). Centrando cinque elementi in tutta l'altezza
        della finestra, su schermi bassi la prima voce finiva dentro quei
        76px: "Home" spariva sotto il marchio e sotto l'hamburger.
     2. quando il contenuto e' piu' alto della finestra — tablet in verticale
        con il testo di sistema ingrandito, telefono girato di lato — un
        contenitore centrato e senza overflow taglia in ALTO e in BASSO, e la
        parte tagliata in alto non si raggiunge nemmeno scorrendo.

   Adesso: padding-top che tiene conto della barra, scorrimento quando serve,
   e le due auto qui sotto. Le auto fanno il lavoro che faceva
   justify-content: center — quando c'e' spazio in avanzo il blocco resta
   centrato — ma se lo spazio non c'e' non spingono niente fuori dal
   riquadro, che e' esattamente cio' che center non sa fare.

   Il fondo tiene conto della barra di sistema di iOS (env safe-area). */
.mnav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--avorio);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
  padding: calc(var(--nav-h) + var(--s-3)) 1.25rem
           max(var(--s-4), env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden;
  transition: opacity var(--medio), visibility var(--medio);
}
.mnav > :first-child { margin-top: auto; }
.mnav > :last-child  { margin-bottom: auto; }
.mnav.on { opacity: 1; visibility: visible; }
.mnav a {
  font-family: var(--serif); font-size: clamp(1.9rem, 7vw, 2.9rem); font-weight: 300;
  /* "Chi siamo" a 2,9rem su uno schermo da 320px sforerebbe: qui il testo
     resta su una riga e centrato, e la voce non spinge il menu di lato. */
  max-width: 100%; text-align: center; line-height: 1.15;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--medio), transform var(--medio), color var(--breve);
}
/* Telefono girato di lato: sette voci a 2,9rem non ci stanno in 390px di
   altezza. Si stringe la scala e il passo, e il menu resta in una schermata
   invece di dover scorrere. */
@media (max-height: 560px) {
  .mnav { gap: var(--s-2); padding-top: calc(var(--nav-h) + var(--s-2)); }
  .mnav a { font-size: clamp(1.4rem, 4.2vh, 1.9rem); }
  .mnav .btn { margin-top: var(--s-1); }
  .mnav__contatti { margin-top: var(--s-2); }
}

/* SOTTO I 440px DI ALTEZZA IL NUMERO DI TELEFONO RESTAVA SOTTO IL BORDO.
   Non era irraggiungibile — il menu scorre — ma un menu di sette righe che
   ne mostra sei e chiede di scorrere per la settima e' un menu che non si
   e' capito quanto e' lungo. Misurato a 844x390: 444px di contenuto in 390
   di finestra, cioe' 54 di troppo.

   SI STRINGONO I VUOTI, NON LE RIGHE. Fra le sette righe ci sono sei
   intervalli: portarli da 16 a 8 pixel recupera 48, e togliere altri 24 dal
   respiro in fondo basta e avanza. Il testo scende appena, quanto serve a
   non far sembrare le voci incollate. E' l'ordine giusto: prima si toglie il
   vuoto, poi — e solo se non basta — si tocca cio' che si legge. */
@media (max-height: 440px) {
  .mnav {
    gap: var(--s-1);
    padding-top: calc(var(--nav-h) + var(--s-1));
    padding-bottom: max(var(--s-2), env(safe-area-inset-bottom, 0px));
  }
  .mnav a { font-size: clamp(1.25rem, 4vh, 1.6rem); }
  .mnav .btn { margin-top: var(--s-1); min-height: 42px; padding-block: .6rem; }
  .mnav__contatti { margin-top: var(--s-1); }
  .mnav__contatti a { font-size: 1.05rem; }
}
.mnav.on a { opacity: 1; transform: none; }
/* le voci entrano una dopo l'altra */
.mnav.on a:nth-child(1) { transition-delay: .05s; }
.mnav.on a:nth-child(2) { transition-delay: .10s; }
.mnav.on a:nth-child(3) { transition-delay: .15s; }
.mnav.on a:nth-child(4) { transition-delay: .20s; }
.mnav.on a:nth-child(5) { transition-delay: .25s; }
.mnav a:hover { color: var(--oro-scuro); }
/* IL PULSANTE NON E' UNA VOCE DI MENU, E NON DEVE AVERNE LA MISURA.

   ".mnav a" e ".btn" hanno la stessa specificita' e vince la prima, che sta
   scritta prima: il pulsante prendeva quindi clamp(1.9rem, 7vw, 2.9rem) come
   i link. Su uno schermo da 320px "Prenota il tuo appuntamento" a quella
   misura, con la spaziatura fra le lettere di un pulsante, usciva dal fondo
   oro da tutte e due le parti. Qui torna alla misura dei pulsanti del sito e
   prende una larghezza sua, cosi' il testo va a capo dentro il pulsante e
   non attraverso. */
.mnav .btn { margin-top: var(--s-2); opacity: 0; transform: translateY(14px);
             font-size: var(--t-small); letter-spacing: .16em;
             width: min(100%, 320px);
             transition: opacity var(--medio) .3s, transform var(--medio) .3s; }
.mnav.on .btn { opacity: 1; transform: none; }

.mnav__contatti {
  margin-top: var(--s-4); text-align: center;
  font-size: var(--t-small); color: var(--inchiostro-60);
  opacity: 0; transition: opacity var(--medio) .35s;
}
/* Stessa storia del pulsante: il numero di telefono e' un recapito in fondo
   al menu, non la sesta voce, e a 2,9rem sembrava la piu' importante di
   tutte. Deve stare DOPO .mnav a — a pari specificita' vince l'ultima. */
.mnav__contatti a { font-size: 1.15rem; letter-spacing: .06em; }
.mnav.on .mnav__contatti { opacity: 1; }

/* -----------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* UNA FOTOGRAFIA A TUTTA PAGINA, IL TESTO SOPRA, E SULLA FOTOGRAFIA NIENTE.

   Sono due richieste diverse e vanno tenute insieme, perche' la versione
   precedente ne aveva rispettata una sola:
     - la home e' UNA fotografia a tutta pagina con titolo e didascalia in
       sovraimpressione. Non due riquadri affiancati, non una fascia di
       fotografia con il testo sotto: quella era una home diversa, e non era
       quello che era stato chiesto.
     - la fotografia si vede come e' stata scattata: nessun velo scuro,
       nessuna macchia sfumata dietro al testo, nessun filtro.

   IL CONTRASTO STA DENTRO LE LETTERE, NON SOPRA ALLA FOTOGRAFIA.
   E' l'unico posto in cui puo' stare, date le due righe qui sopra. Un velo
   modifica l'immagine: dopo un velo la fotografia non e' piu' quella dello
   scatto, ed e' esattamente cio' che era stato chiesto di togliere. Un'ombra
   sul testo no — vive dentro il glifo e muore due pixel fuori, e i pixel
   della fotografia restano tutti quelli dello scatto.

   Ogni riga porta quindi la propria ombra, e sono ombre a due mestieri
   sovrapposti: un nucleo stretto e quasi opaco che stacca il bordo della
   lettera anche su un pixel bianco, piu' due aloni larghi e morbidi che
   abbassano i punti bruciati sotto la riga — la vetrina controluce di
   studio6 e i riflessi sul lettino di studio4, che sono i punti peggiori
   delle quattro diapositive. L'alone e' largo e tenue di proposito: stretto
   e forte diventa un contorno nero disegnato intorno alle parole, e si vede.

   VA DETTO CHIARO, PERCHE' E' UN COMPROMESSO E NON UNA PARITA'.
   Con il velo il testo stava sopra 4,9:1 su ogni pixel di ogni diapositiva,
   misurato. Senza velo il numero non dipende piu' dal velo ma da cosa passa
   sotto la singola lettera: l'ombra lo alza molto, e sui punti piu' chiari
   di studio6 resta comunque piu' basso di quel 4,9. E' la conseguenza voluta
   della richiesta — la fotografia originale viene prima — ed e' il motivo
   per cui le ombre qui sotto sono cosi' insistite invece che discrete.

   SE UN GIORNO SERVISSE LA GARANZIA, il velo era questo, e si rimette
   aggiungendo una regola sola senza toccare nient'altro:
     .hero__sfondo::after {
       content: ''; position: absolute; inset: 0;
       background:
         linear-gradient(180deg, rgba(18,16,14,.22) 0, rgba(18,16,14,0) 20%,
                                 rgba(18,16,14,0) 76%, rgba(18,16,14,.26) 100%),
         rgba(18,16,14,.44);
     }                                                                        */
.hero {
  position: relative;
  min-height: 100svh;             /* svh: su iOS la barra del browser non taglia */
  display: flex; align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;

  /* Le due ombre, scritte una volta sola qui e usate da tutte le regole di
     questa sezione. Cambiare la leggibilita' dell'hero e' cambiare questi
     due valori, non otto regole sparse.

     Il colore non e' nero pieno ma #0A0806, cioe' il nero caldo dei toni
     bassi delle fotografie: un'ombra grigio-neutra sopra a una stanza con
     luce calda si legge come sporco, questa no.

     FORTE, per titoli e occhiello: il nucleo a 1px regge il bordo della
     lettera, i tre aloni (6, 22, 48px) scendono di forza man mano che si
     allargano, cosi' non si vede dove finiscono.
     PIENA, per la didascalia: stesso disegno ma piu' carica in ogni strato.
     Il testo piccolo ha aste sottili e ne ha bisogno di piu', non di meno —
     e' il contrario di quello che verrebbe da fare. */
  --ombra-testo-forte:
      0 0 2px    rgba(10,8,6,.98),
      0 1px 2px  rgba(10,8,6,.95),
      0 2px 9px  rgba(10,8,6,.88),
      0 6px 24px rgba(10,8,6,.72),
      0 16px 52px rgba(10,8,6,.50);
  --ombra-testo-piena:
      0 0 2px    rgba(10,8,6,1),
      0 0 4px    rgba(10,8,6,.95),
      0 1px 3px  rgba(10,8,6,.98),
      0 2px 8px  rgba(10,8,6,.92),
      0 5px 18px rgba(10,8,6,.80),
      0 12px 40px rgba(10,8,6,.58);
}

/* La fotografia riempie tutto l'hero e sta sotto al testo: e' il fondo, non
   una colonna. z-index 0 contro l'1 di .hero__in. */
.hero__sfondo { position: absolute; inset: 0; z-index: 0; }

/* Le quattro diapositive stanno una sopra l'altra e si scambiano in dissolvenza.
   Nessuno scorrimento orizzontale: con fotografie di formato diverso (una e'
   16:9, le altre 3:2) una pellicola che scorre mostrerebbe bordi vuoti. */
.hero__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s var(--molla), visibility 1.1s;
}
.hero__slide.is-on { opacity: 1; visibility: visible; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* NIENTE FRA LA FOTOGRAFIA E IL TESTO.
   Qui stava .hero__sfondo::after, il velo scuro uniforme piu' due fasce agli
   estremi. Non c'e' una regola che lo sostituisce: e' proprio l'assenza il
   punto. Chi cerca "perche' l'hero non ha un velo" trova la spiegazione in
   testa alla sezione. */

.hero__in {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* IL PANNELLO NON E' UN PANNELLO: E' LA COLONNA CHE INCOLONNA.

   Fondo avorio, sfocatura, bordo oro e ombra non ci sono, e non c'e' nemmeno
   la macchia sfumata (.hero__pannello::before) che nella versione con il velo
   faceva il contrasto dietro al blocco di testo: era il secondo dei due
   strati sopra alla fotografia, e se ne va con il primo.

   L'ELEMENTO PERO' RESTA, E NON E' UN RESIDUO. E' la colonna flex che tiene
   incolonnati e centrati .hero__testi, .hero__btns e .hero__punti: togliendo
   il div si perde l'impaginazione, non un riquadro. E la larghezza massima
   e' quella che tiene le righe sotto le 52 battute: una didascalia larga
   quanto uno schermo da 27 pollici non si legge, con o senza fondo. */
.hero__pannello {
  position: relative;
  width: min(100%, 760px);
  margin-inline: auto;
  padding-inline: clamp(0rem, 2vw, 1rem);
  display: flex; flex-direction: column; align-items: center;
}

/* Le quattro didascalie occupano la STESSA cella di griglia: l'altezza e'
   quella della piu' alta e non cambia da una diapositiva all'altra, cosi'
   i pulsanti sotto non ballano su e giu' a ogni scambio. */
.hero__testi { display: grid; width: 100%; }
/* Dissolvenza corta e sfalsata: la nuova didascalia entra in .4s mentre la
   vecchia esce in .25s, cosi' il blocco non resta mai visibilmente vuoto.
   Con una transizione lunga, a meta' scambio non si leggeva niente. */
.hero__testo {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.hero__testo.is-on {
  transition: opacity .4s var(--molla), transform .4s var(--molla), visibility .4s;
}
.hero__testo.is-on { opacity: 1; visibility: visible; transform: none; }

/* L'OCCHIELLO E' AVORIO, I SUOI DUE FILETTI RESTANO ORO.

   Inchiostro-60, che e' il colore che ha in tutto il resto del sito, sopra a
   una fotografia non si vede. L'oro chiaro sarebbe la scelta ovvia ma e'
   testo piccolo, che chiede piu' contrasto di un titolo: l'avorio con l'ombra
   piena e' la combinazione che regge anche sulla vetrina di studio6.

   I due filetti ai lati restano oro perche' sono decorazione e non devono
   leggersi: l'accento del marchio non si perde, sta dove non fa danno. */
.hero__testo .occhiello {
  color: var(--avorio);
  text-shadow: var(--ombra-testo-piena);
  margin-bottom: var(--s-2);
}
.hero__testo .occhiello::before,
.hero__testo .occhiello::after { background: var(--oro-chiaro); }

/* Su schermo stretto "CENTRO ESTETICO · DI ALESSIA CORSI" non sta su una riga
   nemmeno stringendo la spaziatura, e va a capo: i due filetti oro restano
   pero' appesi ai bordi dello schermo, uno per lato, lontani dalle parole che
   dovrebbero accompagnare. In quel caso spariscono. Il filetto e' l'accento
   del marchio, non un'informazione: se non puo' stare vicino al testo, e'
   meglio senza. Il testo resta centrato e leggibile su due righe. */
@media (max-width: 620px) {
  .hero__testo .occhiello::before,
  .hero__testo .occhiello::after { display: none; }
  .hero__testo .occhiello { letter-spacing: .28em; }
}

/* IL TITOLO E' GRANDE PERCHE' DEVE REGGERE DA SOLO CONTRO LA FOTOGRAFIA.
   Senza pannello e senza velo, la massa del carattere e' meta' del lavoro:
   un'asta spessa copre il pixel bruciato sotto, una sottile lo lascia
   passare. Per questo la scala qui e' quella piena a tutta pagina e non
   quella stretta tarata su una colonna. */
.hero h1, .hero__testo h2 {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--avorio);
  text-shadow: var(--ombra-testo-forte);
  margin-bottom: var(--s-2);
}

/* La parola accentata: oro CHIARO, non l'oro scuro dei fondi chiari.
   --oro-testo (#7A6020) e' nato per l'avorio e sopra a una fotografia in cui
   passa una parete beige diventa oro su oro. --oro-chiaro e' la variante che
   il sito usa gia' in tutte le sezioni scure, ed e' quella giusta qui. */
.hero .acc { color: var(--oro-chiaro); }

.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  /* 500 e non 400: sopra a una parete bianca meta' del lavoro lo fa la massa
     del carattere, non l'ombra. Un'asta sottile lascia passare il pixel
     chiaro che ha sotto, una piu' piena lo copre. E' l'unica leva rimasta
     dopo che il velo se n'e' andato. */
  font-weight: 500;
  color: var(--avorio);
  text-shadow: var(--ombra-testo-piena);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 0;
}

/* Il pulsante secondario e' inchiostro su bordo inchiostro: sopra a una
   fotografia scompare in tutti i punti scuri. Si usa la variante chiara che
   il sito ha gia' per le sezioni scure, scritta qui perche' l'hero non e'
   una .sez--scura. L'ombra sotto al bordo serve al bordo, non al testo: un
   filo avorio al 45% sopra a una parete chiara sparisce, e senza bordo il
   pulsante smette di sembrare un pulsante. */
.hero .btn--linea {
  color: var(--avorio);
  border-color: rgba(250,247,242,.85);
  /* IL FONDO DEL PULSANTE NON E' UN VELO SULLA FOTOGRAFIA.
     E' grande quanto il pulsante e finisce dove finisce il pulsante: e' il
     corpo di un oggetto dell'interfaccia, come il fondo oro del primario
     qui accanto. Il velo tolto era un altro mestiere — uno strato steso su
     tutta l'immagine per far leggere del testo che le stava sopra.
     Senza un corpo, "Scopri i trattamenti" sopra alla parete bianca di
     studio6 e' un rettangolo di contorno chiaro su chiaro: si legge male e,
     peggio, non si riconosce come un pulsante da premere. */
  background: rgba(14,12,10,.34);
  text-shadow: var(--ombra-testo-piena);
  box-shadow: 0 2px 18px rgba(10,8,6,.35);
}
.hero .btn--linea:hover {
  background: var(--avorio); color: var(--inchiostro);
  border-color: var(--avorio); text-shadow: none;
}
/* Il primario e' oro pieno con testo inchiostro: si regge da solo su
   qualunque fotografia, gli serve solo di non stare appiattito sul fondo. */
.hero .btn--oro { box-shadow: 0 2px 18px rgba(10,8,6,.35); }

/* AFFIANCATI FINCHE' CI STANNO, INCOLONNATI QUANDO NON CI STANNO.
   La colonna e' larga 760px e i due pulsanti affiancati ne chiedono 665:
   ci stanno, ed e' la forma giusta per due comandi pari. Sotto quella
   misura .btns va a capo da solo, ed e' allora che serve la larghezza
   piena, altrimenti restano due scalini di larghezza diversa appoggiati
   al centro. */
.hero__btns { margin-top: var(--s-3); }
@media (max-width: 720px) {
  .hero__btns {
    flex-direction: column; align-items: stretch;
    width: min(100%, 340px); margin-inline: auto;
  }
}

/* I pallini stanno sotto ai pulsanti: sono un comando, e un comando va dove
   sta il resto dei comandi. Sono chiari perche' stanno sopra a una
   fotografia, con un'ombra che li stacca dai punti chiari. */
.hero__punti { display: flex; gap: .55rem; margin-top: var(--s-3); }
.hero__punti button {
  width: 30px; height: 3px; padding: 0;
  border: 0; border-radius: 100px;
  background: rgba(250,247,242,.45);
  box-shadow: 0 1px 3px rgba(10,8,6,.55);
  cursor: pointer;
  transition: background var(--breve), transform var(--medio);
}
.hero__punti button:hover { background: rgba(250,247,242,.75); }
.hero__punti button[aria-selected="true"] { background: var(--oro-chiaro); transform: scaleY(1.7); }

@media (max-width: 640px) {
  .hero__punti button { width: 24px; }
}

/* Schermi bassi (portatili da 13 pollici, finestre non a tutto schermo).
   L'hero e' alto quanto la finestra: se il testo non ci sta, i pulsanti e i
   pallini finiscono sotto la piega e nessuno li vede. Qui si stringe la
   scala, non si taglia il contenuto. */
@media (max-height: 760px) {
  .hero h1, .hero__testo h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
  .hero__sub { font-size: 1.02rem; }
  .hero__testo .occhiello { margin-bottom: .5rem; }
  .hero__btns  { margin-top: var(--s-2); }
  .hero__punti { margin-top: var(--s-2); }
}

/* Telefono girato di lato: 390px di altezza, meno la barra fanno 314px per
   occhiello, titolo su due righe, didascalia su tre, due pulsanti e i
   pallini. Con la sola scala di sopra ci sta per pochi pixel, che non e'
   stare: basta un carattere reso un filo piu' largo e i pallini finiscono
   sotto il bordo. Qui si stringe ancora, e il margine diventa una trentina
   di pixel. Sotto i 700px di altezza la scritta "Scorri" e' gia' via. */
@media (max-height: 520px) {
  .hero h1, .hero__testo h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
  .hero__sub { font-size: .94rem; line-height: 1.55; }
  .hero__testo .occhiello { margin-bottom: .35rem; letter-spacing: .24em; }
  .hero__btns  { margin-top: var(--s-1); gap: var(--s-1); }
  .hero__punti { margin-top: var(--s-1); }
  .hero .btn { min-height: 42px; padding-block: .7rem; }
}

/* Il cerchio oro aperto del logo, ingrandito come filigrana.
   Decorativo puro: nascosto agli screen reader e sotto i 900px.
   Sta a destra, sporgendo dal bordo dello schermo, dove stava prima che
   l'hero venisse diviso in due. Il filo e' tenue: sopra a una fotografia
   una filigrana marcata diventa un graffio. */
.hero__cerchio {
  position: absolute; z-index: 0;
  right: -12vw; top: 50%; transform: translateY(-50%);
  width: 78vh; height: 78vh; max-width: 760px; max-height: 760px;
  border: 1px solid var(--oro);
  border-radius: 50%;
  /* aperto in alto a destra, come nel marchio */
  border-top-color: transparent;
  border-right-color: rgba(198,162,74,.25);
  opacity: .3;
  pointer-events: none;
}
@media (max-width: 900px) { .hero__cerchio { display: none; } }

.hero__giu {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: var(--t-micro); letter-spacing: .26em; text-transform: uppercase;
  color: var(--avorio);
  text-shadow: var(--ombra-testo-piena);
}
.hero__giu::after {
  content: ''; width: 1px; height: 46px;
  background: linear-gradient(var(--oro-chiaro), transparent);
  animation: scendi 2.4s ease-in-out infinite;
}
@keyframes scendi {
  0%, 100% { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  50%      { transform: scaleY(.45); transform-origin: top; opacity: .5; }
}
/* Su schermi bassi la scritta cade sopra ai pulsanti: l'hero e' alto quanto
   la finestra e sotto i pallini non resta fondo libero. */
@media (max-height: 700px) { .hero__giu { display: none; } }

/* Testata delle pagine interne: piu' bassa dell'hero della home */
.testata-pagina {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--s-6));
  padding-bottom: var(--s-6);
  background: var(--avorio-2);
  border-bottom: var(--bordo);
  overflow: hidden;
}
.testata-pagina__sfondo { position: absolute; inset: 0; z-index: 0; }
/* SI ABBASSA LA LUCE ALLA FOTOGRAFIA, POI SI METTE IL VELO. IN QUEST'ORDINE.

   grafica.jpg e' molto piu' chiara delle fotografie dello studio: luminanza
   media 0,644 contro 0,34-0,44, e ampie zone di foglia quasi bianca. Con il
   solo velo scuro servivano 0,85 per far passare il paragrafo in avorio, e a
   quel punto della fotografia non restava niente.

   brightness() lavora in modo diverso da un velo, ed e' per questo che serve.
   Un velo scuro SOMMA nero sopra a tutto e schiaccia insieme chiari e scuri,
   cioe' toglie contrasto all'immagine; brightness() MOLTIPLICA, quindi porta
   giu' i bianchi molto piu' dei mezzitoni e lascia il rapporto fra le parti.
   Il risultato non e' una fotografia annebbiata ma una fotografia in penombra:
   le venature delle foglie si vedono ancora.

   A parita' di scurimento totale, misurato: con brightness(.60) piu' un velo
   di 0,38 il paragrafo sta a 4,7:1 e nessun pixel scende sotto soglia; con il
   solo velo, per arrivare allo stesso numero, la fotografia era persa.
   saturate() rimette il caldo che il buio porta via. */
.testata-pagina__sfondo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.60) saturate(1.12);
}
.testata-pagina .wrap { position: relative; z-index: 1; }

/* Il velo, che qui viene dopo la penombra e non al posto suo.

   Il taglio obliquo carica il lato sinistro perche' il testo e' allineato a
   sinistra: e' li' che serve il fondo piu' fermo, e a destra la fotografia
   resta piu' aperta. Su telefono il testo occupa tutta la larghezza, e il
   fondo pieno da solo basta anche senza la parte obliqua.

   Il fondo pieno e' tarato sul telefono e non sul monitor. A 1440px il testo
   sta a sinistra, dentro la parte forte dell'obliquo, e passerebbe anche con
   meno; a 375px occupa tutta la larghezza e arriva fin dove l'obliquo e'
   finito, quindi il numero buono e' quello del fondo pieno da solo.

   ED E' TARATO SU TUTTE E SEI LE PAGINE, NON SU UNA.
   Il CSS e' lo stesso, ma il testo no: "Dietro Estetica Luce" e "Scegli il
   tuo momento" vanno a capo su due righe a 375px e spingono il paragrafo
   quaranta pixel piu' in basso, sopra a un pezzo diverso della fotografia.
   grafica.jpg e' 1600x600 in un riquadro alto e stretto: il ritaglio taglia
   ai lati, quindi in verticale si vede tutta, foglie chiare comprese. Con il
   velo tarato sulla sola pagina Servizi la parola in oro di Contatti restava
   a 3,07:1 contro una soglia di 3: passava, ma per niente.

   Misurato su tutte e sei, punto peggiore di ogni riga, a 375px:
     titolo 4,72:1 · parola oro 3,25:1 (soglia 3)
     paragrafo 4,95:1 · occhiello 4,81:1 (soglia 4,5)
   A 1440px tutti i valori salgono. Zero pixel sotto soglia ovunque. */
.testata-pagina__sfondo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
        rgba(18,16,14,.26) 0,
        rgba(18,16,14,.08) 58%,
        rgba(18,16,14,0)   100%),
    rgba(18,16,14,.49);
}

/* Resta la misura della riga, se ne vanno fondo, bordo, ombra e sfocatura.
   display:block e non inline-block: senza fondo non c'e' piu' una scatola da
   far aderire al testo, e su telefono l'inline-block lasciava la larghezza
   in mano all'ultima riga. */
.testata-pagina__testo {
  display: block;
  max-width: min(100%, 660px);
}
.testata-pagina__testo > :last-child { margin-bottom: 0; }
/* Avorio e non oro chiaro, per la stessa ragione misurata nell'hero: e' testo
   piccolo e vuole 4,5:1. Le lineette ai lati restano oro. */
.testata-pagina .occhiello { color: var(--avorio); }
.testata-pagina h1 { margin-bottom: var(--s-2); color: var(--avorio); }
.testata-pagina .acc { color: var(--oro-chiaro); }
.testata-pagina p { color: var(--avorio); max-width: 60ch; }
/* La stessa riserva dell'hero per i punti bruciati della fotografia. */
.testata-pagina h1, .testata-pagina p { text-shadow: 0 1px 14px rgba(12,10,8,.42); }

/* -----------------------------------------------------------------------------
   8. Griglie
   -------------------------------------------------------------------------- */
.griglia { display: grid; gap: var(--s-3); }
.griglia--2 { grid-template-columns: 1fr; }
.griglia--3 { grid-template-columns: 1fr; }
.griglia--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .griglia--2 { grid-template-columns: repeat(2, 1fr); }
  .griglia--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .griglia { gap: var(--s-4); }
  .griglia--3 { grid-template-columns: repeat(3, 1fr); }
  .griglia--4 { grid-template-columns: repeat(4, 1fr); }
}

/* -----------------------------------------------------------------------------
   Griglia con l'ultima riga centrata

   Sette schede su quattro colonne fanno 4 + 3: con una griglia CSS le tre
   della seconda riga si incolonnano a sinistra e resta un buco a destra
   grande quanto una scheda. Un contenitore flex le centra, e il buco si
   divide in due margini uguali.

   Le larghezze ripetono a mano quelle che darebbe la griglia (quattro
   colonne meno tre spazi, tre colonne meno due, due colonne meno uno):
   e' il prezzo da pagare per avere l'ultima riga centrata, e vale la pena.
   -------------------------------------------------------------------------- */
.griglia--centrata {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-3);
}
.griglia--centrata > * { flex: 0 1 calc((100% - var(--s-3)) / 2); }
@media (min-width: 640px) {
  .griglia--centrata > * { flex: 0 1 calc((100% - var(--s-3) * 2) / 3); }
}
@media (min-width: 1000px) {
  .griglia--centrata { gap: var(--s-4); }
  .griglia--centrata > * { flex: 0 1 calc((100% - var(--s-4) * 3) / 4); }
}

/* Due colonne testo/immagine, alternabili */
.duo {
  display: grid; gap: var(--s-4); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .duo--largo-dx { grid-template-columns: 1fr 1.2fr; }
  .duo--largo-sx { grid-template-columns: 1.2fr 1fr; }
  /* inverte l'ordine visivo senza toccare l'ordine del sorgente,
     che resta quello giusto per chi legge in sequenza */
  .duo--invertito .duo__media { order: -1; }
}

.duo__media { position: relative; }
.duo__media img { width: 100%; border-radius: var(--raggio-img); }

/* RITRATTO CON DIDASCALIA (chi-siamo.html, "La titolare").

   PERCHE' LA CORNICE ORA STA SU UN DIV INTERNO E NON SULLA FIGURE.
   La cornice di .cornice e' un rettangolo sfalsato: sporge di 14px in alto e
   a destra e RIENTRA di 14px in basso e a sinistra. Finche' l'elemento e'
   una fotografia sola il rientro cade dentro la fotografia e si vede come un
   angolo aperto. Con la classe sulla <figure>, pero', l'elemento non era piu'
   solo la fotografia: conteneva anche la didascalia. Il bordo basso finiva
   quindi 14px sopra il fondo della figure, cioe' in mezzo alla riga
   "Alessia Corsi · Titolare di Estetica Luce", e la tagliava a meta'.
   Misurato prima della correzione, a 1440px: bordo a y=1059,8 e didascalia
   da y=1052,8 a y=1073,8.

   La correzione non tocca .cornice, che altrove funziona: mette la classe su
   un contenitore che avvolge SOLO l'immagine, come gia' fanno i riquadri
   .scorri della home e di Servizi. La didascalia resta fuori.

   La figure azzera il margine che il browser mette da solo, altrimenti la
   cornice si stacca dalla fotografia. */
.duo__media--ritratto { margin: 0; }
.duo__media--ritratto .ritratto__foto { display: block; }
.duo__media--ritratto figcaption {
  margin-top: 1.5rem;
  font-size: var(--t-micro); text-transform: uppercase;
  color: var(--inchiostro-60); text-align: center;
  /* Nome e ruolo su due righe volute, non su due righe per caso. Su schermo
     stretto la riga unica sforava e mandava a capo la sola parola "LUCE":
     il nome della titolare finiva spezzato in fondo al riquadro. Su due
     righe decise il nome sta sempre intero sulla sua. */
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.duo__media--ritratto figcaption b {
  font-weight: 400; font-size: var(--t-small);
  letter-spacing: .2em; color: var(--inchiostro);
}
.duo__media--ritratto figcaption span { letter-spacing: .16em; }
/* Sotto i 480px la spaziatura fra le lettere e' quello che fa sforare: su
   uno schermo da 320px "TITOLARE DI ESTETICA LUCE" a .16em non ci sta. */
@media (max-width: 480px) {
  .duo__media--ritratto figcaption b { letter-spacing: .12em; }
  .duo__media--ritratto figcaption span { letter-spacing: .08em; }
}

/* -----------------------------------------------------------------------------
   8bis. Riquadro a scorrimento

   Lo stesso riquadro che prima conteneva una fotografia sola, con dentro
   piu' fotografie che si alternano. Serve nel "Il centro" della home (sette
   scatti dello studio) e nei riquadri PNEI di Servizi e Chi siamo (quattro).

   L'ALTEZZA E' FISSATA DAL CONTENITORE, non dalla fotografia. Le immagini
   hanno formati diversi: se ognuna decidesse la propria altezza, il riquadro
   e la cornice oro si allungherebbero e si accorcerebbero a ogni scambio, e
   tutta la sezione sotto salterebbe. Con aspect-ratio sul contenitore e
   object-fit: cover sulle immagini, il riquadro sta fermo.
   -------------------------------------------------------------------------- */
.scorri {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--raggio-img);
  overflow: hidden;
  background: var(--greige);
}
.scorri--largo { aspect-ratio: 4 / 3; }

.scorri__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--molla), visibility 1s;
}
.scorri__slide.is-on { opacity: 1; visibility: visible; }
.scorri__slide img { width: 100%; height: 100%; object-fit: cover; }

/* I pallini stanno sopra alla fotografia, in basso. Sotto c'e' una sfumatura
   scura appena accennata: senza, su uno scatto chiaro sparirebbero. */
.scorri__punti {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: center; gap: .45rem;
  padding: 2.6rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(26,26,26,.34));
}
.scorri__punti button {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background var(--breve), transform var(--breve);
}
.scorri__punti button:hover { background: rgba(255,255,255,.85); }
.scorri__punti button[aria-selected="true"] { background: var(--oro); transform: scale(1.35); }

/* Il contatore in alto a destra: dice quante fotografie ci sono, cosi' chi
   guarda sa che il riquadro non e' fermo per un errore. */
.scorri__conta {
  position: absolute; top: .7rem; right: .8rem; z-index: 2;
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bianco);
  background: rgba(26,26,26,.42);
  border-radius: 100px; padding: .22rem .7rem;
  pointer-events: none;
}

/* Cornice oro sfalsata: il dettaglio che ricorre in tutto il sito */
.cornice { position: relative; }
.cornice::before {
  content: ''; position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1px solid var(--oro);
  border-radius: var(--raggio-img);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 640px) { .cornice::before { inset: -8px -8px 8px 8px; } }

/* -----------------------------------------------------------------------------
   9. Schede servizio
   -------------------------------------------------------------------------- */
.scheda {
  position: relative;
  background: var(--bianco);
  border: var(--bordo);
  border-radius: var(--raggio-img);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--medio), box-shadow var(--medio), border-color var(--medio);
}
.scheda:hover { transform: translateY(-5px); box-shadow: var(--ombra-2); border-color: var(--oro-chiaro); }

.scheda__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--greige); }
.scheda__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--molla); }
.scheda:hover .scheda__img img { transform: scale(1.055); }

.scheda__corpo { padding: var(--s-3); display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.scheda__corpo h3 { margin: 0; }
.scheda__corpo p { color: var(--inchiostro-60); font-size: var(--t-small); flex: 1; }

.scheda__piede {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap;
  margin-top: .35rem; padding-top: .9rem;
  border-top: var(--bordo);
}
.scheda__prezzo {
  font-family: var(--serif); font-size: 1.4rem;
  /* inchiostro, non oro: e' un'informazione, deve leggersi */
  color: var(--inchiostro);
}
.scheda__prezzo small {
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--inchiostro-60);
  margin-right: .3rem;
}
.scheda__durata {
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--inchiostro-60);
}

/* Numero d'ordine grande in filigrana */
.scheda__n {
  position: absolute; top: .6rem; right: 1rem; z-index: 1;
  font-family: var(--serif); font-size: 3.4rem; line-height: 1;
  color: var(--oro); opacity: .18;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   10. Listino a tendina (pagina Servizi)
   -------------------------------------------------------------------------- */
.listino { display: flex; flex-direction: column; gap: var(--s-2); }

.cat {
  background: var(--bianco);
  border: var(--bordo);
  border-radius: var(--raggio-img);
  overflow: hidden;
  transition: border-color var(--medio), box-shadow var(--medio);
}
.cat[open] { border-color: var(--oro-chiaro); box-shadow: var(--ombra-1); }

.cat__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  cursor: pointer;
  list-style: none;
  transition: background var(--breve);
}
.cat__head::-webkit-details-marker { display: none; }
.cat__head:hover { background: var(--avorio-2); }

.cat__nome { flex: 1; min-width: 0; }
.cat__nome h3 { margin: 0 0 .15rem; font-size: var(--t-h3); }
.cat__nome p { margin: 0; font-size: var(--t-small); color: var(--inchiostro-60); }

.cat__conta {
  flex: none;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--inchiostro-60);
  padding: .3rem .8rem; border: var(--bordo); border-radius: 100px;
}
@media (max-width: 560px) { .cat__conta { display: none; } }

.cat__chev {
  flex: none; width: 11px; height: 11px;
  border-right: 1px solid var(--inchiostro); border-bottom: 1px solid var(--inchiostro);
  transform: rotate(45deg); margin-top: -5px;
  transition: transform var(--medio);
}
.cat[open] .cat__chev { transform: rotate(-135deg); margin-top: 3px; }

.cat__corpo { padding: 0 var(--s-3) var(--s-3); }

.voce {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: .95rem 0;
  border-top: var(--bordo);
}
.voce__nome { flex: none; max-width: 62%; }
.voce__nome strong { font-weight: 400; }
.voce__nome span { display: block; font-size: var(--t-small); color: var(--inchiostro-60); }

/* I puntini di guida fra nome e prezzo, come su un menu stampato */
.voce__punti {
  flex: 1;
  border-bottom: 1px dotted var(--greige);
  transform: translateY(-4px);
  min-width: 18px;
}
.voce__prezzo {
  flex: none; text-align: right;
  font-family: var(--serif); font-size: 1.2rem;
}
.voce__durata {
  flex: none; width: 4.6rem; text-align: right;
  font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--inchiostro-60);
}
/* Voce senza prezzo: la riga finisce sulla durata, che va spinta a destra
   perche' non c'e' piu' la fila di puntini a occupare lo spazio in mezzo. */
.voce--senza-prezzo .voce__durata { margin-left: auto; }
@media (max-width: 560px) {
  .voce { flex-wrap: wrap; }
  .voce__nome { max-width: 100%; flex: 1 1 100%; }
  .voce__punti { display: none; }
  .voce__durata { width: auto; margin-left: auto; }
}

/* Segnaposto per prezzi/durate non ancora confermati.
   Deve VEDERSI che manca un dato, non sembrare un prezzo vero. */
.da-confermare {
  font-family: var(--sans); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--inchiostro-60);
  background: var(--cipria-tenue);
  border: 1px dashed var(--cipria);
  border-radius: 100px;
  padding: .2rem .7rem;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   11. Galleria
   -------------------------------------------------------------------------- */
.galleria { display: grid; gap: .65rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galleria { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); } }

.galleria figure { margin: 0; overflow: hidden; border-radius: var(--raggio-img); background: var(--greige); }
.galleria img {
  width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform 1.1s var(--molla), filter var(--medio);
}
.galleria figure:hover img { transform: scale(1.06); }

/* Una cella alta il doppio, per rompere la griglia */
@media (min-width: 900px) {
  .galleria .alta { grid-row: span 2; }
  .galleria .alta img { aspect-ratio: 1 / 2.06; }
}

/* -----------------------------------------------------------------------------
   12. Citazione — SEZIONE RIMOSSA

   La fascia scura con la frase della titolare ("La bellezza non e' un
   traguardo da raggiungere...") stava solo nella home ed e' stata tolta
   su richiesta. Le regole di .citazione se ne sono andate con lei: nessuna
   pagina le usa piu'. Se un giorno tornasse una citazione, il posto e'
   questo, e il markup era una <figure class="citazione"> con dentro un
   blockquote e un figcaption dentro una <section class="sez sez--scura">.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   13. Numeri / valori
   -------------------------------------------------------------------------- */
.valore { text-align: center; padding: var(--s-2); }
.valore__icona {
  width: 58px; height: 58px; margin: 0 auto var(--s-2);
  display: grid; place-items: center;
  border: 1px solid var(--oro); border-radius: 50%;
  font-family: var(--serif); font-size: 1.4rem;
  color: var(--inchiostro);
}
.valore h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.valore p { font-size: var(--t-small); color: var(--inchiostro-60); }
.sez--scura .valore p { color: var(--greige); }
.sez--scura .valore__icona { color: var(--avorio); border-color: var(--oro-chiaro); }

/* -----------------------------------------------------------------------------
   14. Partner PNEI
   -------------------------------------------------------------------------- */
.pnei { display: grid; gap: var(--s-4); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pnei { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

/* Era .pnei__foto, una griglia due per due con le quattro fotografie tutte
   insieme. Adesso e' un contenitore solo, con dentro il riquadro .scorri che
   le alterna: la classe serve a portare la cornice oro e a dare il contesto
   di posizionamento, il resto lo fanno .scorri e .cornice (§8bis). */
.pnei__media { position: relative; }
.pnei__marchio {
  display: inline-block; padding: .35rem .9rem;
  border: 1px solid var(--oro); border-radius: 100px;
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: var(--s-2);
}

/* -----------------------------------------------------------------------------
   15. Contatti e moduli
   -------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: .45rem; margin-bottom: var(--s-2); }
.campo > span {
  font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--inchiostro-60);
}
.campo > span .obb { color: var(--oro-scuro); }

.campo input, .campo textarea, .campo select {
  font-family: var(--sans); font-size: 1rem; font-weight: 300;
  color: var(--inchiostro);
  background: var(--bianco);
  border: var(--bordo); border-radius: var(--raggio);
  padding: .9rem 1rem;
  width: 100%;
  min-height: 48px;
  transition: border-color var(--breve), box-shadow var(--breve);
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(198,162,74,.16);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--inchiostro-40); }

.campo--errore input, .campo--errore textarea, .campo--errore select { border-color: #B3261E; }
.campo__errore { font-size: var(--t-small); color: #B3261E; }

.campi-2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--s-2); }
@media (min-width: 640px) { .campi-2 { grid-template-columns: 1fr 1fr; } }

/* Casella di spunta: il bersaglio e' tutta la riga, non il quadratino */
.spunta {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: var(--t-small); color: var(--inchiostro-60);
  cursor: pointer; margin-bottom: var(--s-2);
}
.spunta input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--oro-scuro); flex: none; }

.esito {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--raggio); border: var(--bordo);
  font-size: var(--t-small);
  margin-bottom: var(--s-2);
}
.esito--ok  { background: #F0F6F0; border-color: #C8DEC8; }
.esito--ko  { background: #FCF0EF; border-color: #EFCFCC; }

/* Riquadri informativi (orari, indirizzo, telefono) */
.info { display: flex; flex-direction: column; gap: var(--s-3); }
.info__blocco {
  padding: var(--s-3);
  background: var(--bianco); border: var(--bordo); border-radius: var(--raggio-img);
}
.info__blocco h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.info__blocco a:hover { color: var(--oro-scuro); }

.orari { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); }
.orari li {
  display: flex; justify-content: space-between; gap: var(--s-2);
  padding: .5rem 0; border-bottom: 1px dotted var(--greige);
}
.orari li:last-child { border-bottom: 0; }
.orari .chiuso { color: var(--inchiostro-60); }
.orari .oggi { font-weight: 500; }
/* Solo sul nome del giorno, non anche sulla riga: js/main.js mette la
   classe "oggi" su entrambi, e con .orari li in display:flex un ::before
   sulla riga diventa una terza colonna che sposta tutto il resto. */
.orari span.oggi::before { content: '▸ '; color: var(--oro-scuro); }

/* Nota sotto agli orari finche' EL.orariConfermati e' false. La scrive
   js/main.js: non sta nell'HTML perche' deve sparire da sola il giorno in
   cui gli orari vengono verificati, senza toccare sette pagine. */
.orari__nota {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--inchiostro-60);
  margin: .7rem 0 0;
}

.mappa {
  position: relative;
  /* CONTESTO DI IMPILAMENTO SUO. Non e' un dettaglio: i pannelli e i comandi
     di Leaflet stanno fra z-index 400 e 1000, cioe' sopra alla barra di
     navigazione (100) e ai due bottoni fissi (90). Senza questa riga, i
     pulsanti dello zoom passerebbero sopra alla barra mentre la pagina
     scorre. Con z-index 0 su un elemento gia' posizionato, tutti quei numeri
     valgono solo dentro al riquadro. */
  z-index: 0; isolation: isolate;
  aspect-ratio: 16 / 10; width: 100%;
  border: var(--bordo); border-radius: var(--raggio-img);
  background: var(--greige);
  overflow: hidden;
}

/* LA MAPPA E' INTERA. NON SI TAGLIA PIU' NIENTE.

   Qui stavano un iframe alto 60px piu' del riquadro e spostato 30px in su, e
   un'etichetta nostra appoggiata sopra: servivano a spingere fuori campo la
   striscia di crediti dell'incorporazione di OpenStreetMap, che dentro un
   iframe di un altro dominio non si puo' riscrivere. Il conto lo pagava la
   mappa — comando dello zoom tagliato a meta' in alto, una striscia di
   disegno persa in basso — ed era il conto sbagliato.

   Adesso la mappa la disegna Leaflet dentro questo stesso div (js/main.js
   §5): niente iframe, niente ritaglio, e la riga dei crediti e' nostra e dice
   una cosa sola. L'iframe resta solo come ripiego se la libreria non arriva,
   e in quel caso sta a grandezza intera come qualunque altro riquadro. */
.mappa iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* Leaflet nasce con Helvetica e un fondo grigio-azzurro suoi: qui prende il
   carattere e l'avorio del sito, cosi' il riquadro non stona con le schede
   che ha accanto. */
.mappa.leaflet-container {
  font-family: var(--sans);
  background: var(--avorio-2);
}

/* LA RIGA DEI CREDITI: UNA FONTE, LA NOSTRA, CON IL COLLEGAMENTO ALLA LICENZA.
   Il testo lo compone js/main.js ("© Contributi di OpenStreetMap") e la firma
   della libreria e' tolta di la' con setPrefix(false). Qui c'e' solo il
   vestito: gli stessi micro-caratteri e lo stesso avorio velato delle altre
   etichette del sito. */
.mappa .leaflet-control-attribution {
  background: rgba(250,247,242,.9);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--inchiostro-60);
  padding: .2rem .55rem;
  border-radius: var(--raggio) 0 0 0;
  box-shadow: none;
}
.mappa .leaflet-control-attribution a {
  color: var(--inchiostro-60);
  text-decoration: underline; text-underline-offset: 2px;
}
.mappa .leaflet-control-attribution a:hover { color: var(--oro-scuro); }

/* I due pulsanti dello zoom, in palette. Interi e premibili: e' meta' del
   motivo per cui la mappa non si taglia piu'. */
.mappa .leaflet-control-zoom { border: none; box-shadow: var(--ombra-1); }
.mappa .leaflet-control-zoom a {
  background: var(--avorio);
  color: var(--inchiostro);
  border-bottom-color: var(--greige);
  width: 32px; height: 32px; line-height: 32px;
}
.mappa .leaflet-control-zoom a:hover { background: var(--bianco); color: var(--oro-scuro); }
.mappa .leaflet-control-zoom a:first-child { border-radius: var(--raggio) var(--raggio) 0 0; }
.mappa .leaflet-control-zoom a:last-child  { border-radius: 0 0 var(--raggio) var(--raggio); }

/* IL SEGNAPOSTO E' DISEGNATO, NON E' UN'IMMAGINE.
   Leaflet ne ha uno di serie, azzurro, e sono tre PNG da tenere in cartella e
   da servire. Questo e' un quadrato con tre angoli arrotondati e il quarto
   no, girato di 45 gradi: viene una goccia con la punta in basso, ed e' oro,
   cioe' del colore del marchio invece che del colore della libreria.
   La punta cade 5px sotto il fondo del riquadro dell'icona — meta' della
   differenza fra il lato (24px) e la sua diagonale (34px) — e "bottom: 5px"
   la rimette esattamente sull'ancora dichiarata in js/main.js. */
.mappa__segno span {
  position: absolute; left: 50%; bottom: 5px;
  width: 24px; height: 24px; margin-left: -12px;
  background: var(--oro-scuro);
  border: 2px solid var(--avorio);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(26,26,26,.4);
}

/* -----------------------------------------------------------------------------
   16. Fascia di richiamo finale
   -------------------------------------------------------------------------- */
.richiamo { position: relative; overflow: hidden; text-align: center; }
.richiamo__sfondo { position: absolute; inset: 0; z-index: 0; opacity: .16; }
.richiamo__sfondo img { width: 100%; height: 100%; object-fit: cover; }
.richiamo .wrap { position: relative; z-index: 1; }
.richiamo h2 { font-size: var(--t-h1); margin-bottom: var(--s-2); }
.richiamo p { color: var(--greige); max-width: 56ch; margin: 0 auto var(--s-4); }

/* -----------------------------------------------------------------------------
   17. Piede
   -------------------------------------------------------------------------- */
.piede { background: var(--inchiostro); color: var(--greige); padding-top: var(--s-6); }
.piede a:hover { color: var(--oro-chiaro); }

.piede__griglia {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-5);
}
@media (min-width: 700px)  { .piede__griglia { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .piede__griglia { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s-5); } }

/* Sul piede scuro va la versione chiara del marchio: un file a parte, non un
   filtro. invert() sul logo orizzontale ribalterebbe anche l'arco oro, che
   diventerebbe azzurro. images/logo1-chiaro.png ha il lettering in avorio e
   l'arco lasciato oro. */
/* Nel piede il marchio va alla misura in cui si legge anche la riga
   "DI ALESSIA CORSI": nella barra, alta 56px, quella riga sarebbe alta due
   pixel e nessuna dimensione la salverebbe.

   La misura si da' sulla LARGHEZZA, non sull'altezza: la colonna del piede e'
   larga poco piu' di 300px, e con height fissa piu' max-width l'immagine
   veniva schiacciata in orizzontale invece di rimpicciolirsi. */
.piede__logo img { width: min(100%, 300px); height: auto; margin-bottom: var(--s-2); }
.piede__claim { font-size: var(--t-small); color: var(--inchiostro-40); max-width: 34ch; }

.piede h4 {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--oro-chiaro);
  margin-bottom: var(--s-2);
}
.piede ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.piede li { font-size: var(--t-small); }

/* I BOTTONI SOCIAL DEL PIEDE, A COLORI. PRIMA C'ERANO E NON SI VEDEVANO.

   Erano cerchi vuoti con un filo di bordo avorio al 28% e l'icona in greige,
   su un piede quasi nero: nel markup c'erano, a schermo erano due dischi
   grigi indistinguibili dal fondo, senza niente intorno che dicesse cosa
   fossero. Un bottone che non si vede e' un bottone che non c'e'.

   Cambiano tre cose, e servono tutte e tre:
     - IL COLORE. Ogni cerchio prende il colore del proprio marchio, gli stessi
       dei due bottoni fissi in basso a destra: la sfumatura Instagram, il
       verde WhatsApp, il blu Facebook. Un'icona social si riconosce dal
       colore prima che dalla sagoma, ed e' l'unico modo di vederla su un
       fondo scuro senza ingrandirla.
     - IL TITOLO. "Seguici" sopra, con lo stesso occhiello oro delle altre tre
       colonne del piede. Le colonne accanto hanno tutte un'intestazione: una
       fila di dischi senza etichetta si legge come decorazione.
     - LA MISURA. 44px, che e' il bersaglio minimo per un tocco. Erano 42.

   Il timore che tre loghi a colori facessero piu' rumore del marchio del
   centro due righe sopra era fondato in astratto e sbagliato qui: il marchio
   del piede e' largo 300px e questi sono tre cerchi da 44. La gerarchia
   regge, e in cambio i bottoni esistono.

   Ogni icona a cui manca l'indirizzo in js/data.js si toglie da sola: oggi
   Instagram, Facebook e WhatsApp ce l'hanno tutti e tre, TikTok no. */
.piede__social-tit {
  /* stessa regola dei tre h4 del piede: la classe serve solo a distinguerlo
     nel foglio, non a vestirlo in modo diverso */
  margin-top: var(--s-3);
}
.piede__social { display: flex; gap: .6rem; margin-top: 0; flex-wrap: wrap; }
.piede__social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  color: #fff;
  transition: transform var(--medio), box-shadow var(--medio), filter var(--breve);
}
.piede__social a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  filter: brightness(1.08);
}
/* Il piede colora i link in oro al passaggio del mouse (.piede a:hover):
   qui l'icona deve restare bianca dentro il cerchio del proprio marchio. */
.piede__social a:hover { color: #fff; }
.piede__social svg { width: 20px; height: 20px; fill: currentColor; }

/* I colori dei tre marchi: la sfumatura del logo Instagram dal 2016, il verde
   WhatsApp, il blu Facebook. Sono gli stessi dei bottoni fissi (§18), scritti
   una seconda volta e non condivisi perche' li' sono bottoni da 54px con
   ombra e qui cerchi da 44 dentro a un piede: due oggetti diversi che per
   caso hanno lo stesso colore. */
.piede__social a[data-link="ig"] {
  background:
    radial-gradient(circle at 30% 107%,
        #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
.piede__social a[data-link="fb"] { background: #1877F2; }
.piede__social a[data-link="wa"] { background: #25D366; }

.piede__basso {
  border-top: 1px solid rgba(231,224,214,.16);
  padding-block: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  align-items: center; justify-content: space-between;
  font-size: var(--t-micro); color: var(--inchiostro-40);
}
.piede__basso a { text-decoration: underline; text-underline-offset: 3px; }

/* -----------------------------------------------------------------------------
   18. Bottoni fissi: Instagram sopra, WhatsApp sotto

   Erano uno solo, WhatsApp, con position: fixed addosso. Ora sono due nella
   stessa colonna: la posizione la tiene il contenitore, i bottoni dentro sono
   elementi normali. Cosi' se uno dei due si toglie da solo — js/main.js
   rimuove il bottone di cui manca l'indirizzo in js/data.js — l'altro non
   resta appeso in mezzo al vuoto, ma scivola al suo posto.

   COLONNA E NON FILA. Su un telefono da 360px due bottoni in fila mangiano
   130px del bordo inferiore, cioe' la fascia in cui stanno i comandi del
   browser; in colonna occupano la stessa striscia verticale di prima.

   I COLORI SONO QUELLI DEI DUE MARCHI, non la palette del sito: #25D366 e'
   il verde WhatsApp, la sfumatura e' quella del logo Instagram dal 2016
   (giallo caldo in basso a sinistra, arancio, magenta, viola-blu in alto a
   destra). Un bottone social riconosciuto e' un bottone che viene premuto.
   -------------------------------------------------------------------------- */
.fissi {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: flex; flex-direction: column; gap: .65rem;
}
@media (min-width: 1000px) { .fissi { right: 1.8rem; bottom: 1.8rem; } }
/* Sui telefoni stretti i due bottoni scendono a 46px: a 54px, incolonnati,
   coprivano un pezzo dei pulsanti a tutta larghezza dell'hero. Restano sopra
   ai 44px di bersaglio minimo per un tocco. */
@media (max-width: 480px) {
  .fissi { right: .85rem; bottom: .85rem; gap: .5rem; }
  .fissi__b { width: 46px; height: 46px; }
  .fissi__b svg { width: 23px; height: 23px; }
  .fissi__b--ig svg { width: 22px; height: 22px; }
}

.fissi__b {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: var(--ombra-2);
  transition: transform var(--medio), box-shadow var(--medio);
}
.fissi__b:hover { transform: scale(1.07); box-shadow: var(--ombra-3); }
.fissi__b svg { width: 27px; height: 27px; }
.fissi__b--wa { background: #25D366; }
.fissi__b--wa svg { fill: currentColor; }
/* Il logo Instagram e' un contorno, non una sagoma piena: la fotocamera si
   riconosce dalle linee. Quindi fill: none e stroke, al contrario di tutte
   le altre icone del sito. */
.fissi__b--ig {
  background:
    radial-gradient(circle at 30% 107%,
        #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
.fissi__b--ig svg { width: 26px; height: 26px; fill: none; stroke: currentColor; }

/* Chi ha chiesto meno movimento non vede l'ingrandimento al passaggio del
   mouse: resta il cambio d'ombra, che basta a dire "e' un bottone". */
@media (prefers-reduced-motion: reduce) {
  .fissi__b:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   19. Animazioni d'ingresso
   Due soli gesti in tutto il sito: il testo sale, l'immagine si svela.
   La classe "on" la mette main.js con un IntersectionObserver.
   -------------------------------------------------------------------------- */
.sali { opacity: 0; transform: translateY(24px); transition: opacity var(--lento), transform var(--lento); }
.sali.on { opacity: 1; transform: none; }
.sali--1 { transition-delay: .09s; }
.sali--2 { transition-delay: .18s; }
.sali--3 { transition-delay: .27s; }
.sali--4 { transition-delay: .36s; }

.svela { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--molla); }

/* Due modi di svelare.

   .svela.on e' il caso normale: l'osservatore d'ingresso di js/main.js mette
   "on" sull'elemento quando entra nello schermo.

   .on .svela e' irrobustimento. Un elemento con clip-path che nasconde il
   100% dell'altezza e' invisibile finche' non arriva "on", e in tutto il sito
   ce n'e' uno solo: la fotografia della titolare in chi-siamo.html. Un
   percorso di codice usato una volta sola e' quello che nessuno prova.
   Facendo dipendere la comparsa anche dal CONTENITORE, che ritagliato non e',
   la fotografia non resta appesa a come l'osservatore misura un elemento la
   cui area visibile e' zero. Costa un selettore. */
.svela.on, .on .svela { clip-path: inset(0 0 0 0); }

/* Chi ha chiesto meno movimento vede tutto, subito, fermo. */
@media (prefers-reduced-motion: reduce) {
  .sali  { opacity: 1; transform: none; }
  .svela { clip-path: none; }
}

/* -----------------------------------------------------------------------------
   20. Stampa
   -------------------------------------------------------------------------- */
@media print {
  .nav, .mnav, .burger, .fissi, .hero__giu, .richiamo { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }

  /* SU CARTA I FONDI NON SI STAMPANO, MA IL TESTO SI'.
     Da quando le testate hanno il testo in avorio sopra a un velo scuro, in
     stampa resterebbe bianco su bianco: la maggior parte dei browser non
     stampa i colori di fondo, quindi il velo sparisce e il testo con lui.
     Qui le testate tornano nere su bianco e le fotografie di sfondo escono
     del tutto: in un listino stampato una fotografia di sfondo e' inchiostro
     buttato via. La pagina Servizi e' quella che viene stampata davvero. */
  .hero { min-height: 0 !important; padding-top: 0 !important; }
  .testata-pagina { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .hero__sfondo, .testata-pagina__sfondo, .hero__cerchio,
  .hero__punti, .hero__btns { display: none !important; }
  .hero h1, .hero__testo h2, .hero__sub, .hero__testo .occhiello,
  .testata-pagina h1, .testata-pagina p, .testata-pagina .occhiello {
    color: #000 !important; text-shadow: none !important;
  }
  .hero .acc, .testata-pagina .acc { color: #4A3A12 !important; }
  .sali, .svela { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .cat { break-inside: avoid; border: 1px solid #999; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* =============================================================================
   14. Prenotazione online (prenota.html) e autogestione (appuntamento.html)

   Il modulo di prenotazione e' l'unico punto del sito in cui la visitatrice
   deve DECIDERE invece di leggere. Percio' qui il respiro si stringe: bersagli
   grandi, un'azione per schermata, e niente che si muova mentre si sceglie.
   ============================================================================= */

.campo__nota { font-size: var(--t-small); color: var(--inchiostro-60); line-height: 1.5; }

.pren { max-width: 100%; }

/* ---- le tre tappe in cima ---- */
.pren__tappe {
  display: flex; gap: .5rem; list-style: none; padding: 0;
  margin: 0 0 var(--s-4);
}
.pren__tappa {
  flex: 1; display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-small); color: var(--inchiostro-40);
  padding-bottom: .7rem; border-bottom: 2px solid var(--greige);
  transition: color var(--medio), border-color var(--medio);
}
.pren__tappa span {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: var(--t-micro);
  background: var(--greige); color: var(--inchiostro-60);
  transition: background var(--medio), color var(--medio);
}
.pren__tappa.attiva { color: var(--inchiostro); border-bottom-color: var(--oro); }
.pren__tappa.attiva span { background: var(--oro); color: #fff; }
.pren__tappa.fatta { color: var(--inchiostro-60); border-bottom-color: var(--oro-chiaro); }
.pren__tappa.fatta span { background: var(--oro-chiaro); color: var(--inchiostro); font-size: 0; }
.pren__tappa.fatta span::after { content: "\2713"; font-size: .8rem; }

@media (max-width: 640px) {
  /* Su telefono i nomi delle tappe non entrano: resta il numero, che con la
     barra sotto basta a dire a che punto si e'. */
  .pren__tappa { font-size: 0; gap: 0; justify-content: center; }
  .pren__tappa span { font-size: var(--t-micro); }
  .pren__tappa.fatta span::after { font-size: .8rem; }
}

.pren__t { font-size: var(--t-h2); margin: 0 0 .4rem; }
.pren__s { color: var(--inchiostro-60); margin: 0 0 var(--s-3); max-width: 52ch; }

/* ---- 1 · elenco trattamenti ---- */
.pren__cat {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-scuro); margin: var(--s-3) 0 .6rem; font-family: var(--sans);
  font-weight: 500;
}
.pren__cat:first-child { margin-top: 0; }

.pren__elenco { margin-bottom: var(--s-3); }
.pren__voce {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .85rem 1rem; border: var(--bordo); border-radius: var(--raggio);
  margin-bottom: .4rem; cursor: pointer; background: var(--bianco);
  transition: border-color var(--breve), background var(--breve);
}
.pren__voce:hover { border-color: var(--oro-chiaro); }
.pren__voce:has(input:checked) { border-color: var(--oro); background: var(--avorio-2); }
.pren__voce input {
  width: 20px; height: 20px; margin-top: .15rem; flex: none; accent-color: var(--oro-scuro);
}
.pren__voce-n { flex: 1; min-width: 0; }
.pren__voce-n b { display: block; font-weight: 500; font-size: var(--t-body); }
.pren__voce-n small {
  display: block; font-size: var(--t-small); color: var(--inchiostro-60);
  margin-top: .15rem; line-height: 1.5;
}
.pren__voce-d {
  text-align: right; font-size: var(--t-small); color: var(--inchiostro-60);
  white-space: nowrap; flex: none;
}
.pren__voce-d b { display: block; color: var(--inchiostro); font-weight: 500; }

/* ---- riga finale di ogni passo ---- */
.pren__piede {
  display: flex; align-items: center; gap: var(--s-2);
  padding-top: var(--s-3); margin-top: var(--s-3);
  border-top: var(--bordo); flex-wrap: wrap;
}
.pren__scelti { flex: 1; min-width: 200px; font-size: var(--t-small); line-height: 1.5; }
.pren__scelti span { display: block; color: var(--inchiostro-60); }
.pren__scelti b { display: block; color: var(--inchiostro); font-size: var(--t-body); }
.pren__scelti small { display: block; color: var(--oro-scuro); font-size: var(--t-micro); margin-top: .2rem; }
.pren__vuoto { color: var(--inchiostro-40); font-size: var(--t-small); margin: 0; }

/* ---- 2 · calendario e orari ---- */
.pren__quando { display: grid; gap: var(--s-3); }
@media (min-width: 800px) { .pren__quando { grid-template-columns: 320px 1fr; } }

.pren__cal { border: var(--bordo); border-radius: var(--raggio); padding: 1rem; background: var(--bianco); }
.pren__calt {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .8rem;
}
.pren__calt b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.pren__frec {
  width: 34px; height: 34px; border: var(--bordo); background: var(--bianco);
  border-radius: var(--raggio); cursor: pointer; font-size: 1.1rem;
  color: var(--inchiostro); line-height: 1;
}
.pren__frec:hover:not(:disabled) { border-color: var(--oro); color: var(--oro-scuro); }
.pren__frec:disabled { opacity: .3; cursor: not-allowed; }

.pren__dow, .pren__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pren__dow span {
  text-align: center; font-size: var(--t-micro); color: var(--inchiostro-40);
  padding-bottom: .3rem; letter-spacing: .05em;
}
.pren__gg {
  aspect-ratio: 1; border: 1px solid transparent; background: none;
  border-radius: var(--raggio); cursor: pointer; font-family: var(--sans);
  font-size: var(--t-small); color: var(--inchiostro);
  display: grid; place-items: center;
  transition: background var(--breve), border-color var(--breve), color var(--breve);
}
.pren__gg:hover:not(:disabled) { background: var(--avorio-2); border-color: var(--oro-chiaro); }
.pren__gg--off { color: var(--inchiostro-40); cursor: not-allowed; }
.pren__gg--off:hover { background: none; border-color: transparent; }
.pren__gg--vuota { cursor: default; }
.pren__gg--scelto { background: var(--oro); color: #fff; border-color: var(--oro); font-weight: 500; }
.pren__gg--scelto:hover { background: var(--oro-scuro); border-color: var(--oro-scuro); }

.pren__orari { min-height: 120px; }
.pren__fascia { margin-bottom: var(--s-3); }
.pren__fascia h4 {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--inchiostro-60); margin: 0 0 .6rem; font-family: var(--sans); font-weight: 500;
}
.pren__ore { display: flex; flex-wrap: wrap; gap: .45rem; }
.pren__ora {
  padding: .6rem 1rem; border: var(--bordo); background: var(--bianco);
  border-radius: var(--raggio); cursor: pointer; font-family: var(--sans);
  font-size: var(--t-small); font-variant-numeric: tabular-nums;
  transition: border-color var(--breve), background var(--breve), color var(--breve);
  /* 44px di lato minimo: e' la misura sotto la quale un dito sbaglia bersaglio */
  min-width: 74px; min-height: 44px;
}
.pren__ora:hover { border-color: var(--oro); }
.pren__ora.scelta { background: var(--oro); color: #fff; border-color: var(--oro); font-weight: 500; }

/* ---- 3 · riepilogo ---- */
.pren__ric {
  border: var(--bordo); border-left: 3px solid var(--oro);
  border-radius: var(--raggio); background: var(--avorio-2);
  padding: 1rem 1.2rem; margin-bottom: var(--s-3);
}
.pren__ric-r { display: flex; gap: 1rem; padding: .35rem 0; font-size: var(--t-small); }
.pren__ric-r span { color: var(--inchiostro-60); min-width: 74px; flex: none; }
.pren__ric-r b { font-weight: 500; }

.pren__legale {
  font-size: var(--t-micro); color: var(--inchiostro-60);
  margin: var(--s-2) 0 0; line-height: 1.6; text-align: center;
}

/* ---- fatto ---- */
.pren__fatto { text-align: center; padding: var(--s-4) 0; }
.pren__spunta {
  display: grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--oro); color: #fff;
  font-size: 1.8rem; margin: 0 auto var(--s-2);
}
.pren__fatto h2 { font-size: var(--t-h2); margin: 0 0 .5rem; }
.pren__fatto-q { font-size: 1.15rem; margin: 0 0 .8rem; line-height: 1.6; }
.pren__fatto-q small { display: block; font-size: var(--t-small); color: var(--inchiostro-60); margin-top: .2rem; }
.pren__cod {
  display: inline-block; font-size: var(--t-small); color: var(--inchiostro-60);
  border: var(--bordo); border-radius: var(--raggio); padding: .35rem .9rem; margin: 0 0 var(--s-3);
}
.pren__cod b { font-variant-numeric: tabular-nums; letter-spacing: .05em; color: var(--inchiostro); }
.pren__fatto-t {
  max-width: 46ch; margin: 0 auto var(--s-3); color: var(--inchiostro-60);
  font-size: var(--t-small); line-height: 1.7;
}
.pren__fatto-b { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }

/* ---- prenotazione spenta ---- */
.pren__spenta { text-align: center; padding: var(--s-4) 0; }
.pren__spenta h2 { font-size: var(--t-h2); margin: 0 0 var(--s-2); }
.pren__spenta p {
  max-width: 54ch; margin: 0 auto var(--s-2); color: var(--inchiostro-60); line-height: 1.75;
}
.pren__spenta-b {
  display: flex; gap: var(--s-2); justify-content: center;
  flex-wrap: wrap; margin-top: var(--s-3);
}

/* =============================================================================
   15. Autogestione: il link "sposta o annulla" del promemoria
   ============================================================================= */

.auto { max-width: 100%; }
.auto__scheda {
  border: var(--bordo); border-left: 3px solid var(--oro);
  border-radius: var(--raggio); background: var(--bianco);
  padding: var(--s-3); margin-bottom: var(--s-3);
}
.auto__q { font-family: var(--serif); font-size: var(--t-h3); margin: 0 0 .3rem; }
.auto__d { color: var(--inchiostro-60); font-size: var(--t-small); margin: 0; line-height: 1.6; }
.auto__azioni { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.auto__nota {
  font-size: var(--t-small); color: var(--inchiostro-60);
  line-height: 1.7; margin-top: var(--s-2);
}
.auto__bloccato {
  background: var(--avorio-2); border: var(--bordo); border-radius: var(--raggio);
  padding: 1rem 1.2rem; font-size: var(--t-small); line-height: 1.7;
  color: var(--inchiostro-60);
}

/* =============================================================================
   16. Testi lunghi (privacy.html)

   Una pagina che si legge davvero, non che si scorre: misura di riga corta,
   interlinea larga, titoli che si distinguono senza gridare. E' l'opposto
   della vetrina, dove il testo e' un accompagnamento all'immagine.
   ============================================================================= */

.testo-lungo {
  /* 68 caratteri e' la misura in cui l'occhio ritrova l'inizio della riga
     successiva senza cercarlo. Sopra i 90 si perde il segno. */
  max-width: 68ch;
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--inchiostro);
}

.testo-lungo__data {
  font-size: var(--t-small);
  color: var(--inchiostro-60);
  border-bottom: var(--bordo);
  padding-bottom: var(--s-2);
  margin: 0 0 var(--s-4);
}

.testo-lungo h2 {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 600;
  margin: var(--s-4) 0 var(--s-2);
  padding-top: var(--s-2);
  border-top: var(--bordo);
}
.testo-lungo h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.testo-lungo h3 {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: .02em;
  margin: var(--s-3) 0 .5rem;
  color: var(--oro-scuro);
}

.testo-lungo p { margin: 0 0 var(--s-2); }

.testo-lungo ul {
  margin: 0 0 var(--s-2);
  padding-left: 1.15rem;
  list-style: none;
}
.testo-lungo li {
  position: relative;
  margin-bottom: .55rem;
  padding-left: .3rem;
}
.testo-lungo li::before {
  content: '';
  position: absolute;
  left: -.9rem; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--oro);
}

.testo-lungo b { font-weight: 500; }

.testo-lungo a { color: var(--oro-scuro); text-underline-offset: .2em; }
.testo-lungo a:hover { color: var(--inchiostro); }

/* Una precisazione, non una nota a pie' di pagina: sta accanto al testo che
   riguarda, non in fondo dove nessuno tornerebbe a cercarla. */
.testo-lungo__nota {
  font-size: var(--t-small);
  color: var(--inchiostro-60);
  line-height: 1.7;
  border-left: 2px solid var(--greige);
  padding-left: var(--s-2);
  margin: 0 0 var(--s-3);
}

/* L'avviso "documento non ancora valido": deliberatamente dentro il flusso
   del testo e non chiudibile. Una fascia in cima si ignora; questo no. */
.a-msg-privacy {
  background: #FBF3DF;
  border: 1px solid #E8D9A8;
  border-left: 3px solid #B8860B;
  border-radius: var(--raggio);
  padding: 1rem 1.2rem;
  margin-bottom: var(--s-4);
  font-size: var(--t-small);
  line-height: 1.7;
  color: #7A5A0B;
}
.a-msg-privacy strong { font-weight: 600; }

@media print {
  .testo-lungo { max-width: none; font-size: 11pt; }
  .a-msg-privacy { border: 1px solid #999; }
}