/* Aquilone · tate, doposcuola e centro estivo. Chiaro, morbido, allegro ma adulto.
   Colori solo da --p --s --t --a; caratteri solo da --f-titoli / --f-testo. */
@font-face{font-family:'Quicksand';src:url('../_font/quicksand/quicksand-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Mulish';src:url('../_font/mulish/mulish-var.woff2') format('woff2');font-weight:200 1000;font-style:normal;font-display:swap}

:root{
  --p:#d9366f;   /* lampone */
  --s:#fff7ee;   /* bianco caldo */
  --t:#262840;   /* inchiostro */
  --a:#ffc84a;   /* sole */
  --f-titoli:'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
  --f-testo:'Mulish', system-ui, sans-serif;

  --su-p:var(--s);       /* testo sopra il primario (lo ricalcola il JS) */
  --su-a:var(--t);       /* testo sopra il giallo */
  --tenue:color-mix(in oklab, var(--t) 72%, var(--s));
  --linea:color-mix(in oklab, var(--t) 14%, transparent);
  --rosa:color-mix(in oklab, var(--p) 12%, var(--s));
  --sole:color-mix(in oklab, var(--a) 34%, var(--s));
  --nebbia:color-mix(in oklab, var(--t) 6%, var(--s));
  --gutter:clamp(16px, 4vw, 56px);
  --max:1320px;
  --r:30px;
  --testata:78px;
  --molla:cubic-bezier(.34,1.4,.5,1);
  --curva:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--testata) + 12px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--s);color:var(--t);font-family:var(--f-testo);font-size:18px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-titoli);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
:focus-visible{outline:3px solid var(--p);outline-offset:3px}
.salta{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--t);color:var(--s);padding:10px 16px;border-radius:999px}
.salta:focus{left:16px}
.contenitore{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 28px;border-radius:999px;font-family:var(--f-titoli);font-size:18px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .45s var(--molla), background-color .3s, color .3s}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg)}
.btn:active{transform:scale(.97)}
.btn-pieno{background:var(--p);color:var(--su-p)}
.btn-vuoto{border-color:var(--t);color:var(--t)}
.btn-vuoto:hover{background:var(--t);color:var(--s)}

/* ---------- testata ---------- */
.testata{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;width:min(calc(100% - 24px), 1296px);height:calc(var(--testata) - 16px);display:flex;align-items:center;gap:24px;padding:0 10px 0 22px;border-radius:999px;background:color-mix(in oklab, var(--s) 90%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--linea);transition:box-shadow .4s}
.testata.piena{box-shadow:0 0 0 1px var(--linea), 0 18px 40px -26px color-mix(in oklab, var(--t) 50%, transparent)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-titoli);font-weight:700;font-size:22px;letter-spacing:-.02em;margin-right:auto;min-width:0;line-height:1.05}
.logo-segno{width:34px;height:34px;flex:none;fill:none;stroke:var(--p);stroke-width:2.6}
.logo-segno circle:not(:first-child){fill:var(--a);stroke:none}
.nav{display:flex;gap:24px}
.nav a{font-weight:700;font-size:16px;text-decoration:none;padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:50%;bottom:0;width:6px;height:6px;border-radius:50%;background:var(--p);transform:translateX(-50%) scale(0);transition:transform .4s var(--molla)}
.nav a:hover::after{transform:translateX(-50%) scale(1)}
.btn-testata{min-height:46px;padding:10px 20px;font-size:16px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--t);cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--s);transition:transform .45s var(--molla), opacity .3s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.pannello{position:fixed;inset:0;z-index:45;background:var(--sole);padding:calc(var(--testata) + 40px) var(--gutter) 32px;display:flex;flex-direction:column;gap:24px;overflow-y:auto}
.pannello nav{display:flex;flex-direction:column;gap:8px}
.pannello nav a{align-self:flex-start;font-family:var(--f-titoli);font-weight:700;font-size:clamp(28px, 8vw, 40px);text-decoration:none;padding:8px 22px;border-radius:999px;background:var(--s)}
.pannello .btn{align-self:flex-start}

/* ---------- hero: titolo grande e girotondo di foto ---------- */
.hero{min-height:min(100svh, 980px);padding:calc(var(--testata) + clamp(24px, 5vh, 60px)) 0 clamp(40px, 6vh, 80px);display:flex;align-items:center;overflow:hidden}
.hero-griglia{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:24px;align-items:center}
.hero-testo{grid-column:1 / 8}
.hero-sopra{display:inline-block;font-weight:800;font-size:15px;padding:6px 14px;border-radius:999px;background:var(--rosa);color:var(--p);margin-bottom:22px}
.hero h1{font-size:clamp(52px, 7.6vw, 124px);line-height:.95;letter-spacing:-.045em}
.hero-sotto{font-size:clamp(18px, 1.45vw, 21px);color:var(--tenue);max-width:40ch;margin-top:24px}
.hero-azioni{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.giro{grid-column:8 / -1;position:relative;width:100%;max-width:560px;aspect-ratio:1;justify-self:center}
.giro::before{content:"";position:absolute;inset:15%;border-radius:50%;border:2px dashed color-mix(in oklab, var(--p) 45%, transparent)}
.giro-ruota{position:absolute;inset:0}
.giro-pallino{position:absolute;left:35%;top:35%;width:30%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:6px solid var(--s);box-shadow:0 18px 40px -20px color-mix(in oklab, var(--t) 60%, transparent);
  transform:rotate(calc(var(--k) * 60deg)) translateY(-117%) rotate(calc(var(--k) * -60deg))}
.giro-pallino:nth-child(odd){border-color:var(--a)}
.giro-pallino img{width:100%;height:100%;object-fit:cover}
.giro-centro{position:absolute;left:31%;top:31%;width:38%;aspect-ratio:1;border-radius:50%;background:var(--p);color:var(--su-p);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%;line-height:1.15}
.giro-centro strong{font-family:var(--f-titoli);font-size:clamp(38px, 4.6vw, 68px);line-height:1}
.giro-centro span{font-size:clamp(12px, 1.05vw, 16px);font-weight:800;margin-top:6px;max-width:9em}

/* ---------- testate di sezione ---------- */
.testa{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);gap:20px 48px;align-items:end;margin-bottom:48px}
.testa h2,.giornata h2,.incontro h2,.contatti h2{font-size:clamp(36px, 4.6vw, 70px);line-height:1;letter-spacing:-.04em}
.testa p{color:var(--tenue);font-size:19px;max-width:44ch}
.testa-centro{grid-template-columns:1fr;text-align:center;justify-items:center}

/* ---------- servizi ---------- */
.servizi{padding:clamp(80px, 10vw, 140px) 0}
.offerte{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));gap:18px}
.offerta{border-radius:var(--r);padding:clamp(24px, 2.6vw, 36px);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.offerta h3{font-size:clamp(26px, 2.4vw, 36px);line-height:1.05}
.offerta p{font-size:17px}
.prezzo{margin-top:auto;padding-top:14px;font-weight:700}
.prezzo strong{font-family:var(--f-titoli);font-size:clamp(36px, 3.4vw, 52px);letter-spacing:-.04em;margin-right:6px;line-height:1}
.o-tata{grid-column:1 / 7;grid-row:1 / 3;background:var(--rosa);display:grid;grid-template-rows:auto 1fr;padding:12px}
.o-tata figure{border-radius:calc(var(--r) - 10px);overflow:hidden;aspect-ratio:16/10}
.o-tata img{width:100%;height:100%;object-fit:cover}
.o-tata .offerta-corpo{display:flex;flex-direction:column;gap:12px;padding:clamp(14px, 2vw, 26px)}
.o-tata p:not(.prezzo){color:var(--tenue)}
.o-doposcuola{grid-column:7 / -1;background:var(--p);color:var(--su-p)}
.o-estate{grid-column:7 / 10;background:var(--a);color:var(--su-a)}
.o-strada{grid-column:10 / -1;background:var(--nebbia)}
.o-strada p:not(.prezzo){color:var(--tenue)}
.o-estate h3,.o-strada h3{font-size:clamp(22px, 1.75vw, 27px)}
.o-estate .prezzo strong,.o-strada .prezzo strong{font-size:clamp(32px, 2.8vw, 44px)}

/* ---------- tate: la frase prende peso ---------- */
.tate{padding:clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px);background:var(--sole);border-radius:clamp(32px, 5vw, 64px)}
.frase{font-size:clamp(32px, 4.8vw, 74px);line-height:1.08;letter-spacing:-.035em;font-weight:250;max-width:20ch}
.passi{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px;margin-top:clamp(48px, 7vw, 90px);position:relative}
.passi::before{content:"";position:absolute;left:30px;right:30px;top:30px;border-top:3px dotted color-mix(in oklab, var(--t) 30%, transparent)}
.passi li{position:relative}
.passo-num{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--t);color:var(--s);font-family:var(--f-titoli);font-weight:700;font-size:26px;margin-bottom:20px}
.passi h3{font-size:25px;margin-bottom:8px}
.passi p{color:var(--tenue);max-width:34ch}

/* ---------- numeri ---------- */
.numeri{padding:clamp(56px, 7vw, 96px) 0}
.numeri-lista{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px}
.numeri li{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.numeri strong{font-family:var(--f-titoli);font-size:clamp(56px, 6vw, 96px);line-height:.95;letter-spacing:-.05em;color:var(--p)}
.numeri li > span{font-weight:700;color:var(--tenue);max-width:22ch}

/* ---------- giornata ---------- */
.giornata{padding:clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 140px)}
.giornata-griglia{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(32px, 6vw, 90px);align-items:center}
.orario{margin-top:36px;display:grid;gap:0}
.orario li{display:grid;grid-template-columns:78px 1fr;gap:16px;padding:18px 0;border-bottom:2px dashed var(--linea);align-items:baseline}
.orario time{font-family:var(--f-titoli);font-weight:700;font-size:22px;color:var(--p)}
.giornata-foto{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));grid-template-rows:auto auto;gap:16px}
.gf{overflow:hidden}
.gf img{width:100%;height:100%;object-fit:cover}
.gf-1{grid-column:1 / -1;border-radius:var(--r);aspect-ratio:16/9}
.gf-2{grid-column:1 / 3;border-radius:50%;aspect-ratio:1}
.gf-3{grid-column:3 / -1;border-radius:var(--r);aspect-ratio:auto}

/* ---------- famiglie: nastro di carte ---------- */
.famiglie{padding:clamp(80px, 10vw, 140px) 0;background:var(--nebbia)}
.stelle{color:var(--p);letter-spacing:.1em}
.nastro{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
.nastro-giro{flex:none;display:flex;gap:18px;padding-right:18px;align-items:stretch;animation:scorri 60s linear infinite}
.nastro:hover .nastro-giro{animation-play-state:paused}
@keyframes scorri{to{transform:translateX(-100%)}}
.voce{flex:none;width:min(380px, 82vw);border-radius:var(--r);padding:28px 28px 24px;display:flex;flex-direction:column;gap:18px;background:var(--s)}
.voce p{font-family:var(--f-titoli);font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-.01em}
.voce span{margin-top:auto;font-weight:800;font-size:15px;color:var(--tenue)}
.v1{background:var(--s)}
.v2{background:var(--rosa)}
.v3{background:var(--sole)}

/* ---------- incontro ---------- */
.incontro{padding:clamp(80px, 10vw, 140px) 0}
.incontro-griglia{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(32px, 6vw, 90px);align-items:start}
.incontro-testo > p{font-size:19px;color:var(--tenue);margin-top:20px;max-width:40ch}
.incontro-foto{margin-top:34px;width:min(100%, 360px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:8px solid var(--a)}
.incontro-foto img{width:100%;height:100%;object-fit:cover}
.modulo{background:var(--rosa);border-radius:var(--r);padding:clamp(22px, 3vw, 40px);display:flex;flex-direction:column;gap:24px}
.scelte{display:flex;flex-wrap:wrap;gap:10px}
.scelte legend{font-weight:800;font-size:16px;margin-bottom:12px;padding:0}
.scelte label{position:relative;cursor:pointer}
.scelte input{position:absolute;opacity:0;width:1px;height:1px}
.scelte span{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;border-radius:999px;background:var(--s);border:2px solid color-mix(in oklab, var(--t) 18%, transparent);font-weight:700;font-size:16px;transition:background-color .25s, color .25s, border-color .25s, transform .4s var(--molla)}
.scelte input:checked + span{background:var(--t);color:var(--s);border-color:var(--t);transform:rotate(-2deg)}
.scelte input:focus-visible + span{outline:3px solid var(--p);outline-offset:2px}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo-largo{grid-column:1 / -1}
.campo label{font-weight:800;font-size:16px}
.campo input{font:500 17px var(--f-testo);color:var(--t);background:var(--s);border:2px solid color-mix(in oklab, var(--t) 18%, transparent);border-radius:18px;padding:12px 16px;min-height:52px;width:100%;min-width:0}
.campo input::placeholder{color:color-mix(in oklab, var(--t) 50%, var(--s))}
.campo input:focus{outline:3px solid var(--p);outline-offset:1px}
.modulo .btn{align-self:flex-start}
.modulo-nota{font-size:15px;color:var(--tenue);margin-top:-10px}

/* ---------- contatti ---------- */
.contatti{padding:clamp(70px, 9vw, 120px) 0;border-top:2px dashed var(--linea)}
.contatti-griglia{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(32px, 6vw, 90px);align-items:start}
.contatti-indirizzo{margin-top:22px;font-size:19px}
.contatti-tel{font-family:var(--f-titoli);font-weight:700;font-size:clamp(32px, 3.6vw, 52px);letter-spacing:-.03em;margin:16px 0 6px}
.contatti-tel a{text-decoration:none;color:var(--p)}
.dati{margin:0;display:grid;gap:14px}
.dati > div{background:var(--nebbia);border-radius:22px;padding:20px 24px;display:grid;grid-template-columns:180px minmax(0, 1fr);gap:16px}
.dati dt{font-weight:800}
.dati dd{margin:0;color:var(--tenue)}

/* ---------- piede ---------- */
.piede{background:var(--t);color:color-mix(in oklab, var(--s) 78%, var(--t));padding:44px 0 52px;font-size:16px;border-radius:clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0}
.piede-griglia{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:start}
.piede-nome{font-family:var(--f-titoli);font-weight:700;font-size:26px;color:var(--s);line-height:1.05}
.piede-link{display:flex;gap:18px;flex-wrap:wrap}
.piede a{text-decoration:none}
.piede a:hover{color:var(--a)}

/* ---------- WhatsApp ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:8px;min-height:54px;padding:0 22px 0 18px;border-radius:999px;background:var(--t);color:var(--s);text-decoration:none;font-family:var(--f-titoli);font-weight:700;font-size:17px;box-shadow:0 18px 40px -18px color-mix(in oklab, var(--t) 80%, transparent);transition:opacity .4s var(--curva), transform .5s var(--molla)}
.fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
html.js .fab{opacity:0;transform:translateY(16px) scale(.9);pointer-events:none}
html.js .fab.vista{opacity:1;transform:none;pointer-events:auto}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav{gap:16px}
  .nav a{font-size:15px}
}
@media (max-width:1080px){
  .nav,.btn-testata{display:none}
  .burger{display:block}
  .hero-testo{grid-column:1 / -1}
  .giro{grid-column:1 / -1;max-width:440px}
  .testa{grid-template-columns:1fr}
  .o-tata{grid-column:1 / -1;grid-row:auto}
  .o-doposcuola{grid-column:1 / -1}
  .o-estate{grid-column:1 / 7}
  .o-strada{grid-column:7 / -1}
  .giornata-griglia,.incontro-griglia,.contatti-griglia{grid-template-columns:1fr}
  .numeri-lista{grid-template-columns:1fr 1fr;row-gap:36px}
}
@media (max-width:760px){
  .passi{grid-template-columns:1fr;gap:28px}
  .passi::before{left:30px;right:auto;top:30px;bottom:30px;border-top:0;border-left:3px dotted color-mix(in oklab, var(--t) 30%, transparent)}
  .passi li{padding-left:80px}
  .passo-num{position:absolute;left:0;top:0}
  .o-estate,.o-strada{grid-column:1 / -1}
  .campi{grid-template-columns:1fr}
  .dati > div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){
  :root{--testata:70px;--r:24px}
  body{font-size:17px}
  .testata{top:8px;width:calc(100% - 16px);padding-left:16px;gap:10px}
  .logo{font-size:19px}
  .logo-segno{width:30px;height:30px}
  .hero{align-items:flex-start;padding-top:calc(var(--testata) + 20px)}
  .hero-sopra{font-size:13px;margin-bottom:16px}
  .hero h1{font-size:clamp(46px, 13.6vw, 60px)}
  .hero-azioni{margin-top:24px}
  .hero-azioni .btn{flex:1 1 140px;min-height:50px;padding:12px 18px;font-size:17px}
  .hero-sotto{margin-top:16px}
  .hero-griglia{gap:12px}
  .giro{max-width:300px;margin-top:4px}
  .giro-pallino{border-width:4px}
  .giro-centro span{display:none}
  .numeri-lista{grid-template-columns:1fr 1fr;gap:28px 16px}
  .gf-3{aspect-ratio:1.6}
  .piede-griglia{grid-template-columns:1fr}
  .piede{padding-bottom:96px}
  .fab{right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- apertura: il girotondo gira e apre un cerchio sul sito ---------- */
.apertura{--foro:0px;background:var(--sole);
  -webkit-mask:radial-gradient(circle at 50% 46%, transparent var(--foro), #000 calc(var(--foro) + 1px));
  mask:radial-gradient(circle at 50% 46%, transparent var(--foro), #000 calc(var(--foro) + 1px))}
.ap-centro{position:absolute;left:50%;top:46%;transform:translate(-50%, -50%);display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;padding:0 16px}
.ap-giro{width:min(58vw, 360px);height:auto;overflow:visible}
.ap-anello{fill:none;stroke:var(--t);stroke-width:4}
.ap-bimbo circle,.ap-bimbo path{stroke:var(--t);stroke-width:3}
.ap-bimbo.b0 circle,.ap-bimbo.b0 path{fill:var(--p)}
.ap-bimbo.b1 circle,.ap-bimbo.b1 path{fill:var(--s)}
.ap-bimbo.b2 circle,.ap-bimbo.b2 path{fill:var(--a)}
.ap-nome{font-family:var(--f-titoli);font-weight:700;font-size:clamp(26px, 3.4vw, 44px);letter-spacing:-.03em;color:var(--t);text-align:center;line-height:1.05}