/* ===== Yogasitter – palette & type ===== */
:root{
  --sole:#F7C844;      /* giallo dei post */
  --mare:#3F8DB8;      /* azzurro "meditazione camminata" */
  --notte:#1F4DA6;     /* blu del logo e della pennellata */
  --fragola:#E4508B;   /* rosa "peace begins with me" */
  --arancia:#F38A2A;
  --prato:#45B05A;
  --ink:#22305A;
  --bordo:var(--notte); /* colore di bordi e ombre: cambia qui (es. var(--mare)) */       /* testo: blu notte, mai nero */
  --carta:#FFFDF7;
  --display:"Luckiest Guy", "Fredoka", system-ui, sans-serif;
  --body:"Fredoka", system-ui, sans-serif;
  --hand:"Caveat Brush", cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:1.125rem;line-height:1.6;color:var(--ink);background:var(--carta);overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.1;margin:0 0 .6em;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
h2{font-size:clamp(2rem,4.5vw,3.2rem)}
h3{font-weight:600;font-size:1.3rem}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:4px solid var(--fragola);outline-offset:3px;border-radius:8px}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.intro{max-width:62ch;font-size:1.2rem}
.intro.center{margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6em 1em;z-index:99}
.skip:focus{left:10px}

/* ===== Buttons ===== */
.btn{display:inline-block;font-weight:600;text-decoration:none;padding:.8em 1.5em;border-radius:999px;border:3px solid var(--bordo);transition:transform .15s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-ink{background:var(--notte);color:#fff;box-shadow:5px 5px 0 var(--fragola)}
.btn-ghost{background:#fff}
.btn-sole{background:var(--sole);box-shadow:5px 5px 0 var(--bordo)}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.4em}
.center-actions{justify-content:center}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 24px;background:rgba(255,253,247,.94);backdrop-filter:blur(6px);border-bottom:3px solid var(--sole)}
.brand{text-decoration:none}
.brand img{height:60px;width:auto}
.wordmark{font-family:var(--display);font-size:2rem;letter-spacing:-.02em;-webkit-text-stroke:1px #fff;filter:drop-shadow(2px 2px 0 rgba(34,48,90,.25))}
.wordmark b{font-weight:400}
.wordmark b:nth-child(4n+1){color:var(--notte)}
.wordmark b:nth-child(4n+2){color:#E2373B}
.wordmark b:nth-child(4n+3){color:var(--sole)}
.wordmark b:nth-child(4n+4){color:var(--prato)}
.nav nav{display:flex;align-items:center;gap:6px}
.nav nav a{white-space:nowrap;text-decoration:none;font-weight:500;padding:.4em .8em;border-radius:999px}
.nav nav a:hover{background:var(--sole)}
.nav nav .nav-cta{background:var(--fragola);color:#fff}
.nav nav .nav-cta:hover{background:var(--notte)}
.nav-toggle{display:none;font:inherit;font-weight:600;background:var(--sole);border:3px solid var(--bordo);border-radius:999px;padding:.3em 1em;cursor:pointer}

/* ===== Hero ===== */
.hero{position:relative;background:var(--sole);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:70px max(24px,calc((100vw - 1140px)/2 + 20px)) 90px;overflow:hidden}
.blob{position:absolute;pointer-events:none}
.blob-a{width:520px;right:-120px;top:-140px;fill:var(--mare);opacity:.9}
.blob-b{width:300px;left:-90px;bottom:-120px;fill:var(--fragola)}
.hero-text{position:relative;z-index:1}
.kicker{font-family:var(--hand);font-size:1.7rem;color:var(--notte);margin-bottom:.6em;transform:rotate(-2deg);display:inline-block}
.hero h1{font-size:clamp(2.6rem,7vw,6.2rem);color:#fff;text-shadow:4px 4px 0 var(--notte),8px 8px 0 var(--mare);line-height:1.02;margin-bottom:.35em}
.lead{font-size:1.25rem;max-width:44ch}
.hero-photo{position:relative;z-index:1;margin:0;aspect-ratio:4/5;border-radius:58% 42% 50% 50% / 45% 55% 45% 55%;background:var(--carta);border:6px solid #fff;box-shadow:12px 12px 0 var(--notte)}
.hero-photo img,.hero-photo .ph{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.sticker{position:absolute;right:-4%;bottom:4%;font-family:var(--hand);font-size:1.5rem;line-height:1.05;text-align:center;background:var(--fragola);color:#fff;padding:.7em .9em;border-radius:50%;transform:rotate(10deg);box-shadow:3px 3px 0 var(--bordo)}

/* placeholder per le foto mancanti */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1em;color:var(--mare);font-weight:500;background:repeating-linear-gradient(45deg,#fff 0 18px,#FFF6D8 18px 36px)}
.ph small{opacity:.7;font-size:.8rem}
figure:has(img) > .ph{display:none}

/* ===== Progetto ===== */
.project{padding:90px 0}
.project h2{color:var(--notte);max-width:16ch}
.why{display:grid;grid-template-columns:1fr 1fr;gap:36px 56px;align-items:start;margin:44px 0 20px}
.why-intro p{margin-bottom:1em;font-size:1.2rem}
strong.hl{background:var(--sole);color:var(--ink);font-weight:600;padding:0 .25em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.why-list{background:#fff;border:4px solid var(--bordo);border-radius:40px;padding:32px 30px;box-shadow:10px 10px 0 var(--sole)}
.why-list h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.35rem;line-height:1.15;color:var(--fragola);margin-bottom:1em}
.why-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.why-item:last-child{margin-bottom:0}
.why-ico{flex:0 0 64px;height:64px;display:grid;place-items:center;border-radius:50%;border:3px solid var(--bordo)}
.w1 .why-ico{background:#FBD9E6}.w2 .why-ico{background:#FFE3C7}.w3 .why-ico{background:#D6EAF5}
.w2 .why-ico{transform:rotate(-8deg)}
.why-item h4{margin:0 0 .2em;font-size:1.15rem;font-weight:600;color:var(--notte);line-height:1.25}
.why-item p{margin:0;font-size:1.02rem}
.steps{list-style:none;padding:0;margin:90px 0 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
.step{position:relative;padding:34px 26px 26px;border-radius:40px 40px 40px 10px;color:var(--ink)}
.step:nth-child(2){transform:translateY(24px)}
.step:nth-child(3){transform:translateY(48px)}
.step-sole{background:var(--sole)}
.step-fragola{background:var(--fragola);color:#fff}
.step-mare{background:var(--mare);color:#fff}
.step-ico{display:grid;place-items:center;width:84px;height:84px;background:#fff;border-radius:50%;margin:-74px 0 14px;border:4px solid var(--bordo);transform:rotate(-6deg)}
.step:nth-child(2) .step-ico{transform:rotate(5deg)}
.step:nth-child(3) .step-ico{transform:rotate(-3deg)}
.step h3{font-family:var(--display);font-weight:400;font-size:1.8rem}
.tools{list-style:none;padding:0;margin:80px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.tools li{border:3px solid var(--bordo);border-radius:999px;padding:.35em 1em;font-weight:500;background:#fff}
.tools li:nth-child(3n+1){background:#FFF1C2}
.tools li:nth-child(3n+2){background:#FBD9E6}
.tools li:nth-child(3n){background:#D6EAF5}

/* ===== Co-regolazione ===== */
.together{position:relative;background:var(--mare);color:#fff;padding:120px 0}
.wave{position:absolute;left:0;width:100%;height:80px;fill:var(--carta)}
.wave-top{top:-1px}
.wave-bottom{bottom:-1px}
.together-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.together h2{text-shadow:3px 3px 0 var(--notte)}
.together strong{background:var(--sole);color:var(--ink);padding:0 .25em;border-radius:6px}
.pills{display:grid;gap:16px}
.pill{background:#fff;color:var(--ink);border-radius:999px;padding:18px 34px;border:3px solid var(--bordo)}
.pill p{margin:0}
.pill h3{margin-bottom:.15em}
.pill-1{box-shadow:6px 6px 0 var(--sole)}
.pill-2{box-shadow:6px 6px 0 var(--fragola)}
.pill-3{box-shadow:6px 6px 0 var(--arancia)}
.pills .pill:nth-child(even){margin-left:30px}
.pill-4{box-shadow:6px 6px 0 var(--prato)}
.hand{font-family:var(--hand);font-size:2rem;line-height:1.15;transform:rotate(-3deg);margin:10px 0 0;color:var(--sole)}

/* ===== Domande (flip cards) ===== */
.questions{padding:90px 0 100px;background:radial-gradient(circle at 10% 20%,#FFF1C2 0 120px,transparent 121px),radial-gradient(circle at 92% 80%,#FBD9E6 0 160px,transparent 161px)}
.q-title{text-align:center;color:var(--notte);font-size:clamp(2.2rem,6vw,4rem);transform:rotate(-1.5deg)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.card{position:relative;font:inherit;text-align:left;border:4px solid var(--bordo);border-radius:32px;min-height:260px;padding:0;cursor:pointer;perspective:1000px;background:transparent;transition:transform .2s}
.card:nth-child(odd){transform:rotate(-1.5deg)}
.card:nth-child(even){transform:rotate(1.5deg)}
.card:hover{transform:rotate(0) scale(1.02)}
.card .front,.card .back{position:absolute;inset:0;border-radius:28px;padding:28px;display:flex;align-items:center;backface-visibility:hidden;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.card .front{font-family:var(--display);font-size:1.85rem;line-height:1.1;color:#fff;text-shadow:2px 2px 0 rgba(34,48,90,.4)}
.card .front::after{content:"?";position:absolute;right:20px;bottom:6px;font-size:4rem;opacity:.25}
.card .back{background:#fff;color:var(--ink);font-size:1.02rem;transform:rotateY(180deg)}
.card[aria-pressed="true"] .front{transform:rotateY(-180deg)}
.card[aria-pressed="true"] .back{transform:rotateY(0)}
.c-blu .front{background:var(--notte)}
.c-sole .front{background:var(--sole);color:var(--notte);text-shadow:none}
.c-fragola .front{background:var(--fragola)}
.c-arancia .front{background:var(--arancia)}
.c-mare .front{background:var(--mare)}
.c-prato .front{background:var(--prato)}

/* ===== Lezione (timeline) ===== */
.lesson{padding:90px 0;background:var(--notte);color:#fff}
.lesson h2{color:var(--sole)}
.timeline{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative}
.timeline::before{content:"";position:absolute;top:22px;left:4%;right:4%;border-top:4px dashed rgba(255,255,255,.45)}
.timeline li{position:relative}
.dot{display:block;width:48px;height:48px;border-radius:50%;border:4px solid #fff;margin-bottom:16px;position:relative}
.d1{background:var(--sole)}.d2{background:var(--fragola)}.d3{background:var(--mare)}.d4{background:var(--prato)}.d5{background:var(--arancia)}
.timeline p{font-size:1rem;opacity:.9}

/* ===== Corso ===== */
.course{padding:100px 0;background:var(--fragola)}
.course-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:start}
.course-card{background:#fff;border:4px solid var(--bordo);border-radius:44px;padding:44px;box-shadow:12px 12px 0 var(--bordo)}
.course-card h2{color:var(--fragola);font-size:clamp(2.2rem,5vw,3.6rem)}
.tag{display:inline-block;background:var(--sole);border-radius:999px;padding:.2em .9em;font-weight:600;font-size:.95rem}
.porta-head{color:#fff;display:grid;grid-template-columns:5fr 7fr;gap:20px 56px;align-items:start}
.porta-head h2{margin-top:-.08em}
.porta-text .intro{max-width:none}
.porta-text .porta-call{font-family:var(--hand);font-size:1.8rem;line-height:1.25;color:var(--sole);transform:rotate(-1.5deg);margin:.4em 0 0}
.hero h1 span{display:block;white-space:nowrap}
.porta-head h2{font-size:clamp(2.2rem,5vw,3.8rem);text-shadow:4px 4px 0 var(--bordo)}
.launch{margin-bottom:70px}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.door{background:#fff;border:4px solid var(--bordo);border-radius:120px 120px 28px 28px;padding:34px 28px 30px;display:flex;flex-direction:column;align-items:flex-start}
.door-1{box-shadow:10px 10px 0 var(--sole)}
.door-2{box-shadow:10px 10px 0 var(--mare)}
.door-3{box-shadow:10px 10px 0 var(--arancia)}
.door-ico{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#FFF6D8;border:4px solid var(--bordo);margin:0 auto 18px}
.door h3{font-family:var(--display);font-weight:400;font-size:1.75rem;color:var(--fragola);align-self:center;text-align:center}
.door p{flex:1}
.door-link{font-weight:600;color:var(--bordo);text-decoration:none;border-bottom:3px solid var(--sole)}
.door-link:hover{border-color:var(--fragola)}
.sitter{margin-top:56px;background:var(--sole);border:4px solid var(--bordo);border-radius:36px;padding:32px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;box-shadow:10px 10px 0 var(--bordo)}
.sitter h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--bordo)}
.sitter p{margin:0;max-width:56ch}
.sitter .btn{flex-shrink:0}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 0}
.facts div{background:#FFF6D8;border-radius:20px;padding:14px 18px}
.facts dt{font-family:var(--hand);font-size:1.35rem;color:var(--mare)}
.facts dd{margin:0;font-weight:500}
.note{margin:22px 0 0;font-size:1rem}
.also{color:#fff;padding-top:20px}
.also h3{font-family:var(--display);font-weight:400;font-size:2rem}
.also ul{padding-left:1.1em}
.also li{margin-bottom:.8em}
.link{display:inline-block;font-weight:600;background:var(--sole);color:var(--ink);padding:.5em 1.2em;border-radius:999px;text-decoration:none;border:3px solid var(--bordo)}

/* ===== Galleria ===== */
.gallery{padding:90px 0}
.gallery h2{color:var(--mare)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px;margin-top:30px}
.g{position:relative;margin:0;overflow:hidden;border:4px solid var(--bordo);background:#fff}
.g img{width:100%;height:100%;object-fit:cover}
.g1{grid-column:span 2;grid-row:span 2;border-radius:60px 20px 60px 20px}
.g2{border-radius:50%}
.g3{border-radius:24px;grid-row:span 2}
.g4{border-radius:20px 60px 20px 60px}
.g5{grid-column:span 2;border-radius:999px}
.g6{border-radius:30px;grid-column:span 2}
.g1 .ph{background:repeating-linear-gradient(45deg,#FFF1C2 0 18px,#fff 18px 36px)}
.g3 .ph{background:repeating-linear-gradient(45deg,#FBD9E6 0 18px,#fff 18px 36px)}
.g5 .ph{background:repeating-linear-gradient(45deg,#D6EAF5 0 18px,#fff 18px 36px)}

/* ===== Chi sono ===== */
.about{padding:90px 0;background:#FFF1C2}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.about h2{color:var(--notte)}
.about-photo{position:relative;margin:0;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 0 0 6px var(--arancia),14px 14px 0 6px var(--mare);background:#fff}
.about-photo img{width:100%;height:100%;object-fit:cover}
.badges{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.badges li{background:var(--notte);color:#fff;border-radius:999px;padding:.3em .9em;font-size:.95rem}

/* ===== Contatti & footer ===== */
.contact{padding:100px 0;background:var(--ink);color:#fff}
.contact-logo{margin:0 auto 20px;width:140px;height:140px;transform:rotate(-6deg)}
.contact h2{color:var(--sole);font-size:clamp(2.2rem,6vw,4rem)}
.foot{background:var(--ink);color:rgba(255,255,255,.8);padding:24px 0 34px;border-top:2px dashed rgba(255,255,255,.2)}
.foot-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot p{margin:0}
.small{font-size:.85rem;max-width:60ch}

/* ===== Instagram ===== */
.insta{padding:90px 0;background:var(--carta)}
.insta-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.insta-head h2{color:var(--fragola);margin:0}
.insta-handle{font-family:var(--hand);font-size:2rem;color:var(--notte);text-decoration:none;transform:rotate(-3deg);display:inline-block}
.insta-handle:hover{color:var(--fragola)}
.insta .intro{margin-top:.6em}
.insta-feed{margin-top:30px}
.insta-placeholder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;text-decoration:none}
.insta-placeholder .t{aspect-ratio:1;display:flex;align-items:flex-end;padding:14px;border-radius:22px;border:4px solid var(--bordo);font-family:var(--display);font-size:1.05rem;line-height:1.1;color:#fff;transition:transform .15s}
.insta-placeholder:hover .t:nth-child(odd){transform:rotate(-2deg)}
.insta-placeholder:hover .t:nth-child(even){transform:rotate(2deg)}
.t1{background:var(--sole);color:var(--notte)!important}.t2{background:var(--notte)}.t3{background:var(--fragola)}
.t4{background:var(--mare)}.t5{background:var(--arancia)}.t6{background:var(--prato)}
@media (max-width:900px){.insta-placeholder{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.insta-placeholder{grid-template-columns:repeat(2,minmax(0,1fr))}.insta-placeholder .t{font-size:1rem}}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .nav-toggle{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--carta);padding:12px 20px 20px;border-bottom:3px solid var(--sole)}
  .nav nav.open{display:flex}
}
@media (max-width:900px){
  .hero,.together-grid,.course-grid,.about-grid{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr;max-width:520px}
  .why{grid-template-columns:1fr}
  .why-list{padding:26px 22px;border-radius:30px}
  .porta-head{grid-template-columns:1fr}
  .sitter{flex-direction:column;align-items:flex-start}
  .hero{padding-top:40px}
  .hero-photo{max-width:420px;width:100%;margin:0 auto}
  .steps{grid-template-columns:1fr;gap:56px}
  .step:nth-child(n){transform:none}
  .cards{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr;gap:10px;padding-left:64px}
  .timeline::before{top:0;bottom:0;left:22px;right:auto;border-top:0;border-left:4px dashed rgba(255,255,255,.45)}
  .dot{position:absolute;left:-64px;top:0}
  .grid{grid-template-columns:1fr 1fr}
  .about-photo{max-width:320px;margin:0 auto}
}
@media (max-width:560px){
  body{font-size:1.05rem}
  .cards{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .sitter{padding:26px}
  .course-card{padding:28px;border-radius:32px}
  .grid{grid-auto-rows:150px}
  .g1,.g5{grid-column:span 2}
  .pill{border-radius:28px;padding:16px 22px}
  .pills .pill:nth-child(even){margin-left:0}
  .blob-a{width:300px;top:-170px;right:-150px}
  .hero h1{text-shadow:3px 3px 0 var(--notte),5px 5px 0 var(--mare);font-size:3.1rem}
  .kicker{line-height:1.2;font-size:1.45rem;text-wrap:balance;max-width:16em;position:relative}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* titoletti nel carattere fumetto sempre in maiuscolo */
.step h3,.door h3,.sitter h3,.also h3,.card .front,.insta-placeholder .t{text-transform:uppercase;letter-spacing:.02em}