/* ============================================================
   Poppins ospitato in locale (@fontsource/poppins, licenza OFL).

   Prima arrivava da fonts.googleapis.com con un <link> render-blocking.
   Due problemi: (1) se quella richiesta tardava, la pagina di destinazione
   non era renderizzabile entro i 4 secondi di budget delle view transition
   e la transizione moriva -> la pillola saltava "ogni tanto";
   (2) il CDN di Google riceve l'IP di ogni visitatore, che su un sito
   sanitario europeo con iubenda è una grana in più da non avere.

   font-display: swap -> il testo è leggibile subito, mai invisibile.
   ============================================================ */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
}

/* ============================================================
   Studio Colantoni — stylesheet
   Token portati 1:1 da lib/theme/app_theme.dart e
   lib/widgets/responsive.dart del progetto Flutter.
   ============================================================ */

/* ---------- Token: colori (AppColors) ---------- */
:root {
  --white: #ffffff;
  --primary: #411f25;          
  --secondary: #d05f81;  
  --tertiary: #f7cad5;     
  --primary-dark: rgb(65, 31, 37, 0.4);
  --primary-light: #b98a97;
  --secondary-soft: rgb(245, 202, 212, 0.8);
  --text-dark: #3a2a2e;
  --text-body: rgba(58, 42, 46, 0.8);   /* textDark.withOpacity(0.8) */

  /* ---------- Token: raggi (AppRadius) ---------- */
  --r-xl: 40px;
  --r-lg: 32px;
  --r-md: 24px;
  --r-sm: 16px;

  /* ---------- Ombre ---------- */
  --shadow-card: 0 12px 24px rgba(153, 85, 101, 0.10);
  --shadow-photo: 0 10px 20px rgba(153, 85, 101, 0.15);

  /* ---------- Movimento ----------
     cubic-bezier(0.4, 0, 0.2, 1) è Curves.fastOutSlowIn, la stessa
     curva che Flutter usa di default per AnimatedContainer e Drawer. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-page: 200ms;
  --dur-ui: 200ms;

  /* ---------- Layout (pageHorizontalPadding / gridColumns) ---------- */
  --hpad: 80px;
  --grid-cols: 2;
  --team-ratio: 0.72;      /* cardAspectRatio(4, single: 1.05) */
  --therapy-ratio: 0.59;   /* cardAspectRatio(4, single: 0.92) */
  --display-size: 40px;
}

/* Breakpoints.desktop = 1280 */
@media (max-width: 1279.98px) {
  :root {
    --grid-cols: 2;
    --team-ratio: 0.77;
    --therapy-ratio: 0.64;
  }
}

/* Breakpoints.tablet = 1000 */
@media (max-width: 999.98px) {
  :root {
    --hpad: 40px;
    --grid-cols: 2;
    --team-ratio: 0.90;
    --therapy-ratio: 0.77;
  }
}

/* Breakpoints.mobile = 700 */
@media (max-width: 699.98px) {
  :root {
    --hpad: 20px;
    --grid-cols: 1;
    --team-ratio: 1.05;
    --therapy-ratio: 0.92;
    --display-size: 30px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Ereditata da tutti i discendenti: toglie il flash blu/grigio al tap
     su ogni elemento, .menu-btn e logo compresi. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text-dark);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
}

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

button {
  font-family: inherit;
}

/* Le icone sono SVG inline (sprite in cima al <body>), non un font.
   Il font-icona costringeva a scaricare un file render-blocking, lasciava
   le legature ("spa", "home") come testo nel DOM, e cambiava la larghezza
   degli elementi quando arrivava: è quello che faceva saltare la pillola.
   font-size continua a controllare la dimensione, come con il font. */
.sprite {
  display: none;
}

.icon {
  width: 1em;
  height: 1em;
  font-size: 24px;
  fill: currentColor;
  flex-shrink: 0;
  /* Material Symbols disegna su una griglia -960 960: l'icona è già
     allineata alla baseline del testo che le sta accanto. */
  vertical-align: middle;
  pointer-events: none;
}

/* ---------- Tipografia (textTheme) ---------- */
.display-sm {
  font-size: var(--display-size);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-dark);
  margin: 0;
}

.headline-md {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0;
}

.title-lg {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.title-mg {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-dark);
  margin-top: 20px;
}

.caption-sm-italic {
  font-size: 14px;
  font-style: italic;
  text-decoration: underline;
  margin-bottom: 15px;
}

.caption-sm-bold-italic {
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
  margin-top: 10px;
  margin-bottom: 10px;
}

.body-md {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

/* ---------- Accessibilità ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* ============================================================
   Bottoni (elevatedButtonTheme + OutlinedButton)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 32px;
  border: 0;
  border-radius: var(--r-lg);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-ui) var(--ease);
}

.btn--primary {
  background: var(--primary);
  color: var(--white);
}

.btn--secondary {
  background: var(--secondary);
  color: var(--text-dark);
}

.btn--outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn--outline-sm {
  padding: 16px 28px;
}

.image-centered {
  display: flex;
  justify-content: center; 
}

/* Gli stati hover valgono solo per i puntatori che ce l'hanno davvero.
   Su touch il :hover scatta al tap e ci resta incollato finché non
   tocchi altrove: è metà della sensazione di "scattoso". */
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--primary-dark);
  }

  .btn--secondary:hover {
    background: #f2d98a;
  }

  .btn--outline:hover {
    background: rgba(153, 85, 101, 0.06);
  }
}

/* ============================================================
   RoundedCard / RoundedPill / RoundedPhoto
   ============================================================ */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 24px;
  /* box-shadow: var(--shadow-card); */
}

.review--card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 24px;
  /* box-shadow: var(--shadow-card); */
}

.card--flat {
  box-shadow: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--text-dark);
  font-size: 18x;
  font-weight: 600;
  line-height: 1.5;
}

.pill .icon {
  font-size: 16px;
}

.pill--primary {
  background: var(--primary);
  color: var(--white);
}

.pill--secondary {
  background: var(--secondary);
  color: var(--black);
  margin-top: 15px;
}

/* Cornice colorata attorno alla foto (padding = borderWidth) */
.photo {
  background: var(--secondary);
  padding: 6px;
  border-radius: calc(var(--r-lg) + 6px);
  box-shadow: var(--shadow-photo);
  overflow: hidden;
}

.photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--secondary-soft);
}

.photo--home img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--secondary-soft);
}

.photo--xl {
  border-radius: calc(var(--r-xl) + 6px);
}

.photo--xl img {
  border-radius: var(--r-xl);
}

.photo--md {
  padding: 4px;
  border-radius: calc(var(--r-md) + 4px);
}

.photo--md img {
  border-radius: var(--r-md);
}

.photo--circle {
  display: grid;
  place-items: center;
  aspect-ratio: 1;  
  border-radius: 999px;        /* il cerchio resta un cerchio anche senza height */
  padding: 5px;
}

.photo--circle img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;    
  border-radius: 999px;      /* niente ovali con immagini rettangolari */
  object-fit: cover;
  object-position: top;  /* ritaglio preso dal centro */
  display: block;
}

/* ============================================================
   Navbar (TopNavBar)
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--hpad) 8px;
  background: var(--white);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.brand__mark .icon {
  font-size: 22px;
  color: var(--white);
}

.brand__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Barra di navigazione (desktop / tablet) ──────────────────
   Sottolineatura, non più una pillola che si sposta.

   Il motivo è strutturale: la voce attiva cambia durante un CARICAMENTO
   DI PAGINA. Per animare quel cambiamento serve una view transition, che
   dipende dal browser e da un budget di 4 secondi: quando non ce la fa,
   salta. Qui non c'è nulla da animare fra una pagina e l'altra — lo stato
   attivo è già corretto al primo frame dipinto, ovunque.

   Il movimento resta dove può essere sempre fluido: l'hover, che avviene
   dentro la stessa pagina.
   ------------------------------------------------------------ */
.nav {
  display: flex;
  gap: 4px;
}

.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 16px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-ui) var(--ease);
}

.nav__item .icon {
  font-size: 18px;
  color: var(--primary-light);
  transition: color var(--dur-ui) var(--ease);
}

/* La sottolineatura è in position:absolute: attiva o no, la geometria
   della voce non cambia di un pixel. Niente scarti di layout. */
.nav__item::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-ui) var(--ease),
    background-color var(--dur-ui) var(--ease);
}

.nav__item[aria-current="page"] {
  color: var(--primary);
}

.nav__item[aria-current="page"] .icon {
  color: var(--primary);
}

/* Le transition non partono sullo stato iniziale: al caricamento la
   sottolineatura è già lì, ferma, senza animazione da perdere. */
.nav__item[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .nav__item:hover {
    color: var(--primary);
  }

  .nav__item:hover .icon {
    color: var(--primary);
  }

  /* Giallo in hover, bordeaux quando è la pagina corrente: gli stessi due
     colori delle cornici delle foto. */
  .nav__item:hover::after {
    transform: scaleX(1);
    background: var(--secondary);
  }

  .nav__item[aria-current="page"]:hover::after {
    background: var(--primary);
  }
}

/* Pulsante menu (mobile) */
.menu-btn {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  cursor: pointer;
  place-items: center;
}

.menu-btn .icon {
  font-size: 24px;
}

/* ---------- Drawer (AppEndDrawer) ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-page) var(--ease),
    visibility var(--dur-page) var(--ease);
  z-index: 40;
  touch-action: none;
}

.scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(304px, 85vw);
  padding: 24px;
  background: var(--white);
  border-radius: 32px 0 0 32px;
  /* translate3d forza il compositing sulla GPU: il pannello scorre
     senza far ridisegnare la pagina sotto. */
  transform: translate3d(100%, 0, 0);
  transition: transform var(--dur-page) var(--ease);
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open {
  transform: translate3d(0, 0, 0);
}

.drawer .brand {
  flex: none;
}

.drawer__list {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.drawer__list li {
  margin-bottom: 12px;
}

.drawer__item {
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--secondary-soft);
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.drawer__item .icon {
  color: var(--primary);
}

.drawer__item[aria-current="page"] {
  background: var(--primary);
  color: var(--white);
}

.drawer__item[aria-current="page"] .icon {
  color: var(--white);
}

@media (max-width: 699.98px) {
  .nav {
    display: none;
  }

  .menu-btn {
    display: grid;
  }

  .brand__name {
    font-size: 15px;
  }
}

/* ============================================================
   Struttura pagina
   ============================================================ */
.page {
  padding: 32px var(--hpad);
}

/* ============================================================
   Cambio pagina (View Transitions API)

   Solo una dissolvenza fra la pagina vecchia e la nuova. NON c'è più
   nessun view-transition-name condiviso: era la pillola che scivolava,
   ed era la parte fragile. Un elemento condiviso deve essere fotografato
   su entrambe le pagine e ritrovato identico; se la transizione non parte
   in tempo, salta di colpo.

   Una dissolvenza non ha questo problema: se non parte, la pagina cambia
   e basta. Assente, non scattosa.

   Vuoi toglierla del tutto? Cancella il blocco @view-transition qui sotto:
   il sito continua a funzionare identico, senza animazione.
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-page);
  animation-timing-function: var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- Hero ---------- */
.hero {
  display: flex;
  align-items: center;
  gap: 48px;
}

.hero__text {
  flex: 6;
  min-width: 0;
}

.social_buttons_home {
  min-width: 0;
  margin: 20px 0 0 0;
  /* Layout dei pulsanti social.
     Default (desktop/tablet): allineati a SINISTRA, come i pulsanti sopra. */
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

/* Su mobile lo hero è già centrato: qui centriamo anche i social. */
@media (max-width: 699.98px) {
  .social_buttons_home {
    justify-content: center;
  }
}

.hero__media {
  flex: 5;
  max-width: 420px;
}

.hero__media .photo {
  aspect-ratio: 1;
}

.hero__title {
  margin: 20px 0 16px;
}

.hero__lead {
  max-width: 480px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

@media (max-width: 699.98px) {
  .hero {
    flex-direction: column-reverse;
    align-items: center;
    gap: 32px;
    text-align: center;
  }

  .hero__media {
    flex: none;
    width: 260px;
    max-width: 260px;
  }

  .hero__lead {
    max-width: none;
  }

  .hero__actions {
    justify-content: center;
  }
}

/* ---------- Striscia "about" (_AboutStrip) ---------- */
.about {
  margin-top: 64px;
  background: var(--secondary-soft);
  padding: 28px;
  box-shadow: var(--shadow-card);
  border-radius: var(--r-lg);
  display: flex;
  align-items: flex-start;
}

.about__item {
  flex: 1;
  padding: 0 12px;
  text-align: center;
}

.about__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--primary);
  display: grid;
  place-items: center;
}

.about__icon .icon {
  font-size: 24px;
  color: var(--white);
}

.about__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
}

@media (max-width: 699.98px) {
  .about {
    flex-direction: column;
    align-items: center;
  }

  .about__item {
    flex: none;
    align-self: stretch;
    padding: 12px 0;
  }
}

/* ---------- Sezioni di anteprima (_PreviewSection) ---------- */
.preview {
  margin-top: 64px;
  background: var(--primary);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 24px;
}

.preview + .preview {
  margin-top: 40px;
}

.preview__text {
  flex: 1;
  min-width: 0;
}

.preview__title {
  color: var(--white);
  margin-bottom: 10px;
}

.preview__subtitle {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 699.98px) {
  .preview {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
}

/* ---------- Intestazione di sezione ---------- */
.section-head {
  text-align: center;
}

.section-head__title {
  margin: 18px 0 12px;
}

.section-head__lead {
  max-width: 560px;
  margin-inline: auto;
}

/* ---------- Griglie ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: 28px;
  margin-top: 40px;
}

.grid-aree-intervento {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: 28px;
  margin-top: 40px;
}

/* ---------- Card team (_TeamCard) ---------- */
.team-card {
  aspect-ratio: var(--team-ratio);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-card .photo {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.team-card__name {
  margin: 16px 0 6px;
  font-size: 17px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-card__bio {
  flex: 1;
  margin-top: 10px;
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Card terapia (_TherapyCard) ---------- */
.therapy-card {
  aspect-ratio: var(--therapy-ratio);
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.therapy-card .photo {
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}

.therapy-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.therapy-card__badge {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.therapy-card__badge .icon {
  font-size: 18px;
  color: var(--white);
}

.therapy-card__title {
  font-size: 16px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.therapy-card__desc {
  flex: 1;
  margin: 10px 0;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Instagram (InstagramShowcase)
   ============================================================ */
.instagram {
  margin-top: 64px;
  text-align: center;
}

.instagram__title {
  margin: 18px 0 28px;
}

.ig-grid {
  display: grid;
  /* Post Instagram — layout auto-adattivo.
     - ogni tile ha una grandezza MASSIMA di 260px
     - fino a 4 per riga quando c'è spazio (il max-width limita a 4 colonne)
     - al restringersi passano da soli a 3, poi 2 (auto-fit)
     - min(100%, 240px) evita traboccamenti su schermi strettissimi
     - i tile restano centrati quando l'ultima riga è incompleta */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 260px));
  justify-content: center;
  gap: 20px;
  max-width: 1100px;          /* 4×260 + 3×20 → non più di 4 colonne */
  margin-inline: auto;
}
/* Sotto i 600px: una sola colonna a tutta larghezza (il "1" finale),
   così si evita un singolo tile da 260px centrato con margini larghi. */
@media (max-width: 599.98px) {
  .ig-grid {
    grid-template-columns: 1fr;
  }
}

.ig-card {
  display: block;
  border-radius: var(--r-md);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-ui) var(--ease);
}

@media (hover: hover) {
  .ig-card:hover {
    transform: translate3d(0, -4px, 0);
  }
}

.ig-card .photo {
  aspect-ratio: 1;
}

.instagram__cta {
  margin-top: 28px;
}

/* Stato di caricamento */
.spinner {
  width: 36px;
  height: 36px;
  margin: 40px auto;
  border: 3px solid rgba(153, 85, 101, 0.2);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
  will-change: transform;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Stato di errore */
.ig-error {
  background: var(--secondary-soft);
  border-radius: var(--r-md);
  padding: 28px;
  box-shadow: none;
}

.ig-error .icon {
  font-size: 32px;
  color: var(--primary);
}

.ig-error__text {
  margin: 12px 0 16px;
}

/* ============================================================
   Footer (_Footer) — RISTRUTTURATO
   ------------------------------------------------------------
   Prima era una barra a due blocchi (brand + copyright).
   Le linee guida chiedono un footer, presente su TUTTE le pagine,
   con: telefono, indirizzo, email, social e link rapidi alle tre
   sezioni principali. Ora è quindi una griglia a colonne.
   Palette invariata: sfondo --primary, testo bianco, angoli in alto
   arrotondati (--r-xl), come nell'originale.
   ============================================================ */
.footer {
  margin-top: auto;
  background: var(--primary);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 44px var(--hpad) 28px;
}

/* Griglia principale del footer: 4 colonne su desktop
   (brand | contatti | link rapidi | social). */
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.footer__brand .icon {
  color: var(--white);
  font-size: 26px;
}

.footer__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
}

/* Titolo di colonna (Contatti / Link rapidi / Seguici) */
.footer__col-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 14px;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list li {
  margin-bottom: 12px;
}

/* Voci di contatto e link rapidi: stesso stile, colore bianco tenue,
   con icona a sinistra. In hover diventano bianco pieno. */
.footer__link {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color var(--dur-ui) var(--ease);
}

.footer__link .icon {
  font-size: 18px;
  color: var(--secondary);
  flex-shrink: 0;
  margin-top: 1px;
}

@media (hover: hover) {
  .footer__link:hover {
    color: var(--white);
  }
}

/* Riga social: pulsanti circolari con il marchio dentro. */
.footer__social {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer__social a {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-ui) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.footer__social a svg {
  width: 20px;
  height: 20px;
  fill: var(--white);
}

@media (hover: hover) {
  .footer__social a:hover {
    background: rgba(255, 255, 255, 0.24);
  }
}

/* Riga in basso: copyright + link alla privacy policy. */
.footer__bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer__copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.footer__legal {
  display: flex;
  gap: 18px;
}

.footer__legal a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease);
}

@media (hover: hover) {
  .footer__legal a:hover {
    color: var(--white);
  }
}

/* Tablet: 2 colonne. Mobile: 1 colonna centrata. */
@media (max-width: 999.98px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 699.98px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .footer__brand {
    justify-content: center;
  }

  .footer__link {
    justify-content: center;
  }

  .footer__social {
    justify-content: center;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Il footer resta in fondo anche con pagine corte (SliverFillRemaining) */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout > main {
  flex: 1;
}

/* ============================================================
   ▓▓▓ COMPONENTI NUOVI (ristrutturazione del sito) ▓▓▓
   Tutto ciò che segue è stato AGGIUNTO per le nuove sezioni.
   I token (colori, raggi, ombre, tipografia) sono quelli già
   definiti in :root — nessun colore nuovo, palette invariata.
   ============================================================ */

/* ---------- Utility di spaziatura sezioni ---------- */
/* Le nuove sezioni della home usano un margine verticale coerente
   con .about / .preview dell'originale (64px). */
.section {
  margin-top: 64px;
}

.section--tight {
  margin-top: 40px;
}

/* ============================================================
   Home · "Cosa facciamo"
   Tre schede affiancate che spiegano l'attività dello studio.
   Riusa .card e le griglie a colonne dei token esistenti.
   ============================================================ */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.features .full-width-item {
  grid-column: 1 / -1;
  text-align: center;
}

.feature {
  padding: 28px 24px;
  text-align: center;
}

.feature__icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--secondary-soft);
  display: grid;
  place-items: center;
  align-items: center;
}

.feature__icon .icon {
  font-size: 28px;
  color: var(--primary);
}

.feature__title {
  margin-bottom: 8px;
}

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

/* ============================================================
   Home · "Aree di intervento"
   Introduzione + griglia di 4 aree, ognuna con link diretto
   alla pagina Terapie (o alla sua pagina di dettaglio).
   ============================================================ */

/* La card-area è una .card cliccabile: la resa è quella di
   .therapy-card ma con un link "Scopri di più" in fondo. */
.area-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-ui) var(--ease),
    box-shadow var(--dur-ui) var(--ease);
}

@media (hover: hover) {
  .area-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 18px 32px rgba(153, 85, 101, 0.16);
  }
}

.area-card .photo {
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}

.area-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.area-card__badge {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.area-card__badge .icon {
  font-size: 20px;
  color: var(--white);
}

.area-card__title {
  font-size: 16px;
  line-height: 1.2;
}

.area-card__desc {
  flex: 1;
  margin: 12px 0 14px;
  font-size: 13.5px;
}

/* "Scopri di più →": link testuale che eredita l'hover dalla card. */
.area-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.area-card__more .icon {
  font-size: 18px;
  transition: transform var(--dur-ui) var(--ease);
}

@media (hover: hover) {
  .area-card:hover .area-card__more .icon {
    transform: translateX(4px);
  }
}

/* ============================================================
   Home · "Cosa dicono di noi" (recensioni pazienti)
   ============================================================ */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.review {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  /* Card recensione: niente ombra, bordo nel colore secondario. */
  box-shadow: none;
  border: 2px solid var(--secondary);
}

/* Fila di stelline. Le stelle "piene" usano --secondary (giallo),
   coerente con gli accenti del sito. */
.review__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.review__stars .icon {
  font-size: 18px;
  color: var(--secondary);
}

.review__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
}

.review__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* Avatar con iniziali: niente immagine da caricare, zero richieste. */
.review__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}

.review__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.review__meta {
  font-size: 12px;
  color: var(--text-body);
}

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

.reviews-carousel {
  position: relative;
  max-width: 680px;
  margin: 40px auto 0;
}

.reviews-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--r-lg);
  outline: none;
}
.reviews-track::-webkit-scrollbar { display: none; }

.reviews-track:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
}

.reviews-track .review {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* Titolo che sostituisce le stelle. */
.review__title {
  margin-bottom: 12px;
  color: var(--primary);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease),
    opacity var(--dur-ui) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.carousel-btn .icon {
  font-size: 22px;
  color: var(--white);
}

.carousel-btn--prev .icon {
  transform: scaleX(-1);
}

@media (hover: hover) {
  .carousel-btn:not(:disabled):hover {
    background: var(--primary-dark);
  }
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--primary-light);
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease),
    transform var(--dur-ui) var(--ease);
}

.carousel-dot.is-active {
  background: var(--primary);
  transform: scale(1.35);
}

/* =============================================================================
   Carosello recensioni — comandi su mobile
   Con 20+ recensioni la fila di puntini era più larga del telefono e spingeva
   le frecce fuori dallo schermo. Su mobile ne restano visibili 5 attorno a
   quello attivo (i due esterni rimpiccioliti, così si capisce che la fila
   continua); le frecce restano sempre al loro posto.
   ============================================================================= */
@media (max-width: 699.98px) {

  .reviews-carousel { max-width: 100%; }

  .carousel-controls {
    gap: 12px;
    /* Le frecce non si comprimono mai: lo spazio lo cede la fila di puntini. */
    flex-wrap: nowrap;
  }

  .carousel-btn {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;          /* area di tocco piena, 48px è il minimo comodo */
  }

  .carousel-dots {
    flex: 0 1 auto;
    min-width: 0;
    gap: 10px;
    /* Rete di sicurezza: se il JS qui sotto non gira, i puntini vanno a capo
       invece di spingere fuori le frecce. */
    flex-wrap: wrap;
    justify-content: center;
  }

  .carousel-dot { flex: 0 0 auto; }

  /* Stati applicati dal JS */
  .carousel-dot.is-hidden { display: none; }

  .carousel-dot.is-edge {
    transform: scale(.6);
    opacity: .5;
  }

  .carousel-dot.is-edge.is-active {
    transform: scale(1.35);
    opacity: 1;
  }
}

/* Bonus: le schede prendevano tutte l'altezza della recensione più lunga,
   quindi quelle brevi mostravano il bordo con dentro mezzo schermo vuoto
   (si vede bene nello screenshot). Così ogni scheda finisce dov'è il testo. */
.reviews-track { align-items: flex-start; }
/* ============================================================
   Pagine di dettaglio terapia + presentazione in evidenza
   (usate in "Chi e dove siamo" per la Dott.ssa Colantoni e
   nelle 4 pagine di approfondimento terapia).
   ------------------------------------------------------------
   .feature-hero = blocco a due colonne (foto + testo), come lo
   hero della home ma riutilizzabile.
   ============================================================ */
.feature-hero {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 16px;
}

.feature-hero__media {
  flex: 5;
  max-width: 380px;
}

/* .feature-hero__media .photo {
  aspect-ratio: 1;
} */

.feature-hero__text {
  flex: 6;
  min-width: 0;
}

.feature-hero__title {
  margin: 16px 0 14px;
}

.feature-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 699.98px) {
  .feature-hero {
    flex-direction: column;
    text-align: center;
  }

  .feature-hero__media {
    width: 240px;
    max-width: 240px;
  }

  .feature-hero__actions {
    justify-content: center;
  }
}

/* ---------- Corpo di approfondimento (pagine terapia) ---------- */
/* Blocchi di testo lungo: titoletto + paragrafo, con misura di
   lettura contenuta (max 70ch) per leggibilità. */
.prose {
  max-width: 760px;
  margin: 40px auto 0;
}

.prose__block + .prose__block {
  margin-top: 28px;
}

.prose__h {
  margin-bottom: 10px;
}

.prose__p {
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.65;
}

.prose__p + .prose__p {
  margin-top: 12px;
}

/* Lista puntata con pallino colorato (in-brand). */
.prose__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.prose__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.5;
}

.prose__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--secondary);
  box-shadow: 0 0 0 3px rgba(153, 85, 101, 0.15);
}

/* ---------- Corpo di approfondimento (card persona chi siamo) ---------- */

.prose_mini {
  max-width: 360px;
  margin: 40px auto 0;
}

.prose__mini__block + .prose__mini__block {
  margin-top: 28px;
}

.prose__mini__h {
  margin-bottom: 8px;
}

.prose__mini__p {
  color: var(--text-body);
  font-size: 13px;
  line-height: 1.2;
}

.prose__mini__p + .prose__mini__p {
  margin-top: 10px;
}

/* Lista puntata con pallino colorato (in-brand). */
.prose__mini__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.prose__mini__list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 10px;
  color: var(--text-body);
  font-size: 12px;
  line-height: 1.2;
  align-content: start;
  text-align: start;
}

.prose__mini__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--secondary);
  box-shadow: 0 0 0 3px rgba(153, 85, 101, 0.15);
}

/* Link "torna indietro" in cima alle pagine di dettaglio. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.back-link .icon {
  font-size: 18px;
  transform: scaleX(-1); /* freccia rivolta a sinistra */
}

@media (hover: hover) {
  .back-link:hover {
    text-decoration: underline;
  }
}

/* Riquadro CTA a fine pagina (contattaci / prenota). */
.cta-band {
  margin-top: 56px;
  background: var(--primary);
  border-radius: var(--r-lg);
  padding: 36px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.cta-band__title {
  color: var(--white);
  margin-bottom: 10px;
}

.cta-band__lead {
  color: rgba(255, 255, 255, 0.9);
  max-width: 520px;
  margin: 0 auto 24px;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ============================================================
   Chi e dove siamo · galleria foto dello studio
   ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  justify-content: center;
}

.gallery .photo {
  aspect-ratio: 4 / 3;
}

@media (max-width: 999.98px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ============================================================
   Chi e dove siamo · partner e visite specialistiche
   ============================================================ */
.partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.partner {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 22px;
}

.partner .photo {
  width: 120px;
  height: 90px;
  flex-shrink: 0;
}

.partner__title {
  margin-bottom: 4px;
  font-size: 17px;
}
.partner__subtitle {
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--secondary);
}

.partner__desc {
  font-size: 13.5px;
}

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

  .partner {
    flex-direction: column;
    text-align: center;
  }

  .partner .photo {
    width: 160px;
    height: 120px;
  }
}

/* ============================================================
   Chi e dove siamo · "Dove siamo" (contatti + mappa)
   ------------------------------------------------------------
   Blocco a due colonne: a sinistra i contatti, a destra la mappa.
   ============================================================ */
.where {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  margin-top: 40px;
  align-items: stretch;
}

.where__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ogni contatto è una riga con icona in cerchietto + testo/link. */
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
  color: var(--text-dark);
}

.contact-row__icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--secondary-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.contact-row__icon .icon {
  font-size: 22px;
  color: var(--primary);
}

.contact-row__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}

.contact-row__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
}

a.contact-row {
  transition: transform var(--dur-ui) var(--ease);
}

@media (hover: hover) {
  a.contact-row:hover .contact-row__value {
    color: var(--primary);
  }
}

/* Pulsante WhatsApp: verde del marchio, testo bianco. Unico colore
   fuori palette ammesso perché è l'identità visiva di WhatsApp. */
.btn--whatsapp {
  background: #25d366;
  color: var(--white);
}

@media (hover: hover) {
  .btn--whatsapp:hover {
    background: #1ebe5b;
  }
}

.btn--whatsapp svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ---------- Mappa: caricamento su clic (click-to-load) ----------
   La mappa Google è un iframe verso un dominio terzo: caricarla
   subito trasmette l'IP del visitatore a Google prima di qualsiasi
   consenso (è il caso "Google Fonts" di Monaco). Qui la mappa parte
   solo dopo un clic esplicito dell'utente: di default nessuna
   richiesta a Google, quindi nessun banner preventivo necessario.
   Il clic vale come consenso. Vedi assets/js/map.js. */
.map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 320px;
  background: var(--secondary-soft);
}

.map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  border: 0;
  width: 100%;
  background: var(--secondary-soft);
  font-family: inherit;
}

.map__placeholder .icon {
  font-size: 40px;
  color: var(--primary);
}

.map__hint {
  font-size: 13px;
  color: var(--text-body);
  max-width: 320px;
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
}

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

/* ============================================================
   Curriculum in evidenza (sezione ancorata #curriculum)
   Aperta dal pulsante "Consulta il curriculum" nella pagina
   Chi e dove siamo. È una sezione interna (nessun PDF esterno da
   allegare), così il pulsante è già funzionante.
   ============================================================ */
.cv {
  margin-top: 56px;
  background: var(--secondary-soft);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--shadow-card);
}

.cv__title {
  margin-bottom: 20px;
}

.cv__group + .cv__group {
  margin-top: 22px;
}

.cv__group-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}
/* ============================================================
   Card informative con pill (es. "Quando rivolgerti a lei" /
   "Formazione"). Due varianti a colori invertiti.
   I sotto-elementi sono <li> (container, non bottoni).
   ============================================================ */

/* Griglia opzionale: due card affiancate, impilate su mobile. */
.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 767.98px) {
  .info-cards {
    grid-template-columns: 1fr;
  }
}

.info-card {
  border-radius: var(--r-xl);
  padding: 40px 28px;
  box-shadow: var(--shadow-card);
}

.info-card__title {
  text-align: center;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 28px;
  font-size: clamp(30px, 5vw, 50px);   /* titolone responsive */
}

.info-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* La "pillola": container arrotondato, testo centrato. */
.info-pill {
  border-radius: 999px;
  padding: 16px 26px;
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(15px, 2.4vw, 18px);
}

/* --- Variante SCURA (Quando rivolgerti a lei) --- */
.info-card--dark { background: var(--primary); }
.info-card--dark .info-card__title { color: var(--secondary-soft); }
.info-card--dark .info-pill {
  background: var(--secondary-soft);
  color: var(--primary);
}

/* --- Variante CHIARA (Formazione) --- */
.info-card--light { background: var(--secondary-soft); }
.info-card--light .info-card__title { color: var(--primary); }
.info-card--light .info-pill {
  background: var(--primary);
  color: var(--secondary-soft);
}
/* =============================================================================
   ▓▓▓ RESTYLING — posizionamento e finiture ▓▓▓
   Va in fondo al file: diverse regole qui correggono valori scritti sopra
   e contano sull'ordine di cascata.
   ============================================================================= */

:root {
  --black: #1b1114;                 /* mancava: .pill--secondary lo usava a vuoto */
  --surface: #fdf8f9;               /* fondo tenue per i blocchi "quieti" */
  --hairline: rgba(65, 31, 37, 0.10);
  --page-max: 1200px;               /* misura di lettura su schermi grandi */

  /* Ombra a due livelli: una vicina che stacca il bordo, una lontana e
     morbida che dà profondità. Meno "adesivo" della singola ombra. */
  --shadow-soft: 0 1px 2px rgba(65, 31, 37, .05), 0 14px 30px rgba(65, 31, 37, .07);
  --shadow-lift: 0 2px 6px rgba(65, 31, 37, .07), 0 26px 50px rgba(65, 31, 37, .14);
}

/* --- Correzioni ------------------------------------------------------------ */
.pill { font-size: 15px; letter-spacing: .01em; }        /* era "18x": scartata */
.pill--secondary { margin-top: 0; background: var(--tertiary); color: var(--primary); }

/* Pillole affiancate invece che impilate dal margin-top. */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- Misura della pagina --------------------------------------------------- */
/* Il testo arrivava a righe di 1700px su desktop. */
.page,
.topbar {
  width: 100%;
  max-width: calc(var(--page-max) + var(--hpad) * 2);
  margin-inline: auto;
}

.page { padding-top: 40px; padding-bottom: 8px; }

.footer__grid,
.footer__bottom {
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Navbar agganciata in alto: su una pagina lunga come questa serve. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--hairline);
}

/* Le ancore (#curriculum, #dove-siamo) non finiscono sotto la navbar. */
[id] { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Intestazioni di sezione ----------------------------------------------- */
.section-head__title { margin: 16px 0 0; letter-spacing: -.015em; }

/* Trattino colorato: dice "qui inizia una sezione" senza aggiungere testo.
   È l'unico elemento decorativo ricorrente. */
.section-head__title::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: var(--secondary);
}

.section-head__lead { margin-top: 16px; }
.section-head > .pill { background: var(--tertiary); color: var(--primary); }

@media (min-width: 1000px) { .section { margin-top: 88px; } }

/* --- Presentazione (feature-hero) ------------------------------------------ */
.feature-hero { gap: 56px; margin-top: 8px; }
.feature-hero__media { max-width: 400px; }

/* Ritratto verticale: la cornice resta identica qualunque foto caricherai. */
.feature-hero__media .photo { aspect-ratio: 4 / 5; }

.feature-hero__title { margin: 16px 0 18px; letter-spacing: -.02em; text-wrap: balance; }

.feature-hero__text .body-md { max-width: 62ch; font-size: 16.5px; line-height: 1.65; }
.feature-hero__text .body-md + .body-md { margin-top: 14px; }

/* Frase-chiave del metodo: filetto colorato, diventa una citazione. */
.hero-quote {
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 4px solid var(--secondary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
  color: var(--text-dark);
}

.feature-hero__actions { margin-top: 28px; }

.btn--primary {
  box-shadow: 0 10px 22px rgba(65, 31, 37, .22);
  transition: background-color var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease);
}

@media (hover: hover) {
  .btn--primary:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(65, 31, 37, .28);
  }
}

.btn:active { transform: translateY(0); }

@media (max-width: 699.98px) {
  .feature-hero { gap: 28px; }
  .feature-hero__media { width: 220px; max-width: 220px; }
  .feature-hero__text .body-md { max-width: none; }
  .hero-quote {
    border-left: 0;
    border-top: 4px solid var(--secondary);
    border-radius: 0 0 var(--r-md) var(--r-md);
  }
}

/* --- Schede "Quando rivolgerti a lei" / "Formazione" ------------------------ */
.section .info-cards { margin-top: 40px; }
.info-cards { gap: 28px; }

.info-card { padding: 34px 26px 30px; box-shadow: var(--shadow-soft); }

/* Il titolone da 50px schiacciava le pillole: qui è proporzionato. */
.info-card__title {
  margin-bottom: 22px;
  font-size: clamp(21px, 2.4vw, 27px);
  letter-spacing: -.01em;
}

.info-card__list { gap: 12px; }

.info-pill {
  padding: 14px 22px;
  font-size: 15px;
  transition: transform var(--dur-ui) var(--ease);
}

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

/* --- Collaboratrici --------------------------------------------------------- */
.grid { gap: 24px; }

/* Tre schede in una griglia a 2 colonne lasciavano un'orfana in fondo. */
.grid--team { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* Il vuoto enorme sotto il testo veniva da aspect-ratio: 0.72, che imponeva
   un'altezza fissa. Ora l'altezza la decide il contenuto. */
.team-card {
  aspect-ratio: auto;
  position: relative;
  overflow: hidden;
  padding: 0 22px 28px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease);
}

/* Fascia sfumata dietro il ritratto: dà un "sopra" e un "sotto" alla scheda. */
.team-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 118px;
  background: linear-gradient(180deg, var(--tertiary), rgba(247, 202, 213, 0));
}

.team-card > * { position: relative; }
.team-card .photo { width: 124px; height: 124px; margin-top: 30px; }
.team-card__name { margin: 18px 0 10px; font-size: 18px; }
.team-card__bio { flex: 0 1 auto; margin-top: 14px; font-size: 14px; line-height: 1.55; margin-left: 8px; margin-right: 8px;}

@media (hover: hover) {
  .team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}

/* --- Partner ---------------------------------------------------------------- */
.partner {
  gap: 18px;
  padding: 20px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease);
}

.partner .photo { width: 112px; height: 112px; }
.partner__desc { font-size: 14px; line-height: 1.55; }

@media (hover: hover) {
  .partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}

/* --- Galleria dello studio -------------------------------------------------- */
.gallery .photo img { transition: transform 450ms var(--ease); }
@media (hover: hover) { .gallery .photo:hover img { transform: scale(1.06); } }

/* --- Curriculum -------------------------------------------------------------- */
.cv {
  margin-top: 64px;
  padding: 40px 34px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}

.cv__title { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--primary); }

/* Tre blocchi impilati → tre schede affiancate, si scorrono con l'occhio. */
.cv__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.cv__group {
  padding: 24px 22px;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.cv__group + .cv__group { margin-top: 0; }

.cv__group-title {
  margin-bottom: 12px;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cv__group .prose__list { margin-top: 0; }
.cv__group .prose__list li:last-child { margin-bottom: 0; }

/* --- Dove siamo -------------------------------------------------------------- */
.where { gap: 28px; }

/* La colonna contatti diventa una scheda: stesso peso visivo della mappa,
   invece di galleggiare sul bianco. */
.where__info {
  gap: 6px;
  justify-content: center;
  padding: 26px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.contact-row {
  align-items: center;
  padding: 12px;
  border-radius: var(--r-md);
  transition: background-color var(--dur-ui) var(--ease);
}

.contact-row__value { font-size: 15.5px; }

@media (hover: hover) {
  a.contact-row:hover { background: rgba(247, 202, 213, .5); }
}

.where__info .btn--whatsapp { margin-top: 14px; box-shadow: 0 10px 22px rgba(37, 211, 102, .28); }

.map { min-height: 380px; border: 1px solid var(--hairline); }
@media (max-width: 999.98px) { .map { min-height: 320px; } }

/* --- Ritocchi generali -------------------------------------------------------- */
.card { box-shadow: var(--shadow-soft); }
.photo { box-shadow: 0 8px 18px rgba(65, 31, 37, .12); }
.footer { margin-top: 72px; }