/* ==========================================================================
   Chi sono — linguaggio v3 della home (mockup di Domenico, 30/09/2026), rifatta con la tornata 2 della cliente (01/10/2026).
   Qui solo i pezzi che style.css non ha: token e componenti vengono da lì.
   Misure desktop in calc(N * var(--u)): 1px a 1536 di larghezza.
   Movimento: solo .rivela (una volta) e le risposte al passaggio del mouse.
   Sfondi alterni: crema #F3E7DC («Colore dello sfondo: CREMA») · #FAF5F2 · #F3E7DC · #FAF5F2 · piede marrone.
   ========================================================================== */

.pagina-chi-sono main p{text-wrap:pretty}
.pagina-chi-sono main h1,.pagina-chi-sono main h2{text-wrap:balance}

/* ---------- 1 · Apertura con il ritratto ---------- */
/* «sempre con quel colore crema, ma senza i microrganismi»: lo stesso #F3E7DC di «Chi sono» della home, fondo pieno */
.pagina-chi-sono .pagina-testata--ritratto{background:var(--crema-2);grid-template-columns:minmax(0,1fr) calc(470 * var(--u));gap:calc(56 * var(--u));padding-top:calc(76 * var(--u))}
.pagina-chi-sono .pagina-testata__testo{max-width:calc(780 * var(--u));padding-left:calc(1 * var(--u))}
.pagina-chi-sono .pagina-testata h1{font-size:max(38px,calc(60 * var(--u)));line-height:1;text-wrap:wrap}
.pagina-chi-sono .pagina-testata h1 .a-capo{display:inline}  /* il nome sempre sulla prima riga */
.pagina-chi-sono .pagina-testata .apertura__azioni{margin-top:calc(34 * var(--u))}
.pagina-chi-sono .pagina-testata .apertura__nota{padding-left:0}

/* il testo della cliente («Mi sono laureata…»), parola per parola, un paragrafo per frase */
.bio{margin-top:calc(28 * var(--u));max-width:calc(640 * var(--u))}
.pagina-chi-sono .bio p{font-size:max(16.5px,calc(18.5 * var(--u)));line-height:1.62;color:#2F2824}
.pagina-chi-sono .bio p+p{margin-top:calc(12 * var(--u))}
/* l'ultima frase riprende «Unica, terapeutica, sostenibile» dell'apertura della home: la stessa voce della citazione di «Chi sono» */
.pagina-chi-sono .bio .bio__motto{margin-top:calc(26 * var(--u));padding-left:calc(22 * var(--u));border-left:2px solid var(--verde);
  font-family:var(--titoli);font-style:italic;font-size:max(20px,calc(25 * var(--u)));line-height:1.3;color:var(--verde)}

/* il ritratto a braccia conserte su un arco di luce: sul fondo #F3E7DC l'arco va più chiaro del fondo, se no sparisce */
.pagina-chi-sono .ritratto-piccolo{height:calc(560 * var(--u))}
.ritratto-piccolo__alone{position:absolute;left:50%;bottom:0;width:calc(430 * var(--u));height:calc(528 * var(--u));transform:translateX(-50%);
  border-radius:calc(215 * var(--u)) calc(215 * var(--u)) 0 0;background:radial-gradient(85% 72% at 50% 28%,#FFFFFF,#FAF5F2 62%,#F7EEE6 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.pagina-chi-sono .ritratto-piccolo img{z-index:1}

/* ---------- 2 · Il metodo: pannello chiaro, la frase in terracotta ---------- */
.metodo-chi__pannello{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);background:var(--carta);border-radius:calc(22 * var(--u));box-shadow:var(--ombra);overflow:hidden}
.metodo-chi__sx{padding:calc(52 * var(--u)) calc(56 * var(--u)) calc(50 * var(--u))}
.metodo-chi__dx{padding:calc(52 * var(--u)) calc(56 * var(--u)) calc(50 * var(--u));border-left:1px solid var(--bordo);background:var(--verde-velo)}
.pagina-chi-sono .metodo-chi__sx p{margin-top:calc(24 * var(--u));max-width:44ch}
.pagina-chi-sono .metodo-chi__attacco{color:var(--testo-tenue)}
/* «nutriente, saziante e mentalmente sostenibile.»: ora sono parole sue, non una citazione → un paragrafo con la voce della citazione */
.pagina-chi-sono .sezione .metodo-chi__frase{margin-top:calc(16 * var(--u));padding-left:calc(22 * var(--u));border-left:2px solid var(--verde);
  font-family:var(--titoli);font-style:italic;font-size:max(24px,calc(34 * var(--u)));line-height:1.2;color:var(--verde)}
.pagina-chi-sono .sezione .metodo-chi__nota{margin-top:calc(24 * var(--u))}

/* ---------- 3 · Dove ricevo: il titolo a sinistra, i due studi a destra ---------- */
/* stessa larghezza del pannello del metodo (.contenitore): i bordi sinistri si allineano col testo dell'apertura */
.dove-chi__griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:calc(80 * var(--u));align-items:center;max-width:calc(1384 * var(--u));margin:0 auto}
.pagina-chi-sono .sezione .dove-chi__testa p{margin-top:calc(22 * var(--u))}
.pagina-chi-sono .sezione .dove-chi__presso{font-size:max(16px,calc(17 * var(--u)));color:var(--testo-tenue)}
.studi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(18 * var(--u));margin-top:calc(14 * var(--u))}
.studio{display:flex;flex-direction:column;gap:calc(22 * var(--u));padding:calc(30 * var(--u)) calc(30 * var(--u)) calc(32 * var(--u));background:var(--carta);border-radius:var(--raggio-card);box-shadow:var(--ombra);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.studio:hover{transform:translateY(-3px);box-shadow:var(--ombra-su)}
.studio .medaglione{width:calc(54 * var(--u));height:calc(54 * var(--u));min-width:46px;min-height:46px}
.studio .medaglione .icona{width:46%;height:46%}
.pagina-chi-sono .sezione .studio__nome{margin:0;font-size:max(22px,calc(27 * var(--u)));line-height:1.12}
.pagina-chi-sono .sezione .studio__indirizzo{margin-top:calc(10 * var(--u));font-size:max(16px,calc(17 * var(--u)));line-height:1.55}
.studio__indirizzo a{color:var(--testo);text-decoration:none;border-bottom:1px solid var(--bordo-forte);transition:border-color .2s ease,color .2s ease}
.studio__indirizzo a:hover{color:var(--verde);border-bottom-color:var(--verde)}
.unito{white-space:nowrap}

/* ---------- 4 · Contatti: «Contatti» e WhatsApp a sinistra (fermi mentre si compila), il modulo a destra ----------
   Da computer la colonna di sinistra è sticky: scorrendo il modulo resta ferma in alto, così accanto alla metà bassa
   del modulo non resta un vuoto. In style.css il body ha overflow-x:hidden, che lo fa diventare un contenitore di
   scorrimento che non scorre mai e spegne lo sticky: qui il body passa a overflow-x:clip (taglia di lato allo stesso
   modo, senza diventare un contenitore). Sull'html c'è già overflow-x:clip: da telefono non scivola niente di lato.
   Dove clip non c'è (Safari prima della 16) resta l'hidden di style.css: la colonna scorre col modulo, niente di rotto. */
.pagina-chi-sono{overflow-x:clip}
/* il modulo mai sotto i 700 px: sotto quella misura «Prima visita in studio» andava a capo (provato a 1366, 1280, 1200) */
.contatti-chi__griglia{display:grid;grid-template-columns:minmax(0,1fr) max(700px,calc(780 * var(--u)));gap:calc(80 * var(--u));align-items:start;max-width:calc(1384 * var(--u));margin:0 auto}
.contatti-chi__testa{position:sticky;top:calc(48 * var(--u));display:grid;justify-items:start;gap:calc(34 * var(--u));padding-top:calc(30 * var(--u))}
.pagina-chi-sono .contatti-chi__testa .titolo-sezione{font-size:max(44px,calc(76 * var(--u)));line-height:1}
.contatti-chi__testa .pulsante{min-width:calc(260 * var(--u));margin-top:0}
.contatti-chi__modulo{min-width:0}
.contatti-chi .modulo--pieno{box-shadow:var(--ombra-su)}

/* ==========================================================================
   Adattamenti (stessi punti di style.css)
   ========================================================================== */
@media (max-width:1100px){
  .pagina-chi-sono .pagina-testata--ritratto{grid-template-columns:minmax(0,1fr) 340px;gap:28px}
  .pagina-chi-sono .ritratto-piccolo{height:460px}
  .ritratto-piccolo__alone{width:320px;height:440px;border-radius:160px 160px 0 0}
  .dove-chi__griglia{grid-template-columns:1fr;gap:34px}
  /* contatti: sotto i 1100 px accanto al titolo il modulo restava largo 560 px e le tre scelte di «Che visita vuoi fare?»
     andavano a capo («Prima visita in / studio») → una colonna sola come in home: titolo e WhatsApp sopra, il modulo sotto,
     largo al massimo 760 px, così le tre scelte restano su una riga */
  .contatti-chi__griglia{grid-template-columns:1fr;gap:32px;max-width:760px}
  .contatti-chi__testa{position:static;padding-top:0;gap:24px}
}
@media (max-width:900px){
  .pagina-chi-sono .pagina-testata--ritratto{grid-template-columns:minmax(0,1fr) 270px;gap:20px}
  .pagina-chi-sono .pagina-testata h1{font-size:44px}
  .pagina-chi-sono .ritratto-piccolo{height:370px;min-height:0}
  .ritratto-piccolo__alone{width:260px;height:350px;border-radius:130px 130px 0 0}
  .metodo-chi__pannello{grid-template-columns:1fr}
  .metodo-chi__dx{border-left:0;border-top:1px solid var(--bordo)}
  .contatti-chi__griglia{gap:30px}
}
@media (max-width:760px){
  /* apertura: testo, poi il ritratto sull'arco */
  .pagina-chi-sono .pagina-testata--ritratto{grid-template-columns:1fr;gap:0;padding-top:36px}
  /* su 360 px «biologa nutrizionista» resta su una riga: titolo in due righe anche lì */
  .pagina-chi-sono .pagina-testata h1{font-size:min(36px,9.6vw);line-height:1.04}
  .pagina-chi-sono .pagina-testata--ritratto .pagina-testata__testo{padding-bottom:14px}
  .bio{margin-top:20px}
  .pagina-chi-sono .bio p{font-size:16.5px;line-height:1.6}
  .pagina-chi-sono .bio .bio__motto{margin-top:20px;padding-left:16px;font-size:21px}
  .pagina-chi-sono .pagina-testata .apertura__azioni{margin-top:26px}
  .pagina-chi-sono .ritratto-piccolo{height:360px;min-height:0}
  .ritratto-piccolo__alone{width:280px;height:344px;border-radius:140px 140px 0 0}
  /* metodo */
  .metodo-chi__pannello{border-radius:18px}
  .metodo-chi__sx,.metodo-chi__dx{padding:28px 20px 26px}
  .pagina-chi-sono .sezione .metodo-chi__frase{font-size:24px;padding-left:16px}
  /* dove ricevo: i due studi uno sotto l'altro */
  .studi{grid-template-columns:1fr;gap:12px}
  .studio{flex-direction:row;align-items:flex-start;gap:16px;padding:20px 18px 22px}
  .pagina-chi-sono .sezione .studio__nome{font-size:22px}
  .pagina-chi-sono .sezione .studio__indirizzo{margin-top:6px}
  /* contatti: titolo, WhatsApp a tutta larghezza, poi il modulo */
  .pagina-chi-sono .contatti-chi__testa .titolo-sezione{font-size:40px}
  .contatti-chi__testa{justify-items:stretch;gap:20px}
  .contatti-chi__testa .pulsante{width:100%;min-width:0}
}