/* =========================================================
   GIOCOVIVO · quiz "Di che colore è il tuo Natale?"
   Foglio di stile autonomo: tutto è dentro #quiz-natale (.xq)
   Font: Italiana (ufficiale del sito) + Cinzel (capitale romana, dritto) + DM Sans
   ========================================================= */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cinzel-latin-400-normal.woff2) format('woff2')}

html.xq-lock,html.xq-lock body{overflow:hidden}
.xq{--gold:#c9a86a;--gold2:#e9cf8e;--ivo:#f6f0e8;--res:#5b304c;--resg:#b06a95;
  position:fixed;inset:0;z-index:10010;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  color:var(--ivo);font-family:'DM Sans',sans-serif;background:#0c1110;opacity:0;transition:opacity .5s ease}
.xq[hidden]{display:none}
.xq.open{opacity:1}
.xq *{box-sizing:border-box}
.xq-glow{position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(60vmax 50vmax at 12% 0%,rgba(14,90,61,.55),transparent 60%),
  radial-gradient(55vmax 45vmax at 100% 100%,rgba(91,48,76,.6),transparent 60%),
  radial-gradient(40vmax 30vmax at 85% 8%,rgba(201,168,106,.12),transparent 60%);transition:background .8s}
.xq[data-screen="r"] .xq-glow{background:
  radial-gradient(60vmax 50vmax at 15% 10%,color-mix(in srgb,var(--res) 70%,transparent),transparent 62%),
  radial-gradient(50vmax 40vmax at 95% 95%,rgba(201,168,106,.16),transparent 60%)}
.xq-snow{position:fixed;inset:0;pointer-events:none}
.xq-wrap{position:relative;min-height:100%;display:flex;flex-direction:column;padding:0 clamp(16px,4vw,56px) max(28px,env(safe-area-inset-bottom))}

/* testa */
.xq-top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 calc(-1 * clamp(16px,4vw,56px));padding:max(26px,env(safe-area-inset-top)) clamp(26px,5.5vw,72px) 16px;background:linear-gradient(rgba(12,17,16,.92) 50%,rgba(12,17,16,0))}
.xq-brand{display:flex;align-items:center;gap:12px;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(246,240,232,.7)}
.xq-brand img{display:block;width:84px;height:auto;opacity:.9}
.xq-dots{display:flex;gap:clamp(6px,1.2vw,14px);list-style:none;margin:0;padding:0;color:var(--gold)}
.xq-dots li{width:clamp(16px,1.9vw,22px);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s;opacity:.55;transform-origin:50% 0}
.xq-dots li svg{display:block;width:100%;height:auto;overflow:visible}
.xq-dots li.on{opacity:1}
.xq-dots li.cur{opacity:1;animation:xqSwing 2.4s ease-in-out infinite}
.xq-close{justify-self:end;width:44px;height:44px;border-radius:50%;border:1px solid rgba(201,168,106,.5);background:rgba(12,17,16,.4);color:var(--ivo);font-size:1.45rem;line-height:1;cursor:pointer;transition:.3s}
.xq-close:hover,.xq-close:focus-visible{background:var(--gold);color:#0c1110;border-color:var(--gold)}

/* palco */
.xq-stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:1120px;margin:0 auto;padding:clamp(8px,2vh,28px) 0 clamp(20px,4vh,48px)}
.xs{width:100%;animation:xsIn .7s cubic-bezier(.2,.8,.2,1) both}
.xs.out{animation:xsOut .38s ease both}
@keyframes xsIn{from{opacity:0;transform:translateY(22px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes xsOut{to{opacity:0;transform:translateY(-14px);filter:blur(3px)}}
.xk{margin:0 0 14px;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.it{font-family:Italiana,serif;font-weight:400}
.sc{font-family:Cinzel,serif;font-weight:400;font-style:normal;text-transform:uppercase;letter-spacing:.1em;color:var(--gold2)}
.xq [tabindex="-1"]:focus,.xq [tabindex="-1"]:focus-visible{outline:none;box-shadow:none}
.xt{margin:0;line-height:.95;font-weight:400}
.xt .it{display:block;font-size:clamp(2.5rem,6.2vw,5.6rem);letter-spacing:.01em}
.xt .sc{display:block;font-size:clamp(1.45rem,7.2vw,5rem);letter-spacing:.06em;line-height:1.1;margin-top:.3em}
.xt.small .it{font-size:clamp(2rem,4.2vw,3.6rem)}.xt.small .sc{font-size:clamp(1.3rem,5.6vw,3.2rem)}

/* pulsanti */
.xb{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:500 .66rem/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:transform .3s,background .3s,color .3s,box-shadow .3s;border:1px solid transparent}
.xb-gold{background:linear-gradient(135deg,#e9cf8e,#c9a86a 55%,#a8854a);color:#1a140c;box-shadow:0 10px 30px rgba(201,168,106,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.xb-gold:hover,.xb-gold:focus-visible{transform:translateY(-2px);box-shadow:0 16px 40px rgba(201,168,106,.38),inset 0 1px 0 rgba(255,255,255,.5)}
.xb-line{background:transparent;color:var(--ivo);border-color:rgba(201,168,106,.6)}
.xb-line:hover,.xb-line:focus-visible{background:rgba(201,168,106,.14);border-color:var(--gold)}

/* intro */
.xs-intro{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:820px;margin:0 auto}
.xi-orn{height:clamp(110px,16vh,170px);display:flex;justify-content:center;margin-bottom:6px}
.xi-swing{position:relative;width:clamp(64px,8vw,92px);display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:xqSwing 3.6s ease-in-out infinite}
.xi-thread{width:1px;height:clamp(34px,6vh,62px);background:linear-gradient(transparent,var(--gold))}
.xi-cap{width:26%;height:12px;border-radius:3px 3px 1px 1px;background:linear-gradient(90deg,#8a6a2f,#e9cf8e,#8a6a2f)}
.xi-ball{width:100%;aspect-ratio:1;border-radius:50%;margin-top:-2px;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 22%),radial-gradient(circle at 50% 55%,var(--c1,#0e5a3d),#06120c 100%);box-shadow:0 0 40px rgba(201,168,106,.25);animation:xqBall 10s linear infinite}
@keyframes xqBall{0%,100%{--c1:#0e5a3d;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 22%),radial-gradient(circle at 50% 55%,#167a54,#06120c)}
  20%{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 22%),radial-gradient(circle at 50% 55%,#8a4b74,#1a0b14)}
  40%{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 22%),radial-gradient(circle at 50% 55%,#e2c27e,#4a3410)}
  60%{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 22%),radial-gradient(circle at 50% 55%,#c42a35,#2a0508)}
  80%{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),rgba(255,255,255,0) 22%),radial-gradient(circle at 50% 55%,#f4f1ec,#8e959e)}}
@keyframes xqSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.xd{max-width:560px;margin:22px auto 26px;line-height:1.8;color:rgba(246,240,232,.78);font-size:clamp(.95rem,1.15vw,1.05rem)}
.xi-cols{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;list-style:none;margin:0 0 30px;padding:0}
.xi-cols li{display:flex;align-items:center;gap:8px;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,240,232,.72)}
.xi-cols i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 12px var(--c)}
.xi-meta{display:block;margin-top:16px;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,240,232,.5)}

/* domanda */
.xs-q{max-width:1080px;margin:0 auto}
.xq-num{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.xq-num .sc{font-size:clamp(1.3rem,2.3vw,2.1rem);line-height:1}
.xq-num .of{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(246,240,232,.55)}
.xq-q{font-family:Italiana,serif;font-weight:400;font-size:clamp(2rem,4.2vw,3.9rem);line-height:1.02;margin:0 0 clamp(22px,4vh,44px);max-width:920px;outline:none}
.xq-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.xo{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;text-align:left;padding:24px 22px 26px;min-height:100%;border-radius:26px;cursor:pointer;color:var(--ivo);font:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(201,168,106,.25);backdrop-filter:blur(2px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .45s,opacity .4s;animation:xoIn .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
@keyframes xoIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.xo:hover,.xo:focus-visible{transform:translateY(-6px);border-color:var(--gold);background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));box-shadow:0 22px 50px rgba(0,0,0,.35),0 0 0 1px rgba(201,168,106,.3),0 0 40px color-mix(in srgb,var(--c) 35%,transparent);outline:none}
.xo.picked{border-color:var(--gold2);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 45%,transparent),rgba(255,255,255,.04));box-shadow:0 0 0 1px var(--gold2),0 0 60px color-mix(in srgb,var(--c) 55%,transparent);transform:translateY(-6px) scale(1.02)}
.xo.dim{opacity:.35;transform:scale(.97)}
.xo-orb{display:flex;flex-direction:column;align-items:center;width:58px;flex:0 0 auto;transform-origin:50% 0;transition:transform .5s}
.xo:hover .xo-orb,.xo:focus-visible .xo-orb{animation:xqSwing 1.6s ease-in-out infinite}
.xo-cap{width:16px;height:7px;border-radius:2px 2px 1px 1px;background:linear-gradient(90deg,#8a6a2f,#e9cf8e,#8a6a2f)}
.xo-ball{position:relative;width:58px;height:58px;border-radius:50%;margin-top:-1px;display:grid;place-items:center;color:rgba(255,255,255,.95);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),rgba(255,255,255,0) 26%),radial-gradient(circle at 50% 60%,var(--c),color-mix(in srgb,var(--c) 40%,#000) 100%);box-shadow:inset 0 -6px 14px rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.35)}
.xo-orb[style] .xo-ball{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),rgba(255,255,255,0) 26%),var(--sw)}
.xo-ball svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.xo-txt{display:flex;flex-direction:column;gap:8px}
.xo-txt b{font-family:Italiana,serif;font-weight:400;font-size:clamp(1.35rem,1.7vw,1.6rem);line-height:1.08}
.xo-txt span{font-size:.86rem;line-height:1.55;color:rgba(246,240,232,.66)}
.xo.picked .xo-txt span{color:rgba(246,240,232,.9)}
.xq-nav{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(18px,3vh,30px);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,240,232,.5)}
.xq-back{background:none;border:0;color:var(--ivo);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:12px 0;opacity:.8}
.xq-back:disabled{opacity:.25;cursor:default}

/* pacchetto */
.xs-wrap{text-align:center}
.xw-gift{position:relative;width:120px;height:120px;margin:0 auto 28px}
.xw-box{position:absolute;left:10px;right:10px;bottom:0;height:78px;background:linear-gradient(135deg,#167a54,#0e5a3d 60%,#08301f);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.xw-lid{position:absolute;left:2px;right:2px;top:26px;height:22px;z-index:2;background:linear-gradient(135deg,#1c8a60,#0e5a3d);border-radius:10px;animation:xwLid 1.7s ease-in-out infinite}
.xw-rib{position:absolute;left:50%;top:26px;bottom:0;width:14px;margin-left:-7px;z-index:3;background:linear-gradient(90deg,#a8854a,#e9cf8e,#a8854a)}
.xw-bow{position:absolute;left:50%;top:6px;width:54px;height:26px;margin-left:-27px;z-index:4;background:radial-gradient(ellipse 13px 11px at 13px 13px,transparent 55%,#e0c27e 57%,#c9a86a 80%,transparent 82%),radial-gradient(ellipse 13px 11px at 41px 13px,transparent 55%,#e0c27e 57%,#c9a86a 80%,transparent 82%);animation:xwLid 1.7s ease-in-out infinite}
@keyframes xwLid{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-10px) rotate(-4deg)}60%{transform:translateY(-6px) rotate(3deg)}}

/* risultato */
.xs-r{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(22px,4vw,56px);align-items:start;max-width:1120px;margin:0 auto}
.xr-card{position:relative;overflow:hidden;border-radius:30px;aspect-ratio:4/5;max-height:78vh;width:100%;isolation:isolate;background:var(--c);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,106,.3)}
.xr-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.12);transition:transform 2.4s cubic-bezier(.2,.8,.2,1)}
.xr-card.open>img{transform:scale(1)}
.xr-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,color-mix(in srgb,var(--c) 78%,transparent) 62%,color-mix(in srgb,var(--c) 96%,#000) 100%)}
.xr-roman{position:absolute;top:4%;right:7%;font-family:Italiana,serif;font-size:clamp(5rem,10vw,9rem);line-height:1;color:rgba(255,255,255,.18)}
.xr-in{position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,3.4vw,44px);opacity:0;transform:translateY(16px);transition:opacity .8s .9s,transform .9s .9s cubic-bezier(.2,.8,.2,1)}
.xr-card.open .xr-in{opacity:1;transform:none}
.xr-in small{display:block;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.xr-in h3{margin:8px 0 10px;font-weight:400;line-height:.9}
.xr-in h3 .it{display:block;font-size:clamp(3rem,5.6vw,5.2rem);color:#fff}
.xr-in h3 .sc{display:block;font-size:clamp(1.8rem,4vw,3.3rem);letter-spacing:.06em;margin-top:.25em}
.xr-in p{margin:0;line-height:1.7;font-size:clamp(.88rem,1.05vw,.98rem);color:rgba(255,255,255,.92)}
.xr-pal{display:flex;gap:8px;margin-top:18px}
.xr-pal i{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
.xr-rib{position:absolute;z-index:3;background:linear-gradient(90deg,#a8854a,#f1dca6,#a8854a);transition:transform 1s cubic-bezier(.7,0,.2,1)}
.xr-rib.v{left:50%;top:0;bottom:0;width:26px;margin-left:-13px}
.xr-rib.h{top:46%;left:0;right:0;height:26px;background:linear-gradient(180deg,#a8854a,#f1dca6,#a8854a)}
.xr-bow{position:absolute;z-index:4;left:50%;top:46%;width:120px;height:64px;margin:-38px 0 0 -60px;transition:transform .8s cubic-bezier(.7,0,.2,1),opacity .6s;
  background:radial-gradient(ellipse 28px 24px at 30px 32px,transparent 52%,#f1dca6 55%,#c9a86a 78%,transparent 81%),radial-gradient(ellipse 28px 24px at 90px 32px,transparent 52%,#f1dca6 55%,#c9a86a 78%,transparent 81%),radial-gradient(circle 12px at 60px 32px,#e9cf8e 60%,transparent 64%)}
.xr-card.open .xr-rib.v{transform:translateY(-105%)}
.xr-card.open .xr-rib.h{transform:translateX(105%)}
.xr-card.open .xr-bow{transform:translateY(-140%) scale(.6) rotate(-20deg);opacity:0}
.xr-side{display:flex;flex-direction:column;gap:22px;padding-top:6px;animation:xsIn .9s .5s cubic-bezier(.2,.8,.2,1) both}
.xr-magic{position:relative;padding:24px 28px 26px;border-radius:26px;border:1px solid rgba(201,168,106,.45);background:linear-gradient(160deg,rgba(201,168,106,.12),rgba(255,255,255,.02))}
.xr-magic .sc{display:block;margin-bottom:10px;font-size:.8rem;letter-spacing:.3em}
.xr-magic p{margin:0;font-family:Italiana,serif;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.18}
.xr-keys{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.xr-keys li{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(246,240,232,.25);padding:9px 13px;border-radius:999px;color:rgba(246,240,232,.85)}
.xr-actions{display:flex;flex-wrap:wrap;gap:10px}.xr-actions .xb{flex:1 1 auto;white-space:nowrap;padding:0 22px}
.xr-meters{display:grid;gap:9px}
.xm{display:grid;grid-template-columns:128px 1fr 40px;gap:12px;align-items:center;font-size:.66rem;letter-spacing:.08em;color:rgba(246,240,232,.75)}
.xm div{height:4px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.xm i{display:block;height:100%;width:0;background:var(--c);box-shadow:0 0 10px var(--c);border-radius:4px;transition:width 1.6s 1s cubic-bezier(.2,.8,.2,1)}
.xm b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.xr-mail{border:1px solid rgba(201,168,106,.22);border-radius:26px;padding:24px 26px 22px;background:rgba(255,255,255,.03);display:grid;gap:10px}
.xr-mail h4{margin:0 0 4px;font-weight:400;line-height:1}
.xr-mail h4 .it{font-size:1.7rem}.xr-mail h4 .sc{font-size:1rem}
.xr-f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xr-mail input[type=text],.xr-mail input[type=email]{width:100%;min-height:50px;padding:0 16px;border:1px solid rgba(246,240,232,.25);background:rgba(255,255,255,.05);color:var(--ivo);font:inherit;font-size:16px;border-radius:16px}
.xr-mail input::placeholder{color:rgba(246,240,232,.5)}
.xr-mail input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.08)}
.xr-mail .ck{display:flex;gap:10px;align-items:flex-start;font-size:.74rem;line-height:1.5;color:rgba(246,240,232,.65);cursor:pointer}
.xr-mail .ck input{margin-top:3px;width:16px;height:16px;accent-color:var(--gold);flex:0 0 auto}
.xr-mail .ck a{color:var(--gold2)}
.xr-mail .xb{justify-self:start}
.xr-mail .msg{margin:0;font-size:.82rem;min-height:1em}
.xr-mail .msg.ok{color:#9fd8b8}.xr-mail .msg.err{color:#f0a3a3}
.xr-more{display:flex;flex-wrap:wrap;gap:12px 28px}
.xr-more button{background:none;border:0;border-bottom:1px solid rgba(201,168,106,.6);padding:6px 0;color:var(--ivo);font:500 .6rem/1 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}

/* effetti */
.xq-spark{position:absolute;z-index:20;width:7px;height:7px;border-radius:50%;pointer-events:none;box-shadow:0 0 10px currentColor;animation:xqSpark .9s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes xqSpark{from{transform:translate(-50%,-50%) scale(var(--s));opacity:1}to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0);opacity:0}}
.xq-confetti{position:fixed;inset:0;pointer-events:none;z-index:30}

/* tablet */
@media (max-width:1024px){
 .xq-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .xo{flex-direction:row;align-items:center}
 .xs-r{grid-template-columns:1fr;max-width:620px}
 .xr-card{max-height:none}
}
/* telefono */
@media (max-width:640px){
 .xq-wrap{padding:0 16px max(24px,env(safe-area-inset-bottom))}
 .xq-wrap:before, .xq-top{grid-template-columns:auto 1fr auto;margin:0 -16px;padding:max(14px,env(safe-area-inset-top)) 16px 10px}
 .xq-brand span{display:none}.xq-brand img{width:64px}
 .xq-dots{justify-content:center}
 .xq-close{width:42px;height:42px}
 .xq-stage{align-items:flex-start;padding-top:6px}
 .xs-intro{padding-top:2vh}
 .xi-cols{gap:8px 12px}
 .xt .sc{font-size:8.2vw;letter-spacing:.03em}.xt.small .sc{font-size:6.4vw}
 .xq-q{font-size:clamp(1.85rem,8.4vw,2.3rem);margin-bottom:18px}
 .xq-opts{grid-template-columns:1fr;gap:10px}
 .xo{flex-direction:row;align-items:center;gap:14px;padding:14px 16px 14px 12px;min-height:84px;border-radius:22px}
 .xo:hover{transform:none}
 .xo.picked{transform:scale(1.01)}
 .xo-orb{width:46px}.xo-ball{width:46px;height:46px}.xo-ball svg{width:22px;height:22px}.xo-cap{width:13px;height:6px}
 .xo-txt{gap:4px}.xo-txt b{font-size:1.28rem}.xo-txt span{font-size:.8rem;line-height:1.45}
 .xq-nav span{display:none}
 .xr-card{aspect-ratio:4/5.2;border-radius:24px}
 .xr-mail{padding:20px 18px}
 .xr-in h3 .it{font-size:clamp(2.6rem,12vw,3.4rem)}.xr-in h3 .sc{font-size:clamp(1.8rem,10vw,2.5rem)}
 .xr-actions{grid-template-columns:1fr}
 .xr-actions .xb{width:100%;white-space:normal;text-align:center;line-height:1.4}
 .xr-f{grid-template-columns:1fr}
 .xr-mail .xb{justify-self:stretch}
 .xm{grid-template-columns:104px 1fr 36px;font-size:.6rem}
 .xr-magic p{font-size:1.45rem}
}
/* schermi bassi (telefoni in orizzontale, portatili piccoli) */
@media (max-height:560px) and (orientation:landscape){
 .xi-orn{display:none}
 .xq-stage{align-items:flex-start}
 .xq-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .xo{flex-direction:row;align-items:center;padding:12px}
}
/* telefoni in orizzontale: risultato su due colonne */
@media (max-height:560px) and (orientation:landscape) and (min-width:640px){
 .xs-r{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);max-width:none;gap:24px}
 .xr-in{padding:20px}.xr-in h3 .it{font-size:2.4rem}.xr-in h3 .sc{font-size:2rem}.xr-in p{font-size:.8rem;line-height:1.5}
 .xr-pal{margin-top:10px}.xr-pal i{width:20px;height:20px}
 .xt .it{font-size:2.6rem}.xt .sc{font-size:2.2rem}.xd{margin:12px auto 14px}.xi-cols{margin-bottom:16px}
 .xq-q{font-size:1.9rem;margin-bottom:16px}.xq-num .sc{font-size:1.1rem}
}
/* schermi grandi: tutto respira in proporzione */
@media (min-width:1700px) and (min-height:860px){
 .xq-stage{max-width:1400px}.xs-q{max-width:1400px}.xs-r{max-width:1400px}.xs-intro{max-width:1000px}
 .xt .it{font-size:6.6rem}.xt .sc{font-size:5.6rem}.xt.small .it{font-size:4rem}.xt.small .sc{font-size:3.4rem}
 .xd{font-size:1.2rem;max-width:660px}.xi-cols li{font-size:.68rem}.xk{font-size:.7rem}
 .xi-swing{width:110px}.xi-orn{height:200px}
 .xb{min-height:60px;padding:0 34px;font-size:.74rem}
 .xq-num .sc{font-size:2.5rem}.xq-num .of{font-size:.66rem}
 .xq-q{font-size:4.6rem;max-width:1200px}
 .xo{padding:30px 28px 32px;gap:22px}.xo-orb,.xo-ball{width:74px}.xo-ball{height:74px}.xo-ball svg{width:36px;height:36px}.xo-cap{width:20px;height:9px}
 .xo-txt b{font-size:2rem}.xo-txt span{font-size:1rem}
 .xq-nav,.xq-brand{font-size:.68rem}.xq-brand img{width:100px}.xq-dots li{width:26px}.xq-close{width:52px;height:52px}
 .xr-in h3 .it{font-size:6rem}.xr-in h3 .sc{font-size:4.4rem}.xr-in p{font-size:1.1rem}
 .xr-magic p{font-size:2.4rem}.xr-keys li{font-size:.66rem}
 .xm{font-size:.76rem;grid-template-columns:150px 1fr 48px}.xr-mail h4 .it{font-size:2rem}.xr-mail h4 .sc{font-size:1.2rem}
 .xr-mail .ck{font-size:.84rem}.xr-more button{font-size:.68rem}
}
@media (min-width:2300px) and (min-height:1200px){
 .xq{font-size:18px}
 .xq-stage,.xs-q,.xs-r{max-width:1760px}.xs-intro{max-width:1240px}
 .xt .it{font-size:8.4rem}.xt .sc{font-size:7rem}.xd{font-size:1.45rem;max-width:820px}
 .xi-swing{width:140px}.xi-orn{height:260px}.xk,.xi-cols li{font-size:.8rem}
 .xb{min-height:72px;padding:0 42px;font-size:.9rem}
 .xq-num .sc{font-size:3.2rem}.xq-num .of,.xq-nav{font-size:.8rem}
 .xq-q{font-size:5.8rem;max-width:1500px}
 .xo{padding:38px 34px 40px}.xo-orb,.xo-ball{width:92px}.xo-ball{height:92px}.xo-ball svg{width:44px;height:44px}.xo-cap{width:24px;height:11px}
 .xo-txt b{font-size:2.5rem}.xo-txt span{font-size:1.2rem}
 .xq-brand{font-size:.8rem}.xq-brand img{width:124px}.xq-dots li{width:32px}.xq-close{width:62px;height:62px;font-size:1.8rem}
 .xr-in h3 .it{font-size:7.4rem}.xr-in h3 .sc{font-size:5.4rem}.xr-in p{font-size:1.3rem}.xr-in small{font-size:.8rem}.xr-pal i{width:38px;height:38px}
 .xr-magic p{font-size:3rem}.xr-keys li{font-size:.8rem;padding:12px 18px}
 .xm{font-size:.92rem;grid-template-columns:190px 1fr 60px}.xm div{height:6px}
 .xr-mail h4 .it{font-size:2.5rem}.xr-mail h4 .sc{font-size:1.5rem}.xr-mail input[type=text],.xr-mail input[type=email]{min-height:64px;font-size:1.1rem}
 .xr-mail .ck{font-size:1rem}.xr-more button{font-size:.8rem}
}
/* ===== Risultato: tutto in uno schermo, card protagonista ===== */
.xq[data-screen="r"] .xq-stage{max-width:none}
.xs-r{--ch:clamp(400px,calc(100svh - 190px),860px);display:grid;grid-template-columns:auto minmax(300px,500px);gap:clamp(28px,4.5vw,72px);align-items:center;justify-content:center;max-width:none;width:100%;margin:0 auto}
.xr-card{height:var(--ch);width:auto;max-width:100%;aspect-ratio:4/5;max-height:none;border-radius:32px;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(233,207,142,.28),0 0 160px -30px var(--c);animation:xrFloat 7s ease-in-out 2.6s infinite}
.xr-card.tilt{transition:transform .12s linear;animation:none}
@keyframes xrFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.xr-glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.32),rgba(255,255,255,0) 48%);mix-blend-mode:soft-light}
.xr-card.tilt .xr-glare{opacity:1}
.xr-in h3 .sc{background:linear-gradient(100deg,#c9a86a 0%,#f3e1ad 30%,#fffaf0 45%,#f3e1ad 60%,#c9a86a 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:xrShine 5s ease-in-out 2.2s infinite}
@keyframes xrShine{0%{background-position:100% 0}55%,100%{background-position:-60% 0}}
.xr-side{gap:clamp(14px,2.2vh,24px);padding:0;width:100%}
.xr-magic{order:1;padding:0;border:0;background:none;border-radius:0}
.xr-magic .sc{margin-bottom:10px}
.xr-magic p{font-size:clamp(1.6rem,2.3vw,2.3rem);line-height:1.15}
.xr-keys{order:2;margin:0;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;line-height:2.1;color:rgba(246,240,232,.72)}
.xr-keys i{font-style:normal;color:var(--gold);margin:0 .75em;font-size:.8em}
.xr-meters{order:3;gap:7px}
.xr-actions{order:4;display:grid;grid-template-columns:1.25fr 1fr;gap:10px}
.xr-actions .xb{width:auto;padding:0 16px;white-space:nowrap;letter-spacing:.14em}
.xr-more{order:5;gap:10px 24px}
.xr-mail{order:6;animation:xsIn .5s both}
.xr-mail[hidden]{display:none}
/* telefoni e tablet in verticale: card a tutto schermo + azioni subito sotto */
@media (max-width:900px),(orientation:portrait) and (max-width:1100px){
 .xs-r{display:flex;flex-direction:column;align-items:stretch;gap:12px;max-width:600px}
 .xr-side{display:contents}
 .xr-card{width:100%;height:clamp(360px,calc(100svh - 168px),820px);aspect-ratio:auto;animation:none}
 .xr-actions{margin-top:2px;order:1}.xr-magic{order:2}.xr-keys{order:3}.xr-meters{order:4}.xr-more{order:5}.xr-mail{order:6}
 .xr-magic{margin-top:22px}
 .xr-side>*{animation:xsIn .8s .7s cubic-bezier(.2,.8,.2,1) both}
 .xr-mail{animation:xsIn .5s both}
}
@media (max-width:640px){
 .xr-card{border-radius:26px;height:clamp(340px,calc(100svh - 156px),760px)}
 .xr-in{padding:22px 22px 24px}
 .xr-actions{grid-template-columns:1.3fr 1fr;gap:8px}
 .xr-actions .xb{min-height:50px;padding:0 10px;font-size:.6rem;letter-spacing:.1em;white-space:nowrap;line-height:1}
 .xr-magic p{font-size:1.5rem}
 .xr-roman{font-size:4.6rem}
}
@media (max-height:560px) and (orientation:landscape){
 .xs-r{--ch:clamp(250px,calc(100svh - 96px),460px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
 .xr-side{display:flex}
 .xr-card{height:var(--ch);width:auto;aspect-ratio:4/5}
 .xr-in{padding:16px}.xr-in small{font-size:.5rem}.xr-in h3{margin:4px 0 6px}.xr-in h3 .it{font-size:2rem}.xr-in h3 .sc{font-size:1.4rem}.xr-in p{display:none}.xr-pal{display:none}
 .xr-magic p{font-size:1.25rem}.xr-roman{font-size:3.4rem}
}
@media (min-width:1700px) and (min-height:860px){
 .xs-r{grid-template-columns:auto minmax(340px,600px)}
 .xr-magic p{font-size:2.6rem}.xr-keys{font-size:.7rem}
}
@media (min-width:2300px) and (min-height:1200px){
 .xs-r{--ch:clamp(400px,calc(100svh - 240px),1160px);grid-template-columns:auto minmax(400px,760px)}
 .xr-magic p{font-size:3.3rem}.xr-keys{font-size:.86rem}
 .xr-actions .xb{min-height:72px}
}
@media (prefers-reduced-motion:reduce){
 .xq *,.xq *:before,.xq *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}