/* =========================================================
   Dott. Alessandro Pairone · Psicologo
   Foglio di stile condiviso da tutte le pagine del sito.
   Ordine delle sezioni: variabili, reset, utility, testata,
   hero, intro, aree, servizi, chi sono, contatti, blog,
   footer, comparsa, responsive.
   Regole di progetto: niente <style> di pagina, niente stili
   inline, ogni regola sta accanto alle sorelle.
   ========================================================= */

/* =====================================================
   PROPOSTA A · CARTA
   Editoriale caldo: carta avorio, salvia, terracotta.
   Serif Fraunces + Karla. Niente card lucide, niente
   gradienti: righe sottili, numeri, aria.
   ===================================================== */
/* ---------- Font ospitati sul nostro server ----------
   Fraunces e Karla sono sotto SIL Open Font License, che consente
   di ospitarli in proprio. Cosi il visitatore non contatta Google
   e non gli manda il proprio indirizzo IP, e la pagina non deve
   aprire connessioni verso domini esterni prima di disegnare il testo. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/fraunces-latin-400-normal.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:500;font-display:swap;
  src:url('font/fraunces-latin-500-normal.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:600;font-display:swap;
  src:url('font/fraunces-latin-600-normal.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:italic;font-weight:400;font-display:swap;
  src:url('font/fraunces-latin-400-italic.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:italic;font-weight:500;font-display:swap;
  src:url('font/fraunces-latin-500-italic.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:'Karla';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/karla-latin-400-normal.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:'Karla';font-style:normal;font-weight:600;font-display:swap;
  src:url('font/karla-latin-600-normal.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:'Karla';font-style:normal;font-weight:700;font-display:swap;
  src:url('font/karla-latin-700-normal.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;
}

:root{
  /* Palette originale del sito, campionata da style.css
     periwinkle / cornflower / slate / navy.
     I nomi delle variabili restano quelli della proposta A. */
  --carta:#FFFFFF;            /* sfondo pagina */
  --carta-alta:#F6F6F4;       /* bande e schede, era cream */
  --inchiostro:#20304E;       /* testo corrente */
  --inchiostro-morbido:#54607A;
  --salvia:#061D50;           /* accento forte: bottoni, titoli, era navy */
  --salvia-fonda:#04143A;     /* pannello scuro contatti */
  --salvia-velo:#EEF3FD;      /* fondo tenue sezioni, era periwinkle-tint */
  --terracotta:#3F6CA3;       /* accento secondario: numeri, eyebrow, era cornflower-deep */
  --periwinkle:#D9E4FA;       /* etichette su fondo scuro */
  --periwinkle-deep:#C5CFE6;
  --linea:rgba(6,29,80,.12);
  --linea-forte:rgba(6,29,80,.24);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Karla',system-ui,sans-serif;
  --testata:116px;
  --testata-compatta:72px;
  /* altezza attuale della testata: cambia quando la pagina scorre */
  --testata-ora:var(--testata);
  --container:1200px;
  --gutter:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--carta);
  color:var(--inchiostro);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:3000;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-0.015em;color:var(--inchiostro)}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--salvia);color:var(--carta-alta)}
:focus-visible{outline:3px solid var(--salvia);outline-offset:3px;border-radius:2px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,120px)}
/* la testata e fissa: senza questo le ancore del menu portano
   il titolo della sezione sotto la barra */
/* html.compatta: testata ridotta, gli scatti ai collegamenti interni seguono la misura vera */
html.compatta{--testata-ora:var(--testata-compatta)}
/* vale per ogni destinazione di un'ancora, non solo per le sezioni:
   anche il riquadro #prenota e il pannello #precauzioni */
main [id]{scroll-margin-top:calc(var(--testata-ora) + 14px)}

.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terracotta);display:flex;align-items:baseline;gap:12px;
}
.eyebrow .num{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:.95rem;letter-spacing:0;text-transform:none}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:.95rem;letter-spacing:.02em;
  padding:15px 28px;border-radius:999px;border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn svg{width:17px;height:17px}
.btn-pieno{background:var(--salvia);color:var(--carta-alta)}
.btn-pieno:hover{background:#0B2A73;transform:translateY(-2px)}
.btn-linea{border-color:var(--linea-forte);color:var(--inchiostro);background:transparent}
.btn-linea:hover{border-color:var(--inchiostro)}

/* ---------- Salta al contenuto ---------- */
.salta{position:absolute;left:-9999px;top:10px;z-index:2000}
.salta:focus{left:10px}

/* ---------- Header ---------- */
.testata{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
  transition:box-shadow .3s var(--ease);
}
html.compatta .testata{box-shadow:0 10px 30px -24px rgba(6,29,80,.45)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--testata-ora);gap:24px;transition:height .3s var(--ease)}
/* La misura del marchio sta in una variabile perche cambia fra testata e
   fondo pagina: in testata e il segno principale, in fondo e una firma. */
.marchio{display:flex;align-items:center;gap:12px;--marchio:58px}
.nav .marchio{--marchio:88px}
html.compatta .nav .marchio{--marchio:52px}
.marchio img{width:var(--marchio);height:var(--marchio);object-fit:contain;transition:width .3s var(--ease),height .3s var(--ease)}
.marchio .nome{font-family:var(--font-display);font-size:1.16rem;font-weight:600;line-height:1.1}
.marchio .ruolo{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--inchiostro-morbido)}
.nav-voci{display:flex;gap:4px;align-items:center}
.nav-voci a{font-weight:600;font-size:.93rem;padding:9px 14px;border-radius:999px;color:var(--inchiostro-morbido);transition:color .2s,background .2s}
.nav-voci a:hover{color:var(--inchiostro);background:var(--salvia-velo)}
.nav-voci a[aria-current]{color:var(--salvia);background:var(--salvia-velo)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:11px 22px}
.apri-menu{
  display:none;width:44px;height:44px;position:relative;cursor:pointer;
  border:1px solid var(--linea-forte);border-radius:10px;background:transparent;
}
/* Le tre barre sono lo span piu i suoi due pseudo-elementi.
   Uso translate e rotate separati invece di un unico transform:
   sono proprieta indipendenti, quindi avvicinamento e rotazione
   possono avere tempi diversi senza aggiungere elementi.
   Gli scostamenti sono calc(-50% +/- 6px), simmetrici e indipendenti
   dall'altezza della barra. */
.apri-menu span,
.apri-menu span::before,
.apri-menu span::after{
  content:"";position:absolute;left:50%;top:50%;
  width:18px;height:2px;background:var(--inchiostro);
  translate:-50% -50%;rotate:0deg;
  transition:translate .22s var(--ease) .16s, rotate .2s var(--ease), background-color .16s linear .2s;
}
.apri-menu span::before{translate:-50% calc(-50% - 6px)}
.apri-menu span::after{translate:-50% calc(-50% + 6px)}

/* Apertura in due tempi: prima le tre barre si raccolgono in una,
   poi la riga si incrocia. La pausa a meta e quello che rende il
   gesto calmo invece che nervoso. In chiusura l'ordine si inverte,
   per questo i tempi dello stato aperto sono diversi. */
.apri-menu[aria-expanded="true"] span,
.apri-menu[aria-expanded="true"] span::before,
.apri-menu[aria-expanded="true"] span::after{
  transition:translate .2s var(--ease), rotate .22s var(--ease) .16s, background-color .14s linear;
}
.apri-menu[aria-expanded="true"] span{background-color:transparent}
.apri-menu[aria-expanded="true"] span::before{translate:-50% -50%;rotate:45deg}
.apri-menu[aria-expanded="true"] span::after{translate:-50% -50%;rotate:-45deg}

@media (prefers-reduced-motion:reduce){
  .apri-menu span,.apri-menu span::before,.apri-menu span::after,
  .apri-menu[aria-expanded="true"] span,
  .apri-menu[aria-expanded="true"] span::before,
  .apri-menu[aria-expanded="true"] span::after{transition:none}
}

/* ---------- Hero ---------- */
.hero{
  padding-top:calc(var(--testata) + clamp(56px,6vh,84px));padding-bottom:clamp(56px,8vw,110px);
  background:radial-gradient(120% 90% at 85% -10%, var(--periwinkle) 0%, var(--salvia-velo) 45%, var(--carta) 80%);
}
.hero-griglia{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,6vw,90px);align-items:center}
.hero h1{font-size:clamp(2.6rem,5.8vw,4.6rem);max-width:12ch;margin-top:20px}
.hero h1 em{font-style:italic;font-weight:400;color:var(--salvia)}
.hero-sub{margin-top:22px;font-size:1.15rem;color:var(--inchiostro-morbido);max-width:38ch}
.hero-aree{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.hero-aree a{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--linea-forte);background:var(--carta);font-size:.9rem;font-weight:600;color:var(--salvia);
  transition:background .2s,border-color .2s;
}
.hero-aree a:hover{background:var(--salvia-velo);border-color:var(--salvia)}
.hero-azioni{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.hero-telefono{margin-top:16px;font-size:.98rem;color:var(--inchiostro-morbido)}
/* padding e margine negativo portano l'area da toccare a 44 px; la sottolineatura resta sul testo */
.hero-telefono a{display:inline-block;padding-block:10px;margin-block:-10px;font-weight:700;color:var(--salvia);text-decoration:underline;text-decoration-color:var(--linea-forte);text-underline-offset:4px}
.hero-telefono a:hover{text-decoration-color:var(--salvia)}
.hero-fiducia{margin-top:44px;padding-top:22px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:8px 32px;font-size:.88rem;font-weight:600;color:var(--inchiostro-morbido)}
.hero-fiducia span{display:inline-flex;gap:8px;align-items:center}
.hero-fiducia svg{width:15px;height:15px;color:var(--salvia)}

.hero-figura{position:relative;justify-self:end;width:min(100%,400px)}
.hero-figura .cornice{
  position:absolute;inset:18px -18px -18px 18px;
  border:1px solid var(--linea-forte);
  border-radius:200px 200px 22px 22px;pointer-events:none;
}
.hero-figura img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;
  border-radius:200px 200px 22px 22px;
  filter:saturate(.92);
}
.hero-figura .cartellino{
  position:absolute;left:-26px;bottom:30px;
  background:var(--carta-alta);border:1px solid var(--linea);
  padding:13px 18px;border-radius:14px;max-width:230px;
  box-shadow:0 18px 40px -22px rgba(6,29,80,.28);
}
.cartellino .chi{font-family:var(--font-display);font-size:.98rem;font-weight:600}
.cartellino .cosa{font-size:.76rem;font-weight:600;letter-spacing:.05em;color:var(--inchiostro-morbido);margin-top:2px}

/* ---------- Frase intro ---------- */
.intro{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--salvia-velo)}
.intro .section{padding-block:clamp(48px,6vw,80px)}
.intro p.frase{
  font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:400;line-height:1.3;text-align:center;max-width:26ch;margin-inline:auto;
}
.intro p.frase em{font-style:italic;color:var(--terracotta)}
.intro p.sotto{margin-top:14px;text-align:center;color:var(--inchiostro-morbido)}

/* ---------- Aree · indice che si apre ---------- */
.aree-testa{max-width:640px}
.aree-testa .titolo{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:16px}
.aree-testa .guida{margin-top:16px;color:var(--inchiostro-morbido)}

.indice{margin-top:44px;border-top:1px solid var(--linea-forte)}
.indice .voce{border-bottom:1px solid var(--linea)}
/* il titolo di livello 3 serve alla struttura del documento,
   l'aspetto lo danno le classi interne */
.indice h3{margin:0;font:inherit;letter-spacing:0}
.voce-bottone{
  width:100%;display:flex;align-items:baseline;gap:22px;
  padding:20px 4px;background:none;border:0;text-align:left;
  color:inherit;font:inherit;cursor:pointer;
  transition:padding-left .3s var(--ease);
}
.voce-bottone:hover{padding-left:14px}
.voce-num{
  flex:none;width:30px;
  font-family:var(--font-display);font-style:italic;font-size:.95rem;color:var(--terracotta);
}
.voce-nome{
  flex:1;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.2;color:var(--inchiostro);
}
.voce-segno{flex:none;position:relative;width:14px;height:14px;align-self:center}
.voce-segno::before,.voce-segno::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--terracotta);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease);
}
.voce-segno::before{width:14px;height:1.5px}
.voce-segno::after{width:1.5px;height:14px}
.voce-bottone[aria-expanded="true"] .voce-segno::after{transform:translate(-50%,-50%) scaleY(0)}
.voce-corpo{padding:0 4px 24px 52px;max-width:68ch}
.voce-corpo p{font-size:1.02rem;line-height:1.65;color:var(--inchiostro-morbido)}
.voce-fonte{
  margin-top:12px;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terracotta);
}
.voce-fonte a{color:inherit;border-bottom:1px solid currentColor}
.voce-fonte a:hover{color:var(--salvia)}

.aree-nota{
  margin-top:26px;font-size:.84rem;line-height:1.5;
  color:var(--inchiostro-morbido);max-width:76ch;
}

@media (prefers-reduced-motion:reduce){
  .voce-bottone,.voce-segno::before,.voce-segno::after{transition:none}
}

/* ---------- Il primo colloquio ---------- */
.primo{background:var(--carta-alta);border-top:1px solid var(--linea)}
.primo-testa{max-width:640px}
.primo-testa .titolo{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:16px}
.primo-griglia{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--linea-forte)}
.passo{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;align-content:start;padding:22px 0;border-bottom:1px solid var(--linea)}
.passo:first-child{grid-column:1 / -1}
.passo-num{grid-row:1 / span 3;font-family:var(--font-display);font-style:italic;font-size:.95rem;color:var(--terracotta);padding-top:3px}
.passo h3{font-family:var(--font-body);font-size:1.02rem;font-weight:700;color:var(--inchiostro)}
.passo p{margin-top:6px;font-size:.98rem;line-height:1.65;color:var(--inchiostro-morbido);max-width:68ch}
.passo a{font-weight:700;color:var(--salvia);border-bottom:1px solid var(--linea-forte)}
.passo a:hover{border-bottom-color:var(--salvia)}
.primo-approfondisci{margin-top:26px;font-size:.95rem;color:var(--inchiostro-morbido)}
.primo-approfondisci a{font-weight:700;color:var(--salvia);border-bottom:1px solid var(--linea-forte)}

/* ---------- Servizi ---------- */
.servizi{background:var(--salvia-velo);border-top:1px solid var(--linea)}
.servizi-testa{max-width:640px}
.servizi-testa .titolo{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:16px}
.servizi-testa .guida{margin-top:14px;color:var(--inchiostro-morbido)}
.servizi-griglia{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.servizio{
  background:var(--carta-alta);border:1px solid var(--linea);border-radius:20px;
  padding:30px 28px;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.servizio:hover{transform:translateY(-6px);box-shadow:0 24px 50px -30px rgba(6,29,80,.34)}
.servizio .dove{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
.servizio h3{font-size:1.45rem;margin-top:12px;font-weight:600;max-width:16ch}
.servizio .prezzo{margin-top:20px;font-family:var(--font-display)}
.servizio .prezzo .cifra{font-size:2.9rem;font-weight:600}
.servizio .prezzo .unita{font-size:.95rem;font-style:italic;color:var(--inchiostro-morbido);margin-left:6px}
.servizio .prezzo .durata{display:block;margin-top:4px;font-family:var(--font-body);font-size:.88rem;color:var(--inchiostro-morbido)}
.servizio ul{margin-top:18px;padding-top:18px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:12px;flex:1}
.servizio ul li{display:flex;gap:10px;font-size:.94rem;color:var(--inchiostro)}
.servizio ul svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--salvia)}
.servizio ul a{font-weight:700;color:var(--salvia);border-bottom:1px solid var(--linea-forte)}
.servizio ul a:hover{border-bottom-color:var(--salvia)}
.fonti-mbsr{display:block;margin-top:6px;font-size:.8rem;color:var(--inchiostro-morbido)}
.fonti-mbsr a{font-weight:600}
.servizi-note{margin-top:30px;max-width:80ch;font-size:.92rem;line-height:1.6;color:var(--inchiostro-morbido)}
.servizi-note strong{color:var(--inchiostro)}
/* pannello pieghevole: le precauzioni per le sedute online, pannello opaco */
.precauzioni{margin-top:22px;background:var(--carta);border:1px solid var(--linea);border-radius:16px}
.precauzioni summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:16px 22px;font-weight:700;color:var(--salvia);
}
.precauzioni summary::-webkit-details-marker{display:none}
.precauzioni summary::after{content:"+";font-size:1.4rem;line-height:1;font-weight:400;color:var(--terracotta)}
.precauzioni[open] summary::after{content:"\2212"}
.precauzioni-corpo{padding:0 22px 22px;max-width:80ch}
.precauzioni-corpo p,.precauzioni-corpo li{font-size:.95rem;line-height:1.65;color:var(--inchiostro)}
.precauzioni-corpo p+p,.precauzioni-corpo ul+p,.precauzioni-corpo p+ul{margin-top:12px}
.precauzioni-corpo ul{display:flex;flex-direction:column;gap:10px;padding-left:20px;list-style:disc}
.servizio .vai{
  /* padding e margine negativo: l'area da toccare arriva a 44 px
     e il testo resta dove stava (24 px sopra, 0 sotto) */
  margin-top:14px;margin-bottom:-10px;padding-block:10px;display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.95rem;color:var(--salvia);align-self:flex-start;
}
.servizio .vai svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.servizio .vai:hover svg{transform:translateX(5px)}

/* ---------- Chi sono ---------- */
.chi-griglia{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,90px);align-items:center}
.chi-figura{position:relative;width:min(100%,380px)}
.chi-figura img{
  width:100%;aspect-ratio:1/1.05;object-fit:cover;object-position:center 15%;
  border-radius:20px;filter:saturate(.92);
}
.chi-figura::after{
  content:"";position:absolute;inset:-16px 16px 16px -16px;z-index:-1;
  background:var(--salvia-velo);border-radius:20px;
}
.chi-corpo .titolo{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:16px}
.chi-corpo p{margin-top:18px;color:var(--inchiostro)}
.chi-corpo p+p{margin-top:14px}
.credenziali{margin-top:26px;border-top:1px solid var(--linea-forte)}
.credenziali li{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 2px;border-bottom:1px solid var(--linea);font-size:.93rem;
}
.credenziali .voce{font-weight:700}
.credenziali .valore{color:var(--inchiostro-morbido)}
.chi-corpo .btn{margin-top:28px}

/* ---------- Contatti ---------- */
.contatti{background:var(--salvia-fonda);color:rgba(255,255,255,.82)}
.contatti .eyebrow{color:var(--periwinkle)}
.contatti .eyebrow::after{background:var(--periwinkle)}
.contatti-griglia{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,6vw,80px)}
.contatti h2{color:#FFFFFF;font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:16px}
.contatti .invito{margin-top:16px;color:rgba(255,255,255,.80);max-width:38ch}
.recapiti{margin-top:34px;display:flex;flex-direction:column}
.recapito{display:flex;gap:16px;padding:16px 2px;border-top:1px solid rgba(255,255,255,.18);align-items:baseline}
.recapito .lbl{flex:none;width:92px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--periwinkle)}
.recapito .val{font-weight:600;color:#FFFFFF;overflow-wrap:anywhere}
.recapito .val a{display:inline-block;padding-block:12px;margin-block:-12px}
.recapito .sede{display:block}
.recapito .sede+.sede{margin-top:10px}
.recapito .val a:hover{color:var(--periwinkle)}
/* indirizzo email scritto in chiaro, senza mailto: un clic lo seleziona tutto */
.email-testo{font-weight:700;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.social{margin-top:28px;display:flex;gap:10px}
.social a{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  display:grid;place-items:center;color:#FFFFFF;transition:background .25s,color .25s;
  position:relative;
}
/* il cerchio resta di 42 px, l'area da toccare arriva a 46 */
.social a::after{content:"";position:absolute;inset:-2px;border-radius:50%}
.social a:hover{background:#FFFFFF;color:var(--salvia-fonda)}
.social svg{width:18px;height:18px}


/* ---------- Riquadro per prenotare, accanto ai recapiti ---------- */
.prenota{
  align-self:start;background:var(--carta-alta);border:1px solid var(--linea);border-radius:20px;
  padding:clamp(22px,3vw,34px);box-shadow:0 34px 70px -40px rgba(6,29,80,.5);
}
.prenota .titoletto{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--inchiostro)}
.prenota .nota-alto{font-size:.95rem;color:var(--inchiostro-morbido);margin-top:8px}
.prenota .btn{margin-top:22px}
.prenota-email{margin-top:18px;font-size:.92rem;color:var(--inchiostro-morbido)}
.prenota-email .email-testo{color:var(--inchiostro)}


/* ---------- Avanzamento lettura ---------- */
.avanzamento{position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;pointer-events:none;background:transparent}
.avanzamento span{display:block;height:100%;width:0;background:var(--salvia);transition:width .1s linear}

/* ---------- Freccia per tornare in cima ----------
   Il bottone lo crea script.js, nelle pagine non c'e markup.
   z-index 900: sotto la testata (1000), la barra di lettura (1200)
   e il link «Vai al contenuto» (2000). */
.in-cima{
  position:fixed;z-index:900;right:28px;
  /* --alza lo imposta lo script: zero finche non compare la riga finale
     del piè di pagina, poi tiene la freccia sopra Cookie e Privacy */
  bottom:calc(28px + var(--alza, 0px));
  width:48px;height:48px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--salvia);color:var(--carta);
  /* l'anello chiaro la stacca dai pannelli blu scuro, dove sparirebbe */
  box-shadow:0 0 0 2px var(--carta),0 10px 24px -10px rgba(6,29,80,.55);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s,background-color .2s;
}
.in-cima.visibile{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s,background-color .2s;
}
.in-cima:hover{background:#0B2A73}
/* Fuoco da tastiera: i colori si invertono. Un contorno blu sparirebbe
   sopra i pannelli blu scuro, l'inversione si vede su qualunque fondo. */
.in-cima:focus-visible{
  outline:none;background:var(--carta);color:var(--salvia);
  box-shadow:0 0 0 2px var(--salvia),0 0 0 5px var(--carta),0 10px 24px -10px rgba(6,29,80,.55);
}
.in-cima svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Testata del blog ---------- */
.blog-testata{
  padding-top:calc(var(--testata) + clamp(36px,4vh,56px));padding-bottom:clamp(36px,5vw,58px);
  background:var(--carta-alta);border-bottom:1px solid var(--linea);
}
.blog-testata h1{font-size:clamp(2.3rem,5vw,3.7rem);margin-top:20px;max-width:15ch}
.blog-testata .guida{margin-top:18px;font-size:1.1rem;color:var(--inchiostro-morbido);max-width:54ch}
.blog-testata .dati{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:8px 30px;
  font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-morbido);
}

/* ---------- Impaginato ---------- */
.blog-corpo{padding-block:clamp(48px,7vw,90px)}

/* ---------- Dati e occhiello dell'articolo: indice e pagina articolo ---------- */
.meta-articolo{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--inchiostro-morbido);
}
.meta-articolo .numero{
  font-family:var(--font-display);font-style:italic;font-size:1.05rem;
  letter-spacing:0;text-transform:none;color:var(--terracotta);
}
.occhiello-articolo{
  margin-top:14px;font-family:var(--font-display);font-style:italic;
  font-size:1.16rem;line-height:1.5;color:var(--salvia);
}

/* ---------- Indice del blog ----------
   Tutta la scheda porta all'articolo: il collegamento del titolo
   si allarga con ::after, cosi resta un solo link per scheda. */
.elenco-articoli{max-width:860px;border-top:1px solid var(--linea-forte)}
.elenco-articoli>li{border-bottom:1px solid var(--linea);scroll-margin-top:calc(var(--testata-ora) + 10px)}
.scheda-articolo{
  position:relative;display:grid;grid-template-columns:1fr auto;column-gap:clamp(20px,4vw,48px);
  align-items:center;padding-block:clamp(28px,4vw,40px);
}
.scheda-articolo>*:not(.scheda-freccia){grid-column:1}
.scheda-articolo h2{font-size:clamp(1.45rem,2.6vw,2rem);margin-top:12px;transition:color .2s var(--ease)}
.scheda-articolo h2 a::after{content:"";position:absolute;inset:0}
.scheda-articolo h2 a:focus-visible{outline:none}
.scheda-articolo:focus-within{outline:3px solid var(--salvia);outline-offset:4px;border-radius:4px}
.scheda-articolo .occhiello-articolo{margin-top:10px;font-size:1.06rem;max-width:58ch}
/* La freccia e solo un segno: il tocco passa al collegamento sotto.
   Al passaggio il transform la porterebbe sopra lo strato cliccabile del titolo. */
.scheda-freccia{
  grid-column:2;grid-row:1 / span 3;width:48px;height:48px;border-radius:50%;pointer-events:none;
  display:grid;place-items:center;border:1.5px solid var(--linea-forte);color:var(--salvia);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .25s var(--ease);
}
.scheda-freccia svg{width:18px;height:18px}
.scheda-articolo:hover h2{color:var(--salvia)}
.scheda-articolo:hover .scheda-freccia{background:var(--salvia);border-color:var(--salvia);color:var(--carta);transform:translateX(4px)}

/* ---------- Pagina articolo ---------- */
.articolo-testa h1{max-width:24ch;font-size:clamp(2.1rem,4.4vw,3.2rem);margin-top:16px}
.articolo-testa .meta-articolo{margin-top:22px}
.articolo-testa .occhiello-articolo{margin-top:18px;font-size:1.2rem;max-width:56ch}
.percorso ol{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.percorso li+li::before{content:"/";margin-right:10px;color:var(--inchiostro-morbido)}
.percorso a{color:var(--terracotta);display:inline-block;padding-block:8px}
.percorso a:hover{color:var(--salvia)}
.articoli{max-width:68ch}
.testo p{font-size:1.05rem;line-height:1.78;margin-bottom:1.05em}
.testo p:last-child{margin-bottom:0}
.testo.capolettera>p:first-child::first-letter{
  float:left;font-family:var(--font-display);font-weight:600;
  font-size:3.5em;line-height:.84;margin:.04em .09em 0 0;color:var(--salvia);
}

/* Articolo precedente e successivo */
.altri-articoli{padding-bottom:clamp(48px,7vw,90px)}
.altri-griglia{
  max-width:68ch;display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--linea-forte);
}
.altro-articolo{
  display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-radius:14px;
  background:var(--carta-alta);border:1px solid var(--linea);
  transition:border-color .2s var(--ease),transform .25s var(--ease);
}
.altro-articolo:hover{border-color:var(--salvia);transform:translateY(-2px)}
.altro-succ{grid-column:2;text-align:right}
.altro-succ .altro-etichetta{justify-content:flex-end}
.altro-etichetta{
  display:flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);
}
.altro-etichetta svg{width:15px;height:15px;flex:none}
.altro-titolo{font-family:var(--font-display);font-size:1.18rem;line-height:1.3;color:var(--salvia)}
.tutti-articoli{
  /* area da toccare di 44 px, come .servizio .vai */
  margin-top:20px;padding-block:12px;display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);
}
.tutti-articoli svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.tutti-articoli:hover svg{transform:translateX(-4px)}

/* ---------- Chiusura ---------- */
.chiusura{background:var(--salvia-fonda);color:rgba(255,255,255,.82);text-align:center}
.chiusura .interno{padding-block:clamp(54px,7vw,86px)}
.chiusura h2{color:#FFFFFF;font-size:clamp(1.7rem,3.2vw,2.5rem);max-width:20ch;margin-inline:auto}
.chiusura p{margin-top:14px;color:rgba(255,255,255,.80)}
.btn-chiaro{background:#FFFFFF;color:var(--salvia-fonda);margin-top:28px}
.btn-chiaro:hover{background:var(--periwinkle);transform:translateY(-2px)}
/* ---------- Pagine legali ---------- */
.legale{padding-top:calc(var(--testata) + clamp(36px,4vh,56px));padding-bottom:clamp(56px,8vw,96px)}
.legale .container{max-width:820px}
.legale h1{font-size:clamp(2rem,4.4vw,3rem);margin-top:18px}
.legale-guida{margin-top:16px;font-size:1.08rem;color:var(--inchiostro-morbido);max-width:60ch}
.legale-data{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--linea);
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-morbido);
}
.legale section{margin-top:clamp(34px,5vw,52px)}
.legale h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.legale h3{font-size:1.05rem;font-family:var(--font-body);font-weight:700;margin-top:24px;color:var(--inchiostro)}
.legale p{margin-top:14px;font-size:1rem;line-height:1.7;color:var(--inchiostro-morbido);max-width:70ch}
.legale p strong{color:var(--inchiostro)}
.legale a{font-weight:700;color:var(--salvia);border-bottom:1px solid var(--linea-forte)}
.legale a:hover{border-bottom-color:var(--salvia)}
.legale code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--salvia-velo);padding:2px 6px;border-radius:4px;color:var(--inchiostro);
}
.legale-elenco{margin-top:16px;max-width:70ch}
.legale-elenco li{
  position:relative;padding-left:20px;margin-top:12px;
  font-size:1rem;line-height:1.65;color:var(--inchiostro-morbido);
}
.legale-elenco li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--terracotta);
}
.legale-elenco li strong{color:var(--inchiostro)}
.legale-riquadro{
  background:var(--salvia-velo);border:1px solid var(--linea);
  border-radius:18px;padding:clamp(22px,3vw,32px);
}
.legale-riquadro h2{margin-top:0}
.legale-riquadro .btn{margin-top:18px}
.legale-esito{
  margin-top:16px;padding:12px 14px;background:var(--carta);
  border:1px solid var(--linea);border-radius:10px;
  font-size:.92rem;color:var(--inchiostro);
}
.legale-piccolo{margin-top:16px;font-size:.86rem}

/* ---------- Pagina 404 ---------- */
.errore{
  padding-top:calc(var(--testata) + clamp(48px,8vh,90px));
  padding-bottom:clamp(64px,9vw,120px);
  min-height:60vh;display:flex;align-items:center;
}
.errore .container{max-width:720px}
.errore-codice{
  font-family:var(--font-display);font-style:italic;font-size:clamp(3.4rem,10vw,5.6rem);
  /* terracotta come gli altri numeri del sito: il periwinkle
     su bianco stava a 1.56:1, sotto qualunque soglia leggibile */
  line-height:1;color:var(--terracotta);
}
.errore h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:10px}
.errore p{margin-top:18px;font-size:1.06rem;line-height:1.7;color:var(--inchiostro-morbido);max-width:56ch}
.errore-azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.errore-mappa{margin-top:44px;padding-top:26px;border-top:1px solid var(--linea)}
.errore-mappa h2{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--inchiostro-morbido)}
.errore-mappa ul{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:14px}
.errore-mappa a{font-weight:600;color:var(--salvia);border-bottom:1px solid var(--linea-forte)}
.errore-mappa a:hover{border-bottom-color:var(--salvia)}

/* ---------- Footer ---------- */
.fondo-pagina{border-top:1px solid var(--linea);background:var(--carta)}
.fondo-pagina .alto{padding-block:clamp(40px,6vw,64px);display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
.fondo-pagina .marchio .nome{font-size:1.05rem}
.fondo-pagina .alto p{margin-top:14px;font-size:.92rem;color:var(--inchiostro-morbido);max-width:32ch}
.fondo-pagina h4{font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);margin-bottom:14px}
.fondo-pagina .alto li{margin-bottom:9px}
.fondo-pagina .alto a{font-size:.94rem;font-weight:600;color:var(--inchiostro-morbido);transition:color .2s}
.fondo-pagina .alto a:hover{color:var(--inchiostro)}
.fondo-pagina .alto .email-testo{font-size:.94rem;font-weight:600;color:var(--inchiostro-morbido)}
.fondo-pagina .basso{
  border-top:1px solid var(--linea);padding-block:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.82rem;color:var(--inchiostro-morbido);
}
.fondo-pagina .basso a{margin-left:16px}
.fondo-pagina .identita p+p{margin-top:4px}
.fondo-pagina .identita a{margin-left:0;color:var(--salvia);border-bottom:1px solid var(--linea-forte)}
.fondo-pagina .basso a:hover{color:var(--inchiostro)}

/* ---------- Reveal ----------
   Riserva: se script.js non arriva, dopo 2,5 secondi l'animazione
   riserva-reveal rende visibile tutto. Quando lo script parte mette la
   classe js su <html> e spegne la riserva: da li decide lui. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--ritardo,0ms);animation:riserva-reveal 0s 2.5s forwards}
.js .reveal{animation:none}
.reveal.vista{opacity:1;transform:none}
@keyframes riserva-reveal{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .hero-griglia{grid-template-columns:1fr;gap:52px}
  .hero-figura{justify-self:center}
  .aree-testa{position:static}

  .servizi-griglia{grid-template-columns:1fr;max-width:560px}
  .chi-griglia{grid-template-columns:1fr}
  .chi-figura{margin-inline:auto}
  .contatti-griglia{grid-template-columns:1fr}
  .fondo-pagina .alto{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .nav-voci{
    position:fixed;inset:var(--testata-ora) 0 auto 0;background:var(--carta-alta);
    flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gutter) 22px;
    border-bottom:1px solid var(--linea);transform:translateY(-130%);visibility:hidden;
    transition:transform .35s var(--ease),visibility 0s linear .35s;
  }
  .nav-voci.aperto{transform:translateY(0);visibility:visible;transition:transform .35s var(--ease),visibility 0s}
  /* display:block, altrimenti il padding verticale non spinge la riga:
     i bersagli si sovrappongono e sono larghi quanto il testo */
  .nav-voci a{display:block;padding:14px 6px;border-bottom:1px solid var(--linea);border-radius:0;font-size:1.02rem}
  .nav-voci a[aria-current]{background:transparent;box-shadow:inset 3px 0 0 var(--salvia);padding-left:14px}
  .nav-cta .btn{display:none}
  .apri-menu{display:block}
  .hero h1{font-size:clamp(2.2rem,9vw,2.9rem)}
  /* prima schermata piu compatta: il telefono deve restare visibile senza scorrere */
  .hero-aree{margin-top:16px;gap:6px}
  .hero-aree a{min-height:32px;padding:4px 11px;font-size:.84rem}
  .hero-azioni{margin-top:22px}
  .hero-telefono{margin-top:12px}

  /* su schermo stretto il testo aperto sale sotto il numero */
  .voce-corpo{padding-left:4px}
  .hero-figura .cartellino{left:8px}
  .fondo-pagina .alto{grid-template-columns:1fr;gap:28px}
  /* bersagli tattili del pie di pagina: almeno 44 px di altezza */
  .fondo-pagina .alto li{margin-bottom:0;min-height:44px;display:flex;align-items:center}
  .fondo-pagina .alto li a{min-height:44px;display:inline-flex;align-items:center}
  /* area da toccare allargata con ::after (12 px sopra e sotto) senza spostare
     la sottolineatura; lo spazio fra le righe evita che le aree si sovrappongano */
  .errore-mappa ul{row-gap:24px}
  .errore-mappa a{position:relative}
  .errore-mappa a::after{content:"";position:absolute;inset:-12px 0}
  .fondo-pagina .basso a{display:inline-flex;align-items:center;min-height:44px}
  /* il collegamento dentro la riga di identita e testo corrente, non un bersaglio isolato */
  .fondo-pagina .identita a{display:inline;min-height:0}
  .primo-griglia{grid-template-columns:minmax(0,1fr)}
  /* su telefono la freccia si avvicina al bordo */
  .in-cima{right:16px;bottom:calc(16px + var(--alza, 0px))}

  /* blog */
  .blog-testata h1{font-size:clamp(2rem,9vw,2.7rem)}
  .testo p{font-size:1.02rem}
  .testo.capolettera>p:first-child::first-letter{font-size:3.1em}
  .scheda-freccia{width:40px;height:40px}
  .altri-griglia{grid-template-columns:1fr}
  .altro-succ{grid-column:1}
}

/* Reduced motion del pannello del menu. Sta in fondo al foglio perche
   deve sovrascrivere le regole .nav-voci della media query a 760px:
   le media query non aggiungono specificita, decide l'ordine. */
@media (prefers-reduced-motion:reduce){
  .nav-voci,.nav-voci.aperto{transition:visibility 0s}
  /* la freccia compare senza movimento */
  .in-cima,.in-cima.visibile{transform:none;transition:visibility 0s}
  /* la testata cambia misura senza animazione */
  .nav,.marchio img,.testata{transition:none}
  /* schede del blog: cambia il colore, niente spostamento */
  .scheda-freccia,.altro-articolo,.tutti-articoli svg{transition:none}
  .scheda-articolo:hover .scheda-freccia,.altro-articolo:hover,.tutti-articoli:hover svg{transform:none}
}