/* =========================================================================
   Centro Estetico Oasi — Design System
   Palette salvia / ottone / crema · tipografia classica ad alta leggibilità
   ========================================================================= */

/* ---------- 1. Token ---------- */
:root{
  /* Colori */
  --verde-900:#22342D;
  --verde-800:#2C4439;
  --verde-700:#3A5A4C;
  --verde-600:#4A6E5D;
  --verde-500:#5F8474;
  --verde-100:#E4EDE8;
  --verde-50:#F1F6F3;

  /* Oro scelto sul contrasto, non a occhio: l'ottone chiaro di partenza dava
     3,43 col bianco sul bottone e 4,34 sulla crema per l'occhiello, sotto il
     4,5 richiesto da WCAG AA per il testo normale. Questi due valori stanno a
     5,0 e 5,6 e restano caldi. Serve anche alla clientela meno giovane. */
  --oro-700:#7B5E28;
  --oro-600:#8A6A30;
  --oro-500:#B99155;
  --oro-300:#D9BE8C;
  --oro-100:#F2E6D0;

  --crema:#FAF6F0;
  --sabbia:#F1E9DD;
  --sabbia-scura:#E3D7C5;

  --inchiostro:#2A2724;
  --testo:#3D3833;
  --testo-tenue:#6A625A;
  --bianco:#FFFFFF;

  --bordo:rgba(42,39,36,.12);
  --bordo-chiaro:rgba(255,255,255,.22);

  /* Tipografia */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;

  --fs-micro:.8125rem;
  --fs-small:.9375rem;
  --fs-body:clamp(1.0625rem,.99rem + .32vw,1.1875rem);
  --fs-lead:clamp(1.1875rem,1.09rem + .42vw,1.375rem);
  --fs-h3:clamp(1.3125rem,1.22rem + .4vw,1.5rem);
  --fs-h2:clamp(2rem,1.62rem + 1.6vw,3.15rem);
  --fs-h1:clamp(2.35rem,1.75rem + 2.6vw,4.25rem);
  --fs-eyebrow:.8125rem;

  /* Spazi */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:2.75rem;--sp-8:3.5rem;
  --sp-9:clamp(3.5rem,2.6rem + 3.8vw,6rem);
  --sp-10:clamp(4.5rem,3.2rem + 5.4vw,8rem);

  /* Struttura */
  --container:1220px;
  --container-stretto:820px;
  --gutter:clamp(1.15rem,.8rem + 1.6vw,2.5rem);
  --radius-s:6px;
  --radius:10px;
  --radius-l:16px;

  --ombra-1:0 1px 2px rgba(34,52,45,.05),0 2px 8px rgba(34,52,45,.05);
  --ombra-2:0 4px 12px rgba(34,52,45,.07),0 14px 34px rgba(34,52,45,.08);
  --ombra-3:0 10px 26px rgba(34,52,45,.1),0 26px 60px rgba(34,52,45,.12);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-morbido:cubic-bezier(.33,1,.68,1);

  --h-topbar:38px;
  --h-header:78px;
  --h-barra-mobile:0px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--testo);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--oro-600);outline-offset:3px;border-radius:2px}
::selection{background:var(--oro-300);color:var(--verde-900)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 3. Tipografia ---------- */
h1,h2,.display{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.005em;
  color:var(--verde-900);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{
  font-family:var(--sans);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--verde-900);
  text-wrap:balance;
}
p{text-wrap:pretty}
p + p{margin-top:var(--sp-4)}
.lead{font-size:var(--fs-lead);line-height:1.65;color:var(--testo)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-700);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--oro-500);flex:none}
.eyebrow--centro{justify-content:center}
.eyebrow--chiaro{color:var(--oro-300)}
.eyebrow--chiaro::before{background:var(--oro-300)}
.testo-oro{color:var(--oro-600)}

/* ---------- 4. Layout ---------- */
.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}
.container--stretto{max-width:var(--container-stretto)}
.sezione{padding-block:var(--sp-10)}
.sezione--compatta{padding-block:var(--sp-9)}
.sezione--crema{background:var(--crema)}
.sezione--bianca{background:var(--bianco)}
.sezione--sabbia{background:var(--sabbia)}
.sezione--verde{background:var(--verde-800);color:rgba(255,255,255,.88)}
.sezione--verde h1,.sezione--verde h2,.sezione--verde h3{color:var(--bianco)}
.intestazione{max-width:62ch;margin-bottom:var(--sp-8)}
.intestazione--centro{margin-inline:auto;text-align:center}
.intestazione h2{margin-top:var(--sp-3)}
.intestazione p{margin-top:var(--sp-4)}

.griglia{display:grid;gap:var(--sp-5)}
.griglia > *{min-width:0}
@media (min-width:640px){ .griglia--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){
  .griglia--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .griglia--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:640px) and (max-width:899px){
  .griglia--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Griglia delle cinque aree: tre per riga, con le ultime due centrate.
   Con auto-fit le due card di coda restavano spaiate a sinistra. Sei colonne
   virtuali e uno span di due risolvono senza toccare il markup. */
.griglia-aree{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
@media (min-width:1000px){
  .griglia-aree{grid-template-columns:repeat(6,minmax(0,1fr))}
  .griglia-aree > *{grid-column:span 2}
  .griglia-aree > *:nth-child(4){grid-column:2 / span 2}
  .griglia-aree > *:nth-child(5){grid-column:4 / span 2}
}

/* Filetto decorativo */
.filetto{width:60px;height:2px;background:var(--oro-500);border:0;margin:var(--sp-5) 0}
.filetto--centro{margin-inline:auto}

/* ---------- 5. Bottoni ---------- */
.btn{
  --btn-bg:var(--verde-700);
  --btn-testo:var(--bianco);
  --btn-bordo:var(--verde-700);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:54px;
  padding:.85em 1.9em;
  font-family:var(--sans);
  font-size:1.0625rem;font-weight:600;letter-spacing:.015em;
  line-height:1.2;text-align:center;
  color:var(--btn-testo);
  background:var(--btn-bg);
  border:1.5px solid var(--btn-bordo);
  border-radius:var(--radius-s);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
             background-color .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--ombra-2)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none;width:1.15em;height:1.15em}
.btn--oro{--btn-bg:var(--oro-600);--btn-bordo:var(--oro-600)}
.btn--oro:hover{--btn-bg:var(--oro-700);--btn-bordo:var(--oro-700)}
.btn--chiaro{--btn-bg:var(--bianco);--btn-testo:var(--verde-800);--btn-bordo:var(--bianco)}
.btn--contorno{--btn-bg:transparent;--btn-testo:var(--verde-700);--btn-bordo:rgba(58,90,76,.45)}
.btn--contorno:hover{--btn-bg:var(--verde-700);--btn-testo:var(--bianco);--btn-bordo:var(--verde-700)}
.btn--contorno-chiaro{--btn-bg:transparent;--btn-testo:var(--bianco);--btn-bordo:var(--bordo-chiaro)}
.btn--contorno-chiaro:hover{--btn-bg:var(--bianco);--btn-testo:var(--verde-800);--btn-bordo:var(--bianco)}
.btn--grande{min-height:60px;font-size:1.125rem;padding:.9em 2.2em}
.btn--pieno{width:100%}
.gruppo-btn{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.gruppo-btn--centro{justify-content:center}

/* Link con freccia */
.link-freccia{
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:600;color:var(--verde-700);
  padding-bottom:3px;
  border-bottom:1.5px solid var(--oro-300);
  transition:color .25s var(--ease),border-color .25s var(--ease),gap .25s var(--ease);
}
.link-freccia svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.link-freccia:hover{color:var(--oro-700);border-color:var(--oro-600)}
.link-freccia:hover svg{transform:translateX(5px)}

/* ---------- 6. Barra di avanzamento ---------- */
.avanzamento{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:120;
  background:linear-gradient(90deg,var(--oro-500),var(--oro-300));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* ---------- 7. Topbar ---------- */
.topbar{
  background:var(--verde-900);color:rgba(255,255,255,.82);
  font-size:var(--fs-micro);letter-spacing:.02em;
}
.topbar__int{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:var(--h-topbar);
}
.topbar__voci{display:flex;align-items:center;gap:var(--sp-5)}
.topbar__voce{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.topbar__voce svg{width:14px;height:14px;color:var(--oro-300);flex:none}
.topbar a.topbar__voce{transition:color .25s var(--ease)}
.topbar a.topbar__voce:hover{color:var(--bianco)}
.topbar__social{display:flex;align-items:center;gap:var(--sp-3)}
.topbar__social a{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;transition:background-color .25s var(--ease),color .25s var(--ease)}
.topbar__social a:hover{background:rgba(255,255,255,.12);color:var(--bianco)}
.topbar__social svg{width:15px;height:15px}
@media (max-width:900px){ .topbar{display:none} }

/* ---------- 8. Header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,246,240,.96);
  border-bottom:1px solid var(--bordo);
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease);
}
@supports (backdrop-filter:blur(10px)){
  .header{background:rgba(250,246,240,.88);backdrop-filter:blur(14px) saturate(1.2)}
}
.header.is-fissa{box-shadow:0 2px 20px rgba(34,52,45,.09)}
.header__int{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  min-height:var(--h-header);
}
.marchio{display:flex;align-items:center;gap:.8rem;flex:none}
.marchio__logo{width:52px;height:52px;border-radius:50%;background:var(--bianco);padding:3px;box-shadow:var(--ombra-1);flex:none}
.marchio__testo{display:flex;flex-direction:column;line-height:1.1}
.marchio__nome{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--verde-900);letter-spacing:.01em}
.marchio__claim{font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-700)}
@media (max-width:420px){
  .marchio__logo{width:44px;height:44px}
  .marchio__nome{font-size:1.28rem}
  .marchio__claim{font-size:.625rem;letter-spacing:.14em}
}

.nav{display:none}
@media (min-width:1100px){
  .nav{display:flex;align-items:center}
  .nav ul{display:flex;align-items:center;gap:.15rem}
  .nav__link{
    position:relative;display:block;
    padding:.55em .85em;border-radius:var(--radius-s);
    font-size:1rem;font-weight:600;color:var(--testo);white-space:nowrap;
    transition:color .25s var(--ease),background-color .25s var(--ease);
  }
  .nav__link::after{
    content:"";position:absolute;left:.85em;right:.85em;bottom:.2em;height:2px;
    background:var(--oro-500);transform:scaleX(0);transform-origin:0 50%;
    transition:transform .3s var(--ease);
  }
  .nav__link:hover{color:var(--verde-800);background:var(--verde-50)}
  .nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
  .nav__link[aria-current="page"]{color:var(--verde-800)}
}
@media (min-width:1100px) and (max-width:1279px){
  .nav__link{padding:.5em .6em;font-size:.9375rem}
  .nav__link::after{left:.6em;right:.6em}
}
.header__azioni{display:flex;align-items:center;gap:var(--sp-3)}
.topbar__tel{font-weight:700;color:var(--bianco)}
.topbar__tel svg{color:var(--oro-300)}
.header .btn{min-height:46px;padding:.6em 1.4em;font-size:1rem}
@media (max-width:1099px){ .header__azioni .btn{display:none} }

/* Hamburger */
.hamburger{
  display:grid;place-items:center;width:52px;height:52px;flex:none;
  border:1.5px solid var(--bordo);border-radius:var(--radius-s);
  background:var(--bianco);transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.hamburger:hover{background:var(--verde-50);border-color:var(--verde-500)}
@media (min-width:1100px){ .hamburger{display:none} }
.hamburger__linee{display:block;width:22px;height:14px;position:relative}
.hamburger__linee span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--verde-800);
  transition:transform .35s var(--ease),opacity .2s var(--ease),top .35s var(--ease);
}
.hamburger__linee span:nth-child(1){top:0}
.hamburger__linee span:nth-child(2){top:6px}
.hamburger__linee span:nth-child(3){top:12px}
.hamburger[aria-expanded="true"] span:nth-child(1){top:6px;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){top:6px;transform:rotate(-45deg)}

/* Menu mobile */
.menu{
  position:fixed;inset:0;z-index:110;
  display:flex;flex-direction:column;
  background:var(--crema);
  visibility:hidden;opacity:0;
  transition:opacity .35s var(--ease),visibility .35s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.menu.is-aperto{visibility:visible;opacity:1}
.menu__testa{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:var(--h-header);padding-inline:var(--gutter);
  border-bottom:1px solid var(--bordo);flex:none;
}
.menu__chiudi{
  display:grid;place-items:center;width:52px;height:52px;
  border:1.5px solid var(--bordo);border-radius:var(--radius-s);background:var(--bianco);
}
.menu__chiudi svg{width:20px;height:20px;color:var(--verde-800)}
.menu__corpo{padding:var(--sp-5) var(--gutter) var(--sp-8);flex:1}
.menu__lista{display:flex;flex-direction:column}
.menu__voce{
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.menu.is-aperto .menu__voce{opacity:1;transform:none}
.menu__link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:1.05rem .25rem;
  font-family:var(--serif);font-size:1.75rem;font-weight:600;color:var(--verde-900);
  border-bottom:1px solid var(--bordo);
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}
.menu__link svg{width:18px;height:18px;color:var(--oro-500);flex:none;transition:transform .3s var(--ease)}
.menu__link:hover,.menu__link[aria-current="page"]{color:var(--oro-700);padding-left:.7rem}
.menu__link:hover svg{transform:translateX(4px)}
.menu__contatti{margin-top:var(--sp-7);display:grid;gap:var(--sp-3)}
.menu__info{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--bordo);font-size:var(--fs-small);color:var(--testo-tenue)}
.menu__info strong{display:block;color:var(--verde-900);font-size:1rem;margin-bottom:.25rem}

/* ---------- 9. Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--verde-900)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform}
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(105deg,rgba(26,43,36,.9) 0%,rgba(26,43,36,.76) 42%,rgba(26,43,36,.42) 72%,rgba(26,43,36,.3) 100%),
    linear-gradient(0deg,rgba(26,43,36,.55),rgba(26,43,36,0) 55%);
}
.hero__int{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(560px,78vh,760px);
  padding-block:var(--sp-9);
}
.hero__testo{max-width:44rem;color:rgba(255,255,255,.9)}
.hero__testo h1{color:var(--bianco);margin-top:var(--sp-4)}
.hero__testo .lead{margin-top:var(--sp-5);color:rgba(255,255,255,.86);max-width:36rem}
.hero__azioni{margin-top:var(--sp-7)}
.hero__pillole{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid var(--bordo-chiaro);
  font-size:var(--fs-small);color:rgba(255,255,255,.82);
}
.hero__pillola{display:inline-flex;align-items:center;gap:.5em}
.hero__pillola svg{width:16px;height:16px;color:var(--oro-300);flex:none}

/* Hero pagine interne */
.hero--interno .hero__int{min-height:clamp(340px,44vh,470px);align-items:flex-end;padding-bottom:var(--sp-8)}
.hero--interno .hero__velo{
  background:
    linear-gradient(100deg,rgba(26,43,36,.88) 0%,rgba(26,43,36,.7) 50%,rgba(26,43,36,.42) 100%),
    linear-gradient(0deg,rgba(26,43,36,.6),rgba(26,43,36,0) 60%);
}

/* Briciole */
.briciole{font-size:var(--fs-small);color:rgba(255,255,255,.72);margin-bottom:var(--sp-3)}
.briciole ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5em}
.briciole a{border-bottom:1px solid rgba(255,255,255,.3);transition:color .25s var(--ease),border-color .25s var(--ease)}
.briciole a:hover{color:var(--bianco);border-color:var(--oro-300)}
.briciole li + li::before{content:"›";margin-right:.5em;color:var(--oro-300)}
.briciole [aria-current]{color:var(--oro-300)}

/* ---------- 10. Card trattamento ---------- */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--bianco);
  border:1px solid var(--bordo);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--ombra-1);
  transition:transform .4s var(--ease-morbido),box-shadow .4s var(--ease-morbido),border-color .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--ombra-3);border-color:var(--oro-300)}
.card__media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--sabbia)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-morbido)}
.card:hover .card__media img{transform:scale(1.06)}
.card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(26,43,36,.4),rgba(26,43,36,0) 55%);
  opacity:0;transition:opacity .4s var(--ease);
}
.card:hover .card__media::after{opacity:1}
.card__numero{
  position:absolute;top:var(--sp-4);left:var(--sp-4);
  display:grid;place-items:center;width:40px;height:40px;
  font-family:var(--serif);font-size:1.05rem;font-weight:700;
  color:var(--verde-900);background:rgba(255,255,255,.93);
  border-radius:50%;box-shadow:var(--ombra-1);
}
.card__corpo{display:flex;flex-direction:column;flex:1;padding:var(--sp-5) var(--sp-5) var(--sp-6)}
.card__corpo h3{margin-bottom:var(--sp-3)}
.card__corpo p{color:var(--testo-tenue);font-size:1.0625rem;line-height:1.65}
.card__pie{margin-top:auto;padding-top:var(--sp-5)}
.card__link::after{content:"";position:absolute;inset:0}

/* ---------- 11. Punti di forza ---------- */
.forza{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:var(--sp-6) var(--sp-5);
  background:var(--bianco);
  border:1px solid var(--bordo);
  border-top:3px solid var(--oro-500);
  border-radius:var(--radius);
  transition:transform .35s var(--ease-morbido),box-shadow .35s var(--ease-morbido);
}
.forza:hover{transform:translateY(-4px);box-shadow:var(--ombra-2)}
.forza__icona{
  display:grid;place-items:center;width:58px;height:58px;margin-bottom:var(--sp-4);
  color:var(--verde-700);background:var(--verde-50);border-radius:50%;
}
.forza__icona svg{width:28px;height:28px}
.forza h3{margin-bottom:var(--sp-2);font-size:1.1875rem}
.forza p{font-size:1.0625rem;line-height:1.6;color:var(--testo-tenue)}

/* ---------- 12. Numeri ---------- */
.numeri{display:grid;gap:var(--sp-5);text-align:center}
@media (min-width:640px){ .numeri{grid-template-columns:repeat(3,minmax(0,1fr))} }
.numero__cifra{
  font-family:var(--serif);font-weight:700;line-height:1;
  font-size:clamp(3rem,2.2rem + 3.4vw,4.75rem);
  color:var(--oro-300);
}
.numero__eti{
  margin-top:var(--sp-3);font-size:var(--fs-small);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78);
}
.sezione--verde .numero__eti{color:rgba(255,255,255,.78)}

/* ---------- 13. Sezione affiancata ---------- */
.affianca{display:grid;gap:var(--sp-7);align-items:center}
.affianca > *{min-width:0}
@media (min-width:920px){
  .affianca{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,1.4rem + 4.4vw,5rem)}
  .affianca--invertita .affianca__media{order:2}
}
.affianca__media{position:relative}
.affianca__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--ombra-2);
}
.affianca__media--alta img{aspect-ratio:3/4}
@media (max-width:919px){ .affianca__media--alta img{aspect-ratio:4/3} }
.affianca__cornice{
  content:"";position:absolute;inset:auto -14px -14px auto;
  width:58%;height:58%;z-index:-1;
  border:2px solid var(--oro-300);border-radius:var(--radius);
}
.affianca--invertita .affianca__cornice{inset:auto auto -14px -14px}
@media (max-width:919px){ .affianca__cornice{display:none} }
.affianca__testo h2{margin-top:var(--sp-3)}
.affianca__testo p{margin-top:var(--sp-4);color:var(--testo)}
.affianca__testo .gruppo-btn{margin-top:var(--sp-6)}

/* ---------- 14. Elenco vantaggi ---------- */
.elenco{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
.elenco li{
  position:relative;padding-left:2.1rem;
  font-size:1.0625rem;line-height:1.6;
}
.elenco li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:20px;height:20px;border-radius:50%;
  background:var(--verde-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A5A4C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.sezione--verde .elenco li::before{background-color:rgba(255,255,255,.14)}

/* ---------- 15. Fascia richiamo ---------- */
.richiamo{position:relative;isolation:isolate;overflow:hidden;background:var(--verde-800);color:rgba(255,255,255,.88)}
.richiamo__media{position:absolute;inset:0;z-index:-2}
.richiamo__media img{width:100%;height:100%;object-fit:cover}
.richiamo__velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(34,52,45,.95),rgba(34,52,45,.8))}
.richiamo__int{padding-block:var(--sp-9);text-align:center;max-width:56rem;margin-inline:auto}
.richiamo h2{color:var(--bianco);margin-top:var(--sp-3)}
.richiamo p{margin-top:var(--sp-4);font-size:var(--fs-lead);color:rgba(255,255,255,.86)}
.richiamo .gruppo-btn{margin-top:var(--sp-7)}

/* ---------- 16. Galleria (Swiper) ---------- */
.galleria{position:relative}
.galleria .swiper{overflow:hidden;border-radius:var(--radius);padding-bottom:0}
.galleria__slide{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--sabbia)}
.galleria__slide img{width:100%;aspect-ratio:4/3;object-fit:cover}
.galleria__dida{
  position:absolute;inset:auto 0 0 0;
  padding:var(--sp-7) var(--sp-5) var(--sp-4);
  background:linear-gradient(0deg,rgba(26,43,36,.85),rgba(26,43,36,0));
  color:var(--bianco);font-weight:600;font-size:1.0625rem;
}
.galleria__comandi{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-5)}
.galleria__btn{
  display:grid;place-items:center;width:52px;height:52px;flex:none;
  color:var(--verde-800);background:var(--bianco);
  border:1.5px solid var(--bordo);border-radius:50%;
  box-shadow:var(--ombra-1);
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.galleria__btn:hover{background:var(--verde-700);color:var(--bianco);border-color:var(--verde-700);transform:scale(1.06)}
.galleria__btn svg{width:20px;height:20px}
.galleria__paginazione{display:flex;align-items:center;justify-content:center;gap:.5rem;width:auto!important}
.galleria__paginazione .swiper-pagination-bullet{
  width:9px;height:9px;margin:0!important;opacity:1;
  background:var(--sabbia-scura);border-radius:50%;
  transition:width .3s var(--ease),background-color .3s var(--ease);
}
.galleria__paginazione .swiper-pagination-bullet-active{width:28px;border-radius:5px;background:var(--oro-600)}

/* ---------- 17. Orari & contatti ---------- */
.pannello{
  background:var(--bianco);border:1px solid var(--bordo);
  border-radius:var(--radius);box-shadow:var(--ombra-1);
  padding:clamp(1.5rem,1.1rem + 1.7vw,2.5rem);
}
.pannello h3{display:flex;align-items:center;gap:.6em;margin-bottom:var(--sp-5)}
.pannello h3 svg{width:22px;height:22px;color:var(--oro-600);flex:none}
.orari li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  padding:.75rem 0;border-bottom:1px dashed var(--bordo);
  font-size:1.0625rem;
}
.orari li:last-child{border-bottom:0}
.orari dt,.orari__giorno{font-weight:600;color:var(--verde-900)}
.orari__ore{color:var(--testo-tenue);white-space:nowrap;font-variant-numeric:tabular-nums}
.orari li.is-oggi{
  margin-inline:calc(var(--sp-3) * -1);padding-inline:var(--sp-3);
  background:var(--verde-50);border-radius:var(--radius-s);border-bottom-color:transparent;
}
.orari li.is-oggi .orari__giorno::after{
  content:"oggi";margin-left:.6em;padding:.1em .55em;
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bianco);background:var(--verde-600);border-radius:20px;vertical-align:middle;
}
.orari__chiuso{color:#9A5B4E;font-weight:600}
.stato{
  display:inline-flex;align-items:center;gap:.5em;margin-bottom:var(--sp-4);
  padding:.35em .9em;border-radius:20px;
  font-size:var(--fs-small);font-weight:700;
}
.stato--aperto{color:#2C6B4F;background:#E3F2E9}
.stato--chiuso{color:#8C4A3E;background:#FAE7E2}
.stato__punto{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.stato--aperto .stato__punto{animation:pulsa 2.2s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

.contatti-lista{display:grid;gap:var(--sp-4)}
.contatto{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-2) 0}
.contatto__icona{
  display:grid;place-items:center;width:46px;height:46px;flex:none;
  color:var(--verde-700);background:var(--verde-50);border-radius:50%;
}
.contatto__icona svg{width:21px;height:21px}
.contatto__eti{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-tenue)}
.contatto__val{display:block;margin-top:.15rem;font-size:1.125rem;font-weight:600;color:var(--verde-900);line-height:1.4;overflow-wrap:anywhere}
a.contatto__val{transition:color .25s var(--ease)}
a.contatto__val:hover{color:var(--oro-700)}

.mappa{
  position:relative;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--bordo);
  box-shadow:var(--ombra-1);background:var(--sabbia);
  aspect-ratio:16/10;
}
@media (max-width:620px){ .mappa{aspect-ratio:4/3} }
.mappa iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92)}

/* ---------- 18. Form ---------- */
.form{display:grid;gap:var(--sp-5)}
.form__riga{display:grid;gap:var(--sp-5)}
@media (min-width:640px){ .form__riga--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
.campo{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.campo label{font-size:1rem;font-weight:600;color:var(--verde-900)}
.campo label .obb{color:var(--oro-700)}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.85rem 1rem;
  font-size:1.0625rem;line-height:1.5;
  color:var(--inchiostro);background:var(--bianco);
  border:1.5px solid var(--bordo);border-radius:var(--radius-s);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A625A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:18px;
  padding-right:2.8rem;
}
.campo textarea{min-height:150px;resize:vertical}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--verde-500)}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--verde-600);
  box-shadow:0 0 0 3px rgba(74,110,93,.16);
}
.campo input:user-invalid,.campo textarea:user-invalid{border-color:#B5645A}
.campo__aiuto{font-size:var(--fs-small);color:var(--testo-tenue)}
.consenso{display:flex;align-items:flex-start;gap:.8rem;font-size:var(--fs-small);line-height:1.6;color:var(--testo-tenue)}
.consenso input{width:22px;height:22px;flex:none;margin-top:.25rem;accent-color:var(--verde-700)}
.consenso a{color:var(--verde-700);border-bottom:1px solid var(--oro-300)}
.form__esito{
  display:none;align-items:flex-start;gap:.7rem;
  padding:var(--sp-4);border-radius:var(--radius-s);
  font-size:1.0625rem;line-height:1.55;
}
.form__esito.is-visibile{display:flex}
.form__esito--ok{color:#2C6B4F;background:#E3F2E9;border:1px solid #BEDFCC}
.form__esito svg{width:22px;height:22px;flex:none;margin-top:.15rem}

/* ---------- 19. Fisarmonica FAQ ---------- */
.faq{display:grid;gap:var(--sp-3)}
.faq__voce{
  background:var(--bianco);border:1px solid var(--bordo);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.faq__voce[open]{border-color:var(--oro-300);box-shadow:var(--ombra-1)}
.faq__testa{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:1.15rem clamp(1rem,.8rem + .8vw,1.6rem);
  font-size:1.125rem;font-weight:600;color:var(--verde-900);
  cursor:pointer;list-style:none;
}
.faq__testa::-webkit-details-marker{display:none}
.faq__testa:hover{color:var(--oro-700)}
.faq__segno{
  display:grid;place-items:center;width:32px;height:32px;flex:none;
  color:var(--verde-700);background:var(--verde-50);border-radius:50%;
  transition:transform .35s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
}
.faq__segno svg{width:16px;height:16px}
.faq__voce[open] .faq__segno{transform:rotate(45deg);background:var(--oro-600);color:var(--bianco)}
.faq__corpo{padding:0 clamp(1rem,.8rem + .8vw,1.6rem) 1.4rem;color:var(--testo-tenue);font-size:1.0625rem;line-height:1.7}

/* ---------- 20. Footer ---------- */
.footer{background:var(--verde-900);color:rgba(255,255,255,.72);font-size:1.0625rem}
.footer__alto{padding-block:var(--sp-9)}
.footer__griglia{display:grid;gap:var(--sp-7)}
.footer__griglia > *{min-width:0}
@media (min-width:760px){ .footer__griglia{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1040px){ .footer__griglia{grid-template-columns:1.35fr 1fr 1fr 1.15fr} }
.footer h3{
  margin-bottom:var(--sp-4);color:var(--bianco);
  font-size:1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.footer__marchio{display:flex;align-items:center;gap:.85rem;margin-bottom:var(--sp-4)}
.footer__marchio img{width:56px;height:56px;border-radius:50%;background:var(--bianco);padding:3px;flex:none}
.footer__marchio span{font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--bianco);line-height:1.15}
.footer p{line-height:1.7}
.footer__link{display:grid;gap:.7rem}
.footer__link a{
  display:inline-flex;align-items:center;gap:.5em;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.footer__link a::before{content:"›";color:var(--oro-500)}
.footer__link a:hover{color:var(--bianco);transform:translateX(3px)}
.footer .orari li{border-bottom-color:rgba(255,255,255,.14);padding:.5rem 0;font-size:1rem}
.footer .orari__giorno{color:rgba(255,255,255,.9)}
.footer .orari__ore{color:rgba(255,255,255,.65)}
.footer .contatto{padding:0;gap:.8rem}
.footer .contatto__icona{width:38px;height:38px;color:var(--oro-300);background:rgba(255,255,255,.08)}
.footer .contatto__icona svg{width:17px;height:17px}
.footer .contatto__eti{color:rgba(255,255,255,.5)}
.footer .contatto__val{color:var(--bianco);font-size:1.0625rem}
.footer a.contatto__val:hover{color:var(--oro-300)}
.footer__social{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.footer__social a{
  display:grid;place-items:center;width:44px;height:44px;
  color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.18);border-radius:50%;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.footer__social a:hover{background:var(--oro-600);color:var(--bianco);border-color:var(--oro-600);transform:translateY(-2px)}
.footer__social svg{width:19px;height:19px}
.footer__basso{
  padding-block:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-small);color:rgba(255,255,255,.55);
}
.footer__basso-int{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-5)}
.footer__legale{display:flex;flex-wrap:wrap;align-items:center;gap:.5em var(--sp-4)}
.footer__legale a{transition:color .25s var(--ease)}
.footer__legale a:hover{color:var(--oro-300)}
.footer__firma a{color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.25)}
.footer__firma a:hover{color:var(--oro-300)}

/* ---------- 21. Barra azioni mobile ---------- */
.barra-mobile{
  position:fixed;inset:auto 0 0 0;z-index:95;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--bianco);
  border-top:1px solid var(--bordo);
  box-shadow:0 -4px 20px rgba(34,52,45,.1);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(105%);
  transition:transform .4s var(--ease);
}
.barra-mobile.is-visibile{transform:none}
.barra-mobile a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  min-height:62px;padding:.5rem .35rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.02em;
  color:var(--verde-800);
  transition:background-color .25s var(--ease);
}
.barra-mobile a + a{border-left:1px solid var(--bordo)}
.barra-mobile a:active{background:var(--verde-50)}
.barra-mobile svg{width:22px;height:22px;color:var(--oro-600)}
.barra-mobile a.is-whatsapp svg{color:#25A566}
@media (min-width:1100px){ .barra-mobile{display:none} }
@media (max-width:1099px){ body{padding-bottom:0} body.ha-barra{--h-barra-mobile:62px} }

/* Bottone WhatsApp desktop */
.whatsapp-flot{
  position:fixed;right:clamp(1rem,.6rem + 1.4vw,2rem);bottom:clamp(1rem,.6rem + 1.4vw,2rem);
  z-index:90;display:none;align-items:center;gap:.7em;
  padding:.85rem 1.35rem;
  font-weight:700;color:var(--bianco);background:#1FA855;
  border-radius:40px;box-shadow:0 6px 24px rgba(31,168,85,.38);
  opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background-color .25s var(--ease);
}
.whatsapp-flot.is-visibile{opacity:1;transform:none}
.whatsapp-flot:hover{background:#178F46}
.whatsapp-flot svg{width:22px;height:22px;flex:none}
@media (min-width:1100px){ .whatsapp-flot{display:inline-flex} }

/* Torna su */
.torna-su{
  position:fixed;right:clamp(1rem,.6rem + 1.4vw,2rem);
  bottom:calc(clamp(1rem,.6rem + 1.4vw,2rem) + var(--h-barra-mobile) + env(safe-area-inset-bottom));
  z-index:90;
  display:grid;place-items:center;width:48px;height:48px;
  color:var(--verde-800);background:var(--bianco);
  border:1px solid var(--bordo);border-radius:50%;
  box-shadow:var(--ombra-2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.torna-su.is-visibile{opacity:1;visibility:visible;transform:none}
.torna-su:hover{background:var(--verde-700);color:var(--bianco)}
.torna-su svg{width:20px;height:20px}
@media (min-width:1100px){ .torna-su{bottom:calc(clamp(1rem,.6rem + 1.4vw,2rem) + 76px)} }

/* ---------- 22. Animazioni al reveal ----------
   I blocchi partono VISIBILI. Solo quando lo script in testa conferma che il
   JavaScript gira (classe .js-anim) vengono nascosti per essere poi rivelati
   allo scorrimento. Così, se main.js o GSAP non arrivano — rete lenta, blocco
   del browser, CDN caduta — il testo resta leggibile invece di sparire. */
.rivela,.rivela-scala{opacity:1;transform:none}
.js-anim .rivela{opacity:0;transform:translateY(26px)}
.js-anim .rivela-scala{opacity:0;transform:scale(.965)}

/* ---------- 23. Preferenze di movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .rivela,.rivela-scala{opacity:1!important;transform:none!important}
  .hero__media img{transform:none!important}
}

/* ---------- 24. Stampa ---------- */
@media print{
  .topbar,.header,.menu,.barra-mobile,.whatsapp-flot,.torna-su,.avanzamento,.galleria__comandi{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero__velo,.richiamo__velo{display:none}
  .sezione{padding-block:1.5rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}