/* =====================================================================
   Centro Estetica di Stefania e Silvia — Vicenza
   Foglio di stile principale
   ---------------------------------------------------------------------
   1. Variabili e reset          6. Trattamenti
   2. Tipografia                 7. Gift Card
   3. Bottoni, icone, media      8. Contatti e mappa
   4. Header                     9. Footer e barra di chiamata
   5. Hero, valori, chi siamo   10. Animazioni e responsive
   ===================================================================== */

/* ============================ 1. VARIABILI ============================ */
:root{
  /* fondi — tutta la scala nasce dal rosa del marchio, niente grigi neutri */
  --ivory:      #FDF8F6;   /* fondo pagina, avorio appena rosato */
  --ivory-warm: #FBF0EC;   /* fasce di respiro fra le sezioni */
  --surface:    #FFFCFB;   /* card, pannelli, riquadri */
  --clay:       #F2E3DE;   /* bordi chiari */
  --clay-deep:  #E7CFC8;   /* bordi marcati */

  /* famiglia rosa — l'accento e' il codice NCS S 3030-Y80R */
  --rose-50:  #FDF7F5;
  --rose-100: #F9EAE5;
  --rose-200: #F1D8D0;
  --rose-300: #E3B5AA;
  --rose-400: #D48D7E;
  --rose-500: #C57063;
  --rose-600: #A85A4E;
  --rose-700: #85443A;

  /* fondo della sezione BioMicroNeedling: rosa cipria, un gradino piu' pieno
     delle altre fasce rosa, elencato nell'ordine in cui entra nella sfumatura */
  --band-1: #EFD2C8;
  --band-2: #E3B5AA;
  --band-3: #EAC4B9;

  --accent:      var(--rose-500);
  --accent-dark: var(--rose-600);
  --accent-soft: var(--rose-200);
  --accent-tint: var(--rose-50);

  /* testo */
  --ink:      #2D2D2D;
  --ink-soft: #5E5551;
  --ink-mute: #948880;

  /* sfumature ricorrenti */
  --grad-btn:   linear-gradient(135deg, var(--rose-500) 0%, var(--rose-400) 100%);
  --grad-btn-h: linear-gradient(135deg, var(--rose-600) 0%, var(--rose-500) 100%);
  --grad-rose-section:
      radial-gradient(72% 58% at 10% 0%,   rgba(212,141,126,.30) 0%, transparent 62%),
      radial-gradient(62% 52% at 92% 100%, rgba(197,112,99,.24) 0%, transparent 60%),
      linear-gradient(180deg, var(--rose-100) 0%, #F7DCD4 52%, var(--rose-100) 100%);
  /* sezioni "chiare": non bianche, un avorio rosato */
  --grad-plain-section:
      radial-gradient(60% 45% at 85% 4%, rgba(212,141,126,.11) 0%, transparent 62%),
      linear-gradient(180deg, var(--ivory) 0%, var(--ivory-warm) 100%);
  --grad-card-hover: linear-gradient(165deg, var(--rose-50) 0%, #FBEDE8 52%, #F5DED7 100%);
  --hairline: linear-gradient(90deg, transparent, var(--rose-400), transparent);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 26px;

  --shadow-xs: 0 1px 2px rgba(133,68,58,.05);
  --shadow-sm: 0 8px 26px rgba(133,68,58,.06);
  --shadow-md: 0 20px 54px rgba(133,68,58,.13);
  --shadow-rose: 0 14px 34px rgba(197,112,99,.26);

  --serif: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --sans:  "Jost", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad-x: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1200px;
  --header-h: 96px;

  --ease: cubic-bezier(.22,.61,.36,1);
  /* margine dell'intestazione: e' contemporaneamente lo spazio fra l'ultima voce
     di menu e la pillola Chiama e quello fra la pillola e il bordo. */
  --cta-inset: clamp(1.25rem, 3vw, 3rem);
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:400;
  line-height:1.8;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:.75rem 1.25rem;
  border-radius:0 0 var(--radius-sm) 0; text-decoration:none;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ============================ 2. TIPOGRAFIA ============================ */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.005em;
  margin:0;
}

.h2{ font-size:clamp(2.2rem, 4.8vw, 3.6rem); font-weight:400; }
.h3{ font-size:clamp(1.7rem, 3.2vw, 2.4rem); font-weight:400; }

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--rose-500);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow::after{
  content:""; flex:1; height:1px; max-width:64px;
  background:linear-gradient(90deg, var(--rose-300), transparent);
}
.section__head .eyebrow{ justify-content:center; }
.section__head .eyebrow::before{
  content:""; flex:1; height:1px; max-width:64px;
  background:linear-gradient(270deg, var(--rose-300), transparent);
}
.eyebrow--light{ color:var(--rose-200); }
.eyebrow--light::after{ background:linear-gradient(90deg, rgba(241,216,208,.8), transparent); }

.lead{ font-size:1.08rem; color:var(--ink-soft); }
p{ margin:0 0 1.15rem; color:var(--ink-soft); font-weight:300; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:500; color:var(--ink); }
.muted{ color:var(--ink-mute); font-size:.9rem; }

.section{ padding-block:var(--section-y); position:relative; background:var(--grad-plain-section); }
.section--rose{ background:var(--grad-rose-section); }
/* filo rosa fra una sezione e l'altra: tiene insieme il ritmo della pagina */
.section + .section::before{
  content:""; position:absolute; top:0; left:50%; translate:-50% 0;
  width:min(100% - 2.5rem, 1200px); height:1px; background:var(--hairline);
}
.section--tight{ padding-block:clamp(3rem, 5.5vw, 5rem); }
/* fascia ancora piu' bassa: usata da "Chi Siamo", dove il contenuto e' poco */
.section--slim{ padding-block:clamp(2.2rem, 4vw, 3.6rem); }
/* fascia compatta: usata dalla Gift Card, dove conta la card, non il contorno */
.section--compact{ padding-block:clamp(2.2rem, 3.6vw, 3.2rem); }
.section--compact .section__head{ margin-bottom:clamp(1.5rem, 2.6vw, 2.2rem); }
.section--compact .section__intro{ margin-top:.8rem; }

.section__head{
  max-width:47rem;
  margin:0 auto clamp(2.75rem,5vw,4.5rem);
  text-align:center;
}
.section__intro{ margin-top:1.5rem; font-size:1.05rem; color:var(--ink-soft); }

/* ====================== 3. BOTTONI, ICONE, MEDIA ====================== */
.ico{
  width:1.15em; height:1.15em;
  fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  flex:none;
}
.ico--lg{ width:2rem; height:2rem; stroke-width:1.1; }
.ico--fill{ fill:currentColor; stroke:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2rem;
  border:1px solid transparent;
  border-radius:100px;
  font-family:var(--sans);
  font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ background:var(--grad-btn); color:#fff; box-shadow:var(--shadow-rose); }
.btn--primary:hover{ background:var(--grad-btn-h); box-shadow:0 18px 40px rgba(197,112,99,.34); }

.btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(3px); }
.btn--ghost:hover{ background:rgba(255,255,255,.18); border-color:#fff; }

.btn--outline{ background:transparent; color:var(--rose-600); border-color:var(--rose-200); }
.btn--outline:hover{ background:var(--rose-50); border-color:var(--rose-400); }

.btn--dark{ background:var(--ink); color:var(--ivory); }
.btn--dark:hover{ background:#000; }

.btn--sm{ padding:.7rem 1.3rem; font-size:.68rem; }

/* Pillola del telefono nell'intestazione (prima ospitava anche WhatsApp) */
.cta-pair{
  display:inline-flex; align-items:stretch;
  border-radius:100px; overflow:hidden;
  background:var(--grad-btn);
  box-shadow:var(--shadow-rose);
  flex:none;
}
.cta-pair__item{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.78rem 1.1rem;
  color:#fff; text-decoration:none;
  font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .3s var(--ease);
}
.cta-pair__item:hover{ background:rgba(255,255,255,.18); }
.cta-pair__item:focus-visible{ outline-offset:-4px; }
.cta-pair.nav__cta{ margin-right:0; }
.btn--lg{ padding:1.15rem 2.4rem; font-size:.8rem; }
.btn--block{ display:flex; width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rose-600); text-decoration:none;
  padding-bottom:.3rem;
  border-bottom:1px solid var(--rose-200);
  transition:gap .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover{ gap:.95rem; border-color:var(--rose-500); color:var(--rose-700); }

/* Contenitori immagine: se la foto manca resta una sfumatura rosa curata */
.media{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 90% at 20% 15%, var(--rose-100) 0%, transparent 60%),
    radial-gradient(100% 100% at 85% 85%, var(--clay) 0%, transparent 55%),
    linear-gradient(140deg, var(--rose-50) 0%, var(--rose-100) 100%);
  box-shadow:var(--shadow-sm);
}
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media__hint{
  position:absolute; inset:auto 0 0 0;
  padding:.85rem 1.1rem;
  font-size:.64rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); text-align:center; pointer-events:none;
}
.media img + .media__hint{ display:none; }

/* ============================== 4. HEADER ============================== */
.header{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(180deg, rgba(253,248,246,.96) 0%, rgba(249,234,229,.93) 100%);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--clay-deep);
  transition:box-shadow .4s var(--ease);
}
.header.is-stuck{ box-shadow:0 8px 34px rgba(133,68,58,.08); }

/* Il marchio resta incolonnato con il contenuto della pagina (colonna da 1200px),
   mentre menu e pillola Chiama arrivano fino al margine dello schermo.
   Il margine destro della pillola e lo stacco dal menu usano lo stesso valore,
   quindi restano identici a qualsiasi larghezza. */
.header .container{
  max-width:none;
  padding-left:calc((100% - min(100%, var(--maxw))) / 2 + var(--pad-x));
  padding-right:var(--cta-inset);
}

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  /* nessuno stacco fisso qui: lo spazio fra marchio, menu e pillola lo
     ripartiscono i margini automatici di .nav__list, in parti uguali */
  gap:0; min-height:var(--header-h);
}

.logo{ display:flex; align-items:center; gap:1rem; text-decoration:none; flex:none; }
.logo__mark{
  position:relative;
  display:grid; place-items:center;
  width:78px; height:78px;
  flex:none;
  transition:width .35s var(--ease), height .35s var(--ease);
}
/* Il logo e' un PNG circolare con sfondo trasparente: non serve alcun filtro,
   si appoggia pulito sia sull'avorio del sito sia sul fondo scuro del footer. */
.logo__mark img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
.logo__mark i{
  display:grid; place-items:center;
  width:100%; height:100%;
  border:1px solid var(--rose-200);
  border-radius:50%;
  background:var(--rose-50);
  font-family:var(--serif); font-style:normal;
  font-size:1.3rem; font-weight:500;
  color:var(--rose-500);
}
.header.is-stuck .logo__mark{ width:62px; height:62px; }

.logo__text{ display:flex; flex-direction:column; line-height:1.2; }
.logo__name{ font-family:var(--serif); font-size:1.45rem; font-weight:400; color:var(--ink); white-space:nowrap; }
.logo__name em{ color:var(--rose-500); font-style:italic; }
.logo__sub{
  font-size:.58rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:.3rem; white-space:nowrap;
}

/* La pillola Chiama e' staccata dal menu e dal bordo della stessa
   misura: cosi' resta centrata fra l'ultima voce e il margine destro. */
.nav{ display:flex; align-items:center; flex:1; }
/* i margini automatici dividono in parti uguali lo spazio libero: il menu resta
   a meta' strada fra il marchio e la pillola, stesso stacco di qua e di la' */
.nav__list{
  display:flex; align-items:center; gap:clamp(.8rem, 1.5vw, 1.35rem);
  flex:none; margin-inline:auto;
}
.nav__list a{
  position:relative;
  font-size:.82rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  white-space:nowrap;
  padding-block:.4rem;
  transition:color .3s var(--ease);
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--grad-btn);
  transition:right .4s var(--ease);
}
.nav__list a:hover{ color:var(--rose-600); }
.nav__list a:hover::after{ right:0; }

.burger{
  display:none;
  width:46px; height:46px;
  background:none; border:1px solid var(--rose-200); border-radius:50%;
  cursor:pointer; padding:0; place-items:center; gap:5px; flex-direction:column;
}
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); transition:transform .35s var(--ease), opacity .25s var(--ease); }
.burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ======================= 5. HERO / VALORI / CHI SIAMO ======================= */
.hero{
  position:relative;
  display:flex; align-items:center;
  min-height:clamp(560px, 84vh, 850px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(150deg, var(--rose-600) 0%, var(--rose-400) 50%, var(--rose-200) 100%);
}
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Lo sfondo di apertura e' un acquerello rosa con venature oro: non ha un
   soggetto da tenere in quadro, quindi si centra e basta a ogni larghezza.
   Il file e' gia' sfocato (sfocatura gaussiana 7px sull'originale da 1672px):
   a fuoco, venature e nuvole disturbavano la lettura del titolo. La versione
   nitida e' in "stefania-estetista-immagini-sostituite", fuori dal sito. */
.hero--light .hero__media{
  background:#FDEFED;   /* tono medio dell'immagine: niente stacco mentre carica */
}
.hero--light .hero__media img{ object-position:50% 50%; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(52,25,20,.86) 0%, rgba(84,41,33,.66) 42%, rgba(150,80,66,.3) 100%),
    linear-gradient(180deg, rgba(52,25,20,.4) 0%, transparent 32%, rgba(52,25,20,.38) 100%);
}

/* Sopra l'acquerello, un velo avorio dietro il testo: calma le macchie rosa
   dove passano sotto le scritte e si spegne verso destra, dove l'acquerello
   resta pieno. Le tappe del velo seguono la colonna del testo (larga al
   massimo 1200px e centrata), non lo schermo: cosi' sui monitor larghi il
   testo resta coperto anche se si sposta verso il centro.
   In basso l'immagine sfuma nel rosa chiaro della fascia successiva. */
.hero--light .hero__veil{
  --text-left:calc((100% - min(100%, var(--maxw))) / 2);
  background:
    linear-gradient(90deg,
      rgba(253,248,246,.80) 0%,
      rgba(253,248,246,.74) calc(var(--text-left) + 640px),
      rgba(253,248,246,.34) calc(var(--text-left) + 960px),
      rgba(253,248,246,0)   calc(var(--text-left) + 1200px)),
    linear-gradient(180deg, rgba(253,248,246,.22) 0%, rgba(253,248,246,0) 20%,
                            rgba(253,247,245,0) 74%, rgba(253,247,245,.48) 100%);
}
/* Grana fine, ferma, a scala di schermo. L'immagine e' piu' piccola dei
   monitor grandi e ingrandita si ammorbidisce: la grana le restituisce
   consistenza e lega immagine e velature in un'unica superficie, come una stampa. */
.hero--light::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light; opacity:.32;
}
.hero--light .hero__inner{ color:var(--ink); }
/* titolo un gradino piu' pieno (500 invece di 400): il Bodoni ha aste
   finissime che sull'acquerello si perdevano */
.hero--light .hero__title{ color:var(--ink); font-weight:500; text-shadow:0 1px 26px rgba(253,248,246,.9); }
/* su fondo piu' carico il grigio caldo non basta piu': testo pieno, e peso
   normale invece di "light" per la stessa ragione del titolo */
.hero--light .hero__text{ color:var(--ink); font-weight:400; }
/* stessa ragione per la sopra-scritta: il rosa dell'accento su questo fondo
   avrebbe un contrasto di 2:1, illeggibile a quel corpo */
.hero--light .eyebrow{ color:#6F372E; }
.hero--light .btn--outline{
  background:rgba(253,248,246,.78); border-color:var(--rose-300); color:var(--rose-700);
  backdrop-filter:blur(3px);
}
.hero--light .btn--outline:hover{ background:var(--ivory); border-color:var(--rose-500); }

.hero__inner{ position:relative; padding-block:clamp(5rem, 12vh, 8rem); color:#fff; }
.hero__title{
  font-size:clamp(3rem, 7.6vw, 5.8rem);
  font-weight:400; line-height:1.02;
  color:#fff; max-width:14ch;
  text-shadow:0 2px 30px rgba(40,18,14,.3);
}
.hero__text{
  margin:1.9rem 0 2.6rem; max-width:36rem;
  font-size:clamp(1rem, 1.35vw, 1.1rem); line-height:1.85;
  color:rgba(255,255,255,.94); font-weight:300;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__note{
  margin-top:2.2rem;
  font-size:.68rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.strip{
  background:linear-gradient(180deg, var(--rose-50) 0%, var(--rose-100) 100%);
  padding-block:clamp(2.2rem, 3.6vw, 3.4rem);
  border-bottom:1px solid var(--clay-deep);
}
.strip__item + .strip__item{ position:relative; }
@media (min-width: 760px){
  .strip__item + .strip__item::before{
    content:""; position:absolute; left:calc(-1 * clamp(1rem, 2vw, 1.75rem)); top:10%;
    width:1px; height:80%;
    background:linear-gradient(180deg, transparent, var(--rose-300), transparent);
  }
}
.strip__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:clamp(1.6rem, 3vw, 2.8rem); }
.strip__item{ text-align:center; padding-inline:.5rem; }
.strip__item .ico{ color:var(--rose-500); margin-bottom:.7rem; }
.strip__item h3{ font-size:1.35rem; font-weight:400; margin-bottom:.45rem; }
.strip__item p{ font-size:.9rem; line-height:1.65; }

.about{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(1.8rem, 3.8vw, 3.4rem); align-items:center; }
.about__media{ position:relative; }
/* La foto della squadra e' verticale e va mostrata per intero: il riquadro ha
   le stesse proporzioni del file (3/4), quindi non si taglia niente, ne' il
   quadro alle spalle ne' le ragazze sedute davanti. */
.media--portrait{ aspect-ratio:3/4; }
.media--portrait img{ object-position:50% 50%; }
.about__body .h2{ font-size:clamp(1.75rem, 3vw, 2.4rem); margin-bottom:.9rem; }
.about__body .lead{ font-size:.98rem; }
.about__body .link-arrow{ margin-top:0; }

.ticks{ margin:1.2rem 0; display:grid; gap:.5rem; }
.ticks li{ position:relative; padding-left:2rem; font-size:.95rem; color:var(--ink-soft); font-weight:300; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:10px; height:10px; border-radius:50%;
  background:var(--grad-btn); opacity:.9;
}

/* =========================== 6. TRATTAMENTI =========================== */
/* la fascia dei trattamenti e' la piu' lunga della pagina: testata, schede e
   riquadri sono tutti stretti di un gradino rispetto al resto del sito */
#trattamenti{ padding-block:clamp(2.2rem, 4vw, 3.6rem); }
#trattamenti .section__head{ max-width:52rem; margin-bottom:clamp(1.3rem, 2.2vw, 1.9rem); }
/* il titolo di questa fascia sta su una riga sola: e' la sezione piu' lunga
   della pagina e ogni riga di troppo si moltiplica per quattro schede */
#trattamenti .h2{ font-size:clamp(1.8rem, 3.1vw, 2.5rem); }
#trattamenti .section__intro{ margin-top:.9rem; font-size:1rem; }

.tabs__nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem;
  margin-bottom:clamp(1.2rem, 2.1vw, 1.75rem);
}
.tabs__btn{
  background:var(--surface);
  border:1px solid var(--clay-deep);
  border-radius:100px;
  padding:.6rem 1.25rem;
  font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); cursor:pointer;
  transition:all .35s var(--ease);
}
.tabs__btn:hover{ border-color:var(--rose-300); color:var(--rose-600); background:var(--rose-50); }
.tabs__btn.is-active{ background:var(--grad-btn); border-color:transparent; color:#fff; box-shadow:var(--shadow-rose); }

.tabs__panel[hidden]{ display:none; }
.tabs__panel{ animation:fadeUp .55s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* Testata di ogni scheda: foto + presentazione */
.panel-lead{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.1rem, 2vw, 1.8rem);
  align-items:center;
  margin-bottom:clamp(1.2rem, 2.1vw, 1.8rem);
  padding:clamp(.85rem, 1.3vw, 1.1rem);
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg, var(--rose-100) 0%, var(--surface) 72%);
  border:1px solid var(--clay-deep);
}
.panel-figure{
  margin:0; overflow:hidden; border-radius:var(--radius);
  /* 4:3 e non 16:9: le foto di Viso e di Mani sono verticali, e in una
     fascia cosi' bassa restavano tagliati visi e unghie */
  aspect-ratio:4/3;
  background:linear-gradient(140deg, var(--rose-100), var(--clay));
}
.panel-figure img{ width:100%; height:100%; object-fit:cover; }
.panel-title{ font-size:clamp(1.45rem, 2.1vw, 1.8rem); font-weight:400; margin-bottom:.5rem; }
.panel-copy p{ font-size:.92rem; line-height:1.7; margin:0; }
/* rimando da una scheda a una sezione della pagina (es. Benessere -> Ritualis) */
.panel-link{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.75rem; padding-bottom:.15rem;
  font-size:.84rem; font-weight:500; color:var(--rose-600);
  text-decoration:none; border-bottom:1px solid var(--rose-200);
  transition:gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.panel-link:hover{ gap:.75rem; color:var(--rose-700); border-color:var(--rose-500); }

.cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1.25rem, 2.2vw, 1.9rem);
}
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--clay-deep);
  border-radius:var(--radius);
  padding:clamp(1rem, 1.4vw, 1.35rem);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* La sfumatura rosa vive su uno strato separato: appare solo al passaggio del cursore */
.card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--grad-card-hover);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.card > *{ position:relative; z-index:1; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--rose-200); }
.card:hover::before{ opacity:1; }

.card__icon{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(140deg, var(--rose-200), var(--rose-100));
  color:var(--rose-600);
  margin-bottom:.75rem;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.card:hover .card__icon{ background:var(--grad-btn); color:#fff; }
.card__icon .ico{ width:1.15rem; height:1.15rem; }
.card__title{ font-size:1.1rem; font-weight:500; margin-bottom:.45rem; }
.card p{ font-size:.86rem; line-height:1.6; }
.card__list{ margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--clay-deep); display:grid; gap:.32rem; }
.card:hover .card__list{ border-color:var(--rose-200); }
.card__list li{ position:relative; padding-left:1.3rem; font-size:.78rem; color:var(--ink-mute); font-weight:300; }
.card__list li::before{ content:""; position:absolute; left:0; top:.66em; width:7px; height:1.5px; background:var(--rose-400); }

.note-caption{
  max-width:44rem;
  margin:clamp(1.3rem,2.2vw,1.9rem) auto 0;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  font-style:italic; font-weight:400; line-height:1.55;
  color:var(--rose-700);
}
.note-caption::after{
  content:""; display:block; width:120px; height:1px;
  margin:1.1rem auto 0; background:var(--hairline);
}
/* ================= 6b. FACE CODE (novita' Eva Nueva) ================= */
.fc-feature{
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(1.75rem, 4vw, 3.5rem);
  align-items:center;
}

.fc-quote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem, 2.1vw, 1.6rem); line-height:1.35;
  color:var(--rose-700);
  margin:0 0 1rem;
}
.fc-copy > p{ font-size:.98rem; }

.fc-points{ display:grid; gap:1rem; margin-top:1.5rem; }
.fc-points li{ display:flex; gap:1.1rem; align-items:flex-start; }
.fc-points__n{
  font-family:var(--serif); font-size:1.05rem; line-height:1;
  color:var(--rose-500); flex:none;
  padding-top:.25rem;
  min-width:2.1rem;
  border-top:2px solid var(--rose-300);
}
.fc-points strong{ display:block; font-weight:500; color:var(--ink); margin-bottom:.2rem; }
.fc-points p{ margin:0; font-size:.9rem; line-height:1.65; }

/* Carosello (Face Code e Ritualis): un'immagine alla volta, si sfoglia col
   dito, con le frecce o con i pallini. Nessuna rotazione automatica: si
   muove solo se lo si muove. */
.carousel{ min-width:0; }
.carousel__track{
  display:flex;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  background:linear-gradient(150deg, var(--rose-100), var(--clay));
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track li{ flex:0 0 100%; scroll-snap-align:start; }
.carousel__track img{ width:100%; height:auto; display:block; }

.carousel__bar{
  display:flex; align-items:center; justify-content:center;
  gap:.9rem; margin-top:1rem;
}
.carousel__arrow{
  display:grid; place-items:center;
  width:40px; height:40px; flex:none;
  border:1px solid var(--clay-deep); border-radius:50%;
  background:var(--surface); color:var(--rose-600);
  cursor:pointer; padding:0;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.carousel__arrow:hover{ border-color:var(--rose-400); background:var(--rose-50); color:var(--rose-700); }
.carousel__arrow .ico{ width:1.15rem; height:1.15rem; }
.carousel__arrow[aria-disabled="true"]{ opacity:.35; cursor:default; }
.carousel__arrow[aria-disabled="true"]:hover{ border-color:var(--clay-deep); background:var(--surface); color:var(--rose-600); }
/* il pulsante e' piu' grande del pallino, cosi' si prende bene anche col dito */
.carousel__dots{ display:flex; }
.carousel__dots button{
  position:relative;
  width:22px; height:28px; padding:0;
  border:0; background:none; cursor:pointer;
  transition:width .35s var(--ease);
}
.carousel__dots button::before{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:8px; height:8px; border-radius:100px;
  background:var(--rose-300);
  transition:width .35s var(--ease), background .35s var(--ease);
}
.carousel__dots button[aria-current="true"]{ width:36px; }
.carousel__dots button[aria-current="true"]::before{ width:24px; background:var(--rose-600); }

/* ================= 6c. BIOMICRONEEDLING (sezione scura) ================= */
/* La fascia non e' piu' scura: e' rosa cipria, un gradino piu' pieno delle altre
   fasce rosa. Resta riconoscibile come sezione a se' senza staccarsi dal resto
   del sito, e il testo torna scuro come ovunque. */
.section--deep{
  background:
    radial-gradient(64% 52% at 88% 4%, rgba(197,112,99,.16) 0%, transparent 64%),
    linear-gradient(155deg, var(--band-1) 0%, var(--band-2) 54%, var(--band-3) 100%);
  color:var(--ink);
}
.section--deep::before{ display:none; }
.section--deep .h2{ color:var(--ink); }
.section--deep p{ color:#4C3D38; }
.section--deep strong{ color:var(--ink); font-weight:500; }
.section--deep em{ color:var(--rose-700); font-style:italic; }
.section__head--deep .eyebrow{ color:var(--rose-700); }
.section__head--deep .eyebrow::before,
.section__head--deep .eyebrow::after{
  background:linear-gradient(90deg, rgba(133,68,58,.55), transparent);
}
.section__head--deep .eyebrow::before{ background:linear-gradient(270deg, rgba(133,68,58,.55), transparent); }

/* lo schema e' un'illustrazione di supporto: stretto e centrato, non a tutta pagina */
.bmn-diagram{
  max-width:720px;
  margin:0 auto clamp(1.6rem, 2.8vw, 2.4rem);
  padding:clamp(.7rem, 1.4vw, 1.1rem);
  border-radius:var(--radius-lg);
  border:1px solid rgba(133,68,58,.16);
  background:rgba(255,252,251,.45);
}
.bmn-svg{ display:block; width:100%; height:auto; }
.bmn-mark circle{ fill:var(--rose-600); }
.bmn-mark text{
  font-family:var(--sans); font-size:15px; font-weight:500;
  fill:#FDF8F6; text-anchor:middle;
}

.bmn-steps{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.4rem, 2.6vw, 2.25rem);
  margin:0 0 clamp(1.8rem, 3vw, 2.5rem);
}
/* Il filo parte dopo il numero invece di passarci sotto: cosi' non serve
   l'alone del colore di fondo, che su una sfumatura non combacia mai. */
.bmn-steps li{ position:relative; padding-top:1.4rem; }
.bmn-steps li::before{
  content:""; position:absolute; top:0; left:48px; right:0;
  height:1px; background:rgba(133,68,58,.22);
}
.bmn-steps__n{
  position:absolute; top:-1rem; left:0;
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--grad-btn); color:#fff;
  font-family:var(--serif); font-size:1rem;
}
.bmn-steps h3{
  margin:.9rem 0 .5rem;
  font-size:1.18rem; font-weight:400; color:var(--ink);
}
.bmn-steps p{ margin:0; font-size:.88rem; line-height:1.65; }

/* cosa tratta: etichette in riga, centrate */
.bmn-targets{ text-align:center; }
.bmn-targets h3{
  margin:0 0 .9rem;
  font-family:var(--sans);
  font-size:.68rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rose-700);
}
.bmn-targets ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem .6rem; }
.bmn-targets li{
  padding:.45rem 1rem;
  border-radius:100px;
  border:1px solid rgba(133,68,58,.16);
  background:rgba(255,252,251,.6);
  font-size:.88rem; line-height:1.4; font-weight:300;
  color:#4C3D38;
}

.bmn-note{
  margin:clamp(1.5rem,2.6vw,2.2rem) 0 0;
  text-align:center;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1rem, 1.5vw, 1.18rem); line-height:1.55;
  color:var(--rose-700);
}

/* ================= 6d. RITUALIS (novita' massaggi Eva Nueva) ================= */
/* Stesso impianto di Face Code, specchiato: testo a sinistra, immagini a
   destra. Nel codice il carosello viene prima, cosi' su smartphone resta sopra
   il testo come in Face Code. Le stelline a quattro punte riprendono la grafica
   della campagna Eva Nueva. */
/* righe dell'introduzione di lunghezza simile: niente parola sola a capo */
#ritualis .section__intro{ text-wrap:balance; }
.fc-feature--flip{ grid-template-columns:minmax(0,1fr) minmax(0,380px); }
.fc-feature--flip .carousel{ order:2; }

.rt-pillars{ display:grid; gap:.9rem; margin:1.5rem 0 1.7rem; }
.rt-pillars li{ display:flex; gap:1rem; align-items:flex-start; }
.rt-pillars__ico{
  display:grid; place-items:center;
  width:36px; height:36px; flex:none; border-radius:50%;
  /* la sezione e' su fondo rosa: cerchio chiaro con bordo, se no sparisce */
  background:var(--surface);
  border:1px solid var(--rose-200);
  color:var(--rose-600);
}
.rt-pillars__ico .ico{ width:.95rem; height:.95rem; }
.rt-pillars strong{
  display:block; margin-bottom:.1rem;
  font-size:.68rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rose-700);
}
.rt-pillars p{ margin:0; font-size:.9rem; line-height:1.6; }

/* ================= 6e. FOREVER (prodotto in vendita in salone) ================= */
/* Fascia compatta: foto del prodotto a sinistra, testo e consulenza a destra.
   Sotto la foto, nello spazio che il testo lasciava libero, il riquadro
   sull'acqua: si allinea alla consulenza, che sta sulla stessa riga. */
.product{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-areas:
    "fig   body"
    "water cta";
  column-gap:clamp(1.75rem, 4.5vw, 3.75rem);
  row-gap:1.4rem;
  align-items:center;
}
.product__figure{ grid-area:fig; }
.product__body{ grid-area:body; }
.product__body > :last-child{ margin-bottom:0; }
.product__cta{ grid-area:cta; align-self:start; }
.product__cta .product__offer{ margin-top:0; }
.product__figure{
  margin:0; overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--clay-deep);
  background:#FDF6F8;   /* fondo della foto: niente stacco mentre carica */
  box-shadow:var(--shadow-sm);
}
.product__figure img{ width:100%; height:auto; display:block; }
.product__body .h3{ margin-bottom:.7rem; }
.product__quote{
  margin:0 0 1rem;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem); line-height:1.45;
  color:var(--rose-700);
}
.product__offer{
  margin:1.3rem 0 1.4rem;
  padding:.95rem 1.2rem;
  border-left:3px solid var(--rose-400);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--rose-50);
  font-size:.9rem; line-height:1.65;
}

/* Riquadro "Non tutta l'acqua e' uguale" (testo fornito dalla titolare). */
.water{
  grid-area:water; align-self:stretch;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "ico title"
    "ico text";
  column-gap:1rem; align-content:start;
  padding:1.15rem 1.3rem;
  border:1px solid var(--clay-deep);
  border-radius:var(--radius);
  background:linear-gradient(140deg, var(--surface) 0%, var(--rose-50) 100%);
}
.water__ico{
  grid-area:ico; align-self:start;
  display:grid; place-items:center;
  width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--rose-100); color:var(--rose-500);
}
.water__ico .ico{ width:1.45rem; height:1.45rem; stroke-width:1.5; }
.water__title{
  grid-area:title;
  margin:.15rem 0 .4rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem, 1.6vw, 1.3rem); line-height:1.3;
  color:var(--ink);
}
.water p{ grid-area:text; margin:0; font-size:.9rem; line-height:1.65; }

/* =========================== 7. GIFT CARD ===========================
   Sezione esplicativa: la card e' disegnata in CSS (niente foto), l'importo
   resta uno spazio vuoto perche' in negozio viene scritto a mano.
   Nessun carosello, nessuna animazione, nessun elemento cliccabile. */
.gift-layout{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}

.giftcard-wrap{ margin:0; }
.giftcard{
  position:relative;
  aspect-ratio:1.62/1;
  display:flex; flex-direction:column;
  padding:clamp(1.15rem, 2.5vw, 2rem);
  border-radius:18px;
  background:
    radial-gradient(85% 130% at 102% -10%, var(--rose-200) 0%, transparent 58%),
    radial-gradient(70% 110% at -8% 110%, var(--rose-100) 0%, transparent 60%),
    linear-gradient(150deg, #FFFCFB 0%, var(--rose-50) 100%);
  border:1px solid var(--rose-300);
  box-shadow:0 28px 62px rgba(133,68,58,.22);
  overflow:hidden;
}
/* cornice interna sottile, come su una card stampata */
.giftcard::after{
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(227,181,170,.55);
  border-radius:11px; pointer-events:none;
}

.giftcard__head{ display:flex; align-items:center; gap:.7rem; }
.giftcard__logo{
  width:clamp(38px, 7%, 54px); height:auto; aspect-ratio:1;
  object-fit:contain; flex:none;
}
.giftcard__brand{ display:flex; flex-direction:column; line-height:1.15; }
.giftcard__name{ font-family:var(--serif); font-size:clamp(.95rem,1.55vw,1.2rem); color:var(--ink); }
.giftcard__name em{ color:var(--rose-500); font-style:italic; }
.giftcard__sub{
  font-size:clamp(.42rem,.62vw,.55rem); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:.28rem;
}

/* dall'alto: marchio, poi la scritta; lo spazio vuoto sta in mezzo e l'importo
   scende in fondo, appena sopra i dati del centro */
.giftcard__label{
  margin:clamp(1.15rem, 2.6vw, 1.9rem) 0 .1rem;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.45rem, 3.2vw, 2.1rem); line-height:1;
  color:var(--rose-600);
}

.giftcard__amount{ display:flex; align-items:flex-end; gap:.6rem; margin-top:auto; }
.giftcard__cur{
  font-family:var(--serif); font-size:clamp(1.2rem,2.4vw,1.75rem);
  color:var(--ink); line-height:1;
}
/* lo spazio lasciato libero per l'importo scritto a penna */
.giftcard__rule{
  flex:1; height:0; margin-bottom:.15rem;
  border-bottom:1.5px dashed var(--rose-400);
}
.giftcard__hint{
  margin:.5rem 0 0;
  font-size:clamp(.44rem,.66vw,.58rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--rose-600); font-weight:400;
}

.giftcard__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem;
  margin-top:clamp(.9rem,2vw,1.5rem); padding-top:clamp(.6rem,1.4vw,1rem);
  border-top:1px solid rgba(227,181,170,.6);
  font-size:clamp(.44rem,.66vw,.6rem); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}

.gift-explain__title{
  font-size:clamp(1.4rem, 2.3vw, 1.75rem); font-weight:400;
  margin-bottom:1.4rem;
}
.gift-points{ display:grid; gap:1.1rem; margin:0 0 1.5rem; }
.gift-points li{ display:flex; gap:1.05rem; align-items:flex-start; }
.gift-points__num{
  display:grid; place-items:center;
  width:38px; height:38px; flex:none; border-radius:50%;
  background:linear-gradient(140deg, var(--rose-200), var(--rose-100));
  border:1px solid var(--rose-300);
  font-family:var(--serif); font-size:1.05rem; color:var(--rose-700);
}
.gift-points p{ margin:0; font-size:.92rem; line-height:1.65; }

.gift-note{
  margin:0;
  padding:.95rem 1.2rem;
  border-left:3px solid var(--rose-400);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(253,247,245,.75);
  font-size:.86rem; line-height:1.65; color:var(--ink-soft);
}

/* ======================== 8. CONTATTI E MAPPA ========================
   Blocco compatto: un solo indirizzo, mappa gia' visibile (immagine sul sito). */
.contact-card{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--clay-deep);
  background:linear-gradient(135deg, var(--surface) 0%, var(--rose-100) 100%);
  box-shadow:var(--shadow-sm);
}
.contact-card__body{ padding:clamp(1.6rem, 3vw, 2.6rem); }

.contact-card__addr{
  margin:0 0 .7rem;
  font-family:var(--serif); font-size:clamp(1.6rem, 2.9vw, 2.15rem);
  line-height:1.2; color:var(--ink); font-weight:400;
  letter-spacing:-.005em;
}

.hours{ display:grid; gap:.35rem; margin:1.4rem 0 1.6rem; max-width:24rem; }
.hours li{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.88rem; color:var(--ink-soft); font-weight:300;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--clay-deep);
}
.hours__closed{ color:var(--ink-mute); font-style:italic; }

.kind-note{
  display:inline-block;
  margin:0 0 .4rem;
  padding:.35rem .9rem;
  border-radius:100px;
  background:var(--rose-100);
  border:1px solid var(--rose-200);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rose-700); font-weight:500;
}

/* Mappa: immagine ospitata sul sito, nessuna connessione a Google finche'
   non si clicca. Il bordo verso il testo sfuma nel fondo della scheda. */
.map{
  position:relative; min-height:300px; overflow:hidden;
  background:#FBF1EE;   /* stesso colore del fondo della mappa */
}
.map__link{ position:absolute; inset:0; display:block; color:inherit; text-decoration:none; }
.map__link:focus-visible{ outline:2px solid var(--rose-500); outline-offset:-5px; }
.map__img{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 50%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 13%);
          mask-image:linear-gradient(90deg, transparent 0, #000 13%);
  transition:transform 1.2s var(--ease);
}
.map__link:hover .map__img{ transform:scale(1.025); }

/* segnaposto: la punta sta esattamente sul centro (50%/50%) */
.map__pin{ position:absolute; left:50%; top:50%; width:0; height:0; }
.map__pin::before{   /* alone fermo, nessuna pulsazione */
  content:""; position:absolute; left:-48px; top:-48px; width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle, rgba(197,112,99,.30) 0%, rgba(197,112,99,.12) 42%, rgba(197,112,99,0) 70%);
}
.map__pin::after{    /* punto esatto */
  content:""; position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%;
  background:var(--rose-500); border:2px solid #fff; box-shadow:0 1px 4px rgba(133,68,58,.35);
}
.map__dot{
  position:absolute; left:-28px; bottom:13px;
  width:56px; height:56px; border-radius:50%; overflow:hidden;
  background:#fff; border:3px solid var(--rose-500);
  box-shadow:0 10px 22px rgba(133,68,58,.26);
}
.map__dot img{ width:100%; height:100%; object-fit:cover; display:block; }
.map__stem{
  position:absolute; left:-1px; bottom:4px; width:2px; height:11px;
  background:var(--rose-500);
}
.map__tag{
  position:absolute; left:36px; bottom:27px; white-space:nowrap;
  padding:.38rem .85rem .42rem;
  border-radius:100px; background:rgba(255,252,251,.95);
  border:1px solid var(--rose-200); box-shadow:var(--shadow-sm);
  font-family:var(--serif); font-size:1rem; line-height:1.2; color:var(--ink);
}
.map__tag em{ color:var(--rose-500); font-style:italic; }
.map__open{
  position:absolute; top:12px; right:12px;
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:rgba(255,252,251,.94); border:1px solid var(--rose-200);
  color:var(--rose-600); box-shadow:var(--shadow-xs);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.map__link:hover .map__open{ background:var(--rose-500); border-color:var(--rose-500); color:#fff; }
.map__credit{
  position:absolute; right:8px; bottom:6px; z-index:1;
  padding:.05rem .4rem; border-radius:4px;
  background:rgba(251,241,238,.85);
  font-size:.62rem; color:var(--ink-mute);
}
.map__credit a{ color:inherit; }

/* ===================== 9. FOOTER E BARRA CHIAMATA ===================== */
.footer{
  position:relative;
  background:linear-gradient(160deg, #3A2B27 0%, #2D2422 58%, #46332E 100%);
  color:rgba(253,248,246,.76);
  padding-top:clamp(3.5rem, 6vw, 5.5rem);
  font-size:.9rem;
}
.footer::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--grad-btn);
}
.footer__grid{
  display:grid; grid-template-columns:1.5fr repeat(3, 1fr);
  gap:clamp(2rem, 4vw, 3rem);
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
.footer__brand{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.footer .logo__mark--light{
  width:92px; height:92px;
  border-radius:50%;
  background:var(--rose-50);
  box-shadow:0 0 0 1px rgba(227,181,170,.35);
  margin-bottom:1.1rem;
}
.footer .logo__mark--light img{ inset:6%; width:88%; height:88%; }
.footer__name{
  font-family:var(--serif); font-weight:400; color:var(--ivory);
  font-size:clamp(1.15rem, 1.5vw, 1.35rem); line-height:1.3;
  margin:0 0 .6rem;
}
.footer__claim{
  color:rgba(253,248,246,.55); font-size:.85rem; font-weight:300;
  line-height:1.6; margin:0;
}
.footer__col h4{
  font-family:var(--sans);
  font-size:.66rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rose-200); margin-bottom:1.1rem;
}
.footer__col ul{ display:grid; gap:.65rem; }
.footer__col li{ line-height:1.6; font-weight:300; }
.footer__col a{ text-decoration:none; color:rgba(253,251,249,.74); transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--rose-200); }
.footer__social{ display:inline-flex; align-items:center; gap:.55rem; }
.footer__social .ico{ width:1.05rem; height:1.05rem; color:var(--rose-200); }

.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  padding-block:1.6rem;
  border-top:1px solid rgba(253,251,249,.12);
  font-size:.74rem; color:rgba(253,251,249,.5);
}
.footer__bottom p{ margin:0; color:inherit; font-weight:300; }
.todo{ color:var(--rose-200); }
.footer__credits{ font-style:italic; }

/* Firma dell'agenzia: un gradino sotto il pie' di pagina, piu' piccola e piu'
   spenta del copyright, cosi' c'e' ma non ruba l'attenzione. */
.footer__signature{ padding-bottom:1.3rem; text-align:center; }
.footer__signature p{
  margin:0;
  font-size:.66rem; font-weight:300; letter-spacing:.06em;
  color:rgba(253,251,249,.42);
}
.footer__signature a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(253,251,249,.2);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer__signature a:hover{ color:var(--rose-200); border-color:var(--rose-200); }

/* Barra fissa su smartphone: il pulsante Chiama dell'intestazione, che li'
   finisce dentro il menu a panino e quindi non si vedrebbe. */
.callbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--grad-btn);
  box-shadow:0 -6px 24px rgba(133,68,58,.2);
}
/* La barra entra dal basso solo quando i pulsanti della hero sono usciti
   dallo schermo: all'apertura "Chiama per prenotare" c'e' gia' nella hero, e
   due pulsanti uguali uno sopra l'altro erano un doppione. Senza JavaScript
   la barra resta sempre visibile. visibility la toglie anche dalla tastiera
   mentre e' nascosta. */
.js .callbar{
  transform:translateY(100%); visibility:hidden;
  transition:transform .35s var(--ease), visibility 0s linear .35s;
}
.js .callbar.is-visible{
  transform:none; visibility:visible;
  transition:transform .35s var(--ease), visibility 0s;
}
.callbar__item{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1rem .5rem;
  color:#fff; text-decoration:none;
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}

/* ==================== 10. ANIMAZIONI E RESPONSIVE ==================== */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }

section[id]{ scroll-margin-top:calc(var(--header-h) + 8px); }

@media (max-width: 1150px){
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1340px) and (min-width: 901px){
  :root{ --cta-inset:clamp(1rem, 2vw, 2rem); }
  .nav__list{ gap:clamp(.7rem, 1.4vw, 1.2rem); }
  .nav__list a{ font-size:.78rem; letter-spacing:.1em; }
}

@media (max-width: 1150px) and (min-width: 901px){
  .logo__sub{ display:none; }
  .logo__name{ font-size:1.22rem; }
  .logo{ gap:.7rem; }
  .logo__mark{ width:64px; height:64px; }
  .header.is-stuck .logo__mark{ width:54px; height:54px; }
  .nav__list a{ font-size:.75rem; letter-spacing:.1em; }
  .cta-pair__item{ padding:.62rem .95rem; font-size:.66rem; letter-spacing:.12em; }
}

/* ultimo tratto prima del menu a scomparsa: tutto si stringe quel tanto che
   basta perche' la pillola non tocchi il bordo destro */
@media (max-width: 1010px) and (min-width: 901px){
  .logo{ gap:.6rem; }
  .logo__mark{ width:56px; height:56px; }
  .header.is-stuck .logo__mark{ width:50px; height:50px; }
  .logo__name{ font-size:1.1rem; }
  .nav__list{ gap:clamp(.6rem, 1.1vw, .9rem); }
  .nav__list a{ font-size:.72rem; letter-spacing:.08em; }
  .cta-pair__item{ padding:.6rem .8rem; font-size:.62rem; letter-spacing:.1em; }
}

@media (max-width: 1024px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  /* minmax(0,1fr) + min-height:0 evitano che il rapporto 16/9 della mappa
     gonfi la colonna oltre la larghezza dello schermo */
  .contact-card{ grid-template-columns:minmax(0,1fr); }
  .map{ min-height:0; aspect-ratio:16/10; }
  /* mappa sotto il testo: la sfumatura passa sul bordo alto */
  .map__img{
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%);
            mask-image:linear-gradient(180deg, transparent 0, #000 14%);
  }
  .gift-layout{ grid-template-columns:minmax(0,1fr); }
  .giftcard-wrap{ max-width:540px; margin-inline:auto; }
}

@media (max-width: 980px){
  .fc-feature{ grid-template-columns:minmax(0,1fr); }
  /* su una colonna il carosello torna sopra il testo, anche in Ritualis */
  .carousel, .fc-feature--flip .carousel{ order:0; width:100%; max-width:380px; margin-inline:auto; }
  .bmn-steps{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
}

@media (max-width: 900px){
  /* Su schermo stretto il testo occupa tutta la larghezza: la velatura
     scende dall'alto su tutta la colonna invece di stare solo a sinistra. */
  .hero--light .hero__veil{
    background:linear-gradient(180deg,
      rgba(253,248,246,.74) 0%,
      rgba(253,248,246,.66) 42%,
      rgba(253,248,246,.54) 76%,
      rgba(253,247,245,.62) 100%);
  }

  /* BUG risolto: "backdrop-filter" sull'intestazione la rende il riferimento
     per i figli in position:fixed, quindi il menu a scomparsa restava
     schiacciato dentro la barra alta 74px invece di coprire lo schermo.
     Su smartphone il fondo diventa pieno e il menu funziona. */
  .header{ backdrop-filter:none; background:linear-gradient(180deg,#FDF8F6 0%,#F9EAE5 100%); }

  .about{ grid-template-columns:minmax(0,1fr); }
  /* width:100% serve: con i soli margini automatici la colonna si stringe sul
     contenuto, e la foto (posizionata in assoluto) non ne ha, quindi spariva */
  .about__media{ width:100%; max-width:400px; margin-inline:auto; }
  .panel-lead{ grid-template-columns:minmax(0,1fr); }
  .product{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"fig" "body" "water" "cta";
  }
  .product__figure{ width:100%; max-width:520px; margin-inline:auto; margin-bottom:.6rem; }

  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto;
    width:min(86vw, 360px);
    flex-direction:column; align-items:stretch; justify-content:center;
    gap:2.5rem; padding:2.5rem;
    background:linear-gradient(160deg, #fff 0%, var(--rose-50) 100%);
    border-left:1px solid var(--clay);
    box-shadow:-20px 0 60px rgba(133,68,58,.12);
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; margin-inline:0; }
  .nav__list li + li{ border-top:1px solid var(--clay); }
  .nav__list a{ display:block; padding:1.1rem 0; font-size:.92rem; letter-spacing:.14em; }
  :root{ --cta-inset:0px; }
  /* nel menu a scomparsa il gutter dell'intestazione torna quello di pagina */
  .header .container{ padding-inline:var(--pad-x); }
  .cta-pair.nav__cta{ width:100%; margin-right:0; }
  .cta-pair.nav__cta .cta-pair__item{ flex:1; padding-block:.95rem; }
}

@media (max-width: 720px){
  /* sullo schermo stretto lo schema si riduce a una striscia: i numerini
     diventerebbero illeggibili, e l'elenco qui sotto li ripete gia'. */
  .bmn-mark, .bmn-leads{ display:none; }
}

@media (max-width: 620px){
  .cards{ grid-template-columns:minmax(0,1fr); }
  /* segnaposto piu' piccolo: la mappa e' larga ~350 px */
  .map__dot{ left:-23px; width:46px; height:46px; border-width:2px; }
  .map__tag{ left:29px; bottom:22px; font-size:.86rem; padding:.3rem .7rem .34rem; }
  .map__open{ top:9px; right:9px; width:34px; height:34px; }
  /* riquadro acqua: icona accanto al titolo, testo a tutta larghezza */
  .water{ grid-template-areas:"ico title" "text text"; column-gap:.8rem; padding:1rem 1.1rem; }
  .water__ico{ align-self:center; width:2.3rem; height:2.3rem; }
  .water__title{ margin:0; }
  .water p{ margin-top:.55rem; }
  .bmn-diagram{ padding:.7rem; }
  .fc-points__n{ min-width:1.8rem; }
}

@media (max-width: 700px){
  :root{ --header-h:74px; }
  body{ font-size:.98rem; }
  .logo__mark{ width:54px; height:54px; }
  .header.is-stuck .logo__mark{ width:50px; height:50px; }
  .logo__name{ font-size:1.15rem; }
  .logo__sub{ font-size:.52rem; letter-spacing:.2em; }

  .hero{ min-height:auto; }
  .hero__inner{ padding-block:5rem 6rem; }
  .hero__title{ max-width:100%; }
  .hero__actions .btn{ width:100%; }

  .btn--lg{ padding:1rem 1.4rem; font-size:.72rem; }
  .giftcard{ aspect-ratio:1.58/1; }
  .gift-points__num{ width:34px; height:34px; font-size:.95rem; }

  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; text-align:center; }

  .callbar{ display:flex; }
  body{ padding-bottom:60px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

@media print{
  .header,.callbar,.map{ display:none !important; }
  body{ background:#fff; }
}