/* components.css — i componenti resi del verticale tricology_centre.
   Due registri a RUOLI SEPARATI (mai mediati): BeMassage2 governa hero e testate — display serif chiaro
   sopra un primo piano velato; BeCosmetics3 governa le sezioni di prodotto — l'oggetto protagonista su
   campo pieno profondo. */

/* ============================= TESTATA ============================= */
/* La testata è TRASPARENTE sopra la fotografia dell'hero (scelta di design: il marchio galleggia sullo
   scatto). ⚠ Le 7 pagine interne non hanno un hero fotografico: lì la stessa testata prende il fondo
   GRAFITE, altrimenti il marchio bianco finirebbe su carta bianca — invisibile.
   ⚠ NIENTE backdrop-filter: crea un containing-block per il position:fixed e limiterebbe l'overlay del
   menu mobile all'altezza della testata (trappola verificata su Sirtel). */
/* La testata e' FISSA: resta in vista mentre la pagina scorre (richiesta owner).
   ⚠ Trasparente sull'hero, ma un fondo trasparente FISSO diventa illeggibile appena sotto passa
   contenuto chiaro: il fondo compare allo scroll con `.is-scrolled`, la classe che reveal.js commuta
   su `.fp-shrink` (con banda morta 80/30px). NON e' `is-shrunk`: quella non la commuta nessuno.
   ⚠ Essendo fissa esce dal flusso: le pagine interne devono recuperarne l'altezza (vedi --chrome). */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 30; background: transparent;
  padding-block: var(--space-4); transition: background var(--dur) var(--ease), padding var(--dur) var(--ease); }
.site-header.is-scrolled { background: var(--brand); padding-block: var(--space-3); }
/* ⚠⚠ Il velo della TESTATA e' separato da quello dell'hero, e non e' un vezzo: MISURATO dal pixel, il
   menu bianco sopra la fotografia faceva 2,89 (sotto il 4,5 richiesto al testo normale) perche' in cima
   allo scatto c'e' un asciugamano chiaro. Il velo dell'hero li' vale .38 e non basta. Questo scurisce
   SOLO la fascia della testata e sfuma a nulla entro 180px, cosi' la fotografia resta piena piu' sotto.
   ⚠ Vive dietro il contenuto della testata (z-index -1) e solo dove la testata galleggia. */
.site-header::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 180px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,13,.82) 0%, rgba(10,12,13,.55) 45%, rgba(10,12,13,0) 100%); }
body:not(.home) .site-header::before, .site-header--solid::before,
.site-header.is-scrolled::before { display: none; }
.site-header--solid { background: var(--brand); }
/* Le 7 pagine interne non hanno un hero fotografico sotto cui nascondersi: fondo pieno da subito. */
body:not(.home) .site-header { background: var(--brand); }
/* ⚠ La testata fissa non occupa spazio nel flusso: senza questo, la testata di pagina ci finirebbe
   SOTTO. La home non ne ha bisogno — l'hero e' pensato per stare dietro la testata. */
body:not(.home) .wp-site-blocks > main { padding-top: var(--chrome); }
.site-header__row { display: flex; align-items: center; gap: var(--space-5); }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none;
  color: var(--on-dark); }
/* ⚠ Il marchio del cliente è un WORDMARK largo (rapporto 2,26), non un bollo quadrato: si dimensiona
   sull'ALTEZZA e la larghezza segue. Dichiarare una larghezza fissa lo schiaccerebbe. */
.wordmark__mark { height: 44px; width: auto; display: block; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark__name { font-family: var(--font-display); font-size: 1.32rem; letter-spacing: .01em; }
.wordmark__tag { font-size: .7rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-dark-muted); font-weight: 500; }
/* Quando il marchio è l'immagine, il nome scritto accanto lo ripeterebbe. */
.wordmark--logo .wordmark__txt { display: none; }

.site-nav { margin-left: auto; }
/* ⚠ Il colore delle voci NON si ottiene da qui: `.site-nav a` perde contro le regole che WP emette per
   il blocco navigation, e il menu resta GRAFITE — invisibile sulla testata grafite delle pagine interne
   (sulla home sembrava chiaro solo perche' la fotografia sotto e' chiara). La via giusta e' dichiarare
   `textColor` SUL BLOCCO nel pattern: WP genera `has-on-dark-color` con !important, che vince per
   costruzione. Questa regola resta come difesa, non come unica fonte. */
.site-nav a { color: var(--on-dark); text-decoration: none; font-size: .95rem; font-weight: 500;
  letter-spacing: .01em; }
.site-nav a:hover { color: var(--accent-lt); }
.site-nav .current-menu-item > a { color: var(--accent-lt); }
.site-header__cta { margin-left: var(--space-4); align-self: center; }
/* ⚠ Su mobile la CTA della testata SPARISCE: ruba la larghezza all'hamburger e la stessa azione vive
   gia' nella barra fissa in fondo. Cosi' l'hamburger resta all'estremita' destra, da solo. */
@media (max-width: 899.98px) {
  /* ⚠ `.site-header__cta` da solo NON basta: ha la stessa specificita' di `.btn` (0,1,0), che e'
     dichiarato piu' in basso in questo stesso foglio e vince per ORDINE DI SORGENTE. Serve un
     selettore piu' pesante — non un !important. */
  .site-header .site-header__cta { display: none; }
  .site-nav { margin-left: auto; }
  .wp-block-navigation__responsive-container-open { margin-left: auto; }
}

/* --- Menu mobile: overlay di wp:navigation ---
   ⚠ Il fondo bianco lo impone `.wp-block-navigation:not(.has-background) …is-menu-open` a (0,5,0): con
   voci bianche il menu sembra VUOTO. La via giusta non è rincorrere la specificità ma dichiarare
   overlayBackgroundColor/overlayTextColor SUL BLOCCO (nel pattern): WP genera classi has-…-color con
   !important, che vincono per costruzione. Qui resta solo la forma. */
@media (max-width: 899.98px) {
  /* ⚠ Senza padding orizzontale le voci toccano i bordi e le piu' lunghe si tagliano
     («Perche Sceglierc|»). Il padding vale sul CONTENITORE, non sulle voci. */
  .wp-block-navigation__responsive-container.is-menu-open { height: 100vh; max-height: 100vh;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: var(--space-7) var(--gutter) var(--space-6); }
  /* ⚠⚠ La giustificazione a destra del blocco (`items-justified-right`) sopravvive nell'OVERLAY come
     `align-items: flex-end`: la lista si comprimeva a 152px su 390 e finiva schiacciata contro il bordo,
     tagliando le voci piu' lunghe. Non basta il padding del contenitore — va tolta la compressione. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-bottom: 96px; width: 100%; align-items: stretch; padding-inline: var(--gutter); }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100%; align-items: stretch; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { border-bottom: 1px solid rgba(255,255,255,.14); width: 100%; }
  /* L'<a> è display:block shrink → il li in colonna lo allinea a destra. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: 100%; text-align: left; padding-block: var(--space-4); font-size: 1.15rem; }
  /* I due pulsanti dell'overlay sono 24px senza padding: sotto il minimo di tocco. */
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close { padding: 10px; }
}

/* ============================= BOTTONI ============================= */
/* ⚠ Il primario sta su --accent-dark: bianco sul rosso pieno fa 3,66 (testo normale NON conforme),
   su accent-dark 5,94. Il rosso pieno resta per le superfici e i filetti. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-body); font-weight: 500; font-size: .95rem; letter-spacing: .02em;
  padding: .85em 1.6em; border-radius: var(--radius); border: 1px solid transparent;
  background: var(--accent-dark); color: var(--on-dark); text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); cursor: pointer; }
.btn:hover { background: var(--accent); color: var(--ink); }
.btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.btn--outline:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn--sm { padding: .6em 1.15em; font-size: .875rem; }
.btn--ink { background: var(--brand); color: var(--on-dark); }
.btn--ink:hover { background: var(--brand-dark); color: var(--on-dark); }

/* ============================= HERO (BeMassage2) ============================= */
/* Il display sta SOPRA la fotografia, centrato, dentro un velo. ⚠ Il contrasto qui dipende dal
   fotogramma: il velo è la difesa, e va verificato dal PIXEL renderizzato, non da un rapporto di token. */
.hero { position: relative; isolation: isolate; min-height: clamp(520px, 78vh, 760px);
  display: grid; align-items: center; color: var(--on-dark); background: var(--brand); }
.hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--scrim) 0%, var(--scrim-deep) 78%); }
.hero__inner { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto;
  text-align: center; padding-top: calc(var(--chrome) + var(--space-6)); padding-bottom: var(--space-8); }
.hero h1 { max-width: 20ch; margin-inline: auto; }
.hero__lead { font-size: var(--text-md); color: var(--on-dark-muted); max-width: 56ch;
  margin: var(--space-5) auto 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
  margin-top: var(--space-6); }
.hero .eyebrow { color: var(--accent-lt); }
.hero .rule { margin-inline: auto; }
/* Variante di solo design: senza fotografie idonee il campo resta pieno, con una trama discreta.
   MAI foto finte — la variante esiste apposta. */
.hero--design { background: var(--brand); }
.hero--design::after { background: radial-gradient(120% 90% at 50% 0%, rgba(237,75,84,.16) 0%, transparent 62%); }

/* ============================= INTESTAZIONE DI SEZIONE ============================= */
.section-intro { max-width: none; margin-bottom: var(--space-7); }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro--center .rule { margin-inline: auto; }
.section--dark .section-intro .lead { color: var(--on-dark-muted); }
.section--dark .eyebrow { color: var(--accent); }

/* ============================= PRODOTTI (BeCosmetics3) ============================= */
/* La famiglia degli impianti: l'oggetto protagonista su campo pieno. Le tessere non sono una griglia
   piatta — la categoria sfalsa. */
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--tile-gap); }
.product { background: var(--paper); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.product p { margin-top: auto; }
.section--dark .product { background: var(--brand-mid); border-color: rgba(255,255,255,.12);
  color: var(--on-dark); }
.product__n { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--accent); }
/* ⚠ Un corpo giusto su una riga PIENA e' sbagliato in una colonna stretta: il titolo del prodotto
   («IMPIANTO DI CAPELLI AUTOADESIVO 3T Ionix 200») andava a quattro righe di serif in 230px. Scende
   di un gradino e passa al sans, che regge il maiuscolo lungo senza impastare. */
.product h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.35;
  letter-spacing: .01em; }
.product p { color: var(--ink-muted); font-size: .95rem; }
.section--dark .product p { color: var(--on-dark-muted); }
/* ⚠ Lo sfalsamento e' stato RIMOSSO su richiesta dell'owner: con quattro schede di testo diverso non
   leggeva come ritmo ma come disallineamento. Le schede restano ALLINEATE e di pari altezza — il ritmo
   lo danno il numero grande e il filetto, non l'offset. */
.products > .product { height: 100%; }
/* La fascia dei prodotti ha una campitura propria: due sezioni adiacenti sulla stessa carta si leggono
   come una sola, e la pagina perde ritmo. */
.section--prodotti { background: linear-gradient(180deg, var(--paper) 0%, var(--sage-tint) 100%); }

/* ============================= MEMBRANA / FEATURED ============================= */
/* Due campi: la prosa e la fotografia, con il campo di colore che scavalca.
   ⚠ Per uno scavalco servono DUE condizioni: margine negativo > padding di fine sezione E
   align-self:end. Dove il genitore CENTRA, il centraggio si mangia il margine. */
.membrana { background: linear-gradient(155deg, var(--brand-mid) 0%, var(--brand) 42%, var(--brand-dark) 100%);
  color: var(--on-dark); padding-block: var(--section-y); position: relative; z-index: 2; }
.membrana__grid { display: grid; gap: var(--space-7); align-items: center; }
/* ⚠ La colonna della fotografia era appena SOTTO il 18% del viewport: un'immagine grande per un soffio
   non e' grande. Allargandola diventa il secondo fuoco visivo della banda, non un francobollo. */
@media (min-width: 900px) { .membrana__grid { grid-template-columns: .92fr 1.08fr; } }
/* ⚠⚠ Il RAPPORTO del riquadro si DICHIARA: senza, l'altezza la decideva la colonna di testo accanto e
   variava da pagina a pagina (su Caratteristiche era diventata 547x643, un ritratto). Un riquadro
   imprevedibile rende impossibile scegliere e tagliare la fotografia giusta — ed e' cosi' che una foto
   233x274 e' finita in un box che ne chiedeva 1094x1286, coprendo il 21%. */
.membrana__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); }
.membrana__media img { display: block; width: 100%; height: 108%; object-fit: cover; }
/* I DIAGRAMMI non si ritagliano: un disegno tecnico tagliato perde le parti che lo spiegano. */
.membrana__media--contain { aspect-ratio: 16 / 9; background: var(--brand-mid); }
.membrana__media--contain img { object-fit: contain; }
.membrana .lead { color: var(--on-dark-muted); }
.membrana .eyebrow { color: var(--accent); }
/* Le sette caratteristiche di Respira XT: elenco a due colonne, non fasce. */
.specs { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 700px) { .specs { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.spec { border-top: 2px solid var(--accent); padding-top: var(--space-3); }
.spec h3 { font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); }
.spec p { color: var(--on-dark-muted); font-size: .95rem; margin-top: var(--space-2); }

/* ============================= METODO / FUNZIONAMENTO ============================= */
.steps { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.step { padding: var(--space-5); border-radius: var(--radius-lg); transition: background var(--dur) var(--ease); }
/* ⚠ Se si toglie la scheda a un componente si deve controllare il suo HOVER: l'ombra resta e senza
   fondo diventa un contorno spettrale. Qui l'alone è una SUPERFICIE con aria. */
.step:hover { background: var(--sage-tint); }
.section--dark .step:hover { background: var(--brand-mid); }
.step__n { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--accent);
  margin-bottom: var(--space-2); }
.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--ink-muted); font-size: .95rem; }
.section--dark .step p { color: var(--on-dark-muted); }

/* ============================= PROVE / TRUST ============================= */
.prove { background: linear-gradient(180deg, var(--paper) 0%, var(--sage-tint) 30%, var(--sage-tint) 100%); padding-block: var(--section-y); }
.prove__grid { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .prove__grid { grid-template-columns: repeat(3, 1fr); } }
.proof { background: var(--paper); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); }
.proof h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.proof p { color: var(--ink-muted); font-size: .95rem; }
.proof__mark { display: block; height: 40px; width: auto; margin-bottom: var(--space-4); }

/* ============================= TABELLA COMPARATIVA ============================= */
/* La pagina Caratteristiche porta un confronto numerico: va reso come TABELLA vera (è un dato
   tabellare, e chi non vede ha bisogno delle intestazioni). ⚠ Deve poter scorrere da sola. */
.table-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
.cmp th, .cmp td { padding: var(--space-3) var(--space-4); text-align: left;
  border-bottom: 1px solid var(--line); }
.cmp thead th { font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.cmp tbody th { font-weight: 500; }
.cmp td:last-child { color: var(--ink-muted); }
.cmp .is-ours { color: var(--accent-ink); font-weight: 700; }

/* ============================= GALLERIA / IL CENTRO ============================= */
/* Mosaico sfalsato: la categoria non usa griglie piatte. Le campate sono calcolate per CHIUDERE la
   griglia — senza il calcolo restano celle vuote. */
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tile-gap); }
@media (min-width: 860px) { .mosaic { grid-template-columns: repeat(4, 1fr); } }
.mosaic figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }
.mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ⚠ Togliendo lo stiramento, una tessera prende l'altezza della PROPRIA fotografia: l'altezza si
   dichiara, dallo stesso token della riga. */
.mosaic figure { height: clamp(210px, 29vw, 400px); }
@media (min-width: 860px) {
  .mosaic .is-wide { grid-column: span 2; }
  .mosaic .is-tall { grid-row: span 2; height: auto; }
}

/* ============================= FASCIA CONTATTI ============================= */
.cta-band { background: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 55%, #2a1417 100%);
  color: var(--on-dark); padding-block: var(--section-y); position: relative; overflow: hidden; }
/* un alone di marca appena percepibile: da' profondita' senza diventare decorazione */
.cta-band::before { content: ""; position: absolute; z-index: 0; right: -8%; top: -40%;
  width: 60vw; height: 160%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(237,75,84,.20), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1.2fr .8fr; } }
/* ⚠ Nessun cap: il testo riempie la colonna invece di restare incolonnato a sinistra. */
.cta-band h2 { max-width: none; }
.cta-band .lead { color: var(--on-dark-muted); }
.cta-band .eyebrow { color: var(--accent); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================= TESTATA DI PAGINA ============================= */
/* ⚠ La page-head NON riusa la size dell'hero (--text-3xl): è una testata di pagina, non un hero.
   Un gradino più piccolo, altrimenti «occupa mezza schermata». È CONDIVISA da tutte le interne. */
.page-head { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--on-dark); padding-block: var(--space-8); }
.page-head h1 { font-size: var(--text-2xl); }
.page-head .lead { color: var(--on-dark-muted); max-width: none; }
.page-head .eyebrow { color: var(--accent); }
.page-head .rule { border-color: var(--accent); }

/* ============================= PROSA ============================= */
/* ⚠⚠ La copy che arriva dall'IR viene sempre ESCAPATA dall'emitter (solo gli slot `b.` dichiarati raw
   ne sono esenti): un `body` che contiene <p> stampa i tag a vista. Il testo resta dunque PIANO e i
   capoversi si conservano con `pre-line`, che rende i ritorni a capo senza chiedere markup nella copy.
   ⚠ `pre-line` collassa gli spazi iniziali, quindi l'indentazione che l'emitter aggiunge alle righe
   di uno slot multi-riga non si vede. */
.prose--flow { white-space: pre-line; }
/* ⚠ Decisione owner: la prosa RIEMPIE la colonna invece di restare incolonnata a sinistra lasciando
   mezza pagina vuota. Il cap sulla misura di lettura e' rimosso di proposito; la leggibilita' si
   difende con l'interlinea e con il contenitore, non con una riga corta dentro una banda larga. */
.prose { max-width: none; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose a { color: var(--accent-ink); text-underline-offset: .18em; }

/* ============================= SCHEDA CONTATTI ============================= */
.contact-cols { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .contact-cols { grid-template-columns: 1.15fr .85fr; } }
.contact-info { background: linear-gradient(170deg, var(--surface) 0%, var(--sage-tint) 100%); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); }
.contact-info dt { font-size: .78rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-4); }
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: var(--space-1) 0 0; }
.contact-info a { color: var(--accent-ink); }
.form-note { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--space-3); }

/* ============================= PIÈ DI PAGINA (due colonne) ============================= */
.site-footer { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 60%); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.site-footer__cols { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .site-footer__cols { grid-template-columns: 1.4fr .6fr; } }
.site-footer h2 { font-size: var(--text-lg); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--accent-lt); }
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
/* La colonna resta dov'e' (circa tre quarti di pagina) ma il testo va a FILO del bordo destro: prima
   le voci partivano da sinistra dentro la colonna e lasciavano un vuoto largo sulla destra, che non
   tornava con la riga legale sottostante. Solo da 760px in su: impilata, la bandiera a destra e' peggio. */
@media (min-width: 760px) { .site-footer__nav ul { justify-items: end; text-align: right; } }
/* ⚠⚠ La firma «Powered by Dgitaly» sta al CENTRO VERO della riga, non «circa». Per questo la riga e' una
   GRIGLIA `1fr auto 1fr` e non un flex con `space-between`: con tre elementi space-between mette il
   mediano a meta' dello SPAZIO RESIDUO, che cade a meta' solo se i due estremi sono larghi uguale — e
   qui non lo sono mai (a sinistra la ragione sociale, a destra due parole). Le due colonne `1fr` sono
   uguali per costruzione, quindi la cella `auto` in mezzo e' centrata sulla pagina. */
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--space-6);
  padding-top: var(--space-4); display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4); align-items: center; font-size: var(--text-sm); color: var(--on-dark-muted); }
.site-footer__legal-privacy { justify-self: end; }
@media (max-width: 759px) {
  /* Sotto i due terzi di larghezza le tre celle si impilano: centrarle qui vorrebbe dire tre righe
     centrate una sotto l'altra, che si leggono peggio di tre righe allineate a sinistra. */
  .site-footer__legal { grid-template-columns: 1fr; gap: var(--space-3); }
  .site-footer__legal-privacy { justify-self: start; }
}
.site-footer__legal a { color: var(--on-dark-muted); text-decoration: underline; }
.powered { display: inline-flex; align-items: center; gap: .45em; }
.powered img { height: 20px; width: 20px; display: block; }
.footer-logo { height: 40px; width: auto; display: block; margin-bottom: var(--space-4); }

/* ============================= BARRA CTA MOBILE ============================= */
.cta-bar { display: none; }
@media (max-width: 899.98px) {
  .cta-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid;
    grid-template-columns: 1fr 1fr; background: var(--brand-dark); }
  .cta-bar a { padding: var(--space-4) var(--space-2); text-align: center; color: var(--on-dark);
    text-decoration: none; font-size: .92rem; font-weight: 500; }
  .cta-bar a.is-accent { background: var(--accent-dark); }
  body { padding-bottom: 56px; }
}

/* ============================= CRONOLOGIA (Brevetti) ============================= */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6);
  border-left: 2px solid var(--line); padding-left: var(--space-6); }
.tl { position: relative; }
/* Il bollo cade sul filetto: il calcolo tiene conto del padding del genitore. */
.tl::before { content: ""; position: absolute; left: calc(var(--space-6) * -1 - 6px); top: .55em;
  width: 10px; height: 10px; border-radius: 999px; background: var(--accent); }
.tl__date { display: block; font-size: var(--text-sm); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--space-1); }
.tl h3 { margin-bottom: var(--space-2); }
.tl p { color: var(--ink-muted); }

/* ============================= MODULO DI CONTATTO ============================= */
.contact-form .field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.contact-form label { font-size: .82rem; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  font: inherit; color: var(--ink); background: var(--paper); border: var(--border);
  border-radius: var(--radius); padding: .75em .9em; width: 100%; }
.contact-form textarea { resize: vertical; }
.contact-form .field--check { display: flex; align-items: flex-start; gap: var(--space-3); }
.contact-form .field--check label { text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: var(--text-base); color: var(--ink); }
.contact-form .field--check input { margin-top: .35em; }
.form-actions { margin-top: var(--space-5); }
/* L'avviso del modulo non disponibile segue il pulsante (apply/build-form-disabled.mjs). */
.form-actions + [role="status"], .contact-form [role="status"] { margin-top: var(--space-4);
  background: var(--accent-tint); border-left: 3px solid var(--accent); padding: var(--space-4);
  border-radius: var(--radius); font-size: .95rem; }
.map-link { display: inline-block; margin-top: var(--space-5); color: var(--accent-ink); }

/* ============================= VARIANTE DI SOLO DESIGN ============================= */
/* Sotto la soglia delle fotografie il mosaico diventa un campo tipografico: mai scatti finti. */
.tiles-design { display: grid; gap: var(--tile-gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tile-d { background: var(--brand); color: var(--on-dark); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5); }
.tile-d span { display: block; font-family: var(--font-display); font-size: 2.2rem;
  color: var(--accent); line-height: 1; margin-bottom: var(--space-3); }
.tile-d p { color: var(--on-dark-muted); }

/* ============================= GALLERIA APRIBILE ============================= */
/* ⚠ La galleria NON e' nostra: `reveal.js` della piattaforma aggancia gia' ogni `a.zoom` e costruisce
   un visore navigabile (frecce, tasti freccia, Esc, click sul fondo) creando l'<img> solo al primo
   click. Scriverne una seconda in CSS significava duplicare le fotografie nel DOM e litigare con la
   sua `preventDefault`. Qui restano solo il SEGNO di «si apre» e la veste del visore. */
.mosaic .zoom { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; }
.mosaic .zoom img { transition: transform 520ms var(--ease); }
.mosaic .zoom:hover img, .mosaic .zoom:focus-visible img { transform: scale(1.06); }
.mosaic .zoom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,13,0) 55%, rgba(10,12,13,.55) 100%);
  opacity: 0; transition: opacity var(--dur) var(--ease); }
.mosaic .zoom:hover::after, .mosaic .zoom:focus-visible::after { opacity: 1; }
.mosaic .zoom::before { content: "\002B"; position: absolute; z-index: 2; right: 12px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 999px; background: var(--accent-dark); color: #fff;
  font-family: var(--font-body); font-size: 19px; line-height: 34px; text-align: center;
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.mosaic .zoom:hover::before, .mosaic .zoom:focus-visible::before { opacity: 1; transform: none; }

/* Veste del visore della piattaforma, nei colori del verticale. */
.fp-lb { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
  background: rgba(10,12,13,.95); padding: clamp(12px, 4vw, 56px); }
.fp-lb.is-open { display: flex; }
.fp-lb__img { max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-lg); box-shadow: 0 40px 90px -40px rgba(0,0,0,.9); }
.fp-lb__x, .fp-lb__nav { position: absolute; display: grid; place-items: center; cursor: pointer;
  width: 52px; height: 52px; border-radius: 999px; border: 0; color: var(--on-dark);
  background: rgba(255,255,255,.10); font-size: 26px; line-height: 1;
  transition: background var(--dur) var(--ease); }
.fp-lb__x:hover, .fp-lb__nav:hover { background: var(--accent-dark); }
.fp-lb__x { top: clamp(8px, 3vw, 32px); right: clamp(8px, 3vw, 32px); }
.fp-lb__nav svg { width: 26px; height: 26px; }
.fp-lb__prev { left: clamp(8px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.fp-lb__next { right: clamp(8px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.fp-lb__x:focus-visible, .fp-lb__nav:focus-visible { outline: 3px solid var(--accent-lt); outline-offset: 2px; }
@media (max-width: 599.98px) { .fp-lb__nav { width: 44px; height: 44px; } .fp-lb__prev { left: 6px; } .fp-lb__next { right: 6px; } }

/* ============================= COPPIE DI TESSERE ============================= */
/* ⚠ Due tessere in una griglia da 4 colonne lasciavano metà riga vuota a destra (segnalato dall'owner).
   Quando le fotografie sono due o tre, la griglia si RESTRINGE e si CENTRA: le tessere diventano più
   grandi e la riga si chiude. */
.mosaic--pair { grid-template-columns: repeat(2, 1fr); max-width: 1200px; margin-inline: auto; }
.mosaic--pair figure { height: clamp(230px, 32vw, 430px); }
/* ⚠ Tre tessere uguali sono una fila, non una composizione: la prima diventa GRANDE e le altre due le
   si appoggiano accanto. E' il gesto che la categoria usa (mosaici sfalsati, mai griglie piatte) e
   restituisce alla fotografia principale la misura che merita. */
.mosaic--trio { grid-template-columns: 2fr 1fr; max-width: 1200px; margin-inline: auto; }
.mosaic--trio > :first-child { grid-row: span 2; height: 100%; min-height: clamp(320px, 40vw, 520px); }
.mosaic--trio > :not(:first-child) { height: clamp(150px, 19vw, 252px); }
@media (max-width: 719.98px) {
  .mosaic--trio { grid-template-columns: repeat(2, 1fr); }
  .mosaic--trio > :first-child { grid-row: auto; grid-column: span 2; min-height: 0; height: clamp(190px, 40vw, 260px); }
  .mosaic--trio > :not(:first-child) { height: clamp(140px, 30vw, 200px); }
}
@media (max-width: 719.98px) {
  .mosaic--pair, .mosaic--trio { grid-template-columns: repeat(2, 1fr); }
}

/* ============================= BANDA FOTOGRAFICA A PIENA LARGHEZZA ============================= */
/* Una fotografia che occupa l'intera larghezza della finestra: e' il gesto che dà respiro fra due
   blocchi densi, e usa le immagini più larghe che il materiale offre (2231px il confronto).
   ⚠ Il testo sopra la fotografia sta dentro un velo dichiarato: sopra uno scatto il contrasto dipende
   dal fotogramma e non dai token. */
.banda-foto { position: relative; isolation: isolate; overflow: hidden;
  height: clamp(380px, 54vw, 680px); display: grid; align-items: end; }
.banda-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.banda-foto::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,12,13,.12) 0%, rgba(10,12,13,.10) 45%, rgba(10,12,13,.80) 100%); }
.banda-foto__testo { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto;
  padding-bottom: var(--space-7); color: var(--on-dark); }
.banda-foto__testo h2 { max-width: 18ch; }
.banda-foto__testo .eyebrow { color: var(--accent-lt); }
.banda-foto__testo p { color: var(--on-dark-muted); max-width: 52ch; margin-top: var(--space-3); }

/* ============================= TESTATA FOTOGRAFICA DI PAGINA ============================= */
/* Ogni pagina interna si apre su una fotografia: dà respiro, evita che sette pagine comincino tutte
   con la stessa lastra grafite, e porta un'immagine GRANDE dove prima non ce n'era nessuna.
   ⚠ La testata del sito ci galleggia sopra come sulla home: torna trasparente, e il velo la sostiene. */
.page-head--foto { position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(340px, 38vw, 480px); display: grid; align-items: end;
  padding-top: calc(var(--chrome) + var(--space-6)); }
.page-head--foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-head--foto::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,12,13,.72) 0%, rgba(10,12,13,.42) 38%, rgba(10,12,13,.86) 100%); }
body:not(.home) .page-head--foto ~ * .site-header, body.ha-testata-foto .site-header { background: transparent; }

/* La tabella di confronto diventa LEGGIBILE A COLPO D'OCCHIO: la barra dice il rapporto, la cifra dice
   il valore esatto. ⚠ La barra e' `aria-hidden`: non aggiunge nulla a chi legge con la voce, che ha
   gia' la cifra e l'intestazione di riga. */
.cmp td { position: relative; }
.cmp .cifra { display: block; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.barra { display: block; height: 6px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v);
  border-radius: 999px; background: var(--sage); }
.barra--noi::after { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.cmp .is-ours .cifra { color: var(--accent-ink); font-weight: 700; }

/* ============================= ICONE DI VOCE ============================= */
/* ⚠ Un SVG dentro un <img> NON eredita `currentColor`: si risolve in NERO, e su banda scura sparisce.
   Qui l'icona e' una MASCHERA CSS, cosi' il colore lo mette il token e segue la banda che la ospita. */
.ico { display: block; width: 30px; height: 30px; margin-bottom: var(--space-3);
  background: var(--accent-ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
/* ⚠ L'icona NON puo' essere un <img> con percorso relativo al pattern: nel project-mode il contenuto
   finisce nel DB e solo `assets/img/works/*.jpg` viene riscritto in handle — un `assets/img/icons/*.svg`
   resterebbe un percorso rotto. Come maschera CSS il riferimento vive nel FOGLIO, che sta accanto agli
   asset: funziona nel demo e nel progetto, e il colore lo mette il token invece del nero di currentColor.
   ⚠ Vocabolario CHIUSO: una classe per file esistente. Un nome di icona fuori elenco non dipinge nulla,
   e si vede subito. */
.ico--adesione { --m: url("../assets/img/icons/adesione.svg"); }
.ico--antibatterico { --m: url("../assets/img/icons/antibatterico.svg"); }
.ico--brevetto { --m: url("../assets/img/icons/brevetto.svg"); }
.ico--colore { --m: url("../assets/img/icons/colore.svg"); }
.ico--comfort { --m: url("../assets/img/icons/comfort.svg"); }
.ico--consulenza { --m: url("../assets/img/icons/consulenza.svg"); }
.ico--durata { --m: url("../assets/img/icons/durata.svg"); }
.ico--elasticita { --m: url("../assets/img/icons/elasticita.svg"); }
.ico--fotocatalisi { --m: url("../assets/img/icons/fotocatalisi.svg"); }
.ico--igiene { --m: url("../assets/img/icons/igiene.svg"); }
.ico--laboratorio { --m: url("../assets/img/icons/laboratorio.svg"); }
.ico--membrana { --m: url("../assets/img/icons/membrana.svg"); }
.ico--protezione { --m: url("../assets/img/icons/protezione.svg"); }
.ico--termoregolazione { --m: url("../assets/img/icons/termoregolazione.svg"); }
.ico--traspirazione { --m: url("../assets/img/icons/traspirazione.svg"); }
.section--dark .ico, .membrana .ico, .cta-band .ico, .page-head .ico { background: var(--accent); }

/* ============================= FASCIA DEI MARCHI ============================= */
/* I marchi di prodotto (3T registrato, marcatura CE) stanno su una fascia propria, allineati e con aria
   attorno. ⚠ Sono MARCHI: non si ritagliano e non si tingono — si mostrano come sono. */
.marchi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(var(--space-6), 6vw, var(--space-9)); padding-block: var(--space-6); }
.marchi img { height: clamp(74px, 9vw, 116px); width: auto; display: block; }
.marchi figure { margin: 0; display: grid; gap: var(--space-3); justify-items: center; }
.marchi figcaption { font-size: var(--text-sm); color: var(--ink-muted); letter-spacing: .02em; text-align: center; max-width: 26ch; }
.section--dark .marchi figcaption { color: var(--on-dark-muted); }

/* ============================= PARALLASSE DELLE BANDE FOTOGRAFICHE ============================= */
/* La foto scorre piu' lenta della pagina: la banda smette di sembrare un rettangolo inchiodato.
   ⚠ MISURA, non gusto: `reveal.js` trasla l'elemento di `data-parallax`% della PROPRIA altezza. Con
   ampiezza 8 l'escursione e' ±0,08 · 1,24H = ±0,099H, quindi l'immagine alta 124% e alzata di -12%
   copre la banda in ogni posizione (bordo peggiore: -0,021H sopra, +1,021H sotto). Cambiare uno dei
   due numeri senza rifare questo conto scopre il fondo a meta' scorrimento.
   ⚠ Solo `transform`: un'opacita' su un contenitore puo' impedire il download delle foto che contiene. */
.banda-foto img[data-parallax],
.page-head--foto img[data-parallax],
.hero__media[data-parallax] { height: 124%; top: -12%; bottom: auto; will-change: transform; }
.membrana__media img[data-parallax] { height: 124%; margin-top: -12%; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  /* Senza movimento la sporgenza non serve e taglierebbe la foto: torna a coprire esattamente la banda. */
  .banda-foto img[data-parallax],
  .page-head--foto img[data-parallax],
  .hero__media[data-parallax] { height: 100%; top: 0; }
  .membrana__media img[data-parallax] { height: 100%; margin-top: 0; }
}

/* ============================= LE SCHEDE SU CAMPO SCURO ============================= */
/* Le pagine interne alternavano soltanto carta e carta tinta: sette bande chiare di fila si leggono
   come una sola lastra. Una banda scura per pagina dà il respiro che mancava. ⚠ Ogni testo qui sotto
   cambia token: `--ink-muted` sul grafite è illeggibile, e un colore che passa AA sulla carta NON
   passa sul fondo peggiore. I valori sono verificati con axe sulle pagine servite, non dedotti. */
.section--dark .step p,
.section--dark .proof p,
.section--dark .tl p { color: var(--on-dark-muted); }
.section--dark .step h3,
.section--dark .proof h3,
.section--dark .tl h3 { color: var(--on-dark); }
.section--dark .proof { background: var(--brand-mid); border-color: rgba(255,255,255,.12); color: var(--on-dark); }
.section--dark .tl__date { color: var(--accent-lt); }
.section--dark .timeline { border-color: rgba(255,255,255,.18); }
.section--dark .tl::before { background: var(--accent-lt); }
.section--dark .ico { background-color: var(--accent-lt); }
.section--dark .mosaic figure { background: var(--brand-mid); }

/* Banda fotografica MUTA: la stessa lastra a piena larghezza, senza testo sopra. Serve dove la pagina
   ha bisogno di respiro e non c'e' una riga del cliente da metterci: il velo scende, la foto resta. */
.banda-foto--muta { height: clamp(300px, 40vw, 520px); }
.banda-foto--muta::after { background: linear-gradient(180deg, rgba(10,12,13,.10) 0%, rgba(10,12,13,.04) 50%, rgba(10,12,13,.16) 100%); }