/* Silvia Estetica · prima versione · Miraform */
:root{
  --cream:#f7f1ea;--paper:#fbf8f4;--sand:#ece1d4;--blush:#e9cfc4;--rose:#b9806f;--rose-d:#9b6352;
  --taupe:#8a7565;--ink:#2c211c;--text:#3b2f29;--muted:#74655c;--line:rgba(60,40,30,.12);
  --head:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);--r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.65;color:var(--text);background:var(--paper);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:600;color:var(--ink);margin:0;line-height:1.05}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--rose-d)}
h2{font-size:clamp(2.1rem,8vw,3.4rem)}
h3{font-size:1.55rem}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--rose-d);outline-offset:3px}

/* Pulsanti */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 26px;border-radius:999px;font:500 1rem/1 var(--body);letter-spacing:.02em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn-dark{background:var(--ink);color:#fbf3ec;box-shadow:0 14px 30px -16px rgba(44,33,28,.7)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(44,33,28,.65);background:#3a2b24}
.btn-line{border-color:rgba(44,33,28,.35);color:var(--ink);background:rgba(255,255,255,.35)}
.btn-line:hover{border-color:var(--ink);background:#fff;transform:translateY(-2px)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.92rem}
.btn-shine::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);pointer-events:none;opacity:0}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,248,244,.82);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.scrolled{border-color:var(--line);background:rgba(251,248,244,.95)}
.head-in{display:flex;align-items:center;gap:14px;min-height:68px}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;margin-right:auto}
.brand-name{font:italic 600 1.9rem/0.9 var(--head);color:var(--ink)}
.brand-sub{font:500 .64rem/1 var(--body);letter-spacing:.42em;text-transform:uppercase;color:var(--rose-d);margin-top:5px;padding-left:2px}
.nav{display:none}
.menu-btn{width:44px;height:44px;border:0;background:transparent;display:grid;place-content:center;gap:6px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:22px;height:1.6px;background:var(--ink);transition:transform .3s var(--ease)}
body.menu-open .menu-btn span:first-child{transform:translateY(3.8px) rotate(45deg)}
body.menu-open .menu-btn span:last-child{transform:translateY(-3.8px) rotate(-45deg)}
body.menu-open .nav{display:flex;position:fixed;inset:68px 0 0 0;flex-direction:column;align-items:flex-start;gap:6px;padding:28px 24px;background:var(--paper);overflow:auto}
body.menu-open .nav a{font:500 2rem/1.25 var(--head);text-decoration:none;color:var(--ink)}
body.menu-open .nav .nav-call{margin-top:14px;font:500 1rem var(--body);color:var(--rose-d)}
body.menu-open{overflow:hidden}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cream),var(--paper) 85%);padding:26px 0 40px}
.hero-glow{position:absolute;inset:0;pointer-events:none}
.hero-glow i{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55}
.hero-glow .g1{width:340px;height:340px;background:#efd3c6;top:-80px;right:-100px}
.hero-glow .g2{width:280px;height:280px;background:#efe2c9;bottom:40px;left:-120px}
.hero-glow .g3{width:200px;height:200px;background:#e8c4b6;top:45%;right:20%;opacity:.35}
.hero-in{position:relative;display:grid;gap:30px}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 .78rem/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin:0}
.dot{width:7px;height:7px;border-radius:50%;background:var(--rose);flex:none}
.hero h1{font-size:clamp(2.9rem,13vw,5.4rem);line-height:.98;margin:16px 0 16px;letter-spacing:-.005em}
.hero h1 em{display:inline-block}
.lead{font-size:1.08rem;color:var(--muted);margin:0;max-width:38ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-cta .btn{flex:1 1 220px}
.hero-meta{margin:18px 0 0;font-size:.92rem;color:var(--muted)}
.hero-meta b{color:var(--ink)}
.stars{color:#c9973f;letter-spacing:.1em}
.hero-visual{position:relative;max-width:460px;width:100%;margin:0 auto}
.arch{position:relative;aspect-ratio:4/5;border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--sand);box-shadow:0 30px 60px -30px rgba(80,50,35,.45)}
.arch::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.55);border-radius:999px 999px 14px 14px;pointer-events:none;z-index:3}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge-25{position:absolute;left:-6px;bottom:44px;z-index:4;display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:999px;padding:10px 18px 10px 12px;box-shadow:0 18px 34px -18px rgba(80,50,35,.55)}
.badge-25 b{font:600 2.2rem/1 var(--head);color:var(--rose-d)}
.badge-25 span{font:500 .72rem/1.15 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--taupe)}
.hero-caption{margin:12px 0 0;text-align:center;font:italic 500 1rem var(--head);color:var(--taupe)}

/* Nastro */
.ribbon{background:var(--ink);color:#efe3d8}
.ribbon-in{list-style:none;margin:0 auto;padding-top:18px;padding-bottom:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;font-size:.88rem;line-height:1.35}
.ribbon b{display:block;font:italic 600 1.25rem/1.1 var(--head);color:#fff}

/* Sezioni */
.sec{padding:72px 0}
section[id]{scroll-margin-top:68px}
.kicker{font:500 .76rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--rose-d);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:26px;height:1px;background:currentColor}
.sec-lead{margin:16px 0 0;font-size:1.05rem;color:var(--muted);max-width:60ch}
.center-head{text-align:center;max-width:720px;margin:0 auto 40px}
.center-head .kicker{justify-content:center}
.center-head .sec-lead{margin-left:auto;margin-right:auto}
.center{text-align:center}

/* Storia */
.storia{background:var(--paper)}
.storia-grid{display:grid;gap:40px}
.silvia-quote{margin:28px 0 0;padding:22px 24px;border-left:2px solid var(--rose);background:var(--cream);border-radius:0 var(--r) var(--r) 0}
.silvia-quote blockquote{margin:0;font:italic 500 1.6rem/1.2 var(--head);color:var(--ink)}
.silvia-quote figcaption{margin-top:8px;font-size:.86rem;color:var(--taupe)}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--blush),var(--rose),var(--blush))}
.timeline li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:14px;padding:12px 0}
.timeline .y{position:relative;z-index:1;justify-self:center;align-self:start;background:var(--paper);border:1px solid var(--blush);border-radius:999px;padding:5px 0;width:64px;text-align:center;font:italic 600 1.05rem/1 var(--head);color:var(--rose-d)}
.timeline b{font:600 1.3rem/1.2 var(--head);color:var(--ink)}
.timeline p{margin:2px 0 0;color:var(--muted);font-size:.97rem}

/* Metodo */
.metodo{background:var(--cream)}
.rules{display:grid;gap:16px}
.rule{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px}
.rule-n{font:italic 600 2.4rem/1 var(--head);color:var(--blush)}
.rule h3{margin:10px 0 8px}
.rule p{margin:0;color:var(--muted)}

/* Trattamenti */
.cards{display:grid;gap:18px}
.card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(80,50,35,.5)}
.card-img{overflow:hidden;background:var(--sand)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:18px 18px 20px}
.card-body p{margin:6px 0 0;color:var(--muted);font-size:.95rem}
.tags{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:.74rem;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:var(--cream);color:var(--taupe)}
.note{text-align:center;margin:30px auto 0;color:var(--muted);font:italic 500 1.2rem var(--head)}

/* Centro */
.centro{background:var(--paper)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gallery figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.gallery img{width:100%;height:100%;object-fit:cover}
.g-a{grid-column:1/-1;aspect-ratio:4/3}
.g-b,.g-c{aspect-ratio:3/4}
.g-d{grid-column:1/-1;aspect-ratio:16/10}
.team{margin-top:48px;text-align:center}
.team .kicker{justify-content:center}
.team-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.team-list li{background:var(--cream);border-radius:var(--r);padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.ini{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--blush);font:italic 600 1.6rem/1 var(--head);color:var(--rose-d);margin-bottom:6px}
.team-list b{font:600 1.3rem/1 var(--head);color:var(--ink)}
.team-list small{font-size:.8rem;color:var(--muted)}

/* Recensioni */
.recensioni{background:linear-gradient(180deg,var(--cream),var(--sand))}
.big-score{font-size:1.25em;font-style:normal;color:var(--ink)}
.quotes{display:grid;gap:14px}
.q{margin:0;background:rgba(255,255,255,.7);border-radius:var(--r);padding:24px 22px;border:1px solid rgba(255,255,255,.8)}
.q blockquote{margin:0;font:italic 500 1.28rem/1.35 var(--head);color:var(--ink)}
.q figcaption{margin-top:12px;font-size:.84rem;letter-spacing:.04em;color:var(--taupe)}
.q-stars{color:#c9973f;letter-spacing:.08em;margin-right:6px}
.text-link{display:inline-block;margin-top:28px;color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--rose);padding-bottom:3px}
.text-link:hover{color:var(--rose-d)}

/* Contatti */
.contatti{background:var(--paper)}
.contatti-grid{display:grid;gap:36px}
.status{display:inline-flex;align-items:center;gap:9px;margin:18px 0 0;font-size:.92rem;color:var(--muted)}
.status:empty{display:none}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:#b9b0a8}
.status.open::before{background:#5f9d6b;box-shadow:0 0 0 4px rgba(95,157,107,.18)}
.contact-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.contact-cta .btn{flex:1 1 220px}
.contact-list{list-style:none;padding:0;margin:28px 0 0;border-top:1px solid var(--line)}
.contact-list li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-list span{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.contact-list b{font-weight:500;color:var(--ink)}
.contact-list a{text-decoration-color:var(--rose)}
.hours{background:var(--cream);border-radius:var(--r);padding:26px 22px}
.hours table{width:100%;border-collapse:collapse;margin-top:12px}
.hours th,.hours td{padding:10px 0;border-bottom:1px solid var(--line);font-weight:400;text-align:left}
.hours td{text-align:right;color:var(--muted)}
.hours tr.today th,.hours tr.today td{color:var(--ink);font-weight:600}
.map{margin-top:20px;border-radius:16px;overflow:hidden;background:var(--sand);aspect-ratio:4/3;display:grid;place-content:center;text-align:center;gap:8px}
.map iframe{width:100%;height:100%;border:0;display:block}
.map.loaded{display:block}
.map-btn{font:500 .95rem var(--body);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:12px 20px;cursor:pointer;color:var(--ink)}
.map-note{margin:0;font-size:.8rem;color:var(--muted)}

/* Footer */
.site-footer{background:var(--ink);color:#d9cbc0;padding:44px 0 110px;font-size:.92rem}
.foot-in p{margin:6px 0}
.foot-brand{margin-bottom:14px!important}
.foot-brand .brand-name{color:#fff}
.foot-brand .brand-sub{color:var(--blush)}
.site-footer a{color:#fff}
.legal{font-size:.8rem;color:#a8978b}
.tbc{color:#e2b9a9}

/* Barra telefono */
.mobile-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:8px;background:rgba(44,33,28,.94);border-radius:999px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .45s var(--ease)}
.mobile-bar.show{transform:none}
.mobile-bar a{min-height:48px;display:grid;place-items:center;border-radius:999px;color:#fff;text-decoration:none;font-weight:500}
.mobile-bar .mb-call{background:var(--rose-d)}

/* Tablet e computer */
@media (min-width:700px){
  .ribbon-in{grid-template-columns:repeat(4,1fr)}
  .rules{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1.3fr .7fr .7fr;grid-auto-rows:220px}
  .g-a{grid-column:1;grid-row:1/3;aspect-ratio:auto}
  .g-b,.g-c{aspect-ratio:auto;grid-row:1/2}
  .g-d{grid-column:2/4;grid-row:2;aspect-ratio:auto}
  .team-list{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:980px){
  .wrap{padding:0 36px}
  .nav{display:flex;gap:26px;align-items:center}
  .nav a{text-decoration:none;font-size:.93rem;color:var(--text);position:relative}
  .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--rose);transition:right .3s var(--ease)}
  .nav a:hover::after{right:0}
  .nav .nav-call{display:none}
  .menu-btn{display:none}
  .head-call{display:inline-flex}
  .hero{padding:56px 0 80px}
  .hero-in{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px}
  .hero-visual{max-width:480px}
  .badge-25{left:-34px}
  .lead{font-size:1.18rem}
  .sec{padding:110px 0}
  .storia-grid{grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .storia-head{position:sticky;top:110px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .card{grid-template-columns:1fr;grid-template-rows:230px auto}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .q:nth-child(1),.q:nth-child(2){grid-column:span 1}
  .contatti-grid{grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
  .mobile-bar{display:none}
  .site-footer{padding-bottom:44px}
}
@media (max-width:979px){
  .head-call{display:none}
  .hero{padding:16px 0 36px}
  .hero-in{gap:22px}
  .hero-visual{order:-1;max-width:520px}
  .arch{aspect-ratio:6/5;border-radius:220px 220px var(--r) var(--r)}
  .arch::after{border-radius:210px 210px 14px 14px}
  .badge-25{left:10px;bottom:14px;padding:8px 14px 8px 10px}
  .badge-25 b{font-size:1.8rem}
  .hero-caption{display:none}
  .eyebrow{font-size:.72rem;letter-spacing:.12em}
  .hero h1{margin:12px 0 12px}
}

/* ===== Animazioni =====
   Regola: lo stato normale di ogni elemento è VISIBILE. Le animazioni di
   ingresso partono da uno stato nascosto solo dentro un keyframe e solo se
   l'utente non chiede movimento ridotto. Dopo 3,2 s lo script mette
   html.anim-done e le animazioni d'ingresso si spengono comunque. */
@media (prefers-reduced-motion:no-preference){
  .a-1{animation:fadeUp .9s var(--ease) .1s both}
  .a-2{animation:fadeUp 1.1s var(--ease) .25s both}
  .a-3{animation:fadeUp 1s var(--ease) .5s both}
  .a-4{animation:fadeUp 1s var(--ease) .7s both}
  .a-5{animation:fadeUp 1s var(--ease) .9s both}
  .a-6{animation:archIn 1.5s var(--ease) .2s both}
  .badge-25{animation:floaty 6s ease-in-out 1.6s infinite}
  .btn-shine::after{animation:shine 5.5s ease-in-out 1.8s infinite}
  .hero-glow .g1{animation:drift1 16s ease-in-out infinite alternate}
  .hero-glow .g2{animation:drift2 19s ease-in-out infinite alternate}
  .hero-glow .g3{animation:drift1 13s ease-in-out infinite alternate-reverse}
  /* Foto della hero: dissolvenza lenta e zoom continuo (attivato dallo script) */
  .slides-on .slide{opacity:0;transition:opacity 1.8s ease-in-out}
  .slides-on .slide.is-active{opacity:1}
  .slides-on .slide.is-active,.slides-on .slide.was-active{animation:kenburns 9s linear both}
  html.anim-done .a-1,html.anim-done .a-2,html.anim-done .a-3,html.anim-done .a-4,html.anim-done .a-5,html.anim-done .a-6{animation:none}
  html.hero-off .hero-glow i,html.hero-off .slide,html.hero-off .badge-25{animation-play-state:paused}
  /* Comparsa allo scorrimento: solo per gli elementi marcati .rv.wait dallo script */
  .rv.wait{opacity:0;transform:translateY(22px)}
  .rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
  html.rv-safe .rv.wait{opacity:1;transform:none}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes archIn{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shine{0%{left:-70%;opacity:0}8%{opacity:1}28%{left:130%;opacity:1}29%,100%{left:130%;opacity:0}}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,50px) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,-40px) scale(1.2)}}