/* components.css — aperture_studio. Le regole d'uso del colore stanno in tokens.css e QUI si rispettano:
   l'ambra piena non è mai testo su chiaro, l'ambra chiara mai testo su chiaro, l'ambra-testo mai su scuro,
   su un campo ambra il testo è --ink, e il focus è ribaltato su ogni superficie scura.
   ⚠ Il CSS si verifica nel DOM CALCOLATO, non «a lettura»: queste regole vanno riguardate sul sito vivo. */

/* ============================== BOTTONI ============================== */
/* Il primario è INCHIOSTRO su chiaro: l'ambra piena non regge il testo bianco (2,54) e su fondo chiaro non
   regge nemmeno come testo. L'ambra fa il bottone d'accento, e lì il testo è --ink (5,45). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
  padding: .78em 1.5em; border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper); text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--sm { font-size: var(--text-sm); padding: .6em 1.05em; }
/* Campo ambra: testo INCHIOSTRO, mai bianco. */
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-lt); border-color: var(--accent-lt); color: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
/* Variante per fondi SCURI: il contorno chiaro, e all'hover si riempie di chiaro con testo scuro. */
.btn--outline-light { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn--outline-light:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* ============================== INTESTAZIONE ============================== */
/* Fissa e «a vetro». ⚠ align-items:center + margin-block:0 sui figli: senza, logo, nav e CTA si disallineano
   verticalmente (regola 16) e la CTA finisce attaccata al bordo (regola 4). */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  padding-block: var(--space-4);
}
.site-header__row > * { align-self: center; margin-block: 0; }
/* fp-shrink: la testata si stringe allo scroll (reveal.js). Solo padding, mai altezza in salto. */
.site-header.is-shrunk { box-shadow: var(--shadow-sm); }
.site-header.is-shrunk .site-header__row { padding-block: var(--space-3); }

/* ⚠ `flex: 0 0 auto`: senza, con 8 voci di nav il marchio veniva COMPRESSO a larghezza 0 fra i 600 e i
   1100px — spariva del tutto, e nessun controllo di overflow poteva accorgersene perche' la pagina
   restava larga giusta. Il marchio non si comprime mai. */
.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.wordmark__mark { display: block; height: 40px; width: auto; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.01em; color: var(--ink); }
.wordmark__tag { font-size: .69rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); margin-top: 2px; }

/* La nav spinge la CTA a destra e le lascia aria.
   ⚠⚠ `flex-wrap: nowrap` sul contenitore del blocco navigation: il default di WP e' `wrap`, e con 8 voci
   la nav andava a capo su DUE righe a QUALUNQUE larghezza — anche a 1440, dove lo spazio bastava
   (logo 128 + nav 836 + cta 176 = 1140 dentro un contenitore da 1200). Non era un problema di spazio.
   Il gap e il corpo si stringono prima del punto di rottura, cosi' le voci restano su una riga sola
   finche' non subentra l'overlay. */
.site-nav { margin-left: auto; }
.site-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.site-nav a { font-weight: 500; color: var(--ink); white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1279.98px) {
  .site-nav { font-size: 0.94rem; }
  .site-nav .wp-block-navigation__container { gap: var(--space-4); }
}
.site-nav a:hover { color: var(--accent-ink); }
.site-header__cta { margin-left: var(--space-3); white-space: nowrap; }
.site-header__cta-lbl { display: none; }

@media (min-width: 1100px) { .site-header__cta-lbl { display: inline; } }
/* Sotto i 900 il numero in testata sparisce: c'è la barra fissa in fondo, e ripeterlo ruba la riga alla nav. */
@media (max-width: 899.98px) { .site-header__cta { display: none; } }

/* ⚠⚠ Il punto di rottura dell'overlay di `wp:navigation` e' FISSO a 600px: con 8 voci, fra i 600 e i 1100
   la nav distesa non ci sta e schiaccia il marchio. Qui l'overlay si ANTICIPA a 1100px — la nav distesa si
   nasconde e compare l'hamburger, che e' il comportamento che il blocco offre gia', solo prima. */
@media (max-width: 1099.98px) {
  .site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}

/* ⚠ Menu mobile: l'overlay del blocco wp:navigation va forzato a tutta altezza — il backdrop-filter
   dell'header lo confinerebbe all'altezza della testata (regola 15). */
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; background: var(--paper);
  /* ⚠ Il blocco WP non porta padding ORIZZONTALE: le voci arrivavano a filo del bordo e le piu' lunghe
     («Home», «Contatti») risultavano tagliate. Si dichiara su tutti e quattro i lati, con la safe-area
     per i telefoni con la tacca. */
  padding: 0;
}
/* ⚠⚠ Il padding va sull'elemento CONTENT, non sul contenitore: e' lui il flex che dispone le voci
   (`align-items:flex-end`), e sul contenitore la dichiarazione veniva sopraffatta da WP-core — misurato
   nel DOM calcolato, dove restava `0px` mentre le voci arrivavano a filo del bordo e si tagliavano. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  gap: var(--space-4);
  padding: var(--space-7) max(var(--space-5), env(safe-area-inset-right)) var(--space-6) max(var(--space-5), env(safe-area-inset-left));
  box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open a { font-family: var(--font-display); font-size: var(--text-lg); }
/* Il pulsante di chiusura: piu' grande, con un tratto pieno e un'area di tocco vera (44px, la soglia
   minima). ⚠ Il segno del blocco WP e' un SVG con `fill`: si ingrandisce lui, non un bordo attorno. */
.wp-block-navigation__responsive-container-close {
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ink); border-radius: 2px;
}
.wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.wp-block-navigation__responsive-container-close:hover { background: var(--surface-2); }
.wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================== L'APERTURA (segno del verticale) ============================== */
/* La fotografia sta INCASSATA dentro un telaio spesso, con un montante che la divide in due luci: legge
   come una finestra, non come un riquadro. È il dispositivo che regge anche con fotografie medie, perché
   il carattere lo dà il telaio — non la risoluzione dello scatto.
   ⚠ Il montante è decorativo: `aria-hidden` nel markup, e qui non intercetta il puntatore. */
.aperture {
  position: relative; background: var(--brand);
  border: var(--frame-w) solid var(--brand);
  box-shadow: var(--shadow-md);
}
.aperture__light { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); }
.aperture__light img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aperture--tall .aperture__light { aspect-ratio: 3 / 4; }
.aperture__mullion {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: var(--frame-w); margin-left: calc(var(--frame-w) / -2);
  background: var(--brand); pointer-events: none;
}
/* Variante SENZA fotografia: la luce è luce vera (un gradiente di cielo), non una foto finta.
   È il fallback design-only della testata — mai un placeholder grigio, mai uno scatto inventato. */
.aperture__light--sky {
  background: linear-gradient(168deg, var(--accent-tint) 0%, var(--paper) 46%, var(--surface) 100%);
}
.aperture--empty { box-shadow: none; }

/* ============================== TESTATA ============================== */
/* Banda ANTRACITE: la copy sta su un CAMPO PIENO accanto alla fotografia, mai sopra di essa — così il
   contrasto del titolo è strutturale e non dipende dal fotogramma (che qui è spesso mediocre). */
.hero { background: var(--brand); color: var(--on-dark); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero__grid {
  width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto;
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center;
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1fr 1fr; } }
.hero__panel { max-width: 34rem; }
.hero__panel h1 { color: var(--on-dark); }
.hero__lead { font-size: var(--text-md); line-height: 1.56; color: var(--on-dark-muted); max-width: 40ch; margin-top: var(--space-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ============================== TESTATA DI PAGINA ============================== */
.page-head { background: var(--brand); color: var(--on-dark); padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.page-head h1 { color: var(--on-dark); max-width: 22ch; }

/* ============================== INTRO DI SEZIONE ============================== */
.section-intro { max-width: 46rem; margin-bottom: var(--space-7); }
.section--dark .section-intro h2 { color: var(--on-dark); }

/* ============================== MANIFESTO ============================== */
.manifesto__grid { display: grid; gap: clamp(1.75rem, 1rem + 3.4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .manifesto__grid { grid-template-columns: 1.15fr .85fr; } }
/* ⚠ La misura di lettura sta sul PARAGRAFO, non sul contenitore: in `ch` si calcola sul font del CORPO e
   strozzerebbe il display. */
.manifesto__body { max-width: 60ch; color: var(--ink-muted); }
.manifesto__where { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--ink-muted); }
.manifesto__where-lbl {
  font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent-ink); margin-right: var(--space-2);
}

/* ============================== MOSAICO DELLE FAMIGLIE ============================== */
/* Tessere che ALTERNANO fotografia e campo pieno: la forma regge anche se metà delle foto manca, che in
   questo mestiere è la norma. ⚠ Le tessere linkano DIRITTO alla pagina di destinazione (regola 12). */
.mosaic { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }

.tile {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); min-height: 15rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tile__media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--surface-2); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
/* ⚠⚠ Prodotti SCONTORNATI su fondo bianco (i render di capitolato dei sistemi, spesso col wordmark del
   fabbricante impresso nel pixel): `cover` li taglierebbe, portando via il prodotto e la didascalia. Qui la
   resa e' `contain` su un fondo di marca, e il riquadro respira. Il caso si riconosce dalla percentuale di
   bordo bianco (oltre il 25% = scontornato), non a occhio. */
.tile__media--contain { background: var(--paper); aspect-ratio: 4 / 3; }
.tile__media--contain img { object-fit: contain; padding: var(--space-4); }
/* Il mosaico dei sistemi e' fitto: sono schede prodotto, non fotografie d'ambiente. */
.mosaic--sistemi { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .mosaic--sistemi { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mosaic--sistemi { grid-template-columns: repeat(5, 1fr); } }
.mosaic--sistemi .tile { min-height: 0; }
.tile__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1 0 auto; }
.tile__text { color: var(--ink-muted); font-size: .97rem; }
/* Campo AMBRA-TINT: tessera senza foto che tiene la griglia piena senza inventare uno scatto. */
.tile--field { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.tile--field .tile__text { color: var(--ink-muted); }
/* Campo ANTRACITE: il contrappunto scuro nel mosaico. */
.tile--dark { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
.tile--dark h3 { color: var(--on-dark); }
.tile--dark .tile__text { color: var(--on-dark-muted); }
.tile--dark .tile__icon { background-color: var(--accent-lt); }

/* Icona di famiglia: MASCHERA CSS, così il colore lo decide il token e non il file.
   ⚠ url() qui si risolve rispetto al FOGLIO (../assets/...): una maschera in uno style inline dentro il
   post_content NON risolverebbe, perché nel DB il PHP non gira. */
.tile__icon { display: block; width: 30px; height: 30px; background-color: var(--accent-ink); margin-bottom: var(--space-1); }
[data-icon="serramenti"] .tile__icon { -webkit-mask: url("../assets/img/icons/serramenti.svg") no-repeat center / contain; mask: url("../assets/img/icons/serramenti.svg") no-repeat center / contain; }
[data-icon="porte"] .tile__icon { -webkit-mask: url("../assets/img/icons/porte.svg") no-repeat center / contain; mask: url("../assets/img/icons/porte.svg") no-repeat center / contain; }
[data-icon="zanzariere"] .tile__icon { -webkit-mask: url("../assets/img/icons/zanzariere.svg") no-repeat center / contain; mask: url("../assets/img/icons/zanzariere.svg") no-repeat center / contain; }
[data-icon="pergoltende"] .tile__icon { -webkit-mask: url("../assets/img/icons/pergoltende.svg") no-repeat center / contain; mask: url("../assets/img/icons/pergoltende.svg") no-repeat center / contain; }
[data-icon="vetrate"] .tile__icon { -webkit-mask: url("../assets/img/icons/vetrate.svg") no-repeat center / contain; mask: url("../assets/img/icons/vetrate.svg") no-repeat center / contain; }
[data-icon="tende"] .tile__icon { -webkit-mask: url("../assets/img/icons/tende.svg") no-repeat center / contain; mask: url("../assets/img/icons/tende.svg") no-repeat center / contain; }

/* Link che copre la tessera: il testo resta accessibile al lettore di schermo, il riquadro è cliccabile
   tutto. ⚠ Il testo del link NON è vuoto: un link senza nome accessibile è una violazione axe. */
.tile__link { position: absolute; inset: 0; }
.tile__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tile__link:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tile--dark .tile__link:focus-visible { outline-color: var(--accent-lt); }

/* ============================== METODO (4 passi su antracite) ============================== */
.steps { display: grid; gap: var(--space-6); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--space-5); border-top: 2px solid var(--brand-mid); }
.step h3 { color: var(--on-dark); margin-top: var(--space-2); }
.step__text { color: var(--on-dark-muted); font-size: .97rem; margin-top: var(--space-2); }
/* Il numerale è il solo momento in cui l'ambra chiara fa da display: su antracite fa 6,06, quindi passa. */
.step__n {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 2rem; line-height: 1; color: var(--accent-lt);
}

/* ============================== FIDUCIA ============================== */
.claims { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .claims { grid-template-columns: repeat(3, 1fr); } }
.claim { padding-left: var(--space-5); border-left: 3px solid var(--accent); }
.claim__text { color: var(--ink-muted); font-size: .97rem; margin-top: var(--space-2); }

/* ============================== SCHEDE TECNICHE (dispositivo firma) ============================== */
/* Il contenuto più ricco di questo mestiere sono le specifiche. Restano SEMPRE VISIBILI (niente accordion:
   nascondere il contenuto migliore è un autogol, anche per la ricerca) e vivono in IBM Plex, che è nato per
   la documentazione tecnica. Le cifre sono TABELLARI: incolonnate, i millimetri si confrontano a occhio. */
.sysblock {
  display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); align-items: start;
  padding-block: var(--space-7); border-top: 1px solid var(--line);
}
.sysblock:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .sysblock { grid-template-columns: 1.1fr .9fr; } }
.sysblock__lead { color: var(--ink-muted); max-width: 58ch; margin-top: var(--space-3); }

.spec { background: var(--surface); border-left: 3px solid var(--accent); padding: var(--space-5); }
.spec__h {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: var(--space-4);
}
.spec__list { margin: 0; }
.spec__row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3); border-top: 1px solid var(--line);
  font-size: var(--text-spec);
}
.spec__row:first-child { border-top: 0; padding-top: 0; }
.spec__row dt { color: var(--ink-muted); }
.spec__row dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================== FASCIA CONTATTI ============================== */
.cta-band { background: var(--accent-tint); padding-block: var(--section-y); }
.cta-band__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .cta-band__grid { grid-template-columns: 1.1fr .9fr; } }
.cta-band__tel {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.1;
  color: var(--accent-dark); letter-spacing: -0.02em;
}
.cta-band__tel:hover { color: var(--ink); }
.cta-band__note { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-2); }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* ============================== PAGINA CONTATTI ============================== */
.contatti__grid { display: grid; gap: clamp(1.75rem, 1rem + 3.4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .contatti__grid { grid-template-columns: 1fr 1fr; } }
.contatti__h2 { margin-top: var(--space-7); }
.contact-dl { margin: var(--space-5) 0; }
.contact-dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.contact-dl > div:first-child { border-top: 0; }
.contact-dl dt { font-weight: 600; color: var(--ink-muted); font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; }
.contact-dl dd { margin: 0; }
.contact-dl a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.hours { margin: var(--space-4) 0; max-width: 26rem; }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent); font-size: var(--text-spec); }
.hours li:first-child { border-top: 0; }
.hours--light li { border-color: var(--line); }

.checks { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.checks li { position: relative; padding-left: var(--space-6); color: var(--ink-muted); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 14px; height: 2px; background: var(--accent);
}

/* Modulo: statico nel verticale, sostituito dal form first-party sui siti reali.
   ⚠ Deve essere un <form> VERO (method/action/novalidate): campi nudi senza <form> fanno fallire l'auditor. */
.contatti__col--form { background: var(--surface); padding: clamp(1.25rem, .9rem + 1.6vw, 2rem); border-top: 3px solid var(--accent); }
.fp-form { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.fp-form__row { display: grid; gap: var(--space-2); }
.fp-form label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); }
.fp-form input[type="text"], .fp-form input[type="email"], .fp-form input[type="tel"], .fp-form textarea {
  font: inherit; font-size: var(--text-base); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .7em .85em; width: 100%;
}
.fp-form input:focus-visible, .fp-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent-ink); }
.fp-form__row--check label { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 400; color: var(--ink-muted); font-size: .9rem; }
.fp-form__row--check input { margin-top: .28em; flex: 0 0 auto; }

/* ============================== PAGINA LEGALE ============================== */
.legal h2 { margin-top: var(--space-7); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin-top: var(--space-3); color: var(--ink-muted); }

/* ============================== PIÈ DI PAGINA ============================== */
.site-footer { background: var(--brand-dark); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); margin-top: auto; }
.site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer__name { font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; color: var(--on-dark); }
.site-footer__cat { color: var(--on-dark-muted); font-size: var(--text-sm); margin-top: var(--space-2); max-width: 30ch; }
.site-footer__h { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); margin-bottom: var(--space-4); }
.site-footer__addr, .site-footer__mail { color: var(--on-dark-muted); font-size: .97rem; }
.site-footer__mail a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__mail a:hover { color: var(--on-dark); }
/* Il telefono grande in accento è il dispositivo di footer della categoria: chi cerca un serramentista
   vuole il numero, e lo vuole senza cercarlo. Ambra chiara su antracite profondo = 8,03. */
.site-footer__tel { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--accent-lt); letter-spacing: -0.01em; }
.site-footer__tel:hover { color: var(--on-dark); }
.site-footer .btn--outline { color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 42%, transparent); margin-top: var(--space-3); }
.site-footer .btn--outline:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  font-size: var(--text-sm); color: var(--on-dark-muted);
}
.site-footer__legal-links a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal-links a:hover { color: var(--on-dark); }
.powered { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; color: var(--on-dark-muted); }
/* ⚠ Il marchio Dgitaly è QUADRATO e senza scritta: 20×20 e non si deforma mai. */
.powered img { width: 20px; height: 20px; display: block; }
.powered:hover { color: var(--on-dark); }

.social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social__link { display: inline-flex; padding: var(--space-2); border: 1px solid color-mix(in srgb, var(--on-dark) 28%, transparent); }
.social__link:hover { border-color: var(--accent-lt); }
.social__ico { display: block; width: 18px; height: 18px; background-color: var(--on-dark-muted); }
.social__link:hover .social__ico { background-color: var(--accent-lt); }
[data-social="facebook"] { -webkit-mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; }
[data-social="instagram"] { -webkit-mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; }

/* ============================== BARRA CTA MOBILE ============================== */
/* Sul telefono l'azione è chiamare: la barra resta in fondo e non copre mai l'ultimo contenuto
   (il padding di compenso lo mette il body). */
.cta-bar { display: none; }
@media (max-width: 899.98px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--on-dark) 20%, transparent);
    border-top: 1px solid var(--brand-mid);
  }
  .cta-bar a {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-4) var(--space-3); background: var(--brand); color: var(--on-dark);
    font-weight: 600; font-size: .97rem;
  }
  .cta-bar a.is-accent { background: var(--accent); color: var(--ink); }
  body { padding-bottom: 4rem; }
}

/* ── Blocco prodotto: testo, FIGURA e scheda tecnica che si INCASTRANO ──────────────────────────────
   Prima erano due colonne affiancate: sotto la descrizione restava un vuoto alto mezzo schermo, e
   spostando la figura li' il vuoto si spostava soltanto dall'altra parte (sotto la scheda). Qui la
   fotografia prende quasi tutta la larghezza e la scheda tecnica le SCAVALCA un angolo: le due cose si
   tengono invece di stare accanto, e non resta nessun rettangolo vuoto da nessuna delle due parti.
   ⚠ Il verso si alterna col blocco, cosi' l'alternanza si legge dalla seconda riga e non sembra un caso.
   ⚠ Sotto i 900px si impila: a una colonna una scheda sovrapposta coprirebbe la foto invece di incastrarsi. */
.sysblock__media { margin: 0; overflow: hidden; border-radius: 2px; background: var(--surface-2); }
.sysblock__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ⚠ I render dei profili sono SCONTORNATI su bianco: `contain` su una superficie di PAGINA (non bianca),
   sennò il riquadro legge come un buco chiaro dentro una pagina crema. */
/* ⚠ Il render scontornato porta il PROPRIO fondo bianco: su una superficie crema si vedeva un rettangolo
   bianco dentro un riquadro beige — un riquadro dentro l'altro. La superficie della figura diventa quella
   del render, e un filo di bordo la definisce senza incorniciarla due volte. */
.sysblock__media--contain { background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.sysblock__media--contain img { object-fit: contain; padding: var(--space-4); }
@media (min-width: 900px) {
  .sysblock { position: relative; grid-template-columns: 1fr; row-gap: var(--space-4); }
  .sysblock__txt { max-width: 64ch; }
  .sysblock__media { width: min(76%, 860px); aspect-ratio: 16 / 10; margin-top: var(--space-3); }
  .sysblock .spec {
    position: absolute; right: 0; bottom: var(--space-6); width: min(400px, 36%); z-index: 2;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
  }
  .sysblock--flip .sysblock__media { margin-left: auto; }
  .sysblock--flip .spec { right: auto; left: 0; }
  /* Senza figura il blocco torna a due colonne: la scheda non ha nulla da scavalcare. */
  .sysblock:not(:has(.sysblock__media)) { grid-template-columns: 1.1fr .9fr; }
  .sysblock:not(:has(.sysblock__media)) .spec { position: static; width: auto; box-shadow: none; }
}

/* ── Montaggio verticale che SCAVALCA la banda ──────────────────────────────────────────────────────
   Una fotografia alta esce dal bordo inferiore della fascia scura e appoggia sulla sezione chiara che
   segue: e' il device che tiene insieme due bande invece di lasciarle impilate, e da' alla pagina la
   verticalita' che un impaginato tutto orizzontale non ha.
   ⚠ Vive SOLO da 1100px in su: sotto, a una colonna, una foto che sborda legge come un errore di
   impaginazione, non come una scelta. E la banda non deve tagliarla, quindi niente overflow nascosto. */
.metodo { position: relative; overflow: visible; }
.montaggio { display: none; }
@media (min-width: 1100px) {
  .metodo .container { position: relative; }
  .montaggio {
    display: block; position: absolute; right: calc(var(--space-6) * -1); bottom: calc(var(--space-8) * -1);
    width: min(300px, 24vw); aspect-ratio: 760 / 1170; margin: 0; z-index: 2;
    box-shadow: var(--shadow-lg, 0 18px 48px rgba(0,0,0,.28));
  }
  .montaggio img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* il telaio sottile lo lega al linguaggio del verticale (l'apertura) senza ripeterne il montante */
  .montaggio::after { content: ""; position: absolute; inset: 0; border: 6px solid var(--paper); pointer-events: none; }
}

/* ── L'apertura alta ESCE dalla colonna ─────────────────────────────────────────────────────────────
   La figura verticale stava dentro la sua metà come un riquadro allineato. Sporgendo verso il margine
   della pagina prende la verticalità che l'impaginato orizzontale non ha, e lega la sezione a quella
   che segue invece di chiudersi dentro la griglia.
   ⚠ Solo da 1100px: sotto, a una colonna, una figura che sborda legge come un errore. E solo dove la
   sezione non nasconde l'eccedenza, sennò verrebbe tagliata invece che sporgere. */
@media (min-width: 1100px) {
  .manifesto, .section:has(.aperture--tall) { overflow: visible; }
  .aperture--tall { position: relative; }
  .aperture--tall .aperture__light { transform: translateZ(0); }
  .manifesto .aperture--tall { margin-right: calc(var(--space-7) * -1); }
  .section--tint .aperture--tall, .section:not(.manifesto) .aperture--tall { margin-right: calc(var(--space-6) * -1); }
}

/* ── Contatti: la vetrina prima dei dati ────────────────────────────────────────────────────────────
   La pagina era due colonne di testo su fondo vuoto. La fotografia della vetrata dello showroom apre la
   pagina e la lega al luogo: chi cerca «dove siamo» riconosce il posto prima di leggere l'indirizzo.
   ⚠ La fotografia sporge verso il margine come le altre del sito, cosi' il device resta uno solo. */
.contatti__vetrina { display: grid; gap: var(--space-5); align-items: center; }
.contatti__vetrina-media { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-2); }
.contatti__vetrina-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .contatti__vetrina { grid-template-columns: 1.15fr .85fr; gap: var(--space-7); }
  .contatti__vetrina-media { margin-left: calc(var(--space-6) * -1); aspect-ratio: 3 / 2; }
}