/* ==========================================================================
   TRICOGENESIS — Stylesheet
   Ricostruito da export Framer. Design tokens estratti dall'originale.
   Breakpoint: desktop > 1024px · tablet ≤ 1024px · mobile ≤ 810px
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Colori */
  --color-dark:  #22292a;   /* sezioni scure, testi titoli */
  --color-slate: #657f89;   /* accento blu-grigio */
  --color-gray:  #72757b;   /* testo secondario */
  --color-cream: #f5f5f0;   /* fondo sezioni crema */
  --color-light: #f5f5f5;   /* fondo sezioni grigio chiaro */
  --color-white: #fff;

  /* Tipografia */
  --font-heading: "Ysabeau SC", serif;
  --font-body:    "Open Sans", sans-serif;
  --font-ui:      "Raleway", sans-serif;

  /* Layout */
  --container-max: 113.3rem;     /* 1813px: larghezza canvas design */
  --container-pad: 6.875rem;     /* 110px: padding orizzontale standard */
  --section-pad-y: 7.5rem;       /* 120px: padding verticale sezioni */
  --radius: 15px;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray);
  background: var(--color-white);
}

h1, h2, h3, h4, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Sezioni ---------- */
.section { padding-block: var(--section-pad-y); }
.section-dark  { background: var(--color-dark);  color: var(--color-white); }
.section-cream { background: var(--color-cream); }
.section-light { background: var(--color-light); }

.section h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;          /* 40px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-dark);
}
.section-dark h2 { color: var(--color-white); }

/* Header di sezione: titolo a sinistra, bottone a destra */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 4.5rem;
}
/* La linea sotto il titolo si estende fino al bottone.
   Colore: accent su fondo chiaro, bianca su fondo scuro */
.section-header .underlined {
  flex: 1;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-slate);
}
.section-dark .section-header .underlined { border-color: var(--color-white); }

/* Variante team: linea a sinistra del titolo */
.section-header .line-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.section-header .line-left::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-slate);
}
.section-dark .section-header .line-left::before { background: var(--color-white); }

/* Header di sezione centrato */
.section-header-center {
  max-width: 50rem;
  margin: 0 auto 4rem;
  text-align: center;
}
.section-header-center p { margin-top: 1.5rem; }

/* ---------- Griglie ---------- */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-block;
  padding: 15px 35px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.875rem;       /* 14px */
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.btn-outline {
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn-outline:hover { background: var(--color-white); color: var(--color-dark); }
.btn-solid {
  background: var(--color-slate);
  color: var(--color-white);
}
.btn-solid:hover { background: var(--color-dark); }
.btn-ghost {
  border-color: var(--color-slate);
  color: var(--color-slate);
}
.btn-ghost:hover { background: var(--color-slate); color: var(--color-white); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 1100;   /* sopra le mappe Leaflet (controlli z-index 1000) e il resto */
  box-shadow: 0 1px 0 rgb(0 0 0 / 5%);
}
.nav-wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 0.625rem;
}
.nav-logo img { height: 4.5rem; }
.nav-menu { flex: 1; }
.nav-menu > ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.nav-menu a {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-slate);
}
.nav-menu a:hover { color: var(--color-dark); }
.nav-lang img { width: 1.75rem; }

/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.4rem;
  border: 4px solid transparent;
  border-top-color: currentColor;
  vertical-align: middle;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  padding: 0.75rem 0;
  background: var(--color-white);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
}
.dropdown li a {
  display: block;
  padding: 0.5rem 1.25rem;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
}

/* Barra "menu" + X dell'overlay mobile (nascosta su desktop) */
.nav-mobile-bar { display: none; }

/* Hamburger (nascosto su desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-dark);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  background: url("../assets/hero-bg.png") center / cover no-repeat;
  padding-block: 9.375rem;   /* 150px */
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  max-width: 50rem;
  text-align: center;
  color: var(--color-white);
}
.hero-emblem { width: 19rem; }
.hero h1 {
  font-family: var(--font-heading);
  font-size: 3.125rem;       /* 50px */
  font-weight: 500;
  line-height: 1.15;
}

/* ==========================================================================
   HERO PAGINE INTERNE
   ========================================================================== */
.page-hero {
  background: var(--color-dark) center / cover no-repeat;
  padding-block: 6rem;
}
.page-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
.page-hero-logo { width: 19.25rem; }   /* 308px */
.page-hero-kicker {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-white);
}
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: 3.125rem;       /* 50px */
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-white);
}
.page-hero .btn { margin-top: 1rem; }
/* Titolo hero in maiuscolo pieno (pagina sopracciglia) */
.page-hero .h1-uppercase { text-transform: uppercase; }
/* Hero a fondo slate pieno senza foto (pagina blog) */
.page-hero-solid { background: #6e828c; }
/* Seconda riga del titolo hero in maiuscolo (pagina consulenza) */
.page-hero h1 .h1-up-line { text-transform: uppercase; }
/* Intro testuale centrata (pagina blog) */
.blog-intro .container {
  max-width: 58rem;
  text-align: center;
}
.blog-intro p { font-size: 0.9375rem; }
.blog-intro p + p { margin-top: 2rem; }
/* Lista articoli del blog: griglia a 2 colonne */
.blog-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 3.5rem;
}
.blog-list .post-card img {
  width: 100%;
  aspect-ratio: 1.35;
  object-fit: cover;
}
.blog-list .post-card { background: transparent; }
.blog-list .post-body { padding: 1.5rem 0 0; }
/* Paginazione */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 4rem;
}
.page-num,
.page-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--color-dark);
  transition: background 0.15s, color 0.15s;
}
.page-num:hover,
.page-arrow:hover { background: #e7eaeb; }
.page-num.is-current {
  background: var(--color-slate);
  color: var(--color-white);
}
.page-arrow[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}
.page-ellipsis {
  padding: 0 0.25rem;
  color: var(--color-gray);
}

/* ==========================================================================
   SEZIONE INTRO PAGINE INTERNE (pannello crema + testo con feature)
   ========================================================================== */
.intro-split .cols-2 {
  align-items: flex-start;
  gap: 5rem;
}
/* Pannello crema full-bleed: parte dal bordo sinistro della pagina e dal
   top della sezione, con solo l'angolo in basso a destra arrotondato */
.intro-panel {
  background: var(--color-cream);
  border-radius: 0 0 8rem 0;
  padding: 3rem 3rem 5rem;
  margin-left: calc(-1 * var(--container-pad));
  padding-left: var(--container-pad);
  margin-top: calc(-1 * var(--section-pad-y));
  padding-top: var(--section-pad-y);
}
.intro-panel h2 { margin-bottom: 2.5rem; }
.underlined-full {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-slate);
}
/* Immagine ad arco: lato superiore semicircolare */
.arch-image {
  border-radius: 999px 999px 16px 16px;
  overflow: hidden;
  max-width: 29rem;
  aspect-ratio: 0.9;        /* crop verticale: l'arco superiore è un semicerchio pieno */
  margin-inline: auto;
}
.arch-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-body > p { margin-bottom: 2.5rem; }
.intro-panel-text { margin-top: 2.5rem; font-size: 0.9375rem; }
.intro-body .subtitle-slate {
  font-family: var(--font-heading);
  font-size: 2rem;          /* 32px */
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 2rem;
}
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.feature {
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: 0.875rem;
  row-gap: 1rem;
  align-items: center;
}
.feature-wide { grid-column: 1 / -1; }
.feature-icon { width: 2rem; }
.feature h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-slate);
}
.feature p {
  grid-column: 2;
  font-size: 0.9375rem;
}
.feature p + p { margin-top: 1.5rem; }
.intro-closing { margin-top: 2.5rem; }

/* ==========================================================================
   RIGHE TESTO/FOTO ALTERNATE (pagine interne)
   ========================================================================== */
/* Le righe si toccano: le foto agli angoli opposti combaciano al centro */
.media-rows .media-row + .media-row { margin-top: 0; }
.media-row { align-items: center; }
.media-text h2 { margin-bottom: 1.75rem; }
.media-text p + p { margin-top: 1.25rem; }
.media-text strong { color: var(--color-slate); }
.media-text a { color: var(--color-slate); }
.media-photo img { width: 100%; object-fit: cover; }

/* ==========================================================================
   COS'È LA VISITA TRICOLOGICA (card bordata su fondo scuro)
   ========================================================================== */
.visit-panel {
  border: 1px solid #4a565a;
  border-radius: var(--radius);
  padding: 3.5rem;
}
.visit-panel-cols {
  align-items: flex-start;
  gap: 5rem;
}
.visit-panel p + p { margin-top: 1.25rem; }
.visit-panel .subtitle-slate {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-slate);
  margin: 2.25rem 0 1.25rem;
}
.visit-panel .btn.mobile-only { margin-top: 1.75rem; }
.pathology-note { margin-top: 1.75rem; }
.visit-booking.visit-booking-out { display: none; }
.panel-subtitle {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 1.5rem;
}
.pathology-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 2.5rem;
  margin-top: 1.75rem;
}
.pathology h4 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 0.5rem;
}
.pathology p { font-size: 0.9375rem; }
.visit-booking {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.visit-booking h4 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-white);
  align-self: stretch;
}
.preventiva-block h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 1.25rem;
}
.preventiva-block { margin-bottom: 2rem; }

/* Elementi visibili solo su mobile / solo su desktop */
.mobile-only { display: none; }
.desktop-only { display: revert; }

/* ==========================================================================
   CAUSE E RIMEDI ALOPECIA (card bordate con liste numerate)
   ========================================================================== */
.causes h2 { color: var(--color-slate); }
.causes .section-header { margin-bottom: 1.75rem; }
.causes-intro {
  max-width: 30rem;
  font-size: 0.9375rem;
  margin-bottom: 3.5rem;
}
.causes-cards { align-items: stretch; }
.outline-card {
  border: 1px solid #b9c6cb;
  border-radius: var(--radius);
  padding: 2.75rem 2.25rem;
}
.outline-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 1.5rem;
}
.outline-card p { font-size: 0.9375rem; margin-bottom: 1.25rem; }
.outline-card ol {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
}
.outline-card li { margin-bottom: 0.875rem; }
.outline-card li strong { color: var(--color-dark); }
.text-link { color: inherit; }
.diagnosis-card { margin-top: 3rem; }
.diagnosis-card p {
  font-weight: 700;
  margin-bottom: 0;
}
.causes-blog-btn { width: 100%; text-align: center; margin-top: 2rem; }

/* ==========================================================================
   FASI DELLA VISITA (card bianche su fondo crema)
   ========================================================================== */
.visit-steps h2 { color: var(--color-slate); }
.steps-note { margin-top: 1.5rem; }
.step-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
}
.step-icon {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  display: block;
  margin: 0 auto 2rem;
}
.step-card h3 {
  font-size: 1.0625rem;      /* 17px Open Sans bold, come da design */
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1rem;
}
.step-card p { font-size: 0.9375rem; }
.steps-final {
  align-items: center;
  margin-top: 3rem;
}
.steps-final .step-card {
  max-width: 34rem;
  justify-self: center;
}
.steps-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 26rem;
}

/* ==========================================================================
   PANORAMICA TRATTAMENTI (sezione scura)
   ========================================================================== */
.overview { padding-block: 5rem; }   /* 80px come da design */
.overview-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.card-icon { width: 3.25rem; }
.overview-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;        /* 20px */
  font-weight: 600;
  text-transform: uppercase;
}
.overview-card p { font-size: 0.875rem; margin-bottom: 0.75rem; }
.overview-actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
}

/* ==========================================================================
   CTA BANNER (immagine di sfondo full-width)
   ========================================================================== */
.cta-banner {
  background: var(--color-dark) center / cover no-repeat;
  padding-block: 5rem;       /* 80px */
}
.cta-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: var(--color-white);
}
.cta-banner h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 500;
}

/* ==========================================================================
   PERCHÈ SCEGLIERE NOI
   ========================================================================== */
.why-us-text > p { margin-block: 1.5rem 2.5rem; }
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.feature-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
}
.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 0.75rem;
}
.feature-card p { font-size: 0.95rem; }
.why-us-image {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  align-self: center;
}
.why-us-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   SERVIZI (cards)
   ========================================================================== */
.services .cards-3 + .cards-3 { margin-top: 2rem; }
.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  padding: 2rem 1.5rem;
}
.service-card h3 {
  font-family: var(--font-heading);
  font-size: 1.375rem;        /* 22px */
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-slate);
}
.service-card p { font-size: 0.875rem; }
.service-card .btn { margin-top: auto; }

/* ==========================================================================
   TERAPIA PERSONALIZZATA
   ========================================================================== */
.therapy .subtitle-slate {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 1.5rem;
}
.therapy p + p { margin-top: 1rem; }
.contact-card {
  background: transparent;   /* stesso fondo della sezione, solo bordo */
  border: 1px solid var(--color-slate);
  border-radius: var(--radius);
  padding: 2.5rem;
  justify-self: center;
}
.contact-card h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-dark);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-slate);
  margin-bottom: 1.5rem;
}
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.contact-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.contact-list svg { flex: none; color: var(--color-slate); }
.contact-list a { text-decoration: none; font-weight: 700; }
.contact-list a:hover { text-decoration: underline; }

/* ==========================================================================
   IDENTITÀ (banner scuro con pattern)
   ========================================================================== */
.identity {
  background: var(--color-dark) center / cover no-repeat;
  padding-block: var(--section-pad-y);
}
.identity-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 56rem;
  text-align: center;
  color: var(--color-white);
}
.identity h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 500;
}
.identity p { font-size: 0.875rem; }

/* ==========================================================================
   CICLO DI VITA
   ========================================================================== */
.phase {
  display: flex;
  gap: 1.25rem;
  text-align: left;
}
/* Marker: cerchio numerato con linea verticale sotto (come da design Figma) */
.phase-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}
.phase-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-light);
  color: var(--color-slate);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}
.phase-marker::after {
  content: "";
  width: 2px;
  flex: 1;
  max-height: 7rem;
  background: var(--color-light);
}
.phase h3 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 1rem;
  line-height: 3rem;        /* allinea il titolo al centro del cerchio */
}
.phase p { font-size: 0.875rem; }
.phase-body p + p { margin-top: 1.25rem; }
.hair-cycle-figure { margin-top: 4rem; }
.hair-cycle-figure img { margin-inline: auto; }

/* ==========================================================================
   CERTIFICAZIONE
   ========================================================================== */
.certification-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  max-width: 56rem;
  text-align: center;
}
.certification-content img { width: 22rem; }
.certification-content p {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-gray);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   VISITA TRICOLOGICA (sezione scura)
   ========================================================================== */
.visit .cols-2 { align-items: stretch; }
.visit-image img {
  border-radius: var(--radius);
  height: 100%;
  object-fit: cover;
}
.visit-card {
  border: 1px solid var(--color-slate);
  border-radius: var(--radius);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.visit-card h3 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  text-transform: capitalize;
}
.visit-card p { font-size: 0.875rem; }
.visit-card .btn { align-self: flex-start; margin-top: auto; }

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-tagline {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-slate);
  max-width: 16rem;
}
.doctor { text-align: center; }
.doctor img {
  width: 100%;
  aspect-ratio: 1080 / 1568;
  object-fit: cover;
  object-position: center top;
  margin-inline: auto;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.doctor h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-dark);
}
.doctor p { color: var(--color-slate); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.post-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Card blog cliccabile per intero (immagine + testo): stretched link sul titolo */
.post-body h3 a { color: inherit; text-decoration: none; }
.post-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card img { width: 100%; aspect-ratio: 1.35; object-fit: cover; transition: transform 0.4s ease; }
.post-card:hover img { transform: scale(1.04); }
.post-card:hover .post-body h3 a { text-decoration: underline; }
/* La CTA resta un target indipendente sopra l'overlay */
.post-link { position: relative; z-index: 2; }
.post-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
}
.post-body time { font-size: 0.8125rem; }
.post-body h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-slate);
}
.post-body p { font-size: 0.875rem; }
.post-link {
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-slate);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}

/* ==========================================================================
   FORM CONTATTI
   ========================================================================== */
.contact-form {
  max-width: 56.5rem;          /* 904px come da design */
  margin-inline: auto;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 7rem 10rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-field label {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #3f4549;
}
.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  color: var(--color-dark);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #a8adb1; }
.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--color-slate);
  outline-offset: -1px;
}
/* Telefono con prefisso a tendina dentro al campo */
.phone-group {
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}
.phone-group select {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark);
  border: 0;
  background: transparent;
  padding: 0.75rem 0.25rem 0.75rem 1rem;
  cursor: pointer;
}
.phone-group input {
  flex: 1;
  border: 0 !important;
  border-radius: 0 8px 8px 0;
  min-width: 0;
}
.phone-group:focus-within {
  outline: 2px solid var(--color-slate);
  outline-offset: -1px;
  border-radius: 8px;
}
.phone-group input:focus { outline: none; }
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
}
.checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-slate);
}
.btn-block {
  width: 100%;
  text-align: center;
  border: 0;
}

/* ==========================================================================
   LA NOSTRA CLINICA
   ========================================================================== */
.clinic-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}
/* Titoli in slate come da design (non bianchi) */
.clinic h2,
.directions h2 { color: var(--color-slate); }
.clinic-address {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.clinic-block h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-white);  /* su fondo scuro la linea è bianca */
  margin-bottom: 1rem;
}
.clinic-map img { border-radius: var(--radius); width: 100%; }

/* Pagina Contatti: recapiti su 3 colonne (niente mappa) */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  align-items: start;
}
.clinic-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.clinic-col h2 { margin: 0; }
/* Hero Contatti: emblema piccolo + kicker su mobile (lockup esteso su desktop) */
.page-hero-emblem { width: 5rem; margin-bottom: 1.25rem; }
/* Il lockup esteso ha il testo grigio (versione per fondo chiaro): lo schiarisco
   a bianco sul fondo slate dell'hero, come da design Figma */
.page-hero-logo-esteso { width: 17rem; filter: brightness(0) invert(1); }

/* ==========================================================================
   COME SI SVOLGE LA PRIMA VOLTA (passi numerati + esami)
   ========================================================================== */
.first-visit-inner { max-width: 75rem; }
.first-visit h2 { color: var(--color-slate); }
.h2-sub {
  display: inline-block;
  font-size: 1.75rem;
  margin-top: 0.5rem;
}
.first-visit .phase + .phase { margin-top: 2.5rem; }
.first-visit .phase-marker::after { max-height: none; }
.first-visit .phase h3 { font-size: 1.625rem; }
.exam-block { margin-top: 3rem; }
.exam-block h3 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-slate);
  margin-bottom: 1.25rem;
}
.first-visit .btn { margin-top: 3rem; }
.first-visit-note { margin-top: 3.5rem; }

/* ==========================================================================
   DURATA E COSTO DELLA VISITA (Q&A su fondo crema)
   ========================================================================== */
.qa-block + .qa-block { margin-top: 4rem; }
.qa-block p + p { margin-top: 1.5rem; }
.qa-list {
  list-style: disc;
  padding-left: 2rem;
  margin-block: 1.5rem;
}
.qa-list li + li { margin-top: 0.375rem; }
.qa-title {
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-slate);
  margin-bottom: 1.75rem;
}
.qa-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-top: 4rem;
}
.qa-note {
  max-width: 38rem;
  font-size: 0.875rem;
}
.qa-outbox {
  margin-top: 4rem;
  border: 1px solid var(--color-slate);
  border-radius: var(--radius);
  padding: 2.5rem 3.5rem;
}
.qa-outbox p { font-size: 0.875rem; }
.qa-outbox p + p { margin-top: 1.5rem; }

/* ==========================================================================
   A CHI RIVOLGERSI — BIO DOTTORE (pagine interne)
   ========================================================================== */
.bio-tagline {
  text-transform: none;
  font-size: 1.375rem;
}
.bio-tagline span {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.doctor-bio-cols {
  grid-template-columns: 1fr 46.25rem;  /* card destra: 740px come da Figma */
  align-items: flex-start;
  gap: 5rem;
}
.doctor-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;                  /* blocco foto+nome allineato a sinistra */
}
.doctor-photo {
  width: 19rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 2rem;
}
.doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.doctor-profile h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-dark);
  text-align: center;
  line-height: 1.2;
}
.doctor-profile p {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-slate);
}
.doctor-card {
  border: 1px solid var(--color-slate);
  border-radius: var(--radius);
  padding: 3rem;
}
.doctor-card p + p { margin-top: 1.25rem; }
.doctor-card strong { color: var(--color-dark); }
.doctor-card a { color: inherit; }

/* ==========================================================================
   CARD CURA PERSONALIZZATA (slate su fondo scuro, slider su mobile)
   ========================================================================== */
.insight-card {
  background: #6e828c;
  border-radius: var(--radius);
  padding: 2.75rem 2.25rem;
}
.insight-card h3 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.insight-card p { font-size: 0.9375rem; }
.slider-nav { display: none; }
.insight-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3.5rem;
}
.insight-actions .btn {
  min-width: 24rem;
  text-align: center;
}

/* ==========================================================================
   GALLERIA MICROSCOPIO (pagina microscopia, slider su mobile)
   ========================================================================== */
.micro-gallery .section-header-center h2 { color: var(--color-slate); }
.micro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.micro-card img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
}
.micro-card figcaption {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}

/* ==========================================================================
   AUTOTRAPIANTO FUE LAST MINUTE (pagina trapianto, slate con form)
   ========================================================================== */
.lastminute {
  background: #6e828c;
  color: var(--color-white);
}
.lastminute-heading {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 4rem;
}
.lastminute-copy {
  max-width: 50rem;
  margin-inline: auto;
}
.lastminute-sub {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 500;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-white);
  margin-bottom: 1.75rem;
}
.lastminute-copy p + p { margin-top: 1.5rem; }
.lastminute-copy strong { color: var(--color-white); }
.lastminute-panel {
  max-width: 51rem;
  margin: 4rem auto 0;
  border: 1px solid var(--color-white);
  border-radius: var(--radius);
  padding: 3.5rem;
}
.lastminute-intro {
  max-width: 38rem;
  margin: 0 auto 3rem;
  text-align: center;
}
.lastminute-intro h3 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.lastminute-intro p { font-size: 0.9375rem; }
.lastminute-form {
  max-width: 44.5rem;
  padding: 4rem 4.5rem;
  color: var(--color-gray);
}

/* ==========================================================================
   TECNICA FUE FIRENZE (card con icone, slider su mobile)
   ========================================================================== */
.fue-cards h2 { color: var(--color-slate); }
.fue-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 2.75rem 2rem;
}
.fue-icon {
  display: block;
  height: 6rem;
  margin: 0 auto 2.5rem;
}
.fue-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-dark);
  text-align: center;
  margin-bottom: 1.5rem;
}
/* Variante con titolo allineato a sinistra (pagina protesi) */
.fue-cards-left .fue-card h3 { text-align: left; }
.fue-card p { font-size: 0.9375rem; }
.fue-note {
  margin-top: 4.5rem;
  border: 1px solid var(--color-slate);
  border-radius: var(--radius);
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}
.fue-note p { max-width: 47rem; }

/* ==========================================================================
   PROTESI INFO (testo centrato a due blocchi + bottone, pagina protesi)
   ========================================================================== */
.protesi-info .container {
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.info-block + .info-block { margin-top: 3.5rem; }
.info-block h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-slate);
  margin-bottom: 1.75rem;
}
.info-block p + p { margin-top: 1.5rem; }
.protesi-info .btn { margin-top: 3.5rem; }

/* ==========================================================================
   OFFERTA TRICOGENESIS (banner slate centrato, pagina PRP)
   ========================================================================== */
.prp-offer {
  background: #6e828c;
  color: var(--color-white);
}
.prp-offer-content {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prp-offer h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-white);
  margin-bottom: 2rem;
}
.prp-offer-sub {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.prp-offer p { font-size: 0.9375rem; }
.prp-offer p + p { margin-top: 1.5rem; }
.prp-offer strong { color: var(--color-white); }
.prp-offer .btn { margin-top: 3rem; }

/* ==========================================================================
   BENEFICI PRP (foto + pattern puntini + card bordata, slider su mobile)
   ========================================================================== */
.benefits-cols {
  gap: 5rem;
  align-items: center;
}
.benefits-photo {
  position: relative;
  isolation: isolate;
  max-width: 27rem;
}
/* Pattern decorativo a puntini dietro la foto, in basso a destra */
.benefits-photo::after {
  content: "";
  position: absolute;
  right: -5.5rem;
  bottom: -5.5rem;
  width: 19rem;
  height: 23rem;
  background: url("../assets/dots.svg") center / contain no-repeat;
  z-index: -1;
}
.benefits-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 0.95;
  object-fit: cover;
  border-radius: var(--radius);
}
.benefits-panel { padding: 3rem 3.5rem; }
.benefits-list { gap: 1.75rem; }
.benefit-item { align-items: center; }
.benefit-item h4 { font-size: 1.125rem; }

/* ==========================================================================
   TRAPIANTO SOPRACCIGLIA (foto + card bordata, pagina sopracciglia)
   ========================================================================== */
.brow-cols {
  gap: 5rem;
  align-items: center;
}
.brow-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1.05;
  object-fit: cover;
  border-radius: var(--radius);
}
.brow-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 1.75rem;
}
.brow-panel .btn { margin-top: 2.5rem; }

/* ==========================================================================
   MIGLIOR CHIRURGO (bio con foto, pagina trapianto)
   ========================================================================== */
.surgeon-cols {
  gap: 5rem;
  align-items: center;
}
.surgeon-body h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 2rem;
}
.surgeon-body p + p { margin-top: 1.5rem; }
.surgeon-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 0.78;
  object-fit: cover;
}

/* Sezioni di solo testo centrato (importanza tricologia, risultati FUE) */
.micro-importance .section-header-center,
.fue-results .section-header-center {
  margin-bottom: 0;
}
.micro-importance h2,
.fue-results h2 { color: var(--color-slate); }
.micro-importance p + p { margin-top: 1.75rem; }

/* ==========================================================================
   FAQ TRICOLOGIA (accordion a due colonne con +)
   ========================================================================== */
.faq h2 { color: var(--color-slate); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  column-gap: 3rem;
}
/* Variante per pagine con 20 domande (10 per colonna) */
.faq-grid-10 { grid-template-rows: repeat(10, auto); }
/* Variante con 5 domande (3 sinistra + 2 destra) */
.faq-grid-3 { grid-template-rows: repeat(3, auto); }
/* Variante con 4 domande (2 sinistra + 2 destra) */
.faq-grid-2 { grid-template-rows: repeat(2, auto); }
.faq-item { border-bottom: 1px solid #6b7478; }
.faq-item summary {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-slate);
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.75rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: #6b7478;
  flex: none;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: 1.5rem; font-size: 0.9375rem; }
.faq-more-btn {
  margin-top: 2.5rem;
  background: none;
  border: 0;
  padding: 0 0 0.375rem;
  border-bottom: 2px solid var(--color-slate);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-slate);
  cursor: pointer;
}

/* ==========================================================================
   LA NOSTRA CLINICA — versione compatta centrata (pagine interne)
   ========================================================================== */
.clinic-compact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.clinic-compact h2 { color: var(--color-slate); }
.clinic-compact-cols {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2rem 5rem;
  align-items: start;
}
.clinic-compact .clinic-block h3 { min-width: 16rem; }

/* ==========================================================================
   COME RAGGIUNGERCI (accordion)
   ========================================================================== */
.directions { border-top: 1px solid var(--color-slate); }
.accordion {
  max-width: 56rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.accordion details {
  border-bottom: 1px solid var(--color-slate);
  padding-bottom: 1rem;
}
.accordion summary {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}
.accordion summary::after {
  content: "";
  border: 5px solid transparent;
  border-top-color: currentColor;
  translate: 0 25%;
}
.accordion details[open] summary::after {
  border-top-color: transparent;
  border-bottom-color: currentColor;
  translate: 0 -25%;
}
.accordion details p { padding-block: 0.5rem 1rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-white);
  padding-block: 5rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e3e3e3;
}
.footer-brand img { width: 13rem; margin-bottom: 1.5rem; }
.footer-brand p { font-size: 0.8125rem; }
.footer-grid h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-dark);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-slate);
  margin-bottom: 1.25rem;
}
/* Menu su due colonne per ridurre l'altezza */
.footer-menu > ul {
  columns: 2;
  column-gap: 1.5rem;
}
.footer-menu > ul > li { break-inside: avoid; }
.footer-menu ul ul { padding-left: 1rem; }
.footer-menu a {
  display: block;
  padding-block: 0.3rem;
  font-size: 0.875rem;
  text-decoration: none;
  text-transform: uppercase;
}
.footer-menu a:hover { color: var(--color-slate); }
.footer-contacts a,
.footer-contacts span { font-size: 0.875rem; }
.footer-hours p { font-size: 0.875rem; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
  font-size: 0.8125rem;
}
.footer-bottom nav { display: flex; gap: 2rem; }

/* ==========================================================================
   RESPONSIVE — tablet ≤ 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --container-pad: 2.5rem;   /* 40px */
    --section-pad-y: 5rem;     /* 80px */
  }
  .section h2,
  .cta-banner h2,
  .identity h2 { font-size: 2rem; }
  .hero h1 { font-size: 2.5rem; }

  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .cols-2,
  .overview-intro { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   RESPONSIVE — mobile ≤ 810px (breakpoint originale Framer)
   ========================================================================== */
@media (max-width: 810px) {
  :root {
    --container-pad: 1.5rem;   /* 24px */
    --section-pad-y: 4rem;     /* 64px */
  }

  /* Nav: menu mobile come overlay a tutto schermo */
  .nav-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #6e828c;            /* pannello slate */
    box-shadow: none;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-menu.is-open { display: block; }
  body.nav-open { overflow: hidden; }

  /* La X per chiudere: ancorata all'overlay (largo quanto lo schermo), mai fuori */
  .nav-mobile-bar { display: block; position: static; }
  .nav-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    z-index: 5;
    background: none;
    border: 0;
    color: var(--color-white);
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
  }

  /* Voci centrate, maiuscole, bianche */
  .nav-menu > ul {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 3.25rem 1.5rem 3rem;   /* spazio in alto per la X */
  }
  .nav-menu li { width: 100%; text-align: center; }
  .nav-menu a {
    display: block;
    color: var(--color-white);
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 0.95rem 0;
  }
  .nav-menu a:hover { color: var(--color-white); opacity: 0.8; }
  .has-dropdown > a::after { border-top-width: 5px; margin-left: 0.5rem; transition: transform 0.2s; }
  .has-dropdown.is-expanded > a::after { transform: rotate(180deg); }

  /* Sottomenu collassabili: nascosti finché non si tocca il genitore */
  .dropdown {
    position: static;
    display: none;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0.4rem;
  }
  .has-dropdown.is-expanded > .dropdown { display: flex; }
  .dropdown li a { padding: 0.72rem 0; font-size: 0.88rem; opacity: 0.9; }

  .nav-toggle { display: flex; }
  .nav-lang { display: none; }   /* su mobile l'header ha solo logo + hamburger (come da design) */
  .nav-wrap { justify-content: space-between; }

  .hero { padding-block: 6rem; }
  .hero h1 { font-size: 2rem; }
  .hero-emblem { width: 14rem; }
  .page-hero h1 { font-size: 2.25rem; }
  .page-hero-logo { display: none; }  /* su mobile niente logo nell'hero (come da design) */
  .page-hero-kicker { font-size: 1.125rem; }

  /* Pagina Contatti: recapiti impilati su mobile */
  .contacts-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .intro-panel {
    padding: 2rem 1.5rem 3.5rem;
    padding-left: var(--container-pad);
    padding-top: var(--section-pad-y);
    border-radius: 0 0 4rem 0;
    margin-right: calc(-1 * var(--container-pad));  /* su mobile occupa tutta la larghezza */
  }
  .features-grid { grid-template-columns: 1fr; }

  /* Righe testo/foto: su mobile la foto sta sempre sopra il testo */
  .media-row { display: flex; flex-direction: column; }
  .media-row .media-photo { order: -1; }

  .mobile-only { display: block; }
  .desktop-only { display: none; }
  .visit-panel { padding: 1.75rem; }
  .pathology-grid { grid-template-columns: 1fr; }

  /* Clinica compatta: blocchi in colonna, allineati a sinistra */
  .clinic-compact-inner { align-items: flex-start; }
  .clinic-compact-cols { grid-template-columns: 1fr; }

  .qa-footer { flex-direction: column; align-items: stretch; text-align: left; }

  /* FAQ: una colonna, prime 6 visibili poi "Leggi altre FAQ" */
  .faq-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .faq-grid:not(.show-all) .faq-item:nth-child(n+7) { display: none; }

  /* Slider card su mobile: scroll orizzontale con snap e frecce */
  .insight-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
  }
  .insight-slider::-webkit-scrollbar { display: none; }
  .insight-slider .insight-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .slider-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .slider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #6e828c;
    color: #aebbc2;
    cursor: pointer;
  }
  .insight-actions .btn { min-width: 0; width: 100%; }

  /* Galleria microscopio: slider su mobile */
  .micro-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
  }
  .micro-grid::-webkit-scrollbar { display: none; }
  .micro-grid .micro-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .micro-gallery .slider-btn {
    border-color: var(--color-slate);
    color: var(--color-slate);
  }

  .cards-3 { grid-template-columns: 1fr; }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 3rem;
  }
  .cta-banner-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .overview-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.75rem; }

  /* Last minute: su mobile il bordo resta solo attorno all'intro */
  .lastminute-panel {
    border: none;
    padding: 0;
  }
  .lastminute-intro {
    border: 1px solid var(--color-white);
    border-radius: var(--radius);
    padding: 2.5rem 1.5rem;
    margin-bottom: 2.5rem;
    text-align: left;
  }
  .lastminute-heading { margin-bottom: 3rem; }

  /* Tipi di calvizie: il blocco prenotazione esce dalla card su mobile */
  .baldness .visit-panel .visit-booking { display: none; }
  .visit-booking.visit-booking-out {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 3rem;
  }
  .visit-booking-out .btn { align-self: stretch; text-align: center; }

  /* Risultati FUE: testo allineato a sinistra su mobile */
  .fue-results .section-header-center { text-align: left; }

  /* Protesi info: titoli centrati, corpo a sinistra su mobile */
  .protesi-info .container { text-align: left; align-items: stretch; }
  .info-block h2 { text-align: center; }
  .protesi-info .btn { align-self: stretch; text-align: center; }

  /* Benefici PRP: la card diventa uno slider su mobile */
  .benefits-photo { max-width: none; margin: 0 auto; }
  .benefits-panel { padding: 2.25rem 1.5rem; }
  .benefits-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0;
  }
  .benefits-list::-webkit-scrollbar { display: none; }
  .benefit-item {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
    align-items: start;
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  /* Tecnica FUE: slider su mobile */
  .fue-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
  }
  .fue-grid::-webkit-scrollbar { display: none; }
  .fue-grid .fue-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .fue-cards .slider-btn {
    border-color: var(--color-slate);
    color: var(--color-slate);
  }
  .fue-note {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.5rem;
  }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* ==========================================================================
   ARTICOLO SINGOLO (blog post da WordPress / Gutenberg)
   --------------------------------------------------------------------------
   Sistema di larghezze: il contenitore è ampio, ma ogni blocco è centrato
   alla sua misura. Il testo resta leggibile (--measure), mentre immagini e
   blocchi impostati su "Ampiezza estesa/piena" in Gutenberg possono allargarsi
   (.alignwide / .alignfull).
   ========================================================================== */
.post-single {
  padding-block: var(--section-pad-y);
  --measure: 52rem;        /* misura di lettura del testo */
  --measure-wide: 68rem;   /* blocchi "wide" (immagini, colonne) */
}
.post-container { max-width: 74rem; margin-inline: auto; }

.post-header { max-width: var(--measure); margin: 0 auto 2.5rem; text-align: center; }
.post-cat {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: var(--color-slate);
  margin-bottom: 0.75rem;
}
.post-header h1 {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  line-height: 1.12;
  margin-bottom: 1rem;
}
.post-meta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  color: var(--color-gray);
  font-size: 0.9rem;
}
.post-hero-img {
  max-width: var(--measure-wide);
  margin: 0 auto 3rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.post-hero-img img { width: 100%; height: auto; display: block; }

/* Contenuto generato da WordPress: ogni figlio diretto centrato alla misura */
.post-content { font-size: 1.125rem; line-height: 1.75; color: var(--color-dark); }
.post-content > * { max-width: var(--measure); margin-inline: auto; }
.post-content > * + * { margin-top: 1.4rem; }
.post-content > .alignwide { max-width: var(--measure-wide); }
.post-content > .alignfull { max-width: none; }

.post-content h2 { font-family: var(--font-heading); font-size: 1.9rem; line-height: 1.2; margin-top: 2.75rem; }
.post-content h3 { font-family: var(--font-heading); font-size: 1.45rem; margin-top: 2.25rem; }
.post-content h4 { font-family: var(--font-heading); font-size: 1.2rem; margin-top: 2rem; }
.post-content a { color: var(--color-slate); text-decoration: underline; }
.post-content strong { font-weight: 700; }
.post-content ul, .post-content ol { padding-left: 1.5rem; }
.post-content li + li { margin-top: 0.5rem; }
.post-content blockquote {
  border-left: 3px solid var(--color-slate);
  padding-left: 1.25rem;
  color: var(--color-gray);
  font-style: italic;
}

/* --- Blocchi Gutenberg --- */
/* Immagini */
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-content figure { margin-inline: auto; }
.post-content figure img { display: block; width: 100%; }
.post-content figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-gray);
  margin-top: 0.6rem;
}
/* Allineamento immagini singole */
.post-content .aligncenter { margin-inline: auto; }
.post-content > .alignleft  { float: left;  max-width: 22rem; margin: 0.3rem 2rem 1rem 0; }
.post-content > .alignright { float: right; max-width: 22rem; margin: 0.3rem 0 1rem 2rem; }

/* Colonne (una foto + testo, ecc.) */
.post-content .wp-block-columns {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.post-content .wp-block-column { flex: 1 1 0; min-width: 0; }
.post-content .wp-block-column > * + * { margin-top: 1.25rem; }

/* Galleria */
.post-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}
.post-content .wp-block-gallery figure { margin: 0; }

/* Pulsanti */
.post-content .wp-block-button__link {
  display: inline-block;
  background: var(--color-slate);
  color: var(--color-white);
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font-ui);
}

/* Embed responsive (YouTube ecc.) e tabelle */
.post-content iframe { max-width: 100%; border: 0; }
.post-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.post-content th, .post-content td { border: 1px solid #e2e2df; padding: 0.5rem 0.75rem; text-align: left; }

.post-back { max-width: var(--measure); margin: 3rem auto 0; text-align: center; }

@media (max-width: 810px) {
  .post-single { --measure: 100%; --measure-wide: 100%; }
  .post-header h1 { font-size: 2rem; }
  .post-content { font-size: 1.0625rem; }
  .post-content .wp-block-columns { flex-direction: column; gap: 1.5rem; }
  .post-content .wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
  .post-content > .alignleft, .post-content > .alignright { float: none; max-width: 100%; margin: 0 auto; }
}

/* ==========================================================================
   MAPPA INTERATTIVA CLINICA + INDICAZIONI STRADALI
   ========================================================================== */
.clinic-map-interactive { display: flex; flex-direction: column; gap: 1.5rem; }
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e9e9e4;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-directions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.map-directions-label {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--color-slate);
  margin-right: 0.25rem;
}
@media (max-width: 810px) {
  .map-embed { aspect-ratio: 4 / 3; }
  .map-directions-label { width: 100%; margin-bottom: 0.25rem; }
}

/* ==========================================================================
   BANNER COOKIE
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: var(--color-white);
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -6px 24px rgb(0 0 0 / 12%);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.1rem;
}
.cookie-banner-text { font-size: 0.9rem; line-height: 1.55; margin: 0; }
.cookie-banner-text a { color: var(--color-slate); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 0.75rem; flex: none; }
.cookie-banner-actions .btn { padding: 12px 26px; }
@media (max-width: 810px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .cookie-banner-actions { justify-content: flex-end; }
}

/* Contenitore mappa Leaflet (OpenStreetMap) */
.map-embed { position: relative; }
.leaflet-map { min-height: 300px; }
.leaflet-map .leaflet-control-attribution { font-size: 10px; }

/* ==========================================================================
   PAGINE LEGALI (privacy / cookie)
   ========================================================================== */
.legal { max-width: 52rem; margin-inline: auto; }
.legal > * + * { margin-top: 1rem; }
.legal h2 { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.25; margin-top: 2.5rem; }
.legal h3 { font-family: var(--font-heading); font-size: 1.2rem; margin-top: 1.75rem; }
.legal p, .legal li { line-height: 1.7; }
.legal ul, .legal ol { padding-left: 1.5rem; }
.legal li + li { margin-top: 0.4rem; }
.legal a { color: var(--color-slate); text-decoration: underline; }
.legal .legal-updated { color: var(--color-gray); font-size: 0.9rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1rem; }
.legal th, .legal td { border: 1px solid #e2e2df; padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.legal th { background: var(--color-cream); font-family: var(--font-ui); }

/* ==========================================================================
   INTRO VIDEO (solo prima visita)
   ========================================================================== */
html.intro-active, html.intro-active body { overflow: hidden; }
#site-intro { display: none; }
.intro-active #site-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2000;   /* sopra l'header (1100) */
  background: #ffffff;   /* combacia con lo sfondo bianco del video (niente bande visibili) */
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}
#site-intro video { width: 100%; height: 100%; object-fit: contain; }
#site-intro.is-hiding { opacity: 0; pointer-events: none; }
#site-intro-skip {
  position: absolute;
  bottom: 1.75rem;
  right: 1.75rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.2s;
}
#site-intro-skip:hover { background: rgba(0, 0, 0, 0.75); }

/* Percorsi in tramvia + etichetta fermata (pagina Contatti) */
.map-transit { margin-top: 1.5rem; }
.map-transit-note { margin-bottom: 0.9rem; line-height: 1.6; }
.map-transit-note strong { color: var(--color-slate); }
.map-transit-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.leaflet-tooltip.map-stop-tip {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--color-dark);
  background: #fff;
  border: 1px solid #d8d8d2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  padding: 3px 8px;
}

/* Card del pin clinica (popup Leaflet) */
.map-card-popup .leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); }
.map-card-popup .leaflet-popup-content { margin: 0.85rem 1.05rem; line-height: 1.4; }
.map-card { display: flex; flex-direction: column; }
.map-card strong { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-dark); }
.map-card span { color: var(--color-gray); font-size: 0.85rem; margin-top: 0.15rem; }
.map-card a { margin-top: 0.45rem; color: var(--color-slate); font-weight: 700; font-size: 0.85rem; text-decoration: none; font-family: var(--font-ui); }
.map-card a:hover { text-decoration: underline; }

/* Accordion con mappe (pagina Contatti) */
.accordion-maps { margin-top: 2.5rem; }
.accordion-maps .accordion-body { padding: 0.25rem 0 1.25rem; }
.accordion-maps .accordion-body > * + * { margin-top: 1rem; }

/* "Articoli recenti": slider su mobile invece della colonna */
@media (max-width: 810px) {
  .cards-3.recent-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 1.25rem;
  }
  .cards-3.recent-cards::-webkit-scrollbar { display: none; }
  .cards-3.recent-cards .post-card {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
  }
}

/* Indirizzo cliccabile (→ Google Maps) */
.clinic-address a { color: inherit; text-decoration: none; }
.clinic-address a:hover { text-decoration: underline; }

/* Mappa "La nostra clinica" più grande: riempie l'altezza della colonna info */
.clinic .clinic-map-interactive { height: 100%; }
.clinic .map-embed { aspect-ratio: auto; flex: 1 1 auto; min-height: 26rem; }

/* ==========================================================================
   PAGINA GRAZIE (post-form)
   ========================================================================== */
.thankyou-inner { max-width: 42rem; margin-inline: auto; text-align: center; }
.thankyou-inner h2 { color: var(--color-slate); }
.thankyou-inner p { margin-top: 1rem; }
.thankyou-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Honeypot anti-spam (invisibile) + messaggio d'errore form */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-error {
  background: #fdecea;
  color: #8a1c12;
  border: 1px solid #f5c6c0;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.form-error a { color: inherit; font-weight: 600; }