/* Flavia Ercoli · Flow Academy */

@font-face{font-family:"Jost";src:url(fonts/jost.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --viola:#49365B;
  --viola-profondo:#2F2240;
  --lilla:#856A9D;
  --lavanda:#EBE4F8;
  --crema:#FFFBF5;
  --bianco:#FFFFFF;
  --petrolio:#066474;
  --oro:#D49E58;
  --testo:#2A2033;
  --tenue:#5E5468;
  --linea:rgba(73,54,91,.14);
  --titoli:"Jost","Futura","Century Gothic",sans-serif;
  --corpo:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --larghezza:1160px;
  --raggio:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--testo);font-family:var(--corpo);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titoli);color:var(--viola);font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0}
p{margin:0 0 1.1em}
:focus-visible{outline:2px solid var(--petrolio);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--larghezza);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--viola);color:var(--crema);padding:10px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.occhiello{font-family:var(--titoli);font-size:.8rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--petrolio);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.occhiello::before{content:"";width:28px;height:1px;background:currentColor}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--titoli);font-weight:500;font-size:1rem;letter-spacing:.02em;text-decoration:none;padding:14px 28px;border-radius:999px;transition:background .25s,color .25s,transform .25s,border-color .25s}
.btn-pieno{background:var(--viola);color:var(--crema)}
.btn-pieno:hover{background:var(--viola-profondo);transform:translateY(-1px)}
.btn-vuoto{border:1px solid var(--linea);color:var(--viola)}
.btn-vuoto:hover{border-color:var(--viola)}
.freccia{transition:transform .25s}
a:hover .freccia{transform:translateX(4px)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,251,245,.9);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.header.scrolled{border-bottom-color:var(--linea)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-family:var(--titoli);font-size:.95rem;font-weight:500;letter-spacing:.03em;text-decoration:none;color:var(--viola)}
.nav a:not(.btn):hover{color:var(--petrolio)}
.nav .lingua{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;letter-spacing:.14em;color:var(--tenue);border-left:1px solid var(--linea);padding-left:28px}
.nav .btn{padding:10px 22px;color:var(--crema)}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--viola)}
.menu-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;transition:transform .3s,opacity .3s}

/* Hero */
.hero{padding:72px 0 96px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);margin-bottom:28px}
.hero h1 em{font-style:normal;color:var(--lilla)}
.hero .lead{font-size:1.18rem;color:var(--tenue);max-width:34em;margin-bottom:36px}
.hero .azioni{display:flex;flex-wrap:wrap;gap:14px}
.hero-foto{position:relative;justify-self:end;width:100%;max-width:440px}
.hero-foto::before{content:"";position:absolute;inset:-18px -18px 18px 18px;border:1px solid var(--oro);border-radius:999px 999px var(--raggio) var(--raggio)}
.hero-foto img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px var(--raggio) var(--raggio)}
.hero-foto .firma{position:absolute;left:-36px;bottom:36px;background:var(--bianco);border-radius:14px;padding:14px 20px;box-shadow:0 18px 40px -18px rgba(47,34,64,.35);font-family:var(--titoli);line-height:1.35}
.firma small{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--petrolio)}
.firma strong{font-weight:500;color:var(--viola);font-size:1.05rem}

/* Numeri */
.numeri{background:var(--viola);color:var(--lavanda);padding:64px 0}
.numeri ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.numeri li{border-top:1px solid rgba(235,228,248,.22);padding-top:22px}
.numeri strong{display:block;font-family:var(--titoli);font-weight:400;font-size:clamp(2rem,3.4vw,2.8rem);color:var(--oro);line-height:1.1;margin-bottom:10px}
.numeri span{font-size:.95rem;line-height:1.55;opacity:.9}

/* Sezioni */
.sezione{padding:120px 0}
.sezione h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:24px}
.intro{max-width:40em;color:var(--tenue);font-size:1.1rem}

/* Metodo */
.metodo .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:88px;align-items:start}
.metodo .testa{position:sticky;top:120px}
.metodo h2 .tyb{display:block;font-size:.5em;letter-spacing:.2em;text-transform:uppercase;color:var(--lilla);margin-top:14px;font-weight:400}
.fasi{list-style:none;margin:0;padding:0;counter-reset:fase}
.fasi li{counter-increment:fase;display:grid;grid-template-columns:88px 1fr;gap:8px 24px;padding:36px 0;border-top:1px solid var(--linea)}
.fasi li:last-child{border-bottom:1px solid var(--linea)}
.fasi li::before{content:"0" counter(fase);grid-row:span 2;font-family:var(--titoli);font-size:3.4rem;font-weight:300;line-height:1;color:transparent;-webkit-text-stroke:1px var(--lilla)}
.fasi h3{font-size:1.6rem}
.fasi p{margin:0;color:var(--tenue)}

/* Servizi */
.servizi{background:var(--viola)}
.servizi .testa h2{color:var(--crema)}
.servizi .testa .occhiello{color:var(--oro)}
.servizi .testa .intro{color:rgba(255,251,245,.85)}
.servizi .in-arrivo{border-color:var(--oro)}
.servizi .in-arrivo h3{color:var(--crema)}
.servizi .in-arrivo p{color:rgba(255,251,245,.85)}
.servizi .in-arrivo .btn-vuoto{color:var(--crema);border-color:rgba(255,251,245,.45)}
.servizi .in-arrivo .btn-vuoto:hover{border-color:var(--oro)}
.carte{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.carta{background:var(--bianco);border-radius:var(--raggio);padding:40px 34px;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.carta:hover{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(47,34,64,.4)}
.carta .per{font-family:var(--titoli);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--petrolio);margin-bottom:18px}
.carta h3{font-size:1.65rem;margin-bottom:18px}
.carta p{color:var(--tenue);font-size:1rem}
.carta ul{margin:0 0 1.2em;padding:0;list-style:none;font-size:.97rem}
.carta ul li{padding:8px 0 8px 22px;position:relative;border-top:1px solid var(--linea)}
.carta ul li::before{content:"";position:absolute;left:2px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--oro)}
.carta .specializzazione{background:var(--crema);border-left:3px solid var(--petrolio);border-radius:0 10px 10px 0;padding:16px 18px;font-size:.95rem;color:var(--testo);margin-bottom:1.2em}
.carta .specializzazione b{display:block;font-family:var(--titoli);font-weight:500;color:var(--petrolio);letter-spacing:.04em;margin-bottom:4px}
.carta .formato{margin-top:auto;padding-top:22px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.88rem;color:var(--tenue)}
.carta .formato a{font-family:var(--titoli);font-weight:500;color:var(--viola);text-decoration:none;white-space:nowrap}
.in-arrivo{margin-top:24px;border-radius:var(--raggio);border:1px dashed var(--lilla);padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.in-arrivo .etichetta{display:inline-block;font-family:var(--titoli);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;background:var(--oro);color:var(--viola-profondo);padding:5px 12px;border-radius:999px;margin-bottom:10px}
.in-arrivo h3{font-size:1.35rem;margin-bottom:6px}
.in-arrivo p{margin:0;color:var(--tenue);font-size:.98rem;max-width:40em}
.in-arrivo .btn{flex-shrink:0}

/* Chi sono */
.chi .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start}
.chi-foto{position:sticky;top:110px;isolation:isolate}
.chi-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raggio)}
.chi-foto::after{content:"";position:absolute;right:-22px;bottom:-22px;width:46%;height:46%;border-radius:var(--raggio);background:var(--petrolio);z-index:-1}
.chi .ruolo{font-family:var(--titoli);color:var(--lilla);font-size:1.15rem;margin:-10px 0 28px}
.chi p{color:var(--tenue)}
.chi .citazione{font-family:var(--titoli);font-size:1.35rem;line-height:1.45;color:var(--viola);border-left:2px solid var(--oro);padding-left:24px;margin:32px 0}
.lingue{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.lingue span{font-size:.82rem;border:1px solid var(--linea);border-radius:999px;padding:5px 14px;color:var(--viola)}

/* FAQ */
.faq{padding-top:0}
.faq .wrap{max-width:860px}
.faq h2{text-align:center;margin-bottom:40px}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-of-type{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-family:var(--titoli);font-size:1.2rem;font-weight:500;color:var(--viola)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--lilla);border-bottom:1.5px solid var(--lilla);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{color:var(--tenue);padding-right:44px}

/* Contatti */
.contatti{background:var(--viola-profondo);color:var(--lavanda);padding:120px 0}
.contatti h2{color:var(--crema);font-size:clamp(2rem,3.8vw,3rem);margin-bottom:24px}
.contatti .occhiello{color:var(--oro)}
.contatti .intro{color:rgba(235,228,248,.82)}
.canali{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.canale{display:flex;flex-direction:column;gap:18px;padding:30px 26px;border-radius:var(--raggio);background:rgba(235,228,248,.06);border:1px solid rgba(235,228,248,.14);text-decoration:none;transition:background .3s,border-color .3s,transform .3s}
.canale:hover{background:rgba(235,228,248,.12);border-color:var(--oro);transform:translateY(-3px)}
.canale svg{width:28px;height:28px;color:var(--oro)}
.canale small{display:block;font-family:var(--titoli);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(235,228,248,.65);margin-bottom:4px}
.canale strong{font-family:var(--titoli);font-weight:500;font-size:1.08rem;color:var(--crema);word-break:break-word}
.canale .vai{margin-top:auto;font-size:.88rem;color:var(--oro)}

/* Footer */
.footer{background:var(--viola-profondo);color:rgba(235,228,248,.6);font-size:.85rem;padding:0 0 40px}
.footer .wrap{border-top:1px solid rgba(235,228,248,.14);padding-top:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.footer img{height:40px;width:auto}
.footer nav{display:flex;flex-wrap:wrap;gap:22px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--crema)}

/* Comparsa morbida */
@media (prefers-reduced-motion:no-preference){
  .js .appare{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
  .js .appare.visibile{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Tablet */
@media (max-width:1000px){
  .nav{gap:22px}
  .hero .wrap,.metodo .wrap,.chi .wrap{gap:48px}
  .carte{grid-template-columns:1fr;max-width:640px}
  .canali{grid-template-columns:repeat(2,1fr)}
  .numeri ul{grid-template-columns:repeat(2,1fr)}
}

/* Telefono */
@media (max-width:820px){
  body{font-size:1rem}
  .wrap{padding:0 20px}
  .header .wrap{height:68px}
  .logo img{height:38px}
  .menu-toggle{display:block}
  .nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--crema);padding:8px 20px 24px;border-bottom:1px solid var(--linea);transform:translateY(-120%);transition:transform .35s;z-index:-1}
  .nav.aperto{transform:none}
  .nav a{padding:16px 0;border-bottom:1px solid var(--linea);font-size:1.05rem}
  .nav .lingua{border-left:0;padding-left:0}
  .nav .btn{justify-content:center;margin-top:18px;border:0;padding:14px}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding:40px 0 72px}
  .hero .wrap{grid-template-columns:1fr}
  .hero-foto{justify-self:center;max-width:300px;margin-top:28px}
  .hero-foto .firma{left:-8px;bottom:22px}
  .sezione,.contatti{padding:84px 0}
  .faq{padding-top:0}
  .metodo .wrap,.chi .wrap{grid-template-columns:1fr}
  .metodo .testa{position:static}
  .fasi li{grid-template-columns:64px 1fr}
  .fasi li::before{font-size:2.6rem}
  .chi-foto{max-width:420px;position:relative;top:0}
  .chi-foto::after{right:-12px;bottom:-12px}
  .in-arrivo{flex-direction:column;align-items:flex-start;padding:26px 24px}
  .carta{padding:32px 24px}
}
@media (max-width:520px){
  .numeri ul,.canali{grid-template-columns:1fr}
  .numeri{padding:48px 0}
  .numeri ul{gap:28px}
  .hero .azioni .btn{flex:1 1 100%;justify-content:center}
}


/* Accenti verdi nei servizi */
.carta{border-top:4px solid var(--petrolio)}
.carta .formato > span{background:var(--petrolio);color:var(--crema);font-family:var(--titoli);font-weight:500;font-size:.8rem;letter-spacing:.04em;padding:7px 14px;border-radius:999px;line-height:1.3}
.carta .formato a{color:var(--petrolio)}
.carta .formato a:hover{color:var(--viola)}


/* Testimonianze */
.testimonianze .testa{max-width:44em;margin-bottom:36px}
.barra-t{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.schede{display:inline-flex;gap:6px;background:var(--bianco);border:1px solid var(--linea);border-radius:999px;padding:5px}
.schede button{font-family:var(--titoli);font-weight:500;font-size:.95rem;color:var(--viola);background:none;border:0;border-radius:999px;padding:10px 20px;cursor:pointer;transition:background .25s,color .25s}
.schede button span{font-size:.75rem;opacity:.6;margin-left:4px}
.schede button[aria-selected="true"]{background:var(--viola);color:var(--crema)}
.frecce{display:flex;gap:10px}
.freccia-car{width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);background:var(--bianco);color:var(--viola);font-size:1.1rem;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.freccia-car:hover{border-color:var(--petrolio);background:var(--petrolio);color:var(--crema)}
.traccia{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 12px;align-items:flex-start}
.traccia::-webkit-scrollbar{display:none}
.traccia[hidden]{display:none}
.chi + .testimonianze{border-top:1px solid var(--linea)}
.testimonianze + .faq{border-top:1px solid var(--linea);padding-top:120px}
.testimonianza{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;margin:0;background:var(--bianco);border-radius:var(--raggio);padding:54px 30px 28px;display:flex;flex-direction:column;position:relative;border-top:4px solid var(--lilla)}
.testimonianza::before{content:"\201C";position:absolute;top:8px;left:28px;font-family:Georgia,serif;font-size:4.5rem;line-height:1;color:var(--oro);opacity:.5}
.testimonianza .testo{margin:0 0 14px;font-size:.98rem;line-height:1.65;color:var(--testo)}
.testimonianza .testo p{margin:0;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.testimonianza.aperta .testo p{display:block;-webkit-line-clamp:unset}
.leggi{align-self:flex-start;background:none;border:0;padding:0;margin-bottom:22px;font-family:var(--titoli);font-weight:500;font-size:.92rem;color:var(--petrolio);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.testimonianza figcaption{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--linea)}
.iniziali{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--lavanda);color:var(--viola);display:grid;place-items:center;font-family:var(--titoli);font-weight:500;font-size:.9rem;letter-spacing:.04em}
.testimonianza strong{display:block;font-family:var(--titoli);font-weight:500;color:var(--viola);font-size:1rem;line-height:1.3}
.testimonianza small{display:block;font-size:.84rem;color:var(--tenue);line-height:1.4}
@media (max-width:1000px){.testimonianza{flex-basis:calc((100% - 24px)/2)}}
@media (max-width:640px){.testimonianza{flex-basis:86%}.schede button{padding:9px 14px;font-size:.88rem}.frecce{display:none}}
@media (max-width:820px){.testimonianze + .faq{padding-top:84px}}