/* components.css — componenti car_service: intestazione, testata col campo circolare, barra dei recapiti,
   striscia di ancore, sezioni di servizio, avviso legale, pannello di chiusura, piè di pagina.
   I colori arrivano dai token: qui non si dichiarano valori cromatici. */

/* ============================ intestazione ============================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__row { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
/* nav e CTA portano un margine di blocco da WordPress che li spinge sotto il centro della riga */
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.wordmark__mark { width: 46px; height: 46px; color: var(--brand); flex: 0 0 auto; }
.wordmark__mark svg, .wordmark__mark img { width: 100%; height: 100%; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; }
.wordmark__sub { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }

.site-nav { margin-left: auto; }
.site-nav .wp-block-navigation__container { gap: clamp(1rem, .4rem + 1.2vw, 1.6rem); }
.site-nav .wp-block-navigation-item__content {
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink-soft);
  padding-block: var(--space-2); position: relative;
}
.site-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--brand); transition: right .25s;
}
.site-nav .wp-block-navigation-item__content:hover::after { right: 0; }

.site-header__tel { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); }
.site-header__tel svg { width: 16px; height: 16px; color: var(--accent-text); flex: 0 0 auto; }
/* variante compatta: sotto i 600px resta solo il bersaglio da 44px */
.site-header__tel--compact { display: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-fill); color: var(--ink);
  align-items: center; justify-content: center; flex: 0 0 auto; }
.site-header__tel--compact svg { width: 21px; height: 21px; }

/* ============================ bottoni ============================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: .78rem 1.5rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; transition: transform .2s, background .2s, color .2s;
}
/* un <svg> senza dimensioni dichiarate occupa 300×150: ogni icona va misurata */
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* sul verde acido il testo è l'inchiostro (10.2:1). Il bianco farebbe 1.69: vietato. */
.btn--primary { background: var(--accent-fill); color: var(--ink); }
.btn--primary:hover { background: var(--brand); transform: translateY(-2px); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-dark); }
/* Chiamare è l'azione principale: bottone BIANCO pieno, che su fondo chiaro si stacca per profondità
   invece che per tinta, e lascia il colore al canale WhatsApp. */
.btn--light { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
.btn--light:hover { background: var(--ink); color: var(--on-dark); transform: translateY(-2px); }
/* WhatsApp porta il verde del marchio: è una SUPERFICIE, quindi il testo sopra resta l'inchiostro
   (7.51:1). Il bianco su questo verde farebbe 2.29 e sarebbe illeggibile. */
.btn--wa { background: var(--brand); color: var(--ink); }
.btn--wa:hover { background: var(--brand-deep); color: var(--on-dark); transform: translateY(-2px); }
/* Il richiamo pulsa con un alone che si espande DIETRO il bottone: nessuna variazione di opacità sul
   testo, che attraverserebbe le soglie di contrasto mentre è in transito. */
.btn--wa, .cta-bar__wa { position: relative; isolation: isolate; }
.btn--wa::after, .cta-bar__wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--brand); animation: fp-pulse 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes fp-pulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn--wa::after, .cta-bar__wa::after { animation: none; } }
.section--dark .btn--ghost, .cta-band .btn--ghost { border-color: color-mix(in srgb, var(--on-dark) 50%, transparent); color: var(--on-dark); }
.section--dark .btn--ghost:hover, .cta-band .btn--ghost:hover { background: var(--on-dark); color: var(--ink); }

/* ============================ occhiello ============================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: .42rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--accent-text); background: var(--paper);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--brand); }
.section--dark .eyebrow, .cta-band .eyebrow { background: transparent; border-color: color-mix(in srgb, var(--on-dark) 22%, transparent); color: var(--accent-lt); }
.section--dark .eyebrow::before, .cta-band .eyebrow::before { background: var(--accent-fill); }

.lead { font-size: var(--text-md); color: var(--ink-soft); max-width: 60ch; }
.section--dark .lead, .cta-band .lead { color: color-mix(in srgb, var(--on-dark) 82%, transparent); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
/* la parola accentata del titolo: su chiaro il verde-testo, su scuro il verde chiaro */
.accent { color: var(--accent-text); }
.section--dark .accent, .cta-band .accent { color: var(--accent-lt); }

/* ============================ testata ============================ */
.hero { position: relative; padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem) 0; overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.hero h1 { margin: var(--space-4) 0 var(--space-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__media { position: relative; justify-self: center; width: min(100%, 560px); aspect-ratio: 1; isolation: isolate; }
.hero__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-disc); }
.hero__disc img { width: 100%; height: 100%; object-fit: cover; }
.hero__ring { position: absolute; inset: -8%; border-radius: 50%; border: 2px dashed var(--brand); opacity: .45; z-index: -1; }
/* il campo di colore invade la testata da destra: è il segno della categoria, portato in chiaro */
.hero__blob { position: absolute; width: 112%; aspect-ratio: 1; border-radius: 50%; background: var(--accent-fill);
  right: -34%; bottom: -26%; z-index: -3; opacity: .9; }
.hero__blob--soft { position: absolute; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--brand);
  left: -26%; top: -14%; z-index: -3; opacity: .14; }
.hero__badge {
  position: absolute; left: -6%; bottom: 12%; background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: var(--space-4) 1.15rem;
  display: flex; align-items: center; gap: var(--space-3); box-shadow: 0 14px 32px rgba(23, 27, 37, .28);
}
.hero__badge svg { width: 26px; height: 26px; color: var(--accent-fill); flex: 0 0 auto; }
.hero__badge b { font-family: var(--font-display); font-size: 1.02rem; display: block; line-height: 1.15; }
.hero__badge span { font-size: .78rem; color: var(--on-dark-muted); }
/* variante senza fotografia idonea: il campo di colore resta, il disco diventa una campitura di marca */
.hero--design .hero__disc { background: linear-gradient(140deg, var(--brand-deep), var(--brand)); }

/* ============================ barra dei recapiti ============================ */
.deck { position: relative; z-index: 5; margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.deck__inner {
  background: var(--ink); color: var(--on-dark); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); box-shadow: var(--shadow-panel);
}
.deck__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.deck__item svg { width: 26px; height: 26px; color: var(--accent-fill); flex: 0 0 auto; margin-top: .15rem; }
.deck__wa svg { color: var(--brand); }
.deck__k { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); display: block; }
.deck__v { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--on-dark); }

/* ============================ striscia di ancore ============================ */
/* ⚠ Sotto la striscia dei servizi il padding era ZERO: la banda scura attaccava al pannello verde senza
   un respiro. Le due campiture hanno bisogno di bianco in mezzo per leggersi come due cose distinte. */
.rail-wrap { padding-block: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem); }
/* Pannello dei servizi: stessa larghezza e stesso raggio del riquadro dei recapiti che gli sta sopra,
   con un padding proprio — a filo dei bordi le tessere sembravano incollate al fondo. */
.rail { padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); border-radius: var(--radius-lg); }
.rail__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.rail__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center;
  padding: 1.2rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
  box-shadow: 0 2px 10px rgba(23, 27, 37, .05);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.rail__item:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow-card); }
.rail__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-text); transition: background .22s, color .22s; }
.rail__item:hover .rail__ico { background: var(--accent-fill); color: var(--ink); }
/* Le icone sono MASCHERE, non <img>: ereditano currentColor e cambiano sul fondo acido dell'hover.
   L'url() di una maschera dichiarata QUI si risolve rispetto al FOGLIO di stile, quindi `../assets/`
   è corretto — nel post_content del database un percorso relativo al documento non risolverebbe. */
.rail__ico::before {
  content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.rail__ico[data-icon="diagnosi"]     { --icon: url("../assets/img/icons/diagnosi.svg"); }
.rail__ico[data-icon="chiavi"]       { --icon: url("../assets/img/icons/chiavi.svg"); }
.rail__ico[data-icon="manutenzione"] { --icon: url("../assets/img/icons/manutenzione.svg"); }
.rail__ico[data-icon="cambi"]       { --icon: url("../assets/img/icons/cambi.svg"); }
.rail__ico[data-icon="clima"]        { --icon: url("../assets/img/icons/clima.svg"); }
.rail__ico[data-icon="centraline"]    { --icon: url("../assets/img/icons/centraline.svg"); }
.rail__t { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.2; }

/* ============================ sezioni di servizio ============================ */
/* ⚠ `center` allineava il testo al centro della riga: dove il testo è corto (cambi, clima) il titolo
   scendeva e non era più a filo con la fotografia, che parte sempre in alto. Con `start` le due colonne
   cominciano insieme, ed è l'attacco che si vede. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3.4vw, 4.5rem); align-items: start; }
.split--rev .split__media { order: -1; }
/* ⚠ La diagonale che chiude la banda scura è un `::after` POSIZIONATO, e a parità di z-index si dipinge
   dopo: senza questo livello passa sopra la fotografia e ne taglia il fondo, che riappare solo oltre il
   triangolo. La fotografia deve stare sopra il taglio, non sotto. */
.split__media { position: relative; z-index: 1; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
/* La fotografia SCAVALCA il confine della banda: il dispositivo del campo circolare, ripetuto lungo la
   pagina. ⚠ Centrata non esce MAI — il padding della sezione assorbe la sporgenza e la banda cresce con
   lei. Va ancorata a un bordo (align-self) e tirata oltre di un margine maggiore del padding; così il suo
   contributo all'altezza si riduce e la riga la decide il TESTO, mentre l'immagine esce davvero.
   Le sezioni si alternano: una sporge in alto, la successiva in basso. */
.section:has(.split__media) { display: flow-root; }
/* ⚠ L'eccedenza non è un valore libero: se supera il padding della banda successiva la fotografia ne
   invade il contenuto — a 1100px l'eccedenza valeva 103px contro un padding di 87 e copriva l'occhiello.
   Va legata al ritmo verticale, così resta sempre dentro l'aria della sezione che segue. */
.split__media { --overhang: min(clamp(48px, 3rem + 5vw, 132px), calc(var(--section-y) * 0.5)); }
/* ⚠ in un margin-top la percentuale si riferisce alla LARGHEZZA del contenitore, non all'altezza:
   una regola che la usava spingeva la fotografia dentro invece di tirarla fuori. */
.split .split__media, .split--rev .split__media {
  align-self: stretch;
  margin-top: var(--attacco, -14px);
  margin-bottom: calc(var(--overhang) * -1);
}
.split .split__media img, .split--rev .split__media img {
  height: calc(100% + var(--overhang)); aspect-ratio: auto; min-height: 420px;
}
/* ⚠ La PRIMA sezione non scavalca verso l'alto: sopra di lei c'è l'indice dei servizi, e una fotografia
   che vi entra ne copre le tessere — che sono cliccabili. Scavalca verso il basso come le alternate. */
/* ⚠ Ancorare la fotografia a un bordo lega la sua PARTENZA alla sporgenza: spostandola per correggere
   l'attacco si perde l'effetto, e viceversa. Su queste tre l'attacco va allineato alla colonna di testo,
   quindi si ancorano in ALTO (il top segue il testo) e si fa uscire solo il FONDO — le due cose tornano
   indipendenti. */
/* l'ultima sezione ha sotto di sé il titolo della chiusura: le serve un'eccedenza più contenuta */
#centraline .split__media { --overhang: 22px; }

.split__media::after {
  content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: var(--brand); opacity: .16; right: -7%; top: -7%; z-index: -1;
}
.split h2 { margin: var(--space-4) 0 var(--space-4); }

/* Le voci sono TESSERE, non un elenco puntato: un'officina elenca prestazioni brevi e indipendenti, e a
   tessera si leggono a colpo d'occhio invece che come una colonna di righe. Il segno di spunta resta,
   piccolo, dentro la tessera. */
.checks { margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.checks li {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  padding: .46rem .85rem .46rem .7rem; font-size: .93rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper);
  box-shadow: 0 1px 2px rgba(23, 27, 37, .05);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.checks li:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(23, 27, 37, .07); }
.checks li::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.section--dark .checks li { color: color-mix(in srgb, var(--on-dark) 90%, transparent); background: color-mix(in srgb, var(--on-dark) 6%, transparent); border-color: color-mix(in srgb, var(--on-dark) 16%, transparent); }
.section--dark .checks li:hover { border-color: var(--accent-fill); }
.section--dark .checks li::before { background: var(--accent-fill); }
/* le voci lunghe non si spezzano a metà parola dentro la tessera */
@media (max-width: 599.98px) { .checks li { font-size: .88rem; padding: .4rem .7rem .4rem .6rem; } }

.note {
  margin-top: var(--space-5); padding: 1.1rem 1.3rem; border-left: 4px solid var(--brand);
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; font-size: .96rem; color: var(--ink-soft);
}
.section--dark .note { background: color-mix(in srgb, var(--on-dark) 7%, transparent); color: color-mix(in srgb, var(--on-dark) 84%, transparent); border-left-color: var(--accent-fill); }

/* ============================ avviso legale ============================ */
/* Il riquadro è squadrato e bordato: deve leggersi come un avvertimento, non come una scheda di servizio. */
.warn { border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); margin-top: var(--space-6); background: var(--paper); box-shadow: var(--shadow-card); }
.warn__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.warn__head svg { width: 26px; height: 26px; flex: 0 0 auto; }
.warn__head b { font-family: var(--font-display); font-size: 1.12rem; }
.warn p { margin-bottom: .7rem; font-size: .95rem; color: var(--ink-soft); }
.warn p:last-child { margin-bottom: 0; }

/* ============================ chiusura e pannello finale ============================ */
.closing { text-align: center; }
.section.alt.closing { background: var(--accent-tint); }
.closing .lead { margin-inline: auto; }
.closing h2 { margin-bottom: var(--space-4); }
.cta-band { background: var(--ink); color: var(--on-dark); padding-block: var(--section-y); overflow-x: clip; }
.cta-band__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.cta-band h2 { color: var(--on-dark); margin-bottom: var(--space-4); }
.cta-band__phone {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  color: var(--accent-lt); display: block; line-height: 1.1; letter-spacing: -.02em;
}
/* ⚠ Questa regola è dichiarata DOPO `.btn--wa` e a parità di specificità vincerebbe: da sola rendeva il
   testo bianco sul verde (2.29). Il colore lo porta il bottone, qui restano solo posizione e misura. */
.cta-band__wa { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-family: var(--font-display); font-weight: 600; }
.cta-band__wa:not(.btn) { color: var(--on-dark); }
.cta-band__wa:not(.btn) svg { color: var(--accent-fill); }

/* ============================ piè di pagina ============================ */
.site-footer { background: var(--surface); padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--space-5); font-size: .95rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
.site-footer h3 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-3); }
.site-footer ul { display: grid; gap: .45rem; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent-text); }
.site-footer__addr { margin-top: var(--space-4); color: var(--ink-muted); }
/* Gli orari sono un blocco a se', con la sua intestazione: senza etichetta si leggevano come un quarto
   recapito e non si notavano.
   ⚠ Se un progetto non dichiara gli orari il contratto non emette righe: il blocco si nasconde da solo,
   invece di lasciare in pagina un titolo «Orari» senza niente sotto. */
.site-footer__orari { margin-top: var(--space-5); }
.site-footer__orari:has(.site-footer__hours:empty) { display: none; }
.site-footer__hours { margin-top: var(--space-3); }
.site-footer__hours li { color: var(--ink-muted); }
/* tre celle, non space-between: con tre elementi di larghezza diversa quello mediano non risulterebbe centrato */
.legal { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); font-size: .85rem; color: var(--ink-muted); }
.legal__end { text-align: right; }
.dgitaly { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.dgitaly img { width: 20px; height: 20px; }

/* ============================ barra CTA mobile ============================ */
.cta-bar { display: none; }
/* il colore del canale non dipende dal viewport: dichiarato fuori dalla media query che ne governa la resa */
a.cta-bar__wa { background: var(--brand); color: var(--ink); }

@media (max-width: 980px) {
  .hero__grid, .split, .cta-band__grid { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .deck__inner { grid-template-columns: 1fr; }
  .rail__grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__media { width: min(100%, 380px); }
  /* due classi: una media query non aggiunge specificità e .btn è dichiarata dopo */
  .site-header .site-header__cta { display: none; }
}

@media (max-width: 599.98px) {
  .rail__grid { grid-template-columns: repeat(2, 1fr); }
  .checks { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .legal { grid-template-columns: 1fr; text-align: center; }
  .legal__end { text-align: center; }
  .hero__badge { left: 0; bottom: 4%; }
  .site-header__row { gap: var(--space-3); }
  .wordmark__sub { display: none; }
  .wordmark__name { font-size: 1.05rem; }
  .wordmark__mark { width: 40px; height: 40px; }
  .site-header .site-header__tel { display: none; }
  .site-header .site-header__tel--compact { display: flex; }
  /* barra fissa in basso: su mobile la chiamata è l'azione, non un bottone in testata */
  .cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--ink); border-top: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  }
  .cta-bar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-4) var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
  .cta-bar svg { width: 20px; height: 20px; flex: 0 0 auto; }
  /* a parità di specificità vincerebbe la regola dichiarata dopo: il selettore porta l'elemento */
  a.cta-bar__call { background: var(--paper); color: var(--ink); }
  body { padding-bottom: 64px; }
}

/* --- menu mobile: l'overlay di WordPress nasce bianco con un selettore a quattro classi iniettato DOPO
   il tema; per vincerlo bisogna ricopiarne lo schema, non aggiungere una classe. --- */
@media (max-width: 599.98px) {
  .wp-block-navigation__responsive-container.is-menu-open { height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background: var(--paper); }

  /* ⚠ WordPress allinea a `flex-end` i CONTENITORI dell'overlay: il <ul> collassa a una manciata di
     pixel spinto contro il bordo destro, e le voci risultano attaccate e tagliate. Non basta agire
     sull'<a>, che è shrink e obbedisce al padre: va risalita la catena e allineato ogni antenato. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: stretch; width: 100%; padding-inline: var(--gutter);
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-bottom: 96px; padding-top: var(--space-6); }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    width: 100%; text-align: left; padding-block: var(--space-4);
    border-bottom: 1px solid var(--line); font-size: 1.2rem;
  }

  /* Il bersaglio di chiusura era 24×24 incollato all'angolo: va portato alla misura di un dito, staccato
     dai bordi e con un tratto che si veda. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: var(--space-4); right: var(--space-4); width: 48px; height: 48px; padding: 12px;
    border-radius: 50%; background: var(--surface); color: var(--ink);
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.4px;
  }
}

/* ============================ dettaglio e movimento ============================ */
/* Numerale in filigrana su ogni servizio: un contatore CSS, quindi zero markup e nessuna copia da
   tradurre. Dà alla pagina un indice visibile — su un sito a scorrimento unico è anche orientamento. */
.section:has(.split) { counter-increment: fp-servizio; }
.split__text { position: relative; }
.split__text::before {
  content: "0" counter(fp-servizio);
  position: absolute; right: calc(100% + var(--space-4)); top: -.12em;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.6rem);
  line-height: 1; color: var(--accent-text); opacity: .45; pointer-events: none; user-select: none;
  -webkit-text-stroke: 2px currentColor; -webkit-text-fill-color: transparent;
}
/* ⚠ Sul fondo scuro il verde del marchio spariva: lì il numerale prende il verde chiaro, che è il tono
   d'accento previsto per lo scuro. */
.section--dark .split__text::before { color: var(--accent-lt); opacity: .38; }
/* ⚠ Nelle sezioni a colonne invertite il numerale cadrebbe nel gap fra testo e fotografia, che gli
   passa sopra: lì va portato SOPRA l'occhiello, dentro la propria colonna. */
.split--rev .split__text::before,
.split--rev .split__text::before { right: auto; left: 0; top: auto; bottom: calc(100% - .1em); margin: 0; }
@media (max-width: 1180px) {
  .split__text::before { right: auto; left: 0; top: auto; bottom: 100%; margin: 0 0 -.18em 0; font-size: clamp(2.4rem, 2rem + 3vw, 4rem); }
}

/* Il filetto sotto il titolo si DISEGNA quando la sezione entra in scena: il movimento è una
   larghezza che cresce, mai un'opacità — nulla attraversa una soglia di contrasto. */
.split__text h2::after, .closing h2::after, .cta-band h2::after {
  content: ""; display: block; height: 3px; width: 0; margin-top: var(--space-4);
  background: var(--brand); transition: width .8s cubic-bezier(.22, .61, .36, 1) .15s;
}
.cta-band h2::after { background: var(--accent-fill); }
.is-visible .split__text h2::after, .split__text.is-visible h2::after,
.is-visible.closing h2::after, .cta-band .is-visible h2::after { width: clamp(56px, 8vw, 112px); }
.js .split__text h2::after { width: 0; }
.js .split__text.is-visible h2::after { width: clamp(56px, 8vw, 112px); }
/* senza JS il filetto è già disegnato: fail-visible */
html:not(.js) .split__text h2::after, html:not(.js) .closing h2::after { width: clamp(56px, 8vw, 112px); }

/* Il campo di colore della testata respira: lentissimo, percepibile solo di sfuggita. */
.hero__blob { animation: fp-respiro 9s ease-in-out infinite; }
.hero__ring { animation: fp-ruota 44s linear infinite; }
.hero__ring--in { position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed var(--brand);
  opacity: .3; z-index: -1; animation: fp-ruota 66s linear infinite reverse; }
@keyframes fp-respiro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes fp-ruota { to { transform: rotate(360deg); } }

/* Indicatore di scorrimento: dice che sotto la piega c'è dell'altro, ed è la prima cosa che manca a un
   sito «minimale» percepito come spoglio. */
.hero__scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2);
  margin: var(--space-6) auto 0; width: fit-content;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .18em;
  /* ⚠ a schermo stretto l'indicatore finisce sopra il campo acido, dove il grigio del testo secondario
     scende a 3.81: serve un inchiostro che regga sia sul bianco sia sul verde (13.2 e 7.7). */
  text-transform: uppercase; color: var(--ink-soft);
}
.hero__scroll span { display: block; width: 1px; height: 34px; background: linear-gradient(var(--brand), transparent); animation: fp-giu 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes fp-giu { 0%, 100% { transform: scaleY(.45); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

/* Le tessere della striscia entrano una dopo l'altra e reagiscono al puntatore con l'icona che scatta. */
.rail__item:hover .rail__ico::before { transform: scale(1.12); }
.rail__ico::before { transition: transform .24s cubic-bezier(.34, 1.56, .64, 1); }

@media (prefers-reduced-motion: reduce) {
  .hero__blob, .hero__ring, .hero__ring--in { animation: none; }
  .split__text h2::after, .closing h2::after, .cta-band h2::after { transition: none; width: clamp(56px, 8vw, 112px); }
}

/* ============================ materia ============================ */
/* Un reticolo tecnico appena percettibile sulle bande scure: è il fondo dell'officina — metallo, misure —
   e toglie alla banda l'aspetto di rettangolo pieno. Costo zero: due gradienti, nessuna immagine. */
.section--dark, .cta-band {
  background-image:
    linear-gradient(color-mix(in srgb, var(--on-dark) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--on-dark) 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
}
/* La diagonale è il segno della categoria: qui apre la banda scura invece di tagliarla, così la
   fotografia che scavalca vi entra dentro senza sembrare fuori posto. */
.section--dark::before, .cta-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 64px;
  background: linear-gradient(174deg, var(--paper) 50%, transparent 50.4%);
  pointer-events: none;
}
.cta-band { position: relative; overflow: hidden; }
.section--dark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(354deg, var(--paper) 50%, transparent 50.4%);
  pointer-events: none;
}
/* La striscia di ancore siede sul tint di marca: dà colore alla prima schermata senza chiedere nulla
   alla fotografia, ed è il punto in cui l'occhio cerca l'indice dei servizi. */
.rail { background: var(--accent-tint); }
/* Le bande alternate prendono il tint di marca invece del grigio neutro: il verde è già il colore
   dell'officina vera (la parete del capannone), e il contrasto dell'inchiostro non cambia (15,1:1). */
.section.alt { background: var(--accent-tint); }
.rail__item { border-color: transparent; }


/* Ogni sezione porta l'icona del proprio servizio accanto all'occhiello: chi arriva da una tessera della
   striscia ritrova lo stesso segno, e capisce di essere dove voleva. */
.split__text .eyebrow::after {
  content: ""; width: 18px; height: 18px; margin-left: .1rem; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
#diagnosi .eyebrow     { --icon: url("../assets/img/icons/diagnosi.svg"); }
#chiavi .eyebrow       { --icon: url("../assets/img/icons/chiavi.svg"); }
#manutenzione .eyebrow { --icon: url("../assets/img/icons/manutenzione.svg"); }
#cambi .eyebrow        { --icon: url("../assets/img/icons/cambi.svg"); }
#clima .eyebrow        { --icon: url("../assets/img/icons/clima.svg"); }
#centraline .eyebrow   { --icon: url("../assets/img/icons/centraline.svg"); }


/* Nel piè di pagina i recapiti portano la propria icona: un elenco di link nudi è la parte che più
   somiglia a un documento, ed è l'ultima cosa che resta sullo schermo. */
.site-footer__grid ul li a[href^="tel:"]::before,
.site-footer__grid ul li a[href*="wa.me"]::before,
.site-footer__grid ul li a[href^="mailto:"]::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: .5rem;
  vertical-align: -2px; background: var(--accent-text);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.site-footer__grid ul li a[href^="tel:"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.6 4-2.1 1.5a12.5 12.5 0 0 0 5.5 5.5l1.5-2.1 4 1.6v3a2 2 0 0 1-2.2 2A16.6 16.6 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E"); }
.site-footer__grid ul li a[href*="wa.me"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20.5l1.3-4a8.2 8.2 0 1 1 3.1 3.1z'/%3E%3C/svg%3E"); }
.site-footer__grid ul li a[href^="mailto:"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
/* e le voci dei servizi hanno un trattino che si allunga al passaggio: un elenco che risponde */
.site-footer__grid ul li a[href^="/#"]::before {
  content: ""; display: inline-block; width: 10px; height: 1px; margin-right: .55rem; vertical-align: 4px;
  background: var(--brand); transition: width .24s;
}
.site-footer__grid ul li a[href^="/#"]:hover::before { width: 20px; }

/* L'intestazione si contrae dopo i primi pixel di scorrimento: resta sempre presente, come chiesto, ma
   smette di rubare spazio alla lettura. ⚠ L'altezza è FISSATA in border-box, così il cambio non dipende
   dalle metriche del carattere e non sposta di un pixel ciò che le sta sotto. */
.site-header { transition: min-height .28s ease, box-shadow .28s ease, background-color .28s ease; }
.site-header.is-scrolled { min-height: 60px; box-shadow: 0 6px 24px rgba(23, 27, 37, .08); }
.site-header.is-scrolled .site-header__row { min-height: 60px; }
.site-header.is-scrolled .wordmark__mark { width: 36px; height: 36px; }
/* ⚠ Il sottotitolo si toglie di scatto, senza dissolvenza. Una transizione di opacità su un TESTO lo fa
   attraversare le soglie di contrasto mentre è in transito — misurato a 1.84 in un fotogramma intermedio,
   ed è la stessa ragione per cui le rivelazioni di questo tema muovono invece di sfumare. */
.site-header.is-scrolled .wordmark__sub { display: none; }
.site-header .wordmark__mark { transition: width .28s ease, height .28s ease; }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header .wordmark__mark, .site-header .wordmark__sub { transition: none; } }

/* Il bottone principale porta una freccia che avanza al passaggio: dice che il gesto ha una direzione. */
.btn--light::after, .btn--primary::after {
  content: ""; width: 14px; height: 1.5px; background: currentColor; margin-left: .1rem;
  transition: width .24s cubic-bezier(.34, 1.56, .64, 1); opacity: .75;
}
.btn--light:hover::after, .btn--primary:hover::after { width: 24px; }

/* Il numerale della sezione entra scorrendo con la propria banda: il segno che più dice «indice». */
.split__text::before { animation: fp-numero 1.1s cubic-bezier(.22, .61, .36, 1) both; animation-timeline: auto; }
@keyframes fp-numero { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .split__text::before { animation: none; } }

/* La striscia dei servizi è una banda piena come le altre; le tessere respirano dentro il container. */



/* ⚠ Dichiarato in coda di proposito: su schermo stretto nessuna fotografia scavalca, e queste regole
   devono vincere su quelle per sezione — a parità di specificità decide l'ordine, non la media query. */
@media (max-width: 980px) {
  .split .split__media, .split--rev .split__media,
  #diagnosi .split__media, #centraline .split__media, #manutenzione .split__media {
    align-self: auto; margin-block: 0;
  }
  #diagnosi .split__media img, #centraline .split__media img, #manutenzione .split__media img {
    height: auto; aspect-ratio: 4 / 5; min-height: 0;
  }
}

/* Il menu porta due sole voci di navigazione — i sei servizi si raggiungono dalle tessere, che sono
   l'indice completo — quindi nella fascia intermedia basta che ceda la CTA: l'azione resta nel telefono. */
@media (min-width: 600px) and (max-width: 1080px) {
  .site-header .site-header__cta { display: none; }
  .site-header__row { gap: 1rem; }
}
/* ⚠ Proprio a 600px — l'ultimo pixel prima dell'hamburger — il numero per esteso faceva sdoppiare la
   riga: poco prima cede il posto al bersaglio compatto, che porta la stessa azione. */
@media (max-width: 700px) {
  .site-header .site-header__tel { display: none; }
  .site-header .site-header__tel--compact { display: flex; }
}

/* ============================ rotture dello schema ============================ */
/* Le sei bande di servizio ripetevano la stessa riga — occhiello, titolo, testo, fotografia in colonna —
   alternando solo il lato: un'alternanza perfetta si indovina dalla seconda in poi, ed è quello che il
   cliente ha chiamato «schema troppo ripetuto». La griglia a Z resta (funziona), ma ogni riga cambia gli
   ELEMENTI che la compongono: nastro, passi numerati, campo circolare, campata a filo, targhe. */

/* Nastro di dettagli: tre scatti verticali del mestiere a filo pagina, senza contenitore. È l'elemento
   ORIZZONTALE che spezza la colonna. ⚠ Vive fuori da .container: dentro una cella di griglia un margine
   negativo in percentuale si risolverebbe sulla larghezza della cella, non della pagina. */
.nastro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: var(--section-y); }
.nastro figure { margin: 0; overflow: hidden; background: var(--ink); }
.nastro img { display: block; width: 100%; height: clamp(240px, 30vw, 440px); object-fit: cover; }
.section:has(.nastro) { padding-bottom: 0; }
/* ⚠ La fotografia in colonna di questa banda non può scavalcare: sotto di lei ora c'è il nastro, e
   l'eccedenza gli finirebbe sopra (la stessa collisione già pagata con le tessere della striscia). */
#manutenzione .split__media { --overhang: 0px; }

/* Passi numerati: le voci del cliente restano parola per parola, il numerale è STRUTTURA (un contatore
   CSS, zero testo aggiunto). Dove il servizio È un processo — duplicare, codificare, ripristinare — la
   sequenza si legge meglio di un elenco di spunte. */
.steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; counter-reset: passo; display: grid; gap: var(--space-4); }
.steps li {
  counter-increment: passo; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  align-items: baseline; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
  content: "0" counter(passo); font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  line-height: 1; color: var(--accent-text); letter-spacing: .02em;
}

/* Campo circolare a metà pagina: il segno della testata ripreso dove la banda ha meno materia. Rompe la
   fila di tessere rettangolari senza chiedere niente alla fotografia, che resta com'è. */
.split .split__media--tondo { --overhang: 0px; align-self: center; margin-top: 0; margin-bottom: 0; }
.split .split__media--tondo img {
  border-radius: 50%; aspect-ratio: 1; height: auto; min-height: 0; box-shadow: var(--shadow-disc);
}
.split__media--tondo::after { width: 84%; opacity: .22; right: -14%; top: -8%; z-index: -1; }

/* Campata: la fotografia esce dal contenitore e arriva a filo pagina. ⚠ Lo scostamento non si scrive in
   percentuale — dentro una cella di griglia si risolverebbe sulla cella — ma con la stessa formula che
   riporta il bordo del contenitore al bordo della finestra. La banda ha overflow-x: clip, quindi la
   sporgenza non genera scorrimento orizzontale. */
.split__media--campata { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); }
.split .split__media--campata img { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

/* Targhe: due sigle non sono un elenco. Affiancate si leggono in un colpo solo e danno alla banda
   l'elemento ORIZZONTALE che le mancava. */
.targhe { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.targhe li {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .06em;
  padding: .5rem 1.15rem; border: 2px solid var(--brand); border-radius: 999px; background: #fff; color: var(--ink);
}
/* La chiusura è una PAUSA: misura stretta e centrata, così il passo del testo cambia prima dei recapiti. */
.closing .container { max-width: 68ch; text-align: center; }
.closing .container .lead { margin-inline: auto; }

/* ⚠ Dove la copy è breve la fotografia 4:5 restava l'elemento più alto e la colonna del testo finiva
   molto prima della banda: un vuoto misurato di 270px. Tolto il minimo d'altezza, la fotografia segue
   la riga decisa dal testo — e le bande escono di altezze diverse, che è ritmo invece che difetto. */
#clima .split__media img, #cambi .split__media img { min-height: 0; }
#clima .split__text, #cambi .split__text { align-self: center; }

/* Ritmo verticale per RUOLO della banda, non una misura sola per tutte: l'apertura scura respira di più,
   le due bande brevi stringono, la pausa finale stringe ancora. */
#diagnosi.section { padding-block: calc(var(--section-y) * 1.12); }
#clima.section, #cambi.section { padding-block: calc(var(--section-y) * 0.76); }
.closing.section { padding-block: calc(var(--section-y) * 0.6); }

/* La targa legale esce dalla colonna e diventa una FASCIA sotto le due colonne: attraversa lo schema a Z
   invece di stargli dentro, ed è anche la gerarchia giusta — l'avvertenza sull'uso agonistico riguarda
   tutta la sezione, non il solo testo di sinistra. */
/* ⚠ Prima stesura sbagliata: con `auto 1fr` e la testa che occupava tutte le righe, il primo capoverso
   finiva in una colonna da 110px — una parola per riga. La testa sta nella PRIMA colonna, i capoversi
   nella seconda, e la seconda deve avere una misura di lettura vera. */
.warn--fascia {
  margin-top: var(--space-7); display: grid; grid-template-columns: minmax(200px, 260px) 1fr;
  gap: var(--space-4) var(--space-6); align-items: start;
  background: var(--ink); color: var(--on-dark); border-left: 0; padding: var(--space-6);
}
.warn--fascia .warn__head { grid-column: 1; grid-row: 1; color: var(--accent-lt); align-items: center; }
.warn--fascia p { grid-column: 2; color: color-mix(in srgb, var(--on-dark) 84%, transparent); margin: 0; max-width: 78ch; }

/* ⚠ La fascia era rimasta a due colonne ANCHE su telefono: `minmax(200px, 260px) 1fr` non ha un
   minimo sotto cui scendere, quindi a 390px il testo finiva in 52px (23px a 360px) — una o due
   lettere per riga — e la griglia, non potendo comprimersi, sfondava il contenitore trascinando
   in overflow orizzontale l'intera pagina. Sotto i 600px titolo e testo vanno incolonnati: i
   capoversi devono tornare in colonna 1, altrimenti `grid-column: 2` genererebbe una seconda
   colonna implicita e il difetto resterebbe. */
@media (max-width: 599.98px) {
  .warn--fascia {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-5);
  }
  .warn--fascia .warn__head { grid-column: 1; grid-row: auto; align-items: flex-start; }
  .warn--fascia p { grid-column: 1; max-width: none; }
  .warn--fascia p + p { margin-top: var(--space-3); }
}

/* Testata a tutta misura: la banda diventa una T invece dell'ennesima riga a due colonne, e il titolo
   lungo di questa sezione smette di spezzarsi in una mezza colonna. */
.banda-testa { margin-bottom: var(--space-6); }
.banda-testa h2 { margin: var(--space-4) 0 0; max-width: 24ch; }

/* Il campo circolare della banda più nuda esce dal bordo della pagina: tagliato dal margine è un segno,
   centrato in colonna sarebbe l'ennesima tessera. ⚠ La sporgenza usa la stessa formula della campata —
   mai una percentuale, che dentro la cella di griglia si risolve sulla cella. */
#cambi .split__media--tondo {
  margin-left: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
  width: calc(100% + max(var(--gutter), (100vw - var(--container)) / 2));
}
#cambi .split__media--tondo::after { right: auto; left: 6%; width: 62%; }

/* ⚠ Con la testata fuori dalle colonne il testo di questa banda è rimasto alto 177px contro una
   fotografia di 420: un vuoto di 229. Centrato, lo scarto si divide sopra e sotto e diventa respiro. */
#centraline .split__text { align-self: center; }
/* Con la testata fuori, il testo che resta è breve: la colonna fotografica stringe e quella del testo
   allarga, così le due si equilibrano invece di lasciare mezza banda vuota. */
#centraline .split { grid-template-columns: 0.82fr 1.18fr; }
#centraline .split__media { align-self: start; }
#centraline .split__media img { height: auto; aspect-ratio: 4 / 5; min-height: 0; }

/* ⚠ GERARCHIA: dando alle bande campate a filo pagina alte 910px, la fotografia della TESTATA — che è
   l'immagine principale del sito — era diventata la sesta per superficie. Il disco cresce e sborda verso
   il bordo come le campate; le fotografie di sezione si fermano prima. La misura del disco è legata a
   quanti pixel ha davvero la sorgente: oltre, il browser ingrandirebbe e si vedrebbe. */
/* ⚠ Vincolata al desktop: scritta fuori dalla media query, questa regola la SCAVALCA (a parità di
   specificità vince l'ultima dichiarata, e una media query non aggiunge specificità) — sul telefono il
   disco era crollato da 349 a 165px. */
@media (min-width: 981px) {
  .hero__grid { grid-template-columns: 1fr 1.18fr; }
  .hero__media {
    width: min(880px, calc(100% + max(var(--gutter), (100vw - var(--container)) / 2)));
    margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
    justify-self: end;
  }
}
.split .split__media img, .split--rev .split__media img { max-height: 690px; }
/* ⚠ Le campate crescono con la finestra: senza un tetto, a 1920 superavano la testata e la gerarchia si
   rovesciava — un difetto che a 1440 non si vede. */
.split__media--campata img { max-width: 760px; margin-left: auto; }
#cambi .split__media--tondo img { max-width: 620px; }

/* ⚠ Alle larghezze intermedie le colonne stringono ma la fotografia di sezione resta 4:5, quindi guadagna
   in altezza quello che perde in larghezza: un cerchio non la batte più e la gerarchia si rovesciava fra
   980 e 1240px. Le fotografie di sezione si accorciano insieme alle colonne. */
/* ⚠ Il tetto da solo non basta: `min-height` VINCE su `max-height` nel calcolo del valore usato, e il
   min-height 420px del verticale teneva una fotografia a 420 con un max-height di 330 applicato — la
   regola risultava scritta e disattesa. Va azzerato insieme al tetto. */
@media (max-width: 1240px) {
  .split .split__media img, .split--rev .split__media img { max-height: 530px; min-height: 0; }
}
/* Sotto i 980 la pagina va a una colonna: lì il disco prende la misura piena come le altre, altrimenti
   l'immagine principale resta un francobollo in mezzo a fotografie a tutta larghezza. */
@media (max-width: 980px) {
  .hero__media { width: min(100%, 680px); }
  .split .split__media img, .split--rev .split__media img { max-height: 520px; min-height: 0; }
}
/* Sul telefono le due misure si pareggiano: nessuna fotografia domina, e la gerarchia la fa l'ORDINE —
   la testata è comunque la prima cosa che si vede. */
@media (max-width: 599.98px) {
  /* ⚠ L'id di #centraline (1,1,1) batte il tetto scritto con le sole classi (0,3,1) a QUALUNQUE larghezza:
     senza nominarlo, quella sola fotografia ignorava il limite e restava la più grande della pagina. */
  .split .split__media img, .split--rev .split__media img, #centraline .split__media img { max-height: 330px; min-height: 0; }
}

/* Marchio col lettering (logo del cliente, marchio + tre righe di testo). Si misura in ALTEZZA e la
   larghezza segue: il lockup non e' quadrato (rapporto 0,945) e le regole a lato fisso lo comprimerebbero.
   ⚠ Le varianti per telefono e per testata contratta stanno QUI e non nelle rispettive media query piu'
   sopra: a parita' di specificita' vince l'ultima dichiarata, quindi tenerle separate rimetterebbe in
   gioco le misure quadrate scritte prima. L'altezza sta sotto la min-height della testata (77px, 60 da
   contratta) per non spingerla. */
.wordmark__mark--lockup { width: auto; height: 58px; }
.wordmark__mark--lockup img { width: auto; height: 100%; display: block; }
.site-header.is-scrolled .wordmark__mark--lockup { width: auto; height: 46px; }
/* Il lockup del footer e' INLINE (non <img>): solo cosi' eredita currentColor e puo' prendere il verde
   di marca. In testata resta inchiostro, perche' li' identifica il sito e il verde su bianco fa 2,29.
   L'altezza e' quella che rende leggibile la riga piu' piccola, che e' il 7,2% del logo: a 150px sono
   ~10,8px, contro i 4,2 che darebbe la misura della testata. */
.site-footer .wordmark__mark--lockup { height: 150px; color: var(--brand); }
.site-footer .wordmark__mark--lockup svg { width: auto; height: 100%; display: block; }
@media (max-width: 599.98px) {
  .wordmark__mark--lockup { height: 44px; }
  .site-header.is-scrolled .wordmark__mark--lockup { height: 40px; }
  .site-footer .wordmark__mark--lockup { height: 116px; }
}
/* Marchio SENZA lettering: rapporto 1,42 (largo), quindi anche qui si misura in altezza. */
.wordmark__mark--wide { width: auto; height: 46px; }
.wordmark__mark--wide img { width: auto; height: 100%; display: block; }
.site-header.is-scrolled .wordmark__mark--wide { width: auto; height: 38px; }
@media (max-width: 599.98px) { .wordmark__mark--wide { height: 40px; } }


/* Nastro a CINQUE: il cliente ha chiesto piu' fotografie sotto Manutenzione. A schermo stretto cinque
   colonne darebbero tessere di poche decine di pixel, quindi scende a due e l'ultima occupa la riga. */
.nastro--cinque { grid-template-columns: repeat(5, 1fr); }
.nastro a { display: block; }
@media (max-width: 900px) {
  .nastro--cinque { grid-template-columns: repeat(2, 1fr); }
  .nastro--cinque figure:last-child { grid-column: 1 / -1; }
}


/* ---------------------------------------------------------------------------
   Giostra di sezione. Le foto del servizio si alternano DA SOLE in dissolvenza, e le lineette sotto le
   comandano a mano. Tutto in CSS: niente JavaScript, perche' il verticale non ha un canale JS proprio e
   `reveal.js` e' dell'emitter, condiviso con ogni verticale della flotta.
   ⭐ Il comando sono `input[type=radio]` nascosti alla vista con le `label` come lineette: cosi' il click
   e la TASTIERA (frecce fra le opzioni di un gruppo radio) funzionano da soli, senza scriverne il codice.
   ⭐ L'avanzamento automatico si ferma appena l'utente sceglie: `:not(:has(:checked))` distingue lo stato
   iniziale — nessuna lineetta selezionata — da quello in cui una scelta e' stata fatta. Senza questo, la
   dissolvenza continuerebbe a scavalcare la foto appena scelta.
   ⚠ Le foto NON sono apribili: il lightbox del motore raccoglie TUTTI gli `a.zoom` della pagina in una
   sequenza sola, quindi dalle chiavi si finiva sui motori. Meglio nessuna apertura che una che confonde.
   ⚠ Le percentuali dei fotogrammi dipendono da QUANTE foto ci sono e non si calcolano in CSS: servono
   keyframes distinti per 2, 3 e 4.
--------------------------------------------------------------------------- */
/* Il blocco media resta una colonna e conserva lo SCAVALCO della banda, come la foto singola di prima. */
.split__media--galleria { display: flex; flex-direction: column; }
.split .split__media--galleria, .split--rev .split__media--galleria { height: calc(100% + var(--overhang)); }
.giostra { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* ⚠ Nascosto alla vista ma NON a tastiera: `display:none` toglierebbe il comando a chi naviga con i tasti. */
.giostra__scelta { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.giostra__scatti { position: relative; display: grid; flex: 1 1 auto; min-height: 0; }
.giostra__foto { grid-area: 1 / 1; margin: 0; min-height: 0; opacity: 0;
  animation-iteration-count: infinite; animation-timing-function: linear; }
.giostra__foto:first-child { opacity: 1; }
/* ⚠ `#centraline .split__media img` (1,2,1) batte i selettori di sole classi: gia' pagata due volte in
   questo giro. L'id va nominato. */
.giostra__foto img, #centraline .giostra__foto img { height: 100%; min-height: 0; }

/* Avanzamento automatico: SOLO finche' nessuna lineetta e' stata scelta. */
.giostra--2:not(:has(.giostra__scelta:checked)) .giostra__foto { animation-name: giostra-2; animation-duration: 10s; }
.giostra--3:not(:has(.giostra__scelta:checked)) .giostra__foto { animation-name: giostra-3; animation-duration: 15s; }
.giostra--4:not(:has(.giostra__scelta:checked)) .giostra__foto { animation-name: giostra-4; animation-duration: 20s; }
.giostra__foto:nth-child(1) { animation-delay: 0s; }
.giostra__foto:nth-child(2) { animation-delay: 5s; }
.giostra__foto:nth-child(3) { animation-delay: 10s; }
.giostra__foto:nth-child(4) { animation-delay: 15s; }
@keyframes giostra-2 { 0%,46% { opacity: 1 } 50%,96% { opacity: 0 } 100% { opacity: 1 } }
@keyframes giostra-3 { 0%,30% { opacity: 1 } 34%,97% { opacity: 0 } 100% { opacity: 1 } }
@keyframes giostra-4 { 0%,22% { opacity: 1 } 25%,97% { opacity: 0 } 100% { opacity: 1 } }

/* Scelta a mano: da qui in poi comanda la lineetta, e la dissolvenza automatica e' gia' spenta sopra. */
.giostra:has(.giostra__scelta:checked) .giostra__foto { opacity: 0; }
.giostra__scelta:nth-of-type(1):checked ~ .giostra__scatti .giostra__foto:nth-child(1) { opacity: 1; }
.giostra__scelta:nth-of-type(2):checked ~ .giostra__scatti .giostra__foto:nth-child(2) { opacity: 1; }
.giostra__scelta:nth-of-type(3):checked ~ .giostra__scatti .giostra__foto:nth-child(3) { opacity: 1; }
.giostra__scelta:nth-of-type(4):checked ~ .giostra__scatti .giostra__foto:nth-child(4) { opacity: 1; }

/* Le lineette. La barra si vede alta 3px ma il bersaglio cliccabile e' la label intera, 26x24.
   ⚠ Qui si usa SEMPRE `background-color`, mai la scorciatoia `background`: la scorciatoia riporta
   `background-clip` al valore iniziale, e le lineette tornerebbero pastiglie piene invece che righe. */
.giostra__punti { list-style: none; display: flex; gap: 8px; margin: var(--space-3) 0 0; padding: 0;
  justify-content: flex-end; flex: 0 0 auto; }
.giostra__punti label { display: block; width: 26px; height: 24px; cursor: pointer;
  background-color: var(--line); background-clip: content-box; padding: 10px 0; border-radius: var(--radius-pill);
  animation-iteration-count: infinite; animation-timing-function: linear; }
.giostra--2:not(:has(.giostra__scelta:checked)) .giostra__punti label { animation-name: punto-2; animation-duration: 10s; }
.giostra--3:not(:has(.giostra__scelta:checked)) .giostra__punti label { animation-name: punto-3; animation-duration: 15s; }
.giostra--4:not(:has(.giostra__scelta:checked)) .giostra__punti label { animation-name: punto-4; animation-duration: 20s; }
.giostra__punti li:nth-child(1) label { animation-delay: 0s; }
.giostra__punti li:nth-child(2) label { animation-delay: 5s; }
.giostra__punti li:nth-child(3) label { animation-delay: 10s; }
.giostra__punti li:nth-child(4) label { animation-delay: 15s; }
@keyframes punto-2 { 0%,46% { background-color: var(--brand) } 50%,96% { background-color: var(--line) } 100% { background-color: var(--brand) } }
@keyframes punto-3 { 0%,30% { background-color: var(--brand) } 34%,97% { background-color: var(--line) } 100% { background-color: var(--brand) } }
@keyframes punto-4 { 0%,22% { background-color: var(--brand) } 25%,97% { background-color: var(--line) } 100% { background-color: var(--brand) } }
.giostra:has(.giostra__scelta:checked) .giostra__punti label { background-color: var(--line); }
.giostra__scelta:nth-of-type(1):checked ~ .giostra__punti li:nth-child(1) label { background-color: var(--brand); }
.giostra__scelta:nth-of-type(2):checked ~ .giostra__punti li:nth-child(2) label { background-color: var(--brand); }
.giostra__scelta:nth-of-type(3):checked ~ .giostra__punti li:nth-child(3) label { background-color: var(--brand); }
.giostra__scelta:nth-of-type(4):checked ~ .giostra__punti li:nth-child(4) label { background-color: var(--brand); }
.giostra__punti label:hover { background-color: var(--accent-text); }
.giostra__scelta:nth-of-type(1):focus-visible ~ .giostra__punti li:nth-child(1) label { outline: 2px solid var(--focus); outline-offset: 4px; }
.giostra__scelta:nth-of-type(2):focus-visible ~ .giostra__punti li:nth-child(2) label { outline: 2px solid var(--focus); outline-offset: 4px; }
.giostra__scelta:nth-of-type(3):focus-visible ~ .giostra__punti li:nth-child(3) label { outline: 2px solid var(--focus); outline-offset: 4px; }
.giostra__scelta:nth-of-type(4):focus-visible ~ .giostra__punti li:nth-child(4) label { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Sulle bande scure la lineetta spenta e' troppo accesa col grigio chiaro dei bordi: le serve un tono
   che regga sul fondo scuro senza gridare. ⚠ La classe e' `section--dark`, non `.section.dark`. */
.section--dark .giostra__punti label { background-color: rgba(255, 255, 255, .26); }
/* ⚠ ...e anche dopo una scelta a mano: la regola che riporta le spente a `--line` e' piu' specifica
   (0,4,0) di quella sopra (0,2,0), e sul fondo scuro le farebbe tornare grigio chiaro. */
.section--dark .giostra:has(.giostra__scelta:checked) .giostra__punti label { background-color: rgba(255, 255, 255, .26); }

/* ⚠ Chi ha chiesto meno movimento non deve vedere NIENTE muoversi: resta la prima foto, che e' quella
   indicata dal cliente come principale, e le lineette restano comunque comandabili a mano. */
@media (prefers-reduced-motion: reduce) {
  .giostra__foto, .giostra__punti label { animation: none !important; }
  .giostra__foto { opacity: 0; }
  .giostra__foto:first-child { opacity: 1; }
  .giostra__punti li:first-child label { background-color: var(--brand); }
}