/* Pagina «Chi siamo» (brief di Salvo del 18 ottobre 2026). Usa testata, hero, pila di pannelli
   (schede-cometa), occhielli, pulsanti, chiusura e piede di stile.css, e hero, frasi manifesto, testi
   che compaiono e chiusura delle pagine interne di pagine.css: qui solo le composizioni
   proprie della pagina, con gli stessi colori, gli stessi corpi dei titoli e gli stessi punti di rottura
   (760 px telefono, 961 px computer). */

.hero-chi { min-height: 640px; }
.hero-chi .scena img { object-position: 50% 62%; }


/* 1. Consulenti */
.consulenti { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(32px, 6vw, 84px); background: var(--morbido); border: 1px solid var(--linea); }
.consulenti h2 { font-size: clamp(30px, 4.2vw, 72px); line-height: 1.08; margin-top: 12px; text-wrap: balance; }
.colonna-testo > p { color: var(--tenue); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.7; }
.colonna-testo > p + p { margin-top: 14px; }
.a-volte { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid #cfc8bb; }
.a-volte li { padding: 12px 0; border-bottom: 1px solid #cfc8bb; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.02em; }


/* 2. Esperienza: il 1992 come segno tipografico */
.esperienza { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 80px); padding: clamp(32px, 6vw, 84px); background: var(--superficie); border: 1px solid var(--linea); overflow: clip; }
.anno { grid-column: 1 / -1; margin: -0.12em 0 -0.08em -0.05em; font-size: clamp(110px, 22vw, 360px); font-weight: 500; line-height: .9; letter-spacing: -.07em; color: #e4ddd8; user-select: none; }
.esperienza h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.12; margin: 8px 0 20px; }
.esperienza-testo p:not(.occhiello) { color: var(--tenue); font-size: 17px; }
.esperienza-testo div p + p { margin-top: 12px; }
.esperienza-testo .al-contrario { color: var(--inchiostro); font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; }
/* tre foto vere dell'agenzia in una piccola composizione (Salvo, 22 ottobre 2026): l'ufficio è largo solo 960 px e non
   va mai mostrato più grande (niente parallasse, che lo ingrandiva); sotto, il soppalco e la sala riunioni */
.esperienza-foto { align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 960px; }
.esperienza-foto figure { margin: 0; overflow: hidden; border-radius: 6px; background: #d9d4d1; }
.esperienza-foto img { width: 100%; height: 100%; object-fit: cover; }
.esperienza-foto .foto-ufficio { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.esperienza-foto .foto-piccola { aspect-ratio: 4 / 5; }

/* 3. Alessandro, Massimo ed Edoardo: tre ritratti di misura diversa, sfalsati. Alessandro il più grande,
   Edoardo più piccolo accanto, Massimo sotto, che copre appena l'angolo di Alessandro */
.persone { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(32px, 6vw, 84px); background: var(--morbido); border: 1px solid var(--linea); }
.persone-foto { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); }
.ritratto { margin: 0; }
.ritratto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 6px; background: #d9d4d1; }
.ritratto figcaption { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accento); }
.ritratto.alessandro { grid-column: 1 / 8; grid-row: 1; }
/* la didascalia di Alessandro non va sotto la foto di Massimo, che copre le sue ultime colonne */
.ritratto.alessandro figcaption { padding-right: 32%; }
.ritratto.edoardo { grid-column: 9 / 13; grid-row: 1; align-self: start; margin-top: 4%; }
.ritratto.massimo { grid-column: 6 / 12; grid-row: 2; margin-top: -20%; position: relative; z-index: 1; }
.ritratto.massimo img { box-shadow: 0 -8px 28px #30251d14, 0 14px 40px #30251d1f; border: 6px solid var(--morbido); }
.persone h2 { font-size: clamp(34px, 4.6vw, 84px); line-height: 1.04; margin: 12px 0 24px; }
.persone-testo p:not(.occhiello) { color: var(--tenue); font-size: 17px; }
.persone-testo div p + p { margin-top: 12px; }
.persone-testo .attacco { color: var(--inchiostro) !important; font-size: clamp(19px, 1.6vw, 24px) !important; line-height: 1.45; }
.persone-chiusa { grid-column: 1 / -1; margin-top: clamp(16px, 3vw, 40px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid #cfc8bb; font-size: clamp(28px, 4vw, 64px); color: var(--tenue); }
.persone-chiusa span { color: var(--inchiostro); }

/* 4. La rete: parole e fili, nessuna griglia di icone */
.rete { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(32px, 6vw, 84px); background: var(--superficie); border: 1px solid var(--linea); }
.rete h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.1; margin: 8px 0 20px; text-wrap: balance; }
.rete-testo p:not(.occhiello) { color: var(--tenue); font-size: 17px; }
.rete-testo div p + p { margin-top: 12px; }
.schema-rete { width: 100%; height: auto; max-width: 560px; justify-self: center; overflow: visible; }
.schema-rete .fili path { fill: none; stroke: var(--accento); stroke-width: 1.2; stroke-dasharray: 400; stroke-dashoffset: 0; }
.schema-rete .fili .tenue { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 4 6; }
.schema-rete .nodi circle { fill: var(--superficie); stroke: var(--accento); stroke-width: 1.5; }
.schema-rete .parole text { fill: var(--inchiostro); font: 500 19px var(--sans); letter-spacing: -.01em; text-anchor: middle; }
.schema-rete .centro { fill: var(--scuro); }
.schema-rete .nome-centro { fill: #fff; font: 600 21px var(--sans); text-anchor: middle; }
/* i fili si disegnano quando lo schema entra nello schermo */
.rivela-pronta .schema-rete .fili path:not(.tenue) { stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s ease .2s; }
.rivela-pronta .schema-rete.visibile .fili path:not(.tenue) { stroke-dashoffset: 0; }

/* 5. Tecnologia: pannello scuro con una trama sottile di linee, l'unico tocco «tecnico» */
.tecnologia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px) clamp(28px, 5vw, 80px); padding: clamp(32px, 6vw, 84px); color: #fff; background-color: var(--scuro); background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 48px 48px; }
.tecnologia .occhiello { color: #e8cfae; }
.tecnologia h2 { font-size: clamp(30px, 3.6vw, 64px); line-height: 1.08; margin-top: 12px; }
.tecnologia-testo p { color: #e6e0dc; font-size: 17px; }
.tecnologia-testo p + p { margin-top: 12px; }
.confronti { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.confronti div { padding: 22px 24px; border: 1px solid #ffffff2e; border-radius: 6px; background: #ffffff0a; }
.confronti dt { color: #e6e0dc; font-size: 17px; }
.confronti dd { margin: 8px 0 0; color: #fff; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; letter-spacing: -.02em; }
.tecnologia-chiusa { grid-column: 1 / -1; padding-top: clamp(20px, 3vw, 36px); border-top: 1px solid #ffffff2e; font-size: clamp(28px, 4vw, 64px); color: #e6e0dc; }
.tecnologia-chiusa span { color: #fff; }

/* 6. L'interesse del cliente: elenco numerato come i passi del metodo in home, senza schede */
.interesse { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); padding: clamp(32px, 6vw, 84px); background: var(--morbido); border: 1px solid var(--linea); }
.interesse h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.1; margin: 8px 0 20px; text-wrap: balance; }
.interesse-testa p:not(.occhiello) { color: var(--tenue); font-size: 17px; max-width: 460px; }
.domande { list-style: none; margin: 0; padding: 0; border-top: 1px solid #cfc8bb; }
.domande li { display: flex; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #cfc8bb; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.02em; }
.domande .numero { flex: none; width: 2.2em; color: var(--accento); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.interesse-corpo .chiusa { margin-top: 24px; font-size: 17px; }


@media (max-width: 960px) {
  .consulenti, .esperienza, .persone, .rete, .tecnologia, .interesse { grid-template-columns: 1fr; }
  .confronti { grid-template-columns: 1fr; }
  .esperienza-foto { max-width: 720px; margin-top: 28px; }
  .persone-foto { max-width: 560px; }
  .schema-rete { max-width: 460px; }
}

@media (max-width: 760px) {
  .hero-chi { --alto-foto: 360px; }
  .hero-chi .scena img { object-position: 50% 58%; }
  .consulenti, .esperienza, .persone, .rete, .tecnologia, .interesse { padding: 34px 7%; }
  .anno { font-size: 30vw; }
  .ritratto figcaption { font-size: 12px; letter-spacing: .1em; }
  .confronti div { padding: 18px; }
}

/* il collegamento alla presentazione in PDF nella chiusura (richiesta di Salvo del 22 ottobre) */
.chiusura .scarica-presentazione a { color: var(--inchiostro); font-weight: 600; text-underline-offset: 3px; }