/* FERRO KIDS · Il bosco di Upa — V1 · world.css: scene illustrate e layout delle sezioni */

/* =====================================================================
   UPA — figura originale, ritaglio con maschera di impaginazione
   Il PNG originale (assets/upa-magliette-gouache.png) non viene modificato:
   la maschera assets/upa-crop-mask.png nasconde soltanto la scritta incorporata
   «UP UP UP» e lascia intatti zampe, artigli e punta della coda.
   La scatola .upa__crop è alta 1122/1254 della larghezza: taglia il vuoto sotto la coda.
   ===================================================================== */
.upa{position:relative;width:var(--upa-w,100%);margin-inline:auto;--bob:5px}
.upa__perch{position:relative}
.upa__crop{position:relative;aspect-ratio:1254/1122;overflow:hidden;transform-origin:50% 90%;animation:upa-bob 5.5s ease-in-out infinite}
.upa__img{display:block;width:100%;height:auto;-webkit-mask-image:url(assets/upa-crop-mask.png);mask-image:url(assets/upa-crop-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;filter:drop-shadow(0 14px 14px rgba(43,24,16,.22))}
.upa.is-up .upa__crop{animation:upa-hop .85s cubic-bezier(.3,1.5,.5,1) 1}
@keyframes upa-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(var(--bob)*-1)) rotate(-.6deg)}}
@keyframes upa-hop{0%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-6%) rotate(-3deg) scale(1.03,.98)}70%{transform:translateY(0) rotate(1deg) scale(1)}100%{transform:translateY(0) rotate(0)}}
.branch{position:absolute;z-index:0;left:-48%;top:0;width:196%;height:calc(100% + 9%);overflow:visible;pointer-events:none}
.upa__crop{z-index:2}
.up-words{position:absolute;z-index:4;right:-2%;top:-2%;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.up-words b{font-family:var(--f-hand);font-weight:400;font-size:clamp(1.9rem,5vw,3.3rem);line-height:.95;color:#5A2A14;opacity:0;-webkit-text-stroke:0;text-shadow:0 2px 0 rgba(255,255,255,.7)}
.up-words b:nth-child(2){margin-left:.7em}.up-words b:nth-child(3){margin-left:1.4em;color:var(--crest-ink)}
.upa.is-up .up-words b{animation:up-word 1.5s ease-out both}
.upa.is-up .up-words b:nth-child(2){animation-delay:.16s}.upa.is-up .up-words b:nth-child(3){animation-delay:.32s}
@keyframes up-word{0%{opacity:0;transform:translateY(24px) scale(.6)}22%{opacity:1;transform:translateY(0) scale(1.12)}75%{opacity:1;transform:translateY(-6px) scale(1)}100%{opacity:0;transform:translateY(-26px)}}
@media (prefers-reduced-motion:reduce){.upa.is-up .up-words b{opacity:1}}

/* piccola Upa su un ramo (pagine interne, fondo pagina) */
.upa--sm{--upa-w:min(100%,230px);--bob:3px}
.upa--xs{--upa-w:min(100%,150px);--bob:2px}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;background:var(--paper);isolation:isolate;overflow:hidden;overflow:clip}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.canopy{position:absolute;left:-24px;top:-10px;width:min(50vw,600px);height:auto}
.falls{position:absolute;z-index:1;inset:-4% -12% 0 -4%;pointer-events:none;--fall:540px}
.fall{position:absolute;left:var(--x);top:var(--y);width:var(--w,46px);color:var(--c,var(--crest));transform:rotate(var(--r0,0deg));animation:fall var(--d,20s) linear var(--delay,0s) infinite}
.fall svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes fall{from{transform:translate(0,-30px) rotate(var(--r0,0deg));opacity:0}8%{opacity:1}50%{transform:translate(calc(var(--dx,30px)*.5),calc(var(--fall)*.5)) rotate(calc(var(--r0,0deg) + 140deg))}92%{opacity:1}to{transform:translate(var(--dx,30px),var(--fall)) rotate(calc(var(--r0,0deg) + 300deg));opacity:0}}
.hero__inner{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-areas:"copy stage";gap:clamp(12px,3vw,48px);align-items:center;min-height:clamp(600px,calc(100svh - var(--header-h)),840px);padding-block:clamp(48px,5.4vw,84px) clamp(20px,3.4vw,52px)}
.hero .stage{grid-area:stage;position:relative;padding-block:5% 4%}
.hero .copy{grid-area:copy;position:relative;z-index:3}
.stage::before{content:"";position:absolute;z-index:0;left:50%;top:48%;width:116%;aspect-ratio:1/1;transform:translate(-50%,-50%) rotate(-8deg);border-radius:58% 42% 52% 48% / 46% 56% 44% 54%;background:radial-gradient(circle at 36% 30%,#EAF6EC 0%,#C3E5DD 42%,#8FCFC8 100%);box-shadow:0 14px 0 rgba(43,24,16,.08)}
.stage::after{content:"";position:absolute;z-index:0;left:2%;bottom:7%;width:34%;aspect-ratio:1/1;border-radius:50% 50% 46% 54%;background:var(--amber);opacity:.95;box-shadow:0 8px 0 rgba(43,24,16,.08)}
.hero .stage .upa{z-index:2;--upa-w:min(100%,560px)}
.bubble{position:absolute;z-index:5;left:1%;top:6%;max-width:46%;margin:0;padding:10px 18px 12px;background:#fff;border:2.5px solid var(--ink);border-radius:26px 26px 26px 6px;font-family:var(--f-hand);font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.1;transform:rotate(-4deg);box-shadow:0 5px 0 rgba(43,24,16,.18)}
.seal{position:absolute;z-index:5;right:0;bottom:6%;width:clamp(96px,13vw,148px);aspect-ratio:1/1;filter:drop-shadow(0 5px 0 rgba(43,24,16,.18))}
.seal svg{width:100%;height:100%;display:block;animation:seal-spin 36s linear infinite}
@keyframes seal-spin{to{transform:rotate(360deg)}}
.hero .eyebrow{margin-bottom:.9rem}
.hero h1{margin-bottom:.25em}
.hero h1 em{font-style:italic;color:var(--crest-ink);background:linear-gradient(transparent 60%,rgba(245,181,68,.75) 60% 88%,transparent 88%);padding-inline:.04em;white-space:nowrap}
.hero .lede{margin-bottom:1rem}
.ritual{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 1.5rem;font-size:1.08rem;font-weight:700}
.up-trigger{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:2px dashed var(--ink);border-radius:999px;background:#fff;font-family:var(--f-hand);font-size:1.55rem;line-height:1;color:var(--crest-ink);cursor:pointer;transition:transform .15s,background .15s}
.up-trigger:hover{background:var(--paper-2);transform:rotate(-2deg) scale(1.03)}
.hero .btn-row{margin-bottom:1.6rem}
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;list-style:none}
.pick__lead{margin:0 0 .6rem;font-weight:900;font-size:.9rem;letter-spacing:.02em;color:var(--ink-2)}
.pick a{display:grid;justify-items:start;gap:2px;height:100%;padding:12px 14px 14px;border:2px solid var(--ink);border-radius:20px;background:#fff;text-decoration:none;box-shadow:0 4px 0 rgba(43,24,16,.9);transition:transform .15s,box-shadow .15s;min-height:92px}
.pick a:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink)}
.pick .dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;margin-bottom:6px;color:var(--ink);background:var(--tone)}
.pick .dot svg{width:20px;height:20px}
.pick b{font-weight:900;font-size:1rem;line-height:1.15}
.pick small{font-size:.82rem;font-weight:800;color:var(--ink-2)}
.tone-night{--tone:#9DB5F0}.tone-autumn{--tone:var(--autumn)}.tone-spring{--tone:#BFE08A}

@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr;grid-template-areas:"stage" "copy";min-height:0;gap:6px;padding-top:14px}
  .hero .stage{padding-block:2% 2%;margin-inline:calc(var(--gutter)*-.2)}
  .hero .stage .upa{--upa-w:min(78vw,340px)}
  .stage::before{width:104%;top:46%}
  .stage::after{left:4%;width:30%}
  .bubble{left:3%;top:3%;max-width:44%;font-size:1.2rem;padding:8px 14px 10px}
  .seal{right:3%;bottom:6%;width:92px}
  .falls{--fall:360px}
  .canopy{width:78vw}
  .pick{gap:8px}
  .pick a{padding:10px 10px 12px;min-height:88px}
  .pick b{font-size:.92rem}
}
@media(max-width:380px){.pick small{font-size:.76rem}.pick b{font-size:.86rem}}

/* =====================================================================
   BORDI DI CARTA (svg tra le sezioni) e fasce libri
   ===================================================================== */
.edge{position:absolute;left:0;top:-1px;width:100%;height:clamp(26px,4.4vw,60px);fill:var(--edge,var(--paper));z-index:3;pointer-events:none;display:block}
.band{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding-block:clamp(72px,10vw,132px) clamp(64px,9vw,112px)}
.band__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,84px);align-items:center;position:relative;z-index:2}
.band--flip .band__cover{order:2}
.band__cover{position:relative;justify-self:center;width:min(100%,var(--cw,400px))}
.band__cover .book{position:relative;display:block;transform:rotate(var(--tilt,-3deg));transition:transform .3s ease}
.band__cover a:hover .book,.band__cover a:focus-visible .book{transform:rotate(0deg) scale(1.02)}
.book img{width:100%;border-radius:4px 10px 10px 4px;box-shadow:0 30px 50px -22px rgba(0,0,0,.65),0 3px 0 rgba(255,255,255,.18) inset}
.book::before{content:"";position:absolute;inset:0 auto 0 0;width:7%;border-radius:4px 0 0 4px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.12) 55%,rgba(0,0,0,0));z-index:2;pointer-events:none}
.band__body h2{margin-bottom:.15em}
.band__sub{font-family:var(--f-hand);font-size:clamp(1.4rem,2.5vw,2rem);margin:0 0 1rem;line-height:1.1}
.band__pitch{font-size:1.14rem;max-width:34em}
.band .tick{max-width:38em}
.flag{position:absolute;z-index:4;bottom:7%;right:-26px;display:grid;place-items:center;width:104px;aspect-ratio:1;border-radius:50%;background:var(--moon);color:var(--night);font-family:var(--f-hand);font-size:1.15rem;line-height:1;text-align:center;transform:rotate(10deg);border:2.5px solid var(--night);box-shadow:0 5px 0 rgba(0,0,0,.3)}
.peek{position:absolute;z-index:3;bottom:0;width:var(--pw,170px);pointer-events:none;transform:translateY(var(--py,34%))}
.peek img{width:100%}

.band--night{background:var(--night);color:#F6EFE0;--eyebrow:var(--moon)}
.band--night::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(circle at 12% 18%,rgba(247,232,168,.95) 0 2px,transparent 3px),
  radial-gradient(circle at 28% 62%,rgba(247,232,168,.8) 0 1.6px,transparent 3px),
  radial-gradient(circle at 44% 10%,rgba(255,255,255,.85) 0 1.8px,transparent 3px),
  radial-gradient(circle at 63% 34%,rgba(247,232,168,.9) 0 2.2px,transparent 3px),
  radial-gradient(circle at 78% 80%,rgba(255,255,255,.75) 0 1.6px,transparent 3px),
  radial-gradient(circle at 90% 22%,rgba(247,232,168,.85) 0 2px,transparent 3px),
  radial-gradient(circle at 6% 84%,rgba(255,255,255,.7) 0 1.6px,transparent 3px),
  radial-gradient(circle at 54% 90%,rgba(247,232,168,.8) 0 1.8px,transparent 3px),
  radial-gradient(120% 90% at 85% 0%,#1d3a77 0%,transparent 60%)}
.moon{position:absolute;z-index:1;right:8%;top:11%;width:clamp(84px,11vw,150px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 34%,#FFF6CC 0 34%,#F7E8A8 62%,#E6D07F 100%);box-shadow:0 0 0 14px rgba(247,232,168,.1),0 0 70px 20px rgba(247,232,168,.22);pointer-events:none}
.snow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.snow i{position:absolute;top:-6px;left:var(--x);width:var(--s,6px);aspect-ratio:1;border-radius:50%;background:#fff;opacity:.85;animation:snow var(--d,14s) linear var(--delay,0s) infinite}
@keyframes snow{to{transform:translate(var(--dx,24px),calc(100% * 120))}}
@media (prefers-reduced-motion:reduce){.snow{display:none}}

.band--autumn{background:var(--autumn);color:var(--ink);--eyebrow:#6E2504;--cw:420px}
.band--autumn::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 80% at 8% 100%,rgba(242,106,27,.35),transparent 70%),radial-gradient(40% 60% at 100% 0%,rgba(255,236,170,.7),transparent 70%)}
.band--spring{background:var(--spring);color:var(--ink);--eyebrow:#365018}
.band--spring::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 70% at 100% 100%,rgba(127,160,74,.4),transparent 70%),radial-gradient(40% 50% at 0% 0%,rgba(255,255,255,.55),transparent 70%)}
.band--autumn .chip,.band--spring .chip{background:rgba(255,255,255,.62)}
.band--autumn .chip--lang,.band--spring .chip--lang{background:var(--ink)}
.band--autumn .btn:not(.btn--buy):not(.btn--ghost),.band--spring .btn:not(.btn--buy):not(.btn--ghost){background:#fff}
.band--autumn .btn:not(.btn--buy):not(.btn--ghost):hover{background:#fff6e0}.band--spring .btn:not(.btn--buy):not(.btn--ghost):hover{background:#f4ffe0}

.books-head{max-width:46rem;margin:0 auto;text-align:center;padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,72px)}
.books-head .eyebrow{justify-content:center}
.books-head .eyebrow::before{display:none}
.voice{display:inline-block;margin:.4rem 0 0;padding:10px 20px 12px;background:#fff;border:2.5px solid var(--ink);border-radius:26px 26px 26px 6px;font-family:var(--f-hand);font-size:1.35rem;line-height:1.15;transform:rotate(-1.5deg);box-shadow:0 5px 0 rgba(43,24,16,.14);color:var(--ink);max-width:30rem}

@media(max-width:900px){
  .band__grid{grid-template-columns:1fr;gap:34px}
  .band--flip .band__cover{order:0}
  .band__cover{--cw:min(72vw,340px)}
  .peek{--pw:120px}
  .flag{width:88px;font-size:1rem;right:-8px}
}

/* =====================================================================
   GUARDATE DENTRO — pagine vere sul tavolo
   ===================================================================== */
.desk{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--forest);color:var(--paper);padding-block:clamp(72px,10vw,124px) clamp(64px,9vw,112px);--eyebrow:var(--amber)}
.desk::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 50% 0%,#2f5640,transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 38px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 38px)}
.desk__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 56px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.desk__head p{margin:0;max-width:30em}
.fan{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;padding-inline:3%;list-style:none}
.fan li{position:relative;transform:rotate(var(--rot,0deg)) translateY(var(--dy,0));margin-inline:-1.8%;transition:transform .25s ease,z-index 0s;z-index:var(--z,1)}
.fan li:hover,.fan li:focus-within{transform:rotate(0deg) translateY(-14px) scale(1.06);z-index:20}
.pageb{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;border-radius:6px;box-shadow:0 22px 30px -16px rgba(0,0,0,.7);position:relative;overflow:hidden}
.pageb img{width:100%;aspect-ratio:var(--ar,3/4);object-fit:cover;object-position:top}
.pageb__lab{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:3px 10px;border-radius:999px;background:rgba(253,248,236,.95);color:var(--ink);font-size:.72rem;font-weight:900;line-height:1.4;display:none}
.desk .hint{margin:clamp(28px,4vw,48px) 0 0;text-align:center;font-weight:800;color:rgba(253,248,236,.88)}

@media(max-width:900px){
  .desk__head{grid-template-columns:1fr}
  .fan{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;padding-inline:0}
  .fan li{margin-inline:0}
  .pageb__lab{display:block}
}

/* =====================================================================
   AMICI — il palcoscenico del bosco
   ===================================================================== */
.cast{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--sage);padding-block:clamp(72px,10vw,128px) clamp(56px,8vw,104px);--eyebrow:#365018}
.cast::before{content:"";position:absolute;z-index:-1;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(127,160,74,.3))}
.cast__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:20px 48px;align-items:end;margin-bottom:clamp(40px,6vw,76px)}
.cast__head p{margin:0}
.cast__stage{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(10px,2vw,28px);align-items:end}
.friend{position:relative;--s:1;--h:clamp(220px,25vw,330px)}
.friend a{display:grid;justify-items:center;text-align:center;text-decoration:none;gap:0}
.friend__fig{position:relative;display:flex;align-items:flex-end;justify-content:center;height:calc(var(--h)*var(--s));width:100%}
.friend__fig::before{content:"";position:absolute;z-index:0;left:50%;bottom:-8px;width:78%;height:26px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(60,90,40,.55),rgba(60,90,40,0) 100%)}
.friend__fig::after{content:"";position:absolute;z-index:0;left:50%;bottom:-2px;width:66%;height:20px;transform:translateX(-50%);border-radius:60% 60% 40% 40%/100% 100% 30% 30%;background:var(--leaf);box-shadow:inset 0 5px 0 rgba(255,255,255,.22)}
.friend__fig img{position:relative;z-index:1;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;object-position:bottom;transition:transform .28s ease;filter:drop-shadow(0 10px 8px rgba(43,24,16,.18))}
.friend a:hover .friend__fig img,.friend a:focus-visible .friend__fig img{transform:translateY(-10px) rotate(-2.5deg)}
.friend__tag{position:relative;z-index:2;margin-top:18px;padding:5px 20px 7px;border-radius:12px;background:#6B4226;color:var(--paper);font-family:var(--f-display);font-weight:800;font-size:1.3rem;line-height:1.1;transform:rotate(var(--rot,-1.5deg));box-shadow:0 4px 0 rgba(43,24,16,.25)}
.friend__tag::before,.friend__tag::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:rgba(253,248,236,.55)}
.friend__tag::before{left:8px}.friend__tag::after{right:8px}
.friend__line{margin-top:10px;max-width:17em;font-size:.95rem;line-height:1.35;font-weight:700;color:#35261c}
.friend--framed .friend__fig{align-items:center}
.friend--framed .friend__fig::before,.friend--framed .friend__fig::after{display:none}
.frame{position:relative;display:block;width:min(100%,calc(var(--h)*.78));transform:rotate(2.5deg);padding:9px 9px 9px;background:#fff;box-shadow:0 18px 26px -14px rgba(43,24,16,.55);transition:transform .28s ease}
.frame img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:none}
.frame::before{content:"";position:absolute;left:50%;top:-12px;width:64px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(245,181,68,.78)}
.friend--framed a:hover .frame,.friend--framed a:focus-visible .frame{transform:rotate(-1deg) scale(1.03)}
.friend--framed .friend__fig img{transform:none!important}

@media(max-width:900px){
  .cast__head{grid-template-columns:1fr}
  .cast__stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 14px}
  .friend{--h:min(52vw,250px)}
  .friend:nth-child(even){margin-top:34px}
  .friend__tag{font-size:1.15rem}
}

/* =====================================================================
   PER I GENITORI
   ===================================================================== */
.parents{position:relative;background:var(--paper);padding-block:clamp(72px,10vw,128px) clamp(60px,8vw,96px)}
.parents__top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
.parents__intro{position:sticky;top:96px}
.parents__intro .peek-inline{display:block;width:min(66%,300px);margin:18px 0 0}
.reasons{list-style:none;counter-reset:r;margin-left:22px;padding-left:clamp(26px,4vw,48px);border-left:4px dotted rgba(43,24,16,.3)}
.reasons li{position:relative;counter-increment:r;padding-bottom:clamp(24px,3.4vw,40px)}
.reasons li:last-child{padding-bottom:0}
.reasons li::before{content:counter(r);position:absolute;left:calc(-1*clamp(26px,4vw,48px) - 25px);top:-2px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--tone,var(--crest-2));color:var(--ink);border:2.5px solid var(--ink);font-family:var(--f-hand);font-size:1.5rem;line-height:1}
.reasons li:nth-child(1){--tone:var(--autumn)}.reasons li:nth-child(2){--tone:#BFE08A}.reasons li:nth-child(3){--tone:#9DB5F0}.reasons li:nth-child(4){--tone:#F9B7A0}.reasons li:nth-child(5){--tone:#C3E5DD}
.reasons h3{margin-bottom:.25em}
.reasons p{margin:0;max-width:34em}
.pick-guide{margin-top:clamp(56px,8vw,104px)}
.pick-guide__head{max-width:42rem;margin-bottom:34px}
.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;grid-auto-rows:auto}
.compare__col{display:grid;grid-template-rows:auto auto repeat(5,auto) auto;grid-row:span 8;row-gap:0;background:#fff;border:2.5px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:0 6px 0 rgba(43,24,16,.9)}
@supports (grid-template-rows:subgrid){.compare__col{grid-template-rows:subgrid}}
.compare__top{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:16px 18px;border-bottom:2.5px solid var(--ink);background:var(--tone)}
.compare__top img{width:72px;border-radius:3px 6px 6px 3px;box-shadow:0 8px 12px -6px rgba(0,0,0,.5)}
.compare__top h3{margin:0;font-size:1.25rem}
.compare__age{margin:0;padding:12px 18px 0;font-family:var(--f-hand);font-size:2rem;line-height:1.1;color:var(--crest-ink)}
.compare__row{padding:10px 18px 0;margin:0}
.compare__row dt{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.compare__row dd{margin:2px 0 0;line-height:1.45;font-weight:700}
.compare__buy{padding:18px;align-self:end;display:grid;gap:10px}
.compare__buy .btn{min-height:48px;padding-inline:16px;font-size:.95rem}
.faq{margin-top:clamp(56px,8vw,104px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px);align-items:start}
.faq__fig{width:min(70%,260px);margin-top:10px}
.faq details{border-bottom:2.5px solid rgba(43,24,16,.18)}
.faq details:first-of-type{border-top:2.5px solid rgba(43,24,16,.18)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 4px;font-family:var(--f-display);font-weight:800;font-size:1.2rem;line-height:1.2;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;border:2.5px solid var(--ink);background:linear-gradient(var(--ink),var(--ink)) center/14px 3px no-repeat,linear-gradient(var(--ink),var(--ink)) center/3px 14px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--autumn)}
.faq details p{padding:0 4px 18px;margin:0;max-width:38em}
@media(max-width:900px){
  .parents__top,.faq{grid-template-columns:1fr}
  .parents__intro{position:static}
  .compare{grid-template-columns:1fr;gap:26px}
  .compare__col{grid-row:auto;grid-template-rows:none}
  .parents__intro .peek-inline{width:min(46%,200px)}
}

/* =====================================================================
   CHI SIAMO e invito finale
   ===================================================================== */
.about{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--autumn);--eyebrow:#6E2504;padding-block:clamp(72px,10vw,128px)}
.about::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(50% 70% at 0% 100%,rgba(242,106,27,.32),transparent 70%),radial-gradient(40% 60% at 100% 0%,rgba(255,244,200,.75),transparent 70%)}
.about__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,6vw,96px);align-items:center}
.about h2{font-size:clamp(2.2rem,5.4vw,4.6rem)}
.about p{font-size:1.15rem;max-width:34em}
.about__upa{display:grid;justify-items:center}
.about .signature{margin-top:1rem;font-family:var(--f-hand);font-size:1.6rem}
.cta{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--forest);color:var(--paper);padding-block:clamp(80px,11vw,140px) clamp(72px,9vw,112px);text-align:center;--eyebrow:var(--amber)}
.cta::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(70% 60% at 50% 0%,#37624a,transparent 70%)}
.cta h2{font-size:clamp(2.4rem,6.4vw,5.4rem)}
.cta .eyebrow{justify-content:center}.cta .eyebrow::before{display:none}
.cta__lede{max-width:34em;margin:0 auto 2.4rem;font-size:1.15rem}
.buys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1000px;margin:0 auto;list-style:none;text-align:left}
.buy{display:grid;grid-template-columns:84px 1fr;gap:6px 16px;align-items:center;padding:16px;border-radius:var(--r);background:rgba(253,248,236,.08);border:2px solid rgba(253,248,236,.35)}
.buy img{grid-row:span 3;width:84px;border-radius:3px 6px 6px 3px;box-shadow:0 10px 14px -8px rgba(0,0,0,.7)}
.buy h3{margin:0;font-size:1.15rem}
.buy p{margin:0;font-size:.88rem;font-weight:700;color:rgba(253,248,236,.85)}
.buy .btn{grid-column:1/-1;margin-top:8px;min-height:48px;font-size:.95rem}
.cta .upa{position:absolute;left:50%;top:0;transform:translate(-50%,-62%);--upa-w:150px}
@media(max-width:900px){
  .about__grid{grid-template-columns:1fr}
  .about__upa{order:-1}
  .buys{grid-template-columns:1fr}
}

/* footer: Talpa spunta dalla terra */
.ground{position:relative;height:96px;overflow:hidden;background:var(--paper)}
.ground img{position:absolute;left:50%;bottom:-150px;width:150px;transform:translateX(-50%) rotate(-3deg)}
.ground::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:var(--paper-2);border-radius:50% 50% 0 0/100% 100% 0 0}

/* =====================================================================
   PAGINE LIBRO
   ===================================================================== */
.bk-hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding-block:clamp(28px,4vw,52px) clamp(64px,9vw,112px)}
.bk-hero .band__grid{padding-top:clamp(8px,2vw,28px)}
.crumb{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 clamp(22px,3vw,40px);font-weight:800;font-size:.92rem}
.crumb a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:2px solid currentColor}
.crumb span{opacity:.75}
.bk-hero h1{font-size:clamp(2.6rem,6.2vw,5rem)}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;margin:0;padding:22px 24px;border:2.5px solid var(--ink);border-radius:var(--r);background:#fff;box-shadow:0 6px 0 rgba(43,24,16,.9)}
.specs div{min-width:0}
.specs dt{font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.specs dd{margin:2px 0 0;font-weight:800;line-height:1.35}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec--tint{background:var(--paper-2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.here{display:grid;gap:18px}
.honest{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.7);border:2px dashed currentColor;font-size:.95rem;line-height:1.5;font-weight:700;margin:0 0 1.2rem}
.honest svg{width:22px;height:22px;flex:none;margin-top:2px}
.on-dark .honest{background:rgba(255,255,255,.08)}
.previews{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,28px);list-style:none;margin-top:30px}
.previews li:nth-child(odd){transform:rotate(-1.2deg)}.previews li:nth-child(even){transform:rotate(1deg) translateY(10px)}
.previews .pageb{box-shadow:0 18px 26px -14px rgba(43,24,16,.6);border:6px solid #fff}
.previews .pageb__lab{display:block}
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;list-style:none;margin-top:30px}
.more a{display:grid;grid-template-columns:92px 1fr;gap:6px 20px;align-items:center;padding:18px;border:2.5px solid var(--ink);border-radius:var(--r);background:#fff;text-decoration:none;box-shadow:0 5px 0 rgba(43,24,16,.9);transition:transform .15s}
.more a:hover{transform:translateY(-3px)}
.more img{grid-row:span 3;width:92px;border-radius:3px 6px 6px 3px;box-shadow:0 10px 14px -8px rgba(0,0,0,.5)}
.more h3{margin:0}.more p{margin:0;font-weight:700}.more small{font-weight:900;color:var(--crest-ink)}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .previews{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more{grid-template-columns:1fr}
}

/* =====================================================================
   PAGINE PERSONAGGIO
   ===================================================================== */
.ch-hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--tone,var(--autumn));padding-block:clamp(28px,4vw,52px) clamp(56px,8vw,96px);--eyebrow:#5a2a14}
.ch-hero::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(60% 70% at 85% 60%,rgba(255,255,255,.55),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgba(43,24,16,.12),transparent 70%)}
.ch-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:center}
.ch-hero h1{font-size:clamp(3.4rem,9vw,7.6rem);margin-bottom:.1em}
.tagline{font-family:var(--f-hand);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1;margin:0 0 1.1rem;color:#5a2a14}
.ch-fig{position:relative;justify-self:center;width:min(100%,460px)}
.ch-fig .pic{position:relative;display:grid;place-items:end center;aspect-ratio:1/1.12}
.ch-fig .pic::before{content:"";position:absolute;inset:6% 4% 2%;border-radius:55% 45% 50% 50%/48% 52% 48% 52%;background:rgba(255,255,255,.62);box-shadow:0 12px 0 rgba(43,24,16,.08)}
.ch-fig img{position:relative;max-height:100%;width:auto;max-width:92%;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(43,24,16,.22))}
.ch-fig .frame{width:min(100%,430px);margin-inline:auto}
.ch-fig .frame img{max-width:100%;width:100%}
.caption{margin:14px 0 0;text-align:center;font-weight:800;font-size:.92rem}
.traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;list-style:none;margin-top:30px}
.trait{position:relative;padding:26px 24px 28px;background:var(--note,#FFF1A8);border-radius:6px 6px 22px 6px;box-shadow:0 14px 20px -12px rgba(43,24,16,.5);transform:rotate(var(--rot,-1.2deg))}
.trait::before{content:"";position:absolute;left:50%;top:-12px;width:60px;height:22px;transform:translateX(-50%) rotate(2deg);background:rgba(43,24,16,.18)}
.trait:nth-child(1){--note:#FFEFA0;--rot:-1.6deg}.trait:nth-child(2){--note:#CFE8B0;--rot:1.2deg;margin-top:14px}.trait:nth-child(3){--note:#FAC7B2;--rot:-.6deg}
.trait h3{margin-bottom:.3em}.trait p{margin:0;font-weight:700}
.story-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.quote-bubble{position:relative;padding:clamp(28px,4vw,48px);background:#fff;border:3px solid var(--ink);border-radius:36px 36px 36px 8px;box-shadow:0 8px 0 rgba(43,24,16,.9)}
.quote-bubble h2{margin:0;font-size:clamp(1.8rem,3.8vw,3rem)}
.quote-bubble .eyebrow{margin-bottom:.8rem}
.crew{list-style:none;display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:26px}
.crew a{display:grid;justify-items:center;gap:4px;width:92px;text-decoration:none;font-weight:900;font-size:.9rem}
.crew .av{display:grid;place-items:end center;width:76px;height:76px;border-radius:50%;background:var(--paper-2);border:2.5px solid var(--ink);overflow:hidden}
.crew .av img{width:88%;height:auto;max-height:100%;object-fit:contain;object-position:bottom}
.crew .av.sq img{width:100%;height:100%;object-fit:cover}
.crew a[aria-current=page] .av{background:var(--autumn);box-shadow:0 0 0 4px var(--crest)}
.crew a:hover .av{background:var(--autumn)}
.voice-box{margin-top:1.4rem;max-width:30rem}
@media(max-width:900px){
  .ch-hero__grid,.story-card{grid-template-columns:1fr}
  .ch-fig{--w:min(78vw,380px);width:min(86vw,400px)}
  .traits{grid-template-columns:1fr;gap:34px}
  .trait:nth-child(2){margin-top:0}
}

/* =====================================================================
   VALIDAZIONE (scelte creative)
   ===================================================================== */
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:30px 0}
.asset{display:flex;flex-direction:column;gap:6px;padding:20px;border:2.5px solid var(--ink);border-radius:var(--r);background:#fff;box-shadow:0 5px 0 rgba(43,24,16,.9)}
.asset img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--paper-2);border-radius:12px;padding:10px}
.asset label{font-weight:900;font-size:.85rem;margin-top:8px}
.asset select,.asset textarea{width:100%;min-height:46px;padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);font:inherit}
.asset textarea{min-height:84px;resize:vertical}
.status{min-height:1.6em;font-weight:800}
.decisions{display:grid;gap:12px;margin:22px 0 40px}
.decisions li{margin-left:1.2em}

/* Upa ritagliata in contesti piccoli (palcoscenico, avatar) */
.friend__fig .upa__crop{width:min(100%,calc(var(--h)*var(--s)*1.1));aspect-ratio:1254/1122;animation:none;position:relative;z-index:1;transition:transform .28s ease}
.friend__fig .upa__img{width:100%;height:auto;max-width:none;max-height:none;object-fit:fill;transition:none}
.friend a:hover .upa__crop,.friend a:focus-visible .upa__crop{transform:translateY(-10px) rotate(-2.5deg)}
.av .upa__crop{animation:none;width:128%;margin-left:-14%;margin-top:6%;aspect-ratio:1254/1122}
.av .upa__img{width:100%;height:auto;max-height:none;object-fit:fill;filter:none}

.crew--solo{justify-content:center;margin-top:0}
.crew--solo a{width:170px;font-size:1.05rem}
.crew--solo .av{width:150px;height:150px}

/* contrasto: eyebrow su fondi ambra/tono personaggio */
.band--autumn .eyebrow,.about .eyebrow,.ch-hero .eyebrow,.bk-hero--autumn .eyebrow,.bk-hero--spring .eyebrow{color:#6e2300}

/* mobile: i piccoli ospiti non coprono il testo */
@media(max-width:900px){
  .band:not(.bk-hero){padding-bottom:150px}
  .band .peek{width:108px!important}
}
/* V9: small additions within Claude's visual direction. */
.hero-book-note{font-size:.86rem;max-width:34rem;margin-top:1rem}
.listen-row{margin:.5rem 0 1.2rem;font-size:.84rem}
.listen-upa{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px dashed currentColor;padding:.25rem 0;cursor:pointer}
.listen-upa:focus-visible{outline:3px solid var(--crest);outline-offset:5px}
[data-voice-status]{display:block;font-size:.78rem;margin-top:.25rem}
.choice-note{margin:2rem 0;max-width:48rem}
.free-page{background:var(--paper);padding:3.5rem 0}
.free-page__grid{display:grid;grid-template-columns:200px 1fr;gap:3rem;max-width:900px;align-items:center}
.free-page__grid img{width:100%;height:auto;transform:rotate(-3deg);box-shadow:0 9px 25px #30251a22}
.free-page__grid p{max-width:38rem}
.digital-preview video{display:block;width:min(100%,360px);height:auto;margin:auto;border-radius:12px;box-shadow:0 12px 30px #30251a22}
@media(max-width:600px){.free-page__grid{grid-template-columns:1fr;gap:1.5rem}.free-page__grid>a{width:140px;margin:auto}.free-page{padding:2.5rem 0}.hero-book-note{font-size:.8rem}.free-page h2{font-size:2rem}}

/* Remove only low-opacity surrounding haze in Svelta's existing alpha, without repainting the character. */
img[src$="svelta-hello-v2.png"]{filter:url(#svelta-clean)}
.ch-fig:has(img[src$="svelta-hello-v2.png"]){width:min(100%,560px)}
.ch-fig .pic:has(img[src$="svelta-hello-v2.png"]){aspect-ratio:1.12;place-items:center}
.ch-fig img[src$="svelta-hello-v2.png"]{max-width:100%}