/* ================================================================
   home.css — Leonardo Edition
   Home page. Grammatica visiva ereditata dal resto del sito:
     · fotografia protagonista, tipografia al servizio
     · hairline come unico elemento decorativo (nessuna ombra)
     · Instrument Serif (corsivo) per le voci editoriali
     · Satoshi uppercase + tracking per le micro-label
     · bordeaux solo come accento puntuale, mai come campitura
   Nessun hero con overlay scuro: le foto restano pulite, il testo
   vive accanto — non sopra.
================================================================ */

/* ── Contenitore comune ───────────────────────────────────────── */
.home-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--space-32);
}

@media (max-width: 700px) {
  .home-inner {
    padding-inline: var(--space-16);
  }
}

/* Micro-label di sezione — ricorre in tutta la home */
.home-label {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-mid);
  margin: 0;
}

/* Link testuale con freccia */
.home-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
  text-decoration: none;
  padding-block: var(--space-8);
  transition: color var(--duration-fast) var(--ease-out);
}

.home-link__arrow {
  transition: transform 320ms var(--ease-out);
}

@media (hover: hover) {
  .home-link:hover {
    color: var(--color-accent);
  }
  .home-link:hover .home-link__arrow {
    transform: translateX(5px);
  }
}


/* Ritmo verticale delle sezioni nuove: piu' respiro del vecchio 64px
   fisso, cresce con lo schermo. Le sezioni storiche (carosello,
   tessuti, Royal) mantengono il loro. */
:root {
  --home-ritmo: clamp(4rem, 8vw, 7.5rem);
  /* bordo sinistro della colonna del sito (max 1280 + gutter),
     per allineare il testo dell'apertura al resto della pagina
     anche se la foto esce fino al bordo dello schermo */
  --home-bordo: max(var(--space-32), calc((100vw - 1280px) / 2 + var(--space-32)));
}

@media (max-width: 700px) {
  :root { --home-bordo: var(--space-16); }
}


/* ══════════════════════════════════════════════════════════════
   1. APERTURA — a tutta altezza
   Testo in basso a sinistra, fotografia fino al bordo destro.
   Il titolo e' spezzato su tre righe: la terza chiude in corsivo
   bordeaux, unico accento di colore della sezione.
══════════════════════════════════════════════════════════════ */
.home-open {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .home-open {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* l'altezza dello schermo meno la barra, entro limiti sensati:
       non schiacciata sui portatili, non infinita sui 4K */
    min-height: clamp(560px, calc(100svh - var(--header-height-expanded)), 980px);
  }
}

.home-open__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-40) var(--home-bordo) var(--space-48);
}

@media (min-width: 900px) {
  .home-open__text {
    padding: var(--space-64) var(--space-48) clamp(3rem, 9vh, 6.5rem) var(--home-bordo);
  }
}

.home-open__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.25rem, 7vw, 6.75rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: var(--space-24) 0 var(--space-32);
}

.home-open__title span {
  display: block;
}

.home-open__title em {
  font-style: italic;
  color: var(--color-accent);
}

.home-open__lead {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1.65;
  color: var(--color-mid);
  max-width: 36ch;
  margin: 0 0 var(--space-32);
}

.home-open__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-32);
}

/* Link secondario: stesso alfabeto, tono piu' basso */
.home-link--quiet {
  color: var(--color-mid);
}

@media (hover: hover) {
  .home-link--quiet:hover {
    color: var(--color-ink);
  }
}

.home-open__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: #EDE9E2;
  aspect-ratio: 4 / 3;       /* mobile: il divano e' largo, il 4:5 lo taglierebbe */
  order: -1;                 /* mobile: prima la foto, poi il testo */
}

@media (min-width: 900px) {
  .home-open__media {
    aspect-ratio: auto;      /* desktop: occupa tutta l'altezza della sezione */
    order: 0;
  }
}

.home-open__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Nome del modello sulla foto, in basso a destra: la parte bassa
   dell'immagine e' il tappeto chiaro, l'inchiostro resta leggibile
   senza alcun velo. Stesso gesto dei cataloghi di settore. */
.home-open__caption {
  position: absolute;
  right: var(--space-24);
  bottom: var(--space-20);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink);
}

.home-open__caption::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* Ingresso: le tre righe del titolo salgono in sequenza, la foto
   si assesta da un leggerissimo ingrandimento. Solo CSS, parte
   subito: non aspetta dati ne' scroll. */
@keyframes home-sale {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: none; }
}

@keyframes home-assesta {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

.home-open__text > *,
.home-open__title span {
  animation: home-sale 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-open__title { animation: none; }
.home-open__title span:nth-child(1) { animation-delay: 120ms; }
.home-open__title span:nth-child(2) { animation-delay: 220ms; }
.home-open__title span:nth-child(3) { animation-delay: 320ms; }
.home-open__lead                    { animation-delay: 480ms; }
.home-open__links                   { animation-delay: 580ms; }

.home-open__media img {
  animation: home-assesta 1600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .home-open__text > *,
  .home-open__title span,
  .home-open__media img {
    animation: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   3. COLLEZIONE — tre categorie
══════════════════════════════════════════════════════════════ */
.home-collezione {
  padding-block: var(--space-64);
  border-top: 1px solid var(--color-hairline);
}

.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: var(--space-40);
}

.home-section__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.1;
}

/* Impaginazione: carosello a sinistra, testo a destra */
.home-collezione__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: center;
}

@media (min-width: 1000px) {
  .home-collezione__grid {
    grid-template-columns: 7fr 4fr;
    gap: var(--space-48);
  }
}

.home-collezione__body {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1.65;
  color: var(--color-mid);
  margin: var(--space-16) 0 var(--space-20);
  max-width: 40ch;
}


/* ── Carosello ─────────────────────────────────────────────────
   La slide attiva è al centro; le adiacenti restano visibili ai
   bordi, tagliate dal viewport. Le laterali sono attenuate per
   dare gerarchia senza spegnerle.
──────────────────────────────────────────────────────────── */
.home-carousel {
  position: relative;
  min-width: 0;   /* consente al grid item di restringersi */
}

/* Barra segmentata */
.hcar-progress {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-20);
}

.hcar-progress__seg {
  position: relative;
  flex: 1;
  height: 2px;
  padding: 0;
  border: none;
  background-color: var(--color-hairline);
  cursor: pointer;
  transition: background-color 400ms var(--ease-out);
}

/* Area di tocco generosa senza alterare lo spessore grafico */
.hcar-progress__seg::after {
  content: '';
  position: absolute;
  inset: -16px 0;
}

.hcar-progress__seg.is-active {
  background-color: var(--color-ink);
}

@media (hover: hover) {
  .hcar-progress__seg:not(.is-active):hover {
    background-color: var(--color-mid);
  }
}

.hcar-progress__seg:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

/* Viewport + track */
.hcar-viewport {
  overflow: hidden;
}

.hcar-track {
  display: flex;
  align-items: flex-start;
  will-change: transform;
  cursor: grab;
  /*
    touch-action: pan-y è essenziale su mobile.
    Senza, il browser tratta il gesto orizzontale come proprio,
    annulla il pointer (pointercancel) e lo swipe non arriva mai
    al carosello. pan-y lascia al browser lo scroll verticale
    della pagina e cede a noi quello orizzontale.
  */
  touch-action: pan-y;
  /* Decelerazione lunga: il movimento "posa" invece di fermarsi */
  transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
}

.hcar-track.is-dragging {
  transition: none;
  cursor: grabbing;
}

/* Le immagini non devono avviare il drag nativo del browser */
.hcar-slide img,
.hcar-slide__link {
  -webkit-user-drag: none;
  user-select: none;
}

.hcar-slide {
  flex: 0 0 auto;
  opacity: 0.4;
  transition: opacity 600ms var(--ease-out);
}

.hcar-slide.is-active {
  opacity: 1;
}

.hcar-slide__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hcar-slide__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #F0EDE8;
}

.hcar-slide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 900ms var(--ease-out);
}

@media (hover: hover) {
  .hcar-slide.is-active .hcar-slide__link:hover .hcar-slide__media img {
    transform: scale(1.03);
  }
}

/* Didascalia: nome in evidenza, categoria a seguire */
.hcar-slide__caption {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.hcar-slide__name {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.hcar-slide__cat {
  font-family: var(--font-utility);
  font-size: var(--text-13);
  color: var(--color-mid);
  margin: 0;
}


/* ── Cursore-freccia ───────────────────────────────────────────
   Solo con mouse: sostituisce il puntatore dentro il carosello.
   Sulle slide laterali indica la direzione, su quella centrale
   diventa il segno "apri la scheda".
──────────────────────────────────────────────────────────── */
.home-carousel.has-cursor .hcar-viewport,
.home-carousel.has-cursor .hcar-track,
.home-carousel.has-cursor .hcar-slide__link {
  cursor: none;
}

.hcar-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  /* La scala accompagna la comparsa; la posizione la muove il JS */
  transition: opacity 260ms var(--ease-out);
}

.hcar-cursor.is-visible {
  opacity: 1;
}

.hcar-cursor__ico {
  font-family: var(--font-utility);
  font-size: 17px;
  line-height: 1;
  color: var(--color-ink);
}

/* Sulla slide centrale il cursore cambia registro: bordeaux */
.hcar-cursor.is-open {
  background-color: var(--color-accent);
}

.hcar-cursor.is-open .hcar-cursor__ico {
  color: #FFFFFF;
}

/* Sotto il desktop il puntatore non esiste: niente cursore finto,
   e si ripristina il cursore di sistema (rete di sicurezza se il
   media query hover/pointer dà un falso positivo). */
@media (max-width: 999px) {
  .hcar-cursor { display: none; }

  .home-carousel.has-cursor .hcar-viewport,
  .home-carousel.has-cursor .hcar-track,
  .home-carousel.has-cursor .hcar-slide__link {
    cursor: auto;
  }
}


/* ══════════════════════════════════════════════════════════════
   4. TESSUTI — striscia di campioni
   Scorre orizzontalmente: suggerisce l'ampiezza della collezione
   senza occupare l'altezza di una griglia.
══════════════════════════════════════════════════════════════ */
.home-tessuti {
  padding-block: var(--space-64);
  border-top: 1px solid var(--color-hairline);
  overflow: hidden;   /* la striscia esce dal contenitore, non dalla pagina */
}

.home-tessuti__intro {
  max-width: 44ch;
  margin-bottom: var(--space-32);
}

.home-tessuti__text {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1.65;
  color: var(--color-mid);
  margin: var(--space-16) 0 var(--space-8);
}

/* Striscia campioni: sfora a destra oltre il contenitore */
.home-tessuti__strip {
  display: flex;
  gap: var(--space-16);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-8);
  scroll-snap-type: x proximity;
}

.home-tessuti__strip::-webkit-scrollbar { display: none; }

.home-swatch {
  flex: 0 0 auto;
  width: 150px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

@media (min-width: 700px) {
  .home-swatch { width: 190px; }
}

.home-swatch__media {
  aspect-ratio: 1;
  overflow: hidden;
  background-color: #F0EDE8;
  margin-bottom: var(--space-8);
}

.home-swatch__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

@media (hover: hover) {
  .home-swatch:hover .home-swatch__media img {
    transform: scale(1.05);
  }
}

.home-swatch__name {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}

.home-swatch__col {
  font-family: var(--font-utility);
  font-size: var(--text-10);
  color: var(--color-mid);
  margin: 2px 0 0;
}


/* ══════════════════════════════════════════════════════════════
   6. SU MISURA — banda foto + testo
══════════════════════════════════════════════════════════════ */
.home-sumisura {
  padding-block: var(--space-64);
  border-top: 1px solid var(--color-hairline);
}

.home-sumisura__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: center;
}

@media (min-width: 900px) {
  .home-sumisura__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-64);
  }
}

.home-sumisura__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #F0EDE8;
}

.home-sumisura__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Sequenza Royal: stessa foto, tessuto diverso ──────────────── */
/* Le immagini stanno una sopra l'altra e si alternano in
   dissolvenza. Nessuno spostamento di layout: cambia solo
   l'opacita', quindi l'animazione resta sul compositor. */
.royal-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.royal-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 560ms var(--ease-out);
}

.royal-shot.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .royal-shot {
    transition: none;
  }
}

/* ── Pallini colore ────────────────────────────────────────────── */
.royal-picker {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}

.royal-dots {
  display: flex;
  gap: var(--space-16);
}

.royal-dot {
  position: relative;
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--dot);
  /* Contorno tenue: senza, i campioni chiari sparirebbero sul bianco */
  border: 1px solid rgba(14, 14, 13, 0.16);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

/* Area di tocco 42x42 senza ingrandire il pallino: il passo tra due
   pallini e' 26 + 16 = 42, quindi le aree si toccano e non si
   sovrappongono (nessun click finisce sul vicino sbagliato). */
.royal-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

/* Anello di selezione staccato dal colore, cosi' resta leggibile
   anche sui campioni chiari. */
.royal-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.royal-dot.is-active::after {
  border-color: var(--color-ink);
}

@media (hover: hover) {
  .royal-dot:hover {
    transform: scale(1.1);
  }
}

.royal-dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 5px;
}

.royal-nome {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-mid);
  margin: var(--space-16) 0 0;
}

.royal-nome__sep {
  margin-inline: 6px;
}

.home-sumisura__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: var(--space-16) 0 var(--space-16);
  line-height: 1.15;
}

.home-sumisura__text {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1.65;
  color: var(--color-mid);
  margin: 0 0 var(--space-16);
  max-width: 42ch;
}




/* ══════════════════════════════════════════════════════════════
   4. IL DETTAGLIO — testo a sinistra, foto quadrata a destra
══════════════════════════════════════════════════════════════ */
.home-dettaglio {
  padding-block: var(--home-ritmo);
  border-top: 1px solid var(--color-hairline);
}

.home-dettaglio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
  align-items: center;
}

@media (min-width: 900px) {
  .home-dettaglio__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-64);
  }
}

/* La misura di riga vale per il paragrafo, non per il titolo:
   applicata a tutto il blocco spezzava "Quello che si / nota". */
.home-dettaglio__body {
  max-width: 38ch;
}

.home-dettaglio__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.04;
  color: var(--color-ink);
  margin: var(--space-20) 0 var(--space-24);
}

.home-dettaglio__title em {
  font-style: italic;
}

.home-dettaglio__body {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1.7;
  color: var(--color-mid);
  margin: 0 0 var(--space-24);
}

.home-dettaglio__media {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: #EDE9E2;
}

.home-dettaglio__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ══════════════════════════════════════════════════════════════
   7. SISTEMI DI SEDUTA — carosello descrittivo
   Le tre schede in alto sono insieme titolo e navigazione; sotto,
   testo a sinistra e spaccato a destra. Cambiando sistema il testo
   entra dal basso e lo spaccato si alterna in dissolvenza.
══════════════════════════════════════════════════════════════ */
.home-sistemi {
  padding-block: var(--home-ritmo);
  border-top: 1px solid var(--color-hairline);
}

.home-sistemi__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
  align-items: end;
  margin-bottom: var(--space-48);
}

@media (min-width: 900px) {
  .home-sistemi__head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-64);
  }
}

.home-sistemi__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.04;
  color: var(--color-ink);
  margin: var(--space-20) 0 0;
}

.home-sistemi__title em {
  font-style: italic;
}

.home-sistemi__intro {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1.7;
  color: var(--color-mid);
  max-width: 44ch;
  margin: 0;
}

/* ── Barra: schede a sinistra, contatore e frecce a destra ──────── */
.sistemi-bar {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-hairline);
}

@media (min-width: 900px) {
  .sistemi-bar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-32);
  }
}

.sistemi-tabs {
  position: relative;            /* riferimento per centrare la scheda attiva */
  display: flex;
  gap: var(--space-32);
  overflow-x: auto;              /* su telefono le tre voci scorrono */
  scrollbar-width: none;
  /* il filetto attivo sta 1px sotto la scheda, sopra quello della barra */
  margin-bottom: -1px;
}

.sistemi-tabs::-webkit-scrollbar { display: none; }

.sistemi-tab {
  position: relative;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: var(--space-8) 0 var(--space-16);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  line-height: 1.1;
  white-space: nowrap;
  color: rgba(14, 14, 13, 0.32);
  transition: color var(--duration-fast) var(--ease-out);
}

/* filetto che si stende sotto la scheda attiva */
.sistemi-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sistemi-tab.is-active {
  color: var(--color-ink);
}

.sistemi-tab.is-active::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .sistemi-tab:not(.is-active):hover {
    color: rgba(14, 14, 13, 0.65);
  }
}

.sistemi-tab:focus-visible,
.sistemi-arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.sistemi-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  order: -1;                      /* telefono: contatore e frecce sopra le schede */
  justify-content: space-between;
  padding-bottom: var(--space-8);
}

@media (min-width: 900px) {
  .sistemi-nav {
    order: 0;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-bottom: var(--space-12);
  }
}

.sistemi-counter {
  font-family: var(--font-utility);
  font-size: var(--text-11);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  color: var(--color-mid);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

@media (min-width: 900px) {
  .sistemi-counter { margin-right: var(--space-12); }
}

.sistemi-counter__cur {
  color: var(--color-ink);
}

.sistemi-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                    /* area di tocco piena su telefono */
  height: 44px;
  background: none;
  border: 1px solid var(--color-hairline);
  border-radius: 2px;
  cursor: pointer;
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

@media (min-width: 900px) {
  .sistemi-arrow { width: 36px; height: 36px; }
}

@media (hover: hover) {
  .sistemi-arrow:hover {
    border-color: var(--color-ink);
    color: var(--color-accent);
  }
}

/* ── Corpo: testo + spaccato ────────────────────────────────────── */
.sistemi-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  padding-top: var(--space-32);
  align-items: center;
  touch-action: pan-y;            /* lo swipe orizzontale resta al carosello */
}

@media (min-width: 900px) {
  .sistemi-body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-64);
    padding-top: var(--space-48);
  }
}

/* I tre testi stanno nella stessa cella: l'altezza e' quella del piu'
   lungo, quindi cambiando sistema la pagina sotto non salta. */
.sistemi-panels {
  display: grid;
}

.sistemi-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
}

.sistemi-panel.is-active {
  visibility: visible;
  opacity: 1;
  animation: sistemi-entra 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sistemi-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.sistemi-panel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.06;
  color: var(--color-ink);
  margin: 0 0 var(--space-24);
}

.sistemi-panel__title em {
  font-style: italic;
}

.sistemi-panel__text {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1.7;
  color: var(--color-mid);
  max-width: 44ch;
  margin: 0;
}

/* Spaccati: impilati, fondo pagina (le foto sono su bianco) */
.sistemi-stage {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  order: -1;                      /* telefono: prima lo spaccato, poi il testo */
}

@media (min-width: 900px) {
  .sistemi-stage {
    aspect-ratio: 6 / 5;
    order: 0;
  }
}

.sistemi-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;            /* i tre spaccati hanno proporzioni diverse */
  opacity: 0;
  transform: scale(0.975);
  transition: opacity 560ms var(--ease-out),
              transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sistemi-shot.is-active {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sistemi-shot { transition: none; transform: none; }
  .sistemi-panel.is-active { animation: none; }
  .sistemi-tab::after { transition: none; }
}


/* ══════════════════════════════════════════════════════════════
   8. CITAZIONE — pausa tipografica
══════════════════════════════════════════════════════════════ */
.home-citazione {
  padding-block: clamp(5rem, 12vw, 10rem);
  border-top: 1px solid var(--color-hairline);
  text-align: center;
}

.home-citazione__testo {
  margin: 0;
}

/* piccolo filetto centrato sopra la frase */
.home-citazione__testo::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto var(--space-40);
  background: var(--color-ink);
}

.home-citazione__testo p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  line-height: 1.18;
  color: var(--color-ink);
  /* la prima riga ("... farsi notare,") deve stare intera: l'a capo
     lo decide il <br>, non la larghezza. Su schermi stretti si
     bilancia da sola. */
  max-width: 34ch;
  margin: 0 auto;
  text-wrap: balance;
}

.home-citazione__testo em {
  font-style: italic;
}


/* ══════════════════════════════════════════════════════════════
   9. LA SEDE — foto in bianco e nero a tutto schermo, poi testo
   E' l'unica immagine della home che esce dalla colonna su
   entrambi i lati: per questo chiude la pagina.
══════════════════════════════════════════════════════════════ */
.home-sede {
  padding-bottom: var(--home-ritmo);
  /* il link "La sede" dell'apertura porta qui: si ferma sotto la
     barra compatta invece di finirci dietro */
  scroll-margin-top: var(--header-height-compact);
}

/* Altezza: quella naturale della foto 3:2 a tutta larghezza (66.67vw),
   ma mai oltre l'88% della finestra. Cosi' sugli schermi dove ci sta
   si vede intera, e dove non ci sta si taglia il meno possibile. */
.home-sede__media {
  margin: 0;
  height: max(360px, min(88vh, 66.667vw));
  overflow: hidden;
  background-color: #D9D9D9;
}

/* Quando il taglio e' inevitabile lo si prende quasi tutto dal basso
   (il piazzale): cielo e torretta sono la parte che conta. La cima
   della torretta sta al 12% dell'altezza della foto. */
.home-sede__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

/* Su telefono il riquadro e' stretto e alto: centrato, la torre
   curva (il soggetto, a sinistra nella foto) usciva dall'inquadratura. */
@media (max-width: 699px) {
  .home-sede__media {
    height: 58vh;
  }
  .home-sede__media img {
    object-position: 30% 50%;
  }
}

.home-sede__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  padding-top: var(--space-48);
}

@media (min-width: 900px) {
  .home-sede__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-64);
  }
}

.home-sede__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  color: var(--color-ink);
  margin: var(--space-20) 0 0;
}

.home-sede__title em {
  font-style: italic;
}

.home-sede__body {
  font-family: var(--font-utility);
  font-size: var(--text-16);
  line-height: 1.7;
  color: var(--color-mid);
  max-width: 44ch;
  margin: 0 0 var(--space-16);
}

@media (min-width: 900px) {
  .home-sede__body { margin-top: var(--space-40); }
}

/* ══════════════════════════════════════════════════════════════
   REVEAL ALLO SCROLL
   Stato iniziale; GSAP (home.js) porta a y:0 / opacity:1.
   Se JS non gira, .no-js mantiene tutto visibile.
══════════════════════════════════════════════════════════════ */
.home-reveal {
  opacity: 0;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
  .home-reveal {
    opacity: 1;
    transform: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE — AREE DI TOCCO
   Stessa regola applicata al resto del sito: 44px minimi.
   Cresce solo la zona sensibile, non la tipografia.
══════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {

  .home-link {
    min-height: 44px;
  }

  /* Campioni tessuto: leggermente più larghi per il pollice */
  .home-swatch {
    width: 160px;
  }

  /* Barra carosello: area di tocco portata a 44px
     (la linea resta spessa 2px) */
  .hcar-progress__seg::after {
    inset: -21px 0;
  }
}