/* =====================================================================
   Francesco Pio — La mia laurea
   Stile: bianco / nero / rosa shocking, collage, mobile-first
   ===================================================================== */

:root{
  --pink:#ff2d6f;
  --pink-d:#e51e5c;
  --pink-l:#ffd6e4;          /* rosa chiaro dei riquadri: più carico di prima */
  --pink-2:#ff5c8d;          /* rosa medio, per le sfumature */
  --pink-3:#ffa8c6;          /* rosa dei fondi sotto le fasce */
  --ink:#0d0d0d;
  --ink-2:#1a1a1a;
  --grey:#fdf1f6;            /* il grigio dei riquadri ha un fondo rosa */
  --grey-2:#8a8a90;
  --line:#e6e6e9;
  --white:#fff;
  --gold:#c9a227;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  --ff:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif,var(--emoji);
  --ff-d:"Archivo Black",Impact,sans-serif,var(--emoji);
  --ff-h:"Caveat",cursive,var(--emoji);
  --app:430px;              /* larghezza massima: resta un'app anche su desktop */
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:22px;
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ff);background:var(--ink);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;letter-spacing:-.005em;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
/* hidden deve vincere sempre: .btn e simili impostano display e lo scavalcherebbero */
[hidden]{display:none!important}
a{text-decoration:none;color:inherit}
input{font:inherit}
.pre{white-space:pre-line}

/* l'app vive in una colonna centrata, come nel mockup */
#views{
  max-width:var(--app);margin-inline:auto;position:relative;overflow:visible clip;
  background:var(--white);min-height:100vh;min-height:100svh;
  box-shadow:0 0 60px rgba(0,0,0,.45);
}
.pad{padding:calc(64px + env(safe-area-inset-top)) var(--pad) 60px}

.view{display:none;animation:in .45s var(--ease)}
.view.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.view--light{
  background:linear-gradient(180deg,var(--pink-l) 0%,#ffeaf1 22%,#fff5f8 58%,var(--white) 100%);
  color:var(--ink);min-height:100vh;min-height:100svh;
}
.view--home{background:var(--ink);color:var(--white);min-height:100vh;min-height:100svh;display:none}
.view--home.on{display:flex;flex-direction:column}
.view--thanks{background:linear-gradient(170deg,#fff 0%,#fff8fa 34%,var(--pink-l) 72%,var(--pink-3) 100%);min-height:100vh;min-height:100svh}

/* ================= LOADER ================= */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);color:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .6s var(--ease),visibility .6s;
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.ld-stage{width:min(210px,52vw);aspect-ratio:1;display:grid;place-items:center;position:relative}
.ld-stage::after{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,111,.5),transparent 68%);filter:blur(16px);
}
.ld-face{
  width:100%;height:100%;object-fit:contain;position:relative;z-index:2;
  animation:fly 3.2s var(--ease) infinite;
}
img.ld-face{
  object-fit:contain;filter:drop-shadow(0 14px 24px rgba(0,0,0,.6));
}
@keyframes fly{
  0%{transform:translate3d(0,0,0) rotate(-5deg)}
  25%{transform:translate3d(20px,-22px,0) rotate(5deg)}
  50%{transform:translate3d(0,-34px,0) rotate(-2deg)}
  75%{transform:translate3d(-20px,-22px,0) rotate(-7deg)}
  100%{transform:translate3d(0,0,0) rotate(-5deg)}
}
.ld-logo{font-family:var(--ff-d);font-size:1.15rem;letter-spacing:.02em;margin:0;text-align:center}
.ld-phrase{margin:0;color:#9a9aa2;font-size:.9rem;min-height:1.4em;text-align:center;padding-inline:24px;transition:opacity .16s}
.ld-bar{width:min(240px,64vw);height:5px;border-radius:99px;background:#2a2a2e;overflow:hidden}
.ld-bar span{display:block;height:100%;width:0;background:var(--pink);border-radius:99px;transition:width .2s linear}
.ld-skip{
  position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#6a6a72;
}

/* ================= TOPBAR ================= */
.topbar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:90;
  width:min(var(--app),100%);
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top)) var(--pad) 22px;
  transition:color .3s;pointer-events:none;
}
.topbar > *{pointer-events:auto}
.logo{line-height:1.15}
.logo[hidden]{display:none}
.indietro{
  width:42px;height:42px;margin:-8px 0 0 -10px;border-radius:50%;
  display:grid;place-items:center;color:inherit;
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(13,13,16,.12);
  transition:transform .2s var(--ease),background .2s;
}
.indietro[hidden]{display:none}
.indietro svg{width:22px;height:22px}
.indietro:active{transform:scale(.92)}
.topbar--dark .indietro{background:rgba(255,255,255,.16);color:var(--white)}
.logo-1{display:block;font-family:var(--ff-d);font-size:.78rem;letter-spacing:.04em}
.logo-2{display:block;font-size:.7rem;font-weight:600;letter-spacing:.04em;opacity:.75}
.burger{width:30px;height:22px;display:grid;align-content:space-between;padding:0}
.burger span{display:block;height:2.5px;background:currentColor;border-radius:2px;transition:background .3s}
.topbar--dark{color:var(--white);background:linear-gradient(180deg,rgba(13,13,16,.62) 40%,rgba(13,13,16,0))}
.topbar--light{color:var(--ink);background:linear-gradient(180deg,#fff 24%,rgba(255,255,255,.75) 60%,rgba(255,255,255,0))}

/* ================= MENU ================= */
.menu{
  position:fixed;top:0;left:50%;z-index:110;
  width:min(var(--app),100%);height:100vh;height:100svh;
  background:var(--ink);color:var(--white);
  padding:calc(18px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;overflow:hidden auto;overscroll-behavior:contain;
  transform:translate(-50%,-100%);transition:transform .45s var(--ease);
}
.menu.on{transform:translate(-50%,0)}
.menu-scrim{
  position:fixed;inset:0;z-index:105;background:rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .35s;
}
.menu-scrim.on{opacity:1;visibility:visible}
.menu-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:44px}
.menu-close{font-size:2rem;line-height:1;width:36px;height:36px;margin:-6px -6px 0 0}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1}
.menu-list button{
  display:flex;align-items:center;gap:18px;width:100%;padding:15px 4px;
  font-size:1.05rem;font-weight:600;border-radius:12px;transition:background .25s,padding-left .25s;
}
.menu-list button:hover,.menu-list button:focus-visible{background:rgba(255,255,255,.07);padding-left:12px}
.menu-list button.on{color:var(--pink)}
.menu-list svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-foot{border-top:1px solid #2a2a2e;padding-top:26px;text-align:center}
.menu-quote{
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.02rem;
  line-height:1.55;white-space:pre-line;margin:0 0 20px;color:#dcdce2;font-weight:400;
}
.laurel{display:flex;justify-content:center;color:var(--gold);font-size:1.3rem}
.laurel::before{content:"🌿";transform:scaleX(-1)}
.laurel::after{content:"🌿"}
.laurel--sm{font-size:1.05rem;margin-bottom:10px}

/* ================= HOME ================= */
.home-photo{position:relative;flex:1;min-height:46vh;overflow:hidden}
.home-photo img,.home-photo .ph{
  width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  position:absolute;inset:0;z-index:2;
  padding:calc(30px + env(safe-area-inset-top)) 6px 0;
}
.home-photo::after{
  content:"";position:absolute;inset:auto 0 0;height:55%;z-index:3;
  background:linear-gradient(180deg,transparent,var(--ink) 88%);
}
.scribble{
  position:absolute;z-index:4;font-family:var(--ff-h);font-weight:700;
  font-size:1.05rem;line-height:1.12;white-space:pre-line;color:var(--white);
  text-transform:uppercase;letter-spacing:.01em;
  transform:rotate(var(--rot,0deg));
}
.scribble--top{--rot:-11deg;top:calc(74px + env(safe-area-inset-top));left:5%}
.scribble--right{--rot:7deg;top:28%;right:4%;max-width:34%;text-align:center;font-size:.95rem}
.scribble--left{--rot:-8deg;top:52%;left:4%;max-width:42%;font-size:.95rem}
.arrow{position:absolute;z-index:4;width:46px;height:54px;color:var(--white)}
.arrow--curve{top:40%;left:10%;transform:rotate(6deg)}

.home-copy{position:relative;z-index:4;padding:0 var(--pad) calc(34px + env(safe-area-inset-bottom));margin-top:-14px;text-align:center}
.home-title{
  font-family:var(--ff-d);font-size:clamp(2rem,9.5vw,2.7rem);line-height:1.02;
  letter-spacing:-.01em;margin:0 0 16px;text-transform:uppercase;
}
.home-title span{display:block}
.home-title .pink{color:var(--pink)}
.home-sub{white-space:pre-line;color:#cfcfd6;font-size:.96rem;margin:0 0 26px}
.scroll-dot{
  display:grid;place-items:center;width:40px;height:40px;margin:22px auto 0;
  border:1.6px solid rgba(255,255,255,.45);border-radius:50%;color:var(--white);
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(6px)}}

/* ================= PELLICOLA (tema cinema) ================= */
.pellicola{
  position:relative;display:block;height:20px;width:100%;
  background:var(--ink);border-radius:3px;overflow:hidden;flex:none;
}
.pellicola::before,.pellicola::after{
  content:"";position:absolute;left:0;right:0;height:5px;
  background-image:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 15px);
}
.pellicola::before{top:3.5px}
.pellicola::after{bottom:3.5px}
.pellicola--ld{width:min(240px,64vw);margin-top:4px;background:#26262c;box-shadow:0 0 0 1px rgba(255,255,255,.08)}

/* le due strisce di pellicola ai lati della home */
.pellicola-v{
  position:absolute;top:0;bottom:0;width:16px;z-index:5;pointer-events:none;
  background:rgba(13,13,16,.55);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 72%,transparent 96%);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 72%,transparent 96%);
}
.pellicola-v::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.85) 0 7px,transparent 7px 18px);
  background-position:center;background-size:7px 18px;background-repeat:repeat-y;
}
.pellicola-v--sx{left:0}
.pellicola-v--dx{right:0}
.pellicola--menu{margin-bottom:18px;opacity:.9}
.pellicola--tesi{width:min(260px,72%);border-radius:4px 4px 0 0}
.pellicola--giu{border-radius:0 0 4px 4px}

/* il ciak accanto ai titoli */
.ciak{
  display:inline-block;width:1.05em;height:1.05em;margin-right:.32em;
  vertical-align:-.12em;background:currentColor;color:var(--pink);
  -webkit-mask:var(--ciak) center/contain no-repeat;
          mask:var(--ciak) center/contain no-repeat;
}
:root{
  --ciak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9.5h18V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M2.6 6.1 20.2 3l.9 4.2L3.5 10.3z'/%3E%3Cpath fill='%23fff' d='m7.4 4.6 1.5 3.5-2 .35-1.5-3.5zM12.2 3.8l1.5 3.5-2 .35-1.5-3.5zM17 3l1.5 3.5-2 .35L15 3.35z'/%3E%3C/svg%3E");
}

/* ================= BOTTONI ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 30px;border-radius:99px;font-weight:800;font-size:1rem;letter-spacing:-.01em;
  transition:transform .25s var(--ease),background .25s,box-shadow .25s;
}
.btn:active{transform:scale(.97)}
.btn svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn--pink{background:var(--pink);color:var(--white);box-shadow:0 10px 26px rgba(255,45,111,.32)}
.btn--pink:hover{background:var(--pink-d)}
.btn--outline{background:transparent;color:var(--pink);border:1.8px solid var(--pink)}
.btn--outline:hover{background:var(--pink-l)}
.btn--lg{width:min(100%,300px);font-size:1.05rem;padding:18px 30px;position:relative;overflow:hidden}
.btn--block{width:100%;margin-bottom:12px}

/* ================= TIPOGRAFIA COMUNE ================= */
.eyebrow{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-2);text-align:center;white-space:pre-line;line-height:1.5;margin:0 0 12px;
}
.h-big{
  font-size:clamp(1.75rem,7.6vw,2.15rem);font-weight:800;line-height:1.1;
  letter-spacing:-.03em;margin:0 0 12px;white-space:pre-line;text-align:center;
}
.h-huge{
  font-family:var(--ff-d);font-size:clamp(2.4rem,12vw,3.2rem);line-height:1;
  margin:0 0 10px;text-align:center;letter-spacing:-.01em;
}
.h-sub{font-size:1.15rem;font-weight:800;line-height:1.3;text-align:center;white-space:pre-line;margin:0 0 22px}
.p-mid{color:#5b5b63;font-size:.95rem;line-height:1.62;text-align:center;white-space:pre-line;margin:0 0 20px}
.underline{
  display:inline-block;white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Crect x='1' y='2' width='198' height='7' rx='3.5' fill='%23ff2d6f' transform='rotate(-0.9 100 6)'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:104% 9px;background-position:-2% calc(100% - 1px);
}
.cap{font-size:2.3rem;text-align:center;margin-bottom:6px}

/* ================= DONAZIONE ================= */
.view--dona{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--pink-3) 0%,#ffd0e0 26%,#ffe7ef 60%,#fff4f8 100%);
  min-height:100vh;min-height:100svh;
}

.dn-hero{
  position:relative;z-index:2;min-height:430px;color:var(--white);
  padding:calc(78px + env(safe-area-inset-top)) var(--pad) 12px;
  background:linear-gradient(168deg,var(--pink) 0%,var(--pink-2) 58%,var(--pink-3) 100%);
}
.pop-dots--dn{
  inset:0;color:var(--white);opacity:.32;
  -webkit-mask-image:radial-gradient(circle at 28% 48%,#000 14%,transparent 60%);
          mask-image:radial-gradient(circle at 28% 48%,#000 14%,transparent 60%);
}
.dn-foto{
  position:absolute;right:-11%;bottom:0;width:64%;z-index:2;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.18));
  animation:respiro 7.5s ease-in-out infinite;
}
.dn-hero.tocca .dn-foto{
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 16px 26px rgba(154,10,58,.5));
}
.dn-testa{position:relative;z-index:4;width:63%;padding-bottom:10px}
.dn-testa::before{
  content:"";position:absolute;inset:-14px -64px -6px -22px;z-index:-1;
  background:radial-gradient(118% 96% at 14% 50%,rgba(206,16,80,.52) 32%,rgba(206,16,80,0) 64%);
}
.tazzina{
  position:absolute;top:-34px;right:4%;font-size:1.5rem;rotate:-10deg;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.15));
}
.dn-title{
  font-size:clamp(1.3rem,5.9vw,1.66rem);font-weight:800;line-height:1.12;
  letter-spacing:-.028em;margin:0 0 10px;
}
.dn-title span{display:block}
.dn-title .pink{color:var(--ink)}
.dn-sub{color:rgba(255,255,255,.95);font-size:.86rem;line-height:1.5;margin:0 0 16px;white-space:pre-line}

/* ---------- i tre valori ---------- */
.valori{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;position:relative;z-index:4;
}
.valori li{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:0 4px;border-left:1px solid rgba(255,255,255,.42);
}
.valori li:first-child{border-left:0;padding-left:0}
.valori svg{
  width:24px;height:24px;color:var(--white);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.valori span{
  font-size:.55rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);line-height:1.3;white-space:pre-line;
}
.fumetto--dn{
  top:calc(72px + env(safe-area-inset-top));right:2%;rotate:4deg;max-width:40%;font-size:.78rem;
  border-color:var(--pink);color:var(--pink-d);box-shadow:3px 3px 0 rgba(255,45,111,.45);
}
.fumetto--dn::after{border-color:var(--pink);bottom:-8px;left:26%;rotate:45deg}
.lampo--1{top:40%;left:50%;rotate:-40deg;box-shadow:7px 9px 0 #fff,-3px 14px 0 #fff;z-index:3}
.lampo--2{top:24%;right:6%;rotate:30deg;box-shadow:-8px 10px 0 #fff,2px 17px 0 #fff;z-index:3}
.view--dona.on .fumetto--dn{animation:scrIn .55s var(--ease) .3s both}

/* ---------- la scheda ---------- */
.dn-corpo{
  position:relative;z-index:5;margin:0 12px;
  background:var(--white);border-radius:24px;
  box-shadow:0 16px 40px rgba(214,51,108,.16);
  padding:20px 16px 22px;
}
.dn-h3{display:flex;align-items:center;font-size:1.12rem;font-weight:800;margin:0 0 13px;letter-spacing:-.02em}
.badge-euro{
  font-family:var(--ff-h);font-weight:700;font-size:.92rem;color:var(--pink-d);
  background:var(--pink-l);border-radius:99px;padding:5px 12px;rotate:-3deg;white-space:nowrap;
}

/* ---------- fasce ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
.tier{
  position:relative;border:1.6px solid var(--line);border-radius:16px;background:#fdfdfd;
  padding:13px 4px 11px;text-align:center;
  transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease);
}
.tier:active{transform:scale(.96)}
.tier .t-emoji{font-size:1.55rem;display:block;line-height:1.2}
.tier .t-name{display:block;font-size:.63rem;font-weight:600;color:#4c4c54;margin-top:5px;line-height:1.2}
.tier .t-cifra{display:block;font-size:.92rem;font-weight:800;margin-top:2px}
.tier.on{background:var(--pink);border-color:var(--pink);color:var(--white);box-shadow:0 10px 22px rgba(255,45,111,.32)}
.tier.on .t-name,.tier.on .t-cifra{color:var(--white)}
.tier.on::after{
  content:"✓";position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--white);color:var(--pink);font-size:.8rem;font-weight:800;display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(0,0,0,.18);animation:tierPop .4s var(--ease);
}

/* ---------- importo libero ---------- */
.libero{
  background:var(--white);border:1.8px dashed rgba(255,45,111,.4);
  border-radius:20px;padding:14px 18px 12px;margin-bottom:16px;
  transition:border-color .25s,box-shadow .25s;
}
.libero:focus-within{border-style:solid;border-color:var(--pink);box-shadow:0 10px 28px rgba(255,45,111,.16)}
.libero-lab{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink);margin-bottom:4px;
}
.libero-campo{
  display:flex;align-items:baseline;gap:10px;
  border-bottom:2px solid var(--line);padding-bottom:8px;transition:border-color .25s;
}
.libero:focus-within .libero-campo{border-color:var(--pink)}
.libero-campo .cur{font-family:var(--ff-d);font-size:1.5rem;color:var(--pink);line-height:1}
.libero-campo input{
  border:0;background:none;outline:none;width:100%;
  font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);
}
.libero-campo input::placeholder{color:#c9b3bd;font-weight:500;font-size:1.05rem}
.libero-campo input::-webkit-outer-spin-button,
.libero-campo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.libero-campo input[type=number]{-moz-appearance:textfield}

/* ---------- righe (pagamento da configurare, wishlist) ---------- */
.riga{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:1.6px dashed var(--line);border-radius:18px;padding:14px 15px;background:#fdfdfd;
}
.riga-ico{
  flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--pink-l);color:var(--pink);
}
.riga-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.riga-testi{flex:1;min-width:0}
.riga-t{display:block;font-weight:800;font-size:.95rem;line-height:1.25}
.riga-s{display:block;font-size:.78rem;color:var(--grey-2);line-height:1.4;margin-top:3px}
.riga-freccia{width:22px;height:22px;flex:none;fill:none;stroke:var(--grey-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.riga--wish{
  border-style:solid;border-color:rgba(255,45,111,.35);background:var(--pink-l);
}
.riga--wish .riga-ico{background:var(--white)}
.riga--wish .riga-freccia{stroke:var(--pink)}

/* ---------- pagamento ---------- */
.paylist{display:block}
.pay{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:16px 18px;border-radius:14px;font-weight:700;font-size:1rem;
  transition:transform .2s var(--ease),filter .2s;
}
.pay:active{transform:scale(.985)}
.pay:focus-visible,.pay2:focus-visible{outline:2.5px solid var(--pink);outline-offset:3px}
.pay:hover{filter:brightness(.96)}
.pay--paypal{
  background:linear-gradient(180deg,#ffd158 0%,#ffc439 52%,#f5b622 100%);
  color:#0d1f4b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.06);
}
.pay--apple{background:var(--ink);color:var(--white)}
.pay--stripe{background:#635bff;color:var(--white)}
.pay--card{background:var(--white);color:var(--ink);border:1.6px solid var(--line)}
.pay--soft{background:var(--grey);color:var(--ink)}
.pay--big{
  width:100%;padding:18px 20px;border-radius:16px;font-size:1.05rem;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}
.pay--big.pay--paypal{
  gap:10px;
  box-shadow:0 12px 28px rgba(240,175,20,.34),
             inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.06);
}
.pay--big.pay--paypal:hover{filter:brightness(1.03)}
.pay--big.pay--paypal:active{box-shadow:0 6px 16px rgba(240,175,20,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.pay-quanto{font-weight:800;letter-spacing:-.01em}
.mk-img{height:23px;width:auto;display:block;flex:none}
.pay2 .mk-img{height:19px}
.mk-stripe{font-weight:800;letter-spacing:-.02em}
.mk-apple{font-weight:600;letter-spacing:-.01em}
.marchio{fill:currentColor;stroke:none;width:20px;height:20px;margin-right:-4px}

.pay-nota{
  margin:10px 4px 0;text-align:center;line-height:1.45;
  font-size:.76rem;color:var(--grey-2);
}
.pay-nota:empty{display:none}

.altri-modi{
  display:flex;align-items:center;gap:12px;
  text-align:center;font-size:.75rem;color:var(--grey-2);margin:16px 0 11px;
}
.altri-modi::before,.altri-modi::after{content:"";flex:1;height:1px;background:var(--line)}
.altri-modi:empty{display:none}

.paylist2{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:9px}
.pay2{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:70px;padding:11px 8px;border-radius:14px;font-size:.75rem;font-weight:700;
  border:1.5px solid var(--line);background:var(--white);color:var(--ink);
  transition:border-color .2s,transform .2s var(--ease);
}
.pay2:hover{border-color:var(--pink);background:var(--pink-l)}
.pay2:active{transform:scale(.96)}
.pay2 svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pay2 .marchio{fill:currentColor;stroke:none}
.pay2.pay--apple{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pay2.pay--stripe{background:#635bff;color:#fff;border-color:#635bff}
.pay2.pay--paypal{background:#ffc439;color:#0d1f4b;border-color:#ffc439}
.pay2 b{font-size:.85rem}

/* ---- bonifico: una riga sola, con l'istruzione sotto al titolo ---- */
.paylist2 > .pay2--riga{
  grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:13px;min-height:0;padding:12px 14px;text-align:left;
  border:1.6px solid var(--line);background:var(--white);
  transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.pay2--riga .pay2-ico{
  flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--pink-l);color:var(--pink);transition:background .2s,color .2s;
}
.pay2--riga .pay2-ico svg{width:21px;height:21px;stroke-width:1.8}
.pay2--riga .pay2-testi{display:flex;flex-direction:column;gap:2px;min-width:0}
.pay2--riga b{font-size:.92rem;font-weight:800;line-height:1.2}
.pay2--riga small{font-size:.75rem;font-weight:600;color:var(--grey-2);line-height:1.3}
.paylist2 > .pay2--riga:hover{border-color:rgba(255,45,111,.45);background:#fffafc}

/* copiato: conferma verde, un attimo e torna com'era */
.paylist2 > .pay2--riga.copiato{border-color:#34c17b;background:#f2fbf6}
.pay2--riga.copiato .pay2-ico{background:#dcf5e8;color:#1e9f61}
.pay2--riga.copiato small{color:#1e9f61}
.paylist2 > .pay2:not(.pay2--riga):last-child:nth-child(3n+1){grid-column:1/-1;flex-direction:row;gap:9px;min-height:56px}

.secure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  color:var(--grey-2);font-size:.75rem;margin:14px 0 0;
  padding:0 6px;line-height:1.45;text-align:center;
}
.secure svg{flex:none}

/* ---------- piede ---------- */
.dn-piede{
  position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;padding:26px var(--pad) 40px;
}
.saluto--dn{
  position:static;font-family:var(--ff-h);font-weight:700;font-size:1.15rem;line-height:1.2;
  color:var(--ink);white-space:pre-line;text-align:left;rotate:-3deg;
  border-bottom:3px solid var(--pink);padding-bottom:4px;
}
.saluto--dn::after{content:" ❤️";font-size:.85rem}
.pillola{
  display:flex;align-items:center;gap:8px;max-width:52%;
  background:var(--pink-l);border-radius:16px;padding:9px 12px;rotate:2deg;
}
.pillola-ico{width:22px;height:22px;flex:none;color:var(--pink);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pillola span{
  font-family:var(--ff-h);font-weight:700;font-size:.72rem;line-height:1.2;
  color:var(--pink-d);white-space:pre-line;
}

/* ================= GRAZIE ================= */
.thanks-photo{position:relative;width:min(230px,64%);margin:10px auto 30px;aspect-ratio:620/664}
.thanks-photo img,.thanks-photo .ph{
  width:100%;height:100%;object-fit:contain;position:relative;z-index:2;
}
.thanks-photo .ph{background:#f1f1f4;border-radius:26px}
.shades{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.heart{position:absolute;color:var(--pink);font-size:1.3rem;animation:float 3.4s ease-in-out infinite}
.heart--1{top:-6%;left:-4%;animation-delay:0s}
.heart--2{top:12%;right:-14%;font-size:1.7rem;animation-delay:.7s}
.heart--3{bottom:0;left:-16%;font-size:1rem;animation-delay:1.4s}
@keyframes float{50%{transform:translateY(-9px) rotate(6deg)}}
.scribble--tl{--rot:-9deg;top:41%;left:-32%;color:var(--ink);font-size:.74rem;text-align:right;width:31%}
.scribble--tr{--rot:8deg;top:62%;right:-40%;color:var(--ink);font-size:.95rem;width:36%;text-align:left}
.thanks-box{
  background:var(--grey);border-radius:16px;padding:20px 18px;text-align:center;
  font-weight:700;white-space:pre-line;line-height:1.45;margin-bottom:20px;
}

/* ================= WISHLIST ================= */
.wl-head{display:flex;align-items:flex-start;gap:12px;justify-content:flex-start;margin-bottom:12px}
.wl-head .h-big{margin:0;text-align:left;white-space:normal;font-size:clamp(1.6rem,7vw,2rem)}
/* il sottotitolo segue il titolo: a sinistra, non centrato */
#wText{text-align:left}
.wl-head .h-big span{display:block}
.chips-zona{position:relative;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
/* la sfumatura dice che a destra ce n'e' ancora */
.chips-zona::after{
  content:"";position:absolute;top:0;bottom:14px;right:0;width:34px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--white) 78%);
}
.chips{
  display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.chips > *{scroll-snap-align:start}
.chips::-webkit-scrollbar{display:none}
.grid-conta{
  font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--grey-2);
  margin:0 0 10px;text-align:right;
}
.grid-conta:empty{display:none}
.chip{
  flex:none;padding:8px 15px;border-radius:99px;border:1.5px solid rgba(255,45,111,.2);
  font-size:.8rem;font-weight:700;color:#4c4c54;background:var(--white);transition:.2s;
}
.chip.on{background:var(--pink);border-color:var(--pink);color:var(--white)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:stretch}
.card{
  height:100%;border:1.5px solid rgba(255,45,111,.16);border-radius:16px;overflow:hidden;background:var(--white);
  display:flex;flex-direction:column;text-align:left;transition:transform .25s var(--ease),box-shadow .25s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.09)}
.card-img{
  aspect-ratio:1/.86;display:grid;place-items:center;font-size:3.1rem;
  background:linear-gradient(160deg,#fff6f9 0%,#ffe9f1 100%);
  border-bottom:1px solid rgba(255,45,111,.10);
}
.card-img img{width:100%;height:100%;object-fit:contain;padding:12px}
.card-body{padding:12px 12px 13px;display:flex;flex-direction:column;gap:3px;flex:1}
/* due righe fisse: cosi' prezzi e tasti restano in riga fra schede accanto */
.card-name{
  font-size:.82rem;font-weight:800;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(.82rem * 1.28 * 2);
}
.card-cat{font-size:.7rem;color:var(--grey-2)}
.card-price{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;margin-top:6px;color:var(--ink)}
.card-cta{
  margin-top:auto;margin-block-start:11px;border-radius:99px;
  background:var(--pink-l);color:#d81b60;border:1.5px solid rgba(255,45,111,.28);
  padding:9px 10px;font-size:.72rem;font-weight:800;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .2s,color .2s,border-color .2s;
}
.card-cta:hover{background:var(--pink);border-color:var(--pink);color:var(--white)}
.card-cta svg{width:12px;height:12px}
/* ---------- "lo prendo io" ---------- */
.card-bollo{
  position:absolute;top:8px;left:8px;z-index:2;
  padding:4px 9px;border-radius:99px;font-size:.6rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  background:rgba(13,13,16,.82);color:#fff;
}
.card-img{position:relative}
.card--preso .card-img{filter:grayscale(.55);opacity:.72}
.card--preso .card-name{color:var(--grey-2)}

.regalo{margin-top:12px}
.regalo-t{margin:0;font-weight:800;font-size:.95rem;line-height:1.3}
.regalo-s{margin:4px 0 0;font-size:.78rem;color:var(--grey-2);line-height:1.45}
.regalo-s--sotto{text-align:center;margin-top:7px}
.regalo--mio,.regalo--altri{
  padding:14px 15px;border-radius:16px;border:1.5px solid var(--line);background:#fbfbfc;
}
.regalo--mio{border-color:rgba(52,193,123,.45);background:#f2fbf6}
.regalo--mio .regalo-t{color:#1e9f61}
.regalo--altri{border-color:rgba(255,45,111,.28);background:var(--pink-l)}
.regalo-dove{
  margin:9px 0 0;padding:11px 12px;border-radius:12px;background:var(--white);
  border:1.5px dashed rgba(52,193,123,.5);
  font-size:.82rem;font-weight:700;line-height:1.45;white-space:pre-line;
}
.regalo-dove:empty{display:none}
.regalo-link{
  margin-top:10px;font-size:.76rem;font-weight:700;color:var(--grey-2);
  text-decoration:underline;text-underline-offset:3px;
}
.regalo-link:hover{color:var(--pink)}
.regalo--form{
  padding:14px 15px;border-radius:16px;border:1.5px solid rgba(255,45,111,.28);background:#fffafc;
}
.regalo-lab{display:block;font-size:.76rem;font-weight:800;color:var(--pink);margin-bottom:6px}
.regalo-campo{
  width:100%;padding:12px 13px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--white);font:inherit;font-size:.92rem;
}
.regalo-campo:focus{outline:none;border-color:var(--pink)}
.regalo-tasti{display:flex;align-items:center;gap:14px;margin-top:11px}
.btn--soft{
  background:var(--pink-l);color:#d81b60;border:1.5px solid rgba(255,45,111,.3);
}
.btn--soft:hover{background:var(--pink);border-color:var(--pink);color:var(--white)}

.disclosure{font-size:.68rem;color:var(--grey-2);line-height:1.5;margin:26px 0 0;text-align:center}

/* ================= DETTAGLIO PRODOTTO ================= */
.det-nav{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px}
.icon-btn{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--grey);transition:background .2s;
}
.icon-btn:hover{background:var(--line)}
.icon-btn--heart{background:none;color:var(--line);font-size:1.5rem}
.icon-btn--heart.on{color:var(--pink)}
.det-img{
  aspect-ratio:1/.82;background:var(--white);border:1.5px solid rgba(255,45,111,.14);border-radius:20px;margin-bottom:20px;
  display:grid;place-items:center;font-size:5rem;overflow:hidden;
}
.det-img img{width:100%;height:100%;object-fit:contain;padding:24px}
.det-name{font-size:1.45rem;font-weight:800;line-height:1.2;margin:0 0 4px}
.det-sub{color:var(--grey-2);font-size:.9rem;margin:0 0 14px}
.det-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.det-price{font-size:1.5rem;font-weight:800}
.amz{font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.amz-it{color:#ff9900}
.why{background:var(--pink-l);border-radius:16px;padding:15px 16px;margin:18px 0 20px}
.why-t{display:flex;align-items:center;gap:7px;font-weight:800;color:var(--pink);font-size:.88rem;margin:0 0 6px}
.why-t::before{content:"❤️"}
.why-b{margin:0;font-size:.86rem;color:#4c4c54;line-height:1.5}
.guarantees{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.guarantees li{display:flex;align-items:center;gap:11px;font-size:.85rem;color:#4c4c54}
.guarantees svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ================= CHI SONO · RINGRAZIAMENTI · TESI ================= */
.view--rosa{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--pink-3) 0%,#ffd0e0 24%,#ffe7ef 58%,#fff4f8 100%);
  color:var(--ink);min-height:100vh;min-height:100svh;
}

/* ---------- fascia rosa con la sagoma ---------- */
.fascia{
  position:relative;z-index:2;min-height:330px;color:var(--white);
  padding:calc(78px + env(safe-area-inset-top)) var(--pad) 14px;
  background:linear-gradient(168deg,var(--pink) 0%,var(--pink-2) 58%,var(--pink-3) 100%);
}
.fascia-foto{
  position:absolute;right:-10%;bottom:0;width:58%;z-index:2;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.18));
  animation:respiro 7.5s ease-in-out infinite;
}
.fascia.tocca .fascia-foto{
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 16px 26px rgba(154,10,58,.5));
}
.fascia-testa{position:relative;z-index:4;width:60%}
.fascia-testa::before{
  content:"";position:absolute;inset:-14px -54px -8px -22px;z-index:-1;
  background:radial-gradient(118% 96% at 14% 50%,rgba(206,16,80,.5) 32%,rgba(206,16,80,0) 64%);
}
.fascia-titolo{
  font-size:clamp(1.6rem,7.4vw,2.05rem);font-weight:800;line-height:1.1;
  letter-spacing:-.028em;margin:0;
}
.fascia-titolo span{display:block}
.fascia-sub{color:rgba(255,255,255,.95);font-size:.88rem;line-height:1.5;margin:12px 0 0;white-space:pre-line}

/* ---------- scheda bianca sotto la fascia ---------- */
.scheda{
  position:relative;z-index:5;margin:0 12px;
  background:var(--white);border-radius:24px;
  box-shadow:0 16px 40px rgba(214,51,108,.16);
  padding:22px 18px 26px;
}
.scheda-testo{color:#4c4c54;font-size:.94rem;line-height:1.65;margin:0}

/* ---------- i numeri di Chi sono ---------- */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:20px}
.fact{
  background:var(--pink-l);border-radius:16px;padding:16px 14px;text-align:center;
}
.fact-v{display:block;font-family:var(--ff-d);font-size:1.35rem;color:var(--pink-d);line-height:1.1}
.fact-k{display:block;font-size:.72rem;color:#5b5b63;margin-top:6px}

/* ---------- ringraziamenti ---------- */
.grazie-lista{display:flex;flex-direction:column;gap:14px}
.grazie-uno{
  display:flex;gap:13px;align-items:flex-start;
  border:1.5px solid rgba(255,45,111,.18);border-radius:18px;padding:15px 15px 16px;
  background:#fffafc;
}
.grazie-emoji{
  flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--pink-l);font-size:1.4rem;
}
.grazie-testi{flex:1;min-width:0}
.grazie-nome{display:block;font-weight:800;font-size:1rem;line-height:1.2}
.grazie-ruolo{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pink);margin-top:3px;
}
.grazie-frase{margin:8px 0 0;font-size:.88rem;line-height:1.55;color:#4c4c54}
.grazie-chiusura{
  font-family:var(--ff-h);font-weight:700;font-size:1.08rem;line-height:1.4;
  text-align:center;margin:22px 0 0;color:var(--pink-d);
}

/* ---------- la tesi ---------- */

.conto{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.conto[hidden]{display:none}
.conto-box{
  background:var(--white);border:1.5px solid rgba(255,45,111,.2);border-radius:14px;
  padding:11px 4px 9px;text-align:center;
}
.conto-n{
  display:block;font-family:var(--ff-d);font-size:1.5rem;line-height:1;color:var(--pink-d);
  font-variant-numeric:tabular-nums;
}
.conto-e{display:block;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);margin-top:5px}

.tesi-stato{text-align:center;margin-bottom:16px}
.tesi-stato-t{margin:0 0 5px;font-weight:800;font-size:1rem}
.tesi-stato-s{margin:0;font-size:.86rem;color:#5b5b63;line-height:1.5;padding:0 4%}
.btn--tesi{gap:9px}
.btn--tesi[aria-disabled="true"]{
  background:var(--white);color:#8a8a90;box-shadow:none;cursor:not-allowed;
  border:1.6px dashed rgba(255,45,111,.35);
}

/* ================= PLACEHOLDER FOTO ================= */
.ph{display:grid;place-items:center;background:#1c1c20;color:var(--pink);font-size:3rem}

/* ================= TOAST ================= */
.toast{
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  z-index:300;background:var(--ink);color:var(--white);padding:13px 20px;border-radius:99px;
  font-size:.85rem;font-weight:600;max-width:min(88vw,380px);text-align:center;
  opacity:0;visibility:hidden;transition:opacity .3s,transform .3s var(--ease),visibility .3s;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* =====================================================================
   ANIMAZIONI E SCHERZI
   ===================================================================== */

/* ---------- HOME: la foto respira ---------- */
.view--home.on .home-photo img{animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{
  from{transform:scale(1.02) translate(0,0)}
  to{transform:scale(1.12) translate(-2.5%,-2%)}
}

/* ---------- HOME: le scritte a mano compaiono e ondeggiano ---------- */
.view--home.on .scribble,
.view--thanks.on .scribble{animation:scrIn .6s var(--ease) both, scrOnda 5.5s ease-in-out infinite}
.view--home.on .scribble--top  {animation-delay:.30s, 1.1s}
.view--home.on .scribble--right{animation-delay:.55s, 1.6s}
.view--home.on .scribble--left {animation-delay:.80s, 2.1s}
.view--thanks.on .scribble--tl {animation-delay:.45s, 1.4s}
.view--thanks.on .scribble--tr {animation-delay:.70s, 1.9s}
@keyframes scrIn{
  0%  {opacity:0;transform:rotate(var(--rot,0deg)) scale(.55)}
  65% {opacity:1;transform:rotate(var(--rot,0deg)) scale(1.12)}
  100%{opacity:1;transform:rotate(var(--rot,0deg)) scale(1)}
}
@keyframes scrOnda{
  0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}
  50%    {transform:rotate(calc(var(--rot,0deg) + 3deg)) translateY(-4px)}
}

/* ---------- HOME: la freccia si disegna da sola ---------- */
.view--home.on .arrow path{stroke-dasharray:1;stroke-dashoffset:1;animation:disegna .9s var(--ease) forwards}
.view--home.on .arrow path:nth-child(1){animation-delay:1s}
.view--home.on .arrow path:nth-child(2){animation-delay:1.7s}
@keyframes disegna{to{stroke-dashoffset:0}}

/* ---------- HOME: il titolo entra riga per riga ---------- */
.view--home.on .home-title span{animation:rigaSu .75s var(--ease) both}
.view--home.on .home-title span:nth-child(1){animation-delay:.10s}
.view--home.on .home-title span:nth-child(2){animation-delay:.22s}
.view--home.on .home-title span:nth-child(3){animation-delay:.34s}
.view--home.on .home-sub{animation:rigaSu .75s var(--ease) .5s both}
.view--home.on .home-copy .btn{animation:rigaSu .75s var(--ease) .68s both, battito 3s ease-in-out 2s infinite}
.view--home.on .scroll-dot{animation:rigaSu .6s var(--ease) .9s both, bob 2s ease-in-out 1.6s infinite}
@keyframes rigaSu{from{opacity:0;transform:translateY(28px) rotate(-1.5deg)}}
@keyframes battito{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.045)}96%{transform:scale(.985)}}

/* ---------- il riflesso che scorre sul bottone rosa ---------- */
.btn--lg::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:riflesso 3.6s ease-in-out 1.5s infinite;
}
@keyframes riflesso{0%{left:-70%}55%,100%{left:150%}}

/* ---------- MENU: le voci entrano a cascata ---------- */
.menu.on .menu-list li{animation:menuIn .45s var(--ease) both}
.menu.on .menu-list li:nth-child(1){animation-delay:.06s}
.menu.on .menu-list li:nth-child(2){animation-delay:.12s}
.menu.on .menu-list li:nth-child(3){animation-delay:.18s}
.menu.on .menu-list li:nth-child(4){animation-delay:.24s}
.menu.on .menu-list li:nth-child(5){animation-delay:.30s}
.menu.on .menu-list li:nth-child(6){animation-delay:.36s}
.menu.on .menu-foot{animation:menuIn .5s var(--ease) .42s both}
@keyframes menuIn{from{opacity:0;transform:translateX(-24px)}}
.menu-list button:hover svg,.menu-list button:focus-visible svg{animation:scossa .5s ease}
@keyframes scossa{25%{transform:rotate(-12deg) scale(1.15)}60%{transform:rotate(9deg) scale(1.1)}}

/* ---------- DONAZIONE: la fascia scelta fa un saltello ---------- */
.tier.on{animation:tierPop .45s var(--ease)}
@keyframes tierPop{35%{transform:scale(1.09)}70%{transform:scale(.98)}}
.tier.on .t-emoji{animation:salta .7s var(--ease)}
@keyframes salta{30%{transform:translateY(-9px) rotate(-12deg)}60%{transform:translateY(0) rotate(8deg)}}
.pay{position:relative;overflow:hidden}
.pay:active::after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 65%);
  animation:onda .5s ease-out forwards;
}
@keyframes onda{from{transform:scale(0);opacity:.9}to{transform:scale(2.4);opacity:0}}

/* ---------- GRAZIE: la corona esce dal nulla ---------- */
.view--thanks.on .cap{animation:cade .8s var(--ease) both}
.view--thanks.on .h-huge{animation:grazieIn .7s var(--ease) .15s both}
.view--thanks.on .h-sub{animation:rigaSu .7s var(--ease) .32s both}
.view--thanks.on .thanks-photo img,
.view--thanks.on .thanks-photo .ph{animation:timbro .75s var(--ease) .42s both}
.view--thanks.on .shades{animation:occhiali .5s var(--ease) 1s both}
@keyframes cade{0%{opacity:0;transform:translateY(-40px) rotate(-25deg)}70%{transform:translateY(6px) rotate(6deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes grazieIn{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes timbro{0%{opacity:0;transform:scale(1.35) rotate(6deg)}70%{opacity:1;transform:scale(.96)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes occhiali{0%{opacity:0;transform:translate(-50%,-260%) rotate(-14deg)}100%{opacity:1;transform:translate(-50%,-50%)}}

/* ---------- WISHLIST: le schede entrano a cascata ---------- */
.card{animation:cardIn .5s var(--ease) both}
.card:nth-child(1){animation-delay:.03s}
.card:nth-child(2){animation-delay:.09s}
.card:nth-child(3){animation-delay:.15s}
.card:nth-child(4){animation-delay:.21s}
.card:nth-child(5){animation-delay:.27s}
.card:nth-child(6){animation-delay:.33s}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
.card:active{transform:scale(.97)}
.card:hover .card-img{animation:ballonzola 1.4s ease-in-out infinite}
@keyframes ballonzola{50%{transform:translateY(-5px)}}
.chip:active{transform:scale(.93)}
.icon-btn--heart.on{animation:cuoreScoppia .55s var(--ease)}
@keyframes cuoreScoppia{30%{transform:scale(1.6)}55%{transform:scale(.85)}80%{transform:scale(1.15)}}

/* ---------- LA RIGA CHE SCAPPA ---------- */
.runaway{
  position:relative;margin-top:20px;padding-top:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
}
.oppure{
  display:flex;align-items:center;gap:12px;width:100%;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--grey-2);margin:8px 0 4px;
}
.oppure::before,.oppure::after{content:"";flex:1;height:1px;background:var(--line)}
.oppure:empty{display:none}
.runaway-zona{position:relative;width:100%;height:118px}
.riga--wish.runaway-btn{width:96%;white-space:normal;padding:13px 14px;text-align:left}
.riga--wish .riga-t{font-size:.92rem}
.riga--wish .riga-ico{width:44px;height:44px}
.riga--wish.stanco{background:var(--pink);border-color:var(--pink);color:var(--white)}
.riga--wish.stanco .riga-s{color:rgba(255,255,255,.85)}
.riga--wish.stanco .riga-freccia{stroke:var(--white)}
.riga--wish.stanco .riga-ico{background:var(--white)}
.runaway-eye{font-size:.9rem;font-weight:600;color:#5b5b63;max-width:80%}
.runaway-eye:empty{display:none}
.runaway-msg{
  font-family:var(--ff-h);font-size:1.15rem;color:var(--pink);line-height:1.2;
  min-height:1.25em;opacity:0;transform:translateY(8px) rotate(-2deg);
}
.runaway-msg.on{animation:msgPop .5s var(--ease) forwards}
@keyframes msgPop{
  0%{opacity:0;transform:translateY(10px) rotate(-6deg) scale(.7)}
  60%{opacity:1;transform:translateY(0) rotate(2deg) scale(1.12)}
  100%{opacity:1;transform:translateY(0) rotate(-2deg) scale(1)}
}
.runaway-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s;
  will-change:transform;touch-action:manipulation;
}
.runaway-btn.stanco{animation:sfinito .7s var(--ease);box-shadow:0 10px 26px rgba(255,45,111,.32)}
@keyframes sfinito{
  0%  {transform:translate(-50%,-50%) rotate(0)}
  25% {transform:translate(-50%,-50%) rotate(-6deg) scale(.94)}
  50% {transform:translate(-50%,-50%) rotate(5deg)}
  75% {transform:translate(-50%,-50%) rotate(-3deg)}
  100%{transform:translate(-50%,-50%) rotate(0) scale(1)}
}

/* ---------- CORIANDOLI ---------- */
.confetti{position:fixed;inset:0;z-index:250;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;top:-20px;width:9px;height:15px;border-radius:2px;opacity:0;
  animation:cadono linear forwards;
}
@keyframes cadono{
  0%  {opacity:1;transform:translate3d(0,0,0) rotate(0)}
  100%{opacity:0;transform:translate3d(var(--dx,0px),105vh,0) rotate(var(--giro,540deg))}
}

/* ---------- ACCESSIBILITÀ ---------- */
:focus-visible{outline:2.5px solid var(--pink);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.15s!important}
}

/* =====================================================================
   SAGOMA RITAGLIATA + FONDALE POP
   ===================================================================== */
:root{
  --bordo:2.4px;                     /* spessore del contorno rosa */
}

/* ---------- il contorno segue la sagoma, non il riquadro ---------- */
.cutout{
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.55));
  transition:filter .35s var(--ease);
}
.cutout--bn{
  filter:
    grayscale(1) contrast(1.18)
    drop-shadow(var(--bordo) 0 0 var(--pink))
    drop-shadow(calc(var(--bordo) * -1) 0 0 var(--pink))
    drop-shadow(0 var(--bordo) 0 var(--pink))
    drop-shadow(0 calc(var(--bordo) * -1) 0 var(--pink))
    drop-shadow(0 16px 26px rgba(255,45,111,.28));
}

/* ---------- fondale: raggi, macchia rosa, retino, anello ---------- */
.pop-raggi,.pop-blob,.pop-dots,.pop-ring{position:absolute;pointer-events:none;z-index:1}
.pop-raggi{
  top:6%;left:50%;width:132%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,45,111,.17) 0 7deg,transparent 7deg 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 72%);
          mask-image:radial-gradient(circle,#000 38%,transparent 72%);
  animation:gira 46s linear infinite;
}
.pop-blob{
  top:13%;left:50%;width:66%;aspect-ratio:1;translate:calc(-50% + var(--bx,0px)) var(--by,0px);
  border-radius:47% 53% 44% 56% / 52% 45% 55% 48%;
  background:radial-gradient(circle at 40% 35%,var(--pink),#c3134f);
  opacity:.9;animation:morfa 14s ease-in-out infinite;
}
.pop-dots{
  inset:0;color:#fff;opacity:.2;
  background-image:radial-gradient(currentColor 1.4px,transparent 1.5px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(circle at 50% 34%,#000 20%,transparent 62%);
          mask-image:radial-gradient(circle at 50% 34%,#000 20%,transparent 62%);
}
.pop-ring{
  top:7%;left:50%;width:78%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  border:2px dashed rgba(255,255,255,.3);animation:gira 34s linear infinite reverse;
}
@keyframes gira{to{rotate:360deg}}
@keyframes morfa{
  0%,100%{border-radius:47% 53% 44% 56% / 52% 45% 55% 48%}
  50%    {border-radius:56% 44% 57% 43% / 44% 56% 44% 56%}
}

/* ---------- la sagoma galleggia e segue il dito ---------- */
.view--home.on .home-photo img{
  animation:galleggia 7s ease-in-out infinite;
}
@keyframes galleggia{
  0%,100%{transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--pr,0deg)) scale(1)}
  50%    {transform:translate3d(var(--px,0px),calc(var(--py,0px) - 12px),0) rotate(var(--pr,0deg)) scale(1.015)}
}

/* ---------- quando ci passi sopra: si accende ---------- */
.home-photo.tocca .cutout{
  filter:
    saturate(1.15)
    drop-shadow(3px 0 0 var(--pink)) drop-shadow(-3px 0 0 var(--pink))
    drop-shadow(0 3px 0 var(--pink)) drop-shadow(0 -3px 0 var(--pink))
    drop-shadow(0 20px 34px rgba(255,45,111,.45));
}
.home-photo.tocca .pop-blob{animation:blobPop .6s var(--ease)}
@keyframes blobPop{40%{scale:1.07}70%{scale:.98}}
.pop-blob--th{
  top:6%;width:76%;opacity:.16;
  background:radial-gradient(circle at 45% 40%,var(--pink),transparent 68%);
}
.pop-dots--th{color:var(--pink);opacity:.28}
.thanks-photo.tocca img{animation:scrolla .6s var(--ease)}
@keyframes scrolla{
  20%{transform:rotate(-3deg) scale(1.03)}
  50%{transform:rotate(2.5deg) scale(1.05)}
  80%{transform:rotate(-1.5deg) scale(1.02)}
}

/* ---------- scintille che schizzano al tocco ---------- */
.scintilla{
  position:absolute;z-index:6;pointer-events:none;font-size:1.1rem;
  animation:schizza .85s var(--ease) forwards;
}
@keyframes schizza{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.3)}
  25% {opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--sx,0px)),calc(-50% + var(--sy,0px))) scale(1.15) rotate(var(--sr,0deg))}
}

/* =====================================================================
   SCRIVIMI UNA DEDICA — sfondo rosa, scheda che galleggia, fumetti
   ===================================================================== */
.view--dedica{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--pink-3) 0%,#ffd0e0 26%,#ffe7ef 60%,#fff4f8 100%);
  min-height:100vh;min-height:100svh;
}

/* ---------- macchie rosa di sfondo ---------- */
.lampo{position:absolute;z-index:3;width:16px;height:3px;border-radius:2px;background:var(--white)}
.macchia{position:absolute;z-index:0;background:rgba(255,255,255,.18);pointer-events:none}
.macchia--1{top:8%;left:-30%;width:74%;aspect-ratio:1;border-radius:52% 48% 60% 40%/45% 55% 45% 55%;rotate:-12deg}
.macchia--2{top:38%;right:-34%;width:70%;aspect-ratio:1;border-radius:44% 56% 40% 60%/58% 42% 58% 42%;rotate:8deg;background:rgba(255,45,111,.07)}
.macchia--3{bottom:12%;left:-26%;width:64%;aspect-ratio:1;border-radius:58% 42% 52% 48%/48% 58% 42% 52%;background:rgba(255,45,111,.08)}
.macchia--4{bottom:-6%;right:-20%;width:58%;aspect-ratio:1;border-radius:50% 50% 42% 58%/56% 44% 56% 44%;background:rgba(255,45,111,.06)}

/* ---------- la fascia con la foto ---------- */
.dd-hero{
  position:relative;z-index:2;min-height:436px;color:var(--white);
  padding:calc(78px + env(safe-area-inset-top)) var(--pad) 14px;
  background:linear-gradient(168deg,var(--pink) 0%,var(--pink-2) 58%,var(--pink-3) 100%);
}
.pop-dots--dd{
  inset:0;color:var(--white);opacity:.32;
  -webkit-mask-image:radial-gradient(circle at 30% 46%,#000 14%,transparent 60%);
          mask-image:radial-gradient(circle at 30% 46%,#000 14%,transparent 60%);
}
.back--dd{position:relative;z-index:6;margin-bottom:12px;font-size:1rem;color:var(--white)}

.dd-foto{
  position:absolute;right:-12%;bottom:0;width:70%;z-index:2;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.18));
  animation:respiro 7s ease-in-out infinite;
}
@keyframes respiro{
  0%,100%{transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--pr,0deg))}
  50%    {transform:translate3d(var(--px,0px),calc(var(--py,0px) - 9px),0) rotate(var(--pr,0deg))}
}
.dd-hero.tocca .dd-foto{
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 16px 26px rgba(154,10,58,.5));
}

.dd-testa{position:relative;z-index:4;width:57%;padding-bottom:14px}
.dd-testa::before{
  content:"";position:absolute;inset:-14px -46px -6px -22px;z-index:-1;
  background:radial-gradient(118% 96% at 14% 50%,rgba(206,16,80,.52) 32%,rgba(206,16,80,0) 64%);
}
.dd-logo{margin:0 0 10px;line-height:1.2}
.dd-logo1{display:block;font-family:var(--ff-d);font-size:.74rem;letter-spacing:.03em}
.dd-logo2{display:block;font-size:.66rem;font-weight:600;letter-spacing:.06em;color:#a9a9b2;text-transform:uppercase}
.ded-title{
  font-size:clamp(1.7rem,8.2vw,2.2rem);font-weight:800;line-height:1.06;
  letter-spacing:-.03em;margin:0 0 14px;
}
.ded-title span{display:block}
.ded-title .pink{color:var(--ink)}
.ded-title .tondo{display:inline;color:var(--white)}
.ded-title span span{display:inline}
/* il tratto rosa disegnato sotto l'ultima riga */
.riga-sotto{position:relative;padding-bottom:12px}
.riga-sotto::after{
  content:"";position:absolute;left:-2%;right:6%;bottom:0;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 12C60 4 140 4 196 9' stroke='%230d0d10' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14 18C70 12 130 12 178 15' stroke='%230d0d10' stroke-width='3' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.ded-sub{color:rgba(255,255,255,.95);font-size:.9rem;line-height:1.55;margin:0;white-space:pre-line}

/* ---------- fumetti ---------- */
.fumetto{
  position:absolute;z-index:5;font-family:var(--ff-h);font-weight:700;
  font-size:.9rem;line-height:1.12;text-align:center;white-space:pre-line;
  background:var(--white);color:var(--ink);border:2.4px solid var(--ink);
  border-radius:18px;padding:8px 13px;box-shadow:3px 3px 0 rgba(13,13,16,.9);
}
.fumetto::after{
  content:"";position:absolute;width:13px;height:13px;background:var(--white);
  border-right:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);
}
.fumetto--1{top:calc(70px + env(safe-area-inset-top));right:2%;rotate:4deg;max-width:40%}
.fumetto--1::after{bottom:-8px;left:24%;rotate:45deg}
.fumetto--2{
  bottom:22px;right:1%;rotate:-3deg;max-width:52%;font-size:.74rem;
  background:var(--pink-l);border-color:var(--pink);color:var(--pink-d);
  box-shadow:3px 3px 0 rgba(255,45,111,.5);
}
.fumetto--2::after{background:var(--pink-l);border-color:var(--pink);top:-8px;right:20%;rotate:225deg}
.freccia-fumetto{
  position:absolute;z-index:5;bottom:30px;right:56%;width:44px;height:34px;
  color:var(--white);rotate:-8deg;
}
.cuore-vuoto{
  position:absolute;z-index:5;top:calc(134px + env(safe-area-inset-top));right:4%;
  font-size:1.7rem;color:var(--white);rotate:12deg;
}
.lampo--1{top:34%;left:46%;rotate:-40deg;box-shadow:7px 9px 0 #fff,-3px 14px 0 #fff;z-index:3}
.lampo--2{top:22%;right:26%;rotate:25deg;box-shadow:-8px 10px 0 #fff,2px 17px 0 #fff;z-index:3}
.view--dedica.on .fumetto--1{animation:scrIn .55s var(--ease) .3s both}
.view--dedica.on .fumetto--2{animation:scrIn .55s var(--ease) .5s both}

/* ---------- la scheda del modulo galleggia sul rosa ---------- */
.dd-form{
  position:relative;z-index:5;margin:0 12px;
  background:var(--white);border-radius:24px;
  box-shadow:0 16px 40px rgba(214,51,108,.16);
  padding:22px 18px 24px;
}

/* ---------- campi ---------- */
.campo{margin-bottom:16px;position:relative}
.campo-t{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;margin:0 0 8px}
.campo-t--riga{justify-content:space-between}
.campo-t-sx{display:flex;align-items:center;gap:8px}
.campo-t--solo{margin-top:20px}
.campo-ico2{
  width:20px;height:20px;flex:none;color:var(--pink);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ob{color:var(--pink)}
.campo-box{
  display:flex;align-items:center;gap:10px;background:#fdfdfd;
  border:1.6px solid var(--line);border-radius:14px;padding:15px 16px;
  transition:border-color .2s,box-shadow .2s;
}
.campo-box:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,45,111,.12);background:var(--white)}
.campo-box--errore{border-color:var(--pink);background:var(--pink-l)}
.campo-box input,.campo-box textarea{
  border:0;background:none;outline:none;width:100%;font-size:.95rem;color:var(--ink);font-family:inherit;
}
.campo-box textarea{resize:vertical;min-height:112px;line-height:1.55}
.campo-box input::placeholder,.campo-box textarea::placeholder{color:#a5a5ad}
.campo-box--area{align-items:stretch}
.conta{font-size:.75rem;color:var(--grey-2);font-weight:600;font-variant-numeric:tabular-nums}
.conta.pieno{color:var(--pink)}
.bolla{
  position:absolute;top:26px;right:-4px;z-index:3;font-family:var(--ff-h);font-weight:700;
  font-size:.86rem;line-height:1.15;text-align:center;white-space:pre-line;
  color:var(--pink-d);background:var(--pink-l);border-radius:12px;
  padding:8px 12px;rotate:-4deg;pointer-events:none;transition:opacity .3s;
  box-shadow:0 6px 14px rgba(255,45,111,.18);
}
.freccia-bolla{
  position:absolute;top:88px;right:48px;z-index:3;width:32px;height:34px;
  color:var(--pink);pointer-events:none;transition:opacity .3s;
}

/* ---------- formato ---------- */
.formati{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.formato{
  position:relative;border:1.6px solid var(--line);border-radius:15px;background:#fdfdfd;
  padding:13px 5px 11px;text-align:center;transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.formato:active{transform:scale(.96)}
.formato svg{width:23px;height:23px;margin-bottom:6px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.formato-n{display:block;font-size:.74rem;font-weight:800;line-height:1.2}
.formato-s{display:block;font-size:.58rem;color:var(--grey-2);margin-top:3px;line-height:1.25}
.formato.on{border-color:var(--pink);background:var(--pink-l);color:var(--pink)}
.formato.on .formato-n{color:var(--ink)}
.formato.on::after{
  content:"✓";position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;
  background:var(--pink);color:#fff;font-size:.8rem;font-weight:700;display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(255,45,111,.4);animation:tierPop .4s var(--ease);
}

/* ---------- allegato ---------- */
.allegato{
  border:1.6px dashed var(--line);border-radius:16px;padding:16px;margin-bottom:14px;
  display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;
}
.allegato[hidden]{display:none}
.allegato-titolo{font-weight:800;font-size:.88rem;margin:0}
.allegato-info{font-size:.8rem;color:#5b5b63;line-height:1.45;margin:0}
.allegato-nome{font-weight:700;color:var(--ink);word-break:break-all}
.allegato img,.allegato video{max-height:190px;border-radius:12px;width:auto}
.allegato audio{width:100%}
.btn--mini{padding:11px 18px;font-size:.86rem;border-radius:99px}
.btn--ghost{background:var(--grey);color:var(--ink)}
.btn--ghost:hover{background:var(--line)}
.rec{
  width:70px;height:70px;border-radius:50%;background:var(--pink);color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 24px rgba(255,45,111,.35);
  transition:transform .2s var(--ease);
}
.rec svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rec:active{transform:scale(.94)}
.rec.attivo{animation:pulsa 1.4s ease-in-out infinite}
.rec.attivo svg{fill:currentColor}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(255,45,111,.5)}70%{box-shadow:0 0 0 18px rgba(255,45,111,0)}}
.rec-tempo{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.05rem}

/* ---------- riga «pubblico»: accesa e bloccata ---------- */
.avviso{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--pink-l);border:1.6px solid rgba(255,45,111,.35);
  border-radius:16px;padding:14px 15px;margin:0 0 18px;
}
.avviso-ico{font-size:1.25rem;line-height:1.2;flex:none}
.avviso-t{margin:0 0 3px;font-weight:800;font-size:.88rem;color:var(--pink-d)}
.avviso-b{margin:0;font-size:.82rem;color:#5b5b63;line-height:1.5}

.btn--invia{gap:10px}
.btn--invia[disabled]{opacity:.65;pointer-events:none}
.errore-form{margin:12px 0 0;text-align:center;color:var(--pink-d);font-weight:700;font-size:.87rem}
.errore-form:empty{display:none}
.dd-link{
  display:block;width:100%;margin-top:14px;padding:12px;border-radius:12px;
  color:var(--pink);font-weight:700;font-size:.9rem;text-align:center;transition:background .2s;
}
.dd-link:hover{background:var(--pink-l)}

/* ---------- piede con corona e saluto ---------- */
.dd-piede{position:relative;z-index:3;padding:24px var(--pad) 34px}
.dd-piede-riga{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:18px}
.corona{width:44px;color:var(--pink);opacity:.85;flex:none;rotate:-8deg}
.corona svg{width:100%;height:auto;display:block}
.saluto{
  font-family:var(--ff-h);font-weight:700;font-size:1.15rem;line-height:1.15;
  text-align:right;white-space:pre-line;color:var(--pink);rotate:-6deg;
}
.saluto::after{content:" ❤️";font-size:.9rem}
.ded-quote{
  font-family:var(--ff-h);font-weight:700;font-size:1.05rem;line-height:1.4;
  text-align:center;white-space:pre-line;margin:0;color:#8a8a90;padding:0 6%;
}

/* =====================================================================
   BACHECA
   ===================================================================== */
.bc-conta{text-align:center;font-size:.8rem;color:var(--grey-2);margin:18px 0 14px}
.bacheca{display:flex;flex-direction:column;gap:14px}
.dedica{
  border:1.5px solid rgba(255,45,111,.16);border-radius:18px;padding:16px;background:var(--white);
  box-shadow:0 8px 22px rgba(214,51,108,.08);
  animation:cardIn .45s var(--ease) both;
}
.dedica--nuova{border-color:var(--pink);box-shadow:0 10px 26px rgba(255,45,111,.18)}
.dedica-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;color:#fff;font-size:1.05rem;
}
.dedica-nome{font-weight:800;font-size:.92rem;line-height:1.2}
.dedica-quando{font-size:.75rem;color:var(--grey-2)}
.dedica-testo{margin:0;font-size:.93rem;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
/* ---------- lettore dei vocali ---------- */
.vocale{
  display:flex;align-items:center;gap:13px;
  padding:11px 14px 11px 11px;border-radius:16px;
  background:linear-gradient(135deg,#fff2f6 0%,#ffe8f0 100%);
  border:1.5px solid rgba(255,45,111,.16);
}
.vocale audio{display:none}
.voc-play{
  flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink);color:#fff;box-shadow:0 4px 12px rgba(255,45,111,.34);
  transition:transform .2s var(--ease),box-shadow .2s;
}
.voc-play:hover{transform:scale(1.05)}
.voc-play:active{transform:scale(.93)}
.voc-play:disabled{background:var(--grey-2);box-shadow:none;cursor:default;transform:none}
.voc-play svg{width:21px;height:21px;fill:currentColor;stroke:none}
.voc-i--pausa{display:none}
.vocale.suona .voc-i--play{display:none}
.vocale.suona .voc-i--pausa{display:block}
.vocale.suona .voc-play{animation:vocePulsa 2s ease-in-out infinite}
@keyframes vocePulsa{
  0%,100%{box-shadow:0 4px 12px rgba(255,45,111,.34)}
  50%{box-shadow:0 4px 12px rgba(255,45,111,.34),0 0 0 7px rgba(255,45,111,.12)}
}
.voc-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.voc-barra{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(to right,var(--pink) var(--p,0%),rgba(255,45,111,.2) var(--p,0%));
  cursor:pointer;outline:none;
}
.voc-barra::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
  background:#fff;border:3.5px solid var(--pink);box-shadow:0 1px 4px rgba(0,0,0,.22);
}
.voc-barra::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;box-sizing:border-box;
  background:#fff;border:3.5px solid var(--pink);box-shadow:0 1px 4px rgba(0,0,0,.22);
}
.voc-barra:focus-visible{outline:2.5px solid var(--pink);outline-offset:4px}
.voc-tempi{
  display:flex;justify-content:space-between;gap:8px;
  font-size:.72rem;font-weight:600;color:var(--grey-2);font-variant-numeric:tabular-nums;
}
.vocale.rotto{opacity:.75}
.vocale.rotto .voc-barra{pointer-events:none}

/* ---------- lettore della tesi ---------- */
.lettore{margin:18px 0 14px}
.lettore[hidden]{display:none}
.lettore-palco{
  position:relative;border-radius:16px;overflow:hidden;
  background:var(--white);border:1.5px solid rgba(255,45,111,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.10);min-height:200px;
}
/* mentre disegna la pagina nuova, quella vecchia si smorza appena */
.lettore-foglio{display:block;width:100%;height:auto;transition:opacity .14s linear}
.lettore.cambia .lettore-foglio{opacity:.45}
.lettore-velo{
  position:absolute;inset:0;display:none;place-items:center;background:rgba(255,255,255,.9);
}
.lettore.carica .lettore-velo{display:grid}
.lettore-giro{
  width:30px;height:30px;border-radius:50%;
  border:3px solid rgba(255,45,111,.25);border-top-color:var(--pink);
  animation:giraTesi .8s linear infinite;
}
@keyframes giraTesi{to{transform:rotate(360deg)}}
.lettore-barra{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;
}
.lett-frec{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--white);border:1.5px solid var(--line);color:var(--ink);
  transition:border-color .2s,transform .2s var(--ease),opacity .2s;
}
.lett-frec svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lett-frec:hover:not(:disabled){border-color:var(--pink);color:var(--pink)}
.lett-frec:active:not(:disabled){transform:scale(.92)}
.lett-frec:disabled{opacity:.35;cursor:default}
.lett-frec--salto{width:36px;height:36px}
.lett-frec--salto svg{width:17px;height:17px}
.lett-num{
  font-size:.8rem;font-weight:700;color:var(--grey-2);
  font-variant-numeric:tabular-nums;min-width:96px;text-align:center;
}

.dedica-media{margin-top:12px}
.dedica-media img,.dedica-media video{width:100%;max-height:420px;object-fit:cover;border-radius:12px;display:block;background:var(--grey)}
.dedica-media audio{width:100%;margin-top:4px}
.bc-vuota{
  text-align:center;color:var(--grey-2);white-space:pre-line;padding:36px 10px;background:var(--white);
  border:1.6px dashed rgba(255,45,111,.3);border-radius:18px;
}

/* ---------- home: data della laurea e secondo bottone ---------- */
.home-badge{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  margin:0 auto 16px;padding:9px 18px;border-radius:99px;
  border:1.4px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}
.home-data{
  font-family:var(--ff-d);font-size:.82rem;letter-spacing:.02em;color:var(--pink);
  text-transform:uppercase;line-height:1.1;
}
.home-corso{font-size:.74rem;font-weight:600;color:#cfcfd6;letter-spacing:.02em;line-height:1.2}
.btn--sm{
  width:min(100%,300px);margin-top:11px;padding:13px 24px;font-size:.9rem;font-weight:700;
}
.btn--chiaro{
  background:rgba(255,255,255,.09);color:var(--white);
  border:1.5px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
}
.btn--chiaro:hover{background:rgba(255,255,255,.16)}
.view--home.on .home-badge{animation:rigaSu .7s var(--ease) both}
.view--home.on .home-copy .btn--sm{animation:rigaSu .75s var(--ease) .78s both}

/* ---------- schermi bassi: la home resta tutta in una schermata ---------- */
@media (max-height:790px){
  .home-badge{margin-bottom:12px;padding:7px 15px}
  .home-title{font-size:clamp(1.85rem,8.6vw,2.4rem);margin-bottom:12px}
  .home-sub{margin-bottom:18px;font-size:.92rem}
  .btn--lg{padding:16px 28px}
  .btn--sm{margin-top:9px;padding:12px 22px}
  .scroll-dot{display:none}
}
/* se l'ultimo metodo resta da solo su una riga, si allarga */
.paylist2 > .pay2:not(.pay2--riga):last-child:nth-child(3n+1){grid-column:1/-1;flex-direction:row;gap:9px;min-height:56px}