/* esmart! — stili delle sezioni aggiunte (hero, Chi sono, Il metodo, footer).
   Si carica DOPO style.css. */

/* ---------- Hero: riga "per chi" + pulsanti ---------- */
.hero__lead{max-width:660px;font-size:clamp(16px,1.45vw,19px);line-height:1.5;color:#DDD;text-wrap:balance}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero__actions .btn{font-size:16px;padding:14px 24px}
@media (min-width:601px){
  /* la hero cresce con il contenuto invece di sovrapporsi al logo */
  .hero{height:auto;min-height:min(860px,100svh);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(170px,18vw,210px) 0 clamp(36px,5vw,64px)}
  .hero__content{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--gutter);gap:24px}
}

/* firma nella hero (proposta B) */
.firma-hero{display:inline-flex;align-items:center;gap:12px;background:rgba(17,17,17,.72);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:6px 18px 6px 6px;font-size:15px;color:#DDD;font-weight:500}
.firma-hero img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.firma-hero b{color:#fff}
a.firma-hero:hover{border-color:var(--ciano);color:#fff}

/* pulsante con foto: "Chi c'è dietro esmart!" nella hero */
.btn--persona{border:1.5px solid rgba(255,255,255,.35);color:#fff;background:rgba(17,17,17,.55);padding:5px 22px 5px 5px!important;gap:12px}
.btn--persona img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.btn--persona:hover{border-color:var(--ciano);color:var(--ciano)}

/* ---------- Ritratto con anello fucsia → viola → ciano ---------- */
.ritratto{--size:440px;position:relative;width:min(100%,var(--size));aspect-ratio:1;border-radius:50%;padding:5px;flex:none;
  background:conic-gradient(from 210deg,var(--fucsia),#8A4FE6,var(--ciano),#8A4FE6,var(--fucsia));
  box-shadow:0 0 70px rgba(241,0,175,.22),0 0 90px rgba(12,192,223,.16)}
.ritratto img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:6px solid var(--ink)}
.ritratto--chiaro img{border-color:#F7F4F9}
.ritratto--chiaro{box-shadow:0 18px 50px rgba(241,0,175,.18)}

/* ---------- Pulsanti extra ---------- */
.btn svg{width:18px;height:18px;flex:none}
.btn--bianco{background:#fff;color:var(--ink)}
.btn--bianco:hover{background:var(--ciano);color:var(--ink)}
.btn--linkedin{background:#0A66C2;color:#fff}
.btn--linkedin:hover{background:#004182;color:#fff}
.btn--outline-dark{border:1.5px solid rgba(17,17,17,.25);color:var(--ink)}
.btn--outline-dark:hover{border-color:var(--fucsia);color:var(--fucsia)}

/* ---------- Proposta A: Chi c'è dietro esmart! ---------- */
.chi{padding:clamp(64px,8vw,112px) var(--gutter);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:center}
.chi .ritratto{justify-self:center}
.chi__text{display:flex;flex-direction:column;gap:20px}
.chi .eyebrow{color:var(--ciano)}
.chi__title{font-size:clamp(46px,5.9vw,76px)}
.chi__title em{font-style:normal;color:var(--fucsia)}
.chi__ruolo{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chi__lead{font-size:clamp(19px,1.65vw,22px);line-height:1.5;font-weight:500;text-wrap:pretty}
.chi__body{font-size:17px;line-height:1.65;color:var(--muted);text-wrap:pretty}
.chi__body b{color:#fff}
.chi__azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* riga dei fatti (A e B) */
.fatti{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin-top:6px}
.fatto{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.fatto b{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.1vw,28px);letter-spacing:-.035em;line-height:1}
.fatto:nth-child(odd) b{color:var(--fucsia-link)}
.fatto:nth-child(even) b{color:var(--ciano)}
.fatto span{font-size:13.5px;line-height:1.4;color:var(--muted)}

/* ---------- Il metodo esmart! (tutte le proposte) ---------- */
.metodo{background:#fff;color:var(--ink-soft);padding:clamp(64px,7.5vw,96px) var(--gutter);display:flex;flex-direction:column;gap:40px}
.metodo__head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,64px);align-items:end}
.metodo__head > div{display:flex;flex-direction:column;gap:16px}
.metodo .eyebrow{color:var(--fucsia)}
.metodo__title{font-size:clamp(44px,5.6vw,72px)}
.metodo__intro{font-size:18px;line-height:1.6;color:#333;text-wrap:pretty}
.fasi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0}
.fase{border-radius:24px;padding:28px;background:#F3F3F3;display:flex;flex-direction:column;gap:12px}
.fase__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fase__n{font-family:var(--display);font-weight:800;font-size:17px;color:var(--fucsia)}
.fase__tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:rgba(12,192,223,.16);color:#05768A;white-space:nowrap}
.fase__title{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;line-height:1.05}
.fase__body{font-size:15px;line-height:1.55;color:#444;text-wrap:pretty}
.fase--vision{background:var(--ink);color:#fff}
.fase--vision .fase__n{color:var(--ciano)}
.fase--vision .fase__tag{background:linear-gradient(90deg,var(--fucsia),#8A4FE6,var(--ciano));color:#fff}
.fase--vision .fase__body{color:#CFCFCF}
.metodo__domanda{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,38px);letter-spacing:-.035em;line-height:1.05}
.metodo__domanda em{font-style:normal;color:var(--fucsia)}

/* ---------- Proposta B: lettera in prima persona ---------- */
.lettera{background:#F7F4F9;color:var(--ink-soft);padding:clamp(64px,8vw,112px) var(--gutter)}
.lettera__inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.lettera .ritratto{--size:240px;position:sticky;top:32px}
.lettera__text{display:flex;flex-direction:column;gap:20px}
.lettera .eyebrow{color:var(--fucsia)}
.lettera__title{font-size:clamp(50px,6.4vw,84px)}
.lettera__title em{font-style:normal;color:var(--fucsia)}
.lettera__title span{color:var(--ciano)}
.lettera p.lettera__p{font-size:clamp(18px,1.5vw,20px);line-height:1.65;color:#333;text-wrap:pretty}
.lettera p.lettera__p b{color:var(--ink)}
.firma{display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:1.5px solid #ECECEC;margin-top:4px}
.firma__nome{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.035em;padding-top:14px}
.firma__ruolo{font-size:14px;color:#666;font-weight:600}
.lettera__azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

.percorso{padding:clamp(56px,7vw,88px) var(--gutter);display:flex;flex-direction:column;gap:28px}
.percorso__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.percorso .eyebrow{color:var(--ciano)}
.percorso__title{font-size:clamp(38px,4.4vw,56px);margin-top:12px}

/* ---------- Proposta C: banner neon + esperienza ---------- */
.banner{background:#0A0A0A;border-block:1px solid rgba(255,255,255,.06)}
.banner img{width:100%;max-width:1600px;height:auto;margin:0 auto}
.esperienza{padding:clamp(56px,7vw,96px) var(--gutter) clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:44px}
.esperienza__title{font-size:clamp(44px,5.6vw,72px);max-width:14ch}
.esperienza__title em{font-style:normal;color:var(--fucsia)}
.esperienza__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.esperienza__col{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:2px solid rgba(255,255,255,.14)}
.esperienza__col:nth-child(1){border-top-color:var(--fucsia)}
.esperienza__col:nth-child(2){border-top-color:#8A4FE6}
.esperienza__col:nth-child(3){border-top-color:var(--ciano)}
.esperienza__col h3{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1}
.esperienza__col p{font-size:16.5px;line-height:1.62;color:var(--muted);text-wrap:pretty}
.esperienza__col p b{color:#fff}
.canali{list-style:none;padding:0;display:flex;flex-direction:column}
.canali li{border-bottom:1px solid rgba(255,255,255,.1)}
.canali a,.canali span.canale{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;font-size:16px;color:#fff;font-weight:600}
.canali a:hover{color:var(--ciano)}
.canali small{font-size:13px;color:var(--muted);font-weight:500}
.linkedin-card{margin:0 var(--gutter) clamp(48px,6vw,80px);border-radius:28px;background:linear-gradient(115deg,rgba(241,0,175,.16),rgba(138,79,230,.10) 45%,rgba(12,192,223,.16));border:1px solid rgba(255,255,255,.12);padding:clamp(28px,4vw,48px);display:flex;align-items:center;gap:clamp(20px,3vw,36px)}
.linkedin-card .ritratto{--size:120px;padding:4px}
.linkedin-card .ritratto img{border-width:4px}
.linkedin-card__text{flex:1;display:flex;flex-direction:column;gap:8px}
.linkedin-card__text .linkedin-card__title{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.8vw,36px);letter-spacing:-.035em;line-height:1.02}
.linkedin-card__text p{font-size:16px;line-height:1.55;color:#CFCFCF}

/* ---------- Footer con LinkedIn ---------- */
.footer__social{display:inline-flex;align-items:center;gap:6px}
.footer__social svg{width:15px;height:15px}


/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .fasi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fatti{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .chi{grid-template-columns:1fr}
  .chi .ritratto{--size:320px}
  .metodo__head{grid-template-columns:1fr;align-items:start}
  .lettera__inner{grid-template-columns:1fr}
  .lettera .ritratto{--size:180px;position:static}
  .esperienza__grid{grid-template-columns:1fr}
  .linkedin-card{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .fasi{grid-template-columns:1fr}
  .fatti{grid-template-columns:1fr 1fr;gap:10px}
  .fatto{padding:14px}
  .hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .hero__actions .btn{justify-content:center}
  .chi__azioni .btn,.lettera__azioni .btn{width:100%;justify-content:center}
}

/* ---------- Proposta A: foto rettangolare + foto in aula ---------- */
.chi{align-items:center}
.chi__media{position:relative;margin:0 0 40px;justify-self:center;width:min(100%,460px)}
.chi__foto{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.chi__media--fucsia .chi__foto{box-shadow:0 30px 90px rgba(241,0,175,.28)}
.chi__media--bn .chi__foto{object-position:50% 20%;filter:contrast(1.04)}
/* filo colorato dietro la foto */
.chi__media::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border-radius:32px;border:2px solid var(--ciano);z-index:-1}
.chi__media{isolation:isolate}
.chi__aula{position:absolute;right:-28px;bottom:-40px;width:46%;margin:0;transform:rotate(3deg);background:#fff;padding:8px 8px 0;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.chi__aula img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px}
.chi__aula figcaption{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:8px 4px 9px;display:flex;align-items:center;gap:8px}
.chi__aula figcaption::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--fucsia)}
@media (max-width:820px){
  .chi__media{width:min(100% - 24px,380px);margin-bottom:56px}
}
@media (max-width:560px){
  .chi__aula{right:-12px;width:48%}
}

/* ---------- Proposta A: versione più sobria (foto e titolo ridotti) ---------- */
.chi{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,72px)}
.chi__media{width:min(100%,300px);margin-bottom:24px}
.chi__media::before{inset:-10px 10px 10px -10px;border-radius:26px;border-width:1.5px}
.chi__foto{border-radius:22px}
.chi__media--fucsia .chi__foto,.chi__media--bn .chi__foto{box-shadow:0 16px 40px rgba(0,0,0,.35)}
.chi__aula{width:42%;right:-18px;bottom:-26px;padding:6px 6px 0;border-radius:12px}
.chi__aula img{border-radius:8px}
.chi__aula figcaption{font-size:10.5px;padding:6px 3px 7px;gap:6px}
.chi__aula figcaption::before{width:6px;height:6px}
.chi__title{font-size:clamp(38px,4.4vw,56px)}
@media (max-width:820px){
  .chi{grid-template-columns:1fr}
  .chi__media{width:min(100% - 24px,240px);margin-bottom:36px;justify-self:start}
}

/* ---------- Proposta B: tappe del percorso ---------- */
.tappe{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:t}
.tappa{position:relative;background:#1A1A1A;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px}
.tappa__anno{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ciano)}
.tappa__titolo{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.03em;line-height:1.05}
.tappa p{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.tappa--oggi{background:linear-gradient(135deg,var(--fucsia),#8A4FE6 60%,var(--ciano));border-color:transparent}
.tappa--oggi .tappa__anno{color:#fff}
.tappa--oggi p{color:rgba(255,255,255,.9)}
.percorso__azioni{display:flex;flex-wrap:wrap;gap:12px}
.fatto b a{color:inherit;font-weight:inherit}
.fatto b a:hover{color:#fff}
.lettera p.lettera__p a{color:#C2008C;text-decoration:underline;text-underline-offset:3px}
.lettera p.lettera__p a:hover{color:var(--ink)}
@media (max-width:1100px){.tappe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tappe{grid-template-columns:1fr}.percorso__azioni .btn{width:100%;justify-content:center}}

/* ---------- "Ciao, sono Fabrizio" su tablet e telefono: foto accanto al titolo ---------- */
@media (max-width:820px){
  .lettera__inner{grid-template-columns:150px minmax(0,1fr);column-gap:24px;row-gap:20px;align-items:center}
  .lettera__text{display:contents}
  .lettera .ritratto{--size:150px;grid-column:1;grid-row:1 / span 2;align-self:center}
  .lettera .eyebrow{grid-column:2;grid-row:1;align-self:end;margin-bottom:-10px}
  .lettera__title{grid-column:2;grid-row:2;align-self:start;font-size:clamp(40px,7vw,60px)}
  .lettera__p,.lettera .firma,.lettera__azioni{grid-column:1 / -1}
}
@media (max-width:560px){
  .lettera__inner{grid-template-columns:96px minmax(0,1fr);column-gap:16px;row-gap:18px}
  .lettera .ritratto{--size:96px;padding:3px}
  .lettera .ritratto img{border-width:3px}
  .lettera .eyebrow{margin-bottom:-12px;font-size:12px}
  .lettera__title{font-size:clamp(32px,9.6vw,44px);line-height:.92}
}