/* =========================================================
   STILE DEL SITO — Dott. Giuseppe D'Avino
   ---------------------------------------------------------
   ✏️ Per cambiare colori o caratteri di tutto il sito basta
   modificare i valori nella sezione :root qui sotto.
   Il resto del file normalmente non va toccato.
   ========================================================= */

/* Layout: pagine a colonna unica su fondo avorio con onde leggere fisse;
   sezioni alternate carta/crema semitrasparenti, testo a sinistra, immagini a destra. */
:root {
  /* Colori presi dal logo */
  --carta:        #FBF6EF;  /* sfondo principale, avorio */
  --crema:        #F3E7D7;  /* sezioni alternate */
  --inchiostro:   #2D2320;  /* testo principale, bruno scuro */
  --tenue:        #6B5A50;  /* testo secondario */
  --loto:         #B71F2A;  /* rosso del loto (accento) */
  --loto-chiaro:  #E46A60;  /* rosso chiaro */
  --ocra:         #B07A45;  /* lineetta dorata del logo */
  --linea:        #E3D3BF;  /* bordi e divisori */
  --bianco:       #FFFDF9;
  --notte:        #2D2320;  /* piè di pagina */

  /* Caratteri */
  --f-titoli: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-testo:  "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Scala tipografica */
  --t-xs: 0.78rem;
  --t-s:  0.93rem;
  --t-m:  1.06rem;
  --t-l:  1.32rem;
  --t-xl: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);
  --t-xxl: clamp(2.3rem, 1.4rem + 3.6vw, 3.9rem);

  --larghezza: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --raggio: 8px;
  --ombra: 0 1px 2px rgba(45,35,32,.05), 0 12px 32px -12px rgba(45,35,32,.18);
  color-scheme: light;
}

/* ---------- Base ---------- */
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }
body {
  margin: 0;
  background-color: var(--carta);
  color: var(--inchiostro);
  font-family: var(--f-testo);
  font-size: var(--t-m);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
/* Sfondo decorativo fisso (onde e petali del logo) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/sfondo.svg") 0% 0% / max(120vw, 192vh) auto no-repeat;
  animation: deriva 40s ease-in-out infinite alternate;
}
@keyframes deriva { from { background-position: 0% 0%; } to { background-position: 100% 60%; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--loto); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--inchiostro); }
:focus-visible { outline: 2px solid var(--loto); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-titoli); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; color: var(--inchiostro); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); font-weight: 500; }
p { margin: 0; }
.prosa { display: grid; gap: 1.1rem; max-width: 40rem; }
.prosa p { text-wrap: pretty; }
.prosa ul { display: grid; gap: .4rem; padding-left: 1.2rem; margin: 0; }
.salta { position: absolute; left: -999px; }
.salta:focus { left: 1rem; top: 1rem; background: var(--bianco); padding: .5rem 1rem; z-index: 100; }

.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: var(--gutter); }
.sezione { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.sezione--crema { background: color-mix(in srgb, var(--crema) 82%, transparent); }
.sezione--bianca { background: color-mix(in srgb, var(--bianco) 75%, transparent); }

.etichetta { font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--loto); font-weight: 600; }
.trattino { width: 3.5rem; height: 1px; background: var(--ocra); border: 0; margin: 0; }
.intestazione-sezione { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 42rem; }
.intestazione-sezione p:not(.etichetta) { color: var(--tenue); }
.intestazione-riga { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.intestazione-riga .intestazione-sezione { margin-bottom: 0; }

/* Link con freccia animata */
.freccia { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--t-s); text-decoration: none; color: var(--loto); }
.freccia::after { content: "→"; transition: transform .25s ease; }
.freccia:hover { color: var(--inchiostro); }
.freccia:hover::after { transform: translateX(5px); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-testo); font-size: var(--t-s); font-weight: 600; letter-spacing: .02em;
  padding: .9rem 1.6rem; border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--loto); transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--pieno { background: var(--loto); color: var(--bianco); box-shadow: 0 10px 24px -12px rgba(183,31,42,.7); }
.btn--pieno:hover { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--bianco); }
.btn--vuoto { background: transparent; color: var(--loto); }
.btn--vuoto:hover { background: var(--loto); color: var(--bianco); }

/* ---------- Testata ---------- */
.testata {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--carta) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
.testata.scorrimento { border-bottom-color: var(--linea); box-shadow: 0 6px 24px -18px rgba(45,35,32,.5); }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; transition: padding .3s; }
.testata.scorrimento .contenitore { padding-block: .55rem; }
.marchio { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--inchiostro); }
.marchio img { width: 44px; height: auto; transition: transform .6s ease; }
.marchio:hover img { transform: rotate(-8deg) scale(1.06); }
.marchio span { display: grid; line-height: 1.2; white-space: nowrap; }
.marchio strong { font-family: var(--f-titoli); font-weight: 400; font-size: 1.2rem; }
.marchio small { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--loto); }
.menu { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.8rem); }
.menu a { white-space: nowrap; }
.menu a:not(.btn) { color: var(--inchiostro); text-decoration: none; font-size: var(--t-s); position: relative; padding-block: .3rem; }
.menu a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--loto); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.menu a:not(.btn):hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--loto); }
.menu .btn { padding: .6rem 1.2rem; }
.apri-menu { display: none; background: none; border: 1px solid var(--linea); border-radius: 999px; padding: .5rem 1rem; font: inherit; font-size: var(--t-s); color: var(--inchiostro); cursor: pointer; }

@media (max-width: 1000px) {
  .apri-menu { display: inline-block; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--carta); border-bottom: 1px solid var(--linea);
    padding: .5rem var(--gutter) 1.4rem; box-shadow: 0 20px 30px -20px rgba(45,35,32,.35);
  }
  .menu:not(.aperto) { display: none; }
  .menu a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--linea); font-size: var(--t-m); }
  .menu a:not(.btn)::after { display: none; }
  .menu .btn { margin-top: 1rem; }
}

/* ---------- Apertura (home) ---------- */
.apertura { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.apertura .contenitore { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; z-index: 2; }
.apertura-testo { display: grid; gap: 1.5rem; min-width: 0; }
.apertura h1 { font-size: var(--t-xxl); font-weight: 300; letter-spacing: -.015em; }
.apertura h1 em { font-style: italic; color: var(--loto); }
.apertura .sottotitolo { font-size: var(--t-l); line-height: 1.5; color: var(--tenue); max-width: 32rem; font-family: var(--f-titoli); }
.azioni { display: flex; flex-wrap: wrap; gap: .8rem; }
.note { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: var(--t-s); color: var(--tenue); padding: 0; margin: 0; list-style: none; }
.note li::before { content: "·"; color: var(--ocra); margin-right: .5rem; font-weight: 700; }
.apertura-figura { position: relative; min-width: 0; aspect-ratio: 1 / .82; display: grid; place-items: center; }
.apertura-figura .loto { width: min(78%, 420px); position: relative; z-index: 2; animation: respiro 8s ease-in-out infinite; transform-origin: 50% 85%; filter: drop-shadow(0 18px 30px rgba(183,31,42,.18)); }
.onde { position: absolute; inset: 5% -30% 5% -10%; width: 140%; height: 90%; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%); mask-image: linear-gradient(90deg, transparent, #000 25%); }
.onde path { fill: none; stroke: var(--loto-chiaro); stroke-linecap: round; opacity: .22; stroke-dasharray: 14 10; animation: scorre 18s linear infinite; }
.onde path:nth-child(2) { animation-duration: 26s; opacity: .16; stroke-dasharray: none; }
.onde path:nth-child(3) { animation-duration: 22s; animation-direction: reverse; }
@keyframes scorre { to { stroke-dashoffset: -480; } }
@keyframes respiro { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.03) rotate(-1deg); } }
/* tela dei petali animati: copre tutta l'apertura */
.petali { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* Comparsa iniziale dell'apertura */
.apertura-testo > * { animation: sale .9s cubic-bezier(.2,.7,.2,1) both; }
.apertura-testo > *:nth-child(2) { animation-delay: .08s; }
.apertura-testo > *:nth-child(3) { animation-delay: .16s; }
.apertura-testo > *:nth-child(4) { animation-delay: .24s; }
.apertura-testo > *:nth-child(5) { animation-delay: .32s; }
@keyframes sale { from { opacity: .001; transform: translateY(18px); } }

/* Intestazione delle pagine interne */
.testa-pagina { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); position: relative; }
.testa-pagina .contenitore { display: grid; gap: 1.1rem; }
.testa-pagina h1 { font-size: var(--t-xxl); font-weight: 300; max-width: 22ch; letter-spacing: -.01em; }
.testa-pagina h1 em { font-style: italic; color: var(--loto); }
.testa-pagina .sottotitolo { font-family: var(--f-titoli); font-size: var(--t-l); color: var(--tenue); max-width: 40rem; line-height: 1.5; }
.briciole { font-size: var(--t-xs); color: var(--tenue); }
.briciole a { color: var(--tenue); }
.testa-pagina > .contenitore > * { animation: sale .8s cubic-bezier(.2,.7,.2,1) both; }
.testa-pagina > .contenitore > *:nth-child(2) { animation-delay: .06s; }
.testa-pagina > .contenitore > *:nth-child(3) { animation-delay: .12s; }
.testa-pagina > .contenitore > *:nth-child(4) { animation-delay: .18s; }

/* ---------- Citazione ---------- */
.citazione { margin: 0; padding-block: clamp(3rem, 6vw, 4.5rem); background: color-mix(in srgb, var(--bianco) 80%, transparent); border-block: 1px solid var(--linea); }
.citazione .contenitore { display: grid; gap: 1.3rem; justify-items: center; text-align: center; }
.citazione blockquote { margin: 0; font-family: var(--f-titoli); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); line-height: 1.45; max-width: 46rem; }

/* ---------- Benvenuto (home) ---------- */
.benvenuto { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.ritratto { margin: 0; display: grid; gap: .8rem; }
.ritratto img { border-radius: var(--raggio); aspect-ratio: 4/5; object-fit: cover; width: 100%; box-shadow: var(--ombra); }
.ritratto figcaption { font-size: var(--t-xs); color: var(--tenue); }
.cornice { position: relative; }
.cornice::before { content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; border: 1px solid var(--ocra); border-radius: var(--raggio); opacity: .5; z-index: -1; transition: inset .5s ease; }
.cornice:hover::before { inset: .7rem -.7rem -.7rem .7rem; }

/* ---------- Riquadri ambiti (home) ---------- */
.riquadri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.riquadro-link {
  display: grid; gap: .8rem; align-content: start; padding: 1.6rem 1.4rem 1.4rem; min-height: 15rem;
  background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio);
  text-decoration: none; color: var(--inchiostro); position: relative; overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s;
}
.riquadro-link::after { content: ""; position: absolute; right: -2.5rem; bottom: -2.5rem; width: 7rem; height: 3.5rem; border-radius: 100% 0; background: linear-gradient(135deg, var(--loto-chiaro), var(--loto)); opacity: .08; transform: rotate(-30deg); transition: opacity .35s, transform .5s; }
.riquadro-link:hover { transform: translateY(-6px); box-shadow: var(--ombra); border-color: var(--loto-chiaro); color: var(--inchiostro); }
.riquadro-link:hover::after { opacity: .22; transform: rotate(-12deg) translate(-.6rem,-.4rem); }
.riquadro-link h3 { font-size: 1.3rem; }
.riquadro-link p { color: var(--tenue); font-size: var(--t-s); }
.riquadro-link { grid-template-rows: auto auto 1fr auto; }
.riquadro-link .freccia { align-self: end; }
.petalo-icona { width: 1.6rem; height: .8rem; border-radius: 100% 0; background: linear-gradient(135deg, var(--loto-chiaro), var(--loto)); transform: rotate(-25deg); }

/* ---------- Passi (sequenza reale) ---------- */
.passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding: 0; margin: 0; list-style: none; counter-reset: passo; position: relative; }
.passi::before { content: ""; position: absolute; top: 1.3rem; left: 1.5rem; right: 1.5rem; height: 1px; background: var(--linea); }
.passi li { display: grid; gap: .6rem; align-content: start; counter-increment: passo; position: relative; }
.passi li::before { content: counter(passo); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--carta); border: 1px solid var(--loto-chiaro); font-family: var(--f-titoli); font-size: 1.25rem; color: var(--loto); position: relative; transition: background .3s, color .3s; }
.passi li:hover::before { background: var(--loto); color: var(--bianco); }
.passi h3 { font-size: 1.15rem; }
.passi p { color: var(--tenue); font-size: var(--t-s); }

/* ---------- Striscia studio (home) ---------- */
.striscia { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .8rem; }
.striscia img { width: 100%; height: clamp(14rem, 26vw, 20rem); object-fit: cover; border-radius: var(--raggio); transition: transform .6s ease; }
.striscia a { overflow: hidden; border-radius: var(--raggio); display: block; }
.striscia a:hover img { transform: scale(1.04); }

/* ---------- Anteprima attività (home) ---------- */
.vetrina { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vetrina img { border-radius: var(--raggio); box-shadow: var(--ombra); width: 100%; }
.dati { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-block: 1.8rem; padding: 0; list-style: none; }
.dati li { display: grid; gap: .2rem; border-top: 1px solid var(--ocra); padding-top: .8rem; }
.dati strong { font-family: var(--f-titoli); font-weight: 300; font-size: 2.4rem; line-height: 1; color: var(--loto); font-variant-numeric: tabular-nums; }
.dati span { font-size: var(--t-xs); color: var(--tenue); letter-spacing: .04em; }

/* ---------- Fascia invito ---------- */
.invito { background: var(--loto); color: var(--bianco); border-radius: calc(var(--raggio) * 2); padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 1.5rem 3rem; align-items: center; position: relative; overflow: hidden; }
.invito::before { content: ""; position: absolute; right: -4rem; top: -6rem; width: 22rem; height: 22rem; background: url("../img/loto.png") center / contain no-repeat; opacity: .14; filter: brightness(3) saturate(0); animation: respiro 10s ease-in-out infinite; }
.invito h2 { color: var(--bianco); font-weight: 300; }
.invito p { color: rgba(255,253,249,.85); margin-top: .7rem; max-width: 36rem; }
.invito .azioni { position: relative; }
.invito .btn--pieno { background: var(--bianco); color: var(--loto); border-color: var(--bianco); box-shadow: none; }
.invito .btn--pieno:hover { background: var(--inchiostro); color: var(--bianco); border-color: var(--inchiostro); }
.invito .btn--vuoto { color: var(--bianco); border-color: rgba(255,253,249,.6); }
.invito .btn--vuoto:hover { background: var(--bianco); color: var(--loto); }

/* ---------- Chi sono ---------- */
.chi-sono { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.chi-sono .ritratto { position: sticky; top: 7rem; }
.credenziali { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem 2rem; margin-top: 2.4rem; padding: 1.6rem 0 0; list-style: none; border-top: 1px solid var(--linea); }
.credenziali li { display: grid; gap: .15rem; font-size: var(--t-s); }
.credenziali strong { font-family: var(--f-titoli); font-weight: 500; font-size: 1.05rem; }
.credenziali span { color: var(--tenue); }

/* Linea del tempo con traccia che si disegna allo scorrimento */
.cronologia { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; position: relative; }
.cronologia::before { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 1px; background: var(--linea); }
.cronologia::after { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 1px; background: var(--loto); transform-origin: top; transform: scaleY(1); }
.tappa { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 0 0 2.2rem 2.4rem; position: relative; }
.tappa::before { content: ""; position: absolute; left: 0; top: .45rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--carta); border: 2px solid var(--loto); z-index: 1; transition: background .3s, transform .3s; }
.tappa:hover::before { background: var(--loto); transform: scale(1.2); }
.tappa time { color: var(--loto); font-weight: 600; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.tappa h3 { font-size: 1.35rem; }
.tappa .dove { color: var(--tenue); font-size: var(--t-s); font-style: italic; }
.tappa .scheda { background: color-mix(in srgb, var(--bianco) 85%, transparent); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1.1rem 1.3rem; display: grid; gap: .6rem; font-size: var(--t-s); color: var(--tenue); margin-top: .3rem; max-width: 44rem; transition: box-shadow .3s, border-color .3s; }
.tappa:hover .scheda { box-shadow: var(--ombra); border-color: var(--loto-chiaro); }
.tappa .scheda ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.due-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.due-colonne > div > h2 { margin-bottom: 2rem; }

/* ---------- Di cosa mi occupo ---------- */
.ambito-esteso { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); padding-block: 2.6rem; border-top: 1px solid var(--linea); }
.ambito-esteso:last-child { border-bottom: 1px solid var(--linea); }
.ambito-esteso h2 { font-size: 1.7rem; display: grid; gap: .8rem; align-content: start; }
.ambito-esteso .prosa { color: var(--tenue); }
.temi { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.2rem 0 0; list-style: none; }
.temi li { font-size: var(--t-s); padding: .35rem .95rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco); color: var(--inchiostro); transition: border-color .25s, color .25s, transform .25s; }
.temi li:hover { border-color: var(--loto-chiaro); color: var(--loto); transform: translateY(-2px); }
.metodo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.modalita { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modalita div { padding: 1.4rem; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--bianco); display: grid; gap: .3rem; transition: transform .3s, box-shadow .3s; }
.modalita div:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.modalita strong { font-family: var(--f-titoli); font-weight: 500; font-size: 1.2rem; }
.modalita span { font-size: var(--t-s); color: var(--tenue); }
.passi--verticali { grid-template-columns: 1fr; gap: 1.6rem; }
.passi--verticali::before { top: 1.3rem; bottom: 1.3rem; left: 1.3rem; right: auto; width: 1px; height: auto; }
.passi--verticali li { grid-template-columns: 2.6rem 1fr; column-gap: 1.1rem; }
.passi--verticali li > div { display: grid; gap: .3rem; }

/* ---------- Domande frequenti ---------- */
.faq { display: grid; max-width: 50rem; }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: 1.3rem 2.5rem 1.3rem 0; font-family: var(--f-titoli); font-size: 1.22rem; position: relative; transition: color .25s; }
.faq summary:hover { color: var(--loto); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: 1.05rem; font-family: var(--f-testo); font-size: 1.5rem; color: var(--loto); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.4rem; color: var(--tenue); display: grid; gap: .8rem; max-width: 44rem; animation: sale .4s ease both; }

/* ---------- Lo studio ---------- */
.galleria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(10rem, 17vw, 14rem); gap: .8rem; }
.galleria button { all: unset; cursor: zoom-in; position: relative; overflow: hidden; border-radius: var(--raggio); display: block; }
.galleria button:focus-visible { outline: 2px solid var(--loto); outline-offset: 3px; }
.galleria img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease, filter .5s; }
.galleria button:hover img { transform: scale(1.05); }
.galleria .didascalia { position: absolute; left: .8rem; bottom: .7rem; font-size: var(--t-xs); color: #fff; background: rgba(45,35,32,.55); padding: .25rem .7rem; border-radius: 999px; backdrop-filter: blur(4px); }
.g1 { grid-column: span 2; grid-row: span 2; }
.g2 { grid-column: span 2; }
.g5 { grid-column: span 2; }
.arrivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.indirizzo { display: grid; gap: 1.1rem; }
.indirizzo address { font-style: normal; font-family: var(--f-titoli); font-size: 1.6rem; line-height: 1.35; }
.indirizzo dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin: 0; font-size: var(--t-s); }
.indirizzo dt { color: var(--tenue); }
.indirizzo dd { margin: 0; }

/* Visualizzatore foto */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(94vw, 1200px); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(30,22,20,.86); backdrop-filter: blur(4px); }
.lightbox img { max-height: 82vh; width: auto; margin-inline: auto; border-radius: var(--raggio); }
.lightbox p { color: #F3E7D7; text-align: center; margin-top: .8rem; font-size: var(--t-s); }
.lightbox .chiudi, .lightbox .nav { position: absolute; background: rgba(255,253,249,.92); color: var(--inchiostro); border: 0; border-radius: 999px; width: 2.8rem; height: 2.8rem; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; }
.lightbox .chiudi { top: -1rem; right: -1rem; }
.lightbox .nav { top: 50%; transform: translateY(-50%); }
.lightbox .prec { left: -1.2rem; }
.lightbox .succ { right: -1.2rem; }
.lightbox[open] img { animation: sale .35s ease both; }

/* ---------- Attività scientifica ---------- */
.ruoli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ruolo { padding: 1.8rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); display: grid; gap: .6rem; align-content: start; transition: transform .3s, box-shadow .3s; }
.ruolo:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.ruolo h3 { font-size: 1.4rem; }
.ruolo p { color: var(--tenue); font-size: var(--t-s); }
.convegno { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.convegno-foto { display: grid; grid-template-columns: 1fr; gap: .8rem; position: relative; }
.convegno-foto img { border-radius: var(--raggio); width: 100%; box-shadow: var(--ombra); }
.convegno-foto .piccola { position: absolute; width: 38%; right: -1rem; bottom: -2rem; border: 4px solid var(--bianco); }
.convegno blockquote { margin: 0; font-family: var(--f-titoli); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 300; line-height: 1.3; }
.pubblicazioni { display: grid; gap: 1.2rem; padding: 0; margin: 0; list-style: none; }
.pubblicazione { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.5rem; padding: 1.8rem; background: color-mix(in srgb, var(--bianco) 88%, transparent); border: 1px solid var(--linea); border-radius: var(--raggio); transition: transform .3s, box-shadow .3s, border-color .3s; }
.pubblicazione:hover { transform: translateY(-4px); box-shadow: var(--ombra); border-color: var(--loto-chiaro); }
.pubblicazione .anno { font-family: var(--f-titoli); font-size: 2.2rem; font-weight: 300; color: var(--loto); line-height: 1; font-variant-numeric: tabular-nums; }
.pubblicazione > div { display: grid; gap: .55rem; min-width: 0; }
.pubblicazione h3 { font-size: 1.35rem; }
.pubblicazione .rivista { font-size: var(--t-s); color: var(--inchiostro); }
.pubblicazione .autori { font-size: var(--t-xs); color: var(--tenue); }
.pubblicazione p.sintesi { font-size: var(--t-s); color: var(--tenue); }
.pubblicazione .temi { margin-top: .2rem; }
.pubblicazione .temi li { font-size: var(--t-xs); padding: .2rem .7rem; }
.pubblicazione a { word-break: break-all; font-size: var(--t-s); }

/* ---------- Articoli ---------- */
.articoli-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; }
.articolo-scheda { display: grid; gap: .7rem; padding: 1.7rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); text-decoration: none; color: var(--inchiostro); transition: border-color .3s, transform .3s, box-shadow .3s; }
.articolo-scheda:hover { border-color: var(--loto-chiaro); transform: translateY(-4px); box-shadow: var(--ombra); color: var(--inchiostro); }
.articolo-scheda h3 { font-size: 1.35rem; }
.articolo-scheda p { color: var(--tenue); font-size: var(--t-s); }
.testo-articolo { max-width: 44rem; }
.testo-articolo h2 { font-size: 1.6rem; margin-top: 1.4rem; }
.firma { display: flex; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); max-width: 44rem; }
.firma img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.firma span { display: grid; font-size: var(--t-s); color: var(--tenue); }
.firma strong { color: var(--inchiostro); font-family: var(--f-titoli); font-size: 1.1rem; font-weight: 500; }

/* ---------- Contatti ---------- */
.contatti { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.recapiti { display: grid; gap: 1.3rem; padding: 0; margin: 0; list-style: none; }
.recapiti li { display: grid; gap: .1rem; }
.recapiti small { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--tenue); }
.recapiti a, .recapiti span { font-family: var(--f-titoli); font-size: 1.35rem; color: var(--inchiostro); text-decoration: none; overflow-wrap: anywhere; }
.recapiti a:hover { color: var(--loto); }
.modulo { display: grid; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); }
.modulo .riga { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo label, .campo legend { font-size: var(--t-s); font-weight: 600; }
.campo input, .campo textarea { font: inherit; font-size: var(--t-m); color: var(--inchiostro); background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: .75rem .9rem; width: 100%; transition: border-color .2s, box-shadow .2s; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--loto-chiaro); box-shadow: 0 0 0 3px rgba(228,106,96,.18); }
.campo textarea { min-height: 8rem; resize: vertical; }
.aiuto { font-size: var(--t-xs); color: var(--tenue); font-weight: 400; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
fieldset.campo legend { padding: 0; margin-bottom: .35rem; }
.scelte { display: flex; flex-wrap: wrap; gap: .5rem; }
.scelte label { position: relative; white-space: nowrap; font-weight: 400; font-size: var(--t-s); }
.scelte input { position: absolute; opacity: 0; }
.scelte span { display: inline-block; padding: .45rem 1rem; border: 1px solid var(--linea); border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.scelte input:checked + span { background: var(--loto); color: var(--bianco); border-color: var(--loto); }
.scelte input:focus-visible + span { outline: 2px solid var(--loto); outline-offset: 2px; }
.consenso { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-s); color: var(--tenue); }
.consenso input { margin-top: .35rem; accent-color: var(--loto); }
.nascosto { display: none; }
.esito { font-size: var(--t-s); padding: .8rem 1rem; border-radius: var(--raggio); background: var(--crema); color: var(--inchiostro); }

/* ---------- Piè di pagina ---------- */
.piede { background: var(--notte); color: #E9DCCB; padding-block: 3.5rem 2rem; font-size: var(--t-s); position: relative; overflow: hidden; }
.piede::before { content: ""; position: absolute; right: -3rem; bottom: -4rem; width: 18rem; height: 14rem; background: url("../img/loto.png") center / contain no-repeat; opacity: .06; }
.piede a { color: #F3C9C1; }
.piede a:hover { color: #fff; }
.piede .colonne { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; position: relative; }
.piede h2 { font-size: 1.35rem; color: #fff; }
.piede strong { color: #fff; font-weight: 600; }
.piede ul { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .4rem; }
.piede .legale { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(233,220,203,.18); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; font-size: var(--t-xs); color: #BBA996; position: relative; }

/* ---------- Comparsa allo scorrimento (solo browser che la supportano) ---------- */
@supports (animation-timeline: view()) {
  .rivela { animation: entra linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .cronologia::after { animation: traccia linear both; animation-timeline: view(); animation-range: entry 20% exit 40%; }
}
@keyframes entra { from { opacity: 0; transform: translateY(32px); } }
@keyframes traccia { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Schermi medi e piccoli ---------- */
@media (max-width: 900px) {
  .apertura .contenitore, .benvenuto, .chi-sono, .metodo, .arrivo, .due-colonne, .vetrina, .convegno, .contatti { grid-template-columns: minmax(0, 1fr); }
  .apertura-figura { order: -1; width: min(100%, 20rem); margin-inline: auto; }
  .chi-sono .ritratto, .benvenuto .ritratto { position: static; max-width: 19rem; }
  .riquadri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .passi::before { display: none; }
  .passi--verticali { grid-template-columns: 1fr; }
  .passi--verticali::before { display: block; }
  .ambito-esteso { grid-template-columns: minmax(0, 1fr); }
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; }
  .g1, .g2, .g5 { grid-column: span 2; }
  .striscia { grid-template-columns: 1fr 1fr; }
  .striscia a:first-child { grid-column: span 2; }
  .ruoli { grid-template-columns: minmax(0, 1fr); }
  .invito { grid-template-columns: minmax(0, 1fr); }
  .convegno-foto .piccola { right: .6rem; bottom: -1.4rem; }
  .piede .colonne { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .riquadri, .passi { grid-template-columns: minmax(0, 1fr); }
  .riquadro-link { min-height: 0; }
  .modulo .riga, .modalita { grid-template-columns: 1fr; }
  .dati { grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
  .dati strong { font-size: 1.9rem; }
  .pubblicazione { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: 1.3rem; }
  .striscia img { height: 11rem; }
  .lightbox .prec { left: .3rem; } .lightbox .succ { right: .3rem; } .lightbox .chiudi { right: .3rem; top: -3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .petali { display: none; }
}

/* Pubblicazioni in forma compatta (pagina Chi sono) */
.pubblicazioni--compatte { gap: 0; }
.pubblicazioni--compatte .pubblicazione { background: transparent; border: 0; border-top: 1px solid var(--linea); border-radius: 0; padding: 1.5rem 0; grid-template-columns: 5rem minmax(0, 1fr); }
.pubblicazioni--compatte .pubblicazione:last-child { border-bottom: 1px solid var(--linea); }
.pubblicazioni--compatte .pubblicazione:hover { transform: none; box-shadow: none; }
.pubblicazioni--compatte .anno { font-size: 1.6rem; }
.pubblicazioni--compatte h4 { font-family: var(--f-titoli); font-weight: 500; font-size: 1.2rem; line-height: 1.3; margin: 0; }
.pubblicazioni--compatte .rivista { font-size: var(--t-xs); color: var(--tenue); }
.pubblicazioni--compatte .sintesi { max-width: 48rem; }
@media (max-width: 560px) { .pubblicazioni--compatte .pubblicazione { grid-template-columns: minmax(0, 1fr); } }

/* Profili esterni ("Mi trovi anche su") */
.profili { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.profili a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco); color: var(--inchiostro); text-decoration: none; font-size: var(--t-s); transition: border-color .25s, color .25s, transform .25s; }
.profili a::after { content: "↗"; color: var(--loto); font-size: .85em; }
.profili a:hover { border-color: var(--loto-chiaro); color: var(--loto); transform: translateY(-2px); }
.piede .colonne { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; }
@media (max-width: 900px) { .piede .colonne { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .piede .colonne { grid-template-columns: 1fr; } }

/* Fascia foto senza testo (Chi sono) e pubblicazioni discrete */
.fascia-foto { padding-block: 0 clamp(4rem, 7vw, 6rem); }
.fascia-foto .convegno-foto { max-width: 56rem; margin-inline: auto; }
.pubblicazioni-nota { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); display: grid; gap: .8rem; }
.pubblicazioni-nota ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .7rem; font-size: var(--t-xs); line-height: 1.6; color: var(--tenue); }
.pubblicazioni-nota a { word-break: break-all; }