/* ==========================================================================
   Kaleido Riabilitazione — foglio di stile unico del sito

    1. Variabili                     8. Homepage: team e carosello
    2. Base                          9. Homepage: sede e mappa
    3. Titoli ed etichette          10. Pagine personali
    4. Sezioni e sfondi             11. Footer
    5. Pulsanti, link e icone       12. Finestra "Contattaci"
    6. Header e menu                13. Pagine legali e 404
    7. Homepage: apertura           14. Movimento ridotto

   Ogni componente contiene anche le sue regole per schermi più piccoli.
   Punti di rottura: 1080px (portatili piccoli), 900px (carosello a scorrimento),
   860px (telefoni e tablet: menu a scomparsa, una colonna), 600px (telefoni).
   ========================================================================== */


/* 1. Variabili ---------------------------------------------------------------
   Colori, ombre, angoli e spazi comuni. Font di sistema: per usare Gilroy
   servono i file web con licenza (.woff2) da dichiarare qui con @font-face. */

@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/nunito-sans-v19-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/nunito-sans-v19-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {
  --paper: #f8f7f4;           /* fondo chiaro */
  --paper-deep: #f1eeea;
  --white: #fff;
  --ink: #173d39;             /* testo */
  --ink-soft: #486560;        /* testo secondario */
  --green: #4da687;
  --green-dark: #006c68;      /* colore principale */
  --green-deeper: #005c59;    /* principale al passaggio del mouse */
  --lilac: #ab95c7;
  --lilac-light: #c3b2d7;
  --blush: #e6d5d3;
  --footer-bg: #113f3c;
  --line: rgba(23, 61, 57, 0.14);  /* bordi sottili */
  --tint: rgba(77, 166, 135, 0.12); /* fondo verde chiaro dei tondi con icona */

  --font-display: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-text: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --shadow-sm: 0 12px 28px rgba(28, 69, 62, 0.1);
  --shadow-md: 0 24px 60px rgba(28, 69, 62, 0.14);
  --shadow-lg: 0 38px 90px rgba(23, 61, 57, 0.18);
  /* Per i riquadri in fondo a una sezione (foto in apertura, mappa): le sezioni
     tagliano ciò che esce dal bordo, quindi l'ombra deve spegnersi entro
     --section-space (spostamento + sfocatura = --section-space), altrimenti
     si vede una linea netta tra le sezioni. */
  --shadow-lg-short: 0 20px 48px rgba(23, 61, 57, 0.18);

  /* Cornici: filo sottile, stesso spessore per foto grandi e schede del
     carosello. Ogni professionista ha un colore (quello della sua scheda, un
     tono più scuro del fondo): lo stesso colore incornicia la foto della sua
     pagina personale. La foto in apertura della homepage è verde. */
  --frame-width: 4px;
  --frame-green: var(--green-dark);
  --frame-lilac: var(--lilac);
  --frame-rose: #d6aab6;
  --frame-sage: #a4c8b5;
  --frame-blush: #d1aaa6;

  --radius-lg: 28px;          /* riquadri grandi */
  --radius-md: 20px;          /* riquadri medi */
  --radius-sm: 14px;          /* elementi piccoli */

  --section-space: 68px;      /* spazio sopra e sotto ogni sezione, aperture comprese:
                                 tra due sezioni c'è sempre il doppio */
  --header-height: 88px;
}

@media (max-width: 860px) {
  :root {
    --section-space: 54px;
    --shadow-lg-short: 0 14px 40px rgba(23, 61, 57, 0.16);
    --header-height: 76px;
  }
}

@media (max-width: 600px) {
  :root {
    --section-space: 44px;
    --shadow-lg-short: 0 12px 32px rgba(23, 61, 57, 0.16);
    --radius-lg: 22px;
    --radius-md: 18px;
    --radius-sm: 12px;
  }
}


/* 2. Base ------------------------------------------------------------------ */

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

/* I link a una sezione si fermano sotto l'header fisso.
   Lo scorrimento morbido verso le sezioni lo gestisce script.js. */
html {
  scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid rgba(0, 137, 150, 0.42);
  outline-offset: 4px;
}

/* Contenitore centrato della pagina. */
.container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

/* Testo letto solo dai lettori di schermo. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Testi diversi su telefono/tablet e su computer (stesso limite di 860 px del
   menu), es. "Chiama la Dott.ssa…" e "Mostra il numero" nelle pagine personali. */
@media (min-width: 861px) {
  .only-phone {
    display: none !important;
  }
}

@media (max-width: 860px) {
  .only-computer {
    display: none !important;
  }
}

/* "Vai al contenuto": compare solo navigando con la tastiera. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  color: var(--white);
  background: var(--green-dark);
  border-radius: 9px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Elenco puntato (sede, riquadri del percorso, pagine legali). */
.bullet-list {
  display: grid;
  gap: 8px;
  padding-left: 19px;
  list-style: disc;
}

.bullet-list li {
  padding-left: 3px;
  color: var(--ink-soft);
}

.bullet-list li::marker {
  color: var(--green-dark);
}

@media (max-width: 860px) {
  .container {
    width: min(100% - 36px, 720px);
  }
}

@media (max-width: 600px) {
  .container {
    width: calc(100% - 30px);
  }
}


/* 3. Titoli ed etichette ----------------------------------------------------
   Tre livelli: pagina (h1), sezione (h2), riquadro (h2 dentro un riquadro).
   La parte in <em> va a capo con un colore diverso. */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

h1 em,
h2 em {
  color: var(--green-dark);
  font-style: normal;
  font-weight: 500;
}

.page-title {
  margin: 0;
  font-size: clamp(54px, 5.6vw, 84px);
  letter-spacing: -3.6px;
  line-height: 0.98;
}

.section-title {
  margin: 0;
  font-size: clamp(42px, 4.4vw, 66px);
  letter-spacing: -3.2px;
  line-height: 0.98;
}

.box-title {
  margin: 0;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -2.4px;
  line-height: 0.98;
}

/* Etichetta in maiuscolo sopra un titolo o un dato (es. "CONTATTO DIRETTO"). */
.label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .page-title {
    font-size: 48px;
    letter-spacing: -2.6px;
  }

  .section-title {
    font-size: 40px;
    letter-spacing: -2.3px;
  }

  .box-title {
    font-size: 36px;
    letter-spacing: -1.8px;
  }
}


/* 4. Sezioni e sfondi --------------------------------------------------------
   Ogni sezione ha uno dei due sfondi, alternati nell'ordine della pagina:
   .backdrop-lilac (alone lilla a sinistra, alone verde e anelli a destra)
   .backdrop-green (alone verde a destra, alone lilla e anelli a sinistra).
   Aloni e anelli restano dentro la sezione: sul bordo alto e basso il fondo è
   sempre lo stesso colore, così il passaggio tra due sezioni non si vede. */

.section {
  padding: var(--section-space) 0;
}

.section-heading {
  margin-bottom: 44px;
}

/* Frase sotto il titolo di una sezione. */
.section-intro {
  max-width: 620px;
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.55;
}

.backdrop-lilac,
.backdrop-green {
  position: relative;
  isolation: isolate; /* gli anelli (z-index: -1) restano dietro al contenuto */
  overflow: hidden; /* Safari prima della 16 */
  overflow: clip;
  background-color: var(--paper);
}

/* Aloni ellittici: larghezza e altezza in % della sezione, centro lontano dai
   bordi, quindi si spengono prima del bordo alto e di quello basso. */
.backdrop-lilac {
  background-image:
    radial-gradient(ellipse 38% 42% at 6% 46%, rgba(195, 178, 215, 0.42), transparent),
    radial-gradient(ellipse 34% 40% at 94% 56%, rgba(77, 166, 135, 0.2), transparent);
}

.backdrop-green {
  background-image:
    radial-gradient(ellipse 34% 40% at 94% 44%, rgba(77, 166, 135, 0.22), transparent),
    radial-gradient(ellipse 38% 42% at 6% 56%, rgba(195, 178, 215, 0.32), transparent);
}

/* Anelli concentrici (una linea sottile e due fasce chiare), centrati sul lato
   della sezione e alti al massimo l'88% della sezione: non vengono mai tagliati
   dal bordo alto o basso. */
.backdrop-lilac::after,
.backdrop-green::after {
  position: absolute;
  top: 50%;
  z-index: -1;
  height: min(88%, 760px);
  aspect-ratio: 1;
  content: "";
  background: radial-gradient(closest-side,
    transparent 67.2%,
    rgba(0, 108, 104, 0.14) 67.4% 67.9%,
    rgba(0, 108, 104, 0.035) 68.1% 84%,
    rgba(0, 108, 104, 0.025) 84.2% 99.6%,
    transparent 100%);
  pointer-events: none;
}

.backdrop-lilac::after {
  right: 0;
  transform: translate(45%, -50%);
}

.backdrop-green::after {
  left: 0;
  transform: translate(-45%, -50%);
}

/* Logo in trasparenza e cerchi decorativi delle aperture di pagina. */
.watermark {
  position: absolute;
  z-index: 0;
  opacity: 0.045;
  pointer-events: none;
}

.orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.orb-ring {
  border: 1px solid rgba(77, 166, 135, 0.34);
}

.orb-disc {
  background: rgba(230, 213, 211, 0.6);
  box-shadow: var(--shadow-sm);
}

/* Su telefono e tablet il cerchio sottile finirebbe sopra al testo. */
@media (max-width: 860px) {
  .orb-ring {
    display: none;
  }
}

/* Su telefono anelli più piccoli: su uno schermo stretto coprirebbero il testo. */
@media (max-width: 600px) {
  .backdrop-lilac::after,
  .backdrop-green::after {
    height: min(88%, 420px);
  }
}

@media (max-width: 600px) {
  .section-heading {
    margin-bottom: 30px;
  }

  .section-intro {
    font-size: 16px;
  }
}


/* 5. Pulsanti, link e icone ------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button .icon {
  width: 19px;
  height: 19px;
}

/* Verde pieno: l'azione principale. */
.button-primary {
  color: var(--white);
  background: var(--green-dark);
  box-shadow: 0 15px 32px rgba(0, 108, 104, 0.23);
}

/* Bianco con bordo: l'azione secondaria. */
.button-secondary {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(23, 61, 57, 0.17);
  box-shadow: 0 10px 24px rgba(23, 61, 57, 0.07);
  backdrop-filter: blur(12px);
}

/* Fila di pulsanti affiancati. */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* Link sottolineato in verde (es. "Apri direttamente Maps"). */
.text-link {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 44px;
  padding-bottom: 6px;
  color: var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  font-size: 13px;
  font-weight: 700;
}

/* Icone da assets/icons.svg: prendono il colore del testo. */
.icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icona dentro una riga di testo. */
.text-link .icon,
.carousel-hint .icon,
.bio-toggle .icon,
.instagram-tile span .icon {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 2;
}

/* Tondo verde chiaro con un'icona al centro; misura con --badge-size. */
.icon-badge {
  --badge-size: 48px;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--badge-size);
  height: var(--badge-size);
  color: var(--green-dark);
  background: var(--tint);
  border-radius: 50%;
}

.icon-badge .icon {
  width: calc(var(--badge-size) * 0.48);
  height: calc(var(--badge-size) * 0.48);
}

/* Riquadro con sagoma al posto di una foto non ancora disponibile. */
.photo-missing {
  display: grid;
  place-items: center;
  color: rgba(23, 61, 57, 0.4);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.16)),
    repeating-linear-gradient(-45deg, rgba(23, 61, 57, 0.035) 0 10px, transparent 10px 20px),
    var(--lilac-light);
}

.photo-missing .icon {
  width: min(45%, 150px);
  height: auto;
  aspect-ratio: 1;
  stroke-width: 1;
}

@media (hover: hover) {
  .button:hover {
    transform: translateY(-2px);
  }

  .button-primary:hover {
    background: var(--green-deeper);
    box-shadow: 0 18px 38px rgba(0, 108, 104, 0.28);
  }
}

@media (max-width: 600px) {
  .button {
    width: 100%;
  }

  .button-row {
    flex-direction: column;
    align-items: stretch;
  }
}


/* 6. Header e menu ----------------------------------------------------------
   Su computer: logo e link in riga. Su telefono e tablet: tasto a tre linee
   che apre il menu a tutto schermo (classe .is-open aggiunta da script.js). */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(248, 247, 244, 0.91);
  border-bottom: 1px solid rgba(23, 61, 57, 0.08);
  box-shadow: 0 8px 30px rgba(23, 61, 57, 0.045);
  backdrop-filter: blur(18px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1320px, calc(100% - 48px));
  height: var(--header-height);
  margin: 0 auto;
}

.brand {
  display: grid;
  place-items: center;
  width: 74px;
  min-width: 74px;
}

.brand img {
  width: 69px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 700;
}

/* Link del menu: linea verde che compare al passaggio del mouse. */
.main-nav > a:not(.nav-cta) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.main-nav > a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--green-dark);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.main-nav > a:hover::after,
.main-nav > a:focus-visible::after {
  transform: scaleX(1);
}

/* "Contattaci": apre la finestra con tutte le professioniste. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  color: var(--white);
  background: var(--green-dark);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 108, 104, 0.2);
}

.menu-toggle {
  display: none;
}

@media (max-width: 1080px) {
  .main-nav {
    gap: 18px;
  }
}

@media (max-width: 860px) {
  .header-inner {
    width: min(100% - 36px, 720px);
  }

  /* Il blur renderebbe il menu fisso relativo all'header invece che allo schermo;
     senza blur lo sfondo è pieno, altrimenti i tasti che scorrono sotto
     l'header si intravedono (es. "Contattaci" della homepage). */
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
  }

  .brand {
    position: relative;
    z-index: 102;
    width: 62px;
    min-width: 62px;
  }

  .brand img {
    width: 58px;
  }

  /* Tasto a tre linee: le due linee visibili diventano una X a menu aperto. */
  .menu-toggle {
    position: relative;
    z-index: 102;
    display: grid;
    place-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }

  .menu-toggle > span:not(.sr-only) {
    width: 19px;
    height: 2px;
    background: var(--ink);
    border-radius: 99px;
    transition: transform 180ms ease;
  }

  .menu-toggle[aria-expanded="true"] > span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] > span:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
  }

  /* Menu a tutto schermo che entra da destra. */
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 101;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    width: 100vw;
    min-height: 100dvh;
    padding: 92px 34px 45px;
    background:
      radial-gradient(circle 300px at 85% 15%, rgba(195, 178, 215, 0.38), transparent),
      var(--paper);
    font-family: var(--font-display);
    font-size: 28px;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }

  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .main-nav > a:not(.nav-cta) {
    min-height: 52px;
  }

  .nav-cta {
    min-width: 180px;
    margin-top: 18px;
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .header-inner {
    width: calc(100% - 30px);
  }

  /* Tasto "Torna alla home" della pagina 404. */
  .site-header .button {
    width: auto;
    min-height: 44px;
    padding: 0 18px;
  }
}


/* 7. Homepage: apertura -----------------------------------------------------
   Testo a sinistra, foto ad arco a destra con didascalia sopra una sfumatura. */

.hero {
  padding: 166px 0 var(--section-space);
}

.hero .watermark {
  top: 135px;
  right: -65px;
  width: 360px;
  transform: rotate(10deg);
}

.hero .orb-ring {
  top: 155px;
  left: 44%;
  width: 76px;
  height: 76px;
}

.hero .orb-disc {
  bottom: 60px;
  left: -78px;
  width: 190px;
  height: 190px;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 76px;
  align-items: center;
}

.hero .page-title {
  max-width: 690px;
}

.hero-lead {
  max-width: 610px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 19px;
}

/* Il nome "Kaleido" all'inizio del testo, nel verde principale. */
.hero-brand {
  color: var(--green-dark);
  font-weight: 700;
}

/* Alta quanto la foto (che è posizionata dentro): sotto non resta spazio in più. */
.hero-visual {
  position: relative;
  min-height: 590px;
}

.hero-photo {
  position: absolute;
  top: 0;
  right: 20px;
  width: 455px;
  height: 590px;
  overflow: hidden;
  background: var(--lilac-light);
  border: var(--frame-width) solid var(--frame-green);
  border-radius: 220px 220px 38px 38px;
  box-shadow: var(--shadow-lg-short);
}

/* Sfumatura scura in basso per leggere la didascalia. */
.hero-photo::after {
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(23, 61, 57, 0.84));
}

/* Foto ingrandita del 15% verso le persone, per ridurre lo sfondo ai lati e sopra. */
.hero-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transform-origin: 50% 42%;
}

/* Piccolo cerchio bianco in alto a destra sulla foto. */
.hero-photo-accent {
  position: absolute;
  z-index: 2;
  top: 36px;
  right: 34px;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.12);
}

.hero-photo-caption {
  position: absolute;
  z-index: 3;
  right: 36px;
  bottom: 34px;
  left: 36px;
  margin: 0;
  color: var(--white);
}

.hero-photo-caption .label {
  margin-bottom: 9px;
}

.hero-photo-caption strong {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.08;
}

/* Anelli sottili dietro la foto. */
.hero-ring {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(171, 149, 199, 0.44);
  border-radius: 50%;
}

.hero-ring-large {
  top: 44px;
  left: -12px;
  width: 420px;
  height: 420px;
}

.hero-ring-small {
  right: -50px;
  bottom: -10px;
  width: 255px;
  height: 255px;
  border-color: rgba(77, 166, 135, 0.42);
}

@media (max-width: 1080px) {
  .hero-grid {
    gap: 35px;
  }

  .hero-photo {
    right: 0;
    width: 405px;
  }
}

@media (max-width: 860px) {
  .hero {
    min-height: auto;
    padding: 126px 0 var(--section-space);
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    margin-top: 18px;
  }

  /* Foto centrata sotto il testo. */
  .hero-photo {
    right: 0;
    left: 0;
    width: 76%;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 112px;
  }

  .hero-lead {
    font-size: 16px;
  }

  .hero-visual {
    min-height: 455px;
    margin-top: 15px;
  }

  .hero-photo {
    width: 100%;
    height: 455px;
    border-radius: 180px 180px 27px 27px;
  }

  .hero-photo-caption {
    right: 25px;
    bottom: 25px;
    left: 25px;
  }

  .hero-photo-caption strong {
    font-size: 22px;
  }
}


/* 8. Homepage: team e carosello ---------------------------------------------
   Schede affiancate che scorrono in orizzontale; frecce a metà altezza delle
   schede (solo su computer). Il colore di ogni scheda si sceglie con una
   classe card-* (green, lilac, rose, sage, blush). */

.carousel-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15px;
}

.carousel-hint .icon {
  color: var(--green-dark);
}

/* Contiene le schede e le frecce, che si centrano rispetto alle schede. */
.carousel-viewport {
  position: relative;
}

/* Lo spazio sotto le schede (per le ombre) è compensato dal margine negativo,
   così la distanza dalla sezione successiva resta quella standard. */
.carousel-track {
  display: flex;
  gap: 24px;
  margin-bottom: -8px;
  padding: 4px 3px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

/* Durante l'accenno di scorrimento su telefono l'aggancio alle schede è sospeso. */
.carousel-track.is-hinting {
  scroll-snap-type: none;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--green-dark);
  background: var(--white);
  border: 1px solid rgba(20, 67, 61, 0.25);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 180ms ease, color 180ms ease;
}

.carousel-arrow .icon {
  width: 22px;
  height: 22px;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  color: var(--white);
  background: var(--ink);
}

.carousel-arrow-previous {
  left: -26px;
}

.carousel-arrow-next {
  right: -26px;
}

.carousel-arrow[hidden] {
  display: none;
}

/* Scheda: foto ad altezza fissa, testo sotto, pulsanti sempre in fondo. */
.professional-card {
  --card-bg: var(--lilac-light);
  --card-frame: var(--frame-lilac);
  --card-ink: var(--ink);
  --card-button-bg: var(--ink);
  --card-button-ink: var(--white);
  display: flex;
  flex: 0 0 calc((100% - 48px) / 3);
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: var(--card-ink);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  scroll-snap-align: start;
  position: relative;
}

/* Cornice nel colore della scheda, un tono più scuro (--card-frame), spessa come
   quella delle altre foto. È disegnata sopra la scheda: un bordo vero la
   stringerebbe e manderebbe a capo i nomi. */
.professional-card::after {
  position: absolute;
  inset: 0;
  content: "";
  border: var(--frame-width) solid var(--card-frame);
  border-radius: inherit;
  pointer-events: none;
}

.card-green {
  --card-bg: var(--green-dark);
  --card-frame: var(--frame-green);
  --card-ink: var(--white);
  --card-button-bg: var(--white);
  --card-button-ink: var(--green-dark);
}

.card-lilac {
  --card-bg: var(--lilac-light);
  --card-frame: var(--frame-lilac);
}

.card-rose {
  --card-bg: #ead8dd;
  --card-frame: var(--frame-rose);
}

.card-sage {
  --card-bg: #cfe0d7;
  --card-frame: var(--frame-sage);
}

.card-blush {
  --card-bg: var(--blush);
  --card-frame: var(--frame-blush);
}

/* Foto avvicinata al viso. Ogni immagine può indicare, con style="...":
   --focus  dove si trova il viso nella foto (% da sinistra, % dall'alto)
   --zoom   quanto avvicinarsi (1 = foto intera, 1.5 = una volta e mezza) */
.professional-card-photo {
  flex: none;
  height: 300px;
  overflow: hidden;
}

.professional-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 30%);
  transform: scale(var(--zoom, 1.3));
  transform-origin: var(--focus, 50% 30%);
}

.professional-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.professional-card-body .label {
  margin-bottom: 9px;
}

.professional-card h3 {
  margin: 0;
  font-size: clamp(25px, 2.2vw, 31px);
  letter-spacing: -1.1px;
  line-height: 1.02;
}

/* Due tasti della stessa larghezza: "Pagina personale" (pieno) a sinistra,
   "Contatta" (contorno) a destra, anche quando la pagina personale non c'è. */
.professional-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: auto;
  padding-top: 24px;
}

.professional-card-actions [data-whatsapp] {
  grid-column: 2;
}

/* Pulsanti della scheda: contorno; "-primary" pieno. */
.card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: transform 180ms ease;
}

.card-button-primary {
  color: var(--card-button-ink);
  background: var(--card-button-bg);
  border-color: var(--card-button-bg);
}

@media (hover: hover) {
  .card-button:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 1080px) {
  .carousel-arrow-previous {
    left: -16px;
  }

  .carousel-arrow-next {
    right: -16px;
  }
}

/* Telefono e tablet: niente frecce, si scorre col dito fino al bordo dello schermo. */
@media (max-width: 900px) {
  .carousel-hint {
    margin-bottom: 14px;
  }

  .carousel-arrow {
    display: none;
  }

  .carousel-track {
    --bleed: calc(50vw - 50%);
    margin-right: calc(var(--bleed) * -1);
    margin-bottom: -10px;
    padding-right: var(--bleed);
    padding-bottom: 10px;
  }

  .professional-card {
    flex-basis: calc((100% - 24px) / 2);
  }

  .professional-card-photo {
    height: 280px;
  }
}

@media (max-width: 600px) {
  .professional-card {
    flex-basis: min(82vw, 430px);
  }

  .professional-card-photo {
    height: 240px;
  }

  .professional-card-body {
    padding: 20px;
  }

  .professional-card-actions {
    padding-top: 20px;
  }
}


/* 9. Homepage: sede e mappa ------------------------------------------------- */

.location-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 78px;
  align-items: center;
}

.location-lead {
  max-width: 460px;
  margin: 27px 0 0;
  color: var(--ink-soft);
}

/* Riquadro bianco con l'indirizzo e, sotto una linea, parcheggio e accessibilità. */
.address-card {
  margin: 34px 0;
  padding: 21px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.address-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.address-card p {
  display: grid;
  margin: 0;
}

.address-card .label {
  color: var(--green-dark);
}

.address-card strong {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.4;
}

.address-amenities {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.address-amenities li {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.4;
}

/* Icone più piccole del segnaposto, centrate sotto di esso. */
.address-amenities .icon-badge {
  --badge-size: 36px;
  margin: 0 6px;
}

/* Riquadro della mappa: prima mostra la richiesta di consenso, poi la mappa. */
.map-card {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  background: #e9e8e2;
  border: 8px solid var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg-short);
}

.map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-consent {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 44px;
  text-align: center;
  background:
    radial-gradient(circle 260px at 80% 15%, rgba(195, 178, 215, 0.42), transparent),
    radial-gradient(circle 260px at 12% 88%, rgba(77, 166, 135, 0.24), transparent),
    linear-gradient(145deg, #f5f3ee, #e4eee9);
}

.map-consent[hidden] {
  display: none;
}

.map-consent .icon-badge {
  --badge-size: 76px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.map-consent p {
  display: grid;
  gap: 7px;
  max-width: 410px;
  margin: 0;
}

.map-consent .label {
  color: var(--green-dark);
}

.map-consent strong {
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1;
}

.map-consent p > span:last-child {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.map-consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
}

/* Link a Maps mostrato solo se JavaScript è disattivato. */
.map-noscript {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 30px;
  text-align: center;
  background: var(--paper);
}

@media (max-width: 860px) {
  .location-grid {
    grid-template-columns: 1fr;
  }

  .map-card {
    min-height: 470px;
  }
}

@media (max-width: 600px) {
  .location-grid {
    gap: 48px;
  }

  .map-card {
    min-height: 380px;
    border-width: 5px;
  }

  .map-consent {
    gap: 16px;
    padding: 26px 20px;
  }

  .map-consent .icon-badge {
    --badge-size: 66px;
  }

  .map-consent strong {
    font-size: 27px;
  }

  .map-consent-actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* 10. Pagine personali -------------------------------------------------------
   Apertura: su computer nome e biografia a sinistra, foto a destra; su
   telefono nome, foto, tasti Chiama/WhatsApp, biografia ridotta. */

.profile-hero {
  padding: 148px 0 var(--section-space);
}

/* Dentro la sezione: se uscisse dal bordo basso verrebbe tagliato e si
   vedrebbe una linea tra l'apertura e la sezione successiva. */
.profile-hero .watermark {
  right: -90px;
  bottom: 16px;
  width: 430px;
}

.profile-hero .orb-ring {
  top: 145px;
  left: -80px;
  width: 180px;
  height: 180px;
}

/* Almeno 40 px dal fondo: la sua ombra (--shadow-sm) non arriva al bordo. */
.profile-hero .orb-disc {
  right: 41%;
  bottom: 44px;
  width: 74px;
  height: 74px;
}

.profile-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "name photo"
    "bio  photo";
  column-gap: 78px;
}

.profile-name {
  grid-area: name;
  font-size: clamp(42px, 4.4vw, 62px);
  letter-spacing: -2.6px;
}

/* Foto a "fogliolina", allineata al bordo destro della pagina come il testo a sinistra. */
.profile-photo {
  grid-area: photo;
  align-self: start;
  height: 610px;
  overflow: hidden;
  border: var(--frame-width) solid var(--photo-frame-color, var(--frame-lilac));
  border-radius: 42px 245px 42px 245px;
  box-shadow: var(--shadow-lg);
}

/* Cornice nel colore della scheda della professionista nel carosello. */
.photo-frame-green {
  --photo-frame-color: var(--frame-green);
}

.photo-frame-lilac {
  --photo-frame-color: var(--frame-lilac);
}

.photo-frame-rose {
  --photo-frame-color: var(--frame-rose);
}

.photo-frame-sage {
  --photo-frame-color: var(--frame-sage);
}

.photo-frame-blush {
  --photo-frame-color: var(--frame-blush);
}

/* Foto avvicinata al viso con --focus e --zoom sull'immagine, come nelle
   schede della homepage (sezione 8). */
.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 24%);
  filter: saturate(0.96) contrast(1.02);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 24%);
}

.profile-bio {
  grid-area: bio;
}

.profile-bio > p {
  max-width: 610px;
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* Professione in apertura della biografia, sopra la linea, nel font dei titoli.
   Per le titolari, accanto c'è l'etichetta "Titolare dello studio". */
.profile-role {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  max-width: 610px;
  margin-top: 28px;
  color: var(--green-dark);
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--green-deeper);
  background: var(--tint);
  font-family: var(--font-text);
  letter-spacing: 1.2px;
}

.profile-bio > hr {
  max-width: 610px;
  margin: 18px 0 0;
  border: 0;
  border-top: 1px solid rgba(23, 61, 57, 0.22);
}

/* Visibili solo su telefono e tablet. */
.profile-quick-actions,
.bio-toggle {
  display: none;
}

/* Riquadri del percorso: 4 per riga (3 con .areas-grid-3). */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.areas-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.area-card {
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.area-card .icon-badge {
  --badge-size: 64px;
}

.area-card h3 {
  margin: 28px 0 12px;
  font-size: 24px;
  letter-spacing: -0.6px;
  line-height: 1.08;
}

.area-card p,
.area-card li {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.area-card p + p,
.area-card p + ul {
  margin-top: 10px;
}

.area-card .bullet-list {
  gap: 4px;
  padding-left: 18px;
}

/* Instagram: titolo a sinistra, tre anteprime a destra. */
.instagram-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 38px;
  align-items: center;
  padding: 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.instagram-card .box-title {
  margin-bottom: 18px;
}

.instagram-card .box-title em {
  color: var(--lilac);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.instagram-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-deep);
  border-radius: var(--radius-sm);
}

.instagram-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 240ms ease;
}

/* Etichetta "Apri il post" sopra l'anteprima. */
.instagram-tile span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  color: var(--white);
  background: rgba(17, 63, 60, 0.82);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

@media (hover: hover) {
  .instagram-tile:hover img {
    transform: scale(1.035);
  }
}

/* Recensioni Google (pagina di Emanuela): titolo, media e tasto per la scheda
   Google, poi le recensioni nel carosello della homepage (sezione 8).
   Le recensioni lunghe sono accorciate a 6 righe con "Leggi tutto" (script.js). */
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
}

/* Media e tasto "Leggi tutte le recensioni" affiancati, a destra del titolo. */
.reviews-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.reviews-google {
  width: 30px;
  height: 30px;
  color: var(--green-dark);
}

.reviews-score {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

.reviews-summary small {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
}

/* Cinque stelle piene. */
.stars {
  display: flex;
  gap: 2px;
  color: #e2a024;
}

.stars .icon {
  width: 18px;
  height: 18px;
}

.review-card {
  display: flex;
  flex: 0 0 calc((100% - 48px) / 3);
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  scroll-snap-align: start;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-author strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 17px;
}

.review-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--green-dark);
  background: var(--tint);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.review-text {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.review-text.is-clamped:not(.is-expanded) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

.review-toggle {
  min-height: 44px;
  margin-top: 6px;
  padding: 0;
  color: var(--green-dark);
  background: none;
  border: 0;
  border-bottom: 2px solid currentColor;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.review-toggle[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .review-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 600px) {
  .reviews-head {
    margin-bottom: 30px;
  }

  /* Media e tasto uno sotto l'altro, larghi quanto la pagina. */
  .reviews-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .review-card {
    flex-basis: min(82vw, 430px);
    padding: 22px;
  }
}

/* Riquadro verde "Parliamo della tua richiesta". */
.contact-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.4fr);
  gap: 45px;
  padding: clamp(28px, 5vw, 64px);
  color: var(--white);
  background: var(--green-dark);
  border-radius: var(--radius-lg);
}

.contact-card > div > p {
  max-width: 34ch;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.8);
}

.contact-methods {
  display: grid;
  align-content: center;
  gap: 10px;
}

/* Un canale: icona, etichetta e recapito. */
.contact-method {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 15px;
  align-items: center;
  min-height: 76px;
  padding: 12px 17px;
  color: var(--ink);
  background: var(--white);
  border-radius: var(--radius-sm);
}

.contact-method .icon-badge {
  --badge-size: 44px;
  grid-row: span 2;
}

.contact-method .label {
  align-self: end;
  color: var(--green-dark);
}

.contact-method strong {
  align-self: start;
  font-family: var(--font-display);
  font-size: 17px;
  overflow-wrap: break-word;
}

/* Riga "Telefono" su computer: "Mostra il numero" con l'occhio; dopo il clic
   il numero, in testo normale da leggere e copiare. */
.reveal-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--green-dark);
}

.reveal-phone .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.contact-method.is-revealed {
  cursor: text;
}

.contact-method.is-revealed .reveal-phone {
  color: var(--ink);
}

@media (max-width: 1080px) {
  .profile-hero-grid {
    column-gap: 35px;
  }

  /* Su due colonne un riquadro rimasto da solo occupa tutta la riga. */
  .areas-grid,
  .areas-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .area-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .profile-hero {
    padding: 122px 0 var(--section-space);
  }

  .profile-hero .orb-disc {
    display: none;
  }

  .profile-hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "name"
      "photo"
      "bio"
      "actions";
    row-gap: 24px;
  }

  .profile-photo {
    height: 620px;
    margin: 0 7%;
  }

  .profile-quick-actions {
    display: grid;
    grid-area: actions;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .profile-quick-actions .button {
    padding: 0 16px;
    font-size: 15px;
  }

  .profile-role {
    margin-top: 0;
  }

  /* Biografia ridotta ai primi due paragrafi finché non si preme "Leggi tutto". */
  .profile-bio.is-collapsible:not(.is-expanded) > p:nth-of-type(n + 3) {
    display: none;
  }

  .bio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 12px;
    padding: 0;
    color: var(--green-dark);
    background: none;
    border: 0;
    border-bottom: 2px solid currentColor;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }

  .bio-toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }

  .instagram-card,
  .contact-card {
    grid-template-columns: 1fr;
  }

  .instagram-card {
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .profile-hero {
    padding-top: 108px;
  }

  .profile-role {
    font-size: 21px;
  }

  .profile-photo {
    height: 420px;
    margin: 0;
    border-radius: 28px 170px 28px 170px;
  }

  /* I tasti Chiama/WhatsApp chiudono la sezione: l'ombra deve spegnersi
     entro --section-space, come --shadow-lg-short. */
  .profile-quick-actions .button-primary {
    box-shadow: 0 12px 28px rgba(0, 108, 104, 0.23);
  }

  .areas-grid,
  .areas-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Icona accanto al titolo invece che sopra: riquadri più corti da scorrere. */
  .area-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    padding: 24px;
  }

  .area-card .icon-badge {
    --badge-size: 52px;
  }

  .area-card h3 {
    margin: 0;
    font-size: 22px;
  }

  .area-card > :not(.icon-badge, h3) {
    grid-column: 1 / -1;
  }

  .area-card > h3 + * {
    margin-top: 16px;
  }

  .instagram-card {
    padding: 24px 18px;
  }

  .instagram-grid {
    gap: 6px;
  }

  /* Su telefono l'etichetta "Apri il post" diventa un piccolo tondo con la freccia. */
  .instagram-tile span {
    right: 6px;
    bottom: 6px;
    left: auto;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
  }

  .instagram-tile b {
    display: none;
  }

  .contact-card {
    gap: 22px;
    padding: 30px 20px;
  }
}


/* 11. Footer -----------------------------------------------------------------
   Costruito da script.js. Una riga: logo, Sede, Navigazione e Documenti, larghi
   quanto il loro testo e con lo stesso spazio tra uno e l'altro. In tutte le
   colonne le righe di testo sono alte 24 px, così si allineano. Sotto, al
   centro, "powered by" con il logo gambIT. */

.site-footer {
  padding-top: 32px;
  color: var(--white);
  background: var(--footer-bg);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 28px;     /* dalla base dell'ultima riga alla linea = spazio sopra il contenuto */
}

/* Logo alla misura del footer originale (112 px), più alto del testo: il suo
   centro sta al centro del testo (tra la cima delle etichette e la base
   dell'ultima riga). Sporge di 11 px sopra e 7 sotto le colonne senza
   allungare il footer, e sopra e sotto il logo restano 22 px uguali. */
.footer-logo {
  flex: none;
  width: 112px;
  margin: -11px 0 -7px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 14px;
  line-height: 24px;
}

.footer-column > .label {
  margin-bottom: 8px;
  color: var(--lilac-light);
}

.footer-column p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.footer-column a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.footer-column a:hover,
.footer-column a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 4px;
}

/* Con il dito (telefono, tablet) i link sono alti 44 px. I 10 px in più sopra
   il primo e sotto l'ultimo sporgono dalla colonna, così il testo resta alla
   stessa distanza dall'etichetta e lo spazio sotto non cambia. */
@media (pointer: coarse) {
  .footer-column a {
    min-height: 44px;
  }

  .footer-column > a:first-of-type {
    margin-top: -10px;
  }

  .footer-column > a:last-child {
    margin-bottom: -10px;
  }
}

/* "powered by" e logo gambIT: la base della scritta "gambIT" (a 87,4% dell'altezza
   del logo) sta sulla stessa linea della base di "powered by". */
.footer-credit {
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  text-align: center;
}

/* Interlinea 1: la riga è alta quanto il logo (22 px), così sopra e sotto c'è lo stesso spazio. */
.footer-credit p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1;
}

/* Link al sito di gambIT: area cliccabile alta 44 px, che sporge nello spazio
   sopra e sotto senza cambiare l'altezza della fascia. */
.footer-credit a {
  display: inline-block;
  padding: 11px 4px;
  margin: -11px -4px;
}

.footer-credit a:hover {
  color: var(--white);
}

.footer-credit a:hover img {
  opacity: 1;
}

.footer-credit img {
  --credit-logo: 22px;
  display: inline-block;
  width: auto;
  height: var(--credit-logo);
  margin-left: 4px;
  vertical-align: calc(var(--credit-logo) * -0.126);
  opacity: 0.85;
}

/* Senza JavaScript resta il segnaposto dell'HTML: solo i link legali. */
.footer-bottom {
  display: flex;
  gap: 22px;
  padding-bottom: 30px;
  font-size: 14px;
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Telefono: logo, sotto l'indirizzo, poi Navigazione e Documenti affiancate.
   Tra un blocco e l'altro si vedono 31 px: sotto l'ultima riga di testo restano
   già 7 px vuoti, il logo invece arriva quasi in fondo (da qui i suoi 5 px di margine). */
@media (max-width: 600px) {
  .site-footer {
    padding-top: 32px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding-bottom: 26px;   /* dalla base dell'ultima riga alla linea = spazio sopra il logo */
  }

  .footer-logo,
  .footer-address {
    grid-column: 1 / -1;
  }

  .footer-logo {
    margin: 0 0 5px;
  }
}


/* 12. Finestra "Contattaci" --------------------------------------------------
   Creata da script.js. Su computer la colonna "Chiama" è nascosta: il numero
   è scritto sotto il nome. */

.contact-dialog {
  width: min(760px, calc(100% - 24px));
  max-height: calc(100vh - 24px); /* browser senza dvh */
  max-height: calc(100dvh - 24px);
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.contact-dialog::backdrop {
  background: rgba(15, 47, 43, 0.64);
  backdrop-filter: blur(5px);
}

.contact-dialog-panel {
  padding: 30px;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: var(--radius-lg);
}

.contact-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 10px;
}

.contact-dialog-head h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -1.8px;
  line-height: 0.98;
}

.contact-dialog-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.contact-dialog-close .icon {
  width: 20px;
  height: 20px;
}

.contact-dialog-intro {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 14px;
}

.contact-dialog-list {
  display: grid;
  gap: 10px;
}

/* Una riga per professionista: dati a sinistra, canali a destra. */
.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 14px 14px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.contact-person {
  display: grid;
  gap: 2px;
}

.contact-person strong {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.15;
}

.contact-person span {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.35;
}

.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 8px;
}

/* Tasto di un canale: icona sopra, nome sotto. */
.contact-channel {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 7px 4px;
  color: var(--white);
  background: var(--green-dark);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  transition: background 180ms ease;
}

.contact-channel.is-empty {
  background: transparent;
}

.contact-channel-call {
  display: none;
}

@media (hover: hover) {
  a.contact-channel:hover {
    background: var(--green-deeper);
  }
}

@media (max-width: 860px) {
  .contact-channels {
    grid-template-columns: repeat(4, 72px);
  }

  .contact-channel-call {
    display: grid;
  }
}

@media (max-width: 600px) {
  .contact-dialog {
    width: calc(100% - 16px);
  }

  .contact-dialog-panel {
    padding: 22px 16px;
  }

  .contact-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .contact-person strong {
    font-size: 16px;
  }

  .contact-channels {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .contact-channel {
    min-height: 58px;
  }
}


/* 13. Pagine legali e 404 -------------------------------------------------- */

/* Apertura delle pagine legali: titolo e frase introduttiva. */
.page-intro {
  padding: 178px 0 var(--section-space);
}

.page-intro .page-title {
  max-width: 850px;
}

.page-intro p {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
}

/* Testo: riquadro "In sintesi" a sinistra, informativa a destra. */
.legal-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.65fr) minmax(0, 1.8fr);
  align-items: start;
  gap: clamp(48px, 7vw, 104px);
}

.legal-summary {
  padding: 28px;
  background:
    radial-gradient(circle 160px at 100% 0, rgba(77, 166, 135, 0.2), transparent),
    var(--lilac-light);
  border-top: 5px solid var(--green);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.legal-summary strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 19px;
}

.legal-summary p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.legal-document {
  max-width: 790px;
}

.legal-document .label {
  margin: 0 0 48px;
  color: var(--ink-soft);
}

.legal-document h2 {
  margin: 52px 0 14px;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.6px;
  line-height: 1.16;
}

.legal-document h2:first-of-type {
  margin-top: 0;
}

.legal-document p {
  margin: 0 0 18px;
  color: var(--ink-soft);
}

.legal-document .bullet-list {
  margin: 8px 0 20px;
}

.legal-document .button-row {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

/* Pagina 404: tutta in una schermata, con il logo grande in trasparenza. */
.error-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 150px 0 80px;
}

.error-page .watermark {
  right: -7vw;
  bottom: -18vw;
  width: min(52vw, 680px);
  opacity: 0.075;
}

.error-copy {
  position: relative;
  z-index: 1;
}

.error-code {
  margin: 0 0 22px;
  color: var(--lilac);
  font-family: var(--font-display);
  font-size: clamp(76px, 13vw, 168px);
  font-weight: 700;
  letter-spacing: -7px;
  line-height: 0.72;
}

.error-copy .page-title {
  max-width: 960px;
  margin: 22px 0 24px;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.02;
}

.error-copy > p:not(.error-code) {
  max-width: 650px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
}

@media (max-width: 860px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .page-intro {
    padding: 142px 0 var(--section-space);
  }

  .page-intro p {
    font-size: 16px;
  }

  .legal-document h2 {
    margin-top: 42px;
  }

  .error-page {
    align-items: start;
    padding-top: 160px;
  }

  .error-copy .page-title {
    letter-spacing: -1.7px;
  }
}


/* 14. Movimento ridotto -----------------------------------------------------
   Chi ha chiesto al sistema meno animazioni non vede transizioni né scorrimenti morbidi. */

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}