/* FK Group · Tinteggiature e verniciature — step 5, home dal design del kit (versione 3) */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/assets/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/assets/fonts/dm-serif-display-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Colori misurati sul design (confronta-design.py --colori e campioni sulle zone) */
:root {
  --rosso: #E10000;        /* titoli rossi, pulsanti, icone */
  --rosso-banda: #DB0000;  /* la banda «Parliamo del tuo lavoro» */
  --inchiostro: #0A0F1E;   /* titoli blu notte */
  --testo: #424652;        /* testo corrente */
  --grigio: #8E929A;       /* testi piccoli, voci del menu */
  --numero: #C6CAD0;       /* i numeri 01 02 03 del metodo */
  --linea: #EDEDED;        /* righe e bordi */
  --pannello: #F0F0F0;     /* il pannello dell'intonaco */
  --fondo: #FCFCFC;        /* fondo della pagina */
  --bianco: #FFFFFF;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --largo: 1256px;
  --margine: max(16px, env(safe-area-inset-left, 0px));
  --margine-dx: max(16px, env(safe-area-inset-right, 0px));
  --raggio: 8px;
  --ombra: 0 1px 2px rgba(10, 15, 30, .05), 0 12px 32px rgba(10, 15, 30, .08);
  /* le curve del movimento (Emil Kowalski, 09 § 0-bis-2): entrate e uscite, spostamenti sullo schermo */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 80px;
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { font: inherit; color: inherit; touch-action: manipulation; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--rosso); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.contenitore {
  width: 100%;
  max-width: calc(var(--largo) + 64px);
  margin: 0 auto;
  padding-left: var(--margine);
  padding-right: var(--margine-dx);
}
@media (min-width: 760px) {
  :root { --margine: max(32px, env(safe-area-inset-left, 0px)); --margine-dx: max(32px, env(safe-area-inset-right, 0px)); }
}
.nascosto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--inchiostro); color: var(--bianco); padding: 10px 16px; border-radius: 6px;
}
.salta:focus { top: 12px; }
.rosso { color: var(--rosso); }

/* ---------- Icone del kit (le SVG di kit/icone, colorate col currentColor) ---------- */
.i {
  display: inline-block; flex: none;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.i-telefono { --m: url("/assets/icons/telefono.svg"); }
.i-whatsapp { --m: url("/assets/icons/whatsapp.svg"); }
.i-freccia { --m: url("/assets/icons/freccia-destra.svg"); }
.i-sx { --m: url("/assets/icons/freccia-sinistra-piccola.svg"); }
.i-dx { --m: url("/assets/icons/freccia-destra-piccola.svg"); }
.i-giu { --m: url("/assets/icons/freccia-basso.svg"); }
.i-esperienza { --m: url("/assets/icons/esperienza.svg"); }
.i-famiglia { --m: url("/assets/icons/famiglia.svg"); }
.i-preventivo { --m: url("/assets/icons/preventivo.svg"); }
.i-persiane { --m: url("/assets/icons/persiane.svg"); }
.i-legno { --m: url("/assets/icons/verniciatura-legno.svg"); }
.i-ringhiera { --m: url("/assets/icons/ringhiera.svg"); }
.i-cartongesso { --m: url("/assets/icons/cartongesso.svg"); }
.i-protezione { --m: url("/assets/icons/protezione.svg"); }
.i-sopralluogo { --m: url("/assets/icons/sopralluogo.svg"); }
.i-calendario { --m: url("/assets/icons/calendario.svg"); }
.i-rullo { --m: url("/assets/icons/rullo.svg"); }
.i-instagram { --m: url("/assets/icons/instagram.svg"); }
.i-facebook { --m: url("/assets/icons/facebook.svg"); }
.i-posizione { --m: url("/assets/icons/posizione.svg"); }
.i-piu { --m: url("/assets/icons/piu.svg"); }
.i-meno { --m: url("/assets/icons/meno.svg"); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 6px;
  font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em;
  cursor: pointer; text-align: center;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.btn .i-freccia { width: 1.05em; height: .7em; transition: transform .2s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn--rosso { background: var(--rosso); color: var(--bianco); box-shadow: 0 6px 16px rgba(225, 0, 0, .22); }
.btn--bianco { background: var(--bianco); color: var(--rosso); }
.btn--contorno { background: transparent; color: var(--bianco); border: 1.5px solid rgba(255, 255, 255, .9); }
.btn--chiaro { background: var(--bianco); color: var(--inchiostro); border: 1px solid var(--linea); }
.btn--piccolo { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn--largo { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--rosso:hover { background: #C40000; }
  .btn--bianco:hover { background: #FFF1F1; }
  .btn--contorno:hover { background: rgba(255, 255, 255, .12); }
  .btn:hover .i-freccia { transform: translateX(3px); }
}

.occhiello {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rosso); margin-bottom: 8px;
}
.occhiello--scuro { color: var(--inchiostro); font-size: 12.5px; letter-spacing: .02em; }
.titolo-2 {
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; font-weight: 700;
  letter-spacing: -.035em; color: var(--inchiostro);
}
.titolo-3 {
  font-size: clamp(28px, 2.7vw, 38px); line-height: 1.08; font-weight: 700;
  letter-spacing: -.03em; color: var(--inchiostro);
}
.link-rosso {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--rosso); font-weight: 600; font-size: 16px;
  user-select: none; -webkit-user-select: none;
}
.link-rosso .i-freccia { width: 1.1em; height: .7em; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-rosso:hover .i-freccia { transform: translateX(4px); } }
.link-rosso:active { opacity: .7; }

/* ---------- Testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bianco);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .25s ease;
}
.testata.scesa { box-shadow: 0 1px 0 var(--linea), 0 8px 24px rgba(10, 15, 30, .06); }
.testata__riga { display: flex; align-items: center; gap: 24px; height: 64px; }
.testata__logo { position: relative; z-index: 2; flex: none; display: block; }
.testata__logo img { height: 52px; width: auto; transform-origin: 0 0; transition: transform .35s var(--ease-out); }
.testata__menu { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.testata__tel { display: none; }
.testata__cta { display: none; }
.testata__tel-tondo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--linea); color: var(--rosso); font-size: 19px;
}
.testata__tel-tondo { transition: transform .16s var(--ease-out), background-color .2s ease; }
.testata__tel-tondo:active { background: var(--pannello); transform: scale(.95); }
.testata__apri {
  min-height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--linea); background: var(--bianco);
  font-size: 15px; font-weight: 600; color: var(--inchiostro); cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.testata__apri { transition: transform .16s var(--ease-out), background-color .2s ease; }
.testata__apri:active { background: var(--pannello); transform: scale(.96); }
@media (min-width: 1080px) {
  .testata__riga { height: 84px; gap: 40px; }
  .testata__logo { align-self: flex-start; padding-top: 6px; }
  .testata__logo img { height: 96px; filter: drop-shadow(0 2px 6px rgba(255, 255, 255, .9)); }
  .testata.scesa .testata__logo img { transform: scale(.75); }
  .testata__menu { display: block; margin-left: auto; }
  .testata__menu ul { display: flex; gap: clamp(22px, 2.2vw, 32px); white-space: nowrap; }
  .testata__menu a {
    position: relative; font-size: 15px; font-weight: 500; color: #5A5F6A; padding: 8px 0;
    transition: color .2s ease;
  }
  .testata__menu a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--rosso);
    transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
  }
  .testata__menu a:focus-visible::after { transform: scaleX(1); }
  .testata__azioni { margin-left: clamp(24px, 2.4vw, 40px); gap: 24px; }
  .testata__tel {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 17px; color: var(--inchiostro); letter-spacing: -.01em;
  }
  .testata__tel .i { color: var(--rosso); font-size: 19px; }
  .testata__cta { display: inline-flex; }
  .testata__tel-tondo, .testata__apri { display: none; }
}

@media (min-width: 1080px) and (max-width: 1279px) { .testata__tel { display: none; } }

/* menu da telefono */
.menu-telefono {
  position: fixed; inset: 0; z-index: 80;
  background: var(--bianco);
  height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: env(safe-area-inset-top, 0px) var(--margine-dx) calc(24px + env(safe-area-inset-bottom, 0px)) var(--margine);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .25s var(--ease-out);
}
.menu-telefono.aperto { opacity: 1; transform: none; }
.menu-telefono__dentro { display: flex; flex-direction: column; gap: 18px; min-height: 100%; }
.menu-telefono__testa { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.menu-telefono__testa img { height: 52px; width: auto; }
.menu-telefono nav { margin-top: 12px; }
.menu-telefono nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; border-bottom: 1px solid var(--linea);
  font-size: 24px; font-weight: 650; letter-spacing: -.02em; color: var(--inchiostro);
  user-select: none; -webkit-user-select: none;
}
.menu-telefono nav a .i { color: var(--rosso); width: 22px; height: 14px; }
.menu-telefono nav a:active { color: var(--rosso); }
.menu-telefono .btn { margin-top: 12px; min-height: 52px; }
.menu-telefono__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 20px; font-weight: 700; color: var(--inchiostro); padding: 10px 0;
}
.menu-telefono__tel .i { color: var(--rosso); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: #F3F3F3; }
.hero__foto { position: absolute; left: 0; right: 0; top: 0; height: 560px; display: block; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
.hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .45) 38%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(0deg, #F3F3F3 0%, rgba(243, 243, 243, 0) 22%);
}
.hero__griglia { position: relative; padding-top: 34px; padding-bottom: 28px; }
.hero__testo { position: relative; z-index: 2; min-height: 440px; }
.hero h1 {
  font-size: clamp(38px, 10.4vw, 66px); line-height: 1.02; font-weight: 700;
  letter-spacing: -.034em; color: var(--inchiostro); margin: 6px 0 14px;
}
.hero__sotto { font-size: clamp(18px, 4.8vw, 24px); line-height: 1.3; color: var(--inchiostro); font-weight: 450; letter-spacing: -.015em; max-width: 26em; }
.hero__piccolo { margin-top: 14px; font-size: 14.5px; color: var(--inchiostro); }
.hero__rullo {
  position: absolute; z-index: 1; pointer-events: none;
  left: -4px; top: 296px; width: min(78vw, 360px); height: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .12));
}

.modulo {
  position: relative; z-index: 3;
  background: var(--bianco); border-radius: 10px;
  box-shadow: 0 2px 4px rgba(10, 15, 30, .04), 0 22px 50px rgba(10, 15, 30, .14);
  padding: 24px 20px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.modulo__titolo { font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--inchiostro); }
.modulo__sotto { font-size: 14.5px; color: var(--testo); margin: -4px 0 6px; }
.campo {
  width: 100%; min-height: 48px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--inchiostro);
  background: var(--bianco); border: 1px solid #E1E2E6; border-radius: 6px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.campo::placeholder { color: var(--grigio); }
.campo:focus { outline: none; border-color: var(--rosso); box-shadow: 0 0 0 3px rgba(225, 0, 0, .12); }
.campo[aria-invalid="true"] { border-color: var(--rosso); }
.campo-scelta { position: relative; }
.campo-scelta select { padding-right: 40px; cursor: pointer; }
.campo-scelta select:invalid { color: var(--grigio); }
.campo-scelta .i { position: absolute; right: 14px; top: 50%; width: 12px; height: 8px; margin-top: -4px; color: var(--grigio); pointer-events: none; }
.spunta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--testo); cursor: pointer; margin: 4px 0 6px; min-height: 28px; }
.spunta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.spunta__casella {
  flex: none; width: 18px; height: 18px; border: 1.5px solid #B9BCC3; border-radius: 4px; background: var(--bianco);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease, border-color .15s ease;
}
.spunta input:checked + .spunta__casella { background: var(--rosso); border-color: var(--rosso); }
.spunta input:checked + .spunta__casella::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px);
}
.spunta input:focus-visible + .spunta__casella { outline: 2px solid var(--rosso); outline-offset: 2px; }
.spunta a { color: var(--rosso); text-decoration: underline; text-underline-offset: 2px; }
.modulo__errore { font-size: 14px; color: var(--rosso); font-weight: 600; }
.modulo .btn { min-height: 50px; }
.modulo__altri { display: flex; justify-content: space-around; padding-top: 6px; }
.modulo__altri a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  font-size: 15px; font-weight: 600; color: var(--inchiostro); border-radius: 6px;
}
.modulo__altri a .i { color: var(--rosso); font-size: 18px; }
.modulo__altri a:active { background: var(--pannello); }
.modulo__privacy { font-size: 12px; line-height: 1.45; color: var(--grigio); text-align: center; }
.modulo__privacy a { text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 760px) {
  .hero__foto { height: auto; bottom: 0; }
  .hero__foto img { object-position: 50% 62%; }
  .hero__foto::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .4) 34%, rgba(255, 255, 255, 0) 58%);
  }
  .hero__griglia {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: center;
    min-height: 560px; padding-top: 48px; padding-bottom: 48px;
  }
  .hero__testo { min-height: 0; padding-bottom: 150px; }
  .hero h1 { font-size: clamp(42px, 5.6vw, 66px); }
  .hero__rullo { top: auto; bottom: -8px; left: 8px; width: min(40vw, 470px); }
}
@media (min-width: 1080px) {
  .hero__griglia { grid-template-columns: minmax(0, 1fr) 392px; min-height: 600px; padding-top: 44px; padding-bottom: 44px; }
  .hero__testo { padding-bottom: 170px; padding-top: 10px; }
  .hero h1 { font-size: clamp(52px, 4.3vw, 62px); }
  .hero__rullo { width: min(36vw, 500px); left: 4px; }
  .modulo { padding: 28px 26px 20px; }
  .campo { min-height: 46px; font-size: 15px; }
}

/* ---------- Garanzie ---------- */
.garanzie { background: var(--bianco); border-bottom: 1px solid var(--linea); }
.garanzie__riga { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 18px; padding-bottom: 18px; }
.garanzie li {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--inchiostro); padding: 0 6px;
}
.garanzie li + li { border-left: 1px solid var(--linea); }
.garanzie .i { color: var(--rosso); font-size: 26px; }
@media (min-width: 760px) {
  .garanzie__riga { padding-top: 30px; padding-bottom: 30px; }
  .garanzie li { flex-direction: row; justify-content: center; gap: 14px; font-size: 15.5px; }
  .garanzie .i { font-size: 28px; }
}

/* ---------- Servizi ---------- */
.servizi { background: var(--bianco); border-bottom: 1px solid var(--linea); }
.servizi__pannello { position: relative; overflow: hidden; background: #E7E7E7; min-height: 360px; padding: 34px var(--margine-dx) 0 var(--margine); }
.servizi__pannello .titolo-2 { position: relative; z-index: 1; font-size: clamp(36px, 9.6vw, 52px); }
.servizi__pennello {
  position: absolute; right: 0; bottom: 0; width: min(64%, 330px); height: auto;
  -webkit-mask-image: radial-gradient(ellipse 125% 115% at 100% 100%, #000 58%, transparent 96%);
  mask-image: radial-gradient(ellipse 125% 115% at 100% 100%, #000 58%, transparent 96%);
}
.servizi__elenco { padding: 8px var(--margine-dx) 28px var(--margine); }
.servizio {
  display: grid; grid-template-columns: 44px 26px minmax(0, 1fr) 22px; align-items: center; column-gap: 12px;
  padding: 18px 0; border-bottom: 1px solid var(--linea);
  user-select: none; -webkit-user-select: none;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.servizio__icona { color: var(--rosso); width: 44px; height: 40px; }
.servizio__num { font-size: 15px; color: #5A5F6A; font-variant-numeric: tabular-nums; }
.servizio__testo strong { display: block; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; color: var(--inchiostro); }
.servizio__testo span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--testo); }
.servizio__freccia { color: var(--rosso); width: 22px; height: 14px; transition: transform .25s var(--ease-out); }
.servizio:active { background: #FAFAFA; transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .servizio:hover .servizio__freccia { transform: translateX(5px); }
  .servizio:hover .servizio__testo strong { color: var(--rosso); }
}
.servizi__nota { padding-top: 18px; font-size: 15px; color: var(--inchiostro); }
@media (min-width: 760px) {
  .servizi { display: grid; grid-template-columns: 36% minmax(0, 1fr); }
  .servizi__pannello {
    min-height: 520px;
    padding: 52px 24px 0 max(var(--margine), calc((100vw - var(--largo)) / 2));
  }
  .servizi__pannello .titolo-2 { font-size: clamp(38px, 3.9vw, 56px); }
  .servizi__pennello { width: 64%; max-width: 360px; }
  .servizi__elenco { padding: 26px max(var(--margine-dx), calc((100vw - var(--largo)) / 2)) 30px 44px; }
  .servizio { grid-template-columns: 60px 42px minmax(0, 1fr) 30px; column-gap: 22px; padding: 22px 0; }
  .servizio__icona { width: 58px; height: 50px; }
  .servizio__num { font-size: 20px; }
  .servizio__testo strong { font-size: clamp(20px, 1.75vw, 25px); }
  .servizio__testo span { font-size: 15px; }
  .servizio__freccia { width: 26px; height: 16px; }
}

/* ---------- Sezioni ---------- */
.sezione { padding: 56px 0; }
.sezione-stretta { padding: 0; }
.testa-sezione { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; margin-bottom: 22px; }
.testa-sezione__lato { font-size: 15px; color: var(--testo); padding-bottom: 6px; }
@media (min-width: 760px) {
  .sezione { padding: 76px 0; }
  .testa-sezione { margin-bottom: 26px; }
}

/* ---------- Persiane: prima e dopo ---------- */
.persiane { background: var(--bianco); }
.confronto {
  --pos: 50%;
  position: relative; display: flex; gap: 10px;
  height: clamp(300px, 30vw, 430px);
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
  cursor: ew-resize;
}
.confronto__lato {
  position: relative; overflow: hidden; border-radius: 10px; background: #E9E6E2;
  box-shadow: 0 1px 2px rgba(10, 15, 30, .06), 0 10px 30px rgba(10, 15, 30, .08);
}
.confronto__lato--prima { flex: 0 0 calc(var(--pos) - 5px); }
.confronto__lato--dopo { flex: 1 1 0; min-width: 0; }
.confronto__lato img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.confronto__lato--prima img { object-position: 50% 80%; }
.confronto__lato--dopo img { object-position: 50% 45%; }
.etichetta {
  position: absolute; top: 12px; left: 12px;
  background: var(--bianco); color: var(--inchiostro);
  padding: 6px 16px; border-radius: 4px;
  font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(10, 15, 30, .1);
}
.confronto__maniglia {
  position: absolute; z-index: 2; top: 50%; left: var(--pos);
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--bianco); color: var(--rosso);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 4px 16px rgba(10, 15, 30, .2);
  cursor: grab; touch-action: none;
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.confronto__maniglia .i { width: 7px; height: 12px; }
.confronto.trascina .confronto__maniglia { transform: scale(1.08); cursor: grabbing; box-shadow: 0 6px 22px rgba(10, 15, 30, .28); }
.passaggi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin-top: 24px; }
.passaggi li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--inchiostro); }
.passaggi__foto { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--bianco); border: 1px solid var(--linea); }
.passaggi__foto img { width: 100%; height: 100%; object-fit: cover; }
/* sotto i 375 px i due passaggi per riga stanno nello schermo (la parola più lunga, «Risanamento», non va a capo) */
@media (max-width: 374px) {
  .passaggi { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .passaggi li { gap: 10px; }
  .passaggi__foto { width: 52px; height: 52px; }
}
@media (max-width: 349px) {
  .passaggi li { gap: 8px; font-size: 13px; }
  .passaggi__foto { width: 46px; height: 46px; }
}
.persiane__link { margin-top: 26px; text-align: right; }
/* da computer: il prima e dopo nel suo verso (verticale), mai ingrandito oltre ~1,3 volte, e i 4 passaggi in colonna accanto */
@media (min-width: 760px) {
  .persiane__corpo {
    display: grid; grid-template-columns: minmax(0, 640px) minmax(280px, 1fr);
    gap: clamp(36px, 6.2vw, 92px); align-items: stretch;
  }
  .confronto { height: auto; width: 100%; aspect-ratio: 640 / 500; align-self: center; }
  /* i passaggi riempiono l'altezza del prima e dopo: la prima riga in cima alle foto, il link in fondo */
  .persiane__passi { display: flex; flex-direction: column; }
  .passaggi { flex: 1 1 auto; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 0; margin-top: 0; border-top: 1px solid var(--linea); }
  .passaggi li {
    position: relative; gap: 22px; padding: 10px 0;
    border-bottom: 1px solid var(--linea); font-size: clamp(15px, 1.3vw, 18px); letter-spacing: -.01em;
  }
  .passaggi li br { display: none; }
  /* la freccia del design fra un passaggio e l'altro, girata verso il basso, sulla riga sotto la foto */
  .passaggi li:not(:last-child)::after {
    content: ""; position: absolute; z-index: 1; left: calc(clamp(64px, 6.4vw, 92px) / 2 - 13px); bottom: -9px;
    width: 26px; height: 17px; padding: 0 4px; background: var(--bianco);
    -webkit-mask: none; mask: none;
  }
  .passaggi li:not(:last-child)::before {
    content: ""; position: absolute; z-index: 2; left: calc(clamp(64px, 6.4vw, 92px) / 2 - 8px); bottom: -8px;
    width: 16px; height: 16px; background: var(--rosso); transform: rotate(90deg);
    -webkit-mask: url("/assets/icons/freccia-destra.svg") center / contain no-repeat;
    mask: url("/assets/icons/freccia-destra.svg") center / contain no-repeat;
  }
  .passaggi__foto { width: clamp(64px, 6.4vw, 92px); height: clamp(64px, 6.4vw, 92px); }
  .persiane__link { margin-top: 20px; }
  .persiane__link .link-rosso { white-space: nowrap; }
}

/* ---------- Metodo ---------- */
.metodo { background: var(--fondo); border-top: 1px solid var(--linea); }
.metodo__dentro { position: relative; }
.metodo__filo { display: none; }
.metodo__nota {
  display: flex; align-items: center; gap: 14px;
  background: var(--bianco); border-radius: var(--raggio); box-shadow: var(--ombra);
  padding: 14px 18px; margin-top: 28px;
}
.metodo__nota .i { color: var(--rosso); font-size: 34px; }
.metodo__nota p { font-size: 14px; line-height: 1.4; color: var(--inchiostro); }
.metodo__nota br { display: none; }
.passi { display: grid; gap: 24px; margin-top: 30px; }
.passo { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.passo__num { grid-row: 1 / span 3; font-family: var(--serif); font-size: 54px; line-height: .9; color: var(--numero); letter-spacing: -.02em; }
.passo__icona { color: var(--rosso); width: 36px; height: 34px; margin-bottom: 8px; }
.passo h3 { font-size: 18px; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--inchiostro); }
.passo p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--testo); }
@media (min-width: 760px) {
  .metodo__dentro { min-height: 330px; }
  .metodo__testa { max-width: 46%; }
  .metodo__filo {
    display: block; position: absolute; z-index: 0; left: 30%; top: 24px; width: 52%; height: 150px; overflow: visible;
  }
  .metodo__filo path { fill: none; stroke: var(--rosso); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
  .metodo__nota { position: absolute; z-index: 1; right: var(--margine-dx); top: 0; margin: 0; max-width: 280px; }
  .metodo__nota br { display: inline; }
  .passi { position: relative; z-index: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 40px; }
  .passo { grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; }
  .passo__num { font-size: 66px; }
  .passo__icona { width: 42px; height: 40px; }
  .passo h3 { font-size: 19px; }
}

/* ---------- Lavori ---------- */
.lavori { background: var(--bianco); border-top: 1px solid var(--linea); }
.testa-sezione--lavori { align-items: flex-end; }
@media (min-width: 760px) { .testa-sezione--lavori .titolo-2, .territorio .titolo-2 { font-size: clamp(32px, 3vw, 44px); } .cantieri .titolo-2 { font-size: clamp(32px, 3.2vw, 46px); } }
.filtri {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--margine-dx)) 0 calc(-1 * var(--margine)); padding: 0 var(--margine-dx) 0 var(--margine);
  width: calc(100% + var(--margine) + var(--margine-dx));
}
.filtri::-webkit-scrollbar { display: none; }
.filtro {
  position: relative; flex: none; background: none; border: 0; cursor: pointer;
  min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 500; color: #5A5F6A;
  user-select: none; -webkit-user-select: none; transition: color .2s ease, transform .16s var(--ease-out);
}
.filtro::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--rosso);
  transform: scaleX(0); transition: transform .25s var(--ease-out);
}
.filtro[aria-pressed="true"] { color: var(--rosso); font-weight: 600; }
.filtro[aria-pressed="true"]::after { transform: scaleX(1); }
.filtro:active { opacity: .7; transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .filtro:hover { color: var(--inchiostro); } .filtro[aria-pressed="true"]:hover { color: var(--rosso); } }

.galleria__griglia {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--margine-dx)) 0 calc(-1 * var(--margine)); padding: 0 var(--margine-dx) 4px var(--margine);
  scroll-padding: 0 var(--margine);
}
.galleria__griglia::-webkit-scrollbar { display: none; }
.lavoro {
  position: relative; flex: 0 0 82%; height: 340px; scroll-snap-align: start;
  border-radius: 8px; overflow: hidden; background: var(--pannello);
}
.lavoro[hidden] { display: none; }
.lavoro img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .6s var(--ease-out); }
.lavoro figcaption {
  position: absolute; left: 10px; bottom: 10px; right: 10px; max-width: max-content;
  background: var(--bianco); border-radius: 5px; padding: 9px 14px;
  box-shadow: 0 2px 10px rgba(10, 15, 30, .1);
}
.lavoro figcaption strong { font-size: 14.5px; font-weight: 600; color: var(--inchiostro); letter-spacing: -.01em; }
.lavoro figcaption span { display: block; font-size: 13px; color: var(--testo); }
.lavoro figcaption .in-riga { display: inline; }
.lavoro--invito {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 28px; background: var(--fondo); border: 1px solid var(--linea);
}
.lavoro--invito .i-rullo { color: var(--rosso); font-size: 38px; }
.lavoro--invito strong { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; color: var(--inchiostro); }
.lavoro--invito > span:not(.link-rosso):not(.i) { font-size: 15px; color: var(--testo); }
.lavoro--invito .link-rosso { margin-top: 6px; font-size: 15px; }
.galleria__frecce { display: none; }
.freccia-tonda {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: var(--bianco);
  color: var(--rosso); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(10, 15, 30, .08);
  user-select: none; -webkit-user-select: none;
  transition: transform .16s var(--ease-out), box-shadow .2s ease, opacity .2s ease;
}
.freccia-tonda .i { width: 8px; height: 14px; }
.freccia-tonda:active { transform: scale(.95); }
.freccia-tonda:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .freccia-tonda:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(10, 15, 30, .16); } .lavoro:hover img { transform: scale(1.03); } }

@media (min-width: 760px) {
  .filtri { width: auto; margin: 0 -12px 4px 0; padding: 0; }
  .galleria { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 18px; align-items: center; }
  .galleria__griglia {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr;
    gap: 12px; height: clamp(420px, 37vw, 540px); overflow: visible; margin: 0; padding: 0;
  }
  .lavoro { height: auto; min-height: 0; flex: none; }
  .lavoro.fuori { display: none; }
  .lavoro.grande { grid-row: 1 / span 2; }
  .lavoro.alto { grid-row: 1 / span 2; }
  .lavoro figcaption { left: 12px; bottom: 12px; right: auto; max-width: calc(100% - 24px); padding: 10px 16px; }
  .lavoro.grande figcaption strong { font-size: 16px; }
  .galleria__frecce { display: flex; flex-direction: column; gap: 12px; }
  .galleria__griglia.cambia .lavoro:not(.fuori) img { animation: entra-foto .45s var(--ease-out); }
}
@keyframes entra-foto { from { opacity: .35; transform: scale(1.02); } to { opacity: 1; transform: none; } }

/* ---------- Esperienza e materiali ---------- */
.esperienza { background: var(--bianco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.esperienza__voce { display: flex; align-items: center; gap: 18px; padding: 24px 0; }
.esperienza__voce + .esperienza__voce { border-top: 1px solid var(--linea); }
.esperienza__voce strong { display: block; font-size: 17px; line-height: 1.25; color: var(--inchiostro); letter-spacing: -.015em; }
.esperienza__voce strong + span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--testo); }
.esperienza__numero { flex: none; font-family: var(--serif); font-size: 92px; line-height: .78; color: var(--rosso); letter-spacing: -.04em; padding-top: 6px; }
.esperienza__icona { color: var(--rosso); font-size: 60px; width: 1.15em; }
.esperienza__campioni { flex: none; width: 104px; height: auto; }
@media (min-width: 760px) {
  .esperienza__riga { display: grid; grid-template-columns: 1fr 1.08fr 1.25fr; }
  .esperienza__voce { padding: 34px 28px; gap: 20px; }
  .esperienza__voce:first-child { padding-left: 0; }
  .esperienza__voce:last-child { padding-right: 0; }
  .esperienza__voce + .esperienza__voce { border-top: 0; border-left: 1px solid var(--linea); }
  .esperienza__numero { font-size: clamp(88px, 8.4vw, 124px); }
  .esperienza__icona { font-size: clamp(56px, 4.6vw, 70px); }
  .esperienza__campioni { width: clamp(120px, 12vw, 176px); }
}

/* ---------- Cantieri e social ---------- */
.cantieri { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cantieri__riga { display: grid; gap: 24px; padding-top: 44px; padding-bottom: 44px; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.social__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  background: var(--bianco); border: 1px solid #E1E2E6; border-radius: 8px;
  font-size: 15.5px; font-weight: 500; color: var(--inchiostro);
  user-select: none; -webkit-user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out);
}
.social__btn .i { color: var(--rosso); font-size: 22px; }
.social__btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .social__btn:hover { border-color: var(--rosso); box-shadow: 0 4px 14px rgba(10, 15, 30, .08); } }
.cantieri__foto { display: block; }
.cantieri__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 28%; border-radius: 8px; box-shadow: var(--ombra); transition: transform .5s var(--ease-out); }
.cantieri__didascalia { display: block; margin-top: 8px; font-size: 13px; color: var(--grigio); text-align: center; }
@media (hover: hover) and (pointer: fine) { .cantieri__foto:hover img { transform: translateY(-3px); } }
@media (min-width: 760px) {
  .cantieri__riga { grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); align-items: center; gap: 48px; padding-top: 52px; padding-bottom: 52px; }
  .cantieri__foto img { aspect-ratio: 2.35 / 1; }
}

/* ---------- Territorio e domande ---------- */
.territorio { background: var(--bianco); }
.territorio__riga { display: grid; gap: 44px; }
.territorio__zona { display: grid; gap: 12px 22px; }
.territorio__testo { font-size: 15.5px; color: var(--testo); }
.territorio__raggio {
  --cerchio: 92px;
  position: relative; display: grid; grid-template-columns: var(--cerchio) auto; grid-template-rows: auto auto;
  align-items: end; justify-content: start; column-gap: 20px; min-height: var(--cerchio);
}
/* i due cerchi stanno nella loro colonna, intorno al segnaposto: non toccano «120 km» e non escono dallo schermo */
.territorio__cerchi {
  position: absolute; left: 0; top: 50%; width: var(--cerchio); height: var(--cerchio); margin-top: calc(var(--cerchio) / -2);
  border-radius: 50%; border: 1px solid var(--linea); pointer-events: none;
}
.territorio__cerchi::after {
  content: ""; position: absolute; inset: 17px; border-radius: 50%; border: 1px dashed #E1E2E6;
}
.territorio__raggio .i-posizione { position: relative; grid-column: 1; grid-row: 1 / span 2; justify-self: center; align-self: center; color: var(--rosso); font-size: 46px; width: .8em; }
.territorio__circa { position: relative; grid-column: 2; font-size: 14px; color: var(--testo); }
.territorio__km { position: relative; grid-column: 2; font-family: var(--serif); font-size: 64px; line-height: .95; color: var(--inchiostro); letter-spacing: -.02em; }
.domande { margin-top: 18px; border-top: 1px solid var(--linea); }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda summary {
  display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 12px 0;
  font-size: 16px; font-weight: 600; color: var(--inchiostro); cursor: pointer; list-style: none;
  user-select: none; -webkit-user-select: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda__segno {
  flex: none; width: 16px; height: 16px; background: var(--rosso);
  -webkit-mask: url("/assets/icons/piu.svg") center / contain no-repeat; mask: url("/assets/icons/piu.svg") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.domanda[open] .domanda__segno {
  -webkit-mask-image: url("/assets/icons/meno.svg"); mask-image: url("/assets/icons/meno.svg");
}
.domanda summary:active { opacity: .7; }
.domanda p { padding: 0 0 16px 32px; margin-top: -4px; font-size: 15px; color: var(--testo); }
@media (hover: hover) and (pointer: fine) { .domanda summary:hover { color: var(--rosso); } }
@media (min-width: 760px) {
  .territorio__riga { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .territorio__zona { grid-template-columns: auto auto; justify-content: space-between; grid-template-areas: "titolo titolo" "testo raggio"; align-items: end; gap: 14px 20px; padding-right: 40px; }
  .territorio__titolo { grid-area: titolo; }
  .territorio__testo { grid-area: testo; align-self: start; }
  .territorio__raggio { grid-area: raggio; }
  .territorio__domande { border-left: 1px solid var(--linea); padding-left: 48px; }
  /* da computer come nel design: il segnaposto sopra, «circa 120 km» sotto */
  .territorio__raggio { --cerchio: 100px; grid-template-columns: auto; grid-template-rows: var(--cerchio) auto auto; column-gap: 0; min-height: 0; }
  .territorio__cerchi { left: 50%; top: 0; margin: 0 0 0 calc(var(--cerchio) / -2); }
  .territorio__raggio .i-posizione { grid-row: 1; font-size: 50px; }
  .territorio__circa { grid-column: 1; grid-row: 2; margin-top: 12px; }
  .territorio__km { grid-column: 1; grid-row: 3; font-size: clamp(52px, 4.4vw, 66px); }
}

/* ---------- Banda rossa ---------- */
.banda { background: var(--rosso-banda); color: var(--bianco); overflow: hidden; }
.banda__riga { display: grid; gap: 30px; padding-top: 46px; padding-bottom: 46px; }
.banda__titolo { position: relative; padding-bottom: 18px; }
.banda h2 { position: relative; z-index: 1; font-size: clamp(42px, 11vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; }
.banda__filo { position: absolute; left: 0; bottom: 0; width: 92%; height: 70px; overflow: visible; }
.banda__filo path { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.banda__rullo { position: absolute; right: 14px; bottom: 34px; font-size: 70px; color: var(--bianco); transform: rotate(28deg); transform-origin: 50% 100%; }
.banda__azioni { display: grid; gap: 14px; justify-items: stretch; }
.banda__azioni .btn--bianco { min-height: 54px; font-size: 16.5px; }
.banda__tel { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; padding: 4px 0; }
.banda__tel .i { font-size: 28px; }
.banda__due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.banda__due .btn { min-height: 48px; padding: 0 8px; gap: 8px; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 359px) { .banda__due { grid-template-columns: 1fr; } }
@media (min-width: 760px) {
  .banda__riga { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
  .banda__titolo { padding-bottom: 26px; }
  .banda__filo { width: 96%; height: 92px; }
  .banda__rullo { right: 2%; bottom: 52px; font-size: 96px; }
  .banda__tel { justify-content: flex-start; font-size: clamp(30px, 2.8vw, 38px); }
}

/* ---------- Piede ---------- */
.piede { background: var(--fondo); padding: 36px 0 calc(100px + env(safe-area-inset-bottom, 0px)); }
.piede__riga { display: grid; gap: 22px; }
.piede__marca { display: flex; align-items: center; gap: 18px; }
.piede__marca img { width: 108px; height: auto; flex: none; }
.piede__marca strong { display: block; font-size: 15px; color: var(--inchiostro); }
.piede__marca strong + span { display: block; font-size: 14px; color: var(--testo); margin-top: 2px; }
.piede__menu ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.piede__menu a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--testo); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .piede__menu a:hover { color: var(--rosso); } }
.piede__fondo { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linea); }
.piede__legale, .credit { font-size: 13px; color: var(--grigio); }
.piede__legale a, .credit a { color: var(--testo); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 760px) {
  .piede { padding: 36px 0 30px; }
  .piede__riga { grid-template-columns: auto 1fr; align-items: center; gap: 32px; }
  .piede__menu ul { justify-content: flex-end; gap: 4px 30px; }
  .piede__marca img { width: 128px; }
  .piede__fondo { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- Barra da telefono ---------- */
.barra-telefono {
  position: fixed; z-index: 40;
  left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px;
  transform: translateY(0); transition: transform .3s var(--ease-out), opacity .2s ease;
}
.barra-telefono .btn { min-height: 52px; padding: 0 12px; font-size: 15.5px; box-shadow: 0 8px 24px rgba(10, 15, 30, .18); }
.barra-telefono .btn--chiaro .i { color: var(--rosso); }
.barra-telefono.via { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
@media (min-width: 760px) { .barra-telefono { display: none; } }

/* ---------- Pagine legali e 404 ---------- */
.pagina-testo { background: var(--bianco); padding: 48px 0 64px; }
.pagina-testo .contenitore { max-width: 860px; }
.pagina-testo h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -.035em; color: var(--inchiostro); margin-bottom: 10px; }
.pagina-testo h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; color: var(--inchiostro); margin: 34px 0 10px; }
.pagina-testo h3 { font-size: 18px; color: var(--inchiostro); margin: 24px 0 8px; }
.pagina-testo p, .pagina-testo li { font-size: 16px; line-height: 1.65; color: var(--testo); }
.pagina-testo p + p { margin-top: 12px; }
.pagina-testo ul, .pagina-testo ol { list-style: disc; padding-left: 22px; margin: 10px 0; }
.pagina-testo ol { list-style: decimal; }
.pagina-testo a { color: var(--rosso); text-decoration: underline; text-underline-offset: 2px; }
.pagina-testo table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; display: block; overflow-x: auto; }
.pagina-testo th, .pagina-testo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.pagina-testo th { color: var(--inchiostro); }
.pagina-testo .aggiornamento { font-size: 14px; color: var(--grigio); }
.errore404 { background: var(--bianco); padding: 80px 0 100px; text-align: center; }
.errore404 .codice { font-family: var(--serif); font-size: clamp(96px, 20vw, 180px); line-height: .9; color: var(--rosso); }
.errore404 h1 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -.035em; color: var(--inchiostro); margin-top: 12px; }
.errore404 p { margin-top: 10px; font-size: 17px; }
.errore404 .azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.btn--linea { background: var(--bianco); color: var(--inchiostro); border: 1px solid #E1E2E6; }

/* =====================================================================
   5-bis · Il movimento — lo stesso design e lo stesso kit, ma vivo.
   Curve --ease-out e --ease-in-out, solo transform, opacity e clip-path;
   hover solo col mouse, :active al tocco, meno movimento (non zero) con prefers-reduced-motion.
   ===================================================================== */

/* ---------- Testata: hover del menu solo col mouse ---------- */
@media (min-width: 1080px) and (hover: hover) and (pointer: fine) {
  .testata__menu a:hover { color: var(--inchiostro); }
  .testata__menu a:hover::after { transform: scaleX(1); }
}

/* ---------- La hero entra al caricamento (CSS, senza aspettare il JavaScript) ---------- */
@keyframes entra-su { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes pennellata {
  from { clip-path: inset(-20% 100% -20% -20%); }
  to { clip-path: inset(-20% -20% -20% -20%); }
}
.hero__testo > * { animation: entra-su .9s var(--ease-out) both; }
.hero__testo > :nth-child(1) { animation-delay: .05s; }
.hero__testo > :nth-child(2) { animation-delay: .13s; }
.hero__testo > :nth-child(3) { animation-delay: .22s; }
.hero__testo > :nth-child(4) { animation-delay: .3s; }
.modulo { animation: entra-su .9s var(--ease-out) .28s both; }
/* il rullo del kit «dipinge» il suo nastro da sinistra a destra; la foto della hero resta ferma e visibile da subito */
.hero__rullo { animation: pennellata 1.4s var(--ease-in-out) .35s both; will-change: transform; }

/* ---------- Le sezioni arrivano scorrendo (.reveal → .in, una volta sola) ----------
   Con @keyframes e «backwards»: finita l'entrata, hover e tocco degli elementi tornano i loro */
@keyframes rivela { from { opacity: 0; transform: translate3d(0, 32px, 0); } }
@keyframes dissolvenza { from { opacity: 0; } }
.js .reveal:not(.in) { opacity: 0; }
.js .reveal.in { animation: rivela .85s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
/* le linee del design (il filo del metodo, il tratto sotto «Parliamo del tuo lavoro») si disegnano */
@keyframes traccia { from { clip-path: inset(-12% 100% -12% 0); } to { clip-path: inset(-12% -4% -12% 0); } }
.js .reveal--traccia:not(.in) { opacity: 1; clip-path: inset(-12% 100% -12% 0); }
.js .reveal--traccia.in { animation: traccia 1.5s var(--ease-in-out) .2s backwards; }
/* il rullo bianco della banda arriva in fondo al tratto, come se lo avesse appena tirato */
@keyframes rullo-arriva {
  from { opacity: 0; transform: translate3d(-64px, 14px, 0) rotate(8deg); }
  to { opacity: 1; transform: rotate(28deg); }
}
.js .banda__rullo.reveal.in { animation: rullo-arriva 1.3s var(--ease-in-out) .35s backwards; }
/* il segnaposto del territorio scende al suo posto, e i cerchi danno tre «onde» */
@keyframes segnaposto { from { opacity: 0; transform: translate3d(0, -22px, 0); } }
.js .territorio__raggio.reveal.in .i-posizione { animation: segnaposto .8s var(--ease-out) .3s backwards; }
.territorio__cerchi::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--rosso); opacity: 0; pointer-events: none;
}
@keyframes onda { from { opacity: .45; transform: scale(.62); } to { opacity: 0; transform: scale(1.12); } }
.territorio__raggio.in .territorio__cerchi::before { animation: onda 2.2s var(--ease-out) .9s 3; }

/* ---------- Il prima e dopo invita a essere trascinato ---------- */
.confronto__maniglia::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--bianco); opacity: 0; pointer-events: none;
}
@keyframes invito { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes spingi-sx { 0%, 100% { transform: none; } 50% { transform: translate3d(-3px, 0, 0); } }
@keyframes spingi-dx { 0%, 100% { transform: none; } 50% { transform: translate3d(3px, 0, 0); } }
.confronto.in:not(.toccato) .confronto__maniglia::before { animation: invito 2.2s var(--ease-out) 1s 4; }
.confronto.in:not(.toccato) .confronto__maniglia .i-sx { animation: spingi-sx 2.2s var(--ease-in-out) 1s 4; }
.confronto.in:not(.toccato) .confronto__maniglia .i-dx { animation: spingi-dx 2.2s var(--ease-in-out) 1s 4; }
.confronto__maniglia:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) {
  .confronto:hover .confronto__maniglia { transform: scale(1.06); box-shadow: 0 6px 22px rgba(10, 15, 30, .26); }
}
.confronto__maniglia:focus-visible { outline: 2px solid var(--rosso); outline-offset: 3px; }

/* ---------- Galleria: al cambio di filtro, da telefono, le schede entrano una dopo l'altra ---------- */
@keyframes entra-scheda { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@media (max-width: 759px) {
  .galleria__griglia.cambia .lavoro:not([hidden]) { animation: entra-scheda .55s var(--ease-out) backwards; animation-delay: calc(var(--k, 0) * 60ms); }
}
.lavoro--invito { transition: transform .16s var(--ease-out); }
.lavoro--invito:active { transform: scale(.98); }
.cantieri__foto { transition: transform .16s var(--ease-out); }
.cantieri__foto:active { transform: scale(.98); }

/* ---------- Domande: la risposta scende, il segno gira ---------- */
@keyframes risposta { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes segno { from { transform: rotate(-90deg); } }
.domanda[open] > p { animation: risposta .35s var(--ease-out); }
.domanda[open] .domanda__segno { animation: segno .3s var(--ease-out); }

/* ---------- Menu da telefono: entra in 300-400 ms, le voci una dopo l'altra; esce più in fretta ---------- */
.menu-telefono {
  transform: translate3d(0, -12px, 0);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.menu-telefono.aperto { transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); }
.menu-telefono.aperto nav li, .menu-telefono.aperto .btn--largo, .menu-telefono.aperto .menu-telefono__tel {
  animation: rivela .5s var(--ease-out) backwards; animation-delay: calc(80ms + var(--i, 0) * 50ms);
}

/* ---------- Meno movimento: restano le dissolvenze, via gli spostamenti ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__testo > *, .modulo, .hero__rullo { animation-name: dissolvenza; animation-duration: .6s; }
  .js .reveal.in, .js .reveal--traccia.in, .js .banda__rullo.reveal.in, .js .territorio__raggio.reveal.in .i-posizione { animation-name: dissolvenza; }
  .js .reveal--traccia:not(.in) { clip-path: none; opacity: 0; }
  .territorio__raggio.in .territorio__cerchi::before,
  .confronto.in:not(.toccato) .confronto__maniglia::before,
  .confronto.in:not(.toccato) .confronto__maniglia .i { animation: none; }
  .galleria__griglia.cambia .lavoro:not([hidden]) { animation-name: dissolvenza; }
  .domanda[open] > p { animation-name: dissolvenza; }
  .domanda[open] .domanda__segno { animation: none; }
  .menu-telefono { transform: none; }
  .menu-telefono.aperto nav li, .menu-telefono.aperto .btn--largo, .menu-telefono.aperto .menu-telefono__tel { animation-name: dissolvenza; }
}

/* =====================================================================
   Step 6 · il copy dentro la grafica del design (solo misure dei testi, nessuna parte nuova)
   ===================================================================== */
/* hero da telefono: il titolo del copy è più lungo di quello del design; il rullo resta fra il testo e il modulo,
   subito sotto l'ultima riga, quale che sia la lunghezza del testo */
@media (max-width: 759px) {
  .hero__testo { min-height: 0; }
  .hero__rullo { position: relative; top: auto; left: -4px; margin: 6px 0 -18px; }
}
/* persiane: la riga accanto al titolo */
.testa-sezione__lato { max-width: 34em; }
@media (min-width: 760px) { .persiane .testa-sezione__lato { max-width: 440px; } }
/* lavori: il link «Tutti i lavori» sotto la galleria, come quello delle persiane */
.lavori__link { margin-top: 22px; text-align: right; }
/* fascia «Chi siamo»: «oltre» piccolo sopra il numero, come «circa» sopra i km */
.esperienza__cifra { flex: none; display: flex; flex-direction: column; align-items: flex-start; }
.esperienza__oltre { font-size: 14px; line-height: 1; color: var(--testo); margin-bottom: 4px; }
.esperienza__voce .link-rosso { display: inline-flex; margin-top: 6px; font-size: 14.5px; }
/* servizi: la riga sotto l'elenco col link */
.servizi__nota .link-rosso { font-size: 15px; white-space: nowrap; }
/* territorio: il testo in tre righe brevi */
.territorio__testo p + p { margin-top: 6px; }
.territorio__testo .link-rosso { font-size: 15px; }
/* banda: «Chiama il» piccolo sopra il numero grande */
.banda__tel > span:last-child { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.banda__tel-invito { font-size: 14px; font-weight: 500; letter-spacing: 0; opacity: .9; margin-bottom: 4px; }
/* piede: logo, nome e recapiti */
.piede__marca > a { display: block; flex: none; }
.piede__contatti { display: block; margin-top: 3px; font-size: 14px; color: var(--testo); }
.piede__contatti a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 2px; }
/* niente parole sole in fondo a una riga: titoli bilanciati, paragrafi «pretty» */
h1, h2, h3, .servizio__testo strong, .lavoro figcaption, .esperienza__voce strong, .domanda summary { text-wrap: balance; }
p, .servizio__testo span, .esperienza__voce strong + span, .passaggi li > span:last-child { text-wrap: pretty; }
/* hero da computer: il titolo del copy su tre righe, sopra il rullo */
.hero h1 br { display: none; }
@media (min-width: 1080px) {
  .hero h1 { font-size: clamp(46px, 3.6vw, 52px); }
  .hero h1 br { display: inline; }
  .hero__testo { padding-bottom: 270px; }
}
@media (min-width: 760px) and (max-width: 1079px) { .hero h1 { font-size: clamp(38px, 4.4vw, 46px); } }
@media (min-width: 760px) { .piede__menu ul { gap: 4px 24px; } }

/* =====================================================================
   Step 6-bis · le pagine interne, coi pezzi della home (nessun elemento nuovo: solo varianti di misura)
   ===================================================================== */
/* menu: la voce della pagina in cui si è */
.testata__menu a[aria-current="page"] { color: var(--inchiostro); }
.testata__menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-telefono nav a[aria-current="page"] { color: var(--rosso); }

/* hero delle pagine: la stessa della home (foto, velo, occhiello, titolo), senza il riquadro del modulo */
.hero--pagina .hero__testo { min-height: 0; padding-bottom: 0; }
.hero--pagina .hero__griglia { padding-top: 40px; padding-bottom: 44px; }
.hero--pagina .hero__foto { height: 100%; }
.hero--pagina .hero__foto::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .7) 55%, rgba(243, 243, 243, .9) 100%);
}
.hero--pagina h1 { font-size: clamp(34px, 9vw, 44px); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (min-width: 760px) {
  .hero--pagina .hero__griglia { display: block; min-height: 0; padding-top: 72px; padding-bottom: 76px; }
  .hero--pagina .hero__testo { max-width: 760px; }
  .hero--pagina .hero__foto::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 45%, rgba(255, 255, 255, .15) 80%);
  }
  .hero--pagina h1 { font-size: clamp(40px, 4vw, 54px); }
}
/* hero sobria (lavori, chi siamo, contatti): senza foto a tutta pagina */
.hero--sobria { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.hero--sobria .hero__griglia { display: grid; gap: 28px; align-items: center; }
.hero__logo { width: min(64vw, 300px); height: auto; justify-self: center; }
@media (min-width: 760px) {
  .hero--sobria .hero__griglia { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__logo { width: clamp(220px, 24vw, 340px); }
}
/* le ancore della pagina lavori: la forma dei filtri della galleria */
.ancore { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; margin-left: -12px; }
.ancore .filtro { display: inline-flex; align-items: center; }

/* sezioni delle pagine */
.sezione--bianca { background: var(--bianco); }
.sezione--chiara { background: var(--fondo); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.sezione + .sezione--bianca { border-top: 1px solid var(--linea); }
.testo-sezione { max-width: 46em; color: var(--testo); font-size: 16px; }
.testo-sezione p + p { margin-top: 10px; }
.testo-sezione .link-rosso { margin-top: 6px; }
/* testo e foto affiancati da computer, uno sotto l'altro da telefono (la forma del prima e dopo con i passaggi) */
.blocco { display: grid; gap: 26px; }
@media (min-width: 900px) {
  .blocco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
  .blocco--inverso > :first-child { order: 2; }
}
/* le righe con icona dei servizi della home, qui senza freccia quando non portano altrove */
.righe { border-top: 1px solid var(--linea); margin-top: 18px; }
.righe .servizio { grid-template-columns: 40px minmax(0, 1fr) 22px; padding: 16px 0; }
.righe .servizio__icona { width: 36px; height: 34px; }
.righe .servizio__testo span { margin-top: 0; font-size: 16px; color: var(--inchiostro); }
.righe a.servizio .servizio__testo span { font-weight: 600; }
@media (min-width: 760px) {
  .righe .servizio { grid-template-columns: 48px minmax(0, 1fr) 28px; column-gap: 18px; }
  .righe .servizio__icona { width: 42px; height: 38px; }
  .righe .servizio__testo span { font-size: 17px; }
}
/* foto dei lavori: la scheda della galleria, in griglia da computer e in una riga che scorre da telefono */
.foto-griglia {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--margine-dx)) 0 calc(-1 * var(--margine)); padding: 0 var(--margine-dx) 4px var(--margine);
  scroll-padding: 0 var(--margine);
}
.foto-griglia::-webkit-scrollbar { display: none; }
.foto-griglia .lavoro { flex: 0 0 78%; height: 300px; }
.foto-griglia--sola .lavoro { flex-basis: 100%; }
@media (min-width: 760px) {
  .foto-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .foto-griglia .lavoro { height: 300px; }
  .foto-griglia--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foto-griglia--sola { grid-template-columns: minmax(0, 1fr); }
  .blocco .foto-griglia .lavoro { height: 340px; }
}
.foto-griglia--piccole { display: grid; grid-template-columns: repeat(3, minmax(0, 104px)); gap: 10px; overflow: visible; margin: 18px 0 0; padding: 0; }
.foto-griglia--piccole .lavoro { height: auto; aspect-ratio: 1; }
@media (min-width: 760px) { .foto-griglia--piccole { grid-template-columns: repeat(3, minmax(0, 160px)); gap: 14px; } }
/* i passi numerati della home (metodo), anche a quattro */
.passi--quattro { margin-top: 26px; }
@media (min-width: 760px) {
  .passi--quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; margin-top: 34px; }
}
@media (min-width: 1080px) { .passi--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
.passi--quattro .passo { grid-template-columns: 64px minmax(0, 1fr); }
@media (min-width: 760px) { .passi--quattro .passo__num { font-size: 58px; } }
.passi + .link-rosso, .passi + .btn, .righe + .btn, .testo-sezione + .btn { margin-top: 26px; }
/* i passaggi del legno nella loro forma del design: in riga, con le frecce */
.passaggi--riga { margin-top: 30px; }
@media (min-width: 760px) {
  .passaggi--riga { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 0; }
  .passaggi--riga li { border-bottom: 0; padding: 0 46px 0 0; font-size: 15px; }
  .passaggi--riga li::before { display: none; }
  .passaggi--riga li:not(:last-child)::after {
    left: auto; right: 12px; top: 50%; bottom: auto; width: 24px; height: 14px; margin-top: -7px; padding: 0; background: var(--rosso);
    -webkit-mask: url("/assets/icons/freccia-destra.svg") center / contain no-repeat;
    mask: url("/assets/icons/freccia-destra.svg") center / contain no-repeat;
  }
  .passaggi--riga .passaggi__foto { width: 84px; height: 84px; }
}
/* prima e dopo nelle pagine: il riquadro della home, e il prima e dopo piccolo al suo vero formato, mai ingrandito */
.prima-dopo { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .prima-dopo { grid-template-columns: minmax(0, 640px) auto; gap: 48px; } }
.foto-piccola { max-width: 315px; }
.foto-piccola img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 2px rgba(10, 15, 30, .06), 0 10px 30px rgba(10, 15, 30, .08); }
.foto-piccola figcaption, .didascalia { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--inchiostro); }
/* la frase dei post dell'impresa, nel riquadro bianco della home (metodo) */
.citazione { position: static; display: flex; align-items: center; gap: 14px; margin: 18px 0 0; max-width: 520px; }
.citazione p { font-size: 17px; line-height: 1.45; }
/* la banda rossa della home in fondo alle pagine: titolo più corto e qualche riga */
.banda--pagina h2 { font-size: clamp(34px, 8.6vw, 54px); }
.banda__testo { position: relative; z-index: 1; margin-top: 14px; max-width: 34em; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .95); }
.banda__testo p + p { margin-top: 8px; }
.banda__testo a { color: var(--bianco); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 760px) { .banda--pagina .banda__titolo { padding-bottom: 34px; } }
/* i recapiti di /contatti nelle righe dei servizi */
.righe .servizio .i-whatsapp { color: var(--rosso); }
.righe div.servizio { grid-template-columns: 40px minmax(0, 1fr); }
@media (min-width: 760px) { .righe div.servizio { grid-template-columns: 48px minmax(0, 1fr); } }
.i-casella { --m: url("/assets/icons/casella.svg"); }
.blocco--testi { align-items: start; }
@media (min-width: 760px) {
  .foto-griglia--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blocco .passi--quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; }
  .territorio--sola .territorio__riga { grid-template-columns: minmax(0, 820px); }
}
.blocco .foto-griglia.foto-griglia--piccole .lavoro, .foto-griglia.foto-griglia--piccole .lavoro { height: auto; width: 100%; aspect-ratio: 1 / 1; flex: none; }
@media (max-width: 759px) { .banda--pagina .banda__titolo { padding-bottom: 96px; } }
@media (max-width: 759px) { .passaggi--riga { grid-template-columns: 1fr; gap: 14px; } .banda--pagina .banda__titolo { padding-bottom: 84px; } }
@media (max-width: 759px) {
  .ancore { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--margine-dx)); padding-right: var(--margine-dx); }
  .ancore::-webkit-scrollbar { display: none; }
}

/* =====================================================================
   6-quater · Il salto di livello (Design/SALTO-DI-LIVELLO.md): stesso kit, stessa struttura, più qualità
   ===================================================================== */
/* ritmo: più aria fra le sezioni */
.sezione { padding: 68px 0; }
@media (min-width: 760px) { .sezione { padding: 104px 0; } .testa-sezione { margin-bottom: 34px; } }
.titolo-2 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.02; }
.occhiello { margin-bottom: 12px; }
/* nelle colonne a metà, titoli più compatti; i testi correnti più grandi */
@media (min-width: 900px) { .blocco .titolo-2 { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.05; } }
.testo-sezione { font-size: 17px; line-height: 1.6; }

/* HOME · la prima schermata: più alta, rullo più grande */
@media (min-width: 1080px) {
  .hero:not(.hero--pagina) .hero__griglia { min-height: 740px; }
  .hero:not(.hero--pagina) .hero__rullo { width: min(40vw, 580px); }
}
/* HOME · le tre garanzie diventano una barra bianca che sale sopra il bordo della hero */
@media (min-width: 760px) {
  .garanzie { position: relative; z-index: 4; margin-top: -52px; margin-bottom: 28px; background: transparent; border-bottom: 0; }
  .garanzie__riga {
    background: var(--bianco); border-radius: 14px;
    box-shadow: 0 2px 4px rgba(10, 15, 30, .04), 0 18px 44px rgba(10, 15, 30, .12);
  }
}

/* PAGINE · la hero con la cornice: testo a sinistra, la foto del lavoro a destra e il rullo del kit davanti */
.hero--cornice { background: var(--fondo); border-bottom: 1px solid var(--linea); overflow: hidden; }
.hero--cornice .hero__griglia { display: grid; gap: 40px; padding-top: 36px; padding-bottom: 64px; }
.hero__cornice { position: relative; margin: 0; }
.hero__cornice-foto {
  width: 100%; height: 250px; object-fit: cover; border-radius: 16px;
  box-shadow: 0 2px 4px rgba(10, 15, 30, .05), 0 24px 54px rgba(10, 15, 30, .16);
}
.hero__cornice .hero__rullo--cornice {
  position: absolute; z-index: 2; left: -14px; right: auto; top: auto; bottom: -38px;
  width: 52%; max-width: 330px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .14));
}
.hero__cornice .hero__logo {
  position: absolute; z-index: 2; right: 14px; bottom: -28px; width: 150px; height: auto; margin: 0;
  background: var(--bianco); border-radius: 14px; padding: 14px 16px; box-shadow: 0 14px 34px rgba(10, 15, 30, .16);
}
@media (min-width: 760px) {
  .hero--cornice .hero__griglia, .hero--sobria.hero--cornice .hero__griglia {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center;
    gap: clamp(40px, 5vw, 80px); min-height: 520px; padding-top: 56px; padding-bottom: 80px;
  }
  .hero--cornice .hero__testo { max-width: none; }
  .hero__cornice-foto { height: clamp(320px, 34vw, 470px); border-radius: 20px; }
  .hero__cornice .hero__rullo--cornice { left: -56px; bottom: -44px; width: 56%; max-width: 380px; }
  .hero__cornice .hero__logo { right: -22px; bottom: -30px; width: clamp(160px, 15vw, 210px); padding: 18px 22px; }
}
/* lavori: il ventaglio di tre foto della galleria */
.hero__ventaglio { height: 270px; }
.hero__ventaglio img {
  position: absolute; width: 58%; height: 72%; object-fit: cover; border-radius: 14px;
  border: 4px solid var(--bianco); box-shadow: 0 18px 40px rgba(10, 15, 30, .18);
}
.hero__ventaglio img:nth-child(1) { left: 0; top: 6%; transform: rotate(-5deg); }
.hero__ventaglio img:nth-child(2) { right: 0; top: 0; transform: rotate(4deg); }
.hero__ventaglio img:nth-child(3) { left: 21%; bottom: 0; transform: rotate(-1deg); z-index: 2; }
@media (min-width: 760px) { .hero__ventaglio { height: clamp(340px, 34vw, 470px); } }

/* servizi, ferro: i quattro passaggi leggibili */
.passi--due .passo { align-items: center; }
.passi--due .passo p { margin-top: 0; font-size: 16px; line-height: 1.45; color: var(--inchiostro); }

/* persiane: la frase dei post come manifesto, nel carattere con le grazie del marchio */
.citazione { padding: 24px 26px; gap: 18px; max-width: 580px; }
.citazione .i { font-size: 40px; }
.citazione p { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 29px); line-height: 1.22; color: var(--inchiostro); letter-spacing: -.005em; }
/* persiane: il legno grezzo del kit accanto a porte e portoni */
.kit-figura { margin: 0; justify-self: center; width: min(100%, 420px); }
.kit-figura img { width: 100%; height: auto; border-radius: 20px; background: var(--bianco); box-shadow: 0 2px 4px rgba(10, 15, 30, .04), 0 18px 44px rgba(10, 15, 30, .1); }
/* prima e dopo: il piccolo al suo formato, in una scheda chiara centrata accanto al cursore */
@media (min-width: 900px) {
  .prima-dopo { align-items: center; }
  .prima-dopo > div:last-child { background: var(--fondo); border: 1px solid var(--linea); border-radius: 16px; padding: 28px; max-width: 380px; }
  .sezione--chiara .prima-dopo > div:last-child { background: var(--bianco); }
}
/* il raggio dei 120 km largo quanto il suo contenuto: il cerchio torna in asse col segnaposto */
@media (min-width: 760px) { .territorio__raggio { width: max-content; } }
/* contatti: i recapiti, la cosa che si cerca, più grandi */
#recapiti .righe a.servizio { padding: 20px 0; }
#recapiti .righe a.servizio .servizio__testo span { font-size: clamp(17px, 1.6vw, 21px); }
/* chi siamo: la storia come un'apertura */
#storia .blocco > div:first-child .testo-sezione { font-size: clamp(17px, 1.5vw, 20px); color: var(--inchiostro); }
/* 404: più aria */
.errore404 { padding: 110px 0 130px; }

/* =====================================================================
   Collaudo (step 7) · le pagine interne fatte coi soli pezzi della home: qui solo come si compongono
   ===================================================================== */
/* galleria: da computer le due foto accanto alla grande stanno in una colonna (un div senza classi, lo mette main.js) */
@media (min-width: 760px) {
  .galleria__griglia > div { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 0; }
  .galleria__griglia > div > :only-child { grid-row: 1 / span 2; }
  .galleria__griglia > div > .lavoro { height: auto; min-height: 0; }
}
/* hero delle pagine: i pulsanti sotto il testo; il logo di /chi-siamo nel riquadro bianco della home */
.hero__testo > .btn { margin-top: 26px; margin-right: 8px; }
.hero__testo > .filtri { margin-top: 18px; }
.hero__griglia > img:not(.hero__rullo) {
  position: relative; z-index: 3; width: min(62vw, 240px); height: auto; margin: 26px 0 0; padding: 18px 22px;
  background: var(--bianco); border-radius: 14px; box-shadow: 0 2px 4px rgba(10, 15, 30, .04), 0 22px 50px rgba(10, 15, 30, .14);
}
@media (min-width: 760px) {
  .hero__griglia > img:not(.hero__rullo) { grid-column: 2; justify-self: end; align-self: end; margin: 0; width: clamp(200px, 18vw, 260px); }
}
/* colonne di testo delle pagine (la colonna dei passaggi della home) */
.persiane__passi > .testa-sezione ~ * { margin-top: 18px; }
.persiane__passi > .testa-sezione ~ .btn { align-self: flex-start; margin-top: 26px; }
.persiane__corpo + .persiane__corpo { margin-top: 40px; }
.contenitore > ol + div { margin-top: 18px; }
div.servizio { grid-template-columns: 44px minmax(0, 1fr); }
.persiane__passi a.servizio { grid-template-columns: 44px minmax(0, 1fr) 22px; }
.persiane__passi .servizio__testo span, div.servizio .servizio__testo span { margin-top: 0; font-size: 16.5px; color: var(--inchiostro); }
@media (min-width: 760px) {
  div.servizio { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 18px 0; }
  .persiane__passi a.servizio { grid-template-columns: 52px minmax(0, 1fr) 30px; column-gap: 18px; padding: 20px 0; }
  .persiane__passi .servizio__testo span, div.servizio .servizio__testo span { font-size: 17px; }
}
#recapiti a.servizio .servizio__testo span { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; }
/* i passi della home a due colonne nella colonna di testo; la frase dei post nel riquadro del metodo */
.persiane__passi .passi { margin-top: 22px; }
.persiane__passi .passo p { margin-top: 0; font-size: 16px; color: var(--inchiostro); }
@media (min-width: 760px) { .persiane__passi .passi { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
@media (min-width: 1280px) { .persiane__passi .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; } }
.persiane__passi .metodo__nota { position: static; max-width: 560px; }
@media (min-width: 760px) {
  .persiane__passi .metodo__nota { padding: 22px 24px; gap: 18px; }
  .persiane__passi .metodo__nota p { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; color: var(--inchiostro); }
}
/* la foto sola accanto al testo, e il prima e dopo piccolo al suo formato */
.persiane__corpo > .lavoro img { max-height: 560px; }
.persiane__passi > figure img { border-radius: 10px; box-shadow: 0 1px 2px rgba(10, 15, 30, .06), 0 10px 30px rgba(10, 15, 30, .08); }
.persiane__passi > figure figcaption { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--inchiostro); }
/* le tre foto piccole di /chi-siamo nella riga delle garanzie, mai oltre il loro formato */
.garanzie__riga li > img { width: 100%; max-width: 160px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.persiane__passi .garanzie__riga { gap: 10px; }
/* i passaggi del legno fuori dalla colonna: uno sotto l'altro da telefono */
@media (max-width: 759px) { .contenitore > .passaggi { grid-template-columns: 1fr; gap: 14px; } }
/* la banda rossa con qualche riga sotto il titolo */
.banda__titolo > div { position: relative; z-index: 1; margin-top: 14px; max-width: 34em; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .95); }
.banda__titolo > div p + p { margin-top: 8px; }
.banda__titolo > div a { color: var(--bianco); text-decoration: underline; text-underline-offset: 2px; }
.banda__titolo:has(> div) h2 { font-size: clamp(34px, 8.6vw, 54px); }
@media (max-width: 759px) { .banda__titolo:has(> div) { padding-bottom: 84px; } }
@media (min-width: 760px) { .banda__titolo:has(> div) { padding-bottom: 34px; } }
/* aria fra le colonne quando vanno una sotto l'altra (da telefono); nella home il cursore resta attaccato ai passaggi */
@media (max-width: 759px) { .persiane__corpo > :not(.confronto) + * { margin-top: 36px; } }
@media (max-width: 759px) { .persiane__corpo > .confronto + .persiane__passi:has(> figure) { margin-top: 24px; } }
/* il link della scheda col prima e dopo piccolo è più lungo di quello della home: va a capo, allineato al testo */
.persiane__passi:has(> figure) .persiane__link { text-align: left; }
.persiane__passi:has(> figure) .persiane__link .link-rosso { white-space: normal; }
.persiane__passi p + p { margin-top: 10px; }
#storia .persiane__passi:first-child > div.reveal { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--inchiostro); }
/* il territorio senza le domande accanto: una colonna sola, il raggio in asse */
@media (min-width: 760px) { .territorio__riga:not(:has(> .territorio__domande)) { grid-template-columns: minmax(0, 860px); } }
/* i passaggi del legno a tutta larghezza: in riga con le frecce, come nel design */
@media (min-width: 760px) {
  .contenitore > .passaggi { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0; margin-top: 30px; border-top: 0; }
  .contenitore > .passaggi li { border-bottom: 0; padding: 0 46px 0 0; font-size: 15px; }
  .contenitore > .passaggi li::before { display: none; }
  .contenitore > .passaggi li:not(:last-child)::after {
    left: auto; right: 12px; top: 50%; bottom: auto; width: 24px; height: 14px; margin-top: -7px; padding: 0; background: var(--rosso);
    -webkit-mask: url("/assets/icons/freccia-destra.svg") center / contain no-repeat;
    mask: url("/assets/icons/freccia-destra.svg") center / contain no-repeat;
  }
  .contenitore > .passaggi .passaggi__foto { width: 84px; height: 84px; }
}
/* il prima e dopo piccolo, al suo formato, in una scheda chiara accanto al cursore */
@media (min-width: 900px) {
  .persiane__passi:has(> figure) { align-self: center; justify-content: center; max-width: 380px; padding: 28px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 16px; }
}
/* hero delle pagine (senza il modulo): il testo resta nella sua colonna e il velo è più deciso, la foto si legge a destra */
.hero:not(:has(.modulo)) .hero__testo { max-width: 620px; }
.hero:not(:has(.modulo)) .hero__foto::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .84) 64%, rgba(255, 255, 255, .3) 90%), linear-gradient(0deg, #F3F3F3 0%, rgba(243, 243, 243, 0) 22%);
}
@media (min-width: 760px) {
  .hero:not(:has(.modulo)) .hero__foto::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .86) 38%, rgba(255, 255, 255, .25) 62%, rgba(255, 255, 255, 0) 75%);
  }
}
/* da telefono il titolo delle pagine interne entro tre righe (come nella versione fedele) */
@media (max-width: 759px) { .hero:not(:has(.modulo)) h1 { font-size: clamp(30px, 8.7vw, 36px); } }

/* 01/11/2026 · ordini di Domenico sulla versione di prima: hero senza modulo (WhatsApp e «Chiama»), zona Nord Italia */
.hero__zona { margin-top: 12px; font-size: clamp(17px, 4.4vw, 20px); font-weight: 600; color: var(--inchiostro); letter-spacing: -.01em; }
.hero__zona + .hero__sotto { margin-top: 10px; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__testo > :nth-child(5) { animation-delay: .38s; }
.hero__testo > :nth-child(6) { animation-delay: .46s; }
.territorio__km--zona { font-size: clamp(40px, 3.6vw, 52px); white-space: nowrap; }

/* =====================================================================
   6-quater · TERZO GIRO (01/11/2026) — la stessa base, rifatta da art director (Design/SALTO-DI-LIVELLO.md)
   Pianta ferma; logo dentro la testata; foto mai oltre i loro pixel né tagliate oltre il 25%;
   da telefono, in ogni hero, prima la foto (chiara, col rullo sopra) e poi il testo.
   ===================================================================== */
:root {
  --ombra-1: 0 1px 2px rgba(10, 15, 30, .05), 0 8px 24px rgba(10, 15, 30, .07);
  --ombra-2: 0 2px 4px rgba(10, 15, 30, .04), 0 24px 56px rgba(10, 15, 30, .12);
  --sez: 72px;
}
@media (min-width: 760px) { :root { --sez: 96px; } }
@media (min-width: 1280px) { :root { --sez: 112px; } }

/* ---------- Testata: il logo sta tutto nella fascia bianca, a ogni larghezza ---------- */
.testata { border-bottom: 1px solid transparent; transition: box-shadow .25s ease, border-color .25s ease; }
.testata.scesa { border-bottom-color: var(--linea); box-shadow: 0 10px 30px rgba(10, 15, 30, .06); }
.testata__riga { height: 64px; }
.testata__logo { align-self: center; padding: 0; }
.testata__logo img { height: 46px; width: auto; filter: none; transform-origin: 0 50%; }
@media (min-width: 1080px) {
  .testata__riga { height: 84px; }
  .testata__logo { align-self: center; padding-top: 0; }
  .testata__logo img { height: 62px; filter: none; }
  .testata.scesa .testata__logo img { transform: scale(.88); }
  .testata__menu a { font-size: 15px; letter-spacing: -.005em; }
  .testata__tel { font-size: 16px; gap: 9px; }
  .testata__tel .i { font-size: 18px; }
  .testata__cta { min-height: 44px; padding: 0 18px; border-radius: 8px; }
}
html { scroll-padding-top: 76px; }
@media (min-width: 1080px) { html { scroll-padding-top: 96px; } }

/* ---------- Occhielli: la lineetta rossa del marchio davanti ---------- */
.occhiello { display: flex; align-items: center; gap: 12px; font-size: 12.5px; letter-spacing: .14em; margin-bottom: 14px; }
.occhiello::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--rosso); }
.occhiello--scuro { color: var(--inchiostro); font-size: 12px; letter-spacing: .16em; }

/* ---------- Pulsanti: una misura sola, l'ombra rossa morbida ---------- */
.btn { min-height: 52px; padding: 0 24px; border-radius: 8px; font-size: 16px; }
.btn--rosso { box-shadow: 0 10px 22px -10px rgba(225, 0, 0, .65), inset 0 -1px 0 rgba(0, 0, 0, .12); }
.btn--linea, .btn--chiaro { background: var(--bianco); color: var(--inchiostro); border: 1px solid #E1E2E6; box-shadow: 0 1px 2px rgba(10, 15, 30, .05); }
.btn--linea .i, .btn--chiaro .i { color: var(--rosso); }
@media (hover: hover) and (pointer: fine) {
  .btn--linea:hover, .btn--chiaro:hover { border-color: var(--inchiostro); }
}

/* ---------- HERO, di ogni pagina ----------
   --ar: il formato della foto (dal file); da telefono la foto sta in testa nel formato --art (taglio ≤ 20%),
   da computer sta a destra, alta quanto la hero ma mai oltre i suoi pixel, sfumata solo verso il testo. */
.hero { --ar: 1.5; --hmax: 675px; --wmax: 62vw; background: #F3F3F3; }
.hero:has(.hero__foto img[width="1080"]) { --ar: 1.629; --hmax: 663px; --wmax: 74vw; --fp: 62% 50%; }
.hero:has(.hero__foto img[width="1200"][height="1200"]) { --ar: 1; --hmax: 1200px; }
.hero:has(.hero__foto img[height="783"]) { --ar: 1.533; --hmax: 783px; --wmax: 70vw; }
.hero:has(.hero__foto img[height="675"]) { --ar: 1.778; --hmax: 675px; --wmax: 72vw; }
.hero { --art: clamp(1.25, var(--ar), 1.5); }
.hero:not(:has(.modulo)) .hero__foto::after { content: none; }
.hero:not(.hero--pagina) .hero__griglia { min-height: 0; }
.hero h1 { color: var(--inchiostro); text-wrap: balance; }
.hero__sotto { color: var(--inchiostro); }
.hero__piccolo { color: var(--testo); }
.hero__piccolo strong { color: var(--inchiostro); }

/* la home: il titolo a due voci, «in tutto il Nord Italia» grande in rosso */
.hero[aria-labelledby="hero-titolo"] h1 { font-size: clamp(22px, 6.3vw, 30px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; margin: 0; }
.hero[aria-labelledby="hero-titolo"] h1 > br { display: none; }
.hero[aria-labelledby="hero-titolo"] h1 .rosso { display: block; margin-top: .12em; font-size: 2.12em; line-height: .94; letter-spacing: -.045em; font-weight: 750; }
.hero[aria-labelledby="hero-titolo"] h1 .rosso br { display: inline; }
.hero__zona { margin-top: 18px; font-size: clamp(17px, 4.5vw, 20px); line-height: 1.35; }
.hero__zona + .hero__sotto { margin-top: 8px; }
.hero__sotto { font-size: clamp(17px, 4.4vw, 20px); line-height: 1.45; font-weight: 400; letter-spacing: -.01em; max-width: 30em; }
.hero__piccolo { margin-top: 12px; font-size: 15px; line-height: 1.5; }
/* le pagine: un titolo solo, grande */
.hero:not([aria-labelledby="hero-titolo"]) h1 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.04; letter-spacing: -.038em; font-weight: 720; margin: 0 0 14px; }

/* da telefono e tablet: PRIMA la foto, chiara e intera, col rullo che dipinge sul suo bordo; POI il testo */
@media (max-width: 1023px) {
  .hero { display: block; padding-bottom: 0; }
  .hero__foto { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: var(--art); overflow: hidden; background: #E9E9E9; }
  .hero--pagina .hero__foto { height: auto; }
  .hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); }
  .hero:not(.hero--pagina) .hero__griglia { position: static; display: block; padding-top: 28px; padding-bottom: 40px; }
  .hero:not(.hero--pagina) .hero__testo { min-height: 0; padding: 0; max-width: 620px; }
  .hero:not(.hero--pagina) .hero__rullo {
    --rw: min(58vw, 420px);
    position: absolute; z-index: 2; left: -2vw; top: calc(100vw / var(--art) - var(--rw) * .54);
    width: var(--rw); height: auto; margin: 0;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18));
  }
  .hero:not(.hero--pagina) .hero__azioni, .hero__testo > .btn { margin-top: 24px; }
  .hero:not(.hero--pagina) .hero__azioni { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 420px; }
  .hero:not(.hero--pagina) .hero__azioni .btn, .hero__testo > .btn { min-height: 54px; width: 100%; max-width: 420px; }
  .hero:not(.hero--pagina) .hero__testo > .btn { display: flex; }
}
/* il rullo resta lontano dal bordo destro della foto (la finestra della stanza resta libera) */
@media (min-width: 560px) and (max-width: 1023px) { .hero:not(.hero--pagina) .hero__rullo { --rw: min(46vw, 420px); } }

/* da computer: la foto a destra, alla sua grandezza, nitida; il testo a sinistra; il rullo in basso a sinistra */
@media (min-width: 1024px) {
  .hero { position: relative; display: block; }
  .hero__foto, .hero--pagina .hero__foto {
    position: absolute; z-index: 0; top: auto; right: 0; left: auto; bottom: 0;
    height: min(100%, var(--hmax), calc(var(--wmax) / var(--ar) * 1.25));
    width: auto; aspect-ratio: var(--ar); max-width: var(--wmax);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 16%);
    mask-composite: intersect;
  }
  .hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); }
  .hero:not(.hero--pagina) .hero__griglia {
    --rw: clamp(330px, 28vw, 440px);
    position: relative; z-index: 1; display: block; min-height: 0;
    padding-top: clamp(40px, 4vw, 60px); padding-bottom: calc(var(--rw) * .5625 + 54px);
  }
  .hero:not(.hero--pagina) .hero__testo { max-width: min(600px, 46vw); min-height: 0; padding: 0; }
  .hero:not(.hero--pagina) .hero__rullo {
    position: absolute; z-index: 1; top: auto; left: calc(var(--margine) - 36px); bottom: 14px;
    width: var(--rw); height: auto; margin: 0;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .14));
  }
  .hero:not(.hero--pagina) .hero__azioni { margin-top: 30px; gap: 12px; }
  .hero:not(.hero--pagina) .hero__azioni .btn, .hero__testo > .btn { min-height: 56px; padding: 0 26px; font-size: 16.5px; }
  .hero__testo > .btn { margin-top: 30px; }
  .hero[aria-labelledby="hero-titolo"] h1 { font-size: clamp(28px, 2.7vw, 40px); }
  .hero[aria-labelledby="hero-titolo"] h1 .rosso { font-size: 2.05em; }
  .hero[aria-labelledby="hero-titolo"] .hero__griglia { padding-bottom: calc(var(--rw) * .5625 + 100px); }
  .hero[aria-labelledby="hero-titolo"] .hero__rullo { bottom: 58px; }
  .hero:not([aria-labelledby="hero-titolo"]) h1 { font-size: clamp(40px, 3.9vw, 58px); }
  .hero__sotto { font-size: clamp(18px, 1.4vw, 20px); }
}

/* ---------- Terzo giro · il resto delle sezioni (01/11/2026) ---------- */
/* il ritmo: un passo solo fra le sezioni, testo a 17 px */
.sezione { padding: var(--sez) 0; }
.testo-sezione, .territorio__testo p, .testa-sezione__lato { font-size: 17px; line-height: 1.6; }
.titolo-2 { line-height: 1.02; }
@media (min-width: 760px) { .testa-sezione { margin-bottom: 36px; } }

/* hero da telefono: il rullo più piccolo, appoggiato al bordo basso della foto, la stanza resta libera */
@media (max-width: 1023px) {
  .hero:not(.hero--pagina) .hero__rullo { --rw: min(40vw, 260px); left: -3vw; top: calc(100vw / var(--art) - var(--rw) * .42); }
}
/* chi siamo: il cartellino del logo appoggiato all'angolo della foto, mai sopra la parete */
.hero__griglia > img:not(.hero__rullo) {
  position: absolute; z-index: 3; margin: 0; width: 132px; padding: 12px 16px; border-radius: 12px;
  right: var(--margine-dx); top: calc(100vw / var(--art) - 58px);
}
@media (min-width: 1024px) {
  .hero__griglia > img:not(.hero__rullo) { top: auto; bottom: -34px; right: var(--margine-dx); width: clamp(170px, 14vw, 210px); padding: 16px 20px; }
  .hero:has(.hero__griglia > img:not(.hero__rullo)) { overflow: visible; }
  .hero:has(.hero__griglia > img:not(.hero__rullo)) + .sezione { padding-top: calc(var(--sez) + 20px); }
}

/* servizi della home: numeri in DM Serif, freccia in un cerchio; da telefono il pennello piccolo accanto al titolo */
.servizio__num { font-family: var(--serif); font-size: 22px; color: var(--numero); letter-spacing: -.01em; }
.servizi__elenco .servizio { grid-template-columns: 40px 30px minmax(0, 1fr) 22px; }
@media (max-width: 759px) {
  .servizi__pannello { min-height: 0; height: 156px; padding-top: 0; display: flex; align-items: center; }
  .servizi__pennello { width: 118px; right: var(--margine-dx); }
}
@media (min-width: 760px) {
  .servizi__elenco .servizio { grid-template-columns: 58px 44px minmax(0, 1fr) 30px; }
  .servizio__num { font-size: 30px; }
  .servizio__testo strong { font-size: clamp(20px, 1.7vw, 24px); }
}

/* prima e dopo: le due foto alla loro grandezza vera (566 × 439), mai stirate */
@media (min-width: 760px) {
  .confronto { width: min(100%, 566px); height: auto; aspect-ratio: 566 / 439; justify-self: start; }
  .persiane__corpo:has(> .confronto) { grid-template-columns: minmax(0, 566px) minmax(280px, 1fr); }
}
.etichetta { padding: 5px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; }
/* i passaggi del legno: foto del kit in riquadri bianchi, la freccia rossa fra uno e l'altro */
.passaggi__foto { border-radius: 10px; box-shadow: 0 1px 2px rgba(10, 15, 30, .05); }
.passaggi__foto img { object-fit: contain; }

/* come funziona: niente vuoto sotto i passi; la nota in alto a destra */
@media (min-width: 760px) {
  .metodo__dentro { min-height: 0; }
  .metodo__nota { box-shadow: var(--ombra-1); border: 1px solid var(--linea); }
  .passi { margin-top: 56px; }
  .passo__num { font-size: 72px; }
}

/* lavori: una foto grande e due accanto, tutte in 4:3; le verticali intere su un passe-partout chiaro */
.lavoro.verticale { background: #F1EFEC; }
.lavoro.verticale img { object-fit: contain; }
.lavoro figcaption { padding: 8px 12px; border-radius: 6px; box-shadow: var(--ombra-1); }
.lavoro figcaption strong { font-size: 13.5px; }
@media (min-width: 760px) {
  .galleria__griglia { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto; height: auto; }
  .lavoro.grande { aspect-ratio: 4 / 3; height: auto; }
  .galleria__griglia > div { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .lavoro.grande figcaption strong { font-size: 14.5px; }
  /* la galleria stretta delle pagine (accanto al testo): una foto alla volta, in 4:3, con le frecce */
  .galleria--una .galleria__griglia { display: block; }
  .galleria--una .lavoro:not(.grande) { display: none; }
}
/* da telefono: una striscia che scorre, ogni foto nel suo formato */
@media (max-width: 759px) {
  .galleria__griglia .lavoro, .foto-griglia:not(.foto-griglia--piccole) .lavoro {
    --h: min(248px, calc(86vw / (var(--ar, 1) * .8))); flex: 0 0 auto; height: var(--h); width: min(calc(var(--h) * var(--ar, 1)), 86vw);
  }
  .galleria__griglia .lavoro--invito { width: 78vw; }
  .lavoro.verticale { --h: 290px; }
}
/* le foto dei lavori nelle pagine: riquadri 4:3 */
@media (min-width: 760px) {
  .foto-griglia:not(.foto-griglia--piccole) .lavoro, .blocco .foto-griglia:not(.foto-griglia--piccole) .lavoro { height: auto; aspect-ratio: 4 / 3; }
}

/* fascia 20 anni, ufficio e colorificio: tre colonne uguali, il «20» più grande */
@media (min-width: 760px) {
  .esperienza__riga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .esperienza__numero { font-size: clamp(96px, 9vw, 136px); }
  .esperienza__campioni { width: clamp(96px, 8vw, 124px); }
}

/* social: la foto del cantiere in 5:4 */
.cantieri__foto img, .cantieri__foto img[src] { aspect-ratio: 5 / 4; object-position: 50% 40%; border-radius: 10px; box-shadow: var(--ombra-1); }
@media (min-width: 760px) {
  .cantieri__riga { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); padding-top: 64px; padding-bottom: 64px; }
}

/* domande a 17 px, il più e il meno rossi */
.domanda summary { font-size: 17px; min-height: 56px; }
.domanda p { font-size: 16px; line-height: 1.6; }

/* banda rossa: titolo più grande, numero a 44 px, pulsanti a 56 */
@media (min-width: 760px) {
  .banda__riga { padding-top: 80px; padding-bottom: 80px; }
  .banda h2 { font-size: clamp(52px, 5.4vw, 80px); }
  .banda__tel { font-size: 44px; }
  .banda__azioni .btn--bianco, .banda__due .btn { min-height: 56px; }
}

/* piede chiaro: il logo e i recapiti, il menu a destra, la riga legale sotto il filetto */
@media (min-width: 760px) { .piede { padding-top: 52px; } .piede__fondo { margin-top: 28px; padding-top: 22px; } }
@media (min-width: 760px) {
  /* la colonna delle due foto accanto prende l'altezza della grande (4:3), non quella delle sue foto */
  .galleria__griglia > .lavoro.grande { grid-row: 1; }
  .galleria__griglia > div { grid-row: 1; contain: size; }
}
/* la foto sola accanto al testo delle pagine: intera, nel suo formato */
.persiane__corpo > .lavoro { height: auto; background: none; }
.persiane__corpo > .lavoro img { width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 10px; }
@media (min-width: 760px) {
  /* colonne calcolate perché anche le due foto accanto siano 4:3: B = 2S + 16 */
  .galleria__griglia { grid-template-columns: minmax(0, 1fr) calc((100% - 28px) / 3); }
}
/* come funziona: la linea curva scende e passa dietro i tre numeri */
@media (min-width: 760px) {
  .metodo { overflow: clip; }
  .metodo__filo { left: -17%; width: 117%; top: 96px; height: 150px; }
  .passi { z-index: 1; }
  .passo__num { position: relative; }
}
/* hero delle pagine, da computer: la foto resta nella metà destra, il testo non le passa sopra */
@media (min-width: 1024px) {
  main > .hero.hero.hero:not([aria-labelledby="hero-titolo"]) { --wmax: 54vw; }
  .hero:not([aria-labelledby="hero-titolo"]) .hero__testo { max-width: min(560px, 42vw); }
}
/* porte e portoni: il legno grezzo del kit più piccolo, accanto al testo */
.kit-figura { width: min(100%, 300px); }
@media (min-width: 760px) { .kit-figura { width: min(100%, 340px); } }
/* porte e portoni: il legno grezzo del kit più piccolo, non più una foto gigante */
.persiane__corpo > .lavoro[aria-hidden="true"] { justify-self: center; width: min(100%, 300px); }
.persiane__corpo > .lavoro[aria-hidden="true"] img { border-radius: 16px; }
@media (min-width: 760px) { .persiane__corpo > .lavoro[aria-hidden="true"] { width: min(100%, 340px); align-self: center; } }
/* da telefono il prima e dopo nel formato delle due foto affiancate: nessuna delle due tagliata oltre il 25% */
@media (max-width: 759px) { .confronto { height: auto; aspect-ratio: 566 / 439; } }

/* 02/11/2026 · 2 Step, voce 2 (Katia): «di Guidotti Filippo» accanto al logo, nella fascia bianca */
.testata__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.testata__firma { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--testo);
  letter-spacing: .01em; white-space: nowrap; padding-left: 12px; border-left: 1px solid var(--linea); }
@media (max-width: 380px) { .testata__logo { gap: 6px; } .testata__firma { font-size: 11px; padding-left: 6px; } }
@media (min-width: 1080px) { .testata__cta { white-space: nowrap; } }
@media (min-width: 1080px) and (max-width: 1279px) {
  .testata__cta { padding: 0 14px; }
  .testata__menu ul { gap: 18px; }
  .testata__menu a { font-size: 14px; }
}
/* 02/11/2026 · con «di Guidotti Filippo» accanto al logo, il numero in testata torna solo da 1380 px (sotto c'è «Chiama» nella hero e il telefono nel menu) */
@media (min-width: 1280px) and (max-width: 1379px) { .testata__tel { display: none; } }
/* 02/11/2026 · audit 7-bis P11: sotto i 360 px «di Guidotti Filippo» accanto al logo faceva uscire la testata di 30 px
   (a 320 px «Menu» arrivava a 350): lì si nasconde; resta negli occhielli e nel piede */
@media (max-width: 359px) { .testata__firma { display: none; } .testata__logo { gap: 0; } }
/* 02/11/2026 · audit 7-bis del pannello, giro 2 (N4): una parola lunga nell'occhiello (o un indirizzo) va a capo dentro la
   parola, invece di far scorrere la pagina di lato */
.occhiello { overflow-wrap: anywhere; }
/* 02/11/2026 · audit 7-bis, giro 2 (N3, kit 1.9): sotto i recapiti dei Contatti le chiusure per ferie, «chiusi per un po'» e
   le altre stagioni della scheda «Orari e chiusure» (le chiusure le mostra /assets/thk/orari.js quando si avvicinano) */
.thk-orari-eccezioni { display: grid; gap: 8px; margin: 18px 0 0; }
.thk-orari-eccezioni p { margin: 0; padding: 12px 16px; border-left: 3px solid var(--rosso); border-radius: 4px; background: var(--pannello);
  font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--inchiostro); text-wrap: pretty; }
.thk-orari-eccezioni p[hidden] { display: none; }