/* =========================================================================
   cilhome — foglio di stile unico
   Palette: un solo accento terracotta per blocco. Testo antracite su avorio.
   Modifica i colori qui sotto (design tokens) per cambiare tutto il sito.
   ========================================================================= */

:root {
  /* --- Palette --- */
  --avorio: #F5F0E8;        /* fondo principale, caldo */
  --avorio-scuro: #EAE3D6;  /* sezioni alternate / bordi morbidi */
  --antracite: #2B3038;     /* testo e titoli */
  --terracotta: #C26B43;    /* accento UNICO: bottoni, dettagli, numeri */
  --terracotta-scuro: #A85733; /* hover del terracotta */
  --bianco: #FFFFFF;        /* testo dentro i bottoni terracotta */

  /* --- Misure --- */
  --max: 1120px;            /* larghezza massima del contenuto */
  --gutter: clamp(20px, 5vw, 64px); /* margini laterali */
  --radius: 14px;           /* raggio angoli morbidi */
  --header-h: 68px;
  --nav-h: 48px;            /* altezza del menu orizzontale di sezione */
}

/* --- Reset leggero --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--antracite);
  background: var(--avorio);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Tiene conto di header + menu sticky quando si salta a un'ancora */
section { scroll-margin-top: calc(var(--header-h) + var(--nav-h) + 12px); }

/* --- Contenitore standard --- */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Tipografia --- */
h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(1.9rem, 5.2vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0; }

/* Distanza verticale fra le sezioni: aria. */
.section { padding-block: clamp(56px, 9vw, 110px); }
.section--alt { background: var(--avorio-scuro); }
.section__intro { max-width: 720px; }
.section__intro p { margin-top: 18px; color: #4a505a; font-size: 1.08rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: 14px;
}

/* =========================================================================
   BOTTONI
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease, border-color .2s ease;
}
.btn--primary { background: var(--terracotta); color: var(--bianco); }
.btn--primary:hover { background: var(--terracotta-scuro); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--antracite); border-color: rgba(43,48,56,.25); }
.btn--ghost:hover { border-color: var(--antracite); transform: translateY(-1px); }
.btn--sm { padding: 10px 20px; font-size: 0.92rem; }
.btn:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }

/* =========================================================================
   HEADER STICKY
   ========================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(245, 240, 232, .85);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(43,48,56,.07);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }

/* --- Logo wordmark "cilhome" con la "o" sostituita dal diaframma --- */
/* LOGO: la "o" è l'immagine del diaframma. Sostituibile con SVG definitivo. */
.logo {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--antracite);
  line-height: 1;
}
.logo__diaframma {
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.02em;
  position: relative;
  top: 0.04em;
}

/* =========================================================================
   MENU ORIZZONTALE DI SEZIONE (sticky sotto l'header)
   Su mobile diventa scrollabile lateralmente con il dito.
   ========================================================================= */
.sectionnav {
  position: sticky;
  top: var(--header-h);
  z-index: 99;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(245, 240, 232, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(43,48,56,.07);
}
.sectionnav__row {
  display: flex;
  gap: 26px;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox: nasconde la barra */
}
.sectionnav__row::-webkit-scrollbar { display: none; } /* WebKit: nasconde la barra */
.sectionnav__row a {
  text-decoration: none;
  color: var(--antracite);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  flex: 0 0 auto; /* non si comprimono: restano in fila e scrollano */
}
.sectionnav__row a:hover { color: var(--terracotta); border-color: var(--terracotta); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(48px, 8vw, 96px); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero__sub { font-size: 1.12rem; color: #444a54; max-width: 36ch; }
.hero__cta { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero__micro { font-size: 0.9rem; color: #6b7280; }

/* =========================================================================
   COMPONENTE PRIMA / DOPO (slider con puntatore trascinabile)
   ========================================================================= */
.ba {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* permette lo scroll verticale, gestiamo noi l'orizzontale */
  box-shadow: 0 10px 30px rgba(43,48,56,.10);
  background: var(--avorio-scuro);
  cursor: ew-resize;
}
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Lo strato "prima" sta sopra e viene tagliato dal puntatore */
.ba__img--prima { z-index: 2; clip-path: inset(0 50% 0 0); }

/* Etichette Prima / Dopo */
.ba__tag {
  position: absolute;
  top: 14px;
  z-index: 3;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(43,48,56,.72);
  color: #fff;
  backdrop-filter: blur(2px);
}
.ba__tag--prima { left: 14px; }
.ba__tag--dopo  { right: 14px; }

/* Etichetta obbligatoria "demo sintetica" */
.ba__demo {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(194,107,67,.92);
  color: #fff;
  font-weight: 600;
}

/* Maniglia / puntatore */
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 4;
  width: 2px;
  background: rgba(255,255,255,.9);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(43,48,56,.12);
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bianco);
  box-shadow: 0 4px 14px rgba(43,48,56,.28);
  display: grid;
  place-items: center;
  cursor: ew-resize;
}
.ba__grip svg { width: 22px; height: 22px; color: var(--terracotta); }
.ba__handle:focus-visible .ba__grip,
.ba:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }

.ba__caption { margin-top: 16px; color: #4a505a; font-size: 0.98rem; }

/* Miniature per cambiare la coppia mostrata nello slider */
.ba-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.ba-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  width: 92px;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background: none;
  transition: border-color .2s ease, transform .12s ease;
}
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ba-thumb:hover { transform: translateY(-2px); }
.ba-thumb[aria-pressed="true"] { border-color: var(--terracotta); }
.ba-thumb:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

/* Varianti di formato dello slider prima/dopo */
.ba--wide  { aspect-ratio: 16 / 9; }   /* stanza intera (sezione stili) */
.ba--photo { aspect-ratio: 3 / 2; }    /* foto migliorate */

/* Pulsanti per cambiare lo stile dell'arredo (testo, non miniature) */
.style-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.style-tab {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--antracite);
  background: var(--avorio);
  border: 1.5px solid rgba(43,48,56,.18);
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.style-tab:hover { border-color: var(--antracite); }
.style-tab[aria-pressed="true"] { background: var(--terracotta); border-color: var(--terracotta); color: var(--bianco); }
.style-tab:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

/* =========================================================================
   SEZIONE "COSA FACCIO" — tre card
   ========================================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.card {
  background: var(--avorio);
  border: 1px solid rgba(43,48,56,.10);
  border-radius: var(--radius);
  padding: 30px 26px;
}
.card--featured {
  border-color: var(--terracotta);
  box-shadow: 0 8px 28px rgba(194,107,67,.12);
}
.card__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 12px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: #4a505a; font-size: 0.98rem; }

/* =========================================================================
   VIDEO TOUR
   ========================================================================= */
.video-frame {
  margin-top: 40px;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--antracite);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(43,48,56,.12);
}
.video-frame iframe,
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { color: rgba(255,255,255,.75); text-align: center; padding: 24px; font-size: 0.95rem; }
.video-frame .ba__demo { z-index: 5; }

/* Player verticale (reel 9:16) centrato */
.video-wrap {
  position: relative;
  margin: 40px auto 0;
  max-width: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--antracite);
  box-shadow: 0 10px 30px rgba(43,48,56,.14);
}
.video-tour { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
/* badge in alto a sinistra per non coprire i controlli del video in basso */
.video-wrap .ba__demo { z-index: 5; top: 14px; bottom: auto; }

/* =========================================================================
   CHI SONO
   ========================================================================= */
.about__grid { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 760px; }
.about p { color: #4a505a; font-size: 1.08rem; }

/* =========================================================================
   CTA FINALE
   ========================================================================= */
.final { background: var(--antracite); color: var(--avorio); text-align: center; }
.final h2 { color: var(--avorio); }
.final p { margin: 18px auto 0; max-width: 52ch; color: rgba(245,240,232,.82); font-size: 1.1rem; }
.final .eyebrow { color: var(--terracotta); }
.contact-buttons {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.contact-buttons .btn--ghost { color: var(--avorio); border-color: rgba(245,240,232,.35); }
.contact-buttons .btn--ghost:hover { border-color: var(--avorio); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { padding-block: 48px; font-size: 0.92rem; color: #4a505a; }
.footer .logo { font-size: 1.25rem; }
.footer__row { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 14px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--terracotta); }
.footer__legal { margin-top: 18px; font-size: 0.82rem; color: #8a8f98; }

/* =========================================================================
   RESPONSIVE — mobile first nei contenuti, qui adattiamo le griglie
   ========================================================================= */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; } /* su mobile lo slider va sopra il testo */
  .cards { grid-template-columns: 1fr; }
}
@media (min-width: 861px) {
  .about__grid { grid-template-columns: 220px 1fr; align-items: center; }
}

/* Rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}