/* Mariaclara 10.8.0 — pagine speciali: rituale, mappa della pelle, glossario, ruota, compleanno, regala un momento,
   sfida del mese, preventivo Nozze, QR della tessera, parallax a linee. Nessun filtro pesante: tutto leggero. */
html body .sp{position:relative;overflow:hidden;isolation:isolate;color:#3a2a45;background-color:#fcfaf7;background-image:url("../decor/pearl-aurora-top.svg"),url("../decor/pearl-aurora-bottom.svg"),radial-gradient(70% 40% at 8% 10%,#fde9f1aa,transparent 70%),radial-gradient(60% 40% at 94% 55%,#efe3f5aa,transparent 70%);background-position:center top,center bottom,0 0,0 0;background-size:100% auto,100% auto,100% 100%,100% 100%;background-repeat:no-repeat;padding:clamp(34px,6vw,70px) 0 clamp(50px,8vw,96px)}
html body .sp-in{position:relative;z-index:1;width:min(1100px,calc(100% - 32px));margin-inline:auto}
html body .sp-narrow{width:min(760px,calc(100% - 32px))}
html body .sp-eyebrow{display:inline-block;font:700 .74rem/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#b0782a}
html body .sp h2{font-size:clamp(1.5rem,4.2vw,2.3rem);line-height:1.15;margin:.35em 0 .35em;color:#3a2a45;text-wrap:balance}
html body .sp h2 em{font-style:italic;color:#c1397e}
html body .sp-lead{margin:0 0 22px;font-size:1.03rem;line-height:1.6;color:#6a5670;max-width:62ch}
html body .sp-head{margin-bottom:22px}
html body .sp-card{background:linear-gradient(180deg,#fff,#fffaf2);border:1px solid #e7cb92;border-radius:24px;padding:clamp(18px,3vw,28px);box-shadow:0 16px 40px #6e462820,inset 0 1px 0 #fff;min-width:0}
html body .sp-off{padding:36px 20px;text-align:center}
html body .sp-off h3{margin:0 0 8px;font-size:1.3rem;color:#3a2a45}
html body .sp-off p{margin:0;color:#6a5670}
html body .sp-note{margin:18px 0 0;font-size:.86rem;color:#8a7790}
/* pulsanti e chip: vetro lucido, niente backdrop-filter */
html body .sp-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:99px;font:700 1rem/1 system-ui,sans-serif;letter-spacing:.02em;text-decoration:none;cursor:pointer;border:1px solid rgba(255,255,255,.85);color:#3b2a0e;background:linear-gradient(135deg,#fbefc6,#e8c370 55%,#c99840);box-shadow:0 12px 26px #b9873a55,inset 0 1px 0 #fff;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
html body .sp-btn::after{content:"";position:absolute;inset:0 0 50%;border-radius:inherit;background:linear-gradient(180deg,#ffffffb0,#fff0);pointer-events:none;z-index:-1}
html body .sp-btn:hover,html body .sp-btn:focus-visible{transform:translateY(-2px);box-shadow:0 18px 34px #b9873a66,inset 0 1px 0 #fff}
html body .sp-btn:disabled{opacity:.55;cursor:default;transform:none}
html body .sp-btn.rose{color:#fff;background:linear-gradient(135deg,#f08ab5,#d63d85 60%,#b02a6b);box-shadow:0 12px 26px #c1397e55,inset 0 1px 0 #ffffff90}
html body .sp-btn.ghost{background:#fff;color:#3a2a45;box-shadow:0 8px 20px #6e462822}
html body .sp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;padding:0;list-style:none}
html body .sp-chip{min-height:44px;padding:0 20px;border-radius:99px;border:1px solid #e7cb92;background:#fff;color:#3a2a45;font:600 .95rem system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 16px #6e462814;transition:transform .25s,box-shadow .25s,background .25s}
html body .sp-chip:hover{transform:translateY(-2px)}
html body .sp-chip[aria-pressed="true"]{background:linear-gradient(135deg,#fbefc6,#e8c370 60%,#c99840);color:#3b2a0e;border-color:#fff;box-shadow:0 10px 22px #b9873a55}
html body .sp-chip:focus-visible,html body .sp-btn:focus-visible,html body .sp-zone:focus-visible{outline:3px solid #c1397e;outline-offset:3px}
html body .sp-field{display:grid;gap:6px;font-weight:600;font-size:.92rem;color:#4a3556;min-width:0}
html body .sp-field input,html body .sp-field select,html body .sp-field textarea{width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px;border:1px solid #e0cfa6;border-radius:14px;background:#fff;font:400 1rem system-ui,sans-serif;color:#3a2a45}
html body .sp-field textarea{min-height:90px;resize:vertical}
html body .sp-field input:focus,html body .sp-field select:focus,html body .sp-field textarea:focus{outline:3px solid #f0b6d0;border-color:#c1397e}
html body .sp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* rituale */
html body .sp-rit{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
html body .sp-rit article{position:relative;display:grid;gap:12px;align-content:start}
html body .sp-rit h3{margin:0;font-size:1.25rem;color:#3a2a45}
html body .sp-rit .tag{justify-self:start;font:700 .72rem system-ui;letter-spacing:.14em;text-transform:uppercase;color:#b0782a;background:#fff4dc;border:1px solid #ecd49e;border-radius:99px;padding:6px 12px}
html body .sp-rit ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
html body .sp-rit li{counter-increment:s;position:relative;padding-left:44px;line-height:1.5;color:#4a3556}
html body .sp-rit li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 .9rem system-ui;color:#3b2a0e;background:linear-gradient(135deg,#fbefc6,#e8c370);border:1px solid #fff;box-shadow:0 4px 10px #b9873a44}
html body .sp-timer{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
html body .sp-timer output{font:700 1.5rem ui-monospace,monospace;color:#c1397e;min-width:4.2ch}
/* mappa della pelle */
html body .sp-map{display:grid;gap:26px;grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start}
html body .sp-fig{position:relative;border-radius:28px;padding:14px;background:linear-gradient(180deg,#fff,#fdf3f7);border:1px solid #e7cb92;box-shadow:0 16px 40px #6e462820}
html body .sp-fig svg{display:block;width:100%;height:auto}
html body .sp-zone{cursor:pointer;outline:none}
html body .sp-zone .z{fill:#f6dce8;stroke:#d9ab53;stroke-width:1.4;transition:fill .25s,transform .25s;transform-box:fill-box;transform-origin:center}
html body .sp-zone:hover .z,html body .sp-zone:focus-visible .z{fill:#f3b7d1}
html body .sp-zone.on .z{fill:#e0488c;stroke:#fff}
html body .sp-zone text{font:600 11px system-ui;fill:#3a2a45;pointer-events:none}
html body .sp-zone.on text{fill:#fff}
html body .sp-fig .body{fill:#fbeef3;stroke:#ecd49e;stroke-width:1}
html body .sp-zone[data-zone=occhi] .z,html body .sp-zone[data-zone=labbra] .z{fill:#fff;fill-opacity:.8}
html body .sp-zone.on[data-zone=occhi] .z,html body .sp-zone.on[data-zone=labbra] .z{fill:#e0488c;fill-opacity:1}
html body .sp-res h3{margin:0 0 4px;font-size:1.4rem}
html body .sp-res ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
html body .sp-res li{padding:14px 16px;border:1px solid #ecd9ac;border-radius:18px;background:#fff;display:grid;gap:4px}
html body .sp-res li strong{color:#3a2a45}
html body .sp-res li span{color:#6a5670;font-size:.95rem}
html body .sp-res li a{justify-self:start;margin-top:6px;color:#c1397e;font-weight:700;text-decoration:none}
@media (max-width:780px){html body .sp-map{grid-template-columns:1fr}html body .sp-fig{max-width:340px;margin-inline:auto}}
/* glossario */
html body .sp-search{position:sticky;top:8px;z-index:3;margin:0 0 18px}
html body .sp-search input{width:100%;box-sizing:border-box;min-height:54px;padding:0 20px;border-radius:99px;border:1px solid #e7cb92;background:#fff;font:400 1.05rem system-ui;color:#3a2a45;box-shadow:0 10px 26px #6e462822}
html body .sp-search input:focus{outline:3px solid #f0b6d0}
html body .sp-gloss{display:grid;gap:12px;margin:0}
html body .sp-gloss div{padding:16px 18px;border:1px solid #ecd9ac;border-radius:20px;background:#fff;box-shadow:0 8px 22px #6e46281a}
html body .sp-gloss dt{font-weight:700;font-size:1.1rem;color:#3a2a45}
html body .sp-gloss dt small{display:inline-block;margin-right:10px;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;background:linear-gradient(135deg,#fbefc6,#e8c370);color:#3b2a0e;font-size:.9rem}
html body .sp-gloss dd{margin:6px 0 0;color:#5a4562;line-height:1.55}
/* ruota */
html body .sp-wheel-wrap{display:grid;justify-items:center;gap:22px}
html body .sp-wheel{position:relative;width:min(360px,86vw);aspect-ratio:1}
html body .sp-wheel>svg:first-child{display:block;width:100%;height:100%;filter:drop-shadow(0 18px 24px #6e46283a)}
html body .sp-wheel .rot{transform-origin:50% 50%;transition:transform 5.2s cubic-bezier(.12,.7,.1,1)}
html body .sp-wheel .sp-pin{position:absolute;left:50%;top:-16px;width:34px;height:44px;margin-left:-17px;z-index:2;filter:drop-shadow(0 4px 6px #0003);transform:rotate(180deg)}
html body .sp-hub{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#fffbe9,#e8c370 58%,#b98a37);border:3px solid #fff;box-shadow:0 8px 20px #3a22108c;font:700 .8rem system-ui;color:#3b2a0e;text-align:center;cursor:pointer}
html body .sp-legend{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
html body .sp-legend li{font-size:.85rem;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid #ecd9ac;color:#5a4562}
html body .sp-win{text-align:center;display:grid;gap:10px;justify-items:center;animation:spPop .6s cubic-bezier(.2,.9,.3,1.2) both}
html body .sp-win h3{margin:0;font-size:1.6rem;color:#3a2a45}
html body .sp-code{font:700 clamp(1.6rem,6vw,2.2rem) ui-monospace,monospace;letter-spacing:.2em;color:#c1397e;background:#fff;border:2px dashed #e0488c;border-radius:16px;padding:10px 20px}
html body .sp-win p{margin:0;color:#6a5670}
@keyframes spPop{from{opacity:0;transform:scale(.86) translateY(12px)}to{opacity:1;transform:none}}
/* compleanno */
html body .sp-months{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));margin:0 0 20px}
html body .sp-months .sp-chip{width:100%;text-transform:capitalize}
/* sfida */
html body .sp-sfida{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:clamp(22px,4vw,38px);color:#fff7e6;background:radial-gradient(90% 120% at 100% 0,#7a2f66,transparent 60%),linear-gradient(135deg,#3a1d47,#5b2a6a 55%,#7a2f66);box-shadow:0 26px 60px #3a1d4755;border:1px solid #e7cb92}
html body .sp-sfida h2{color:#fff;margin-top:.2em}
html body .sp-sfida .sp-eyebrow{color:#f4dba4}
html body .sp-sfida p{margin:0 0 16px;color:#f0dff0;max-width:60ch}
html body .sp-bar{height:22px;border-radius:99px;background:#ffffff26;border:1px solid #ffffff55;overflow:hidden;box-shadow:inset 0 2px 6px #0004}
html body .sp-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#f7e3b0,#e0488c);box-shadow:0 0 18px #f7a8c8;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
html body .sp-sf-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-weight:700}
html body .sp-sf-meta span:last-child{color:#f4dba4}
html body .sp-sfida small{display:block;margin-top:8px;color:#e3cfe8}
html body .sp-sec-home{padding:clamp(30px,5vw,56px) 0;background:var(--pearl,#fbf9f4)}
/* preventivo e QR */
html body .sp-form{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
html body .sp-form .wide{grid-column:1/-1}
html body .sp-checks{display:flex;flex-wrap:wrap;gap:10px;border:0;margin:0;padding:0;min-width:0}
html body .sp-checks legend{font-weight:600;font-size:.92rem;margin-bottom:8px;color:#4a3556;padding:0}
html body .sp-checks label{position:relative}
html body .sp-checks input{position:absolute;opacity:0;inset:0;cursor:pointer}
html body .sp-checks span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;border:1px solid #e7cb92;background:#fff;color:#3a2a45;font-weight:600;font-size:.93rem;transition:background .2s}
html body .sp-checks input:checked+span{background:linear-gradient(135deg,#fbefc6,#e8c370);color:#3b2a0e;box-shadow:0 8px 18px #b9873a44}
html body .sp-checks input:focus-visible+span{outline:3px solid #c1397e;outline-offset:2px}
html body .sp-qr{display:grid;justify-items:center;gap:10px;text-align:center;margin-top:20px}
html body .sp-qr canvas{width:min(220px,60vw);height:auto;border-radius:18px;border:1px solid #e7cb92;background:#fff;padding:10px;box-shadow:0 12px 28px #6e462826}
html body .sp-qr p{margin:0;font-size:.9rem;color:#6a5670;max-width:34ch}
/* regala un momento */
html body .sp-occ{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));margin:0 0 30px}
html body .sp-occ a{display:grid;gap:6px;padding:20px;border-radius:22px;text-decoration:none;color:#3a2a45;background:linear-gradient(180deg,#fff,#fff7f0);border:1px solid #e7cb92;box-shadow:0 12px 28px #6e462822;transition:transform .3s,box-shadow .3s}
html body .sp-occ a:hover,html body .sp-occ a:focus-visible{transform:translateY(-4px);box-shadow:0 20px 38px #6e462833}
html body .sp-occ strong{font-size:1.1rem}
html body .sp-occ span{font-size:.9rem;color:#6a5670}
html body .sp-occ b{color:#c1397e;font-size:.9rem}
/* link nella pagina "per te" */
html body .sp-hubgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
/* parallax a linee: sempre dietro ai testi, mai sopra */
html body .px{position:absolute;z-index:0;pointer-events:none;width:min(720px,90vw);aspect-ratio:2/3;background-size:contain;background-repeat:no-repeat;will-change:transform;opacity:.9}
html body .px-gold{background-image:url("../decor/px-gold.svg")}
html body .px-rose{background-image:url("../decor/px-rose.svg")}
html body .px.l{left:-18%;top:6%}
html body .px.r{right:-18%;top:34%}
html body .px.b{left:-10%;bottom:-8%}
html body .px.t{right:-12%;top:-6%}
@media (max-width:700px){html body .px{width:120vw;opacity:.7}}
@media (prefers-reduced-motion:reduce){html body .px{will-change:auto}html body .sp-wheel .rot,html body .sp-bar i{transition:none}html body .sp-win{animation:none}html body .sp-btn,html body .sp-chip{transition:none}}
html body .sp-center{text-align:center}
html body #per-te,html body #bridal,html body #sfida{position:relative;overflow-x:clip}
html body .sp-sfida .px{opacity:.55}