/* components.css — aspiration_systems. Registro «acciaio e aria»: campo grafite, un solo teal,
   carta bianca. Struttura del riferimento del cliente (hero + bande larghe + banda CTA + piè),
   device della categoria «Aziende» dove le fotografie non reggono (hero split, mosaico di tessere).
   ⚠ Nessun colore letterale: solo token di tokens.css. */

/* ============================================================ CROMO ============================ */

/* Testata STATICA (non sticky): la barra alta dei recapiti più la testata, fissate, mangerebbero un
   quinto di uno schermo da 390px. Il campo pieno grafite è il device «barra istituzionale». */
.site-header { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }

.topbar { background: var(--brand-dark); color: var(--on-dark); }
.topbar__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 40px; font-size: var(--text-sm);
}
.topbar__claim { color: var(--on-dark); }
.topbar__claim a { color: var(--on-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.topbar__luogo { color: var(--on-dark-muted); letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 0.72rem; }
@media (max-width: 640px) { .topbar__luogo { display: none; } .topbar__row { justify-content: center; } }

/* Altezza FISSATA, non dedotta dalle metriche del font: cambiare il marchio di 0,2rem sposterebbe
   tutto il cromo. */
.site-header__row { display: flex; align-items: center; gap: var(--space-5); min-height: 76px; }
/* ⚠ nav e CTA portano un margine di blocco da WP che li spinge sotto il centro. */
.site-header__row > * { align-self: center; margin-block: 0; }

/* Il marchio è TIPOGRAFICO: il cliente non ha un logo, né nel materiale né sul suo sito attuale.
   L'anello che lo precede è il segno del verticale — la presa aspirante — e non costa una fotografia. */
.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); flex: none; }
.wordmark__mark {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 4px solid var(--accent); background: var(--paper);
}
.wordmark__txt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
}
/* ⚠⚠ DUE `margin-left:auto` (uno sulla nav, uno sulla CTA) SPARTISCONO lo spazio: la nav finiva in
   mezzo alla testata, lontana dalla CTA. Ne resta uno solo, sulla nav: nav e CTA diventano un gruppo
   unico allineato a destra, separato dal marchio. */
.site-nav { margin-left: auto; }
.site-header__cta { margin-left: var(--space-7); flex: none; }

/* ⚠⚠ SPECIFICITÀ — difetto già pagato su specialist_practice, cobbler_workshop e local_installer:
   WP dichiara `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){background-color:#fff}`
   = (0,4,0), e il CSS dei blocchi è iniettato DOPO il tema: una regola piatta qui pesa (0,2,0) e
   PERDE, lasciando l'overlay BIANCO con sopra il testo chiaro = menu invisibile. Si vince solo
   ricopiando lo schema di selettore di WP. Il colore è dichiarato anche nel blocco
   (overlayBackgroundColor/overlayTextColor): due difese, perché una sola è caduta troppe volte. */
.site-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; overflow-y: auto; background: var(--brand-dark); color: var(--on-dark);
}
/* ⚠⚠ La nav desktop è `justifyContent:right`: WP porta quel flex-end anche DENTRO l'overlay, sul
   `__responsive-container-content` largo quanto il viewport ⇒ le voci finiscono incollate al bordo.
   Il rimedio è `align-items: stretch`, NON `flex-start`: quei contenitori sono flex in COLONNA,
   quindi `align-items` governa l'ASSE ORIZZONTALE — con `flex-start` la lista si stringe sul testo
   e i filetti sotto le voci escono di lunghezze diverse, una per parola. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch; justify-content: flex-start; text-align: left;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%; padding: 5.4rem var(--gutter) 6rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; justify-content: flex-start; text-align: left; }
/* ⚠ Il colore si dichiara sul CONTENUTO della voce, non su `.site-nav a`: quel selettore perde
   contro WP a pari specificità (difetto Sicurmed: menu grafite su grafite). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block; width: 100%; text-align: left; color: var(--on-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.01em;
  padding: 0.85rem 0; border-bottom: 1px solid rgba(243, 247, 248, 0.18);
}
/* Il bottone di chiusura: WP ne dà 24px NUDI nell'angolo, senza area di tocco. Qui prende un'area
   vera (26px di segno + 0.75rem di respiro ≈ 48px, sopra il minimo tattile). */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 1rem; right: calc(var(--gutter) - 0.75rem); padding: 0.75rem; color: var(--on-dark);
  transition: background var(--dur) var(--ease);
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
  background: rgba(243, 247, 248, 0.14);
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
/* L'hamburger sul fondo chiaro della testata. */
.site-nav .wp-block-navigation__responsive-container-open { color: var(--ink); padding: 0.5rem; }
.site-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* ============================================================ TESTATA MOBILE ================== */
/* ⚠⚠ SPECIFICITÀ, di nuovo e in casa mia: `.site-header__cta{display:none}` dentro la media query
   pesa (0,1,0) esattamente come `.btn{display:inline-flex}` — e `.btn` sta PIÙ IN BASSO nel foglio,
   quindi vinceva. Il pulsante restava visibile e si SOVRAPPONEVA all'hamburger (misurato a 390px:
   CTA 251–366, hamburger 322–366). Non basta dichiarare: bisogna vincere. */
@media (max-width: 900px) {
  .site-header .site-header__cta.btn { display: none; }
  /* l'hamburger va a filo del margine destro: la nav è già `margin-left:auto`, qui si toglie il
     padding che lo teneva staccato dal bordo */
  .site-nav .wp-block-navigation__responsive-container-open { padding: 0.5rem 0 0.5rem 0.5rem; }
}

/* ⭐ A MENU APERTO il pulsante CHIAMA torna, in fondo allo schermo: chi apre il menu di un impiantista
   sta cercando come raggiungerlo, e il numero non deve stare dietro l'overlay. WP marca `<html>` con
   `has-modal-open` e l'overlay è `position:fixed; z-index:100000` ⇒ il pulsante si porta sopra con
   101, fuori dal flusso della testata (che non crea contesto di impilamento: nessun z-index, nessuna
   transform). ⚠ `!important` sul display perché deve battere il `display:none` qui sopra, che è la
   regola più specifica del blocco mobile. */
@media (max-width: 900px) {
  html.has-modal-open .site-header .site-header__cta.btn {
    display: inline-flex !important;
    position: fixed; z-index: 100001;
    left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    margin: 0; min-height: 52px; font-size: 1rem;
    background: var(--accent); color: var(--ink-fixed); border-color: var(--accent);
  }
}
/* Nav desktop */
.site-nav .wp-block-navigation-item__content {
  font-weight: 500; font-size: 0.95rem; color: var(--ink);
  padding-block: 0.4rem; border-bottom: 2px solid transparent;
}
.site-nav .wp-block-navigation-item__content:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ============================================================ BOTTONI ========================== */
/* ⚠ Raggio ZERO: il riferimento del cliente e tutta la categoria «Aziende» hanno lo spigolo vivo. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  padding: 0.85rem 1.5rem; border: 2px solid transparent; border-radius: var(--radius);
  min-height: 48px; text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--sm { padding: 0.55rem 1rem; min-height: 40px; font-size: 0.88rem; }
/* ⚠⚠ Sull'accento si scrive INK (4.81), MAI bianco (3.72, sotto AA). È il difetto del template
   originale, ed è la regola d'uso vincolante di tokens.css. */
.btn--accent { background: var(--accent); color: var(--ink-fixed); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-ink); color: var(--paper); border-color: var(--accent-ink); }
/* ⚠ Dentro una banda scura `--ink` è rimappato su --on-dark: senza --ink-fixed il testo del bottone
   uscirebbe CHIARO sul proprio fondo accento (misurato 3,44). */
.band--dark .btn--accent { color: var(--ink-fixed); }
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-ink); color: var(--paper); }
.btn--ghost-on-dark { background: transparent; color: var(--on-dark); border-color: var(--on-dark-muted); }
.btn--ghost-on-dark:hover { background: var(--on-dark); color: var(--brand-dark); border-color: var(--on-dark); }

/* ============================================================ BANDE ============================ */
.band--dark { background: var(--brand-dark); color: var(--on-dark); }
/* ⚠ La banda scura RIDICHIARA i propri alias: senza, i figli ereditano --fg del body e spariscono. */
.band--dark { --fg: var(--on-dark); --ink: var(--on-dark); --ink-muted: var(--on-dark-muted); --line: rgba(243,247,248,.18); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--on-dark); }
.band--dark a { color: var(--on-dark); }

.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: var(--space-3);
}
.band--dark .eyebrow { color: var(--accent-on-dark); }
.lead { font-size: var(--text-md); color: var(--ink-muted); }

.page-head { background: var(--surface); padding-block: clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--text-2xl); }

/* ============================================================ HERO SPLIT ======================= */
.hero { padding-block: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); }
/* ⚠⚠ MISURATO: con `align-items: center` e una colonna fotografica ad aspect-ratio fisso, l'altezza
   della testata la detta la FOTO, non il contenuto. Con un ritratto 2:3 in una colonna da 544px la
   foto veniva 816px contro 365px di testo: 452px di aria morta, il 55% della colonna. Il contenuto
   del cliente è corto per natura (un titolo e la riga del luogo), quindi il difetto non si risolve
   allungando il testo — si risolve facendo ADATTARE la foto alla riga, con un minimo perché non
   diventi una fascia. `stretch` + `height:100%` = zero aria morta per costruzione. */
.hero__griglia { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(1.8rem, 1rem + 3vw, 3.6rem); align-items: stretch; }
.hero__testo { align-self: center; }
.hero__testo > * + * { margin-top: var(--space-5); }
.hero h1 { font-size: var(--text-3xl); }
.hero__lead { font-size: var(--text-md); color: var(--ink-muted); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* ⭐ Il RITRATTO 2:3 è nativo qui: la colonna è alta e stretta, e la fotografia non viene sventrata
   come farebbe una fascia a piena larghezza. */
/* ⚠ `height:100%` da solo NON basta: l'immagine in FLUSSO impone la propria altezza intrinseca alla
   riga (misurato: 780px con una colonna da 520px), e la griglia torna a essere dettata dalla foto.
   L'immagine va tolta dal flusso — solo così la riga la decide il contenitore. */
.hero__foto { margin: 0; position: relative; height: 100%; min-height: clamp(380px, 32vw, 560px); overflow: hidden; background: var(--surface); }
.hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Variante design-only: campo pieno col segno del verticale. */
.hero__campo { height: 100%; min-height: clamp(340px, 30vw, 480px); background: var(--grad-brand); display: grid; place-items: center; }
.hero__anelli { width: 58%; aspect-ratio: 1; border-radius: 50%; border: 10px solid var(--accent); box-shadow: 0 0 0 26px rgba(26,147,149,.22), inset 0 0 0 26px rgba(26,147,149,.22); }
@media (max-width: 860px) {
  .hero__griglia { grid-template-columns: 1fr; }
  .hero__foto, .hero__campo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .hero__foto img { position: absolute; }
}

/* ============================================================ MANIFESTO ======================== */
/* Stessa regola del manifesto: la foto segue il testo, non viceversa (misurati 276px di aria morta). */
.manifesto__griglia { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(1.8rem, 1rem + 3vw, 3.4rem); align-items: stretch; }
.manifesto__testo { align-self: center; }
.manifesto__testo > * + * { margin-top: var(--space-4); }
.manifesto h2 { font-size: var(--text-2xl); }
.manifesto__lead { font-size: var(--text-md); color: var(--ink); font-weight: 500; }
.manifesto__foto { margin: 0; position: relative; height: 100%; min-height: clamp(360px, 30vw, 520px); overflow: hidden; background: var(--paper); }
.manifesto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .manifesto__griglia { grid-template-columns: 1fr; }
  .manifesto__foto { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* ============================================================ PASSI ============================ */
/* ⚠ I due blocchi sono PROSA LUNGA (874 e 971 caratteri nel testo reale). Non si spezzettano in
   tessere senza riscriverli, e riscrivere è vietato: il numero dà gerarchia a parole invariate.
   La misura di lettura sta sul paragrafo (.prosa > p), qui rilasciata a piena larghezza della
   colonna perché la colonna È già la misura giusta. */
.passi__intro { margin-bottom: var(--space-8); }
.passi__intro h2 { font-size: var(--text-2xl); }
.passi__lead { margin-top: var(--space-4); font-size: var(--text-md); color: var(--ink-muted); }
.passi__lista { display: grid; gap: var(--space-6); }
/* ⚠⚠ MISURATO: col numero AFFIANCATO al testo (`grid-template-columns: auto 1fr`) i due blocchi più
   lunghi del sito — 859 e 948 caratteri — rendevano a 445px e 434px, cioè ~51 caratteri per riga,
   dentro un contenitore da 1240px. È la regola «niente spazi vuoti» rovesciata: non è bianco a
   destra, è testo strozzato a sinistra, e capita proprio al contenuto che il cliente ha scritto più
   lungo. Il numero passa SOPRA il titolo e la prosa prende tutta la colonna: ~71 caratteri per riga,
   che è la misura di lettura giusta senza lasciare campo morto. */
.passo { display: block; padding: var(--space-5) var(--space-6) var(--space-6); background: var(--surface); border-left: 4px solid var(--accent); }
.passo__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; color: var(--accent-ink); margin-bottom: var(--space-3); }
.passo__corpo h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
@media (min-width: 900px) { .passi__lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .passo { padding: var(--space-5); } }

/* ============================================================ RICHIAMO ========================= */
.richiamo__row { display: grid; grid-template-columns: 1.4fr auto; gap: clamp(1.4rem, 1rem + 2vw, 3rem); align-items: center; }
.richiamo h2 { font-size: var(--text-xl); }
.richiamo__lead { margin-top: var(--space-3); color: var(--on-dark-muted); }
.richiamo__azioni { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 780px) { .richiamo__row { grid-template-columns: 1fr; } }

/* ============================================================ MOSAICO ========================== */
/* ⭐ Tessere piene di colore alternate a ritagli di fotografia: nessuna tessera regge da sola, ed è
   ciò che rende sostenibile un archivio di POCHE fotografie. Le celle foto sono in RITRATTO. */
.elementi__apertura { margin-bottom: var(--space-8); }
.mosaico { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--grid-gap); }
.mosaico__cella { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; padding: var(--space-6); min-height: 260px; }
.mosaico__cella h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.mosaico__cella--testo { background: var(--surface); }
.mosaico__cella--pieno { background: var(--brand-dark); color: var(--on-dark); --ink: var(--on-dark); --ink-muted: var(--on-dark-muted); }
.mosaico__cella--pieno h3 { color: var(--on-dark); }
.mosaico__cella--foto { padding: 0; margin: 0; aspect-ratio: var(--tile-portrait); min-height: 0; background: var(--surface); overflow: hidden; }
.mosaico__cella--foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .mosaico { grid-template-columns: repeat(2, 1fr); } .mosaico__cella { grid-column: span 1; } }
@media (max-width: 560px) { .mosaico { grid-template-columns: 1fr; } }

/* ============================================================ VANTAGGI ========================= */
.vantaggi__intro { margin-bottom: var(--space-7); }
.vantaggi__intro h2 { font-size: var(--text-2xl); }
.vantaggi__lead { margin-top: var(--space-4); font-size: var(--text-md); color: var(--ink-muted); }
.vantaggi__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.vantaggio { background: var(--paper); padding: var(--space-6); border-top: 4px solid var(--accent); }
.vantaggio h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.vantaggi__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }
@media (max-width: 900px) { .vantaggi__lista { grid-template-columns: 1fr; } }

/* ============================================================ CONTATTI ========================= */
/* ⚠ La misura di lettura NON va sul wrapper: `.prosa > p` la porta già, e metterla anche qui la
   duplicherebbe su un elemento di LAYOUT — è l'errore che incolonna tutto a sinistra. */
.recapiti__apertura { margin-bottom: var(--space-7); }
/* Due colonne (regola 19): modulo a sinistra, scheda dei recapiti a destra. */
.recapiti__cols { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.6rem, 1rem + 2.6vw, 3rem); align-items: start; }
/* ⚠ Il titolo passa da riga PIENA a COLONNA ⇒ scende di un gradino: --text-2xl (45px su riga piena)
   dentro 576px andrebbe a due righe e schiaccerebbe i campi. Lezione pagata tre volte. */
.recapiti__form h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 500; font-size: 0.9rem; }
.field input, .field textarea {
  width: 100%; padding: 0.8rem 0.9rem; min-height: 48px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--sage); border-radius: var(--field-radius);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent-ink); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.9rem; color: var(--ink-muted); }
.consent input { margin-top: 0.25rem; width: 20px; height: 20px; flex: none; }
.form-note { margin-top: var(--space-4); font-size: 0.9rem; color: var(--ink-muted); }
.form-note a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.recapiti__scheda { background: var(--surface); padding: var(--space-6); border-top: 4px solid var(--accent); }
.recapiti__scheda h3 { font-size: var(--text-lg); margin-bottom: var(--space-5); }
.recapiti__scheda dl > div + div { margin-top: var(--space-5); }
.recapiti__scheda dt { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
.recapiti__scheda dd { margin: 0; }
.recapiti__scheda a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.hours li + li { margin-top: var(--space-1); }
@media (max-width: 860px) { .recapiti__cols { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .contact-form .row { grid-template-columns: 1fr; } }

/* ============================================================ PIÈ ============================== */
.site-footer { padding-block: var(--space-9) var(--space-6); margin-top: auto; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.4rem, 1rem + 2vw, 2.8rem); }
.site-footer__desc { margin-top: var(--space-4); color: var(--on-dark-muted); }
.site-footer__col h4 { font-size: 0.78rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: var(--space-4); }
.site-footer__col p + p { margin-top: var(--space-3); }
.site-footer__col a { text-decoration: underline; text-underline-offset: 3px; }
.wordmark--footer { color: var(--on-dark); }
.wordmark--footer .wordmark__mark { background: transparent; }
/* Tre celle: dati a sinistra, Dgitaly CENTRATO, Privacy a destra. */
.site-footer__legal {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid rgba(243,247,248,.18); font-size: 0.85rem; color: var(--on-dark-muted);
}
.legal-r { justify-self: end; }
/* ⚠ dgitaly.svg è un marchio QUADRATO 252×252 senza scritta: non si deforma, e la parola va accanto. */
.site-footer__dgitaly { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__dgitaly img { width: 20px; height: 20px; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { grid-template-columns: 1fr; text-align: center; }
  .legal-r { justify-self: center; }
}

/* ============================================================ BARRA CTA MOBILE ================= */
.cta-bar { display: none; }
@media (max-width: 760px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: var(--space-3); background: var(--paper); border-top: 1px solid var(--line);
  }
  /* ⚠ I due tasti devono avere la STESSA altezza e la stessa quota: il block-gap di WP cade sul
     SECONDO figlio di un gruppo in flow e lo scalza di 24px. Azzerato in base.css, ribadito qui. */
  .cta-bar > * { margin-block: 0; min-height: 50px; }
  /* La barra copre il fondo: il piè guadagna lo spazio per non restarci sotto. */
  body { padding-bottom: 78px; }
}

/* Il ponte fra i due elenchi di vantaggi: la frase con cui il cliente introduce il secondo gruppo. */
.vantaggi__ponte { margin-block: var(--space-7) var(--space-5); font-size: var(--text-md); color: var(--ink-muted); }

/* ⭐ Ogni cella fotografica dichiara il PROPRIO rapporto: si sceglie la foto per RATIO della tessera,
   non per soggetto. Un 2:3 uguale per tutte sventrerebbe un orizzontale, e viceversa. */
.mosaico__cella--quadra { aspect-ratio: var(--tile-square); }
.mosaico__cella--larga { aspect-ratio: 3 / 2; grid-column: span 4; }
@media (max-width: 900px) { .mosaico__cella--larga { grid-column: span 2; } }
@media (max-width: 560px) { .mosaico__cella--larga { grid-column: span 1; } }

/* Il titolo di sezione della pagina Impianti e la frase che introduce l'elenco degli elementi. */
.elementi__titolo { margin-bottom: var(--space-6); }
.elementi__titolo h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.elementi__titolo p { color: var(--ink-muted); font-size: var(--text-md); }

/* ⚠⚠ DIFESA sulla testata: anche con la forma breve, una ragione sociale lunga non deve poter
   sfondare la finestra. Il wordmark si accorcia (min-width:0 su un flex item è indispensabile:
   il default `auto` gli impedisce di scendere sotto il contenuto) e la riga non va mai a capo
   trascinando fuori nav e CTA. Misurato a 390px: senza queste due righe l'eccesso era 369px. */
.site-header__row { flex-wrap: wrap; }
.wordmark { min-width: 0; }
.wordmark__txt { min-width: 0; overflow-wrap: anywhere; }

/* ⚠⚠ MISURATO nel DOM a 390px, menu APERTO: la voce «Home» rendeva `--accent-ink` sul fondo grafite
   dell'overlay = contrasto 2,70, SOTTO AA — mentre le altre due rendevano `--on-dark` (15,10). Il
   markup delle tre voci è IDENTICO: a cambiare è lo STATO del link (theme.json dichiara
   `styles.elements.link.color.text = accent-ink`, e WP lo emette per l'ancora in tutti i suoi stati).
   Una regola che copre il solo stato base lascia scoperti gli altri, e il difetto ricompare su UNA
   voce sola — quella che nessuno guarda perché «il menu si vede». Si dichiarano TUTTI gli stati. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:link,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label { color: var(--on-dark); }
/* Stessa disciplina sulla nav desktop, dove il fondo è chiaro: lì l'accento REGGE (6,03 su carta),
   ma il colore va dichiarato lo stesso, altrimenti dipende da quale stato il browser applica. */
.site-header .site-nav .wp-block-navigation-item__content,
.site-header .site-nav .wp-block-navigation-item__content:link,
.site-header .site-nav .wp-block-navigation-item__content:visited { color: var(--ink); }
.site-header .site-nav .wp-block-navigation-item__content:hover,
.site-header .site-nav .wp-block-navigation-item__content:focus { color: var(--accent-ink); }

/* ⚠ BERSAGLI TATTILI (regola di gusto NON disattivabile, `a11y.target-size`): misurati sul servito,
   i due link legali del piè rendevano 22px di altezza e la casella del consenso 20×20 — sotto il
   minimo di 24. Non è una preferenza: chi tocca con un dito o punta con un tremore li manca. */
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 24px; }
.consent input { width: 24px; height: 24px; }