/* Pagina /social/: bianca, colorata, a cartoni. Si appoggia a /styles.css
   solo per barra in alto, interruttore e menu; il resto è tutto qui. */

.social {
  --ink: #111;
  --yellow: #ffd23f;
  --pink: #ff8fc4;
  --sky: #9cc3ff;
  --green: #5be39a;
  --orange: #ff6a1a;
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --edge: 2.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
}
.social h1, .social h2, .social h3 {
  font-family: 'Bricolage Grotesque', Manrope, sans-serif;
  text-transform: none; letter-spacing: -.03em; font-weight: 800;
}
.social .lead { color: #444; }
.social ::selection { background: var(--yellow); }

/* ---------- barra in alto, versione chiara ---------- */
.social .top { background: linear-gradient(#fff 35%, rgba(255,255,255,0)); }
.social .brand img { filter: none; }
.social .burger span { background: var(--ink); }
.social .menu { background: #fff; }
.social .menu a { color: #c4c4c4; font-family: 'Bricolage Grotesque', Manrope, sans-serif; text-transform: none; letter-spacing: -.03em; }
.social .menu a:hover { color: var(--ink); }
.social .pill--sm { background: var(--ink); color: #fff; border-color: var(--ink); }
.social .pill--sm:hover { background: var(--yellow); color: var(--ink); }
.social .switch { background: #f2f2f2; border-color: #e3e3e3; }
.social .switch a { color: #777; }
.social .switch a:hover, .social .switch a.on { color: var(--ink); }
.social .switch__pill, .social .switch:not(.ready) a.on {
  background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* ---------- pezzi comuni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 22px 0 26px;
  border: var(--edge); border-radius: 999px;
  background: #fff; color: var(--ink);
  font-weight: 700; font-size: 17px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .25s var(--bounce), box-shadow .25s var(--bounce), background .2s;
}
.btn svg { width: 20px; height: 20px; transition: transform .35s var(--bounce); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:hover svg { transform: rotate(45deg); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--yellow { background: var(--yellow); }
.btn--pink { background: var(--pink); }
.btn--ink { background: var(--ink); color: #fff; }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin: 0;
  border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; box-shadow: 3px 3px 0 var(--ink);
  font-weight: 700; font-size: 14px; white-space: nowrap;
}
.tag--yellow { background: var(--yellow); }
.tag--green { background: var(--green); }

/* entrate allo scroll: rimbalzano dentro (proprietà separate, così il
   transform resta libero per gli effetti al passaggio del mouse) */
.js [data-pop] {
  opacity: 0; scale: .6; rotate: -7deg; translate: 0 50px;
  transition:
    opacity .45s ease var(--d, 0s),
    scale .9s var(--bounce) var(--d, 0s),
    rotate .9s var(--bounce) var(--d, 0s),
    translate .9s var(--bounce) var(--d, 0s),
    transform .35s var(--bounce), box-shadow .35s var(--bounce);
}
.js [data-pop].in { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; }

/* ---------- hero ---------- */
.s-hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  max-width: var(--max); margin: 0 auto;
  padding: 110px var(--pad) 40px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center;
}
.s-hero__copy { position: relative; z-index: 4; }
.s-title { font-size: clamp(56px, 7.8vw, 128px); line-height: .9; margin: 0 0 28px; }
.s-title .w { display: inline-block; }
.hl { position: relative; z-index: 0; }
.hl::before {
  content: ""; position: absolute; z-index: -1; inset: .02em -.16em -.12em -.14em;
  background: var(--pink); border: var(--edge); border-radius: .2em;
  transform: rotate(-2deg) scaleX(0); transform-origin: left center;
}
.s-sub { font-size: clamp(17px, 1.45vw, 21px); color: #333; max-width: 36ch; margin: 0 0 34px; }
.s-cta-row { display: flex; flex-wrap: wrap; gap: 16px; }

.js .s-title .w { opacity: 0; transform: translateY(70%) scale(.5) rotate(-8deg); }
.js .s-in { opacity: 0; transform: translateY(18px); }
.loaded .s-title .w { opacity: 1; transform: none; transition: transform .9s var(--bounce), opacity .3s; }
.loaded .s-title .w:nth-child(2) { transition-delay: .08s; }
.loaded .s-title .w:nth-child(3) { transition-delay: .16s; }
.loaded .s-title .w:nth-child(4) { transition-delay: .24s; }
.loaded .hl::before { transform: rotate(-2deg) scaleX(1); transition: transform .7s var(--bounce) .75s; }
.loaded .s-in { opacity: 1; transform: none; transition: opacity .6s ease .5s, transform .8s var(--bounce) .5s; }

/* palco del reel */
.s-stage { position: relative; display: grid; place-items: center; min-height: 640px; }
.blob {
  position: absolute; width: min(500px, 96%); aspect-ratio: 1;
  background: var(--yellow); border: var(--edge);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: morph 12s ease-in-out infinite;
}
@keyframes morph {
  50% { border-radius: 58% 42% 38% 62% / 55% 61% 39% 45%; rotate: 20deg; }
}
.js .blob { scale: 0; }
.loaded .blob { scale: 1; transition: scale 1s var(--bounce) .15s; }

.phone {
  position: relative; z-index: 2;
  width: min(290px, 64vw); aspect-ratio: 9/16;
  border: 9px solid var(--ink); border-radius: 40px; overflow: hidden;
  background: #000; box-shadow: 12px 12px 0 var(--ink);
  rotate: 4deg; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: rotate .5s var(--bounce);
}
.phone:hover { rotate: 0deg; }
.phone video { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone::before {
  content: ""; position: absolute; z-index: 3; top: 8px; left: 50%;
  width: 32%; height: 18px; translate: -50% 0;
  background: var(--ink); border-radius: 20px;
}
.js .phone { opacity: 0; translate: 0 80px; }
.loaded .phone { opacity: 1; translate: 0 0; transition: translate 1s var(--bounce) .3s, opacity .4s .3s, rotate .5s var(--bounce); }

.phone__ui {
  position: absolute; z-index: 3; right: 10px; bottom: 76px;
  display: grid; gap: 16px; color: #fff;
}
.phone__ui span { display: grid; place-items: center; }
.phone__ui svg { width: 28px; height: 28px; fill: currentColor; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.phone__like.on { color: #ff3b5c; animation: like .5s var(--bounce); }
@keyframes like { 40% { scale: 1.5; } }

.phone__sound {
  position: absolute; z-index: 4; right: 12px; top: 38px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer;
  background: var(--yellow); color: var(--ink); border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font: 700 14px/1 Manrope, sans-serif;
  transition: transform .25s var(--bounce), background .2s;
  animation: chiama 2.2s ease-in-out infinite;
}
.phone__sound:hover { transform: scale(1.08); }
.phone__sound svg { width: 20px; height: 20px; }
.phone__sound .i-vol, .phone__sound.on .i-mute { display: none; }
.phone__sound.on .i-vol { display: block; }
.phone__sound.on { background: #fff; animation: none; }
/* finché l'audio è spento, il tasto pulsa per farsi notare */
@keyframes chiama {
  0%, 100% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 0 rgba(255, 210, 63, .9); }
  50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 10px rgba(255, 210, 63, 0); }
}

/* cuori del doppio tocco */
.heart-big, .heart-fly { position: absolute; z-index: 6; pointer-events: none; }
.heart-big svg, .heart-fly svg { width: 100%; height: 100%; display: block; stroke: var(--ink); stroke-width: 1.4px; }
.heart-big { width: 110px; height: 110px; margin: -55px 0 0 -55px; fill: #ff3b5c; animation: heart-big .9s var(--bounce) forwards; }
@keyframes heart-big {
  0% { scale: 0; rotate: -15deg; }
  30% { scale: 1.15; rotate: 8deg; }
  70% { scale: 1; rotate: 0deg; opacity: 1; }
  100% { scale: 1.1; translate: 0 -40px; opacity: 0; }
}
.heart-fly { width: 30px; height: 30px; margin: -15px 0 0 -15px; fill: var(--c); animation: heart-fly 1.1s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes heart-fly {
  0% { scale: .2; opacity: 1; }
  100% { translate: var(--dx) -190px; scale: 1; rotate: var(--rot); opacity: 0; }
}

/* adesivi intorno al reel */
.st { position: absolute; z-index: 3; pointer-events: none; }
.st__in { animation: galleggia 4.5s ease-in-out infinite; }
.st:nth-of-type(even) .st__in { animation-duration: 5.5s; animation-direction: reverse; }
@keyframes galleggia {
  50% { transform: translateY(-10px) rotate(4deg); }
}
.js .s-stage .st { scale: 0; }
.loaded .s-stage .st { scale: 1; transition: scale .8s var(--bounce) var(--d, .6s); }

.st--heart { top: 9%; left: 4%; --d: .55s; }
.st--heart .st__in {
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pink); border: var(--edge); box-shadow: 4px 4px 0 var(--ink);
}
.st--heart svg { width: 42px; height: 42px; fill: #fff; stroke: var(--ink); stroke-width: 1.4px; }

.st--bubble { top: 13%; right: 3%; --d: .7s; }
.st--bubble .st__in {
  display: flex; gap: 6px; padding: 16px 18px;
  background: var(--sky); border: var(--edge); border-radius: 22px 22px 22px 4px;
  box-shadow: 4px 4px 0 var(--ink);
}
.st--bubble i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); animation: punti 1.2s ease-in-out infinite; }
.st--bubble i:nth-child(2) { animation-delay: .15s; }
.st--bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes punti { 30% { translate: 0 -6px; } 60% { translate: 0 0; } }

.st--reel { top: 47%; right: -2%; --d: .85s; }
.st--reel .tag { rotate: 6deg; font-size: 16px; }

.st--cal { bottom: 15%; left: -3%; --d: 1s; }
.st--cal .tag { rotate: -5deg; padding: 8px 16px 8px 8px; }
.dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green); border: 2px solid var(--ink); }
.dot svg { width: 16px; height: 16px; }

.st--star { bottom: 4%; right: 5%; --d: 1.15s; }
.st--star .st__in { position: relative; width: 130px; height: 130px; display: grid; place-items: center; }
.st--star svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--orange); stroke: var(--ink); stroke-width: 2.5px; stroke-linejoin: round; animation: gira 18s linear infinite; }
.st--star span { position: relative; font: 800 15px/1.05 'Bricolage Grotesque', sans-serif; text-align: center; rotate: -10deg; }
@keyframes gira { to { rotate: 360deg; } }

.st--spark1 { top: 3%; left: 42%; --d: 1.25s; }
.st--spark2 { bottom: 30%; right: 22%; --d: 1.35s; z-index: 1; }
.st--spark1 svg, .st--spark2 svg, .st--cta-spark svg { width: 34px; height: 34px; fill: var(--ink); }
.st--spark2 svg { width: 24px; height: 24px; }

.hint {
  position: absolute; z-index: 3; bottom: -8px; left: 50%; translate: -50% 0;
  margin: 0; font-size: 14px; font-weight: 600; color: #666; white-space: nowrap;
}
.hint::before { content: "↑ "; }

/* ---------- nastri ---------- */
.bands { position: relative; height: 230px; overflow: hidden; margin: 30px 0 20px; }
.band {
  position: absolute; left: -5%; right: -5%; top: 50%;
  padding: 16px 0; border-block: var(--edge);
  white-space: nowrap; overflow: hidden;
  font: 800 clamp(26px, 3.4vw, 46px)/1 'Bricolage Grotesque', sans-serif;
  text-transform: uppercase; letter-spacing: -.01em;
}
.band--a { background: var(--yellow); transform: translateY(-50%) rotate(-4deg); z-index: 1; }
.band--b { background: var(--pink); transform: translateY(-50%) rotate(3deg); }
.band__track { display: flex; width: max-content; animation: nastro 38s linear infinite; }
.band--b .band__track { animation-direction: reverse; animation-duration: 44s; }
.band span { padding-right: .4em; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* ---------- sezioni ---------- */
.s-sec { max-width: var(--max); margin: 0 auto; padding: 100px var(--pad); }
.s-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: 60px; }
.s-head h2 { font-size: clamp(42px, 5.6vw, 84px); line-height: .95; }
.s-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* le schede condividono le righe (icona, titolo, testo): se un titolo va
   a capo, titoli e testi restano comunque alla stessa altezza in tutte */
.s-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
.s-card {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  margin-bottom: 24px; padding: 30px 28px 34px;
  border: var(--edge); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink);
}
.s-card:hover { transform: translate(-4px, -4px) rotate(-1.5deg); box-shadow: 13px 13px 0 var(--ink); }
.s-card:nth-child(even):hover { transform: translate(-4px, -4px) rotate(1.5deg); }
.s-card--yellow { background: var(--yellow); }
.s-card--pink { background: var(--pink); }
.s-card--blue { background: var(--sky); }
.s-card--green { background: var(--green); }
.s-card__icon { width: 84px; height: 84px; margin-bottom: 34px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--bounce); }
.s-card:hover .s-card__icon { transform: rotate(-10deg) scale(1.12); }
.s-card h3 { font-size: clamp(24px, 2vw, 29px); line-height: 1.1; margin-bottom: 12px; }
.s-card p { margin: 0; font-size: 16px; color: #1d1d1d; }

/* passi, con la strada che si disegna scorrendo */
.s-steps__wrap { position: relative; }
.s-path { position: absolute; left: 0; top: 4px; width: 100%; height: 80px; overflow: visible; }
.s-path path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.s-steps ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.s-step__n {
  display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 24px;
  border-radius: 50%; border: var(--edge); box-shadow: 4px 4px 0 var(--ink);
  background: var(--c); font: 800 38px/1 'Bricolage Grotesque', sans-serif;
  transition: transform .4s var(--bounce);
}
.s-step:hover .s-step__n { transform: rotate(-12deg) scale(1.1); }
.s-step h3 { font-size: 30px; margin-bottom: 8px; }
.s-step p { margin: 0; color: #444; max-width: 26ch; }

/* reel */
.s-reels { padding: 100px 0; overflow: hidden; }
.s-reels .s-head { padding: 0 var(--pad); }
.s-reels__row {
  display: flex; gap: 26px; justify-content: safe center;
  /* scorrendo in orizzontale la fila taglia anche sopra e sotto:
     il margine interno lascia spazio alle schede che si alzano al passaggio */
  overflow-x: auto; padding: 56px var(--pad) 70px; margin-top: -36px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.s-reels__row::-webkit-scrollbar { display: none; }
.s-reel { flex: none; width: clamp(150px, 13vw, 190px); scroll-snap-align: center; }
.s-reel figure {
  margin: 0; aspect-ratio: 9/16; overflow: hidden;
  border: var(--edge); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink);
  transition: box-shadow .35s var(--bounce);
}
.s-reel figure { position: relative; container-type: inline-size; }
.s-reel:nth-child(odd) { transform: rotate(-3deg); }
.s-reel:nth-child(even) { transform: rotate(3deg) translateY(26px); }
.s-reel:hover { transform: translateY(-12px) scale(1.05); }
.s-reel:hover figure { box-shadow: 10px 10px 0 var(--ink); }
.s-reel > h3 { margin-top: 18px; font-size: 22px; line-height: 1.1; }
.s-reels__more { display: flex; justify-content: center; margin-top: 20px; }


/* ---------- i sei stili d'esempio: misure in cqw, scalano con la scheda ---------- */
.mk { position: absolute; inset: 0; overflow: hidden; font-family: Manrope, sans-serif; }
.mk p, .mk ol { margin: 0; }
.mk__bar { position: absolute; z-index: 5; top: 3.5cqw; left: 5cqw; right: 5cqw; height: 1cqw; border-radius: 1cqw; background: rgba(0,0,0,.14); color: #111; }
.mk__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; transform-origin: left; animation: barra 7s linear infinite; }
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dondola { 50% { rotate: -1deg; translate: 0 -1.2cqw; } }

/* paper: carta, ritagli, evidenziatore, pennarello rosso */
.mk--paper { background: #ebe1cb; color: #111; }
.mk__tex { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp {
  position: absolute; background: #fff; padding: 2.4cqw 4cqw 2cqw;
  font: 400 8.6cqw/1 Anton, sans-serif;
  clip-path: polygon(0 8%, 5% 0, 14% 6%, 25% 0, 38% 5%, 50% 0, 62% 6%, 75% 0, 87% 5%, 97% 0, 100% 10%, 98% 50%, 100% 90%, 95% 100%, 83% 94%, 70% 100%, 57% 95%, 44% 100%, 31% 94%, 18% 100%, 6% 95%, 0 100%, 2% 50%);
}
.pp mark { background: #ffd23f; padding: 0 1cqw; }
.pp--n { top: 13cqw; left: 7cqw; font-size: 14cqw; rotate: -5deg; }
.pp--k { top: 16cqw; left: 29cqw; rotate: 2deg; animation: dondola 4s ease-in-out infinite; }
.pp-foto { position: absolute; top: 45cqw; left: 11cqw; width: 78cqw; padding: 3cqw 3cqw 10cqw; background: #fff; rotate: -4deg; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,.2); animation: dondola 5s ease-in-out infinite; }
.pp-foto svg { display: block; width: 100%; }
.tape { position: absolute; top: -3cqw; left: 30cqw; width: 18cqw; height: 6cqw; background: rgba(255,236,170,.8); rotate: -7deg; }
.pp-arrow { position: absolute; top: 106cqw; left: 46cqw; width: 22cqw; fill: none; stroke: #d62828; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pp-hand { position: absolute; top: 124cqw; left: 30cqw; font: 700 12cqw/1 Caveat, cursive; color: #d62828; rotate: -7deg; }
.pp--q { bottom: 13cqw; left: 9cqw; font-size: 8cqw; rotate: -2deg; }

/* cartoon: contorni spessi, colori pieni, ombre piene */
.mk--toon { background: #ffd23f radial-gradient(rgba(0,0,0,.1) 1.1cqw, transparent 1.2cqw) 0 0 / 9cqw 9cqw; color: #111; }
.tn-top { position: absolute; top: 10cqw; left: 50%; translate: -50% 0; padding: 2cqw 5cqw; background: #fff; border: .9cqw solid #111; border-radius: 99px; box-shadow: 1.2cqw 1.2cqw 0 #111; font: 800 5.4cqw/1 'Bricolage Grotesque', sans-serif; }
.tn-bubble { position: absolute; top: 26cqw; left: 8cqw; right: 8cqw; padding: 4cqw; text-align: center; background: #ff8fc4; border: .9cqw solid #111; border-radius: 6cqw; box-shadow: 1.5cqw 1.5cqw 0 #111; font: 800 10.5cqw/1 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; rotate: -3deg; }
.tn-cone { position: absolute; top: 56cqw; left: 19cqw; width: 62cqw; animation: salta 1.6s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes salta { 50% { translate: 0 -4cqw; rotate: 3deg; } }
.tn-star { position: absolute; right: 3cqw; bottom: 12cqw; width: 34cqw; aspect-ratio: 1; display: grid; place-items: center; }
.tn-star svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #ff6a1a; stroke: #111; stroke-width: 3; stroke-linejoin: round; animation: gira 10s linear infinite; }
.tn-star span { position: relative; text-align: center; font: 800 5.4cqw/1 'Bricolage Grotesque', sans-serif; rotate: -10deg; }

/* minimal: tanto vuoto, una linea sottile, un solo colore */
.mk--min { background: #f3efe8; color: #1d1d1d; }
.mk--min .mk__bar { background: rgba(0,0,0,.08); color: #1d1d1d; }
.mn-k { position: absolute; top: 13cqw; left: 9cqw; font: 600 3.4cqw/1 Manrope, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #8a8378; }
.mn-sun { position: absolute; top: 34cqw; right: 15cqw; width: 24cqw; aspect-ratio: 1; border-radius: 50%; background: #c8643b; animation: respira 6s ease-in-out infinite; }
@keyframes respira { 50% { scale: 1.1; } }
.mn-draw { position: absolute; top: 38cqw; left: 8cqw; width: 84cqw; fill: none; stroke: #1d1d1d; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mn-draw path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traccia 8s ease-in-out infinite; }
@keyframes traccia { 0% { stroke-dashoffset: 1; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.mn-t { position: absolute; left: 9cqw; bottom: 34cqw; font: 400 14cqw/.95 'Instrument Serif', serif; }
.mn-t em { color: #c8643b; }
.mn-s { position: absolute; left: 9cqw; right: 9cqw; bottom: 14cqw; padding-top: 3cqw; border-top: .3cqw solid #cfc7ba; font: 500 4cqw/1.4 Manrope, sans-serif; color: #6d665c; }

/* professionale: blu notte, griglia, un solo accento rosso */
.mk--pro {
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 100% 10cqw,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 10cqw 100%,
    #0e1a2b;
}
.mk--pro .mk__bar { background: rgba(255,255,255,.15); color: #fff; }
.pr-k { position: absolute; top: 13cqw; left: 8cqw; font: 700 3.4cqw/1 Manrope, sans-serif; letter-spacing: .35em; text-transform: uppercase; color: #8fa3bf; }
.pr-k::before { content: ""; display: inline-block; width: 2.6cqw; height: 2.6cqw; margin-right: 2cqw; background: #e63946; }
.pr-t { position: absolute; top: 21cqw; left: 8cqw; right: 8cqw; font: 800 10.5cqw/1.02 Manrope, sans-serif; letter-spacing: -.04em; }
.pr-car { position: absolute; top: 50cqw; left: 6cqw; width: 88cqw; overflow: visible; }
.pr-car .body { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }
.pr-car .dent { fill: rgba(230,57,70,.25); stroke: #e63946; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: segna 1.8s ease-in-out infinite; }
.pr-car .dent:nth-of-type(2) { animation-delay: .3s; }
.pr-car .scan { stroke: #4fd1ff; stroke-width: 1.5; animation: scansiona 3.5s ease-in-out infinite; }
@keyframes segna { 50% { scale: 1.5; opacity: .4; } }
@keyframes scansiona { 50% { translate: 216px 0; } }
.pr-list { position: absolute; top: 92cqw; left: 8cqw; right: 8cqw; list-style: none; padding: 0; display: grid; gap: 2.4cqw; }
.pr-list li { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.5cqw; background: rgba(255,255,255,.06); border-left: .8cqw solid #e63946; font: 600 4.3cqw/1.2 Manrope, sans-serif; }
.pr-list b { color: #e63946; font-weight: 800; }
.pr-cta { position: absolute; left: 8cqw; right: 8cqw; bottom: 10cqw; padding: 4cqw; border-radius: 1.5cqw; background: #e63946; text-align: center; font: 700 4.6cqw/1 Manrope, sans-serif; }

/* rassicurante: bianco e verde acqua, morbido, una risposta grande */
.mk--med { background: #f4faf9; color: #12333a; }
.mk--med .mk__bar { background: rgba(42,157,143,.15); color: #2a9d8f; }
.md-blob { position: absolute; top: -22cqw; right: -30cqw; width: 92cqw; aspect-ratio: 1; border-radius: 50%; background: #d8efea; animation: respira 7s ease-in-out infinite; }
.md-k { position: absolute; top: 13cqw; left: 8cqw; display: flex; align-items: center; gap: 2cqw; font: 700 4cqw/1 Manrope, sans-serif; color: #2a9d8f; }
.md-k i { position: relative; width: 5.5cqw; height: 5.5cqw; border-radius: 50%; background: #2a9d8f; }
.md-k i::before, .md-k i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3cqw; height: .9cqw; translate: -50% -50%; background: #fff; border-radius: 1cqw; }
.md-k i::after { rotate: 90deg; }
.md-q { position: absolute; top: 25cqw; left: 8cqw; right: 10cqw; font: 800 9cqw/1.08 Manrope, sans-serif; letter-spacing: -.03em; }
.md-card { position: absolute; top: 80cqw; left: 8cqw; right: 8cqw; padding: 7cqw 6cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 3cqw 8cqw rgba(18,51,58,.1); }
.md-ico { display: block; width: 58cqw; margin-bottom: 3cqw; animation: spazzola 1.3s ease-in-out infinite; }
@keyframes spazzola { 50% { translate: 4cqw 0; } }
.md-n { font: 800 22cqw/1 Manrope, sans-serif; letter-spacing: -.05em; color: #2a9d8f; }
.md-n span { margin-left: 2cqw; font-size: 8cqw; letter-spacing: 0; }
.md-s { margin-top: 1.5cqw !important; font: 500 4cqw/1.4 Manrope, sans-serif; color: #5b6f6f; }
.md-f { position: absolute; left: 8cqw; bottom: 10cqw; font: 600 3.6cqw/1 Manrope, sans-serif; color: #5b6f6f; }

/* energico: nero, giallo acido, scritte enormi che tremano */
.mk--gym { background: #0b0b0b; color: #fff; }
.mk--gym .mk__bar { background: rgba(255,255,255,.15); color: #c6ff00; }
.gy-stripes { position: absolute; inset: -10% -30%; background: repeating-linear-gradient(-45deg, rgba(198,255,0,.08) 0 4cqw, transparent 4cqw 10cqw); animation: corri 3s linear infinite; }
@keyframes corri { to { translate: 14.14cqw 0; } }
.gy-t { position: absolute; top: 13cqw; left: 7cqw; right: 5cqw; font: 400 22cqw/.9 Anton, sans-serif; text-transform: uppercase; color: #c6ff00; animation: scossa 2.4s steps(1) infinite; }
.gy-t span { display: block; margin-top: 1.5cqw; font-size: 12.5cqw; color: #fff; }
@keyframes scossa { 0%, 86%, 100% { translate: 0 0; } 89% { translate: -1.2cqw .6cqw; } 92% { translate: 1.2cqw -.6cqw; } 95% { translate: -.6cqw 0; } }
.gy-list { position: absolute; top: 68cqw; left: 7cqw; right: 7cqw; list-style: none; padding: 0; display: grid; gap: 4cqw; counter-reset: e; }
.gy-list li { counter-increment: e; display: flex; align-items: center; gap: 3.5cqw; font: 800 5.2cqw/1.15 Manrope, sans-serif; text-transform: uppercase; }
.gy-list li::before { content: counter(e); flex: none; display: grid; place-items: center; width: 10cqw; height: 10cqw; background: #c6ff00; color: #0b0b0b; font: 400 7cqw/1 Anton, sans-serif; rotate: -6deg; }
.gy-stop { position: absolute; left: 7cqw; bottom: 16cqw; padding: 1cqw 3.5cqw; border: 1cqw solid #ff3b3b; font: 400 13cqw/1 Anton, sans-serif; text-transform: uppercase; color: #ff3b3b; rotate: -8deg; animation: lampeggia 1s steps(1) infinite; }
@keyframes lampeggia { 50% { opacity: .25; } }
.gy-kb { position: absolute; right: 6cqw; bottom: 9cqw; width: 36cqw; animation: salta 1.2s ease-in-out infinite; }

/* contatti */
.s-cta { max-width: var(--max); margin: 0 auto; padding: 60px var(--pad) 120px; }
.s-cta__box {
  position: relative; display: grid; gap: 24px; justify-items: start;
  padding: clamp(40px, 7vw, 96px);
  background: var(--orange); border: var(--edge); border-radius: 36px;
  box-shadow: 12px 12px 0 var(--ink);
}
.s-cta__box h2 { font-size: clamp(42px, 6.2vw, 96px); line-height: .93; max-width: 11ch; }
.s-cta__box .lead { color: #1a1a1a; max-width: 44ch; font-size: 19px; }
.s-cta__box .st { pointer-events: none; }
.st--cta-heart { top: -38px; right: 8%; }
.st--cta-heart svg { width: 110px; height: 110px; fill: var(--pink); stroke: var(--ink); stroke-width: 1.2px; rotate: 12deg; }
.st--cta-spark { bottom: 12%; right: 14%; }
.st--cta-spark svg { width: 56px; height: 56px; fill: var(--yellow); stroke: var(--ink); stroke-width: 1px; }

/* piede */
.s-foot { border-top: var(--edge); }
.s-foot__in, .s-foot__legal { max-width: var(--max); margin: 0 auto; padding: 40px var(--pad); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.s-foot nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font-weight: 600; }
.s-foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.s-foot__legal { padding-top: 0; color: #777; font-size: 14px; }

@media (max-width: 1100px) and (min-width: 861px) {
  .s-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- telefono ---------- */
@media (max-width: 860px) {
  .s-hero { grid-template-columns: 1fr; padding-top: 100px; gap: 10px; }
  .s-title { font-size: clamp(50px, 15vw, 80px); }
  .s-stage { min-height: 520px; margin-bottom: 20px; }
  .phone { width: min(250px, 62vw); }
  .st--heart { left: 0; }
  .st--heart .st__in { width: 66px; height: 66px; }
  .st--heart svg { width: 32px; height: 32px; }
  .st--reel { right: 0; }
  .st--cal { left: 0; }
  .st--star { right: 0; }
  .st--star .st__in { width: 104px; height: 104px; }
  .st--star span { font-size: 12px; }
  .bands { height: 170px; }
  .s-sec, .s-reels { padding-block: 70px; }
  .s-cards { grid-template-columns: 1fr; }
  .s-card__icon { margin-bottom: 26px; }
  .s-path { display: none; }
  .s-steps ol { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .s-step__n { width: 70px; height: 70px; font-size: 30px; }
  .s-step h3 { font-size: 24px; }
  /* due schede intere e un pezzo della terza: si capisce che la fila scorre */
  .s-reels__row { justify-content: flex-start; gap: 18px; }
  .s-reel { width: 37vw; }
  .s-reel > h3 { font-size: 19px; }
  .st--cta-heart svg { width: 80px; height: 80px; }
  .st--cta-spark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-pop], .js .s-title .w, .js .s-in, .js .blob, .js .phone, .js .s-stage .st { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; transform: none; }
  .hl::before { transform: rotate(-2deg) scaleX(1); }
  .s-path path { stroke-dashoffset: 0; }
  .mk *, .mk *::after { animation: none !important; }
  .mn-draw path { stroke-dashoffset: 0; }
}