/* ==========================================================================
   COMPONENTI — header, hero, sezioni, contatti, footer, menu mobile, policy
   Misure per breakpoint dai dati Figma Sites dell'originale (vedi ANALISI.md).
   ========================================================================== */

/* --- 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;
  gap: 8px;
  font-family: var(--font-logo);
  color: var(--color-text);
}

.site-header__logo-vg {
  font-weight: var(--fw-black);
  font-size: var(--fs-logo);
  line-height: var(--lh-logo);
  letter-spacing: -0.01em;
}

.site-header__logo-sedi {
  font-weight: var(--fw-bold);
  font-size: var(--fs-logo-sub);
  line-height: var(--lh-logo-sub);
  letter-spacing: -0.02em;
}

/* Nav: voci a 15px fissi, voce attiva sottolineata (su tutte le pagine) */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 35px;
  font-size: 15px;
  line-height: 24px;
}

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

/* --- 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
   ("indicazioni", 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"]),
.contatti__sede a:not(.contatti__link),
.contatti__social-handle 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,
  .contatti__sede a:not(.contatti__link):hover,
  .contatti__social-handle a:hover,
  .site-footer__privacy:hover {
    background-size: 100% 1px;
  }
}

/* Contatti footer — più spazio tra testo e linea rispetto al resto del sito */
.contatti__sede a:not(.contatti__link),
.contatti__social-handle 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 del sito Ottica 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), identico su tutte le pagine */
.hero {
  position: relative;
  aspect-ratio: var(--hero-ratio);
  overflow: hidden;
}

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

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

/* Scritta VISUAL GROUP centrata (solo home) */
.hero__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-logo);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero-logo);
  line-height: var(--lh-hero-logo);
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-align: left;
}

/* Lockup "Ottica Lepori + Ottica Vicari" centrato in basso: altezza
   34px sotto gli 800, 48px da 800 in su, a 24px dal fondo (misura dei
   lockup dentro le foto comune ai siti del gruppo) */
.hero__lockup {
  position: absolute;
  left: 50%;
  bottom: var(--hero-lockup-bottom);
  transform: translateX(-50%);
  height: var(--hero-lockup-h);
  width: auto;
}

/* --- Fascia titolo (claim + divisore) ---------------------------------------- */

.title-band {
  background: var(--color-bg);
  padding-top: var(--section-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.title-band--home { padding-top: 35px; }

@media (min-width: 1280px) {
  .title-band--home { padding-top: 50px; }
}

@media (max-width: 799px) {
  .title-band { gap: 15px; }
}

/* Divisore uniforme: fascia 40px a ogni breakpoint, su tutte le pagine */

/* --- Location strip (home): 3 negozi ------------------------------------------ */

/* Solo testo informativo (non cliccabile): eyebrow "LE NOSTRE SEDI" +
   due insegne con le città — centrato (richiesta cliente lug 2026,
   prima era allineato a sinistra come "I NOSTRI SERVIZI") */
.location {
  background: var(--color-bg);
  padding: 50px var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

/* Testi ridotti dell'85% (-0.15x) rispetto ai token base, proporzioni
   invariate: font-size e line-height scalati dello stesso fattore
   (richiesta cliente lug 2026, solo in questa sezione) */
.location .label {
  font-size: calc(var(--fs-label) * 0.85);
}

.location__item .h3 {
  font-size: calc(var(--fs-h3) * 0.85);
  line-height: calc(var(--lh-h3) * 0.85);
}

/* Le due insegne affiancate al centro, con gap fisso (niente griglia
   a metà pagina: Lugano resta vicina) */
.location__row {
  display: flex;
  justify-content: center;
  column-gap: 100px;
  row-gap: 40px;
}

@media (max-width: 799px) {
  .location__row { column-gap: 60px; }
}

/* Nome e città ravvicinati (richiesta cliente lug 2026) */
.location__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.location__item p {
  font-size: calc(var(--fs-body) * 0.85);
  line-height: calc(var(--lh-body) * 0.85);
  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 fascia
   della home ha aspect-ratio per breakpoint con crop (cover); le
   full-bleed della pagina Servizi seguono il rapporto nativo del file. */
.full-image--home { aspect-ratio: 375 / 260; }
@media (min-width: 800px)  { .full-image--home { aspect-ratio: 800 / 400; } }
@media (min-width: 1280px) { .full-image--home { aspect-ratio: 1280 / 650; } }

.full-image--servizi-1 img,
.full-image--servizi-2 img {
  height: auto;
}

/* --- Sezione servizi (home) --------------------------------------------------- */

.services {
  background: var(--color-bg);
  padding-top: 35px;
}

@media (min-width: 1280px) { .services { padding-top: 50px; } }

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

@media (max-width: 1439px) { .services__inner { gap: 45px; } }

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

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

@media (max-width: 1919px) { .services__grid { row-gap: 50px; } }
@media (max-width: 1439px) { .services__grid { row-gap: 45px; } }
@media (max-width: 799px)  { .services__grid { grid-template-columns: 1fr; row-gap: 40px; } }

/* Card: 8px fissi tra numero e titolo e tra titolo e descrizione;
   descrizioni al body, eyebrow e numeri alle scale condivise */
.service-card,
.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

/* Sezione CTA: padding 70/90 (56 sotto gli 800), logo VG small a 9px dal
   titolo, titolo a 27px dal bottone (19 sotto gli 800) */
.cta-band {
  background: var(--color-bg);
  padding: 70px var(--pad-x) 90px;
  display: flex;
  flex-direction: column;
}

.cta-band .logo-vg-small {
  /* ~1.45x l'altezza-cap del titolo affiancato, scalato a 0.85x e poi a 0.80x */
  display: block;
  align-self: flex-start;
  height: clamp(22px, 13.02px + 2.61vw, 46px);
  width: auto;
  margin-bottom: 9px;
}

.cta-band__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
  letter-spacing: var(--ls-cta);
  margin-bottom: 27px;
}

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

  .cta-band__title {
    margin-bottom: 19px;
  }
}

/* --- 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;
  font-size: clamp(13px, 10.1px + 0.7735vw, 20px);
  line-height: 24px;
  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--center { align-self: center; }

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

/* --- Sezione titolo + video ------------------------------------------------------ */

/* Pad sotto maggiorato di 40px per distanziare i contatti */
.feature {
  background: var(--color-bg);
  padding-block: 100px 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
}

@media (max-width: 1439px) { .feature { padding-block: 90px 134px; } }
@media (max-width: 1279px) { .feature { padding-block: 50px 92px; } }
@media (max-width: 799px)  { .feature { padding-block: 75px 115px; gap: 35px; padding-inline: 15px; } }

/* Il titolo, centrato, sta su una riga sola a ogni larghezza */
.feature .display {
  white-space: nowrap;
}

/* Sotto i ~390px il minimo del clamp (31px) non basterebbe: il font scala a 8vw */
@media (max-width: 799px) {
  .feature .display {
    font-size: min(var(--fs-display), 8vw);
  }
}

.feature__media {
  width: var(--media-w);
  max-width: 100%;
}

.feature__media video {
  width: 100%;
  height: auto;
  aspect-ratio: 1936 / 1080;
  object-fit: cover;
}

/* --- Indirizzi e Instagram --------------------------------------------------------- */

/* Il blocco non ha padding proprio: la distanza dalle sezioni precedenti
   è il loro padding inferiore, ai lati il box interno si autocentra */
.contatti {
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.contatti__inner {
  width: var(--contatti-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.contatti__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 59px;
}

/* Sedi: città a 16px dai recapiti, righe a interlinea 1.6, testo soft */
.contatti__sede {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contatti__sede p,
.contatti__sede address {
  font-style: normal;
  color: var(--color-text-soft);
  line-height: 1.6;
}

/* Link mappa come mini pill "declassata" (richiesta cliente 22 lug 2026):
   forma pill ma grigia e con hover neutro, così forma+arancione restano
   esclusivi della CTA "Prenota ora" e la ripetizione ×3 non pesa */
.contatti__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-dim);
  border: 1.25px solid currentColor;
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  line-height: 1;
  font-weight: var(--fw-medium);
  transition: color 0.45s ease;
}

@media (min-width: 901px) {
  .contatti__sede a.contatti__link:hover { color: var(--color-text); }
}

/* Solo il profilo @visualgroupsagl (la label "Instagram" è stata
   rimossa su richiesta cliente, 17 lug 2026) */
.contatti__social {
  display: flex;
  flex-direction: column;
}

.contatti__social-handle {
  color: var(--color-text-soft);
  line-height: 1.6;
}

@media (max-width: 799px) {
  /* Sotto gli 800px il blocco resta fluido e allineato a sinistra
     (non un box fisso centrato) */
  .contatti__inner { width: 100%; }
  .contatti__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
  }

  /* Il blocco sta a 15px dai bordi su tutte le pagine (prima solo su
     Appuntamenti: altrove le sedi toccavano il bordo sinistro —
     correzione cliente lug 2026) */
  .contatti { padding-inline: 15px; }

  /* Titoli sede (BELLINZONA, GRONO, LUGANO) ridotti di 0.25x su mobile;
     line-height allineata a quella di email/telefono per un'interlinea
     uniforme tra titolo e recapiti */
  .contatti__sede h2.h3 {
    font-size: calc(var(--fs-h3) * 0.75);
    line-height: 28px;
  }

  .contatti__sede p,
  .contatti__sede address {
    line-height: 28px;
  }

  /* Spazio verticale uniforme tra titolo, email e telefono: il gap del
     flex container è ridotto a 2px per eguagliare visivamente lo spazio
     naturale tra le due righe (email/telefono) generato dal line-height */
  .contatti__sede { gap: 2px; }
}

/* --- Footer ---------------------------------------------------------------------- */

/* Padding 48/32 (38/26 mobile), video VG 62x62 fisso, copyright fluido
   15→18px con opacità 0.9, privacy 11px — identico su tutte le pagine */
.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.001em;
}

/* 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;
}

/* --- Due colonne di testo con eyebrow (Servizi / Chi siamo) ------------------------ */

/* Colonne: label a 16px dal contenuto, testi a interlinea 1.6; gli
   intro degli elenchi hanno 20px di spazio prima della lista */
.text-cols {
  padding-inline: var(--pad-x);
  display: flex;
  gap: 40px;
}

.text-cols > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 799px) {
  .text-cols { flex-direction: column; gap: 35px; }
}

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

.servizi-intro {
  margin-bottom: 20px;
}

/* --- Pagina Appuntamenti: blocco CTA centrale --------------------------------------- */

/* Pad sotto e gap col bottone maggiorati di 10px (distanza dai contatti
   e dal "Prenota ora") */
.appuntamenti-cta {
  background: var(--color-bg);
  padding-block: 100px 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  text-align: center;
}

@media (max-width: 1919px) { .appuntamenti-cta { gap: 40px; } }
@media (max-width: 1439px) { .appuntamenti-cta { padding-block: 90px 100px; } }
@media (max-width: 1279px) { .appuntamenti-cta { padding-block: 50px 60px; gap: 32px; } }
@media (max-width: 799px)  { .appuntamenti-cta { padding-block: 65px 75px; gap: 28px; } }

.appuntamenti-cta__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
}

/* Sotto gli 800px il runtime originale ancora il blocco CTA alla colonna
   del layout 375 (345px, allineata a sinistra) invece di ricentrarlo */
@media (max-width: 799px) {
  .appuntamenti-cta { align-items: flex-start; padding-inline: 15px; }
  .appuntamenti-cta__col { width: 345px; max-width: 100%; }
}

.appuntamenti-cta__testi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

@media (max-width: 1439px) { .appuntamenti-cta__testi { gap: 20px; } }
@media (max-width: 1279px) { .appuntamenti-cta__testi { gap: 15px; } }
@media (max-width: 799px)  { .appuntamenti-cta__testi { gap: 12px; } }

.appuntamenti-cta__sopra {
  font-weight: var(--fw-thin);
  font-size: var(--fs-select);
  line-height: var(--lh-select);
  letter-spacing: var(--ls-body);
  color: var(--color-text-dim);
}

.appuntamenti-cta__titolo {
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

/* --- Pagina Policy ------------------------------------------------------------------- */

.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; }
}

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

/* Riga "INFORMATIVA ... visualgroupsa.ch": run Medium a lh 18, run finale
   Regular a lh 19 (a 375 la riga va a capo: 18px + 19px come l'originale) */
.policy__testo .policy__informativa {
  line-height: 18px;
}

.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;
}

/* Sottotitoli non numerati (sez. 5) e run "INFORMATIVA...": nel rendering
   originale sono Helvetica Neue Medium 18/18 (NON 26px come da spec) */
.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 rendering originale è 26/26 */
.policy__testo .policy__h2-big {
  font-size: 26px;
  line-height: 26px;
  letter-spacing: -0.52px;
}

/* Liste puntate: testo indentato a 27px (x=52 nell'originale), bullet a x=37 */
.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 dal rendering del sito originale (probe su /servizi a 1920/1440/
   1280/800/375). Tutte le regole sono scoperte a .page-servizi o a classi
   servizi-* per non toccare la home già verificata. */

/* Header, hero, divisori ed eyebrow: identici alla home (nessuna
   variante di pagina) */

/* Sezioni "title + divider + colonne" */
.servizi-sec {
  background: var(--color-bg);
  padding-block: var(--section-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

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

/* Sezione "La vista che cambia" (testo + video); pad sotto maggiorato
   105/140/150 per distanziare i contatti, come in Chi siamo */
.servizi-s3 {
  background: var(--color-bg);
  padding-block: var(--section-pad) 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
}

@media (min-width: 1280px) { .servizi-s3 { padding-bottom: 140px; } }
@media (min-width: 1920px) { .servizi-s3 { padding-bottom: 150px; } }

.servizi-s3__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (max-width: 799px) {
  .servizi-s3__text { gap: 15px; }
}

/* Varianti testo per breakpoint della pagina (H1 e paragrafi sezione 1):
   la variante desktop cambia a 1280 (non a 800 come .bp-desktop) */
.vs-h1-d, .vs-h1-m, .vs-p1-d, .vs-p1-t, .vs-p1-m, .vs-p2-d, .vs-p2-x { display: none; }

@media (max-width: 799px) {
  .vs-h1-m, .vs-p1-m, .vs-p2-x { display: block; }
}

@media (min-width: 800px) and (max-width: 1279px) {
  .vs-h1-m, .vs-p1-t, .vs-p2-x { display: block; }
}

@media (min-width: 1280px) {
  .vs-h1-d, .vs-p1-d { display: block; }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .vs-p2-d { display: block; }
}

@media (min-width: 1440px) {
  .vs-p2-x { display: block; }
}

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

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

.servizi-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--color-text);
}

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

/* Video "La vista che cambia": dimensioni fisse per breakpoint
   (proporzioni diverse dal video della home → width+height espliciti) */
.servizi-video {
  width: 283px;
  height: 103px;
  object-fit: cover;
}

@media (min-width: 800px)  { .servizi-video { width: 642px;  height: 186px; } }
@media (min-width: 1280px) { .servizi-video { width: 882px;  height: 300px; } }
@media (min-width: 1440px) { .servizi-video { width: 1000px; height: 340px; } }
@media (min-width: 1920px) { .servizi-video { width: 1200px; height: 434px; } }

/* Contatti: la pagina Servizi usa blocchi più larghi della home su
   Wide/Monitor (larghezze proprie del layout); testi alle scale comuni */
@media (min-width: 1440px) {
  .page-servizi .contatti__inner { width: 1000px; }
}

@media (min-width: 1920px) {
  .page-servizi .contatti__inner { width: 1200px; }
}

/* --- Pagina Chi siamo ----------------------------------------------------------
   Misure dal rendering del sito originale (probe su /chi-siamo a 1920/1440/
   1280/800/375). Regole scoperte a .page-chi-siamo o a classi chisiamo-*. */

/* Header, divisori ed eyebrow: identici alla home */

/* Sezione "title + text": pad sopra 35/35/65/65/75, pad sotto maggiorato
   105/105/140/140/150 per distanziare i contatti, gap 20/30/35 */
.chisiamo-sec {
  background: var(--color-bg);
  padding-block: 35px 105px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 800px)  { .chisiamo-sec { gap: 30px; } }
@media (min-width: 1280px) { .chisiamo-sec { padding-block: 65px 140px; gap: 35px; } }
@media (min-width: 1920px) { .chisiamo-sec { padding-block: 75px 150px; } }

/* Coppia di titoli: gap 15 (mobile) / 0 (tablet+desktop) / 10 (wide+monitor) */
.chisiamo-title {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (min-width: 800px)  { .chisiamo-title { gap: 0; } }
@media (min-width: 1440px) { .chisiamo-title { gap: 10px; } }

/* Titoli misti bold/regular alla scala H1 comune */
.chisiamo-h1__lite { font-weight: var(--fw-regular); }

/* Su mobile entrambi i titoli vanno a capo dopo l'insegna ("Ottica Lepori
   \nBellinzona e Grono" e "Ottica Vicari \nLugano"): le due parti diventano
   righe piene */
@media (max-width: 799px) {
  .chisiamo-title .h1 > span { display: block; }
}

/* Colonne CHI SIAMO / IL TEAM: testi alle scale comuni (body, lh 1.6) */

/* Contatti: blocco a tutta larghezza da Desktop in su (larghezza
   propria del layout); testi alle scale comuni */
@media (min-width: 1280px) {
  .page-chi-siamo .contatti { padding-inline: var(--pad-x); }
  .page-chi-siamo .contatti__inner { width: 100%; }
}

/* --- Pagina Appuntamenti ---------------------------------------------------------
   Misure dal rendering del sito originale (probe su /appuntamenti a 1920/1440/
   1280/800/375). Regole scoperte a .page-appuntamenti o a classi apt-*. */

/* Header e divisori: identici alla home */

/* Sezione title (H1 + Line + CTA): pad verticale 35/35/50/50/50, gap 20 */
.apt-title {
  background: var(--color-bg);
  padding-block: 35px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1280px) { .apt-title { padding-block: 50px; } }

/* A capo dell'H1 visibile solo da Wide (>=1440) in su */
.br-wide { display: none; }

@media (min-width: 1440px) { .br-wide { display: inline; } }

/* "Prendi appuntamento" e bottone: scale comuni (nessuna variante) */

/* Telefono Bellinzona: l'originale mostra 835 su Monitor/Wide/Desktop e
   846 su Tablet/Mobile (incoerenza del sorgente, riprodotta fedelmente) */
.apt-tel-desk { display: inline; }
.apt-tel-mob { display: none; }

@media (max-width: 1279px) {
  .apt-tel-desk { display: none; }
  .apt-tel-mob { display: inline; }
}

/* Contatti: blocco largo 1000px da Wide in su (larghezza propria del
   layout); testi alle scale comuni */
@media (min-width: 1440px) {
  .page-appuntamenti .contatti__inner { width: 1000px; }
}