/* ==========================================================================
   MASSBEN&FIT — foglio di stile unico del sito
   Layout: onde verde acqua e rosa cipria come nel banner di Dario,
   cornice oro con doppia freccia per i punti di richiamo, foglie di palma bianche.
   Per cambiare un colore basta modificare le variabili in ":root" qui sotto.
   ========================================================================== */

/* ---------- Font ospitati sul sito (nessuna richiesta a Google: niente cookie) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("font/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("font/cormorant-garamond-latin-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("font/figtree-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("font/figtree-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("font/josefin-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Colori e misure ---------- */
:root {
  /* palette del banner di Dario */
  --verde: #3a9e8a;            /* verde acqua scuro (banner, icone) */
  --verde-chiaro: #34bfae;     /* verde acqua luminoso (banner) */
  --verde-profondo: #23705f;   /* pulsanti e link: contrasto AA con il bianco */
  --verde-tenue: #e6f5f2;      /* fondo delle fasce chiare */
  --rosa: #f0cfc9;             /* rosa cipria (banner) */
  --rosa-tenue: #fbf0ed;       /* fondo delle fasce rosa */
  --rosa-scuro: #9b4f45;       /* icone su fondo rosa */
  --oro: #d9a93a;              /* cornice e frecce (solo decorazione) */
  --oro-testo: #8a6414;        /* oro leggibile per testi piccoli su fondo chiaro */
  --oro-chiaro: #f2d48c;       /* oro leggibile su fondo scuro */
  --inchiostro: #162624;       /* titoli e piè di pagina */
  --testo: #2c3d3a;            /* testo corrente */
  --testo-tenue: #566966;      /* didascalie */
  --testo-su-scuro: #c9d6d3;   /* testo nel piè di pagina */
  --carta: #fffcfa;            /* fondo pagina */
  --bianco: #ffffff;
  --whatsapp: #187a41;         /* verde WhatsApp scurito: 5,39:1 con il bianco (AA) */
  --whatsapp-scuro: #12633a;   /* passaggio del mouse: 7,31:1 con il bianco */
  --avviso: #fff3b0;           /* evidenziatore dei segnaposto */
  --avviso-bordo: #c79100;
  --avviso-testo: #4a3800;

  --font-titoli: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-testo: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-marchio: "Josefin Sans", "Century Gothic", "Futura", "Segoe UI", sans-serif;

  /* scala tipografica fluida */
  --t-piccolo: 0.875rem;
  --t-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);
  --t-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --t-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --t-h1: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);

  --spazio-sezione: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --larghezza: 72rem;
  --larghezza-testo: 40rem;
  --raggio: 14px;
  --ombra: 0 18px 40px -22px rgba(22, 38, 36, 0.35);
  --gutter-sx: max(16px, env(safe-area-inset-left, 0px));
  --gutter-dx: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* il focus e i link interni non finiscono sotto il pulsante WhatsApp fisso (WCAG 2.4.11) */
  scroll-padding-bottom: 5.5rem;
}
@media (min-width: 64em) {
  html {
    /* su computer l'intestazione resta fissa in alto: lo spazio sopra deve tenerne conto */
    scroll-padding-top: calc(5.5rem + env(safe-area-inset-top, 0px));
    scroll-padding-bottom: 0;
  }
}
body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: 1.7;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3 {
  font-family: var(--font-titoli);
  font-weight: 600;
  color: var(--inchiostro);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h1 em,
h2 em {
  font-style: italic;
  color: var(--verde-profondo);
}
p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
a {
  color: var(--verde-profondo);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--inchiostro);
}
/* Focus da tastiera: inchiostro (da 4,82:1 a 15,7:1 su tutti i fondi chiari e verdi);
   sui fondi scuri diventa oro chiaro (10,9:1) */
:focus-visible {
  outline: 3px solid var(--inchiostro);
  outline-offset: 3px;
  border-radius: 4px;
}
.pie :focus-visible {
  outline-color: var(--oro-chiaro);
}
strong {
  font-weight: 600;
  color: var(--inchiostro);
}

.salta-al-contenuto {
  position: absolute;
  left: 1rem;
  top: 0;
  transform: translateY(-110%); /* fuori schermo qualunque sia la sua altezza (carattere grande) */
  z-index: 100;
  background: var(--inchiostro);
  color: var(--bianco);
  padding: 0.6rem 1rem;
  border-radius: 8px;
}
/* testo letto dai lettori di schermo ma non mostrato */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.salta-al-contenuto:focus {
  top: 1rem;
  transform: none;
  color: var(--bianco);
}

/* ---------- Contenitori e fasce ---------- */
.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 32px);
  margin-inline: auto;
  padding-left: var(--gutter-sx);
  padding-right: var(--gutter-dx);
}
.contenitore--stretto {
  max-width: calc(48rem + 32px);
}
.sezione {
  position: relative;
  padding-block: var(--spazio-sezione);
  /* le decorazioni che sporgono non devono mai allargare la pagina sul telefono */
  overflow-x: clip;
}
.sezione--verde { background: var(--verde-tenue); }
.sezione--rosa { background: var(--rosa-tenue); }

/* Etichetta sopra i titoli, nello stile della scritta MASSBEN&FIT, con la doppia freccia oro */
.occhiello {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: var(--font-marchio);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro-testo);
}
.occhiello::after {
  content: "";
  width: 1.1em;
  height: 0.8em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16' fill='none' stroke='%23d9a93a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2l6 6-6 6M12 2l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
}
.testo-lungo {
  max-width: var(--larghezza-testo);
}
.testo-lungo h2 {
  margin-top: 2.2em;
  font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.4rem);
}
.testo-lungo > h2:first-child {
  margin-top: 0;
}
.testo-lungo h3 {
  margin-top: 1.6em;
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
}
.testo-lungo ul {
  padding-left: 1.2em;
}
.testo-lungo ul li {
  margin-bottom: 0.45em;
}
.testo-lungo ul li::marker {
  color: var(--verde);
}

/* ---------- Pulsanti ---------- */
.pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-testo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pulsante svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
.pulsante:hover {
  transform: translateY(-2px);
}
.pulsante--whatsapp {
  background: var(--whatsapp);
  color: var(--bianco);
  box-shadow: 0 10px 24px -12px rgba(31, 143, 78, 0.8);
}
.pulsante--whatsapp:hover {
  background: var(--whatsapp-scuro);
  color: var(--bianco);
}
.pulsante--pieno {
  background: var(--verde-profondo);
  color: var(--bianco);
}
.pulsante--pieno:hover {
  background: var(--inchiostro);
  color: var(--bianco);
}
.pulsante--contorno {
  border-color: var(--verde-profondo);
  color: var(--verde-profondo);
  background: transparent;
}
.pulsante--contorno:hover {
  background: var(--verde-profondo);
  color: var(--bianco);
}

/* ---------- Intestazione ---------- */
body::before {
  /* fascia sotto la barra di stato dei telefoni con notch */
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--carta);
}
/* su telefono l'intestazione scorre con la pagina (il menu aperto si allunga nella pagina);
   da 64em in su resta fissa in alto */
.intestazione {
  position: relative;
  z-index: 50;
  background: rgba(255, 252, 250, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(58, 158, 138, 0.18);
}
.intestazione__barra {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 min(1rem, 3vw); /* come marchio e pulsante: non cresce oltre lo schermo con il carattere grande */
  min-height: 4.5rem;
}
.marchio {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: min(0.7rem, 2.6vw);
  min-width: 0;
  text-decoration: none;
  color: var(--inchiostro);
}
.marchio img {
  width: min(2.4rem, 9.6vw);
  flex: none;
}
.marchio__nome {
  font-family: var(--font-marchio);
  font-weight: 600;
  font-size: min(1.05rem, 4.2vw);
  letter-spacing: 0.24em;
  line-height: 1;
  padding-top: 0.2em; /* compensa la linea di base alta di Josefin Sans */
  white-space: nowrap;
}
.marchio__nome span {
  display: block;
  margin-top: 0.45em;
  font-family: var(--font-testo);
  font-size: min(0.7rem, 3vw);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--testo-tenue);
}
.marchio:hover {
  color: var(--inchiostro);
}

/* Navigazione su computer: sempre visibile */
.nav-principale {
  display: none;
}
.nav-principale ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-principale a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--inchiostro);
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-principale a:hover,
.nav-principale a[aria-current],
.nav-principale a.sezione-attiva {
  background: var(--verde-tenue);
  color: var(--verde-profondo);
}
.nav-principale .nav-principale__prenota {
  margin-left: 0.5rem;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: var(--bianco);
}
.nav-principale .nav-principale__prenota:hover {
  background: var(--whatsapp-scuro);
  color: var(--bianco);
}
/* Tendina di Trattamenti: si apre al clic o con Invio/Spazio (<details>) e si chiude ricliccando la voce. */
.nav-tendina {
  position: relative;
}
.nav-tendina > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  color: var(--inchiostro);
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-tendina > summary::-webkit-details-marker {
  display: none;
}
.nav-tendina > summary:hover,
.nav-tendina[open] > summary,
.nav-tendina > summary.sezione-attiva {
  background: var(--verde-tenue);
  color: var(--verde-profondo);
}
.nav-tendina__freccia {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
}
.nav-tendina[open] .nav-tendina__freccia {
  transform: translateY(0.12rem) rotate(-135deg);
}
.nav-principale .nav-tendina__elenco {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 60;
  display: block;
  min-width: 15rem;
  padding: 0.5rem;
  background: var(--bianco);
  border: 1px solid rgba(58, 158, 138, 0.18);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.nav-principale .nav-tendina__elenco a {
  font-weight: 400;
  white-space: nowrap;
}

/* Menu su telefono e tablet: un <details> che si apre al tocco, senza JavaScript.
   Aperto, l'elenco scende nella pagina sotto l'intestazione e spinge giù il contenuto:
   non copre mai ciò che riceve il focus (WCAG 2.4.11) e funziona anche a 320 px o con zoom 400%.
   Il pulsante "Menu" resta fermo al suo posto in alto a destra. */
.intestazione__barra > .marchio {
  min-height: 4.5rem;
}
.menu {
  position: static;
  flex: none;
  margin-left: auto;
}
.menu[open] {
  flex-basis: 100%;
  min-width: 0;
  padding-bottom: 1rem;
}
.menu[open] > summary {
  position: absolute;
  top: 0.875rem; /* (4.5rem di riga - 2.75rem del pulsante) / 2 */
  right: var(--gutter-dx);
}
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: min(0.55rem, 2.2vw);
  min-height: 2.75rem;
  /* come il marchio, la larghezza del pulsante ha un tetto legato allo schermo: marchio e pulsante
     restano sempre sulla stessa riga anche con il carattere di sistema ingrandito, così il pulsante
     aperto (fermo in alto a destra) non copre mai il nome */
  padding: 0.5rem min(1rem, 3.4vw);
  border-radius: 999px;
  border: 1px solid rgba(35, 112, 95, 0.35);
  font-weight: 600;
  font-size: min(0.95rem, 3.9vw);
  color: var(--verde-profondo);
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu__icona {
  position: relative;
  width: min(1.1rem, 4.6vw);
  height: min(0.8rem, 3.4vw);
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.menu__icona::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid currentColor;
  transform: translateY(-50%);
}
.menu[open] > summary {
  background: var(--verde-profondo);
  color: var(--bianco);
}
.menu__elenco {
  margin: 0;
  padding: 0.6rem;
  list-style: none;
  background: var(--bianco);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  border: 1px solid rgba(58, 158, 138, 0.18);
}
.menu__elenco a {
  display: block;
  overflow-wrap: anywhere; /* parole lunghe («decontratturante») con il carattere molto grande */
  hyphens: auto;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--inchiostro);
  font-weight: 600;
}
.menu__elenco a:hover,
.menu__elenco a[aria-current],
.menu__elenco a.sezione-attiva {
  background: var(--verde-tenue);
  color: var(--verde-profondo);
}
.menu__elenco .menu__secondario a {
  padding-left: 1.8rem;
  font-weight: 400;
  font-size: 0.95rem;
}
.menu__elenco .menu__prenota a {
  margin-top: 0.4rem;
  text-align: center;
  background: var(--whatsapp);
  color: var(--bianco);
}
.menu__elenco .menu__prenota a:hover {
  background: var(--whatsapp-scuro);
  color: var(--bianco);
}

@media (min-width: 64em) {
  .intestazione {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
  }
  .nav-principale {
    display: block;
  }
  .menu {
    display: none;
  }
}

/* ---------- Apertura (hero) con onde ---------- */
.apertura {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--verde-chiaro) 0%, var(--verde) 100%);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(6rem, 4rem + 8vw, 10rem);
}
.apertura__griglia {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
.apertura__griglia > * {
  min-width: 0;
}
.apertura .occhiello,
.apertura h1,
.apertura .lead {
  color: var(--inchiostro);
}
.apertura .occhiello::after {
  filter: brightness(0.35);
}
.apertura h1 {
  margin-bottom: 0.35em;
}
/* Il corsivo dei titoli sul gradiente resta inchiostro (min 4,82:1) e si distingue
   con una sottolineatura oro, come la linea della cornice del logo */
.apertura h1 em,
.testata h1 em {
  color: var(--inchiostro);
  text-decoration: underline;
  text-decoration-color: var(--oro);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: auto;
}
.apertura .lead {
  max-width: 34rem;
}
.apertura .pulsante--contorno {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}
.apertura .pulsante--contorno:hover {
  background: var(--inchiostro);
  color: var(--bianco);
}
.apertura__zona {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.5rem 0 0;
  font-size: var(--t-piccolo);
  font-weight: 600;
  color: var(--inchiostro);
}
.apertura__zona svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}
@media (min-width: 56em) {
  .apertura__griglia {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* Onda di chiusura in fondo all'apertura e alle testate: verde → rosa → fondo sezione successiva */
.onde {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  width: 100%;
  height: clamp(4rem, 3rem + 6vw, 8rem);
  pointer-events: none;
}
.onde .onda-rosa { fill: var(--rosa); }
.onde .onda-fondo { fill: var(--carta); }
.onde--su-verde .onda-fondo { fill: var(--verde-tenue); }

/* Foglie di palma decorative */
.foglia {
  position: absolute;
  z-index: 1;
  width: clamp(11rem, 8rem + 14vw, 22rem);
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}
.foglia--alto-dx {
  top: -2.5rem;
  right: -3rem;
  transform: rotate(18deg);
}
.foglia--basso-sx {
  bottom: 2rem;
  left: -4rem;
  transform: rotate(-120deg) scaleX(-1);
  opacity: 0.22;
}

/* ---------- Cornice oro con doppia freccia (firma grafica del marchio) ---------- */
.cornice {
  position: relative;
  padding: clamp(1.2rem, 0.8rem + 1.5vw, 2rem);
}
.cornice::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--oro);
  /* lascia un varco in alto a destra per la doppia freccia, come nel logo */
  clip-path: polygon(0 0, calc(100% - 3.4rem) 0, calc(100% - 3.4rem) 2px, 100% 2px, 100% 100%, 0 100%);
  pointer-events: none;
}
.cornice::after {
  content: "";
  position: absolute;
  top: -0.85rem;
  right: -0.4rem;
  width: 2.8rem;
  height: 1.7rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26' fill='none' stroke='%23d9a93a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l10 10L6 23M22 3l10 10-10 10'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* Foto dentro la cornice oro, nell'apertura (verticale su computer, orizzontale su telefono) */
.apertura__foto {
  justify-self: center;
  width: min(100%, 30rem);
  margin: 0;
  background: rgba(255, 252, 250, 0.4);
}
.apertura__foto img {
  width: 100%;
  border-radius: calc(var(--raggio) - 4px);
  box-shadow: var(--ombra);
}
.apertura__foto figcaption {
  margin: 1rem 0 0;
  text-align: center;
  font-family: var(--font-marchio);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inchiostro);
}

/* ---------- Ritratto con anello oro ---------- */
.ritratto {
  position: relative;
  isolation: isolate;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin: 1rem auto;
}
.ritratto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--bianco);
  box-shadow: var(--ombra);
}
.ritratto::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid var(--oro);
}
.ritratto::after {
  content: "";
  position: absolute;
  inset: 10% -3% -6% 14%; /* resta dentro il margine laterale del telefono */
  z-index: -1;
  border-radius: 50%;
  background: var(--rosa);
}
@media (min-width: 56em) {
  .ritratto::after {
    inset: 10% -10% -6% 14%;
  }
}

/* ---------- Griglia in due colonne (testo + immagine) ---------- */
.due-colonne {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: center;
}
.due-colonne > * {
  min-width: 0;
}
@media (min-width: 56em) {
  .due-colonne {
    grid-template-columns: 0.85fr 1.15fr;
  }
  .due-colonne--inverso {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .due-colonne--inverso > :first-child {
    order: 2;
  }
}

/* Foto con angoli arrotondati e cornice oro sfalsata */
.foto {
  position: relative;
  isolation: isolate;
  margin: 0;
}
.foto img {
  width: 100%; /* l'altezza la riservano gli attributi width/height: nessuno spostamento */
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.foto figcaption {
  margin-top: 0.8rem;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}
.foto--incorniciata {
  margin: 0.9rem 0.9rem 0 0.9rem;
}
.foto--verticale {
  max-width: 28rem;
  margin-inline: auto;
}
.foto--studio {
  max-width: 46rem; /* come gli attributi sizes: la foto originale è larga 1080 px */
  margin-top: 2.5rem;
}
@media (min-width: 52em) {
  .foto--studio {
    margin-inline: auto;
  }
}
.foto--incorniciata::before {
  content: "";
  position: absolute;
  inset: -0.9rem 0.9rem 0.9rem -0.9rem;
  z-index: -1;
  border: 2px solid var(--oro);
  border-radius: calc(var(--raggio) + 4px);
}

/* ---------- Schede dei trattamenti ---------- */
.intestazione-sezione {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.2rem);
}
.intestazione-sezione > :last-child {
  margin-bottom: 0;
}
.schede {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Gruppi da 4 e da 5 schede: righe sempre piene, senza buchi né schede isolate */
@media (min-width: 40em) {
  .schede--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .schede--5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .schede--5 > * {
    grid-column: span 2;            /* 2 + 3 su tablet */
  }
  .schede--5 > :nth-child(-n + 2) {
    grid-column: span 3;
  }
}
@media (min-width: 64em) {
  .schede--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .schede--5 > :nth-child(-n + 2) {
    grid-column: span 2;            /* 3 + 2 su computer */
  }
  .schede--5 > :nth-child(n + 4) {
    grid-column: span 3;
  }
}
.scheda {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--bianco);
  border-radius: var(--raggio);
  border: 1px solid rgba(58, 158, 138, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.scheda:hover,
.scheda:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--ombra);
  border-color: rgba(217, 169, 58, 0.6);
}
.scheda__icona {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  flex: none;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--verde-tenue);
  color: var(--verde-profondo);
}
.scheda__icona svg {
  width: 1.7rem;
  height: 1.7rem;
}
.scheda:nth-child(even) .scheda__icona {
  background: var(--rosa-tenue);
  color: var(--rosa-scuro);
}
.scheda h3 {
  margin: 0;
  font-size: 1.6rem;
}
.scheda p {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
.scheda__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
/* tutta la scheda è cliccabile, ma il link resta uno solo per i lettori di schermo */
.scheda__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* con la tastiera l'anello di focus circonda tutta la scheda, che è l'area cliccabile */
.scheda__link:focus-visible {
  outline: none;
}
.scheda__link:focus-visible::after {
  outline: 3px solid var(--inchiostro);
  outline-offset: 3px;
}
.scheda__link span[aria-hidden="true"] {
  transition: transform 0.2s ease;
}
.scheda:hover .scheda__link span[aria-hidden="true"] {
  transform: translateX(4px);
}

/* ---------- Percorso a passi (come si svolge una seduta) ---------- */
.passi {
  counter-reset: passo;
  display: grid;
  gap: 1.75rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.passi li {
  counter-increment: passo;
  position: relative;
  min-width: 0;
  padding-top: 3.4rem;
}
.passi li::before {
  content: counter(passo);
  font-variant-numeric: lining-nums;
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--oro);
  font-family: var(--font-titoli);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--oro-testo);
}
.passi h3 {
  margin-bottom: 0.3em;
  font-size: 1.45rem;
}
.passi p {
  margin: 0;
  font-size: 1rem;
}

/* ---------- Pagina interna: testata e briciole di pane ---------- */
.testata {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--verde-chiaro) 0%, var(--verde) 100%);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(5rem, 3.5rem + 6vw, 8rem);
}
.testata .contenitore {
  position: relative;
  z-index: 2;
}
.testata h1 {
  max-width: 48rem;
  font-size: clamp(2.3rem, 1.7rem + 2.8vw, 3.9rem);
  color: var(--inchiostro);
}
.testata .lead {
  max-width: 40rem;
  margin: 0;
  color: var(--inchiostro);
}
.briciole ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  font-size: var(--t-piccolo);
  font-weight: 600;
}
.briciole li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--inchiostro);
}
.briciole li + li::before {
  content: "›";
  opacity: 0.6;
}
.briciole a {
  display: inline-block;
  min-height: 24px; /* area minima di tocco (WCAG 2.5.8) */
  color: var(--inchiostro);
}

/* Contenuto con colonna laterale "Prenota" */
.articolo {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: start;
}
.articolo > * {
  min-width: 0;
}
@media (min-width: 60em) {
  .articolo {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}
/* il riquadro "Prenota" segue lo scorrimento solo se la finestra è abbastanza alta da mostrarlo
   tutto: in finestre basse resterebbe tagliato e irraggiungibile */
@media (min-width: 60em) and (min-height: 40em) {
  .articolo__lato {
    position: sticky;
    top: calc(6rem + env(safe-area-inset-top, 0px));
  }
}
.riquadro-prenota {
  padding: 1.6rem;
  border-radius: var(--raggio);
  background: var(--rosa-tenue);
}
.riquadro-prenota h2 {
  margin-bottom: 0.4em;
  font-size: 1.75rem;
}
.riquadro-prenota p {
  font-size: 1rem;
}
.riquadro-prenota .pulsanti {
  margin-top: 1rem;
}
.riquadro-prenota .pulsante {
  width: 100%;
}
.dati-rapidi {
  display: grid;
  gap: 0.6rem;
  margin: 1.2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(155, 79, 69, 0.2);
  font-size: 0.95rem;
}
.dati-rapidi div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.dati-rapidi dt {
  color: var(--testo-tenue);
}
.dati-rapidi dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--inchiostro);
}

/* Citazione del testo originale di Dario */
.citazione {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--oro);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  background: var(--verde-tenue);
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  line-height: 1.4;
  color: var(--inchiostro);
}
.citazione p {
  margin: 0;
}

/* Elenco con spunta */
.spunte {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
}
.testo-lungo ul.spunte {
  padding-left: 0;
}
.spunte li {
  position: relative;
  padding-left: 2rem;
}
.spunte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--verde-tenue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2323705f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}

/* ---------- Domande frequenti ---------- */
.domande {
  display: grid;
  gap: 0.75rem;
}
.domande details {
  padding: 0 1.3rem;
  border-radius: var(--raggio);
  border: 1px solid rgba(58, 158, 138, 0.18);
  background: var(--bianco);
}
.domande summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 600;
  color: var(--inchiostro);
}
.domande summary::-webkit-details-marker {
  display: none;
}
.domande summary::after {
  content: "+";
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde-tenue);
  color: var(--verde-profondo);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.domande details[open] summary::after {
  transform: rotate(45deg);
}
.domande details > div {
  padding-bottom: 1.1rem;
}
.domande details > div > :last-child {
  margin-bottom: 0;
}

/* ---------- Contatti ---------- */
.contatti {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.contatto {
  min-width: 0;
  padding: 1.5rem;
  border-radius: var(--raggio);
  border: 1px solid rgba(58, 158, 138, 0.16);
  background: var(--bianco);
}
.contatto h2,
.contatto h3 {
  margin-bottom: 0.4em;
  font-size: 1.45rem;
}
.contatto p {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.nota-contatti {
  margin: 2rem 0 0;
  text-align: center;
}
.contatto .scheda__icona {
  margin-bottom: 0.9rem;
}

/* ---------- Invito finale ---------- */
.invito {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--rosa) 0%, var(--rosa-tenue) 100%);
  text-align: center;
}
.invito .contenitore {
  position: relative;
  z-index: 2;
  max-width: calc(46rem + 32px);
}
.invito .pulsanti {
  justify-content: center;
}
/* Sul rosa pieno il verde e l'oro non bastano per l'AA: testi, link ed etichette in inchiostro (10,8:1) */
.invito .occhiello,
.invito a:not(.pulsante),
.invito h2 em {
  color: var(--inchiostro);
}
.invito .pulsante--contorno {
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}
.invito .pulsante--contorno:hover {
  background: var(--inchiostro);
  color: var(--bianco); /* 15,7:1 */
}
.invito .foglia {
  opacity: 0.6;
}

/* ---------- Piè di pagina ---------- */
.pie {
  background: var(--inchiostro);
  color: var(--testo-su-scuro);
  padding-block: clamp(3rem, 2.5rem + 3vw, 4.5rem) calc(2rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.95rem;
}
.pie__griglia {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.pie__griglia > * {
  min-width: 0;
}
.pie__logo {
  width: 11rem;
  margin-bottom: 1rem;
}
.pie h2 {
  margin-bottom: 1rem;
  font-family: var(--font-marchio);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
}
.pie ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie a {
  color: var(--bianco);
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.pie a:hover {
  color: var(--rosa);
}
.pie p {
  margin: 0 0 0.6rem;
}
.pie address {
  font-style: normal;
}
.pie__legale {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
}
.pie__legale p {
  margin: 0;
}

/* ---------- Pulsante WhatsApp fisso (telefono e tablet) ---------- */
.whatsapp-fisso {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 3.6rem;
  height: 3.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--bianco);
  box-shadow: 0 12px 28px -10px rgba(22, 38, 36, 0.55);
}
.whatsapp-fisso svg {
  width: 1.9rem;
  height: 1.9rem;
}
.whatsapp-fisso:hover {
  background: var(--whatsapp-scuro);
  color: var(--bianco);
}
@media (min-width: 64em) {
  .whatsapp-fisso {
    display: none;
  }
}

/* ---------- Segnaposto da completare prima della pubblicazione ---------- */
.da-completare {
  padding: 0 0.3em;
  border-radius: 4px;
  outline: 2px dashed var(--avviso-bordo);
  outline-offset: 1px;
  background: var(--avviso);
  color: var(--avviso-testo);
  font-weight: 600;
}
.avviso-prototipo {
  padding: 0.55rem var(--gutter-dx) 0.55rem var(--gutter-sx);
  border-bottom: 1px solid var(--avviso-bordo);
  background: var(--avviso);
  color: var(--avviso-testo);
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
}
.avviso-prototipo p {
  margin: 0;
}

/* ---------- Animazioni leggere (disattivate con "riduci movimento") ---------- */
@media (prefers-reduced-motion: no-preference) {
  .apertura__testo > * {
    animation: sali 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .apertura__testo > :nth-child(2) { animation-delay: 0.08s; }
  .apertura__testo > :nth-child(3) { animation-delay: 0.16s; }
  .apertura__testo > :nth-child(4) { animation-delay: 0.24s; }
  .apertura__testo > :nth-child(5) { animation-delay: 0.32s; }
  .apertura__foto {
    animation: appari 1.1s 0.2s ease both;
  }
  .foglia--alto-dx {
    animation: ondeggia 9s ease-in-out infinite alternate;
  }
}
/* partono da un fotogramma già visibile: la pagina è leggibile anche se l'animazione non parte */
@keyframes sali {
  from {
    opacity: 0.35;
    transform: translateY(14px);
  }
}
@keyframes appari {
  from {
    opacity: 0.35;
    transform: scale(0.97);
  }
}
@keyframes ondeggia {
  from { transform: rotate(18deg); }
  to { transform: rotate(23deg) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Stampa ---------- */
@media print {
  .intestazione,
  .whatsapp-fisso,
  .onde,
  .foglia,
  .avviso-prototipo {
    display: none !important;
  }
  .apertura,
  .testata,
  .invito,
  .pie {
    background: none;
    color: #000;
  }
}