/* ============================================================
   Giuseppe Minnici, sito vetrina
   Registro: advisory senior. Pietra chiara, blu notte, serif.
   ============================================================ */

:root{
  --pietra:#F4F4F1;
  --pietra-2:#EBEBE5;
  --bianco:#FCFCFA;
  --inchiostro:#14202E;
  --blu:#1B3A5C;
  --blu-scuro:#132B44;
  --blu-tenue:#5C7791;
  --grigio:#6E7178;
  --grigio-chiaro:#A8ABB1;
  --linea:#D9D9D2;
  --linea-scura:#2C4560;

  --titolo:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --testo:"Source Serif 4",Georgia,serif;
  --etichetta:"Archivo","Helvetica Neue",Arial,sans-serif;

  --max:1160px;
  --pad:clamp(1.25rem,5vw,3.5rem);
  --sez-y:clamp(4rem,7.5vw,6.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--pietra);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:clamp(1.02rem,.98rem + .2vw,1.1rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blu);color:#fff;padding:.7rem 1rem;font-family:var(--etichetta);font-size:.8rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px}

/* ---------- fascetta bozza (temporanea) ---------- */
.bozza{background:var(--pietra-2);border-bottom:1px solid var(--linea)}
.bozza-in{padding-block:.6rem}
.bozza p{
  margin:0;font-family:var(--etichetta);font-size:.73rem;line-height:1.55;
  color:var(--grigio);max-width:90ch;
}
.bozza strong{color:var(--blu);font-weight:600}

/* ---------- barra ---------- */
.barra{
  position:sticky;top:0;z-index:50;
  background:rgba(244,244,241,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.barra-in{
  max-width:var(--max);margin-inline:auto;padding:0 var(--pad);
  height:66px;display:flex;align-items:center;gap:2rem;
}
.barra-nome{
  font-family:var(--titolo);font-size:1.12rem;letter-spacing:.01em;
  color:var(--inchiostro);text-decoration:none;white-space:nowrap;
}
.barra-nav{display:flex;gap:1.8rem;margin-left:auto}
.barra-nav a{
  font-family:var(--etichetta);font-size:.78rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grigio);
  text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.barra-nav a:hover{color:var(--blu);border-color:var(--blu)}
.barra-cta{
  font-family:var(--etichetta);font-size:.78rem;font-weight:500;
  letter-spacing:.06em;color:var(--bianco);background:var(--blu);
  padding:.55rem 1.1rem;text-decoration:none;white-space:nowrap;
  transition:background .2s;
}
.barra-cta:hover{background:var(--blu-scuro)}
@media(max-width:860px){
  .barra-nav{display:none}
  .barra-cta{margin-left:auto}
}

/* ---------- elementi comuni ---------- */
.eyebrow{
  font-family:var(--etichetta);font-size:.73rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blu);
  margin:0 0 1.5rem;
}
.eyebrow--chiaro{color:var(--blu-tenue)}

.h2{
  font-family:var(--titolo);font-weight:400;
  font-size:clamp(1.7rem,1.15rem + 2.1vw,2.8rem);
  line-height:1.2;letter-spacing:-.005em;
  margin:0 0 2rem;max-width:21ch;
}
.h2--chiaro{color:var(--bianco);max-width:23ch}

.testo{margin:0 0 1.25rem;color:#2E3A47;max-width:60ch}
.testo--chiaro{color:#BFCAD6}
.testo--intro{margin-bottom:3rem}

.btn{
  display:inline-block;font-family:var(--etichetta);font-size:.84rem;
  font-weight:500;letter-spacing:.05em;text-decoration:none;
  padding:.9rem 1.8rem;border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.btn--blu{background:var(--blu);color:var(--bianco)}
.btn--blu:hover{background:var(--blu-scuro)}
.btn--linea{border-color:var(--linea);color:var(--inchiostro)}
.btn--linea:hover{border-color:var(--blu);color:var(--blu)}
.btn--pieno{width:100%;cursor:pointer;padding:1.05rem;font-size:.88rem}

/* ---------- apertura ---------- */
.apertura{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem)}
.apertura-in{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.nome{
  font-family:var(--titolo);font-weight:400;
  font-size:clamp(2.7rem,1.7rem + 3.7vw,4.6rem);
  line-height:1.02;letter-spacing:-.012em;
  margin:0 0 1.5rem;
}
.ruolo{
  font-family:var(--etichetta);font-size:.8rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blu);
  margin:0 0 2rem;padding-top:1.5rem;border-top:1px solid var(--linea);
}
.occhiello{
  font-size:clamp(1.12rem,1.02rem + .45vw,1.38rem);
  line-height:1.6;color:#2E3A47;max-width:40ch;margin:0 0 2.4rem;
  font-weight:300;
}
.apertura-azioni{display:flex;flex-wrap:wrap;gap:.9rem}

.ritratto{margin:0;position:relative}
.ritratto img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;
  filter:grayscale(1) contrast(1.04);
}
.ritratto figcaption{
  font-family:var(--etichetta);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grigio);margin-top:.9rem;
}
/* Senza foto: una cornice che sembra voluta, non un buco. */
.ritratto--vuoto img{display:none}
.ritratto--vuoto::before{
  content:"";display:block;aspect-ratio:4/5;
  background:
    linear-gradient(var(--blu) 0 0) top left / 100% 2px no-repeat,
    linear-gradient(180deg,var(--pietra-2),#E3E3DC);
  border:1px solid var(--linea);
}
.ritratto--vuoto::after{
  content:"G M";
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--titolo);font-size:clamp(3rem,6vw,4.5rem);
  letter-spacing:.14em;color:#CFCFC7;
}
@media(max-width:880px){
  .apertura-in{grid-template-columns:1fr}
  .ritratto{max-width:22rem}
}

/* ---------- cifre ---------- */
.cifre{border-block:1px solid var(--linea);background:var(--bianco)}
.cifre-in{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,3rem);padding-block:clamp(2.5rem,5vw,3.5rem);
}
.cifra dt{
  font-family:var(--etichetta);font-size:.73rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);
  margin-bottom:.6rem;
}
.cifra dd{
  margin:0;font-family:var(--titolo);
  font-size:clamp(2rem,1.3rem + 2.3vw,3rem);line-height:1;color:var(--blu);
}
.cifra-nota{
  display:block;font-family:var(--testo);font-size:.92rem;
  color:var(--grigio);margin-top:.7rem;line-height:1.5;
}
@media(max-width:760px){
  .cifre-in{grid-template-columns:1fr;gap:2rem}
}

/* ---------- sezioni ---------- */
.sez{padding-block:var(--sez-y);scroll-margin-top:66px}
.sez--pietra{background:var(--pietra)}
.sez--bianco{background:var(--bianco)}
.sez--blu{background:var(--blu-scuro);color:var(--bianco)}

.due-col{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));
  gap:clamp(1.5rem,4vw,3.5rem);
}

/* ---------- formule ---------- */
.griglia-formule{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.card{display:flex;flex-direction:column;padding-top:1.6rem;border-top:2px solid var(--blu)}
.card-tit{
  font-family:var(--titolo);font-weight:400;font-size:1.42rem;
  line-height:1.2;margin:0 0 .9rem;
}
.card-testo{margin:0 0 1.8rem;font-size:.99rem;color:#3B4651;flex:1}
.card-dati{margin:0;display:grid;gap:.55rem}
.card-dati div{display:grid;grid-template-columns:5.6rem 1fr;gap:.8rem;align-items:baseline}
.card-dati dt{
  font-family:var(--etichetta);font-size:.7rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grigio);
}
.card-dati dd{margin:0;font-size:.94rem;color:var(--inchiostro)}

/* ---------- aree ---------- */
.griglia-aree{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,3.5rem);
}
.area-tit{
  font-family:var(--titolo);font-weight:400;font-size:1.22rem;
  margin:0 0 .6rem;padding-top:1.1rem;border-top:1px solid var(--linea);
}
.area-testo{margin:0;font-size:.95rem;color:#3B4651;line-height:1.62}
@media(max-width:900px){.griglia-aree{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.griglia-aree{grid-template-columns:1fr}}

/* ---------- voce in prima persona ---------- */
.voce{margin:0 auto;max-width:44rem;text-align:center}
.voce::before{
  content:"";display:block;width:56px;height:1px;
  background:var(--blu-tenue);margin:0 auto 2.4rem;
}
.voce p{
  font-family:var(--titolo);font-weight:400;
  font-size:clamp(1.34rem,1.05rem + 1.15vw,2.05rem);
  line-height:1.46;margin:0 0 2rem;color:var(--bianco);
  text-wrap:balance;
}
.voce footer{
  font-family:var(--etichetta);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blu-tenue);
}

/* ---------- percorso ---------- */
.percorso{list-style:none;margin:0;padding:0}
.tappa{
  display:grid;grid-template-columns:9rem 1fr;gap:clamp(1rem,3vw,2.5rem);
  padding:2.2rem 0;border-top:1px solid var(--linea);
}
.tappa:last-child{border-bottom:1px solid var(--linea)}
.tappa-quando{
  font-family:var(--etichetta);font-size:.73rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grigio);
  margin:.55rem 0 0;
}
.tappa-tit{
  font-family:var(--titolo);font-weight:400;font-size:1.48rem;
  line-height:1.2;margin:0 0 .35rem;
}
.tappa-ruolo{
  font-family:var(--etichetta);font-size:.79rem;font-weight:500;
  letter-spacing:.05em;color:var(--blu);margin:0 0 1rem;
}
.tappa-testo{margin:0;font-size:.99rem;color:#3B4651;max-width:58ch}
@media(max-width:700px){.tappa{grid-template-columns:1fr;gap:.5rem}}
.percorso--due{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));column-gap:clamp(2rem,5vw,4.5rem);border-bottom:1px solid var(--linea)}
.percorso--due .tappa{grid-template-columns:1fr;gap:.5rem;align-content:start}
.percorso--due .tappa:last-child{border-bottom:0}

.opere{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.3rem}
.opere li{max-width:58ch}
.opere h4{
  font-family:var(--etichetta);font-weight:600;font-size:.86rem;
  letter-spacing:.04em;margin:0 0 .3rem;color:var(--inchiostro);
}
.opere p{margin:0;font-size:.94rem;color:var(--grigio);line-height:1.62}

/* ---------- libri ---------- */
.libri{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));column-gap:clamp(2rem,5vw,4.5rem)}
.libro{
  display:grid;grid-template-columns:6rem minmax(0,1fr);
  gap:clamp(.8rem,2.5vw,2.5rem);
  padding:2.2rem 0;border-top:1px solid var(--linea);
}
.libri{border-bottom:1px solid var(--linea)}
.libro-anno{
  font-family:var(--titolo);font-size:1.25rem;color:var(--blu);margin:.1rem 0 0;
}
.libro-corpo{max-width:54ch}
.libro-tit{
  font-family:var(--titolo);font-weight:400;
  font-size:clamp(1.3rem,1.15rem + .55vw,1.62rem);
  line-height:1.22;margin:0 0 .4rem;
}
.libro-sott{font-style:italic;font-size:.98rem;color:#3B4651;margin:0 0 .9rem}
.libro-nota{font-size:.95rem;color:var(--grigio);line-height:1.65;margin:0}
.libro-dati{
  font-family:var(--etichetta);font-size:.72rem;letter-spacing:.08em;
  color:var(--grigio-chiaro);margin:.9rem 0 0;
}
@media(max-width:700px){.libro{grid-template-columns:1fr;gap:.5rem}}

/* ---------- contatto ---------- */
.contatto-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
.contatto-tel{margin:2rem 0 0;font-family:var(--titolo);font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:.02em}
.contatto-tel a{color:var(--bianco);text-decoration:none;border-bottom:1px solid var(--blu-tenue);padding-bottom:.1em}
.contatto-tel a:hover{border-color:var(--bianco)}
.contatto-wa{margin:.9rem 0 0;font-family:var(--etichetta);font-size:.8rem;letter-spacing:.06em}
.contatto-wa a{color:#BFCAD6;text-decoration:none}
.contatto-wa a:hover{color:var(--bianco)}
.contatto-dati{margin:2.2rem 0 0;display:grid;gap:.9rem;max-width:26rem}
.contatto-dati div{
  display:grid;grid-template-columns:10rem 1fr;gap:1rem;align-items:baseline;
  padding-top:.9rem;border-top:1px solid var(--linea-scura);
}
.contatto-dati dt{
  font-family:var(--etichetta);font-size:.71rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blu-tenue);
}
.contatto-dati dd{margin:0;font-size:.97rem;color:var(--bianco)}

.modulo{background:rgba(255,255,255,.04);border:1px solid var(--linea-scura);padding:clamp(1.6rem,3vw,2.4rem)}
.campo{margin-bottom:1.2rem}
.campo-obbl{font-weight:400;text-transform:none;letter-spacing:0;color:var(--blu-tenue);margin-left:.4em}
.campo label{
  display:block;font-family:var(--etichetta);font-size:.71rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blu-tenue);margin-bottom:.5rem;
}
.campo input,.campo textarea{
  width:100%;font-family:var(--testo);font-size:1rem;color:var(--bianco);
  background:rgba(0,0,0,.18);border:1px solid var(--linea-scura);
  padding:.75rem .85rem;border-radius:0;transition:border-color .2s;
}
.campo textarea{resize:vertical;min-height:7rem}
.campo input:focus,.campo textarea:focus{border-color:var(--blu-tenue);outline:none}

.consenso{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;margin:1.6rem 0 1.5rem}
.consenso input{width:1.05rem;height:1.05rem;margin:.28rem 0 0;accent-color:var(--blu-tenue);cursor:pointer}
.consenso label{font-size:.86rem;line-height:1.55;color:#BFCAD6;cursor:pointer}
.consenso a{color:var(--bianco)}

.modulo-esito{font-family:var(--etichetta);font-size:.83rem;margin:1.1rem 0 0;min-height:1.2em}
.modulo-esito.ok{color:#9FD8B4}
.modulo-esito.ko{color:#E8A79A}
.modulo-nota{font-size:.83rem;color:var(--blu-tenue);margin:1.1rem 0 0}
@media(max-width:900px){.contatto-in{grid-template-columns:1fr}}

/* ---------- pagina di testo (privacy) ---------- */
.prosa{max-width:42rem}
.prosa .h2{max-width:24ch}
.prosa h2{
  font-family:var(--titolo);font-weight:400;font-size:1.32rem;
  margin:2.8rem 0 .8rem;padding-top:1.1rem;border-top:1px solid var(--linea);
}
.prosa p{margin:0 0 1.1rem;color:#2E3A47}
.prosa-data{font-family:var(--etichetta);font-size:.78rem;color:var(--grigio);margin-bottom:2.2rem}
.prosa-torna{margin-top:3.5rem;font-family:var(--etichetta);font-size:.83rem}
.prosa-torna a{color:var(--blu);text-decoration:none}
.prosa-torna a:hover{text-decoration:underline}
.mono{font-family:var(--etichetta);font-size:.92em}

/* ---------- piede ---------- */
.pie{background:var(--pietra);border-top:1px solid var(--linea);padding-block:2.2rem}
.pie-in{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between}
.pie p{margin:0;font-family:var(--etichetta);font-size:.76rem;color:var(--grigio)}
.pie-min a{color:var(--blu)}

/* ---------- movimento ---------- */
.anim{opacity:0;animation:sali .8s cubic-bezier(.22,.7,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes sali{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:70ms}
.reveal:nth-child(3){transition-delay:140ms}
.reveal:nth-child(4){transition-delay:210ms}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim{opacity:1;animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}