/* ============================================================
   Le Fate — sito vetrina. Estetica spa: avorio, prugna, oro.
   Mobile-first, elegante, arioso.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root{
  --bg:#F7F2EC; --bg-2:#FBF7F2; --surface:#FFFFFF;
  --plum:#8A5E83; --plum-700:#6A4463; --plum-100:#F0E7EE; --plum-900:#4E3149;
  --gold:#C2A24E; --gold-soft:#F3E9CF; --gold-deep:#9A7B2E;
  --rose:#ECD9D2; --rose-soft:#F7ECE7; --sage:#9FB295;
  --ink:#3B3340; --muted:#938A98; --line:#EBE2DB; --line-2:#E0D6CE;
  --radius:22px; --radius-sm:14px;
  --shadow:0 18px 50px rgba(106,68,99,.12), 0 4px 12px rgba(106,68,99,.06);
  --shadow-sm:0 8px 22px rgba(106,68,99,.08);
  --font:'Nunito Sans',system-ui,-apple-system,sans-serif;
  --display:'Cormorant Garamond',Georgia,serif;
  --maxw:1120px; --gutter:clamp(16px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  background:
    radial-gradient(1200px 620px at 82% -8%, var(--rose-soft), transparent 60%),
    radial-gradient(900px 560px at -10% 6%, var(--plum-100), transparent 58%),
    linear-gradient(180deg,#FBF6F0,#F4ECE4);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display); color:var(--plum-700); font-weight:600; line-height:1.12; margin:0 0 .5rem; letter-spacing:.3px}
/* Blazor mette a fuoco l'h1 al cambio pagina: niente riquadro di focus sui titoli */
h1:focus,h2:focus,h3:focus,[tabindex="-1"]:focus{outline:none}
h1{font-size:clamp(2.6rem,7vw,4.4rem)} h2{font-size:clamp(2rem,5vw,2.9rem)} h3{font-size:1.5rem}
p{margin:.4rem 0}
a{color:var(--plum); text-decoration:none; transition:color .15s}
a:hover{color:var(--plum-700)}
img{max-width:100%; display:block}
section{position:relative}

/* ---- contenitore ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}

/* ---- bottoni ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  font-family:var(--font); font-weight:800; font-size:1rem; letter-spacing:.01em;
  padding:.9rem 1.7rem; border-radius:999px; border:none; min-height:52px; transition:transform .12s, filter .15s, box-shadow .15s}
.btn--primary{color:#fff; background:linear-gradient(180deg,#9A6E92,var(--plum-700));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px rgba(138,94,131,.34)}
.btn--primary:hover{filter:brightness(1.06); transform:translateY(-1px); color:#fff}
.btn--gold{color:#4A3A12; background:linear-gradient(180deg,#E6CE86,var(--gold));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 26px rgba(194,162,78,.34)}
.btn--gold:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--plum-700); border:1.6px solid var(--line-2)}
.btn--ghost:hover{background:#fff; border-color:var(--plum); color:var(--plum-700)}
.btn--lg{min-height:58px; padding:1rem 2.1rem; font-size:1.08rem}

/* ============================================================
   Header / navigazione
   ============================================================ */
.site-header{position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,247,242,.78));
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  border-image:linear-gradient(90deg, transparent 6%, var(--gold), transparent 94%) 1}
.site-header .bar{display:flex; align-items:center; gap:1rem; height:74px}
.brand{display:flex; align-items:center; gap:.65rem; font-family:var(--display); font-weight:700;
  font-size:1.6rem; color:var(--plum-700); white-space:nowrap}
.brand img{width:44px; height:44px; border-radius:50%; box-shadow:0 4px 12px rgba(106,68,99,.22)}
.nav{margin-left:auto; display:flex; align-items:center; gap:.3rem}
.nav a{padding:.55rem .9rem; border-radius:999px; color:var(--ink); font-weight:700; font-size:.98rem}
.nav a:hover{background:var(--plum-100); color:var(--plum-700)}
.nav .btn{margin-left:.5rem}
.nav-check{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.nav-toggle{display:none; margin-left:auto; width:46px; height:46px; border:none; border-radius:50%;
  background:var(--plum-100); color:var(--plum-700); font-size:1.4rem; cursor:pointer}
@media(max-width:860px){
  .nav{position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--surface); padding:1rem var(--gutter) 1.4rem; box-shadow:var(--shadow);
    transform:translateY(-130%); transition:transform .24s cubic-bezier(.2,.7,.3,1); margin:0}
  .nav-check:checked ~ .nav{transform:none}
  .nav a{padding:.9rem 1rem; font-size:1.1rem}
  .nav .btn{margin:.5rem 0 0}
  .nav-toggle{display:grid; place-items:center}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding:clamp(2.6rem,8vw,5.5rem) 0 clamp(2.4rem,6vw,4rem); text-align:center; overflow:hidden}
.hero .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; font-size:.76rem; color:var(--gold-deep); background:var(--gold-soft);
  padding:.4rem 1rem; border-radius:999px; margin-bottom:1.3rem}
.hero-logo{width:clamp(118px,26vw,172px); height:auto; margin:0 auto 1.2rem; border-radius:50%;
  box-shadow:0 22px 50px rgba(138,94,131,.26), 0 3px 10px rgba(106,68,99,.12)}
.hero h1{margin:.2rem auto .4rem; max-width:14ch}
.hero .lead{font-size:clamp(1.05rem,2.4vw,1.3rem); color:#5E5566; max-width:46ch; margin:0 auto 1.8rem}
.hero .cta-row{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.hero .flourish{display:block; width:180px; height:auto; margin:1.8rem auto 0; opacity:.7}

/* ============================================================
   Sezioni generiche
   ============================================================ */
.section{padding:clamp(2.6rem,7vw,4.6rem) 0}
.section--tint{background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(247,236,231,.5))}
.section-head{text-align:center; max-width:50ch; margin:0 auto clamp(1.8rem,4vw,2.8rem)}
.section-head .kicker{font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:.75rem;
  color:var(--gold-deep); display:block; margin-bottom:.5rem}
.section-head p{color:#5E5566}
.rule{width:60px; height:3px; margin:.7rem auto 0; border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--plum))}

/* griglia servizi */
.grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{background:linear-gradient(168deg,#FFFFFF,#FCF6F3); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.6rem 1.5rem; position:relative; overflow:hidden;
  transition:transform .14s, box-shadow .14s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--plum),var(--gold)); opacity:.7}
.card .ico{width:54px; height:54px; display:grid; place-items:center; border-radius:16px; margin-bottom:.9rem;
  background:var(--plum-100); color:var(--plum-700); font-size:1.5rem}
.card h3{margin-bottom:.3rem}
.card p{color:#5E5566; font-size:.98rem}
.card .meta{margin-top:.8rem; display:flex; gap:.5rem; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:800;
  padding:.28rem .75rem; border-radius:999px; background:var(--gold-soft); color:var(--gold-deep)}
.pill--plum{background:var(--plum-100); color:var(--plum-700)}

/* lista prezzi servizi */
.listino{display:grid; gap:.1rem}
.listino .voce{display:flex; align-items:baseline; gap:.8rem; padding:.7rem .2rem; border-bottom:1px dashed var(--line)}
.listino .voce:last-child{border-bottom:none}
.listino .nome{font-weight:700}
.listino .dur{color:var(--muted); font-size:.85rem; white-space:nowrap}
.listino .dots{flex:1; border-bottom:1px dotted var(--line-2); transform:translateY(-4px)}
.listino .prezzo{font-family:var(--display); font-size:1.25rem; font-weight:700; color:var(--plum-700); white-space:nowrap}

/* "perché" / punti di forza */
.features{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.feature{text-align:center; padding:1.2rem}
.feature .ico{width:62px; height:62px; margin:0 auto .8rem; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(180deg,var(--gold-soft),#EADFC3); color:var(--gold-deep); font-size:1.6rem}
.feature h3{font-size:1.25rem}
.feature p{color:#5E5566; font-size:.96rem}

/* striscia call-to-action */
.cta-band{background:linear-gradient(135deg,var(--plum-700),var(--plum-900)); color:#fff; border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.2rem); text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow)}
.cta-band::after{content:"\2726"; position:absolute; right:-10px; bottom:-30px; font-size:10rem; color:rgba(255,255,255,.06)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85); max-width:46ch; margin:0 auto 1.4rem}

/* contatti */
.contact-grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); padding:1.3rem; display:flex; gap:.9rem; align-items:flex-start}
.contact-card .ico{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:var(--plum-100); color:var(--plum-700); font-size:1.2rem}
.contact-card .lbl{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800}
.contact-card .val{font-weight:700}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{margin-top:clamp(2.6rem,7vw,4rem); background:linear-gradient(180deg,#2E2330,#241B28); color:#E9E0EC}
.site-footer .wrap{padding-block:clamp(2.2rem,5vw,3rem)}
.site-footer .cols{display:grid; gap:1.6rem; grid-template-columns:1.4fr 1fr 1fr}
.site-footer .brand{color:#F3E9CF}
.site-footer h4{color:#F3E9CF; font-family:var(--display); font-size:1.25rem; margin-bottom:.6rem}
.site-footer a{color:#E9E0EC} .site-footer a:hover{color:#fff}
.site-footer .muted{color:#B9A9C0; font-size:.92rem}
.site-footer .legal{border-top:1px solid rgba(255,255,255,.1); margin-top:1.6rem; padding-top:1rem;
  display:flex; gap:.8rem; justify-content:space-between; flex-wrap:wrap; font-size:.84rem; color:#B9A9C0}
@media(max-width:720px){ .site-footer .cols{grid-template-columns:1fr} }

/* ============================================================
   Prenotazione (wizard)
   ============================================================ */
.steps{display:flex; gap:.4rem; justify-content:center; margin-bottom:1.6rem; flex-wrap:wrap}
.steps .step{display:flex; align-items:center; gap:.5rem; font-size:.84rem; font-weight:800; color:var(--muted)}
.steps .step .n{width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--line); color:var(--muted)}
.steps .step.on .n{background:linear-gradient(180deg,#9A6E92,var(--plum-700)); color:#fff}
.steps .step.on{color:var(--plum-700)}
.steps .sep{width:22px; height:2px; background:var(--line); align-self:center}

.book{max-width:640px; margin:0 auto}

/* ricerca + filtri a chip */
.book-search{width:100%; min-height:48px; padding:.7rem 1rem .7rem 2.6rem; border:1.5px solid var(--line);
  border-radius:999px; font-size:1rem; margin-bottom:.7rem; background:#fff
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23938A98' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>")
  no-repeat .95rem center}
.book-search:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-100)}
.chips{display:flex; gap:.45rem; overflow-x:auto; padding:.1rem .1rem .9rem; margin:0 -.1rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip-f{flex:none; padding:.42rem 1rem; border-radius:999px; border:1.5px solid var(--line-2);
  background:#fff; color:var(--plum-700); font-weight:800; font-size:.88rem; cursor:pointer; white-space:nowrap;
  transition:all .13s}
.chip-f:hover{border-color:var(--plum)}
.chip-f.on{background:linear-gradient(180deg,#9A6E92,var(--plum-700)); color:#fff; border-color:transparent}

.opt-list{display:flex; flex-direction:column; gap:.55rem}
.opt{display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; cursor:pointer;
  background:linear-gradient(168deg,#FFF,#FCF7F4); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:.9rem 1.1rem; transition:border-color .14s, box-shadow .14s, transform .1s}
.opt:hover{border-color:var(--plum); box-shadow:var(--shadow-sm)}
.opt.sel{border-color:var(--plum); background:var(--plum-100)}
.opt .nome{font-weight:700; flex:1}
.opt .meta{color:var(--muted); font-size:.86rem; white-space:nowrap}

.slot-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.5rem}
.slot{padding:.6rem .2rem; border-radius:10px; border:1.5px solid var(--line-2); background:#fff;
  color:var(--plum-700); font-weight:800; cursor:pointer; transition:all .12s; text-align:center}
.slot:hover{border-color:var(--plum)}
.slot.sel{background:linear-gradient(180deg,#9A6E92,var(--plum-700)); color:#fff; border-color:transparent}
.slot.occ{background:#EFEBE6; color:#B6ADB8; border-color:transparent; cursor:not-allowed; text-decoration:line-through}
.slot-legend{display:flex; gap:1.2rem; margin:.2rem 0 .7rem; font-size:.82rem; color:var(--muted); font-weight:700}
.slot-legend span{display:inline-flex; align-items:center; gap:.4rem}
.slot-legend i{width:14px; height:14px; border-radius:4px; display:inline-block}
.slot-legend i.free{background:#fff; border:1.5px solid var(--line-2)}
.slot-legend i.occ{background:#EFEBE6}

.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem}
.field label{font-size:.82rem; font-weight:800; color:var(--muted); letter-spacing:.02em}
.inp{width:100%; min-height:50px; padding:.7rem 1rem; border:1.5px solid var(--line-2); border-radius:12px;
  font-family:inherit; font-size:1rem; background:#fff; color:var(--ink)}
.inp:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-100)}
.check-line{display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; line-height:1.4}
.check-line input{width:20px; height:20px; margin-top:2px; accent-color:var(--plum); flex:none}
.nav-row{display:flex; gap:.7rem; justify-content:space-between; margin-top:1.4rem; flex-wrap:wrap}
.msg-err{background:#F6E3E1; color:#8A3A38; border:1px solid #E6C6C4; border-radius:12px; padding:.75rem 1rem; font-weight:700; margin:.4rem 0}
.msg-demo{background:var(--gold-soft); color:var(--gold-deep); border:1px solid #E6D29A; border-radius:12px; padding:.6rem 1rem; font-weight:700; margin:.4rem 0; font-size:.9rem}
.riepilogo{background:var(--plum-100); border-radius:12px; padding:.9rem 1.1rem; margin:.4rem 0 1rem}
.riepilogo .r{display:flex; justify-content:space-between; gap:1rem; padding:.2rem 0}
.riepilogo .r .k{color:var(--muted); font-weight:700}
.esito-ok{text-align:center; padding:1rem}
.esito-ok .big{width:80px; height:80px; margin:0 auto 1rem; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(180deg,#E6CE86,var(--gold)); color:#4A3A12; font-size:2.4rem}

/* utilità */
.center{text-align:center}
.mt{margin-top:1.4rem}
.stack-sm{display:flex; flex-direction:column; gap:.3rem}