/* ============================================================
   STUDIO LEGALE PAOLA BALDUCCI — Foglio di stile
   ------------------------------------------------------------
   PALETTE (modificabile qui sotto):
   --avorio    : sfondo principale, bianco caldo
   --sabbia    : beige chiaro per sezioni alternate
   --lino      : beige di bordi e superfici
   --bronzo    : accento (linee, link, dettagli)
   --terra     : marroncino medio, testi secondari
   --seppia    : marrone scuro, testo principale
   ============================================================ */
:root{
  --avorio:#FBF8F3;
  --sabbia:#F1EAE0;
  --lino:#E3D9C9;
  --bronzo:#9A7B4F;
  --terra:#7C6B54;
  --seppia:#373026;
  --display:'Cormorant Garamond', Georgia, serif;
  --testo:'Jost', 'Segoe UI', sans-serif;
  --larghezza:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--testo);
  font-weight:300;
  color:var(--seppia);
  background:var(--avorio);
  line-height:1.7;
  font-size:17px;
}
img{max-width:100%;display:block}
a{color:var(--bronzo);text-decoration:none;transition:opacity .25s}
a:hover{opacity:.75}
a:focus-visible,button:focus-visible{outline:2px solid var(--bronzo);outline-offset:3px}

.contenitore{max-width:var(--larghezza);margin:0 auto;padding:0 28px}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.15;color:var(--seppia)}
h1{font-size:clamp(2.6rem,5.5vw,4.4rem);letter-spacing:.01em}
h2{font-size:clamp(1.9rem,3.5vw,2.8rem)}
h3{font-size:1.45rem}
.occhiello{
  font-family:var(--testo);font-size:.78rem;font-weight:400;
  letter-spacing:.32em;text-transform:uppercase;color:var(--bronzo);
  display:block;margin-bottom:1.1rem;
}
.corsivo{font-family:var(--display);font-style:italic;font-weight:500}
p+p{margin-top:1em}

/* ---------- Filo bronzo decorativo ---------- */
.filo{width:56px;height:1px;background:var(--bronzo);margin:1.6rem 0}
.filo.centro{margin-left:auto;margin-right:auto}

/* ---------- Testata ---------- */
.testata{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,243,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lino);
}
.testata-int{
  max-width:var(--larghezza);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;height:88px;
}
.marchio{display:flex;align-items:center;gap:14px;color:var(--seppia)}
.monogramma{
  width:46px;height:46px;flex:none;
  border:1px solid var(--bronzo);border-radius:23px 23px 0 0; /* arco */
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.15rem;color:var(--bronzo);
  letter-spacing:.05em;padding-top:3px;
}
.marchio-nome{font-family:var(--display);font-size:1.25rem;line-height:1.2}
.marchio-nome small{
  display:block;font-family:var(--testo);font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--terra);
}
nav.menu ul{list-style:none;display:flex;gap:2.1rem;align-items:center}
nav.menu a{
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--seppia);padding:6px 0;border-bottom:1px solid transparent;
}
nav.menu a:hover,nav.menu a.attivo{border-bottom-color:var(--bronzo);color:var(--bronzo);opacity:1}
/* Sottomenu "Lo Studio" */
.ha-sottomenu{position:relative}
.sottomenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--avorio);border:1px solid var(--lino);
  min-width:230px;padding:.6rem 0;display:none;flex-direction:column;gap:0;
  box-shadow:0 14px 30px rgba(55,48,38,.08);
}
.ha-sottomenu:hover .sottomenu,.ha-sottomenu:focus-within .sottomenu{display:flex}
.sottomenu a{display:block;padding:.6rem 1.3rem;border-bottom:none;white-space:nowrap}
/* Menu mobile */
.apri-menu{display:none;background:none;border:none;cursor:pointer;padding:8px}
.apri-menu span{display:block;width:26px;height:1.5px;background:var(--seppia);margin:6px 0;transition:.3s}

/* ---------- Eroe (home) ---------- */
.eroe{
  background:var(--sabbia);
  border-bottom:1px solid var(--lino);
  overflow:hidden;
}
.eroe-int{
  max-width:var(--larghezza);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;
  min-height:calc(100vh - 88px);padding-top:56px;padding-bottom:56px;
}
.eroe h1 .corsivo{color:var(--bronzo)}
.eroe p.sottotitolo{margin-top:1.6rem;max-width:46ch;color:var(--terra);font-size:1.05rem}
.eroe-azioni{margin-top:2.4rem;display:flex;gap:1.2rem;flex-wrap:wrap}

/* Cornice ad arco per le foto — la firma del sito */
.arco{
  border-radius:999px 999px 0 0;
  overflow:hidden;
  border:1px solid var(--lino);
  background:var(--lino);
  box-shadow:0 24px 60px rgba(55,48,38,.10);
}
.arco img{width:100%;height:100%;object-fit:cover}
.eroe .arco{aspect-ratio:4/5;max-width:440px;justify-self:end}

/* ---------- Bottoni ---------- */
.bottone{
  display:inline-block;padding:.95rem 2.2rem;
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--seppia);color:var(--seppia);
  transition:all .3s;background:transparent;
}
.bottone:hover{background:var(--seppia);color:var(--avorio);opacity:1}
.bottone.pieno{background:var(--seppia);color:var(--avorio)}
.bottone.pieno:hover{background:var(--bronzo);border-color:var(--bronzo)}

/* ---------- Sezioni ---------- */
.sezione{padding:110px 0}
.sezione.beige{background:var(--sabbia);border-top:1px solid var(--lino);border-bottom:1px solid var(--lino)}
.testa-sezione{max-width:640px;margin-bottom:3.4rem}
.testa-sezione.centro{margin-left:auto;margin-right:auto;text-align:center}

/* Griglie */
.griglia-2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.griglia-3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.griglia-4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}

/* ---------- Schede aree di attività ---------- */
.scheda-area{
  background:var(--avorio);border:1px solid var(--lino);
  padding:2.4rem 2rem;transition:transform .3s,box-shadow .3s;
}
.beige .scheda-area{background:var(--avorio)}
.sezione:not(.beige) .scheda-area{background:var(--sabbia)}
.scheda-area:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(55,48,38,.08)}
.scheda-area .numero-romano{
  font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--bronzo);
  display:block;margin-bottom:.9rem;letter-spacing:.08em;
}
.scheda-area h3{margin-bottom:.7rem;font-size:1.3rem}
.scheda-area p{font-size:.95rem;color:var(--terra)}

/* ---------- Professionisti ---------- */
.profilo-primo{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start;
  padding:3rem 0 4.5rem;border-bottom:1px solid var(--lino);margin-bottom:4.5rem;
}
.profilo-primo .arco{aspect-ratio:4/5;max-width:400px}
.ruolo{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bronzo);margin:.5rem 0 1.4rem}
.scheda-avvocato{text-align:center}
.scheda-avvocato .arco{aspect-ratio:4/5;margin-bottom:1.5rem}
.scheda-avvocato h3{font-size:1.5rem}
.scheda-avvocato .ruolo{margin-bottom:.9rem}
.scheda-avvocato p{font-size:.92rem;color:var(--terra);text-align:left}

/* Elenco tipografico dei professionisti: nomi in evidenza, righe sottili */
.lista-prof{border-top:1px solid var(--lino);max-width:860px;margin:0 auto}
.riga-prof{
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  padding:1.7rem .6rem;border-bottom:1px solid var(--lino);
  transition:padding-left .3s, background .3s;
}
.riga-prof:hover{padding-left:1.6rem;background:rgba(154,123,79,.05)}
.riga-prof h3{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:500;margin:0}
.riga-prof .ruolo{margin:0;white-space:nowrap}
@media (max-width:680px){
  .riga-prof{flex-direction:column;gap:.2rem;align-items:flex-start}
}

/* ---------- Pubblicazioni ---------- */
.pubblicazione{
  display:grid;grid-template-columns:110px 1fr;gap:2.2rem;align-items:baseline;
  padding:2.2rem 0;border-bottom:1px solid var(--lino);
}
.pubblicazione:first-of-type{border-top:1px solid var(--lino)}
.pubblicazione .anno{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--bronzo)}
.pubblicazione h3{font-size:1.35rem;margin-bottom:.3rem}
.pubblicazione .dettaglio{font-size:.9rem;color:var(--terra);letter-spacing:.04em}
.pubblicazione p.descrizione{margin-top:.7rem;font-size:.95rem;color:var(--terra)}

/* ---------- Contatti ---------- */
.blocco-contatto{border:1px solid var(--lino);background:var(--avorio);padding:2.4rem 2.2rem}
.blocco-contatto h3{margin-bottom:1rem}
.blocco-contatto p{color:var(--terra);font-size:.98rem}
.etichetta-contatto{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bronzo);display:block;margin-top:1.4rem;margin-bottom:.2rem;
}
.mappa iframe{width:100%;height:420px;border:1px solid var(--lino);filter:sepia(.25) saturate(.75)}

/* ---------- Citazione ---------- */
.citazione{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.4;color:var(--seppia);
  max-width:820px;margin:0 auto;text-align:center;
}
.citazione::before{content:"“";color:var(--bronzo)}
.citazione::after{content:"”";color:var(--bronzo)}

/* ---------- Piè di pagina ---------- */
.pie{
  background:var(--seppia);color:#CFC5B6;padding:70px 0 36px;margin-top:0;
}
.pie a{color:#E8DFD0}
.pie .griglia-3{gap:48px;align-items:start}
.pie h4{color:#F5EFE5;font-size:1.25rem;margin-bottom:1rem}
.pie p,.pie li{font-size:.9rem}
.pie ul{list-style:none}
.pie li{margin:.45rem 0}
.pie .filo{background:#5E5442}
.colofone{
  border-top:1px solid #4A4234;margin-top:52px;padding-top:26px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:.78rem;letter-spacing:.08em;color:#9C9282;
}

/* ---------- Intestazione pagine interne ---------- */
.intro-pagina{
  background:var(--sabbia);border-bottom:1px solid var(--lino);
  padding:90px 0 70px;text-align:center;
}
.intro-pagina p{max-width:60ch;margin:1.2rem auto 0;color:var(--terra)}
.briciole{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);margin-bottom:1.4rem}
.briciole a{color:var(--terra)}
.briciole span{color:var(--bronzo)}

/* ---------- Animazione ingresso ---------- */
.rivela{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.rivela.visibile{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rivela{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .eroe-int{grid-template-columns:1fr;min-height:auto;gap:44px}
  .eroe .arco{justify-self:center;max-width:360px}
  .griglia-2,.profilo-primo{grid-template-columns:1fr;gap:44px}
  .griglia-3,.griglia-4{grid-template-columns:1fr 1fr}
  .profilo-primo .arco{margin:0 auto}
}
@media (max-width:680px){
  .griglia-3,.griglia-4{grid-template-columns:1fr}
  .sezione{padding:76px 0}
  .pubblicazione{grid-template-columns:1fr;gap:.4rem}
  /* menu mobile */
  .apri-menu{display:block}
  nav.menu{
    position:fixed;inset:88px 0 auto 0;background:var(--avorio);
    border-bottom:1px solid var(--lino);display:none;padding:1.4rem 28px 2rem;
  }
  nav.menu.aperto{display:block}
  nav.menu ul{flex-direction:column;gap:1.1rem;align-items:flex-start}
  .sottomenu{position:static;transform:none;display:flex;border:none;box-shadow:none;padding:.3rem 0 0 1rem}
}