/* ============================================================================
   BELLEZZA STUDIO — Foglio di stile condiviso (tutte le pagine)
   Tema chiaro, editoriale, beauty. Le variabili colore/font sono iniettate
   da components.js a partire da config.js (tema), così bastano i nomi qui.
   ============================================================================ */

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

:root{
  /* fallback se config.js non carica (verranno sovrascritte) — palette TWINS: bianco/crema + nero + oro */
  --rosa:#8c6a3f; --rosa-light:#f4ecdd; --rosa-dark:#6e4e2e;
  --salvia:#b9ac9a; --salvia-dark:#2c2823;
  --crema:#ffffff; --crema-2:#faf7f1; --sabbia:#e9e2d6;
  --carbone:#1a1a1a; --grigio:#6f665a;
  --gold:#c9a36a; --gold-dark:#8c6a3f;
  --font-titoli:'Cormorant Garamond',serif;
  --font-testo:'Outfit',sans-serif;
  --expo:cubic-bezier(0.16,1,0.3,1);
  --maxw:1200px;
  /* Soft UI Evolution — scala ombre coerente (morbide, stratificate) */
  --sh-sm:0 2px 8px rgba(50,45,40,.05);
  --sh-md:0 8px 24px rgba(50,45,40,.07);
  --sh-lg:0 20px 50px rgba(50,45,40,.10);
  --sh-rosa:0 14px 34px rgba(126,74,53,.24);
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

html{ scroll-behavior:smooth; font-size:16px; }
body{
  background:var(--crema); color:var(--carbone);
  font-family:var(--font-testo); font-weight:300; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--rosa); color:#fff; }
::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-thumb{ background:var(--sabbia); }

.serif{ font-family:var(--font-titoli); }
/* Accento titoli stile Twins: gradiente oro→bronzo applicato al testo.
   Le 3 tappe sono token con fallback ai colori storici: un tema che non li
   definisce resta identico a prima. Servono perché il gradiente dà per scontato
   che --rosa-dark sia CALDO (nel default è bronzo #6e4e2e, stessa famiglia
   dell'oro: è un riflesso metallico, non due colori diversi). Un tema con
   --rosa-dark freddo trasforma il riflesso in oro→petrolio: due famiglie
   opposte. Chi ribrandizza fuori dalla gamma calda deve ridefinire le tappe
   dentro la PROPRIA famiglia (vedi yumii-nail e for-me-beauty in clienti.js). */
.italic{ font-style:italic; color:var(--gold-dark); background:linear-gradient(95deg,var(--grad-1,var(--gold)) 0%,var(--grad-2,var(--gold-dark)) 60%,var(--grad-3,var(--rosa-dark)) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .italic{ -webkit-text-fill-color:currentColor; color:var(--gold-dark); } }

/* Titolo sopra la FOTO dell'hero: il gradiente finisce su una tinta profonda,
   che su uno sfondo scuro sparisce — l'ultima parola sembra tagliata. Non è
   colpa di una palette: sulla foto fa 1.3:1 col teal e 1.18:1 col bronzo di
   default, quindi è sempre stato rotto, solo che il marrone su foto calda
   sembrava voluto. Sopra la foto il titolo resta chiaro (8.4:1). L'oro resta
   dov'è leggibile: l'eyebrow sopra e gli accenti. */
.hero-full h1 .italic{ background:none; -webkit-text-fill-color:var(--crema-2); color:var(--crema-2); }
h1,h2,h3{ font-family:var(--font-titoli); font-weight:400; line-height:1.08; letter-spacing:-0.01em; }
h1{ font-size:clamp(2.4rem,6vw,4.6rem); }
h2{ font-size:clamp(1.9rem,4.5vw,3.4rem); }
h3{ font-size:clamp(1.2rem,2.5vw,1.6rem); }
p{ color:var(--carbone); }

.eyebrow{
  font-size:0.66rem; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--rosa-dark); display:inline-flex; align-items:center; gap:0.7rem; margin-bottom:1.1rem; font-weight:500;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--rosa); }

section{ padding:clamp(3.5rem,8vw,7rem) clamp(1.2rem,5vw,3rem); }
.container{ max-width:var(--maxw); margin:0 auto; }
.bg-crema{ background:var(--crema); } .bg-crema-2{ background:var(--crema-2); }
.bg-sabbia{ background:var(--sabbia); } .bg-salvia{ background:var(--salvia-dark); color:var(--crema); }
.bg-salvia h2,.bg-salvia h3,.bg-salvia p,.bg-salvia .eyebrow{ color:var(--crema); }
.bg-salvia .eyebrow{ color:var(--crema); opacity:.85; } .bg-salvia .eyebrow::before{ background:var(--crema); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media(max-width:880px){ .grid-2{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .grid-4{ grid-template-columns:1fr; } }

/* ── BOTTONI ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.95rem 2.1rem; font-size:0.72rem; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; font-family:var(--font-testo);
  border:none; cursor:pointer; text-decoration:none; border-radius:50px;
  transition:all .35s var(--expo); -webkit-tap-highlight-color:transparent;
}
.btn-primary{ background:var(--rosa-dark); color:#fff; box-shadow:var(--sh-rosa); }
.btn-primary:hover{ background:#5a3f25; transform:translateY(-2px); box-shadow:0 18px 40px rgba(110,78,46,.32); }
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--rosa-dark); outline-offset:3px; }
/* Outline oro stile Twins (pillola con bordo oro, testo bronzo) */
.btn-outline{ background:transparent; color:var(--gold-dark); border:1px solid var(--gold); }
.btn-outline:hover{ background:var(--gold); color:#fff; border-color:var(--gold); transform:translateY(-2px); }
.btn-light{ background:var(--crema); color:var(--carbone); }
.btn-light:hover{ background:#fff; }
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover{ background:#1ebe5d; }

/* ── HEADER / NAV ──────────────────────────────────────────────────── */
header.site{
  position:sticky; top:0; z-index:900; background:rgba(250,246,241,.88);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--sabbia);
  transition:padding .3s var(--expo);
}
/* top contact bar (stile Twins) */
.topbar{ background:var(--rosa-dark); color:#fff; font-size:.74rem; }
.topbar-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem clamp(1.2rem,5vw,3rem); }
.topbar a,.topbar .tb-left{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; opacity:.95; }
.topbar a:hover{ opacity:1; text-decoration:underline; }
.topbar .tb-right{ display:flex; gap:1.4rem; }
.topbar .ico-sm{ color:#fff; }
@media(max-width:720px){ .topbar .tb-left{ display:none; } .topbar-inner{ justify-content:center; } .topbar .tb-right{ gap:1rem; } }
.nav-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:1rem clamp(1.2rem,5vw,3rem); }
.logo{ font-family:var(--font-titoli); font-size:1.45rem; letter-spacing:.02em; text-decoration:none; color:var(--carbone); display:flex; flex-direction:column; line-height:1; }
.logo b{ font-weight:500; }
.logo-sub{ font-family:var(--font-testo); font-size:.56rem; letter-spacing:.42em; text-transform:uppercase; color:var(--rosa-dark); margin-top:.28rem; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; list-style:none; }
.nav-links a{ text-decoration:none; font-size:0.78rem; letter-spacing:.04em; color:var(--carbone); position:relative; padding:.2rem 0; transition:color .25s; }
.nav-links a:hover,.nav-links a.active{ color:var(--rosa-dark); }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--rosa); transition:width .3s var(--expo); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-cta{ background:var(--rosa); color:#fff!important; padding:.6rem 1.3rem; border-radius:2px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.68rem; }
.nav-cta::after{ display:none; } .nav-cta:hover{ background:var(--rosa-dark); }
.burger{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:6px; }
.burger span{ width:24px; height:2px; background:var(--carbone); transition:.3s; }
@media(max-width:920px){
  .nav-links{ position:fixed; top:0; right:0; height:100dvh; width:min(82vw,340px); z-index:1000; overflow-y:auto; background:var(--crema); flex-direction:column; align-items:flex-start; justify-content:center; padding:2.5rem; gap:1.6rem; transform:translateX(100%); transition:transform .4s var(--expo); box-shadow:-20px 0 60px rgba(0,0,0,.12); }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.05rem; }
  .burger{ display:flex; z-index:1001; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
/* Scrim dietro il menu mobile + blocco scroll della pagina (drawer pattern) */
.nav-scrim{ position:fixed; inset:0; height:100dvh; background:rgba(26,26,26,.42); opacity:0; visibility:hidden; transition:opacity .35s var(--expo); z-index:999; }
.nav-scrim.open{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }

/* ── PULSANTE FLOTTANTE PRENOTA ────────────────────────────────────── */
.fab{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:850; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff; padding:1rem 1.7rem; border-radius:50px; text-decoration:none; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; box-shadow:0 14px 34px rgba(140,106,63,.45); display:inline-flex; align-items:center; gap:.55rem; transition:transform .3s var(--expo),box-shadow .3s var(--expo); animation:fabPulse 2.6s var(--expo) infinite; }
.fab svg{ width:17px; height:17px; stroke:#fff; stroke-width:1.8; fill:none; }
.fab:hover{ transform:scale(1.06) translateY(-2px); box-shadow:0 20px 44px rgba(140,106,63,.55); animation-play-state:paused; }
@keyframes fabPulse{ 0%,100%{ box-shadow:0 14px 34px rgba(140,106,63,.45),0 0 0 0 rgba(201,163,106,.5); } 50%{ box-shadow:0 14px 34px rgba(140,106,63,.45),0 0 0 14px rgba(201,163,106,0); } }
@media (prefers-reduced-motion: reduce){ .fab{ animation:none; } }
@media(max-width:520px){ .fab{ padding:.85rem 1.3rem; font-size:.68rem; bottom:1rem; right:1rem; } }

/* ── HERO ──────────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:auto; display:flex; align-items:center; padding:clamp(3rem,7vh,6rem) clamp(1.2rem,5vw,3rem); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background:linear-gradient(115deg,var(--crema) 0%,var(--crema-2) 55%,var(--sabbia) 100%); z-index:-2; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; z-index:-1; }
.hero-blob.a{ width:420px; height:420px; background:var(--rosa-light); top:-80px; right:-60px; }
.hero-blob.b{ width:360px; height:360px; background:var(--salvia); bottom:-100px; left:-80px; opacity:.28; }
.hero-inner{ max-width:var(--maxw); margin:0 auto; width:100%; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; max-width:var(--maxw); margin:0 auto; width:100%; }
.hero-media{ position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; box-shadow:0 34px 70px rgba(46,42,38,.20); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(160deg,transparent 55%,rgba(168,107,107,.18)); }
.hero-badge{ position:absolute; left:1.1rem; bottom:1.1rem; z-index:2; background:rgba(250,246,241,.92); backdrop-filter:blur(6px); padding:.7rem 1.1rem; border-radius:8px; font-size:.74rem; }
.hero-badge b{ color:var(--rosa-dark); }
@media(max-width:880px){ .hero-grid{ grid-template-columns:1fr; } .hero-media{ aspect-ratio:16/11; order:-1; } }
.hero h1{ max-width:14ch; margin-bottom:1.4rem; }
.hero p.lead{ font-size:1.12rem; max-width:46ch; color:var(--carbone); margin-bottom:2rem; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-micro{ font-size:.74rem; color:var(--grigio); margin-top:1.3rem; display:flex; gap:1.2rem; flex-wrap:wrap; }
.hero-micro span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero-micro .ico{ width:15px; height:15px; color:var(--salvia-dark); stroke-width:2; }

/* ── HERO FULL-BLEED (stile Twins: foto a tutto schermo, testo centrato) ── */
.hero-full{ position:relative; min-height:92vh; min-height:92dvh; display:flex; align-items:center; justify-content:center; text-align:center; padding:clamp(4rem,10vh,7rem) clamp(1.2rem,5vw,3rem); overflow:hidden; }
.hero-full .hero-photo{ position:absolute; inset:0; z-index:-2; }
.hero-full .hero-photo img{ width:100%; height:100%; object-fit:cover; animation:heroZoom 16s var(--expo) forwards; }
@keyframes heroZoom{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
.hero-full .hero-scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(26,21,16,.46) 0%,rgba(26,21,16,.30) 38%,rgba(26,21,16,.62) 100%); }
.hero-full .hero-inner{ width:100%; min-width:0; max-width:780px; margin:0 auto; color:#fff; }
.hero-full .eyebrow{ color:#fff; opacity:.94; justify-content:center; margin-bottom:1.3rem; }
.hero-full .eyebrow::before{ background:var(--gold); }
.hero-full h1{ color:#fff; max-width:none; margin:0 auto 1.3rem; font-size:clamp(2.7rem,7vw,5.2rem); text-shadow:0 2px 36px rgba(0,0,0,.30); }
.hero-full p.lead{ color:rgba(255,255,255,.94); max-width:48ch; margin:0 auto 2.1rem; font-size:clamp(1.05rem,1.7vw,1.3rem); text-shadow:0 1px 18px rgba(0,0,0,.28); }
.hero-full .hero-cta{ justify-content:center; }
.hero-full .hero-micro{ justify-content:center; color:rgba(255,255,255,.88); margin-top:1.6rem; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.hero-full .hero-micro .ico{ color:var(--gold); }
.btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(4px); }
.btn-ghost:hover{ background:#fff; color:var(--carbone); border-color:#fff; transform:translateY(-2px); }
.hero-scroll{ position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:2; color:#fff; opacity:.85; display:inline-flex; padding:.4rem; animation:heroBob 2.2s var(--expo) infinite; }
.hero-scroll svg{ width:26px; height:26px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
@keyframes heroBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }
@media (prefers-reduced-motion:reduce){ .hero-full .hero-photo img{ animation:none; } .hero-scroll{ animation:none; } }
@media(max-width:560px){
  .hero-full{ min-height:88vh; min-height:88dvh; }
  .hero-full .eyebrow{ letter-spacing:.2em; font-size:.58rem; }
  .hero-full h1{ font-size:clamp(2rem,8.5vw,3rem); }
  .hero-full p.lead{ font-size:1rem; max-width:32ch; }
  .hero-full .hero-cta{ flex-direction:column; align-items:stretch; width:100%; max-width:300px; margin-inline:auto; }
  .hero-full .hero-cta .btn{ justify-content:center; }
  .hero-full .hero-micro{ gap:.5rem .9rem; font-size:.7rem; }
}

/* ── CARD GENERICHE ────────────────────────────────────────────────── */
.card{ background:#fff; border:1px solid var(--sabbia); border-radius:12px; padding:1.8rem; box-shadow:var(--sh-sm); transition:transform .3s var(--expo),box-shadow .3s var(--expo); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.card .cat-ico{ color:var(--rosa-dark); }

/* Icona SVG (line, stroke coerente) */
.ico{ width:22px; height:22px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ico-sm{ width:14px; height:14px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; color:var(--rosa-dark); flex-shrink:0; }
.cat-head{ display:flex; align-items:center; gap:1rem; border-bottom:2px solid var(--sabbia); padding-bottom:1rem; margin-bottom:1rem; }
.cat-thumb{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.feature-ico{ width:46px; height:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--crema-2); color:var(--rosa-dark); margin-bottom:.9rem; }
.bg-salvia .feature-ico{ background:rgba(255,255,255,.14); color:var(--crema); }

/* Card categoria con foto */
.cat-card{ display:block; text-decoration:none; background:#fff; border:1px solid var(--sabbia); border-radius:12px; overflow:hidden; box-shadow:var(--sh-sm); transition:transform .3s var(--expo),box-shadow .3s var(--expo); }
.cat-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.cat-card .cc-img{ aspect-ratio:4/3; overflow:hidden; }
.cat-card .cc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--expo); }
.cat-card:hover .cc-img img{ transform:scale(1.05); }
.cat-card .cc-body{ padding:1.4rem 1.5rem 1.6rem; }

/* Card team con foto */
.member{ background:#fff; border:1px solid var(--sabbia); border-radius:12px; overflow:hidden; box-shadow:var(--sh-sm); transition:transform .3s var(--expo),box-shadow .3s var(--expo); }
.member:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.member-photo{ aspect-ratio:1; overflow:hidden; }
.member-photo img{ width:100%; height:100%; object-fit:cover; }
.member-body{ padding:1.3rem 1.4rem 1.6rem; }

.article-cover{ max-width:980px; margin:0 auto; aspect-ratio:16/7; border-radius:12px; overflow:hidden; box-shadow:var(--sh-md); }
.article-cover img{ width:100%; height:100%; object-fit:cover; }
.about-photo{ aspect-ratio:4/5; border-radius:12px; overflow:hidden; box-shadow:var(--sh-md); }
.about-photo img{ width:100%; height:100%; object-fit:cover; }

/* Before / After */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.ba .g-item{ aspect-ratio:3/4; border-radius:6px; overflow:hidden; position:relative; }
.ba .g-item img{ width:100%; height:100%; object-fit:cover; }
.price{ color:var(--rosa-dark); font-weight:600; }
.muted{ color:var(--grigio); font-size:.9rem; }
.pill{ display:inline-block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; background:var(--crema-2); color:var(--rosa-dark); padding:.3rem .7rem; border-radius:50px; }

/* trattamento riga */
.treat{ display:flex; justify-content:space-between; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--sabbia); }
.treat:last-child{ border-bottom:none; }
.treat .t-meta{ font-size:.8rem; color:var(--grigio); }
.treat .t-price{ white-space:nowrap; color:var(--rosa-dark); font-weight:600; font-size:1.05rem; }

/* numeri / prove sociali */
.stat{ text-align:center; }
.stat .v{ font-family:var(--font-titoli); font-size:clamp(2.2rem,5vw,3.2rem); color:var(--rosa-dark); line-height:1; }
.stat .l{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grigio); margin-top:.5rem; }

/* recensione card */
.review{ background:#fff; border:1px solid var(--sabbia); border-radius:6px; padding:1.6rem; }
.review .stars{ color:var(--rosa-dark); letter-spacing:.1em; margin-bottom:.7rem; display:inline-flex; gap:.15rem; }
.review .stars svg{ width:16px; height:16px; }
.stars-row{ color:var(--rosa-dark); display:inline-flex; gap:.2rem; }
.review .who{ margin-top:1rem; font-weight:500; }
.review .src{ font-size:.72rem; color:var(--grigio); }

/* galleria */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.gallery .g-item{ aspect-ratio:1; border-radius:6px; overflow:hidden; background:var(--crema-2); position:relative; }
.gallery .g-item::after,.ba .g-item::after{ content:attr(data-label); position:absolute; inset:auto 0 0 0; padding:.55rem .65rem; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(transparent,rgba(46,42,38,.78)); z-index:1; pointer-events:none; }
.gallery .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--expo); }
.gallery .g-item:hover img{ transform:scale(1.06); }
@media(max-width:880px){ .gallery{ grid-template-columns:1fr 1fr; } }

/* ── PROMO STRIP (banner promozionali stile Twins) ─────────────────── */
.promo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media(max-width:880px){ .promo-row{ grid-template-columns:1fr; } }
.promo{ position:relative; overflow:hidden; border-radius:14px; min-height:230px; display:flex; align-items:flex-end; padding:1.6rem; color:#fff; text-decoration:none; box-shadow:var(--sh-md); transition:transform .35s var(--expo),box-shadow .35s var(--expo); }
.promo:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.promo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .6s var(--expo); }
.promo:hover img{ transform:scale(1.05); }
.promo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(50,40,35,.05) 30%,rgba(124,79,74,.82)); z-index:1; }
.promo .promo-body{ position:relative; z-index:2; }
.promo .pill{ background:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(4px); margin-bottom:.6rem; }
.promo h3{ color:#fff; margin-bottom:.3rem; }
.promo p{ color:#fff; opacity:.92; font-size:.88rem; max-width:30ch; }
.promo .more{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.promo .more svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; transition:transform .3s var(--expo); }
.promo:hover .more svg{ transform:translateX(4px); }

/* ── MANIFESTO (blocco filosofia, testo grande centrato) ───────────── */
.manifesto{ text-align:center; }
.manifesto .quote{ font-family:var(--font-titoli); font-size:clamp(1.6rem,3.6vw,2.9rem); line-height:1.25; max-width:22ch; margin:0 auto; color:var(--carbone); }
.manifesto .quote .italic{ color:var(--rosa-dark); }
.manifesto .sign{ margin-top:1.8rem; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grigio); }

/* ── COMMUNITY CTA ─────────────────────────────────────────────────── */
.community{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; background:var(--rosa-light); border-radius:18px; padding:clamp(2rem,5vw,3.5rem); }
@media(max-width:880px){ .community{ grid-template-columns:1fr; text-align:center; } }
.community .c-media{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; box-shadow:var(--sh-md); }
.community .c-media img{ width:100%; height:100%; object-fit:cover; }
.community h2{ color:var(--carbone); }
@media(max-width:880px){ .community .c-media{ order:-1; } }

/* ── FORM ──────────────────────────────────────────────────────────── */
label.fld{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rosa-dark); margin-bottom:.4rem; font-weight:600; }
input,select,textarea{ width:100%; background:#fff; border:1px solid var(--sabbia); border-radius:3px; color:var(--carbone); font-family:var(--font-testo); font-size:.95rem; padding:.8rem 1rem; outline:none; transition:border-color .25s; }
input:focus,select:focus,textarea:focus{ border-color:var(--rosa); }
.fld-row{ margin-bottom:1.1rem; }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--grigio); }
.consent input{ width:auto; margin-top:.25rem; }

/* ── PRENOTAZIONE (calendario + slot) ──────────────────────────────── */
.book-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:start; }
@media(max-width:920px){ .book-grid{ grid-template-columns:1fr; } }
.book-card{ background:#fff; border:1px solid var(--sabbia); border-radius:8px; padding:1.8rem; }
.step-label{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rosa-dark); font-weight:600; margin:1.4rem 0 .7rem; display:flex; align-items:center; gap:.6rem; }
.step-label .n{ width:20px; height:20px; border-radius:50%; background:var(--rosa); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ border:1px solid var(--sabbia); background:#fff; border-radius:50px; padding:.55rem 1rem; font-size:.8rem; cursor:pointer; transition:.2s; font-family:var(--font-testo); }
.chip:hover{ border-color:var(--rosa); }
.chip.sel{ background:var(--rosa); color:#fff; border-color:var(--rosa); }
.op-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.op-btn{ border:1px solid var(--sabbia); background:#fff; border-radius:6px; padding:.7rem 1rem; cursor:pointer; text-align:center; transition:.2s; min-width:96px; }
.op-btn:hover{ border-color:var(--rosa); } .op-btn.sel{ border-color:var(--rosa); background:var(--crema-2); }
.op-btn .av{ width:34px; height:34px; border-radius:50%; background:var(--rosa-light); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-titoli); margin:0 auto .3rem; font-size:1.1rem; }
.op-btn .nm{ font-size:.82rem; font-weight:500; } .op-btn .rl{ font-size:.66rem; color:var(--grigio); }

.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.cal-head button{ width:auto; background:none; border:none; cursor:pointer; font-size:1.1rem; color:var(--rosa-dark); padding:.2rem .6rem; }
.cal-label{ font-family:var(--font-titoli); font-size:1.2rem; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; margin-bottom:.3rem; }
.cal-dow span{ text-align:center; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grigio); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; }
.cal-day{ aspect-ratio:1; border:none; background:var(--crema); border-radius:4px; cursor:pointer; font-family:var(--font-testo); font-size:.85rem; color:var(--carbone); transition:.18s; }
.cal-day:hover:not(.dis){ background:var(--rosa-light); color:#fff; }
.cal-day.dis{ opacity:.28; cursor:not-allowed; background:transparent; }
.cal-day.empty{ background:transparent; }
.cal-day.today{ box-shadow:inset 0 0 0 1px var(--rosa); }
.cal-day.sel{ background:var(--rosa); color:#fff; }
.time-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-top:.4rem; }
.time-btn{ background:var(--crema); border:1px solid transparent; border-radius:4px; padding:.6rem 0; font-size:.82rem; cursor:pointer; font-family:var(--font-testo); transition:.18s; }
.time-btn:hover{ border-color:var(--rosa); } .time-btn.sel{ background:var(--rosa); color:#fff; }
.time-btn.booked{ opacity:.32; cursor:not-allowed; text-decoration:line-through; }
.hint{ grid-column:1/-1; text-align:center; font-size:.72rem; color:var(--grigio); padding:1.2rem 0; }

/* ── MODAL / TOAST ─────────────────────────────────────────────────── */
.modal{ position:fixed; inset:0; background:rgba(46,42,38,.55); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:1000; padding:1.2rem; }
.modal.open{ display:flex; }
.modal-card{ background:var(--crema); border-radius:10px; max-width:460px; width:100%; padding:2.2rem; text-align:center; animation:pop .4s var(--expo); }
@keyframes pop{ from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } }
.bsum{ text-align:left; margin:1.4rem 0; }
.bsum-row{ display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--sabbia); font-size:.9rem; }
.bsum-row .k{ color:var(--grigio); }
.toast{ position:fixed; bottom:1.4rem; left:50%; transform:translate(-50%,140%); background:var(--carbone); color:var(--crema); padding:.9rem 1.4rem; border-radius:50px; font-size:.85rem; z-index:1100; transition:transform .4s var(--expo); display:flex; gap:.6rem; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.toast.show{ transform:translate(-50%,0); }
.toast-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--salvia); }
.toast-ok{ background:var(--salvia); } .toast-warn{ background:#d9a441; } .toast-err{ background:#cf6b5e; }

/* ── FAQ accordion ─────────────────────────────────────────────────── */
.faq-item{ border-bottom:1px solid var(--sabbia); }
.faq-q{ width:100%; background:none; border:none; text-align:left; cursor:pointer; padding:1.2rem 0; font-family:var(--font-titoli); font-size:1.15rem; color:var(--carbone); display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq-q .pm{ color:var(--rosa); font-size:1.4rem; transition:transform .3s; flex-shrink:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--expo); }
.faq-a p{ padding-bottom:1.2rem; color:var(--grigio); }
.faq-item.open .pm{ transform:rotate(45deg); }

/* ── FOOTER ────────────────────────────────────────────────────────── */
footer.site{ background:var(--carbone); color:var(--crema); padding:4rem clamp(1.2rem,5vw,3rem) 2rem; }
footer.site a{ color:var(--crema); text-decoration:none; opacity:.8; transition:opacity .2s; }
footer.site a:hover{ opacity:1; color:var(--rosa-light); }
.foot-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:2.5rem; }
@media(max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h4{ font-family:var(--font-titoli); font-size:1.05rem; margin-bottom:1rem; color:var(--rosa-light); }
.foot-grid ul{ list-style:none; display:flex; flex-direction:column; gap:.5rem; font-size:.88rem; }
.foot-logo{ font-family:var(--font-titoli); font-size:1.6rem; margin-bottom:.6rem; }
.foot-bottom{ max-width:var(--maxw); margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.76rem; opacity:.7; }

/* ── COOKIE BANNER ─────────────────────────────────────────────────── */
#cookieBanner{ position:fixed; bottom:0; left:0; right:0; background:var(--carbone); color:var(--crema); padding:1rem 1.5rem; display:none; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem; z-index:1200; font-size:.8rem; }
#cookieBanner.show{ display:flex; }
#cookieBanner a{ color:var(--rosa-light); }
.cookie-btns{ display:flex; gap:.6rem; }
.cookie-acc{ background:var(--rosa); color:#fff; border:none; padding:.55rem 1.3rem; font-size:.7rem; font-weight:600; letter-spacing:.08em; cursor:pointer; border-radius:3px; }
.cookie-rej{ background:transparent; color:var(--crema); border:1px solid rgba(255,255,255,.3); padding:.55rem 1.3rem; font-size:.7rem; cursor:pointer; border-radius:3px; }

/* ── REVEAL ON SCROLL ──────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--expo),transform .8s var(--expo); }
.reveal.visible{ opacity:1; transform:translateY(0); }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s } .d4{ transition-delay:.32s }

/* ── MOTION ENGINE (GSAP + ScrollTrigger + Lenis) ──────────────────────
   Quando le animazioni sono attive (.gsap-on su <html>) GSAP controlla i
   reveal: disattivo la transition CSS ed evito il flash pre-animazione.   */
.gsap-on .reveal{ transition:none; }
.gsap-on .hero .eyebrow,
.gsap-on .hero h1,
.gsap-on .hero .lead,
.gsap-on .hero-cta,
.gsap-on .hero-micro,
.gsap-on .hero-badge{ opacity:0; }
.gsap-on .hero-media{ clip-path:inset(0% 0% 100% 0%); }
.gsap-on .hero-media img{ will-change:transform; }

/* Header compatto allo scroll (micro-interazione, niente layout shift sul contenuto) */
header.site .nav-inner{ transition:padding .3s var(--expo); }
header.site .logo{ transition:font-size .3s var(--expo); }
header.site.scrolled{ box-shadow:0 6px 22px rgba(50,45,40,.09); }
header.site.scrolled .nav-inner{ padding-top:.55rem; padding-bottom:.55rem; }
header.site.scrolled .logo{ font-size:1.28rem; }

/* Lenis smooth scroll — regole consigliate */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ── CTA inline + riprova sociale (incitamento alla prenotazione) ──── */
.cta-inline{ display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; }
.cta-link{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; text-decoration:none; color:var(--gold); }
.cta-link svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2; fill:none; transition:transform .3s var(--expo); }
.cta-link:hover svg{ transform:translateX(5px); }
.why-trust{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:1.8rem; }
.why-trust .wt b{ display:block; font-family:var(--font-titoli); font-size:1.7rem; color:var(--gold-dark); line-height:1; }
.why-trust .wt span{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.78; margin-top:.35rem; }

/* ── SEZIONE TRATTAMENTI stile Twins (card immagine con profondità 3D) ── */
.treats-grid{ align-items:center; }
.treats-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; perspective:950px; }
/* Profondità 3D PERMANENTE (anche senza mouse): leggera piega prospettica per colonna */
.tcard{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:3/4; border-radius:20px; overflow:hidden; text-decoration:none; box-shadow:0 26px 50px rgba(40,32,24,.22); transform-style:preserve-3d; transform:rotateY(8deg) rotateX(4deg); transition:box-shadow .35s var(--expo),transform .45s var(--expo); will-change:transform; }
.treats-cards .tcard:nth-child(even){ transform:rotateY(-8deg) rotateX(4deg); }
.tcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--expo); }
.tcard::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,251,245,.22) 0%,rgba(255,250,243,.55) 45%,rgba(252,246,238,.88) 100%); }
.tcard-body{ position:relative; z-index:2; padding:1.6rem 1.6rem 1.7rem; transform:translateZ(45px); }
.tcard h3{ font-size:clamp(1.4rem,2.1vw,1.9rem); line-height:1.05; margin-bottom:.5rem; background:linear-gradient(95deg,var(--grad-1,var(--gold)) 0%,var(--grad-2,var(--gold-dark)) 60%,var(--grad-3,var(--rosa-dark)) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tcard p{ color:var(--carbone); font-size:.88rem; opacity:.82; max-width:30ch; margin-bottom:.7rem; }
.tcard .more{ display:inline-flex; align-items:center; gap:.45rem; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--gold-dark); }
.tcard .more svg{ width:14px; height:14px; stroke:currentColor; stroke-width:2.2; fill:none; transition:transform .3s var(--expo); }
.tcard:hover{ box-shadow:0 36px 72px rgba(40,32,24,.32); }
.tcard:hover img{ transform:scale(1.07); }
.tcard:hover .more svg{ transform:translateX(5px); }
@media(max-width:420px){ .treats-cards{ grid-template-columns:1fr; } }

/* ── LOADER / PRELOADER elegante con logo ──────────────────────────── */
#loader{ position:fixed; inset:0; z-index:3000; background:var(--crema); display:flex; align-items:center; justify-content:center;
  animation:loaderOut .8s var(--expo) 2.1s forwards; }
.loader-inner{ text-align:center; padding:1rem; }
.loader-mark{ width:92px; height:92px; display:block; margin:0 auto 1.5rem; overflow:visible; }
.loader-mark *{ fill:none; stroke:var(--gold-dark); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.lm-ring{ opacity:.55; stroke-dasharray:252; stroke-dashoffset:252; animation:lmDraw 1.5s var(--expo) .1s forwards; }
.lm-leaf{ stroke:url(#lmg); stroke-width:1.8; stroke-dasharray:220; stroke-dashoffset:220; animation:lmDraw 1.4s var(--expo) .35s forwards; }
.lm-stem{ stroke-dasharray:60; stroke-dashoffset:60; animation:lmDraw 1s var(--expo) .85s forwards; }
.lm-vein{ stroke-dasharray:70; stroke-dashoffset:70; animation:lmDraw 1s var(--expo) 1s forwards; }
.loader-word{ font-family:var(--font-titoli); font-size:clamp(1.2rem,4vw,1.7rem); font-weight:500; letter-spacing:.34em; color:var(--carbone);
  opacity:0; animation:lmFade 1s var(--expo) 1.05s forwards; padding-left:.34em; }
.loader-sub{ font-size:.62rem; letter-spacing:.5em; color:var(--gold-dark); margin-top:.55rem; opacity:0; animation:lmFade 1s var(--expo) 1.3s forwards; padding-left:.5em; }
@keyframes lmDraw{ to{ stroke-dashoffset:0; } }
@keyframes lmFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes loaderOut{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion: reduce){
  #loader{ animation:loaderOut .4s ease .9s forwards; }
  .lm-ring,.lm-leaf,.lm-stem,.lm-vein{ animation:none; stroke-dashoffset:0; }
  .loader-word,.loader-sub{ animation:none; opacity:1; }
}

/* ── 3D su TUTTE le immagini (perspective sui contenitori + tilt a riposo) ── */
.hero-grid,.promo-row,.gallery,.grid-3,.community{ perspective:1000px; }
.tilt{ transform-style:preserve-3d; transition:transform .45s var(--expo),box-shadow .35s var(--expo); will-change:transform; }
/* tilt a riposo (visibile anche senza mouse), alternato per un effetto dinamico */
.promo.tilt,.member.tilt,.g-item.tilt,.c-media.tilt{ transform:rotateY(7deg) rotateX(3deg); box-shadow:var(--sh-lg); }
.promo.tilt:nth-child(even),.member.tilt:nth-child(even),.g-item.tilt:nth-child(even){ transform:rotateY(-7deg) rotateX(3deg); }
.hero-media.tilt{ transform:rotateY(-6deg) rotateX(2deg); }
/* Su dispositivi touch niente rotazione 3D a riposo: senza mouse resterebbero
   storte in modo fisso e sembrerebbero rotte. Si appiattiscono dritte. */
@media (hover:none){
  .tcard,
  .treats-cards .tcard:nth-child(even),
  .promo.tilt,.member.tilt,.g-item.tilt,.c-media.tilt,.hero-media.tilt,
  .promo.tilt:nth-child(even),.member.tilt:nth-child(even),.g-item.tilt:nth-child(even){ transform:none; }
}

/* ── PANNELLO GESTIONE (schede) ────────────────────────────────────── */
.mg-tabs{ display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:1.6rem; border-bottom:1px solid var(--sabbia); }
.mg-tab{ background:none; border:none; cursor:pointer; padding:.7rem 1.1rem; font-family:var(--font-testo); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grigio); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s; }
.mg-tab:hover{ color:var(--rosa-dark); }
.mg-tab.sel{ color:var(--rosa-dark); border-bottom-color:var(--rosa-dark); font-weight:600; }

/* ── BANNER ANNUNCI SUL SITO (offerte / last minute) ───────────────── */
.site-announce{ background:var(--rosa-dark); color:#fff; text-align:center; padding:.65rem 2.6rem .65rem 1.2rem; font-size:.86rem; position:relative; line-height:1.4; }
.site-announce .sa-close{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%); background:none; border:none; color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; width:auto; padding:.2rem .5rem; opacity:.85; }
.site-announce .sa-close:hover{ opacity:1; }

/* ── UTIL ──────────────────────────────────────────────────────────── */
.center{ text-align:center; } .mt1{ margin-top:1rem; } .mt2{ margin-top:2rem; } .mb1{ margin-bottom:1rem; }
.lead{ font-size:1.08rem; } .small{ font-size:.85rem; }
.demo-banner{ background:var(--rosa); color:#fff; text-align:center; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; padding:.5rem 1rem; font-weight:600; }
.prose{ max-width:70ch; margin:0 auto; } .prose p{ margin-bottom:1.1rem; color:var(--carbone); }
.prose h2{ margin:2.2rem 0 1rem; } .prose h3{ margin:1.6rem 0 .8rem; }
.prose ul{ margin:0 0 1.1rem 1.2rem; } .prose li{ margin-bottom:.4rem; }
.breadcrumb{ font-size:.74rem; color:var(--grigio); margin-bottom:1rem; } .breadcrumb a{ text-decoration:none; color:var(--rosa-dark); }