/* Studio Dentistico Pieri — foglio di stile unico (design system v2)
   Stile: pannelli chiari con angoli molto arrotondati, titoli grandi e leggeri,
   occhielli sopra i titoli, schede bianche, una scheda in evidenza in blu notte.
   Colori: contrasti verificati WCAG AA (vedi CLAUDE.md). Testo base 18px per lettori di ogni età. */

@import url("../fonts/font.css");

:root {
  /* Primitivi — palette v3 (ottobre 2026). Valori di marca fissati: #124EBE, #F6F6F6, #020B26, #19233D, #0F99DB.
     Le altre tonalità sono calcolate in OKLCH con la stessa tinta del colore di marca. */
  --blu-50: #f0f5ff;  --blu-100: #e1ecfe; --blu-200: #c3d8ff; --blu-300: #96bbfe; --blu-400: #5c95ff;
  --blu-500: #3673e6; --blu-600: #124ebe; --blu-700: #0241b0; --blu-800: #012e84; --blu-900: #01205e;
  --notte-50: #f2f5fc; --notte-100: #e8ebf2; --notte-200: #d1d7e7; --notte-300: #afbad6; --notte-400: #8a98b9;
  --notte-500: #6d7a99; --notte-600: #566381; --notte-700: #404c69; --notte-800: #2c3753; --notte-900: #19233d; --notte-950: #020b26;
  --mare-100: #dff2fe; --mare-300: #86cefd; --mare-500: #0f99db; /* azzurro del logo */
  --grigio-50: #f6f6f6;

  /* Semantici: usare questi nel resto del foglio. Contrasti misurati (WCAG 2.x). */
  --bianco: #ffffff;
  --inchiostro: var(--notte-950);   /* testo principale: 19,5:1 su bianco */
  --ardesia: var(--notte-700);      /* testo secondario: 8,6:1 su bianco, 7,9:1 su --superficie */
  --vetro: var(--grigio-50);        /* fondo dei pannelli chiari */
  --vetro-scuro: var(--notte-200);  /* bordi e fondi decorativi */
  --linea: var(--notte-200);        /* separatori decorativi */
  --bordo-campo: var(--notte-500);  /* bordo dei campi: 4,3:1 su bianco (minimo 3:1) */
  --blu: var(--blu-600);            /* link: 7,4:1 su bianco, 6,8:1 su --superficie */
  --blu-scuro: var(--blu-800);      /* link al passaggio del mouse */
  --cta: var(--blu-600);            /* pulsanti d'azione #124EBE: 7,4:1 con il bianco */
  --cta-hover: var(--blu-800);      /* 12,2:1 con il bianco */
  --cielo: var(--mare-500);         /* azzurro del logo: solo decorazioni, focus, testo grande */
  --fondo-scuro: var(--notte-950);  /* footer, schede in evidenza */
  --fondo-scuro-2: var(--notte-900);/* fascia prenotazioni: 15,6:1 con il bianco */
  --testo-su-scuro: var(--notte-100);/* 17:1 su --fondo-scuro */
  --verde-wa: #17663f;              /* WhatsApp: 7:1 con il bianco */
  --verde-wa-scuro: #0f4d2f;
  --aperto: #1f8a4c;                /* pallino "aperto ora", sempre con testo */
  --stelle: var(--notte-950);
  --errore: #b3261e;
  --ok-fondo: #e3f3e9;   --ok-testo: #12502f;
  --ko-fondo: #fbe9e7;   --ko-testo: #8a1c14;
  --evidenzia-fondo: #fff4d6; --evidenzia-testo: #5a4300;
  --superficie: var(--grigio-50);   /* pannelli arrotondati */
  --scheda: var(--bianco);          /* schede sopra i pannelli */
  --occhiello: var(--blu-600);      /* etichette sopra i titoli */
  --occhiello-su-scuro: var(--mare-300); /* 11:1 su --fondo-scuro */

  --font: "Inter", "InterVariable", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tipografia: titoli grandi, peso 500, interlinea stretta */
  --t-xs: 0.875rem;
  --t-s: 1rem;
  --t-m: 1.125rem;   /* corpo */
  --t-l: 1.375rem;
  --t-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --t-3xl: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);

  /* Spaziature */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 5rem; --s7: 7rem;
  --larghezza: 76rem;
  --margine-pannello: clamp(0.5rem, 1.5vw, 1.25rem);

  /* Raggi */
  --raggio: 14px;          /* campi, piccole schede */
  --raggio-grande: 24px;   /* schede e foto */
  --raggio-pannello: 36px; /* pannelli di sezione */

  /* Ombre */
  --ombra: 0 1px 2px rgba(2,11,38,.06), 0 8px 24px rgba(2,11,38,.06);
  --ombra-forte: 0 12px 40px rgba(2,11,38,.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body { margin: 0; font-family: var(--font); font-size: var(--t-m); line-height: 1.6; color: var(--inchiostro); background: var(--bianco); font-feature-settings: "cv11", "ss01"; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blu); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blu-scuro); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.08; margin: 0 0 var(--s2); font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0 0 var(--s2); }
.lead { font-size: var(--t-l); line-height: 1.5; color: var(--ardesia); max-width: 38rem; }
.testo { max-width: 40rem; }
.secondario { color: var(--ardesia); }
.centro { text-align: center; margin-top: var(--s4); }
.dopo-lista { margin-top: var(--s3); }

/* Occhiello: etichetta breve sopra il titolo */
.occhiello { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 var(--s2); font-size: var(--t-s); font-weight: 600; color: var(--occhiello); letter-spacing: 0.01em; }
.occhiello::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cielo); }
.occhiello--chiaro { color: var(--occhiello-su-scuro); }

.salta { position: absolute; left: -999px; top: 0; background: var(--inchiostro); color: #fff; padding: var(--s1) var(--s2); z-index: 100; }
.salta:focus { left: var(--s2); top: var(--s2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenitore { width: min(100% - 2.5rem, var(--larghezza)); margin-inline: auto; }
.sezione { padding-block: var(--s6); }
/* Pannello: sezione chiara, staccata dai bordi, con angoli molto arrotondati */
.sezione--vetro, .apertura { background: var(--superficie); margin-inline: var(--margine-pannello); border-radius: var(--raggio-pannello); }
.sezione--vetro + .sezione--vetro { margin-top: var(--margine-pannello); }
.sezione__testa { max-width: 46rem; margin-bottom: var(--s5); }
.sezione__testa p:not(.occhiello) { color: var(--ardesia); font-size: var(--t-m); }
.sezione__testa--centro { margin-inline: auto; text-align: center; }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.7rem 1.4rem;
  font: 600 var(--t-s)/1.2 var(--font);
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, transform .15s;
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--freccia { gap: 10px; }
.btn--freccia::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor; opacity: .7;
  -webkit-mask: url("../img/icone/freccia.svg") center / 16px 16px no-repeat; mask: url("../img/icone/freccia.svg") center / 16px 16px no-repeat;
  transition: transform .15s;
}
.btn--freccia:hover::after { transform: translateX(2px); }
.btn--primario { background: var(--cta); color: #fff; }
.btn--primario:hover { background: var(--cta-hover); color: #fff; }
.btn--secondario { background: transparent; color: var(--cta); border-color: var(--cta); }
.btn--secondario:hover { background: var(--cta); color: #fff; }
.btn--wa { background: var(--verde-wa); color: #fff; }
.btn--wa:hover { background: var(--verde-wa-scuro); color: #fff; }
.btn--chiaro { background: #fff; color: var(--inchiostro); }
.btn--chiaro:hover { background: var(--mare-100); color: var(--inchiostro); }

.btn--bordo-chiaro { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--bordo-chiaro:hover { background: rgba(255,255,255,.12); color: #fff; }
.azioni { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; }

/* ---------- Header: pillola bianca fluttuante ---------- */
.testata { position: sticky; top: 0; z-index: 50; padding: clamp(0.5rem, 2vw, 1.5rem) var(--margine-pannello) 0; pointer-events: none; }
.testata__barra {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s3); min-height: 72px;
  width: min(100%, 75rem); margin-inline: auto; padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(2,11,38,.06), 0 10px 30px rgba(2,11,38,.08);
}
.marchio { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.marchio img { width: auto; height: 46px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s3); }
.menu a { display: block; color: var(--inchiostro); text-decoration: none; font-weight: 500; font-size: var(--t-m); padding: 0.5rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--blu); }
.menu a[aria-current="page"] { color: var(--blu); border-bottom-color: var(--blu); }
.testata .btn--primario { min-height: 56px; padding-inline: 1.5rem; font-size: var(--t-m); font-weight: 500; }
.testata__tel, .menu-pulsante { display: none; }
/* In home la testata galleggia sopra la foto */
.pagina-home .testata { position: fixed; left: 0; right: 0; }
.pagina-home main { padding-top: 0; }

@media (max-width: 960px) {
  .testata__barra { min-height: 60px; gap: var(--s1); padding-left: 1rem; }
  .marchio img { height: 34px; }
  .testata .btn--primario { display: none; }
  .testata__tel, .menu-pulsante {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 999px; border: 0;
    background: var(--superficie); color: var(--inchiostro); cursor: pointer;
  }
  .testata__tel svg, .menu-pulsante svg { width: 22px; height: 22px; }
  .menu { display: none; position: absolute; left: var(--margine-pannello); right: var(--margine-pannello); top: calc(100% + 0.5rem); background: #fff; border-radius: var(--raggio-grande); box-shadow: var(--ombra-forte); }
  .menu.aperto { display: block; }
  .menu ul { flex-direction: column; gap: 0; padding: var(--s1); }
  .menu a { padding: 0.9rem 1rem; font-size: var(--t-l); border-radius: var(--raggio); border: 0; }
  .menu a[aria-current="page"] { background: var(--superficie); }
}

/* ---------- Barra contatti fissa (mobile) ---------- */
.barra-mobile { display: none; }
@media (max-width: 960px) {
  .barra-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); box-shadow: 0 -6px 18px rgba(2,11,38,.08);
  }
  .barra-mobile .btn { width: 100%; padding-inline: 0.5rem; }
  body { padding-bottom: 84px; }
}

/* ---------- Hero: foto a tutta pagina con sfumatura scura ---------- */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 62rem); display: flex; align-items: flex-end; color: #fff; background: var(--fondo-scuro); overflow: hidden; }
.hero__scena { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.12); transform-origin: 50% 0; will-change: transform; }
/* persone in basso a destra: i volti restano liberi da testo e schede */
.hero__persone { position: absolute; right: 0; bottom: 0; width: auto; height: min(82%, 49.8vw); max-width: none; will-change: transform; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(21deg, rgba(2,11,38,1) 2%, rgba(2,11,38,0) 54%),
    linear-gradient(to top, rgba(2,11,38,.55), rgba(2,11,38,0) 45%); }
.hero__contenuto { width: min(100% - clamp(2.5rem, 5vw, 5rem), 89.5rem); margin-inline: auto; padding-block: 9rem clamp(2rem, 4vw, 4rem); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.hero__testo { max-width: 45rem; }
.hero h1 { color: #fff; font-weight: 400; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5rem); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: var(--s3); }
.hero__lead { font-size: var(--t-m); font-weight: 500; max-width: 45rem; margin-bottom: var(--s5); text-shadow: 0 1px 12px rgba(2,11,38,.5); }
.hero .azioni { gap: var(--s2); }
.btn--icona { min-height: 64px; padding-inline: 1.5rem; font-size: var(--t-m); font-weight: 500; gap: 10px; }
.btn--icona img { width: 16px; height: 16px; flex: none; transition: transform .15s; }
.btn--icona:hover img { transform: translateX(2px); }
.btn--vetro { background: rgba(255,255,255,.2); color: #fff; border: 1px solid #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--vetro:hover { background: rgba(255,255,255,.3); color: #fff; }
.hero__schede { display: flex; gap: var(--s3); align-items: flex-end; margin: 0; padding: 0; list-style: none; flex: none; }
.scheda-dato { background: #fff; color: var(--inchiostro); border-radius: var(--raggio-grande); padding: var(--s3); min-height: 140px; min-width: 13rem; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.scheda-dato p { margin: 0; }
.scheda-dato__numero { display: flex; align-items: center; gap: 10px; font-size: 4rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.scheda-dato__numero img { width: 24px; height: 47px; }
.scheda-dato__numero--testo { font-size: var(--t-l); letter-spacing: -0.01em; min-height: 60px; }
.scheda-dato__nota { font-size: var(--t-m); font-weight: 500; }
.scheda-dato__nota a { color: var(--notte-900); font-size: var(--t-xs); font-weight: 400; }
.scheda-dato__nota a[href^="tel"] { font-size: var(--t-m); font-weight: 600; color: var(--blu); }
.stato { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--inchiostro); }
.stato::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ardesia); flex: none; }
.stato[data-aperto="si"]::before { background: var(--aperto); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aperto) 18%, transparent); }
/* Sopra i 1100 px il testo resta nel 57% sinistro: i volti (che partono dal 59% della larghezza) non vengono mai coperti */
@media (min-width: 1101px) {
  .hero__testo { max-width: min(45rem, calc(57vw - clamp(1.25rem, 2.5vw, 2.5rem))); }
}
/* Fino a 1100 px foto sopra e testo sotto: testo e schede non possono sovrapporsi ai volti */
@media (max-width: 1100px) {
  .hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero__scena { position: relative; inset: auto; height: min(62svh, 40rem); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); }
  .hero__sfondo { object-position: 40% 40%; }
  /* agganciate a destra: il bordo tagliato della foto (braccio del Dott. Lorenzo) coincide con il bordo dello schermo */
  .hero__persone { height: min(80%, 95vw); right: 0; left: auto; }
  .hero::before { display: none; }
  .hero__contenuto { flex-direction: column; align-items: flex-start; padding-top: 0; margin-top: -3.5rem; }
}
@media (max-width: 640px) {
  .hero .azioni .btn { width: 100%; }
  .hero__schede { flex-direction: column; align-items: stretch; width: 100%; gap: var(--s2); }
  .scheda-dato { min-height: 0; }
  .scheda-dato__numero { font-size: 3rem; }
  .scheda-dato__numero--testo { font-size: var(--t-l); min-height: 0; }
}

/* ---------- Fatti in breve ---------- */
.fatti-fascia { padding-block: var(--s5); }
.fatti { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: 0; padding: 0; list-style: none; text-align: center; }
.fatti li + li { border-left: 1px solid var(--linea); }
.fatti b { display: block; font-size: var(--t-2xl); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 0.3rem; }
.fatti span { color: var(--ardesia); font-size: var(--t-s); display: block; max-width: 14rem; margin-inline: auto; }
@media (max-width: 760px) { .fatti { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s2); } .fatti li + li { border-left: 0; } }

/* ---------- Bisogni / trattamenti ---------- */
.bisogni { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.bisogno a {
  display: grid; grid-template-columns: auto 1fr; gap: 0.3rem var(--s2); align-items: start; position: relative;
  height: 100%; padding: var(--s3) var(--s5) var(--s3) var(--s3); background: var(--superficie); border-radius: var(--raggio-grande);
  text-decoration: none; color: var(--inchiostro); transition: background-color .15s, box-shadow .15s;
}
.bisogno a::after { content: "↗"; position: absolute; top: var(--s3); right: var(--s3); color: var(--ardesia); }
.bisogno a:hover { background: #fff; box-shadow: var(--ombra-forte); color: var(--inchiostro); }
.bisogno svg { grid-row: span 2; width: 52px; height: 52px; padding: 10px; border-radius: 50%; background: #fff; color: var(--blu); }
.bisogno h3 { margin: 0; font-size: var(--t-l); }
.bisogno p { margin: 0; color: var(--ardesia); font-size: var(--t-s); }
@media (max-width: 900px) { .bisogni { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bisogni { grid-template-columns: 1fr; } .bisogno a { padding: var(--s2) var(--s4) var(--s2) var(--s2); } }

/* ---------- Nastro di trattamenti che scorre (decorativo) ---------- */
.scorrimento { overflow: hidden; padding-block: var(--s3); border-block: 1px solid var(--linea); margin-bottom: var(--s5); }
.scorrimento__nastro { display: flex; width: max-content; animation: scorri 70s linear infinite; }
.scorrimento span { font-size: var(--t-2xl); font-weight: 400; letter-spacing: -0.03em; color: var(--notte-500); white-space: nowrap; display: inline-flex; align-items: center; }
.scorrimento span::after { content: "✦"; font-size: 0.5em; color: var(--cielo); margin-inline: 1.5rem; }
@keyframes scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .scorrimento__nastro { animation: none; } }

/* ---------- Dichiarazione centrata con foto ai lati ---------- */
.dichiarazione { display: grid; grid-template-columns: 1fr 2.2fr 1fr; gap: var(--s4); align-items: center; }
.dichiarazione__testo { text-align: center; }
.dichiarazione__frase { font-size: var(--t-xl); line-height: 1.35; letter-spacing: -0.02em; color: var(--inchiostro); margin-bottom: var(--s3); }
.dichiarazione__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raggio-grande); background: var(--vetro-scuro); }
.dichiarazione__foto--a { align-self: end; }
.dichiarazione__foto--b { align-self: start; }
@media (max-width: 960px) {
  .dichiarazione { grid-template-columns: 1fr 1fr; }
  .dichiarazione__testo { grid-column: 1 / -1; grid-row: 1; }
  .dichiarazione__foto { aspect-ratio: 4 / 3; }
}

/* ---------- Due colonne testo + foto ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
.duo--inverti > :first-child { order: 2; }
.duo img { border-radius: var(--raggio-grande); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--vetro-scuro); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; gap: var(--s3); } .duo--inverti > :first-child { order: 0; } }

/* ---------- Medici ---------- */
.medici { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.medico { background: var(--superficie); border-radius: var(--raggio-grande); padding: var(--s1) var(--s1) var(--s3); }
.medico > div { padding-inline: var(--s2); }
.medico img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: calc(var(--raggio-grande) - 6px); background: var(--vetro-scuro); margin-bottom: var(--s2); }
.sezione--vetro .medico { background: #fff; }
.medico h3 { margin-bottom: 0.25rem; }
.medico .ruolo { color: var(--ardesia); font-size: var(--t-s); margin-bottom: var(--s2); }
.etichette { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 var(--s2); padding: 0; list-style: none; }
.etichette a, .etichette span { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; background: #fff; color: var(--blu-scuro); font-size: var(--t-xs); font-weight: 600; text-decoration: none; }
.sezione--vetro .etichette a, .sezione--vetro .etichette span { background: var(--superficie); }
.etichette a:hover { background: var(--vetro-scuro); }
@media (max-width: 860px) { .medici { grid-template-columns: 1fr; } .medico { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s2); align-items: start; padding: var(--s1); } .medico > div { padding: var(--s1) 0; } .medico img { margin: 0; } }

/* ---------- Passi (sequenza reale) ---------- */
.passi { counter-reset: passo; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.passi--4 { grid-template-columns: repeat(4, 1fr); }
.passi li { counter-increment: passo; }
.passi li::before {
  content: counter(passo, decimal-leading-zero); display: block; margin-bottom: var(--s2);
  color: var(--blu); font-weight: 500; font-size: var(--t-s); letter-spacing: 0.04em;
}
.passi h3 { margin-bottom: 0.4rem; }
.passi p { color: var(--ardesia); margin: 0; }
/* variante a schede: l'ultima è in evidenza */
.passi--schede li { background: var(--superficie); border-radius: var(--raggio-grande); padding: var(--s4) var(--s3); min-height: 14rem; display: flex; flex-direction: column; }
.passi--schede li::before { margin-bottom: auto; padding-bottom: var(--s4); }
.passi--schede li:last-child { background: var(--fondo-scuro); color: #fff; }
.passi--schede li:last-child::before { color: var(--occhiello-su-scuro); }
.passi--schede li:last-child p { color: var(--testo-su-scuro); }
@media (max-width: 860px) {
  .passi, .passi--4 { grid-template-columns: 1fr; gap: var(--s2); }
  .passi--schede li { min-height: 0; }
}

/* ---------- Recensioni ---------- */
.recensioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; padding: 0; list-style: none; align-items: start; }
.recensione { background: #fff; border-radius: var(--raggio-grande); padding: var(--s4) var(--s3); display: flex; flex-direction: column; box-shadow: var(--ombra); }
.recensione::before { content: "★★★★★"; color: var(--stelle); letter-spacing: 0.12em; margin-bottom: var(--s2); }
.recensione blockquote { margin: 0 0 var(--s3); font-size: var(--t-m); }
.recensione blockquote p { margin: 0; }
.recensione footer { margin-top: auto; color: var(--ardesia); font-size: var(--t-s); }
.recensione--evidenza { background: var(--fondo-scuro); color: #fff; transform: translateY(-1rem); }
.recensione--evidenza::before { color: #fff; }
.recensione--evidenza footer { color: var(--testo-su-scuro); }
@media (max-width: 860px) { .recensioni { grid-template-columns: 1fr; } .recensione--evidenza { transform: none; } }

/* ---------- Dove siamo / orari ---------- */
.indirizzo { color: var(--inchiostro); margin-bottom: var(--s3); }
.orari { border-collapse: collapse; width: 100%; max-width: 28rem; margin-bottom: var(--s3); }
.orari th, .orari td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--linea); }
.orari th { font-weight: 400; }
.orari td { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Fascia "Prenota la tua prima visita" (condivisa) ---------- */
.fascia { padding: var(--s4) clamp(0.5rem, 5vw, 5rem); }
.fascia__pannello {
  display: grid; grid-template-columns: 1fr minmax(0, 28rem); gap: var(--s5); align-items: center;
  padding: clamp(2rem, 5vw, 5rem); border-radius: var(--raggio-pannello); color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgba(18,78,190,.5), rgba(18,78,190,0) 70%), var(--fondo-scuro-2);
}
.fascia h2 { color: #fff; font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.75rem); line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 var(--s2); max-width: 11ch; }
.fascia__testo > p { color: var(--testo-su-scuro); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.6; max-width: 34rem; margin: 0 0 var(--s4); }
.fascia .btn img { width: 19px; height: 19px; }
.fascia .btn--bordo-chiaro img { filter: none; }
.fascia__indirizzo { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.fascia__indirizzo p { margin: 0; font-size: var(--t-l); }
.btn-tondo { display: inline-grid; place-items: center; min-width: 68px; min-height: 48px; border-radius: 999px; border: 1px solid #fff; }
.btn-tondo:hover { background: rgba(255,255,255,.12); }
.btn-tondo img { width: 20px; height: 20px; }
.orari--scuro { max-width: none; margin: 0; color: #fff; }
.orari--scuro caption { text-align: left; font-size: var(--t-l); font-weight: 500; padding-bottom: 0.2rem; }
.orari--scuro th, .orari--scuro td { border-bottom-color: var(--notte-200); }
@media (max-width: 900px) { .fascia__pannello { grid-template-columns: 1fr; } .fascia .btn { width: 100%; } }

/* ---------- Footer ---------- */
.piede { margin-top: var(--margine-pannello) !important; background: var(--fondo-scuro); border-radius: 0 !important; margin-inline: 0 !important; margin-bottom: 0 !important; color: var(--testo-su-scuro); padding-block: var(--s5) var(--s3); font-size: var(--t-s); margin: 0 var(--margine-pannello) var(--margine-pannello); border-radius: var(--raggio-pannello); overflow: hidden; }
.piede a { color: #fff; }
.piede .piede__contatti { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 var(--s5); padding: 0 0 var(--s5); list-style: none; border-bottom: 1px solid rgba(255,255,255,.14); text-align: center; }
.piede__contatti li { display: grid; justify-items: center; gap: 0.3rem; padding-inline: var(--s2); min-width: 0; overflow-wrap: anywhere; }
.piede__contatti li + li { border-left: 1px solid rgba(255,255,255,.14); }
.piede__contatti svg { width: 28px; height: 28px; color: var(--occhiello-su-scuro); margin-bottom: var(--s1); }
.piede__contatti span { color: var(--testo-su-scuro); }
.piede__contatti a { font-size: var(--t-m); font-weight: 600; text-decoration: none; }
.piede__contatti a:hover { text-decoration: underline; }
.piede__griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s4); }
.piede h2 { font-size: var(--t-m); font-weight: 600; letter-spacing: 0; color: #fff; margin-bottom: var(--s1); }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: 0.4rem; }
.piede__marchio { margin: var(--s4) 0 0; font-size: clamp(3.5rem, 17.5vw, 17.5rem); white-space: nowrap; font-weight: 600; letter-spacing: -0.06em; line-height: 0.8; color: rgba(255,255,255,.07); text-align: center; user-select: none; }
.piede__fondo { padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); justify-content: center; }
@media (max-width: 860px) {
  .piede__contatti { grid-template-columns: 1fr; gap: var(--s3); }
  .piede__contatti li + li { border-left: 0; }
  .piede__griglia { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .piede__griglia { grid-template-columns: 1fr; } }

/* ---------- Testata pagine interne ---------- */
.apertura { padding-block: var(--s6); }
.apertura .lead { margin-bottom: 0; }
.apertura h1 { max-width: 18ch; }
.apertura .duo img { aspect-ratio: 4 / 3.2; }
.indice { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.indice a { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 999px; background: #fff; color: var(--inchiostro); font-weight: 500; font-size: var(--t-s); text-decoration: none; box-shadow: var(--ombra); }
.indice a:hover { background: var(--cta); color: #fff; }

/* ---------- Linea del tempo ---------- */
.tempo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.tempo li { background: var(--superficie); border-radius: var(--raggio-grande); padding: var(--s4) var(--s3); }
.tempo b { display: block; font-size: var(--t-2xl); font-weight: 500; letter-spacing: -0.04em; color: var(--blu); line-height: 1; }
.tempo p { margin: var(--s2) 0 0; }
@media (max-width: 760px) { .tempo { grid-template-columns: 1fr; } }

/* ---------- Tre colonne ---------- */
.tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.tre li { background: #fff; border-radius: var(--raggio-grande); padding: var(--s4) var(--s3); box-shadow: var(--ombra); }
.tre h3 { margin-bottom: 0.4rem; }
.tre p { color: var(--ardesia); margin: 0; }
@media (max-width: 860px) { .tre { grid-template-columns: 1fr; } }

/* ---------- Galleria ---------- */
.galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.galleria figure { margin: 0; }
.galleria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--raggio-grande); background: var(--vetro-scuro); }
.galleria figcaption { font-size: var(--t-s); color: var(--ardesia); margin-top: 0.5rem; }
@media (max-width: 760px) { .galleria { grid-template-columns: 1fr 1fr; } }

/* ---------- Trattamenti ---------- */
.gruppo { padding: var(--s5) 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 20rem 1fr; gap: var(--s5); }
.gruppo:first-of-type { border-top: 0; }
.gruppo__testa { position: sticky; top: 7rem; align-self: start; }
.gruppo__testa h2 { font-size: var(--t-xl); letter-spacing: -0.03em; }
.gruppo__testa svg { width: 56px; height: 56px; padding: 10px; border-radius: 50%; background: var(--superficie); color: var(--blu); margin-bottom: var(--s2); }
.gruppo__testa p { color: var(--ardesia); }
.gruppo__testa .chi { font-size: var(--t-s); }
.voci { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s2); align-content: start; }
.voce { background: var(--superficie); border-radius: var(--raggio-grande); padding: var(--s4) var(--s3); }
.voce h3 { margin-bottom: 0.5rem; }
.voce p:last-child { margin-bottom: 0; }
.voce .tecnico { display: block; color: var(--ardesia); font-weight: 400; font-size: var(--t-s); letter-spacing: 0; margin-top: 0.2rem; }
@media (max-width: 860px) { .gruppo { grid-template-columns: 1fr; gap: var(--s3); } .gruppo__testa { position: static; } }

/* ---------- Riquadri ---------- */
.avviso { background: #fff; padding: var(--s4); border-radius: var(--raggio-grande); box-shadow: var(--ombra); border-top: 4px solid var(--cielo); }
.avviso h2, .avviso h3 { margin-bottom: var(--s1); font-size: var(--t-xl); }
.da-completare { background: var(--evidenzia-fondo); color: var(--evidenzia-testo); padding: 0 0.25em; border-radius: 3px; }

/* ---------- Lista con spunte ---------- */
.spunte { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.spunte li { padding-left: 2.2rem; position: relative; }
.spunte li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--mare-100); }
.spunte li::after { content: ""; position: absolute; left: 0.42rem; top: 0.55em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--blu); border-bottom: 2px solid var(--blu); transform: rotate(-45deg); }

/* ---------- FAQ ---------- */
.faq { max-width: 50rem; display: grid; gap: var(--s1); }
.faq details { background: #fff; border-radius: var(--raggio-grande); padding-inline: var(--s3); box-shadow: var(--ombra); }
.faq summary { cursor: pointer; padding: var(--s3) 3rem var(--s3) 0; font-weight: 500; font-size: var(--t-m); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--superficie); font-size: 1.25rem; color: var(--blu); }
.faq details[open] summary::after { content: "−"; background: var(--cta); color: #fff; }
.faq details > div { padding: 0 0 var(--s3); color: var(--ardesia); }
.faq-griglia { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s4) var(--s5); align-items: start; }
.faq-griglia .faq { max-width: none; }
@media (max-width: 860px) { .faq-griglia { grid-template-columns: 1fr; } }

/* ---------- Canali di contatto ---------- */
.canali { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.canale { background: var(--superficie); border-radius: var(--raggio-grande); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.canale svg { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: #fff; color: var(--blu); }
.canale h2 { font-size: var(--t-l); margin: var(--s1) 0 0; letter-spacing: -0.015em; }
.canale p { margin: 0 0 var(--s2); color: var(--ardesia); }
.canale .btn { margin-top: auto; align-self: flex-start; }
.canale .numero { font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.02em; color: var(--inchiostro); margin: 0; }
@media (max-width: 860px) { .canali { grid-template-columns: 1fr; } .canale .btn { align-self: stretch; } }

/* ---------- Modulo ---------- */
.modulo { max-width: 44rem; display: grid; gap: var(--s3); background: #fff; padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--raggio-grande); box-shadow: var(--ombra); }
.campo { display: grid; gap: 0.4rem; }
.campo label, .campo legend { font-weight: 600; }
.campo .aiuto { font-size: var(--t-s); color: var(--ardesia); margin: 0; }
.campo .facoltativo { font-weight: 400; color: var(--ardesia); }
.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--inchiostro); background: #fff;
  border: 1.5px solid var(--bordo-campo); border-radius: var(--raggio); padding: 0.75rem 0.9rem; min-height: 50px; width: 100%;
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--cielo); outline-offset: 1px; border-color: var(--blu); }
.campo [aria-invalid="true"] { border-color: var(--errore); }
.errore { color: var(--errore); font-size: var(--t-s); font-weight: 600; margin: 0; }
.errore:empty { display: none; }
.scelte { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.scelte legend { margin-bottom: 0.4rem; padding: 0; }
.scelta { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.scelta input { width: 22px; height: 22px; min-height: 0; accent-color: var(--cta); }
.consenso { display: grid; grid-template-columns: 24px 1fr; gap: 0.75rem; align-items: start; }
.consenso input { width: 22px; height: 22px; margin-top: 0.2rem; accent-color: var(--cta); }
.trappola { position: absolute; left: -5000px; }
.esito { padding: var(--s3); border-radius: var(--raggio); font-weight: 600; }
.esito--ok { background: var(--ok-fondo); color: var(--ok-testo); }
.esito--ko { background: var(--ko-fondo); color: var(--ko-testo); }

/* ---------- Testi legali ---------- */
.legale { max-width: 46rem; }
.legale h2 { font-size: var(--t-xl); margin-top: var(--s5); }

/* Spazio tra la testata fluttuante e il primo pannello (pagine interne) */
body:not(.pagina-home) main > :first-child { margin-top: var(--s2); }


/* =====================================================================
   Home v4 (Figma nodo 21:2259)
   ===================================================================== */
.titolo-sezione { text-align: center; max-width: 46rem; margin: 0 auto var(--s5); }
.titolo-sezione h2, h2.titolo-sezione { margin-bottom: var(--s2); }
.titolo-sezione p { margin: 0; }
.sezione--compatta { padding-block: var(--s6) var(--s5); }
.sezione--senza-sopra { padding-top: 0; }

/* Hero: sorrisi e scheda dello stato */
.sorrisi { display: flex; align-items: center; gap: 20px; margin-bottom: var(--s5); }
.sorrisi__foto { display: flex; margin: 0; padding: 0; list-style: none; }
.sorrisi__foto li + li { margin-left: -20px; }
.sorrisi__foto img { width: 54px; height: 54px; border-radius: 50%; display: block; }
.sorrisi p { margin: 0; font-size: var(--t-m); font-weight: 500; }
.hero .sorrisi + h1 { margin-top: 0; }
.scheda-dato--stato { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s2); width: 16rem; }
.scheda-dato__titolo { font-size: 2rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.scheda-dato--stato .scheda-dato__nota { font-size: var(--t-s); font-weight: 400; color: var(--notte-900); margin-top: 4px; }
.stato-orari__pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--ardesia); margin-right: 8px; flex: none; }
.scheda-dato[data-aperto="si"] .stato-orari__pallino { background: var(--aperto); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aperto) 18%, transparent); }
.scheda-dato__numero { font-size: 3rem; }
.scheda-dato__forte { font-weight: 500; }
.scheda-dato__nota a { font-size: 0.75rem; }
@media (max-width: 640px) { .scheda-dato--stato { width: auto; } .scheda-dato__titolo { font-size: var(--t-xl); } .sorrisi { margin-bottom: var(--s3); } }

/* Area grigia: voci, bisogni, approccio */
.area-grigia { background: var(--superficie); }
.fascia-voci { padding-top: var(--s4); text-align: center; }
.fascia-voci__etichetta { margin: 0 0 var(--s1); font-size: var(--t-m); color: var(--ardesia); }
.area-grigia .scorrimento { border: 0; margin: 0; padding-block: var(--s1); }
.area-grigia .scorrimento span { color: var(--fondo-scuro-2); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); letter-spacing: -0.02em; }
.area-grigia .scorrimento span::after { color: var(--blu); }
.area-grigia .bisogno a { background: #fff; }
.area-grigia .bisogno a:hover { box-shadow: var(--ombra-forte); }

/* Il nostro approccio: su schermi larghi il blocco resta fermo mentre il testo si evidenzia */
.approccio { padding-block: var(--s5) var(--s6); }
.approccio__griglia { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,5fr) minmax(0,1fr); gap: var(--s4); padding-inline: var(--s4); align-items: center; width: 100%; }
.approccio__foto { width: 100%; aspect-ratio: 274 / 343; object-fit: cover; border-radius: 16px; background: #fff; }
.approccio__foto--a { align-self: end; }
.approccio__foto--b { align-self: start; order: 3; }
.approccio__testo { text-align: center; display: grid; justify-items: center; gap: var(--s3); max-width: 56.25rem; margin-inline: auto; }
.approccio__etichetta { margin: 0; color: var(--blu); font-weight: 600; font-size: var(--t-s); letter-spacing: 0.01em; }
.testo-lettura { margin: 0; font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); line-height: 1.27; letter-spacing: -0.02em; color: var(--inchiostro); font-weight: 400; }
.testo-lettura--attivo .parola { display: inline-grid; color: rgba(2,11,38,.32); font-weight: 400; transition: color .2s ease, font-weight .2s ease; }
/* copia invisibile in grassetto: tiene la larghezza fissa, così le righe non si spostano */
.testo-lettura--attivo .parola::after { content: attr(data-testo); font-weight: 600; visibility: hidden; height: 0; overflow: hidden; }
.testo-lettura--attivo .parola--letta { color: var(--inchiostro); font-weight: 600; }
@media (min-width: 901px) {
  .approccio--animata { padding-block: 0; }
  .approccio--animata .approccio__binario { height: 260vh; }
  .approccio--animata .approccio__palco { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: calc(var(--altezza-testata) * 0.6); }
}
@media (max-width: 900px) {
  .approccio__griglia { grid-template-columns: 1fr 1fr; padding-inline: var(--s2); }
  .approccio__testo { grid-column: 1 / -1; grid-row: 1; }
  .approccio__foto { aspect-ratio: 4 / 3; }
  .approccio__foto--b { order: 0; }
}

/* I tuoi dentisti: card che si girano */
.dentisti { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; padding: var(--s2) 0 0; list-style: none; }
.dentista { position: relative; perspective: 1400px; aspect-ratio: 389 / 379; }
.dentista__interno { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.dentista__fronte, .dentista__retro { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dentista__fronte { background: radial-gradient(60% 90% at 100% 0%, rgba(18,78,190,.5), rgba(18,78,190,0) 70%), var(--fondo-scuro-2); color: #fff; }
.dentista__fronte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0 !important; }
.dentista__fronte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(25,35,61,0) 62%, rgba(25,35,61,.85)); }
.dentista__nome { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; display: grid; gap: 8px; }
.dentista__nome h3 { margin: 0; color: #fff; font-size: clamp(1.375rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1; }
.dentista__nome p { margin: 0; font-size: var(--t-s); color: rgba(255,255,255,.85); }
.dentista__retro { transform: rotateY(180deg); background: #fff; box-shadow: var(--ombra-forte); padding: clamp(1.25rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; justify-content: safe center; gap: var(--s1); overflow: auto; }
.dentista__retro h3 { margin: 0 0 0.25rem; font-size: var(--t-l); font-weight: 500; letter-spacing: -0.02em; }
.dentista__retro p { margin: 0; color: var(--ardesia); font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1rem); line-height: 1.55; }
.dentista__retro .dentista__laurea { color: var(--inchiostro); font-weight: 500; }
.dentista__gira { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; cursor: pointer; border-radius: 16px; }
.dentista__gira:focus-visible { outline: 3px solid var(--cielo); outline-offset: 4px; }
.dentista--girata .dentista__interno { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .dentista:hover .dentista__interno { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dentista__interno { transform: none !important; }
  .dentista__retro { transform: none; opacity: 0; transition: opacity .2s; }
  .dentista--girata .dentista__retro { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .dentista:hover .dentista__retro { opacity: 1; }
}
@media (max-width: 1060px) { .dentisti { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }
.nota-centrale { max-width: 56.25rem; margin: var(--s5) auto 0; text-align: center; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.45; }

/* Tecnologie */
.tecnologia img { border-radius: var(--raggio-grande); aspect-ratio: 584 / 438; }

/* Recensioni a 4 colonne */
.recensioni--4 { grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.recensioni--4 .recensione { padding: var(--s4) var(--s3); gap: var(--s2); border-radius: var(--raggio-grande); box-shadow: 0 1px 1px rgba(2,11,38,.06), 0 8px 12px rgba(2,11,38,.06); }
.recensioni--4 .recensione::before { content: none; }
.recensione__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.recensione__nome { color: var(--ardesia); font-size: var(--t-s); }
.recensione__stelle { color: var(--inchiostro); letter-spacing: 0.12em; font-size: var(--t-m); }
.recensioni--4 .recensione blockquote { margin: 0; }
.recensioni--4 .recensione--evidenza { background: var(--blu); color: #fff; transform: none; border-radius: 16px; }
.recensioni--4 .recensione--evidenza .recensione__nome { color: rgba(255,255,255,.85); }
.recensioni--4 .recensione--evidenza .recensione__stelle { color: #fff; }
@media (max-width: 1100px) { .recensioni--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .recensioni--4 { grid-template-columns: 1fr; } }

/* Prima e dopo: tendina trascinabile */
.confronto { position: relative; max-width: 55rem; margin-inline: auto; aspect-ratio: 1154 / 496; border-radius: 16px; overflow: hidden; background: var(--superficie); touch-action: pan-y; }
.confronto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.confronto__prima { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.confronto__linea { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 6px; margin-left: -3px; background: #fff; pointer-events: none; }
.confronto__maniglia { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; box-shadow: var(--ombra-forte); }
.confronto__maniglia::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; color: var(--inchiostro); letter-spacing: 0.15em; }
.confronto__etichetta { position: absolute; top: 16px; padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(2,11,38,.7); color: #fff; font-size: var(--t-s); font-weight: 600; pointer-events: none; }
.confronto__etichetta--prima { left: 16px; }
.confronto__etichetta--dopo { right: 16px; }
.confronto__cursore { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.confronto:has(.confronto__cursore:focus-visible) .confronto__maniglia { outline: 3px solid var(--cielo); outline-offset: 3px; }

/* Indizio "si gira" sulle card dei dentisti (decorativo: il pulsante ha già il suo nome) */
.dentista__fronte::before { content: "↻"; position: absolute; top: 16px; right: 16px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 1.1rem; backdrop-filter: blur(6px); }

/* Ritratti scontornati dei medici: stesso fondo blu delle card della home */
img[src$="lorenzo.webp"], img[src$="arianna.webp"], img[src$="luca.webp"] {
  background: radial-gradient(60% 90% at 100% 0%, rgba(18,78,190,.5), rgba(18,78,190,0) 70%), var(--fondo-scuro-2);
  object-position: 50% 0;
}

/* =====================================================================
   Pagina Lo studio (Figma nodo 33:3103)
   ===================================================================== */
:root { --altezza-testata: 96px; }
@media (max-width: 960px) { :root { --altezza-testata: 76px; } }
/* Il grigio parte da sotto la testata fluttuante, come nel Figma */
body:not(.pagina-home) main > .area-grigia--pagina:first-child { margin-top: calc(-1 * var(--altezza-testata)); padding-top: var(--altezza-testata); }
.apertura-studio { padding: var(--s6) 0 var(--s4); }
.apertura-studio__griglia { width: min(100% - clamp(2.5rem, 5vw, 5rem), 76rem); margin-inline: auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s5); align-items: center; }
.apertura-studio h1 { font-size: var(--t-2xl); line-height: 1.1; margin-bottom: var(--s2); }
.apertura-studio .lead { font-size: var(--t-m); color: var(--inchiostro); max-width: 40rem; margin: 0; }
.apertura-studio img { width: 100%; max-width: 25rem; justify-self: end; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio-grande); }
@media (max-width: 860px) { .apertura-studio__griglia { grid-template-columns: 1fr; } .apertura-studio img { justify-self: stretch; max-width: none; } }
.area-grigia .fatti-fascia { padding-block: var(--s4); }

/* Galleria: una foto grande e quattro piccole */
.galleria--mosaico { grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.galleria--mosaico li:first-child { grid-column: span 2; grid-row: span 2; }
/* la foto grande riempie l'altezza delle due righe piccole, senza allungarle */
.galleria--mosaico li:first-child figure { position: relative; height: 100%; min-height: 18rem; }
.galleria--mosaico li:first-child img { position: absolute; inset: 0 0 2rem; width: 100%; height: calc(100% - 2rem); aspect-ratio: auto; object-fit: cover; }
.galleria--mosaico li:first-child figcaption { position: absolute; left: 0; bottom: 0; margin: 0; }
@media (max-width: 760px) { .galleria--mosaico { grid-template-columns: 1fr 1fr; } .galleria--mosaico li:first-child { grid-row: auto; } .galleria--mosaico li:first-child figure { position: static; min-height: 0; } .galleria--mosaico li:first-child img { position: static; height: auto; aspect-ratio: 4 / 3; } .galleria--mosaico li:first-child figcaption { position: static; margin-top: 0.5rem; } }

/* Tecnologie in versione estesa */
.tecnologie { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s3); }
.tecnologie li { padding-left: var(--s3); border-left: 2px solid var(--blu); }
.tecnologie h3 { margin: 0 0 0.3rem; font-size: var(--t-m); font-weight: 600; }
.tecnologie p { margin: 0; color: var(--ardesia); }
.tecnologia { align-items: start; }

/* Medici in versione estesa: tutto il testo visibile */
.medici-estesi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0; padding: var(--s2) 0 0; list-style: none; }
.medico-esteso { display: flex; flex-direction: column; background: #fff; border-radius: var(--raggio-grande); box-shadow: 0 1px 2px rgba(2,11,38,.06), 0 10px 30px rgba(2,11,38,.08); overflow: hidden; }
.medico-esteso__foto { aspect-ratio: 389 / 330; overflow: hidden; border-radius: 16px; margin: 8px; }
.medico-esteso__foto img { width: 100%; height: 100%; object-fit: cover; }
.medico-esteso__testo { padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.medico-esteso h3 { margin: 0; font-size: clamp(1.375rem, 1rem + 0.8vw, 1.75rem); letter-spacing: -0.012em; }
.medico-esteso__spec { margin: 0; color: var(--blu); font-weight: 500; font-size: var(--t-s); }
.medico-esteso__laurea { margin: var(--s1) 0 0; font-weight: 500; }
.medico-esteso__testo > p:not([class]) { margin: 0; color: var(--ardesia); }
.medico-esteso__albo { margin: 0; font-size: var(--t-s); color: var(--ardesia); }
@media (max-width: 1000px) { .medici-estesi { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } }
.area-grigia + .sezione--vetro { margin-top: var(--s5); }

/* FAQ della home: a tutta larghezza, senza angoli arrotondati */
.faq-piena { margin-inline: 0; border-radius: 0; }
.pagina-home .piede { margin-top: 0 !important; }


/* ---- Revisione 6 ottobre ---- */
/* Spazio tra titolo di sezione e card */
h2.titolo-sezione, .titolo-sezione { margin-bottom: var(--s5); }
/* Card della pagina Lo studio: figure leggermente più in alto */
.medico-esteso__foto img { object-position: 50% 0 !important; }
/* Gli ambienti: sezione bianca con aria sopra e sotto */
.sezione--ambienti { padding-block: var(--s6); }
/* FAQ a tutta larghezza su ogni pagina: il footer si attacca */
body:has(main > .faq-piena:last-child) .piede { margin-top: 0 !important; }

/* Tipografia su mobile: scala standard (corpo 16-18 px, H1 32-36, H2 26-28, H3 20) */
@media (max-width: 640px) {
  :root { --t-m: 1.0625rem; --t-l: 1.25rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: 2.125rem; }
  body { line-height: 1.55; }
  .sezione { padding-block: var(--s5); }
  .hero h1 { font-size: 2.25rem; line-height: 1.12; }
  .hero__lead { font-size: 1rem; margin-bottom: var(--s4); }
  .sorrisi p { font-size: 1rem; }
  .sorrisi__foto img { width: 44px; height: 44px; }
  .apertura-studio h1, .apertura h1 { font-size: 2rem; }
  .fascia h2 { font-size: 2.125rem; }
  .fascia__testo > p { font-size: 1.0625rem; }
  .testo-lettura { font-size: 1.25rem; line-height: 1.35; }
  .nota-centrale { font-size: 1.0625rem; }
  .area-grigia .scorrimento span { font-size: 1.75rem; }
  .fatti b { font-size: 1.75rem; }
  .dentista__nome h3, .medico-esteso h3 { font-size: 1.375rem; }
  .piede__contatti a { font-size: 1rem; }
  /* Schede dell'hero: affiancate e compatte */
  .hero__schede { flex-direction: row; align-items: stretch; gap: var(--s1); }
  .scheda-dato { flex: 1 1 0; min-width: 0; min-height: 0; padding: 0.75rem 0.9rem; border-radius: 16px; gap: 2px; }
  .scheda-dato--stato { width: auto; }
  .scheda-dato__titolo { font-size: 1.125rem; }
  .scheda-dato--stato .scheda-dato__nota, .scheda-dato__nota { font-size: 0.875rem; }
  .scheda-dato__numero { font-size: 1.75rem; gap: 6px; }
  .scheda-dato__numero img { width: 16px; height: 29px; }
  .stato-orari__pallino { margin-right: 0; }
  .btn--icona { min-height: 52px; font-size: 1rem; }
}
.apertura-studio__azioni { margin-top: var(--s4); }

/* Pallino "Aperto ora": azzurro, con un alone che si allarga e svanisce come un segnale "in diretta" */
.stato-orari__pallino { position: relative; }
.scheda-dato[data-aperto="si"] .stato-orari__pallino { background: var(--cielo); box-shadow: none; }
.scheda-dato[data-aperto="si"] .stato-orari__pallino::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cielo);
  animation: in-diretta 1.8s ease-out infinite;
}
@keyframes in-diretta { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scheda-dato[data-aperto="si"] .stato-orari__pallino::after { animation: none; opacity: 0; } }

/* ---- Revisione schede hero, modulo, mappa, consenso ---- */
/* Schede dell'hero più compatte su desktop */
@media (min-width: 641px) {
  .scheda-dato { padding: 18px 20px; min-height: 104px; min-width: 0; border-radius: 20px; gap: 6px; }
  .scheda-dato--stato { width: 13rem; }
  .scheda-dato__titolo { font-size: 1.5rem; }
  .scheda-dato__numero { font-size: 2.25rem; gap: 8px; }
  .scheda-dato__numero img { width: 18px; height: 32px; }
  .scheda-dato__nota { font-size: var(--t-s); }
  .hero__schede { gap: var(--s2); }
}

/* Campi del modulo: misura standard (testo 16 px, altezza 44 px) */
.modulo { gap: var(--s3); }
.campo { gap: 0.35rem; }
.campo label, .campo legend { font-size: var(--t-s); }
.campo input, .campo select, .campo textarea { font-size: 1rem; line-height: 1.4; min-height: 44px; padding: 0.55rem 0.8rem; border-radius: 10px; }
.campo textarea { min-height: 7rem; }
.scelta { font-size: var(--t-s); }
.scelta input { width: 20px; height: 20px; }
.consenso { font-size: var(--t-s); }

/* Contatti: mappa caricata solo con consenso */
.dopo-tabella { margin-bottom: var(--s3); }
.mappa { position: relative; aspect-ratio: 4 / 3; border-radius: var(--raggio-grande); overflow: hidden; background: var(--superficie); display: grid; place-items: center; }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa__avviso { max-width: 26rem; padding: var(--s4); text-align: center; display: grid; justify-items: center; gap: var(--s1); }
.mappa__avviso p { margin: 0; color: var(--ardesia); font-size: var(--t-s); }
.mappa__avviso .mappa__titolo { color: var(--inchiostro); font-weight: 600; font-size: var(--t-m); }
.mappa__avviso .btn { margin-top: var(--s1); }

/* Link a forma di pulsante (Gestisci i cookie) */
.link-pulsante { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.piede .link-pulsante { color: #fff; }

/* Banner del consenso */
.consenso-cookie {
  position: fixed; z-index: 90; left: var(--s2); bottom: var(--s2); width: min(30rem, calc(100% - 2rem));
  background: #fff; color: var(--inchiostro); border-radius: var(--raggio-grande); box-shadow: 0 20px 60px rgba(2,11,38,.25);
  padding: var(--s3); font-size: var(--t-s);
}
.consenso-cookie h2 { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--s1); padding-right: 2.5rem; }
.consenso-cookie p { margin: 0 0 var(--s2); color: var(--ardesia); }
.consenso-cookie__chiudi { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--superficie); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--inchiostro); }
.consenso-cookie__dettagli { display: grid; gap: var(--s1); margin-bottom: var(--s2); }
.consenso-cookie__voce { display: grid; grid-template-columns: 22px 1fr; gap: 0.6rem; align-items: start; }
.consenso-cookie__voce input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cta); }
.consenso-cookie__azioni { display: flex; flex-wrap: wrap; gap: var(--s1); }
.consenso-cookie__azioni .btn { flex: 1 1 auto; min-height: 44px; padding-inline: 1rem; }
@media (max-width: 960px) { .consenso-cookie { left: 0.75rem; right: 0.75rem; width: auto; bottom: calc(84px + 0.5rem); } }

/* Pagine legali */
.apertura-studio__griglia--solo-testo { grid-template-columns: 1fr; }
.apertura-studio--legale { padding-bottom: var(--s5); }
.legale ul { padding-left: 1.2rem; display: grid; gap: 0.5rem; margin: 0 0 var(--s2); }
.legale .avviso { margin-bottom: var(--s4); }
.tabella-scorre { overflow-x: auto; margin: 0 0 var(--s2); }
.tabella-legale { width: 100%; border-collapse: collapse; font-size: var(--t-s); min-width: 34rem; }
.tabella-legale th, .tabella-legale td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--linea); }
.tabella-legale thead th { background: var(--superficie); font-weight: 600; }
.consenso-cookie [hidden] { display: none !important; }

/* Footer: secondo numero e copyright */
.piede__contatti .piede__secondo { font-size: var(--t-s); font-weight: 500; opacity: .85; }
.piede__copyright { font-size: 0.8125rem; opacity: .7; }
/* Contatti: email su una riga che può andare a capo */
.canale .numero--email { font-size: var(--t-m); word-break: break-all; }

/* ---- Pagina Contatti ---- */
.apertura-contatti { padding: var(--s6) 0; }
.apertura-contatti__testa { text-align: center; max-width: 46rem; margin: 0 auto var(--s5); }
.apertura-contatti h1 { font-size: var(--t-2xl); line-height: 1.1; margin-bottom: var(--s2); }
.apertura-contatti .lead { margin-inline: auto; color: var(--inchiostro); font-size: var(--t-m); }
.area-grigia .canale { background: #fff; }
.canale svg { overflow: visible; }
.canale .icona-wa { padding: 13px; }
.duo--arrivare { align-items: start; }
.arrivare .indirizzo { margin-bottom: var(--s3); }
.arrivare__lista { margin-bottom: var(--s3); }
.riquadro-orari { margin-top: var(--s4); background: var(--superficie); border-radius: var(--raggio-grande); padding: var(--s3); }
.riquadro-orari h3 { margin: 0 0 var(--s1); }
.riquadro-orari .orari { max-width: none; margin-bottom: var(--s2); }
.riquadro-orari p { margin: 0; font-size: var(--t-s); }
.duo--arrivare .mappa { aspect-ratio: auto; height: 100%; min-height: 26rem; }
@media (max-width: 860px) { .duo--arrivare .mappa { min-height: 20rem; } }

/* Icona WhatsApp ufficiale */
.icona-wa { width: 1.2em; height: 1.2em; flex: none; }
/* Barra mobile: WhatsApp con bordo e testo blu scuro */
.btn--wa-bordo { background: #fff; color: var(--fondo-scuro-2); border: 1.5px solid var(--fondo-scuro-2); }
.btn--wa-bordo:hover { background: var(--superficie); color: var(--fondo-scuro-2); }
.area-grigia .canale svg { background: var(--superficie); }
a[href^="tel:"] { white-space: nowrap; }
/* Icone dentro i pulsanti delle card: dimensione normale, senza cerchio */
.canale .btn svg, .area-grigia .canale .btn svg { width: 1.2em; height: 1.2em; padding: 0; background: none; border-radius: 0; color: currentColor; }

/* Galleria a 4 foto: grande a sinistra, due piccole al centro, una verticale a destra */
.galleria--quattro { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 15rem); gap: var(--s2); }
.galleria--quattro li { position: relative; }
.galleria--quattro li:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.galleria--quattro li:nth-child(2) { grid-column: 2; grid-row: 1; }
.galleria--quattro li:nth-child(3) { grid-column: 2; grid-row: 2; }
.galleria--quattro li:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.galleria--mosaico.galleria--quattro li img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--raggio-grande); }
@media (max-width: 760px) {
  .galleria--quattro { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .galleria--quattro li:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .galleria--quattro li:nth-child(1) { grid-column: 1 / -1; }
  .galleria--quattro li:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
}


/* Galleria a 5 foto: una grande a sinistra e quattro piccole */
.galleria--cinque { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 15rem); gap: var(--s2); }
.galleria--cinque li { position: relative; }
.galleria--cinque li:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.galleria--mosaico.galleria--cinque li img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: var(--raggio-grande); }
.galleria--cinque li:nth-child(4) img { object-position: 50% 30%; }
@media (max-width: 760px) {
  .galleria--cinque { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .galleria--cinque li:nth-child(n) { grid-row: auto; aspect-ratio: 4 / 3; }
  .galleria--cinque li:nth-child(1) { grid-column: 1 / -1; }
}

/* =====================================================================
   Animazioni di entrata (solo con .js-anima, cioè movimento non ridotto)
   Un solo movimento per tutto il sito: sale di 14 px e compare, 0,6 s.
   ===================================================================== */
:root { --entra-durata: .6s; --entra-curva: cubic-bezier(.22, .61, .36, 1); }
.js-anima [data-entra], .js-anima .entra-figlio {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--entra-durata) var(--entra-curva) var(--ritardo, 0ms), transform var(--entra-durata) var(--entra-curva) var(--ritardo, 0ms);
}
.js-anima [data-entra].entrato, .js-anima .entrato > .entra-figlio { opacity: 1; transform: none; }
/* il gruppo in sé non si muove: si muovono i figli */
.js-anima [data-entra-gruppo] { opacity: 1; }

/* Card cliccabili: leggero sollevamento al passaggio del mouse */
@media (hover: hover) and (pointer: fine) {
  .medico-esteso { transition: transform .25s var(--entra-curva), box-shadow .25s var(--entra-curva); }
  .js-anima .entrato > .medico-esteso:hover, .medico-esteso:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(2,11,38,.06), 0 16px 40px rgba(2,11,38,.12); }
}
.js-anima .entrato > .entra-figlio:hover { transition-delay: 0s; }

/* Footer su mobile: indirizzo, telefono e WhatsApp uno sotto l'altro */
@media (max-width: 860px) {
  .piede .piede__contatti { grid-template-columns: 1fr; gap: var(--s3); padding-bottom: var(--s4); margin-bottom: var(--s4); }
  .piede .piede__contatti li + li { border-left: 0; padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.14); }
}

/* Trattamenti: gruppo attivo durante la lettura */
.gruppo__testa svg { transition: background-color .35s var(--entra-curva), color .35s var(--entra-curva); }
.gruppo--attivo .gruppo__testa svg { background: var(--cta); color: #fff; }

/* Card cliccabili della home: sollevamento leggero al passaggio del mouse */
@media (hover: hover) and (pointer: fine) {
  .bisogno a { transition: background-color .25s var(--entra-curva), box-shadow .25s var(--entra-curva), transform .25s var(--entra-curva); }
  .bisogno a:hover { transform: translateY(-2px); }
}
.tabella-scorre { max-width: 100%; -webkit-overflow-scrolling: touch; } .legale { min-width: 0; overflow-wrap: anywhere; }