/* ==========================================================================
   COMPONENTI — Ottica Lepori: header, hero, sezioni home, footer, menu mobile
   Misure dai computed style del runtime Figma Sites originale (sonda zz-probe
   sul mirror locale a 375/600/800/1280/1440/1920).
   ========================================================================== */

/* --- Header ---------------------------------------------------------------- */

.site-header {
  background: var(--color-bg);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-inline: var(--pad-x);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  width: 75px;
  height: 27px;
}

/* Variante logo: wordmark compatto su mobile, esteso da 800 in su */
.site-header__logo .bp-desktop { display: block; }
.site-header__logo .bp-mobile { display: none; }

@media (max-width: 799px) {
  .site-header__logo .bp-desktop { display: none; }
  .site-header__logo .bp-mobile { display: block; }
}

@media (min-width: 800px) {
  .site-header__logo img { width: 90px; height: 30px; }
}

@media (min-width: 1280px) {
  .site-header__logo img { width: 105px; height: 35px; }
}

@media (min-width: 1440px) {
  .site-header__logo img { width: 135px; height: 45px; }
}

/* Nav "Home | Servizi": 15px fissi, peso regular, separatore verticale
   1px #566167, voce attiva sottolineata */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: normal;
}

.site-header__nav-sep {
  width: 1px;
  height: 15px;
  background: var(--color-line);
}

.site-header__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* --- Hover link — sottolineatura animata sinistra→destra, 1px identica
   in ogni punto del sito. CTA esclusa: il bottone pill ha il proprio
   hover a riempimento #FF8000. I link sottolineati in modo permanente
   ("Scopri il gruppo!", voce nav attiva) usano invece l'hover a opacità. */
.site-header__nav a:not([aria-current="page"]),
.mobile-menu__nav a:not([aria-current="page"]),
.footer-main__lines a,
.footer-main__social a,
.site-footer__privacy {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 2px);
  background-size: 0% 1px;
  transition: background-size 0.25s ease;
}

.site-header__nav a:not([aria-current="page"]):focus-visible,
.mobile-menu__nav a:not([aria-current="page"]):focus-visible {
  background-size: 100% 1px;
}

/* Hover attivo solo da desktop (oltre la soglia tablet): su mobile/tablet
   resta visibile solo la sottolineatura della pagina attiva. */
@media (min-width: 901px) {
  .site-header__nav a:not([aria-current="page"]):hover,
  .mobile-menu__nav a:not([aria-current="page"]):hover,
  .footer-main__lines a:hover,
  .footer-main__social a:hover,
  .site-footer__privacy:hover {
    background-size: 100% 1px;
  }
}

/* Contatti footer — più spazio tra testo e linea rispetto al resto del sito */
.footer-main__lines a,
.footer-main__social a {
  padding-bottom: 2px;
  background-position: 0 100%;
}

/* Hamburger — 3 linee bianche, visibile solo su mobile */
.site-header__menu-toggle {
  display: none;
  position: relative;
  z-index: 300;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
}

.site-header__menu-toggle span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 1.75px;
  background: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.site-header__menu-toggle span:nth-child(1) { top: 0; }
.site-header__menu-toggle span:nth-child(2) { top: 6px; }
.site-header__menu-toggle span:nth-child(3) { top: 12px; }

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-header__menu-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

@media (max-width: 799px) {
  .site-header__nav { display: none; }
  .site-header__menu-toggle { display: block; }
}

/* --- Menu mobile (overlay) --------------------------------------------------
   Nell'originale l'hamburger apre la pagina /mobile-menu; qui è un overlay
   full-screen equivalente (stessa scelta dei siti gemelli VisualGroup e
   Vicari), gestito da js/main.js. Blocco isolato e sostituibile. */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 70px 15px 25px; /* sotto l'header mobile (70px) */
  gap: 30px;
}

.mobile-menu[hidden] { display: none; }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mobile-menu__nav a {
  display: block;
  padding-block: 5px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.mobile-menu__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mobile-menu__logo {
  margin-top: auto;
  display: flex;
  justify-content: center;
}

.mobile-menu__logo video {
  width: 42px;
  height: 30px;
  object-fit: cover;
}

/* --- Hero -------------------------------------------------------------------- */

/* L'altezza scala con la larghezza: aspect-ratio 375/250 · 800/493 ·
   1280/700 da desktop in su (--hero-ratio) */
.hero {
  position: relative;
  aspect-ratio: var(--hero-ratio);
  overflow: hidden;
  background: var(--color-bg);
}

.hero__media,
.hero__media picture {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wordmark "Ottica Lepori" centrato */
.hero__wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--hero-wordmark-w);
  height: auto;
}

/* Lockup VG centrato in basso, a 24px dal fondo */
.hero__vg {
  position: absolute;
  left: 50%;
  bottom: var(--hero-vg-bottom);
  transform: translateX(-50%);
}

/* --- Lockup VG (logo testuale Inter) ------------------------------------------ */

.vg-lockup {
  display: flex;
  align-items: center;
  gap: var(--vg-gap, 3.1px);
  font-family: var(--font-logo);
  color: var(--color-text);
}

.vg-lockup__vg {
  font-weight: var(--fw-black);
  font-size: var(--vg-fs, 33.16px);
  /* box = line-height "normal" della Inter variabile (~1.21em), come il runtime */
  line-height: normal;
  letter-spacing: -0.01em;
}

.vg-lockup__sedi {
  font-weight: var(--fw-bold);
  font-size: var(--vg-sub-fs, 9.79px);
  line-height: var(--vg-sub-lh, 8.57px);
  letter-spacing: -0.02em;
}

.vg-lockup__sedi span { display: block; }

/* Taglie del lockup nel hero: altezza complessiva 29px sotto gli 800,
   48px da 800 in su, identico su Home e Servizi.
   font-size = altezza / 1.21 (line-height "normal" della Inter). */
.hero__vg { --vg-fs: 23.97px; --vg-sub-fs: 7.08px;  --vg-sub-lh: 6.19px;  --vg-gap: 2.22px; }
@media (min-width: 800px)  { .hero__vg { --vg-fs: 39.66px; --vg-sub-fs: 11.71px; --vg-sub-lh: 10.25px; --vg-gap: 3.66px; } }

/* --- Intro (H1 + divisore + DOVE SIAMO / ORARI) -------------------------------- */

.intro {
  background: var(--color-bg);
  padding-block: 75px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

@media (min-width: 800px) {
  .intro { padding-block: 100px; }
}

/* L'altezza della sezione segue il contenuto a ogni breakpoint */

.intro__rows {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

@media (min-width: 800px)  { .intro__rows { gap: 50px; } }
@media (min-width: 1440px) { .intro__rows { gap: 75px; } }

.intro__row {
  display: flex;
  gap: 40px;
  padding-inline: var(--pad-x);
}

@media (min-width: 800px) and (max-width: 1279px) {
  .intro__row { gap: 20px; }
}

/* Colonne: label a 16px dal testo, righe a interlinea 1.6 */
.intro__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intro__lines p {
  line-height: 1.6;
}

@media (max-width: 799px) {
  .intro__row { flex-direction: column; }
  .intro__row--1 { gap: 20px; }
  .intro__row--2 { gap: 25px; }
}

.intro__lines p {
  color: var(--color-text-soft);
}

.intro__lines .tb {
  font-weight: var(--fw-bold);
}

/* Indirizzo Bellinzona bianco pieno (ma #EBE8E8 sul solo Desktop 1280,
   incoerenza del runtime originale riprodotta fedelmente) */
.intro__addr--bellinzona p { color: var(--color-text); }

@media (min-width: 1280px) and (max-width: 1439px) {
  .intro__addr--bellinzona p { color: var(--color-text-soft); }
}

/* --- Immagine full-bleed ------------------------------------------------------ */

.full-image {
  overflow: hidden;
}

.full-image picture {
  height: 100%;
}

.full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grandezze immagini (v. Reference/indicazioni immagini.md): la sezione
   dopo l'intro in Home ha aspect-ratio per breakpoint con crop (cover);
   le altre full-bleed (qui sotto e nella pagina Servizi) seguono il
   rapporto nativo del file. */
.full-image--comune { aspect-ratio: 375 / 260; }
@media (min-width: 800px)  { .full-image--comune { aspect-ratio: 800 / 400; } }
@media (min-width: 1280px) { .full-image--comune { aspect-ratio: 1280 / 650; } }

.full-image--servizi img,
.full-image--svc2 img,
.full-image--svc3 img {
  height: auto;
}

/* --- Claim + I NOSTRI SERVIZI --------------------------------------------------- */

/* Pad sotto ridotto a 24px: l'ultima voce dista dalla CTA 24+70px
   (la colonna destra della griglia ha testi più corti e respira comunque) */
.services {
  background: var(--color-bg);
  padding-block: 75px 24px;
}

.services__head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 15px;
}

@media (max-width: 799px) {
  .services__head { gap: 10px; }
}

/* A capo del claim esplicito fino a 1280; da Wide in su il testo
   va a capo naturalmente (come l'originale, che serve due DOM diversi) */
.claim--wide { display: none; }

@media (min-width: 1440px) {
  .claim--narrow { display: none; }
  .claim--wide { display: block; }
}

.services__inner {
  padding-inline: var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 45px;
}

@media (max-width: 799px) {
  .services__inner { padding-bottom: 25px; }
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 65px;
}

@media (max-width: 1919px) { .services__grid { row-gap: 50px; } }
@media (min-width: 800px) and (max-width: 1279px) {
  .services__grid { column-gap: 20px; row-gap: 35px; }
}
@media (max-width: 799px) {
  .services__grid { grid-template-columns: 1fr; row-gap: 45px; }
}

/* Card: 8px fissi tra numero e titolo e tra titolo e descrizione */
.service-card,
.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Descrizioni: body della scala Vicari (18/24), solo colore soft */
.service-card p {
  color: var(--color-text-soft);
}

/* --- CTA "Prenota una visita" ---------------------------------------------------- */

/* Sezione CTA: lockup VG + titolo + bottone pill.
   Identica su Home e Servizi. */
.cta-visita {
  background: var(--color-bg);
  padding: 70px var(--pad-x) 90px;
  display: flex;
  flex-direction: column;
  gap: 27px;
}

@media (max-width: 799px) {
  .cta-visita {
    padding-block: 56px;
    gap: 19px;
  }
}

.cta-visita__head {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cta-visita__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
  letter-spacing: var(--ls-cta);
}

.cta-visita .vg-lockup { --vg-fs: 20.604px; --vg-sub-fs: 6.085px; --vg-sub-lh: 5.324px; --vg-gap: 1.9px; }
@media (min-width: 800px)  { .cta-visita .vg-lockup { --vg-fs: 24.725px; --vg-sub-fs: 7.302px; --vg-sub-lh: 6.389px; --vg-gap: 2.3px; } }
@media (min-width: 1280px) { .cta-visita .vg-lockup { --vg-fs: 28.846px; --vg-sub-fs: 8.519px; --vg-sub-lh: 7.454px; --vg-gap: 2.7px; } }
@media (min-width: 1440px) { .cta-visita .vg-lockup { --vg-fs: 33.163px; --vg-sub-fs: 9.793px; --vg-sub-lh: 8.569px; --vg-gap: 3.1px; } }

/* --- Bottone pill "Prenota ora" ---------------------------------------------------- */

/* Pill: bordo 1.25px, radius 100px, padding e testo fluidi 375→1280,
   hover a riempimento #FF8000 */
.btn-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  color: #FFFFFF;
  background-color: transparent;
  /* Fluido su tutta la scala 375px→1280px: 13px a mobile, 20px a desktop */
  font-size: clamp(13px, 10.1px + 0.7735vw, 20px);
  line-height: 24px; /* come il line-height fisso del body di Vicari */
  font-weight: var(--fw-medium);
  transition: background-color 0.45s ease;
}

@media (min-width: 901px) {
  .btn-pill:hover {
    background-color: var(--color-cta-hover);
  }
}

.btn-pill__arrow {
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
}

/* --- Fascia brand (VG + wordmark Ottica Lepori) -------------------------------------- */

.brand-band {
  background: var(--color-bg);
  padding-block: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

@media (min-width: 800px)  { .brand-band { gap: 75px; } }
@media (min-width: 1280px) { .brand-band { gap: 100px; } }
@media (min-width: 1440px) { .brand-band { padding-block: 50px; gap: 120px; } }
@media (min-width: 1920px) { .brand-band { gap: 130px; } }

/* Taglie dei due loghi per breakpoint (proporzioni VG:wordmark costanti) */
.brand-band__wordmark { width: 67.2px; height: auto; }
@media (min-width: 800px)  { .brand-band__wordmark { width: 89.6px; } }
@media (min-width: 1280px) { .brand-band__wordmark { width: 112px; } }
@media (min-width: 1440px) { .brand-band__wordmark { width: 140.8px; } }
@media (min-width: 1920px) { .brand-band__wordmark { width: 152.3px; } }

.brand-band .vg-lockup { --vg-fs: 26.006px; --vg-sub-fs: 7.68px; --vg-sub-lh: 6.72px; --vg-gap: 2.4px; }
@media (min-width: 800px)  { .brand-band .vg-lockup { --vg-fs: 34.675px; --vg-sub-fs: 10.24px;  --vg-sub-lh: 8.96px;   --vg-gap: 3.2px; } }
@media (min-width: 1280px) { .brand-band .vg-lockup { --vg-fs: 39.404px; --vg-sub-fs: 11.636px; --vg-sub-lh: 10.182px; --vg-gap: 3.6px; } }
@media (min-width: 1440px) { .brand-band .vg-lockup { --vg-fs: 54.18px;  --vg-sub-fs: 16px;     --vg-sub-lh: 14px;     --vg-gap: 5px; } }

/* --- Footer: colonne Bellinzona / Grono / social -------------------------------------- */

.footer-main {
  background: var(--color-bg);
  padding: 75px var(--pad-x);
}

@media (max-width: 799px) {
  .footer-main { padding-block: 35px; }
}

.footer-main__row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

@media (max-width: 799px) {
  /* Gap 50px allineato al blocco contatti di riferimento (VisualGroup) */
  .footer-main__row { flex-direction: column; gap: 50px; }
}

/* Sedi: prima riga in Bold ("Ottica Lepori Bellinzona"), poi indirizzo
   e recapiti in Regular. Interlinea 1.6. */
.footer-main__sede {
  display: flex;
  flex-direction: column;
}

.footer-main__lines p,
.footer-main__social p {
  line-height: 1.6;
}

.footer-main__lines .tb {
  font-weight: var(--fw-bold);
}

.footer-main__social {
  display: flex;
  flex-direction: column;
}

/* Link Instagram: nessuna sottolineatura fissa, hover con la
   sottolineatura animata condivisa */

/* Sul solo Desktop 1280 recapiti e città sono #EBE8E8 (social bianchi) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .footer-main__sede { color: var(--color-text-soft); }
}

/* --- Footer: video VG + copyright ------------------------------------------------------
   Padding 48/32 (38/26 mobile), video VG 62x62 fisso, copyright fluido
   15→18px con opacità 0.9, privacy 11px. */
.site-footer {
  background: var(--color-bg);
  padding: 48px 25px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 799px) {
  .site-footer { padding-block: 75px; }
}

.site-footer__video {
  width: var(--footer-video-w);
  height: var(--footer-video-h);
  object-fit: cover;
  margin-bottom: 1px;
}

.site-footer__copyright {
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  letter-spacing: -0.01em;
  opacity: 0.9;
}

@media (max-width: 799px) {
  /* Logo VG 3D e copyright ridotti di 0.15x su mobile */
  .site-footer__video {
    width: calc(var(--footer-video-w) * 0.85);
    height: calc(var(--footer-video-h) * 0.85);
  }

  .site-footer__copyright { font-size: calc(var(--fs-copy) * 0.85); }
}

.site-footer__privacy {
  /* Identico a Vicari: inline-block e interlinea ereditata dal body (24px).
     Con line-height normal il box resta stretto sulle lettere e la riga
     dell'hover (2px dal fondo) taglia il testo invece di passargli sotto */
  display: inline-block;
  margin-top: 1px;
  font-weight: var(--fw-thin);
  font-size: var(--fs-privacy);
  letter-spacing: -0.0012em;
}

/* Credit "Visual world by ENTG Studio" (stesso tag di miragemusic.ch):
   maiuscolo bold #C0C0C0 con marchietto pieno, link a entangled.ch,
   hover a opacità */
.site-footer__credit {
  display: block;
  margin-top: 10px;
  color: #C0C0C0;
  font-size: 9px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: normal;
  transition: opacity 0.25s ease;
}

@media (min-width: 901px) {
  .site-footer__credit:hover { opacity: 0.5; }
}

.entg-mark {
  display: inline-block;
  vertical-align: baseline;
  width: 2.6ch;
  height: 0.7em;
  height: 1cap;
  margin-right: 0.18em;
  background: currentColor;
}

/* --- Pagina Policy (misure verificate col comparatore sul mirror Lepori) --------------- */

.policy {
  background: var(--color-bg);
  padding: 25px;
  min-height: 100vh;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.policy__close {
  display: block;
  margin-left: auto;
  width: 24px;
  height: 24px;
  position: relative;
}

/* Le due linee attraversano il box 24x24 da angolo ad angolo (24*sqrt(2)) */
.policy__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 33.94px;
  height: 1px;
  background: var(--color-text);
}

.policy__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleY(2.5); }
.policy__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) scaleY(2.5); }

@media (min-width: 901px) {
  .policy__close:hover { opacity: 0.7; }
}

.policy__testo {
  font-size: 18px;
  line-height: 19px;
  letter-spacing: -0.18px;
}

@media (max-width: 799px) {
  .policy__testo { margin-top: 35px; }

  /* Sotto gli 800 il paragrafo introduttivo del mirror scrive "visualgroup.ch"
     (senza "sa"): nascondiamo il run per replicare il testo del breakpoint */
  .policy__testo .policy__sa { display: none; }
}

.policy__testo p {
  white-space: pre-wrap;
}

/* Riga "INFORMATIVA ... visualgroupsa.ch": nel runtime il <p> ha line-height 0
   e sono i run a dettare l'altezza (Medium lh18 + Regular lh19), anche quando
   la riga va a capo a 375 */
.policy__testo .policy__informativa {
  line-height: 0;
}

.policy__testo .policy__informativa span:last-child {
  line-height: 19px;
}

.policy__testo h1 {
  font-weight: var(--fw-bold);
  font-size: 32px;
  line-height: 30px;
  letter-spacing: -0.64px;
}

.policy__testo .policy__sottotitolo {
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -0.18px;
}

.policy__testo h2 {
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.48px;
  margin: 0;
}

/* "9. Diritti delle persone interessate": nel mirror Lepori scala coi
   breakpoint (21/21 sotto gli 800, 24/24 come le h2 fino a 1279, 26/26 da 1280) */
.policy__testo .policy__h2-big {
  font-size: 21px;
  line-height: 21px;
  letter-spacing: -0.42px;
}

@media (min-width: 800px) {
  .policy__testo .policy__h2-big {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: -0.48px;
  }
}

@media (min-width: 1280px) {
  .policy__testo .policy__h2-big {
    font-size: 26px;
    line-height: 26px;
    letter-spacing: -0.52px;
  }
}

.policy__testo li {
  position: relative;
  padding-left: 27px;
  white-space: pre-wrap;
}

.policy__testo li::before {
  content: "\2022";
  position: absolute;
  left: 12px;
}

.policy__testo a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   PAGINA SERVIZI — misure dai computed style del runtime originale
   (sonda zz-probe sul mirror a 375/600/800/1280/1440/1920)
   ========================================================================== */

/* Varianti blocco per breakpoint (testi diversi nell'originale).
   -800: cambia sotto/sopra gli 800 · -1280: sotto/sopra i 1280 */
.bpb-desktop { display: block; }
.bpb-mobile { display: none; }
.bpb-u1280 { display: block; }
.bpb-d1280 { display: none; }

@media (max-width: 799px) {
  .bpb-desktop { display: none; }
  .bpb-mobile { display: block; }
}

@media (max-width: 1279px) {
  .bpb-u1280 { display: none; }
  .bpb-d1280 { display: block; }
}

/* --- Titoli grandi ("Strumenti pensati…", "Servizi per la tua vista.")
   Scala h2 sotto i 1280, scala h1 da 1280 in su ------------------------------ */

/* Stessa scala dei titoli grandi (H1 Vicari: fluida 31→63px) */
.title-hero {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.title-hero > span { display: block; }

/* --- Sezione 1: titolo + divisore + L'ESPERIENZA DI 3 SEDI / ASSISTENZA ---- */

.svc-intro {
  background: var(--color-bg);
  padding-block: 75px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 800px)  { .svc-intro { padding-block: 50px;  gap: 20px; } }
@media (min-width: 1280px) { .svc-intro { padding-block: 100px; gap: 40px; } }

/* Il primo divisore è alto 30px sul solo mobile (SVG "Frame 17" 375x30) */
.svc-intro .divider { height: 30px; }
@media (min-width: 800px) { .svc-intro .divider { height: var(--divider-h); } }

.svc-cols {
  display: flex;
  flex-direction: column;
  gap: 35px;
  padding-inline: var(--pad-x);
}

@media (min-width: 800px)  { .svc-cols { flex-direction: row; gap: 20px; } }
@media (min-width: 1280px) { .svc-cols { gap: 40px; } }

/* Colonne: label a 16px dal testo, interlinea 1.6 */
.svc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svc-col p {
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* --- Sezione 2: "Servizi per la tua vista." + colonne con liste puntate ---- */

/* Pad sotto 40/60/60: l'ultima voce dista dalla CTA 60+70px da tablet in su */
.svc-servizi {
  background: var(--color-bg);
  padding-block: 35px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 800px)  { .svc-servizi { padding-block: 50px 60px;  gap: 20px; } }
@media (min-width: 1280px) { .svc-servizi { padding-block: 100px 60px; gap: 40px; } }

.svc2-cols {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-inline: var(--pad-x);
}

@media (min-width: 800px)  { .svc2-cols { flex-direction: row; gap: 20px; } }
@media (min-width: 1280px) { .svc2-cols { gap: 40px; } }

/* Colonne con lista: label a 16px dal contenuto, intro a interlinea 1.6
   con 20px di spazio prima della lista */
.svc2-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.svc2-col p {
  color: var(--color-text-soft);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Liste puntate: 18/26 con ls -1%, fissi a ogni breakpoint, voci
   distanziate 8px */
.svc-list {
  color: var(--color-text-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc-list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-bullet);
  line-height: var(--lh-bullet);
  letter-spacing: var(--ls-bullet);
}

/* Pallino bianco, testo della voce #EBE8E8 */
.svc-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--color-text);
}

.svc-list li > span {
  font-size: var(--fs-bullet);
  line-height: var(--lh-bullet);
  letter-spacing: var(--ls-bullet);
}

/* --- CTA "Prenota una visita" (pagina Servizi): identica alla Home --- */

/* Lockup VG della sezione "La vista dei più piccoli" */
.kids .vg-lockup { --vg-fs: 20.648px; --vg-sub-fs: 6.098px; --vg-sub-lh: 5.335px; --vg-gap: 1.9px; }
@media (min-width: 800px)  { .kids .vg-lockup { --vg-fs: 24.777px; --vg-sub-fs: 7.317px;  --vg-sub-lh: 6.402px;  --vg-gap: 2.3px; } }
@media (min-width: 1280px) { .kids .vg-lockup { --vg-fs: 28.907px; --vg-sub-fs: 8.537px;  --vg-sub-lh: 7.47px;   --vg-gap: 2.7px; } }
@media (min-width: 1440px) { .kids .vg-lockup { --vg-fs: 33.163px; --vg-sub-fs: 9.793px; --vg-sub-lh: 8.569px; --vg-gap: 3.1px; } }

/* --- Immagini full-bleed della pagina Servizi: altezza naturale del
   file (v. regola condivisa "Grandezze immagini" più sopra) --- */

/* --- LENTI A CONTATTO (griglia 01-04) --------------------------------------- */

.lenses {
  background: var(--color-bg);
  padding: 75px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.lenses__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 50px;
}

@media (min-width: 800px) {
  .lenses__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 65px;
  }
}

/* --- "La vista dei più piccoli." --------------------------------------------- */

.kids {
  background: var(--color-bg);
  padding: 50px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 800px) { .kids { padding-block: 75px; } }

/* Titolo al livello dei titoli piccoli (26/35 fisso) */
.kids__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.kids__link {
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (min-width: 901px) {
  .kids a:hover { opacity: 0.7; }
}

.kids__arrow {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.05em;
}