/* ============================================================
   NOA — Beauty & Wellness · Pavia
   Foglio di stile condiviso (index.html + listino.html)
   Palette: crema caldo · rosa cipria · oro rosa · prugna scuro
   Type:    Fraunces (display serif) · Karla (testo)
   ============================================================ */
:root{
  --crema:        #FBF6F1;
  --crema-scuro:  #F4EBE2;
  --sabbia:       #EDE0D4;
  --rosa-pallido: #F6D6DA;
  --rosa:         #E5AEB8;
  --rosa-oro:     #C98E9B;
  --rosa-fondo:   #A05E6C;
  --prugna:       #382A30;
  --prugna-soft:  #5C4A52;
  --salvia:       #A9B59F;
  --oro:          #C9A57C;
  --bianco:       #FFFDFB;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Karla", "Segoe UI", sans-serif;

  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --radius-lg: 32px;
  --container: 1180px;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background:var(--crema);
  color:var(--prugna);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--rosa); color:var(--bianco); }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; }

.container{ width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }

/* ---- texture grana su tutta la pagina ---- */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- titoli ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--rosa-fondo);
}
.eyebrow::before{ content:""; width:36px; height:1px; background:var(--rosa-oro); }

.title{
  font-family:var(--font-display);
  font-weight:420;
  font-size:clamp(34px, 4.6vw, 56px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:18px 0 22px;
}
.title em{
  font-style:italic; font-weight:380; color:var(--rosa-fondo);
}

.lead{ color:var(--prugna-soft); font-size:17px; max-width:56ch; }

/* ---- bottoni ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; border-radius:999px;
  font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s;
  will-change:transform;
}
.btn-primary{
  background:var(--prugna); color:var(--crema);
  box-shadow:0 14px 30px -12px rgba(56,42,48,.45);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -14px rgba(56,42,48,.5); background:#473640; }
.btn-ghost{
  background:transparent; color:var(--prugna);
  box-shadow:inset 0 0 0 1.5px rgba(56,42,48,.25);
}
.btn-ghost:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1.5px rgba(56,42,48,.55); }
.btn svg{ transition:transform .35s var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }

/* ============================================================
   HEADER — dynamic island
   ============================================================ */
.island-wrap{
  position:fixed; top:18px; left:0; right:0; z-index:100;
  display:flex; justify-content:center;
  pointer-events:none;
}
.island{
  pointer-events:auto;
  display:flex; align-items:center; gap:8px;
  width:min(980px, calc(100% - 32px));
  padding:10px 12px 10px 20px;
  border-radius:999px;
  background:rgba(255,253,251,.55);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 8px 32px -12px rgba(56,42,48,.18), inset 0 1px 0 rgba(255,255,255,.7);
  transition:width .6s var(--ease-out), padding .45s var(--ease-out),
             background .45s, box-shadow .45s, transform .45s var(--ease-out);
}
/* stato compresso allo scroll */
.island.shrunk{
  width:min(760px, calc(100% - 32px));
  padding:7px 10px 7px 16px;
  background:rgba(255,253,251,.78);
  box-shadow:0 14px 44px -14px rgba(56,42,48,.28), inset 0 1px 0 rgba(255,255,255,.8);
}
.island.hidden-up{ transform:translateY(-130%); }

.brand{ display:flex; align-items:center; margin-right:auto; }
.brand img{
  height:58px; width:auto; margin:-16px 0; object-fit:contain;
  transition:height .45s var(--ease-out);
}
.island.shrunk .brand img{ height:48px; }

.island nav{ display:flex; align-items:center; gap:2px; }
.island nav a{
  position:relative; padding:9px 14px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--prugna-soft);
  transition:color .3s, background .3s;
  white-space:nowrap;
}
.island nav a:hover{ color:var(--prugna); background:rgba(229,174,184,.18); }
.island nav a.active{ color:var(--rosa-fondo); }
.island nav a.active::after{
  content:""; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--rosa-fondo);
}

.island .btn-prenota{
  padding:11px 22px; border-radius:999px;
  background:var(--prugna); color:var(--crema);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .3s, transform .3s var(--ease-out);
}
.island .btn-prenota:hover{ background:var(--rosa-fondo); transform:scale(1.04); }

/* hamburger */
.burger{
  display:none; width:42px; height:42px; border-radius:50%;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  background:rgba(229,174,184,.18); flex:none;
}
.burger span{ width:18px; height:1.8px; background:var(--prugna); border-radius:2px; transition:.35s var(--ease-out); }
.burger.open span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

/* menu mobile */
.mobile-menu{
  position:fixed; top:84px; left:50%; transform:translateX(-50%) translateY(-12px);
  width:min(420px, calc(100% - 32px)); z-index:99;
  padding:18px; border-radius:28px;
  background:rgba(255,253,251,.92);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 60px -20px rgba(56,42,48,.3);
  display:flex; flex-direction:column; gap:4px;
  opacity:0; visibility:hidden; transition:.4s var(--ease-out);
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mobile-menu a{
  padding:14px 18px; border-radius:16px; text-align:center;
  font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--prugna-soft); transition:background .25s, color .25s;
}
.mobile-menu a:hover{ background:rgba(229,174,184,.2); color:var(--rosa-fondo); }
.mobile-menu a.cta{ background:var(--prugna); color:var(--crema); border-radius:999px; }

@media (max-width: 980px){
  .island nav{ display:none; }
  .burger{ display:flex; }
}

/* ============================================================
   HERO — interattivo (index)
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:140px 0 90px;
  overflow:hidden;
}

.hero-bg{ position:absolute; inset:0; z-index:0; }
.blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.65;
  will-change:transform;
}
.blob-1{ width:55vw; height:55vw; top:-18%; right:-12%;
  background:radial-gradient(circle at 35% 35%, var(--rosa-pallido), transparent 70%);
  animation:drift 16s ease-in-out infinite alternate; }
.blob-2{ width:42vw; height:42vw; bottom:-14%; left:-10%;
  background:radial-gradient(circle at 60% 40%, #E8EDE2, transparent 70%);
  animation:drift 20s ease-in-out infinite alternate-reverse; }
.blob-3{ width:26vw; height:26vw; top:36%; left:30%;
  background:radial-gradient(circle, rgba(201,165,124,.35), transparent 70%);
  animation:drift 24s ease-in-out infinite alternate; }
@keyframes drift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(4%, 6%) scale(1.08); }
}

.petal{
  position:absolute; z-index:1; width:22px; opacity:0;
  animation:fall linear infinite;
  will-change:transform, opacity;
}
@keyframes fall{
  0%   { transform:translateY(-8vh) rotate(0deg);   opacity:0; }
  8%   { opacity:.7; }
  90%  { opacity:.5; }
  100% { transform:translateY(108vh) rotate(320deg); opacity:0; }
}

.hero .container{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;
}

.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 20px; border-radius:999px;
  background:rgba(255,253,251,.6); border:1px solid rgba(229,174,184,.5);
  backdrop-filter:blur(8px);
  font-size:11px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rosa-fondo);
}
.hero-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--rosa-fondo); animation:pulse 2.4s infinite; }
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(160,94,108,.45); }
  70%  { box-shadow:0 0 0 10px rgba(160,94,108,0); }
  100% { box-shadow:0 0 0 0 rgba(160,94,108,0); }
}

.hero h1{
  font-family:var(--font-display);
  font-weight:380;
  font-size:clamp(46px, 6.6vw, 86px);
  line-height:1.02; letter-spacing:-.015em;
  margin:26px 0 10px;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{
  display:block; transform:translateY(110%);
  animation:rise 1.1s var(--ease-out) forwards;
}
.hero h1 .line:nth-child(2) > span{ animation-delay:.12s; }
.hero h1 .line:nth-child(3) > span{ animation-delay:.24s; }
@keyframes rise{ to{ transform:translateY(0); } }

.swap-word{
  display:inline-block; position:relative;
  font-style:italic; color:var(--rosa-fondo);
  min-width:5.2ch;
}
.swap-word span{
  position:absolute; left:0; top:0; opacity:0;
  transform:translateY(60%) rotate(2deg);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  white-space:nowrap;
}
.swap-word span.in{ position:relative; opacity:1; transform:none; }
.swap-word span.out{ opacity:0; transform:translateY(-60%) rotate(-2deg); }

.hero .lead{ margin:18px 0 36px; opacity:0; animation:fadeUp 1s .5s var(--ease-out) forwards; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; opacity:0; animation:fadeUp 1s .68s var(--ease-out) forwards; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:none; }
}

.hero-proof{
  display:flex; align-items:center; gap:14px; margin-top:44px;
  opacity:0; animation:fadeUp 1s .85s var(--ease-out) forwards;
}
.avatars{ display:flex; }
.avatars span{
  width:38px; height:38px; border-radius:50%;
  border:2.5px solid var(--crema); margin-left:-10px;
  font-family:var(--font-display); font-size:15px; font-style:italic;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.avatars span:first-child{ margin-left:0; }
.avatars span:nth-child(1){ background:var(--rosa-oro); }
.avatars span:nth-child(2){ background:var(--salvia); }
.avatars span:nth-child(3){ background:var(--oro); }
.avatars span:nth-child(4){ background:var(--rosa-fondo); }
.hero-proof p{ font-size:13.5px; color:var(--prugna-soft); }
.hero-proof strong{ color:var(--prugna); }
.stars{ color:var(--rosa-fondo); letter-spacing:2px; }

/* ----- pannello visivo destro: arco + parallasse ----- */
.hero-visual{
  position:relative; aspect-ratio:3/4; max-height:620px;
  opacity:0; animation:fadeUp 1.2s .3s var(--ease-out) forwards;
}
.arch{
  position:absolute; inset:0;
  border-radius:300px 300px var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.55), transparent 50%),
    linear-gradient(165deg, var(--rosa-pallido) 0%, var(--rosa) 42%, var(--rosa-oro) 100%);
  box-shadow:0 40px 80px -30px rgba(160,94,108,.45), inset 0 2px 0 rgba(255,255,255,.5);
  overflow:hidden;
  will-change:transform;
}
.arch::after{
  content:""; position:absolute; inset:-60%;
  background:linear-gradient(60deg, transparent 42%, rgba(255,255,255,.32) 50%, transparent 58%);
  animation:shine 6.5s ease-in-out infinite;
}
@keyframes shine{
  0%, 60% { transform:translateX(-65%) }
  100%    { transform:translateX(65%) }
}
.arch svg.botanic{
  position:absolute; inset:8% 10%; width:80%; height:auto; margin:auto;
  stroke:rgba(255,253,251,.85); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.arch svg.botanic path{
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:draw 3.4s 1s var(--ease-soft) forwards;
}
.arch svg.botanic path:nth-child(2){ animation-delay:1.5s; }
.arch svg.botanic path:nth-child(3){ animation-delay:2s; }
.arch svg.botanic path:nth-child(4){ animation-delay:2.4s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.float-card{
  position:absolute; z-index:3;
  background:rgba(255,253,251,.78);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:20px; padding:14px 20px;
  box-shadow:0 18px 44px -16px rgba(56,42,48,.28);
  font-size:13px; will-change:transform;
}
.float-card b{ display:block; font-family:var(--font-display); font-size:17px; font-weight:560; }
.fc-1{ top:14%; left:-14%; animation:bob 5.5s ease-in-out infinite; }
.fc-2{ bottom:10%; right:-10%; animation:bob 6.5s .8s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

.rotor{
  position:absolute; z-index:4; width:128px; height:128px;
  top:-34px; right:6%;
  display:flex; align-items:center; justify-content:center;
}
.rotor svg{ position:absolute; inset:0; animation:spin 16s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.rotor text{
  font-size:10.5px; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  fill:var(--rosa-fondo); font-family:var(--font-body);
}
.rotor .core{
  width:54px; height:54px; border-radius:50%;
  background:var(--bianco); border:1px solid var(--rosa-pallido);
  box-shadow:0 12px 28px -10px rgba(160,94,108,.4);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--rosa-fondo);
}

.scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--prugna-soft);
  opacity:0; animation:fadeUp 1s 1.4s forwards;
}
.scroll-hint::after{
  content:""; width:1px; height:44px;
  background:linear-gradient(var(--rosa-fondo), transparent);
  animation:stretch 1.8s ease-in-out infinite;
}
@keyframes stretch{
  0%,100%{ transform:scaleY(.4); transform-origin:top; }
  50%    { transform:scaleY(1);  transform-origin:top; }
}

@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; gap:48px; }
  .hero-visual{ max-width:420px; margin-inline:auto; }
  .fc-1{ left:-6%; } .fc-2{ right:-4%; }
}
@media (max-width: 640px){
  .float-card{ display:none; }
  .rotor{ width:96px; height:96px; top:-18px; right:2%; }
  .scroll-hint{ display:none; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--prugna); color:var(--crema);
  padding:20px 0; overflow:hidden;
  transform:rotate(-1.2deg) scale(1.02);
  margin:10px 0 0;
}
.marquee-track{
  display:flex; gap:56px; width:max-content;
  animation:scroll-x 28s linear infinite;
}
.marquee-track span{
  font-family:var(--font-display); font-size:21px; font-style:italic; font-weight:380;
  letter-spacing:.04em; white-space:nowrap;
  display:flex; align-items:center; gap:56px;
}
.marquee-track span::after{ content:"✿"; font-style:normal; color:var(--rosa); font-size:15px; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* ============================================================
   SEZIONI COMUNI / REVEAL
   ============================================================ */
section{ padding:110px 0; position:relative; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }

/* ============================================================
   CHI SIAMO
   ============================================================ */
.about .container{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center;
}
.about-visual{ position:relative; }
.about-frame{
  aspect-ratio:4/5; border-radius:var(--radius-lg);
  background:
    radial-gradient(100% 80% at 20% 15%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(155deg, var(--sabbia), var(--crema-scuro) 50%, var(--rosa-pallido));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 30px 70px -28px rgba(56,42,48,.25);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.about-frame .frame-logo{
  width:78%; margin-top:-14%;
  filter:drop-shadow(0 6px 20px rgba(160,94,108,.25));
}
.about-frame .quote{
  position:absolute; inset:auto 10% 10%;
  font-family:var(--font-display); font-style:italic; font-size:clamp(16px,1.5vw,20px);
  color:var(--prugna); text-align:center; line-height:1.45;
}
.about-badge{
  position:absolute; top:-26px; right:-18px;
  background:var(--prugna); color:var(--crema);
  border-radius:20px; padding:18px 24px; text-align:center;
  box-shadow:0 20px 44px -16px rgba(56,42,48,.5);
  transform:rotate(4deg);
}
.about-badge b{ font-family:var(--font-display); font-size:30px; font-weight:560; display:block; }
.about-badge small{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--rosa); }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:44px;
}
.stat{
  background:var(--bianco); border:1px solid rgba(229,174,184,.4);
  border-radius:22px; padding:24px 18px; text-align:center;
  transition:transform .4s var(--ease-out), box-shadow .4s;
}
.stat:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -16px rgba(160,94,108,.3); }
.stat b{
  display:block; font-family:var(--font-display); font-weight:480;
  font-size:clamp(28px,3vw,38px); color:var(--rosa-fondo);
}
.stat span{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--prugna-soft); }

@media (max-width: 980px){
  .about .container{ grid-template-columns:1fr; gap:56px; }
  .about-visual{ max-width:440px; margin-inline:auto; }
}
@media (max-width: 560px){
  .stats{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   SERVIZI / RITUALI
   ============================================================ */
.services{ background:linear-gradient(var(--crema), var(--crema-scuro) 30%, var(--crema)); }
.services-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  margin-bottom:56px; flex-wrap:wrap;
}
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.service{
  position:relative; overflow:hidden;
  background:var(--bianco); border-radius:28px;
  padding:36px 30px 30px;
  border:1px solid rgba(229,174,184,.35);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.service:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px -22px rgba(160,94,108,.35);
}
.service::before{
  content:""; position:absolute; top:-40%; right:-30%; width:75%; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle, var(--rosa-pallido), transparent 70%);
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.service:hover::before{ opacity:1; }

.service .icon{
  width:58px; height:58px; border-radius:18px;
  background:linear-gradient(150deg, var(--rosa-pallido), rgba(246,214,218,.35));
  border:1px solid rgba(229,174,184,.5);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  transition:transform .45s var(--ease-out);
}
.service:hover .icon{ transform:rotate(-8deg) scale(1.08); }
.service .icon svg{ width:28px; height:28px; stroke:var(--rosa-fondo); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.service h3{ font-family:var(--font-display); font-weight:520; font-size:23px; margin-bottom:8px; }
.service p{ font-size:14.5px; color:var(--prugna-soft); min-height:66px; }
.service .meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:22px; padding-top:18px; border-top:1px dashed rgba(160,94,108,.3);
}
.service .price{ font-family:var(--font-display); font-size:21px; font-weight:560; color:var(--rosa-fondo); }
.service .price small{ font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--prugna-soft); }
.service .time{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--prugna-soft); }

.service.featured{
  background:var(--prugna); color:var(--crema); border-color:transparent;
}
.service.featured p{ color:rgba(251,246,241,.75); }
.service.featured .icon{ background:rgba(229,174,184,.16); border-color:rgba(229,174,184,.35); }
.service.featured .icon svg{ stroke:var(--rosa); }
.service.featured .price{ color:var(--rosa); }
.service.featured .time, .service.featured .price small{ color:rgba(251,246,241,.6); }
.service.featured .meta{ border-color:rgba(251,246,241,.25); }
.service .pill{
  position:absolute; top:20px; right:20px;
  background:var(--rosa); color:var(--prugna);
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
}

@media (max-width: 980px){ .services-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .services-grid{ grid-template-columns:1fr; } }

/* ============================================================
   GALLERIA — atmosfere
   ============================================================ */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:18px;
  margin-top:56px;
}
.g-item{
  position:relative; border-radius:26px; overflow:hidden; cursor:pointer;
  display:flex; align-items:flex-end; padding:24px;
  border:1px solid rgba(255,255,255,.6);
  transition:transform .5s var(--ease-out), box-shadow .5s;
}
.g-item:hover{ transform:scale(.985); box-shadow:0 24px 54px -20px rgba(56,42,48,.35); }
.g-item:nth-child(1){ grid-column:span 2; grid-row:span 2;
  background:radial-gradient(110% 110% at 15% 10%, #F9E4E7, var(--rosa) 60%, var(--rosa-oro)); }
.g-item:nth-child(2){
  background:linear-gradient(160deg, #EFF3EA, var(--salvia)); }
.g-item:nth-child(3){
  background:linear-gradient(160deg, #F7EFE3, var(--oro)); }
.g-item:nth-child(4){ grid-row:span 2;
  background:radial-gradient(120% 120% at 80% 0%, #F2E4EC, var(--rosa-oro) 75%); }
.g-item:nth-child(5){
  background:linear-gradient(160deg, #FBEFF1, var(--rosa)); }

.g-item .sigil{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-58%);
  width:42%; max-width:150px; opacity:.5;
  stroke:#fff; fill:none; stroke-width:1.4; stroke-linecap:round;
  transition:transform .6s var(--ease-out), opacity .4s;
}
.g-item:hover .sigil{ transform:translate(-50%,-58%) scale(1.12) rotate(4deg); opacity:.85; }

.g-item figcaption{ position:relative; z-index:2; color:#fff; }
.g-item figcaption b{
  display:block; font-family:var(--font-display); font-weight:500; font-size:20px;
  text-shadow:0 2px 14px rgba(56,42,48,.3);
}
.g-item figcaption span{
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.85;
}
.g-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 50%, rgba(56,42,48,.32));
}

@media (max-width: 880px){
  .gallery-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:200px; }
  .g-item:nth-child(1){ grid-column:span 2; }
}

/* ============================================================
   TESTIMONIANZE
   ============================================================ */
.reviews{ background:var(--crema-scuro); border-radius:60px 60px 0 0; }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
.review{
  background:var(--bianco); border-radius:26px; padding:34px 30px;
  border:1px solid rgba(229,174,184,.35);
  display:flex; flex-direction:column; gap:18px;
  transition:transform .45s var(--ease-out), box-shadow .45s;
}
.review:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:0 26px 54px -20px rgba(160,94,108,.3); }
.review .stars{ font-size:15px; }
.review blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:18.5px; line-height:1.5; color:var(--prugna);
}
.review footer{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.review footer .ava{
  width:44px; height:44px; border-radius:50%; color:#fff;
  font-family:var(--font-display); font-style:italic; font-size:17px;
  display:flex; align-items:center; justify-content:center;
}
.review footer b{ display:block; font-size:14.5px; }
.review footer span{ font-size:12px; color:var(--prugna-soft); }
@media (max-width: 880px){ .reviews-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PRENOTA + CONTATTI
   ============================================================ */
.booking{ background:var(--crema-scuro); }
.booking .container{
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start;
}
.info-list{ display:flex; flex-direction:column; gap:14px; margin-top:36px; }
.info-row{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--bianco); border:1px solid rgba(229,174,184,.35);
  padding:20px 24px; border-radius:20px;
  transition:transform .35s var(--ease-out);
}
.info-row:hover{ transform:translateX(6px); }
.info-row .ic{
  width:44px; height:44px; flex:none; border-radius:14px;
  background:var(--rosa-pallido);
  display:flex; align-items:center; justify-content:center;
}
.info-row .ic svg{ width:21px; height:21px; stroke:var(--rosa-fondo); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.info-row b{ display:block; font-size:14.5px; margin-bottom:2px; }
.info-row p{ font-size:13.5px; color:var(--prugna-soft); }
.info-row a{ color:var(--rosa-fondo); font-weight:700; }
.info-row a:hover{ text-decoration:underline; }

.hours{ width:100%; border-collapse:collapse; margin-top:6px; font-size:13.5px; }
.hours td{ padding:4px 0; color:var(--prugna-soft); }
.hours td:last-child{ text-align:right; font-weight:700; color:var(--prugna); }
.hours tr.closed td:last-child{ color:var(--rosa-fondo); }

.pay-note{
  margin-top:20px; font-size:13px; color:var(--prugna-soft);
  display:flex; align-items:center; gap:10px;
}
.pay-note::before{ content:"✿"; color:var(--rosa); }

/* form */
.form-card{
  background:var(--bianco); border-radius:32px; padding:44px 40px;
  border:1px solid rgba(229,174,184,.4);
  box-shadow:0 34px 80px -32px rgba(160,94,108,.35);
  position:sticky; top:110px;
}
.form-card h3{ font-family:var(--font-display); font-weight:480; font-size:30px; margin-bottom:6px; }
.form-card > div > p{ font-size:14px; color:var(--prugna-soft); margin-bottom:28px; }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--prugna-soft); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; padding:14px 18px; border-radius:14px;
  border:1.5px solid rgba(160,94,108,.22); background:var(--crema);
  font:inherit; font-size:15px; color:var(--prugna);
  transition:border-color .3s, box-shadow .3s; outline:none;
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--rosa-fondo);
  box-shadow:0 0 0 4px rgba(160,94,108,.12);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-card .btn{ width:100%; justify-content:center; margin-top:8px; }
.form-note{ font-size:12px; color:var(--prugna-soft); text-align:center; margin-top:14px; }

.form-success{
  display:none; text-align:center; padding:40px 10px;
}
.form-success.show{ display:block; animation:fadeUp .7s var(--ease-out); }
.form-success .check{
  width:70px; height:70px; margin:0 auto 20px; border-radius:50%;
  background:var(--rosa-pallido); display:flex; align-items:center; justify-content:center;
}
.form-success .check svg{ width:32px; height:32px; stroke:var(--rosa-fondo); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.form-success h4{ font-family:var(--font-display); font-size:26px; font-weight:500; margin-bottom:8px; }
.form-success p{ font-size:14px; color:var(--prugna-soft); }

@media (max-width: 980px){
  .booking .container{ grid-template-columns:1fr; gap:48px; }
  .form-card{ position:static; }
}
@media (max-width: 520px){
  .field-row{ grid-template-columns:1fr; }
  .form-card{ padding:32px 24px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{
  background:var(--prugna); color:var(--crema);
  padding:90px 0 36px; border-radius:60px 60px 0 0;
  position:relative; overflow:hidden;
}
.footer-logo{
  display:block; width:min(520px, 72%); margin:0 auto 48px;
  opacity:.96;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap;
  padding-top:34px; border-top:1px solid rgba(251,246,241,.16);
}
.footer-grid nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-grid nav a{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(251,246,241,.65); transition:color .3s;
}
.footer-grid nav a:hover{ color:var(--rosa); }
.socials{ display:flex; gap:12px; }
.socials a{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(251,246,241,.25);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s var(--ease-out);
}
.socials a:hover{ background:var(--rosa-fondo); transform:translateY(-3px); }
.socials svg{ width:17px; height:17px; stroke:var(--crema); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.copy{ text-align:center; margin-top:34px; font-size:12px; color:rgba(251,246,241,.45); }
.copy em{ font-family:var(--font-display); color:var(--rosa); }

/* ============================================================
   LISTINO PREZZI — stile menù
   ============================================================ */
.listino-hero{
  padding:180px 0 30px; position:relative; overflow:hidden;
}
.listino-hero .blob-1{ width:44vw; height:44vw; top:-24%; right:-14%; }
.listino-hero .container{ position:relative; z-index:2; }
.listino-hero .lead{ margin-top:4px; }

/* nav categorie sticky */
.cat-nav{
  position:sticky; top:88px; z-index:60;
  padding:6px 0;
  transition:top .45s var(--ease-out);
}
/* quando l'isola si nasconde allo scroll, la barra sale al suo posto */
.cat-nav.raised{ top:14px; }
.cat-nav .rail{
  display:flex; gap:6px; overflow-x:auto;
  width:min(var(--container), calc(100% - 48px)); margin-inline:auto;
  padding:8px; border-radius:999px;
  background:rgba(255,253,251,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 12px 34px -16px rgba(56,42,48,.22);
  scrollbar-width:none;
}
.cat-nav .rail::-webkit-scrollbar{ display:none; }
.cat-nav a{
  flex:none; padding:10px 20px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--prugna-soft);
  transition:background .3s, color .3s;
}
.cat-nav a:hover{ background:rgba(229,174,184,.22); color:var(--prugna); }
.cat-nav a.active{ background:var(--prugna); color:var(--crema); }

/* sezioni menù */
.menu-wrap{ width:min(880px, calc(100% - 48px)); margin-inline:auto; }
.menu-section{ padding:64px 0 10px; scroll-margin-top:190px; }
.menu-head{ text-align:center; }
.menu-head .orn{ font-size:16px; color:var(--rosa); letter-spacing:10px; display:block; margin-bottom:10px; }
.menu-head .count{
  display:block; font-size:11px; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--rosa-fondo); margin-bottom:8px;
}
.menu-head h2{
  font-family:var(--font-display); font-weight:440;
  font-size:clamp(30px, 3.6vw, 44px); line-height:1.1; letter-spacing:-.01em;
}
.menu-head h2 em{ font-style:italic; color:var(--rosa-fondo); font-weight:380; }
.menu-head .menu-sub{
  margin:12px auto 0; max-width:58ch;
  font-size:15px; color:var(--prugna-soft);
}
.menu-list{ margin-top:34px; }

.menu-item{ padding:15px 4px; }
.menu-item + .menu-item{ border-top:1px solid rgba(160,94,108,.09); }
.mi-row{ display:flex; align-items:baseline; gap:12px; }
.mi-name{
  font-family:var(--font-display); font-weight:500; font-size:19.5px;
  transition:color .3s;
}
.menu-item:hover .mi-name{ color:var(--rosa-fondo); }
.mi-dots{
  flex:1; min-width:28px;
  border-bottom:2px dotted rgba(160,94,108,.35);
  transform:translateY(-4px);
}
.mi-price{
  font-family:var(--font-display); font-weight:560; font-size:19.5px;
  color:var(--rosa-fondo); white-space:nowrap;
}
.mi-price small{
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:.08em; color:var(--prugna-soft); margin-right:4px;
}
.mi-meta{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--prugna-soft); margin-top:3px;
}
.badge-top{
  display:inline-block; margin-left:10px; vertical-align:2px;
  font-family:var(--font-body); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--rosa-pallido); color:var(--rosa-fondo);
  padding:4px 11px; border-radius:999px;
}
.mi-variants{
  margin:10px 0 4px 18px; padding-left:18px;
  border-left:2px solid rgba(160,94,108,.15);
  display:flex; flex-direction:column; gap:8px;
}
.mi-variants .mi-name{ font-size:16px; font-weight:440; }
.mi-variants .mi-price{ font-size:16px; }

/* sottogruppo (es. Rituali speciali dentro Massaggi) */
.menu-subgroup{
  margin-top:30px; padding:6px 0 0;
  text-align:center;
}
.menu-subgroup h3{
  display:inline-block;
  font-family:var(--font-display); font-style:italic; font-weight:440;
  font-size:22px; color:var(--rosa-fondo);
  padding-bottom:2px; border-bottom:1px solid rgba(160,94,108,.3);
}
.menu-subgroup p{ font-size:13.5px; color:var(--prugna-soft); margin-top:8px; }

/* CTA finale listino */
.listino-cta{
  text-align:center; padding:90px 0 120px;
}
.listino-cta .title{ margin-bottom:14px; }
.listino-cta .lead{ margin:0 auto 34px; }

@media (max-width: 640px){
  .mi-name{ font-size:17px; }
  .mi-price{ font-size:17px; }
  .cat-nav{ top:80px; }
  .menu-section{ scroll-margin-top:170px; }
  .listino-hero{ padding-top:150px; }
}

/* ============================================================
   MOVIMENTO RIDOTTO — degradazione elegante, non animazioni a 0ms.
   Opera (con risparmio batteria / Lucid mode) forza
   prefers-reduced-motion anche quando le animazioni di sistema
   sono attive: qui i contenuti restano sempre visibili e si
   fermano solo le animazioni decorative.
   NOTA: questo blocco deve restare in FONDO al foglio, così le
   sue regole vincono sulla cascata a parità di specificità.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  /* animazioni decorative continue: spente */
  .blob, .petal, .rotor svg, .arch::after, .marquee-track,
  .fc-1, .fc-2, .hero-tag .dot, .scroll-hint::after,
  .arch svg.botanic path{ animation:none !important; }
  .petal{ display:none; }
  .arch svg.botanic path{ stroke-dashoffset:0; }

  /* contenuti dell'hero: subito visibili, senza slide */
  .hero h1 .line > span{ animation:none; transform:none; }
  .hero .lead, .hero-cta, .hero-proof, .hero-visual, .scroll-hint{
    animation:none; opacity:1;
  }

  /* reveal allo scroll: sempre visibili */
  .reveal{ opacity:1; transform:none; transition:none; }

  /* micro-transizioni (hover, isola): istantanee ma innocue */
  .island, .brand img, .btn, .service, .stat, .review, .info-row,
  .g-item, .mobile-menu{ transition:none; }
}