/* components.css — funeral_services. Le sezioni della pagina unica, la testata, il piè.
   ⚠ Il CSS si verifica nel DOM CALCOLATO, mai a lettura: contro il CSS dei blocchi (iniettato DOPO il
   tema) a parità di specificità VINCE WordPress. Dove serve battere il core si ricopia il suo schema
   di selettore, non si aggiunge un !important. */

/* ---------------------------------------------------------------- occhielli e fregi */
/* Occhiello in corsivo dorato: è il segno di categoria (i template funerari lo usano tutti).
   ⚠ Il colore è `--oro-ink`, NON `--oro`: l'oro pieno su crema fa 2,08. */
.eyebrow {
  font-family: var(--font-display); font-style: italic; font-size: var(--t-lg);
  color: var(--oro-ink); margin-bottom: var(--space-1); letter-spacing: .01em;
}
.section--scura .eyebrow, .banda-scura .eyebrow { color: var(--oro-su-scuro); }
/* ⚠ Sulla tessera tan l'oro-inchiostro scende a 3,56: lì l'occhiello è bruno (6,02). */
.tessera .eyebrow { color: var(--bruno); }

/* Fregio a due foglie: separatore sotto i titoli di sezione. Forma derivata dai fregi del marchio. */
.fregio { display: block; width: 3.4rem; height: 1px; background: var(--oro); margin: var(--space-3) auto 0; position: relative; }
.fregio::before, .fregio::after {
  content: ""; position: absolute; top: 50%; width: .42rem; height: .42rem;
  border: 1px solid var(--oro); border-radius: 50% 0; transform: translateY(-50%) rotate(45deg);
}
.fregio::before { left: -.75rem; }
.fregio::after { right: -.75rem; }
.fregio--sx { margin-inline: 0; }

.section-intro { max-width: 46rem; margin-inline: auto; text-align: center; }
.section-intro h2 { font-size: var(--t-2xl); }
.section-intro .lead { color: var(--ink-muted); margin-top: var(--space-3); font-size: var(--t-lg); }

/* ---------------------------------------------------------------- bottoni */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .78rem 1.5rem; border: 0; border-radius: var(--radius); cursor: pointer;
  /* ⚠ Oro con inchiostro scuro = 5,92. Col bruno sarebbe 4,20, sotto il margine. */
  background: var(--oro); color: var(--ink);
  transition: background .25s var(--ease);
}
.btn:hover { background: var(--accent-dark); color: var(--on-dark); }
.btn--sm { padding: .58rem 1.1rem; font-size: var(--t-xs); }
.btn--lg { padding: .95rem 1.9rem; }
.btn--ghost { background: transparent; color: var(--bruno); border: 1px solid var(--oro); }
.btn--ghost:hover { background: var(--oro); color: var(--ink); }
.banda-scura .btn--ghost { color: var(--on-dark); }
/* ⚠ Il fantasma della TESTATA: `.btn--ghost` nasce con l'inchiostro bruno, giusto sulle bande chiare e
   illeggibile sulla lastra fotografica, dove il fondo e' scuro sotto il velo. Qui il testo e il filo
   sono chiari — misurato sul velo della testata, non a vista. */
.hero .btn--ghost { color: var(--on-dark); border-color: var(--on-dark); }
.hero .btn--ghost:hover { background: var(--on-dark); color: var(--ink); }

/* ---------------------------------------------------------------- testata */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--crema); border-bottom: 1px solid var(--line); }
/* Lo sticky è confinato dal wrapper del template-part: `display:contents` lo libera. */
.wp-block-template-part { display: contents; }
.site-header__row { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-block: .85rem; }
/* ⚠ La nav e la CTA portano un margine di blocco da WP che li spinge sotto il centro. */
.site-header__row > * { align-self: center; margin-block: 0; }
/* Due recapiti in testata: il fisso resta il pulsante pieno, il cellulare lo affianca in tono minore.
   ⚠ Il gap della riga è clamp(1rem,3vw,2.5rem): i due numeri sono UN recapito e vanno stretti fra
   loro, non spaziati come il menu. Chi dichiara solo il fisso non ha questo contenitore. */
.site-header__recapiti { display: flex; align-items: center; gap: .45rem; }
/* ⚠ Un numero di telefono e' UNA parola: spezzarlo su due righe («+39 0766 / 535252») lo rende
   illeggibile come recapito e alza il pulsante di una riga. */
.site-header__cta { white-space: nowrap; }
/* ⚠ Sotto i 992px il secondo numero CEDE PER PRIMO: fra gli 832 e i 900 la riga è già la «banda
   contesa» in cui il menu andava su tre righe col telefono da solo. Sotto gli 832 cadono entrambi
   con la regola che c'era già, e la barra fissa in basso resta la via per chiamare. */
@media (max-width: 61.99rem) { .site-header__cta--cell { display: none; } }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.06; }
.wordmark__name { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--bruno); }
.wordmark__tag { font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--oro-ink); font-weight: 700; }
/* ⚠⚠ Il marchio del cliente è un RASTER 376×253 dentro un SVG: si misura sulla LARGHEZZA, mai
   sull'altezza, e oltre 188px css su schermo 2× non ha più pixel da spendere. */
.wordmark--logo img { width: clamp(122px, 13vw, 174px); height: auto; }
.site-header.is-scrolled .wordmark--logo img { width: clamp(104px, 10vw, 138px); }

/* Navigazione: blocco wp:navigation (mai una nav a mano — il menu seedato dev'essere RESO).
   ⚠ WP tiene le voci scure con `.wp-block-navigation .wp-block-navigation-item__content` (0,2,0):
   per vincere serve un livello in più E il colore sullo __label. */
.site-nav { margin-left: auto; }
@media (min-width: 56.25rem) { .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } }
.site-header .site-nav .wp-block-navigation-item__content,
.site-header .site-nav .wp-block-navigation-item__label {
  color: var(--bruno); font-size: var(--t-sm); letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap;
}
.site-header .site-nav .wp-block-navigation-item__content:hover { color: var(--oro-ink); }
/* ⚠ Il backdrop-filter creerebbe un containing-block per il position:fixed dell'overlay, che si
   ridurrebbe all'ALTEZZA DELLA TESTATA. Qui non c'è blur, ma la guardia resta: è il difetto
   universale di ogni verticale con wp:navigation in overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bruno);
}
/* Il core tiene l'overlay bianco con `:not(.has-background)…:not(.disable-default-overlay)` = 0,5,0:
   si vince solo ricopiando il suo schema di selettore, mai con un livello in meno. */
body .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
body .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background: var(--bruno);
}
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
  color: var(--on-dark); width: 100%; text-align: left; font-size: 1.1rem;
}
/* ⚠⚠ Il `justifyContent:"right"` del blocco vale anche per l'OVERLAY: le voci finivano incollate al
   bordo destro con zero margine, e sotto restavano 542px di vuoto. Il pannello aperto è una schermata
   a sé — si ricopia lo schema di selettore del core, sennò a parità di specificità vince WordPress. */
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  display: flex; flex-direction: column;
}
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open > * { flex: 1 1 auto; min-height: 0; }
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%;
}
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(7rem, 19vh, 10rem) var(--gutter) var(--space-6);
  width: 100%;
  gap: 0;
}
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100%; gap: 0; padding-bottom: 0; flex: 0 0 auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid rgba(255,255,255,.14); width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
  border-top: 1px solid rgba(255,255,255,.14);
}
/* Area di tocco WCAG 2.5.5: 44px minimi, e l'occhiello dorato marca la voce come sul resto del sito. */
body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex; align-items: center; min-height: 72px; padding-block: var(--space-3);
  font-family: var(--font-display); font-size: 1.7rem; letter-spacing: .02em; text-transform: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
  content: ""; width: .42rem; height: .42rem; margin-right: var(--space-3); flex: none;
  border: 1px solid var(--oro-su-scuro); border-radius: 50% 0; transform: rotate(45deg);
}
/* ⚠ La X del core è un `<svg>` da 24px con tratto 1: sul fondo bruno quasi non si vede. */
body .wp-block-navigation .wp-block-navigation__responsive-container-close {
  top: clamp(1rem, 4vw, 1.6rem); right: var(--gutter);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  color: var(--on-dark); transition: background .25s var(--ease), border-color .25s var(--ease);
}
body .wp-block-navigation .wp-block-navigation__responsive-container-close:hover { background: rgba(255,255,255,.1); border-color: var(--oro-su-scuro); }
body .wp-block-navigation .wp-block-navigation__responsive-container-close svg {
  width: 26px; height: 26px; stroke: currentColor; stroke-width: 2.2px; fill: none;
}
/* L'hamburger chiuso: stessa disciplina di taglia, sennò l'unico comando della testata mobile è minuscolo.
   ⚠ La soglia è quella del CORE (599px, misurata sul DOM): sopra, il blocco lo nasconde da sé e qui non
   si tocca il `display`, altrimenti si scavalca la sua decisione a ogni larghezza. */
@media (max-width: 37.4375rem) {
  body .wp-block-navigation .wp-block-navigation__responsive-container-open {
    width: 44px; height: 44px; display: grid; place-items: center; color: var(--bruno);
  }
  body .wp-block-navigation .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; isolation: isolate; min-height: min(76vh, 640px); display: grid; place-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__slide { position: absolute; inset: 0; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Slideshow in dissolvenza incrociata con un Ken Burns appena percettibile. */
.hero--photo .hero__slide { opacity: 0; animation: fp-hero-fade 27s infinite; }
.hero--photo .hero__slide:nth-child(1) { animation-delay: 0s; }
.hero--photo .hero__slide:nth-child(2) { animation-delay: 9s; }
.hero--photo .hero__slide:nth-child(3) { animation-delay: 18s; }
@keyframes fp-hero-fade { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
/* ⚠⚠ Il velo si misura DAL PIXEL, non a occhio: axe non valuta il testo sopra una fotografia e un
   hero a 2,9 passerebbe il gate. Questi valori tengono il p99 dei pixel chiari sotto i glifi a ≥6,0
   su tutte e tre le slide. Il buio SEGUE il testo invece di stendersi sulla banda, così la
   fotografia resta chiara ai bordi: annegarla per far leggere il titolo sarebbe una resa. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* ⚠ Le tre lastre si alternano: il velo va tarato sulla PIU CHIARA, non su quella che capita sotto
     l'occhio al momento della misura. Misurato dal pixel col testo nascosto: l'occhiello e il punto
     piu debole perche e il testo piu piccolo e sta sopra il nucleo del velo. */
  background:
    linear-gradient(180deg, rgba(28,24,19,.60) 0%, rgba(28,24,19,.38) 42%, rgba(28,24,19,.60) 100%),
    radial-gradient(70% 56% at 50% 48%, rgba(24,20,16,.72), rgba(24,20,16,.34) 66%, transparent 88%);
}
/* I tre pannelli si sovrappongono nella stessa cella: l'altezza è quella del più alto, così il
   contenuto sotto non sobbalza a ogni cambio. */
.hero__testi { display: grid; padding-block: clamp(4rem, 10vw, 6rem) 0; }
.hero__testi > * { grid-area: 1 / 1; }
.hero__testo { text-align: center; color: var(--on-dark); max-width: 52rem; margin-inline: auto; }
.hero__testo h1, .hero__testo h2 { color: var(--on-dark); font-size: var(--t-3xl); }
/* ⚠ L'occhiello e il testo PIU PICCOLO sopra la fotografia, quindi il punto piu debole della testata:
   misurato lastra per lastra stava a 5,72 sulla piu chiara. Si schiarisce l'occhiello invece di
   annegare la fotografia sotto altro velo — resta un accento, ma tiene il contrasto sulle tre lastre. */
.hero__testo .eyebrow { color: #E4E9F5; }
/* ⚠ Misurato DAL PIXEL: a 390px l'occhiello stava a 6,41, perche su schermo stretto il blocco di testo
   e piu ALTO del nucleo del velo radiale e le righe di bordo cadono fuori. Si allarga il nucleo — il
   buio continua a seguire il testo invece di stendersi sulla banda. */
@media (max-width: 51.99rem) {
  .hero::after {
    background:
      linear-gradient(180deg, rgba(28,24,19,.64) 0%, rgba(28,24,19,.42) 44%, rgba(28,24,19,.60) 100%),
      radial-gradient(78% 62% at 50% 46%, rgba(24,20,16,.72), rgba(24,20,16,.36) 68%, transparent 90%);
  }
}
.hero__testo .hero__lead { margin-top: var(--space-3); font-size: var(--t-lg); color: #f2ede4; max-width: 46ch; margin-inline: auto; }
/* ⚠⚠ steps(1): il testo è opaco o assente, MAI a metà. Una dissolvenza del titolo lo porterebbe sotto
   AA in transito — il difetto che axe coglie solo se campiona nell'istante giusto. */
.hero--photo .hero__testo { opacity: 0; animation: fp-hero-testo 27s steps(1, end) infinite; }
.hero--photo .hero__testo:nth-child(1) { animation-delay: 0s; }
.hero--photo .hero__testo:nth-child(2) { animation-delay: 9s; }
.hero--photo .hero__testo:nth-child(3) { animation-delay: 18s; }
@keyframes fp-hero-testo { 0%, 32% { opacity: 1; } 33%, 99% { opacity: 0; } 100% { opacity: 1; } }
/* LASTRA DEL MARCHIO in terza posizione: niente pannello di testo e niente velo mentre è in campo.
   ⚠ Il velo è UNO solo per tutta la testata (`.hero::after`), quindi non si può spegnere per lastra:
   si anima in controtempo con la terza, che entra a 18s su 27 = 66,7%. La finestra qui è 63→94%,
   un filo più larga della dissolvenza, così il velo non ricompare sull'oro mentre sfuma. */
.hero--marchio-3 .hero__testo:nth-child(3) { display: none; }
/* ⚠ Un marchio non si RITAGLIA: `cover` lo taglia appena la testata cambia proporzione, e sul telefono
   mostrava solo la fascia centrale (misurato: l'oro arrivava a 1px dal bordo). Qui la lastra si vede
   INTERA e il fondo continua col colore dei suoi angoli, così la fascia che avanza non si stacca.
   Le altre lastre restano fotografie e restano `cover`: una foto tagliata è normale, un marchio no. */
/* ⚠ Il campo NON e' il grigio della testata: e' il blu dell'immagine (mediana del fondo #0b1525,
   tessuto attorno allo stemma da #0e1929 a #1c2839). La lastra ha lo STESSO campo uniforme, quindi
   dove finisce non si vede: si legge un solo blu con il marchio sopra, non un rettangolo incollato.
   ⚠⚠ Il valore e' quello che il BROWSER decodifica sull'orlo (#0e192b), non quello scritto nel file:
   `stats()` di sharp dopo un `extract()` ignora il ritaglio e risponde sull'immagine intera. */
.hero--marchio-3 .hero__slide:nth-child(3) { background: #0e192b; }
.hero--marchio-3 .hero__slide:nth-child(3) img { object-fit: contain; }
/* La CTA e' UNA sola per tutte le lastre: non si puo' spostare "solo sul marchio" con un selettore, si
   sposta NEL TEMPO, in controtempo con la lastra, come il velo. Misurato sulla lastra 1175x1268: la riga
   dei recapiti finisce a y=919 e la punta dello scudo a y=1127; scesi di --fp-cta-giu i pulsanti lasciano
   libero il corpo dello stemma e restano dentro la testata. ⚠ Sul telefono il margine sotto e' molto
   minore (la testata e' alta 507): li' la discesa e' piu' corta, sennò finiscono a filo del bordo. */
.hero--marchio-3 { --fp-cta-giu: 30px; }
@media (min-width: 52rem) { .hero--marchio-3 { --fp-cta-giu: 68px; } }
.hero--marchio-3 .hero__cta { animation: fp-cta-marchio-3 27s infinite; }
@keyframes fp-cta-marchio-3 {
  0%, 63% { transform: none; }
  69%, 94% { transform: translateY(var(--fp-cta-giu)); }
  100% { transform: none; }
}
.hero--marchio-3::after { animation: fp-velo-marchio-3 27s infinite; }
@keyframes fp-velo-marchio-3 { 0%, 63% { opacity: 1; } 69%, 94% { opacity: 0; } 100% { opacity: 1; } }
.hero__cta { margin-top: var(--space-5); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.hero--photo .hero__cta .btn--ghost { color: var(--on-dark); border-color: var(--oro-su-scuro); }

/* Variante design: nessuna fotografia regge, e non si inventa. Campo bruno pieno + fregio. */
.hero--design { background: var(--bruno); min-height: min(58vh, 520px); }
.hero--design::after { background: none; }
.hero--design .hero__testo h1, .hero--design .hero__testo { color: var(--on-dark); }

/* ---------------------------------------------------------------- testate di sezione */
/* Sul sito a pagina unica le ex testate delle cinque pagine diventano i capi di sezione. */
/* ⚠ La testata è `sticky` e alta ~145px: senza `scroll-margin-top` l'ancora porta la sezione a filo
   viewport, cioè SOTTO il cromo, e il titolo del capitolo resta invisibile a chi ci è appena arrivato. */
.testa-sezione, #home { scroll-margin-top: clamp(72px, 11vw, 150px); }
.testa-sezione { position: relative; isolation: isolate; min-height: clamp(240px, 30vw, 380px); display: grid; place-items: center; overflow: hidden; }
.testa-sezione img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* ⚠ Le foto delle testate sono le più chiare del sito (rose bianche, gypsophila, cielo): il velo
   steso non basta e alzarlo annegherebbe la fotografia. Il buio si concentra sull'ellisse del titolo:
   p99 misurato ≥8,4 su tutte e quattro. */
.testa-sezione::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(28,24,19,.30), rgba(28,24,19,.44)),
    radial-gradient(46% 40% at 50% 50%, rgba(22,18,14,.74), rgba(22,18,14,.34) 58%, transparent 84%);
}
.testa-sezione h2 { color: var(--on-dark); font-size: var(--t-2xl); text-align: center; padding-inline: var(--gutter); position: relative; padding-bottom: var(--space-3); }
.testa-sezione h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 3.4rem; height: 1px; background: var(--oro-su-scuro);
}

/* ---------------------------------------------------------------- prosa + foto affiancate */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .split { grid-template-columns: 1.05fr .95fr; } }
.split--testo { align-items: start; }
.split__prosa h2 { font-size: var(--t-2xl); margin-bottom: var(--space-3); }
/* ⚠ La spaziatura sta sulla PROSA, non sul contenitore: scopata su `.split__prosa` non arrivava
   alla banda bruna, dove il blocco di testo non è una colonna di split — misurato 0px fra il
   fregio e il primo capoverso. */
.prosa { margin-top: var(--space-4); }
.split__prosa .prosa { color: var(--ink-muted); }
.split__foto { position: relative; }
.split__foto img { width: 100%; height: auto; }
/* L'ornamento è un fregio di MARGINE: sotto i 62rem non c'è margine dove stare e sparisce.
   Non deve mai finire sotto una colonna di testo — un acquerello dietro la prosa la rende illeggibile. */
.ornamento { display: none; position: absolute; width: clamp(150px, 16vw, 230px); opacity: .5; pointer-events: none; z-index: -1; }
@media (min-width: 62rem) { .ornamento { display: block; } }

/* ---------------------------------------------------------------- pilastri (3 colonne) */
.pilastri { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 52rem) { .pilastri { grid-template-columns: repeat(3, 1fr); } }
.pilastro { text-align: center; padding-inline: clamp(0rem, 2vw, 1.5rem); }
@media (min-width: 52rem) { .pilastro + .pilastro { border-left: 1px solid var(--line); } }
.pilastro__segno {
  width: 2.8rem; height: 2.8rem; margin: 0 auto var(--space-4); border: 1px solid var(--oro);
  border-radius: 50% 0; transform: rotate(45deg); position: relative;
  transition: background .4s var(--ease), transform .5s var(--ease);
}
.pilastro__segno::after {
  content: ""; position: absolute; inset: .55rem; border: 1px solid var(--oro); border-radius: 50% 0; opacity: .55;
}
.pilastro:hover .pilastro__segno { background: rgba(197,168,118,.14); transform: rotate(45deg) scale(1.06); }
.pilastro h3 { font-size: var(--t-xl); margin-bottom: var(--space-2); }
.pilastro p { color: var(--ink-muted); }

/* ---------------------------------------------------------------- percorso numerato */
.percorso { margin-top: var(--space-4); display: grid; gap: var(--space-4); position: relative; }
.percorso li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; position: relative; }
/* ⚠ `font-variant-numeric: lining-nums`: Cormorant usa per default le cifre in stile antico e l'«1»
   accanto al testo si legge come una «I» maiuscola. Il bollo tondo toglie ogni ambiguità. */
.percorso .numero {
  font-family: var(--font-display); font-variant-numeric: lining-nums; font-size: 1.15rem;
  color: var(--oro-ink); line-height: 1; width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center; border: 1px solid var(--oro); border-radius: 50%;
  background: var(--avorio); position: relative; z-index: 1;
}
/* Il filo che lega i passi: il percorso è una sequenza, e si vede. Si spegne sull'ultimo. */
.percorso li::before {
  content: ""; position: absolute; left: 1.3rem; top: 2.6rem; bottom: calc(var(--space-4) * -1);
  width: 1px; background: linear-gradient(180deg, var(--oro), rgba(197,168,118,.25));
}
.percorso li:last-child::before { display: none; }

/* ---------------------------------------------------------------- territori */
.territori { position: relative; isolation: isolate; overflow: hidden; background: var(--crema); }
.territori__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .18; }
.territori__griglia { display: grid; gap: var(--space-4); margin-top: var(--space-5); text-align: center; }
@media (min-width: 46rem) {
  .territori__griglia { grid-template-columns: repeat(4, 1fr); }
  .territori__griglia > * + * { border-left: 1px solid var(--line); }
}
.territori__griglia p { font-family: var(--font-display); font-size: var(--t-xl); color: var(--bruno); }
.territori__cta { text-align: center; margin-top: var(--space-5); }

/* ---------------------------------------------------------------- team */
/* ⚠ La foto del team e la testata di sezione successiva sono due bande fotografiche a filo: la banda
   crema che restava fra loro (il padding-bottom della sezione) leggeva come una riga di taglio. Si
   SALDANO, e la sezione perde il proprio fondo sotto la foto.
   ⚠ `object-position` al 50% tagliava le TESTE: il soggetto sta nel terzo alto, e con `cover` la
   posizione si riferisce allo SCARTO fra immagine e riquadro, non al centro del soggetto. */
.team { padding-bottom: 0; }
.team__foto { margin-top: var(--space-6); }
.team__foto { position: relative; height: clamp(340px, 42vw, 620px); }
.team__foto img { position: absolute; inset: -18% 0; width: 100%; height: 136%; object-fit: cover; object-position: 50% 28%; display: block; }

/* ---------------------------------------------------------------- servizi (righe alternate) */
.servizio { display: grid; align-items: center; }
@media (min-width: 62rem) { .servizio { grid-template-columns: 1fr 1fr; } }
/* ⚠⚠ LA PARALLASSE SCOPRE IL PROPRIO CONTENITORE. La traslazione che applica `emit.mjs` è una
   percentuale dell'altezza dell'IMMAGINE, e il fattore |p| arriva a ~1,15 ai bordi della finestra, non
   a 1. Con l'immagine alta quanto il contenitore il gioco è ZERO: a fine banda si vede il fondo.
   Misurato scorrendo davvero, non supposto: 18px scoperti sulle righe di servizio e 31px sotto la foto
   del team, che è la «barra» fra due bande fotografiche.
   Il gioco per lato dev'essere ≥ 1,15 · amp% · altezza dell'immagine:
     amp 7  → k ≥ 1,192 · qui k = 1,26 (gioco 13% contro 10,1% di traslazione massima)
     amp 10 → k ≥ 1,299 · qui k = 1,36 (gioco 18% contro 15,6%)
   ⚠ Il `min-height` passa dall'immagine al CONTENITORE: con l'immagine in posizione assoluta non
   farebbe più da pavimento alla riga, e la griglia collasserebbe. */
.servizio__foto { position: relative; min-height: clamp(300px, 34vw, 460px); }
.servizio__foto img { position: absolute; inset: -13% 0; width: 100%; height: 126%; object-fit: cover; }
.servizio__testo { padding: clamp(2.2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4.5rem); }
.servizio__testo h3 { font-size: var(--t-xl); margin-bottom: var(--space-3); }
.servizio__testo p { color: var(--ink-muted); font-size: var(--t-servizio); }
.servizio:nth-child(even) { background: var(--crema); }
@media (min-width: 62rem) { .servizio:nth-child(even) .servizio__foto { order: 2; } }
.recapito { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--t-servizio-sm); color: var(--ink-muted); }
.recapito li { display: flex; gap: var(--space-2); align-items: baseline; }
.recapito li::before { content: "·"; color: var(--oro); }
.recapito a { border-bottom: 1px solid var(--oro); }

/* Il collegamento che apre il DETTAGLIO di un servizio (schede in popup, gated dal progetto). È un
   BERSAGLIO, non una riga di testo: 44px è la soglia WCAG 2.5.5, e qui vive in fondo a una colonna
   dove il dito arriva dopo un paragrafo lungo. Il colore è l'oro-INCHIOSTRO: l'oro superficie su
   crema misura 2,08 e non porta testo. */
.servizio__more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); min-height: 44px;
  font-family: var(--font-display); font-size: var(--t-lg); color: var(--oro-ink);
  border-bottom: 1px solid var(--oro);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.servizio__more::after { content: "→"; }
.servizio__more:hover { gap: var(--space-3); color: var(--bruno); }

/* ⚠ Nessun effetto sotto il puntatore su queste fotografie: non si aprono al click (decisione owner),
   e un'immagine che reagisce all'hover senza portare da nessuna parte promette un'interazione che non
   esiste. `overflow:hidden` resta perché serve alla parallasse, non a un ingrandimento. */
.servizio__foto { overflow: hidden; }
.team__foto { overflow: hidden; }

/* Attacco editoriale: il primo capoverso del manifesto porta la misura maggiore e il filetto dorato.
   È il surrogato onesto della pull-quote, che richiederebbe un'estensione di schema. */
.prosa--attacco > p:first-child {
  font-size: var(--t-lg); color: var(--bruno); line-height: 1.5;
  padding-left: var(--space-3); border-left: 2px solid var(--oro);
}

/* La testata si assottiglia allo scroll: la classe la commuta reveal.js su `.fp-shrink`. */
.site-header { transition: padding .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(77, 68, 55, .07); }
.site-header.is-scrolled .site-header__row { padding-block: .45rem; }

/* La TARGA: campo bruno pieno RIENTRATO dal contenitore. È l'unico blocco della pagina che non va a
   filo del viewport, e proprio per questo si stacca — un fondo chiaro con un blocco pieno dentro dà
   carattere senza stravolgere. ⚠ Sul bruno il testo è --on-dark-muted (6,12 misurato). */
.targa {
  margin: var(--space-6) auto 0; max-width: 50rem; background: var(--bruno); color: var(--on-dark-muted);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 4vw, 3.4rem); position: relative; text-align: center;
}
.targa p { font-size: var(--t-lg); line-height: 1.6; }
.targa strong { color: var(--on-dark); }
.targa__fregio {
  position: absolute; top: 0; left: 50%; width: 3.4rem; height: 2px; background: var(--oro);
  transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------- recensioni */
/* ⚠ Tre colonne al massimo: a quattro la misura di lettura scende a ~26 caratteri, sotto ogni soglia.
   align-items:start perché le altezze sono diverse per natura — stirarle produce vuoti, non ritmo. */
.recensioni { display: grid; gap: var(--space-4); margin-top: var(--space-5); align-items: start; }
@media (min-width: 46rem) { .recensioni { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .recensioni { grid-template-columns: repeat(3, 1fr); } }
.recensione { border-top: 2px solid var(--oro); padding: var(--space-4) var(--space-3) 0; position: relative; }
.recensione blockquote { margin-bottom: var(--space-3); color: var(--ink-muted); font-size: var(--t-sm); position: relative; }
.recensione blockquote::before {
  content: "\201C"; position: absolute; left: -.15em; top: -.42em;
  font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--oro); opacity: .5;
  pointer-events: none;
}
.recensione blockquote { padding-left: .9rem; }
.recensione cite { font-style: normal; font-family: var(--font-display); font-size: var(--t-lg); color: var(--bruno); display: block; }
.recensione .data { display: block; font-size: var(--t-xs); color: var(--ink-muted); letter-spacing: .05em; }

/* ---------------------------------------------------------------- banda bruna */
.banda-scura { background: var(--bruno); color: var(--on-dark); position: relative; isolation: isolate; overflow: hidden; }
.banda-scura .velo { position: absolute; right: -6%; top: -30%; width: min(52vw, 640px); opacity: .08; z-index: -1; }
.banda-scura h2 { color: var(--on-dark); font-size: var(--t-2xl); }
.banda-scura p { color: var(--on-dark-muted); }
.banda-scura__griglia { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .banda-scura__griglia { grid-template-columns: 1fr 1fr; } }
.attestazioni { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-3); align-items: start; }
.attestazioni img { width: 100%; height: auto; }
.medaglione {
  position: absolute; right: 4%; bottom: -8%; width: 6.4rem; height: 6.4rem; border-radius: 50%;
  background: var(--oro); color: var(--ink); display: grid; place-content: center; text-align: center;
  font-family: var(--font-display); line-height: 1.05; font-size: .95rem;
}
.medaglione b { display: block; font-size: 1.5rem; font-weight: 500; }

/* ---------------------------------------------------------------- contatti */
/* ⚠ Le tessere devono STIRARSI alla riga: con altezze diverse il filetto della griglia trapelava
   sopra le tre più basse — è la striscia grigia che si vedeva. E il contenuto si centra nel proprio
   riquadro, sennò tessere di altezza uguale restano con il testo appoggiato in alto. */
.tessere { display: grid; gap: 1px; background: var(--line); align-items: stretch; }
@media (min-width: 46rem) { .tessere { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.tessera {
  background: var(--tan); padding: var(--space-5) var(--space-3); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  transition: background .3s var(--ease);
}
.tessera:hover { background: #e6d7bf; }
/* Una tessera il cui corpo è vuoto è un titolo che promette un recapito che l'agenzia non ha dichiarato
   (il WhatsApp, dove manca l'atomo): sparisce con la propria colonna. ⚠ La griglia ha QUATTRO tracce
   fisse, quindi togliere il figlio senza togliere la traccia lascerebbe un vuoto a destra. Chi porta
   tutti e quattro i recapiti non vede cambiare nulla. */
.tessera:not(:has(p, ul, a)) { display: none; }
.tessera h3 { font-size: var(--t-lg); color: var(--bruno); margin-bottom: var(--space-1); }
.tessera a, .tessera p { color: var(--bruno); font-size: var(--t-sm); }
.tessera a { border-bottom: 1px solid rgba(77,68,55,.4); }
.tessera__segno { width: 1.7rem; height: 1.7rem; margin: 0 auto var(--space-2); border: 1px solid var(--bruno); border-radius: 50% 0; transform: rotate(45deg); opacity: .7; }

.contatti__cols { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .contatti__cols { grid-template-columns: .9fr 1.1fr; } }
.contact-form .field { margin-bottom: var(--space-3); }
.contact-form label { display: block; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-1); }
.contact-form input, .contact-form textarea {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--line); background: var(--paper);
  border-radius: var(--radius);
}
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form .row { display: grid; gap: var(--space-3); }
@media (min-width: 34rem) { .contact-form .row { grid-template-columns: 1fr 1fr; } }
/* ⚠ `.consent` è un flex: un <a> dentro il testo diventerebbe un flex-item a sé. Il testo INTERO,
   link compreso, sta in uno <span>.
   ⚠⚠ Due difetti misurati sul sito vero: (1) la casella di spunta è un flex-item e SI STIRAVA a 273px
   — il segno di spunta restava a sinistra e sembrava un vuoto enorme fino al testo; serve `flex: none`.
   (2) `.consent` è un <label>, quindi ereditava da `.contact-form label` il MAIUSCOLO con tracking di
   1,8px: una frase di consenso legale in maiuscolo spaziato non si legge. Qui si ripristina la prosa. */
.contact-form .consent {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--t-sm); color: var(--ink-muted); margin-bottom: var(--space-3);
  text-transform: none; letter-spacing: normal; line-height: 1.5;
}
.contact-form .consent input[type="checkbox"] {
  flex: none; width: 1.05rem; height: 1.05rem; margin-top: .18rem; accent-color: var(--oro-ink);
}
.contact-form .consent a { border-bottom: 1px solid var(--oro); }
.form-note { font-size: var(--t-xs); color: var(--ink-muted); margin-top: var(--space-2); }
/* Identificazione fiscale completa del cliente, come la pubblica lui. */
.dati-fiscali { margin-top: var(--space-4); font-size: var(--t-xs); letter-spacing: .06em; color: var(--ink-muted); }

/* ---------------------------------------------------------------- piè */
.pie-marchio { background: var(--avorio); text-align: center; padding-block: var(--space-5); }
.pie-marchio img { width: 172px; margin-inline: auto; }
.site-footer { background: var(--bruno-scuro); color: var(--on-dark); position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-6) 0; }
.site-footer .velo { position: absolute; right: -8%; bottom: -40%; width: min(46vw, 560px); opacity: .07; z-index: -1; }
.site-footer__griglia { display: grid; gap: var(--space-5); text-align: center; }
.site-footer dt { font-family: var(--font-display); font-size: var(--t-lg); color: var(--oro-su-scuro); margin-bottom: var(--space-1); }
.site-footer dd { margin: 0 0 var(--space-3); color: var(--on-dark-muted); font-size: var(--t-sm); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--on-dark); }
.social { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.social a { font-size: var(--t-sm); letter-spacing: .06em; border-bottom: 1px solid rgba(217,194,149,.45); padding-bottom: .15rem; }

/* --- I canali come BOTTONI (forma dichiarata dal progetto: brand.social_style = buttons) ---
   Il pie' e' bruno scuro: il bottone e' un disco d'oro-superficie con il glifo BRUNO sopra, non oro
   su bruno. Misurato: #c5a876 su #3a332a fa 6,49 per il disco, e il glifo #3a332a sul disco fa 6,49
   — l'oro non porta MAI inchiostro, ma qui non e' inchiostro: e' la superficie. */
.social--bottoni { gap: var(--space-3); }
.social--bottoni a { border-bottom: 0; padding-bottom: 0; }
.social__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;               /* 46 > 44: soglia WCAG 2.5.5 anche su desktop */
  border-radius: var(--radius-pill);
  background: var(--oro); color: var(--bruno-scuro);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.social__btn:hover { background: var(--oro-su-scuro); }
.social__btn:focus-visible { outline: 3px solid var(--on-dark); outline-offset: 3px; }
.social__btn svg { display: block; }

/* La PULSAZIONE. Vive sul contenitore e si propaga con un ritardo per bottone, cosi' la fila respira
   invece di tremolare. Ampiezza minima (1 -> 1.06): in questo mestiere un elemento che pulsa forte
   sarebbe fuori registro, e il suo compito e' solo dire «qui si puo' scrivere».
   ⚠ Nessuna opacita' nell'animazione: il contrasto del glifo non deve attraversare valori intermedi. */
@keyframes fp-social-pulsa {
  0%, 62%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(197,168,118,.55); }
  76%           { transform: scale(1.06); box-shadow: 0 0 0 7px rgba(197,168,118,0); }
}
.social--pulsa .social__btn { animation: fp-social-pulsa 3.6s var(--ease) infinite; }
.social--pulsa li:nth-child(2) .social__btn { animation-delay: .28s; }
.social--pulsa li:nth-child(3) .social__btn { animation-delay: .56s; }
.social--pulsa li:nth-child(4) .social__btn { animation-delay: .84s; }
.social--pulsa li:nth-child(5) .social__btn { animation-delay: 1.12s; }
/* Su mobile ogni recapito e ogni canale è un BERSAGLIO, non una riga di testo: 44px è la soglia WCAG 2.5.5. */
/* Banda contesa 600–900px: nessuno va a capo, si stringe chi può. */
@media (max-width: 56.25rem) and (min-width: 37.5rem) {
  .site-header .site-nav .wp-block-navigation__container { flex-wrap: nowrap; }
  .site-header .site-nav .wp-block-navigation-item__content { font-size: .82rem; letter-spacing: .05em; }
  .site-header .site-nav { gap: .9rem; }
  .wordmark--logo img { width: clamp(96px, 11vw, 122px); }
}
@media (max-width: 43.75rem) and (min-width: 37.5rem) {
  .site-header .site-nav .wp-block-navigation-item__content { font-size: .74rem; letter-spacing: .03em; }
  .site-header .site-nav { gap: .6rem; }
  .site-header__row { gap: .8rem; }
  .wordmark--logo img { width: 84px; }
}
/* Sotto gli 832px il telefono della testata CEDE: la barra fissa in basso porta già Chiama e WhatsApp,
   e ripeterlo qui è ciò che spingeva le voci su tre righe. */
@media (max-width: 51.99rem) {
  .site-header .site-header__cta { display: none; }
  .social { gap: var(--space-2); }
  .social a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding-inline: var(--space-3); border-bottom: 0; border: 1px solid rgba(217,194,149,.34); }
  .site-footer dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .tessera a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ⚠ `space-between` NON centra la voce di mezzo: la sua posizione dipende dalle larghezze dei blocchi
   laterali, e qui il primo è tre volte il terzo. Con `1fr auto 1fr` la colonna centrale è centrata per
   COSTRUZIONE, qualunque cosa contengano le altre due — ed è così sugli altri siti della flotta. */
.legale {
  margin-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--space-4);
  font-size: var(--t-xs); color: var(--on-dark-muted);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2) var(--space-5); align-items: center;
}
.legale > :first-child { justify-self: start; }
.legale > :last-child { justify-self: end; }
@media (max-width: 45rem) {
  .legale { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-3); }
  .legale > :first-child, .legale > :last-child { justify-self: center; }
}
.dgitaly { display: inline-flex; align-items: center; gap: .45rem; }
.dgitaly img { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- barra CTA mobile */
/* In questo mestiere si CHIAMA: la prima azione è il telefono, non il modulo. */
.cta-bar { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); }
/* ⚠ `auto-fit` collassa la traccia VUOTA: con due azioni restano due metà come prima, con una sola il
   pulsante prende tutta la riga invece di lasciarne metà nuda. */
.cta-bar a { padding: .95rem; text-align: center; font-weight: 700; font-size: var(--t-sm); letter-spacing: .08em; text-transform: uppercase; background: var(--crema); color: var(--bruno); }
.cta-bar a.is-primary { background: var(--oro); color: var(--ink); }
@media (min-width: 52rem) { .cta-bar { display: none; } }
@media (max-width: 51.99rem) { .site-footer { padding-bottom: 3.6rem; } }

/* ---------------------------------------------------------------- pagina Privacy */
.page-head { background: var(--crema); padding-block: var(--space-6); text-align: center; }
/* ⚠ La page-head NON riusa la size dell'hero: è una testata di pagina, non un hero. */
.page-head h1 { font-size: var(--t-xl); }
.prosa-legale { max-width: 46rem; margin-inline: auto; }
.prosa-legale h2 { font-size: var(--t-xl); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prosa-legale p, .prosa-legale li { color: var(--ink-muted); }
.prosa-legale ul { margin: var(--space-2) 0 0; }
.prosa-legale li { position: relative; padding-left: var(--space-3); margin-bottom: var(--space-1); }
.prosa-legale li::before { content: "·"; position: absolute; left: 0; color: var(--oro); }

/* ---------------------------------------------------------------- 404 */
.errore-404 { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.errore-404 h1 { font-size: var(--t-2xl); margin-bottom: var(--space-3); }
.errore-404 p { color: var(--ink-muted); margin-bottom: var(--space-4); }

/* Griglia della galleria: esiste solo dove il progetto dichiara delle fotografie, quindi non tocca chi
   non la usa. Le celle tengono il rapporto 4:3 e la foto riempie ritagliando dal centro. */
.galleria-foto { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .galleria-foto { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.galleria-foto figure { margin: 0; overflow: hidden; background: var(--surface); }
.galleria-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ⚠ Un collegamento dentro una riga di testo e alto quanto la riga: 21-26px misurati, sotto i 40px che
   un dito pretende. L'area cresce con un riempimento verticale compensato dal margine, cosi il ritmo
   della riga non si sposta di un pixel. */
@media (max-width: 51.99rem) {
  .recapito a, .legale a, .dgitaly {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; min-width: 44px;
    padding: .5rem .55rem; margin: -.5rem -.55rem;
  }
}


/* ---------------------------------------------------------------- popup delle schede (dettagli) */
/* ⚠⚠ Il foglio condiviso `card-modal.css` dipinge l'invito con `--on-dark` (bianco) e un filo
   `--accent-lt` che in questo verticale NON ESISTE: su una banda chiara l'invito e' bianco su bianco
   e il filo cade nell'invalido. Qui l'invito prende l'oro-inchiostro, che su avorio misura 7,13, e
   sulle bande profonde torna chiaro. */
/* ⚠⚠ Il prefisso `body` non e' decorazione: `card-modal.css` e' accodato DOPO `components.css` (ne
   dichiara la dipendenza), quindi a parita' di specificita' vince lui. Misurato: senza questo livello
   in piu' l'invito restava rgb(255,255,255) su rgb(247,250,252) — bianco su bianco, contrasto 1,05. */
body .fp-cm-apri a { color: var(--oro-ink); border-bottom: 1px solid var(--oro); }
body .fp-cm-apri a:hover { color: var(--bruno); }
body .banda-scura .fp-cm-apri a, body .section--scura .fp-cm-apri a { color: var(--oro-su-scuro); border-bottom-color: var(--oro-su-scuro); }
body .fp-cm-apri a::after { content: " →"; }

/* ⚠ Il pulsante di chiusura del popup nasce a 2,6rem = 41,6px, sotto i 44px della soglia WCAG 2.5.5:
   e' l'unico modo di chiudere il pannello col dito. Qui e' un bersaglio pieno. */
body .fp-cm__x { width: 46px; height: 46px; }

/* La griglia della galleria chiude le proprie righe quando il progetto dichiara quante colonne vuole.
   ⚠ Senza, `auto-fit` sceglie il numero di colonne dalla larghezza e l'ultima riga resta MONCA: otto
   fotografie in cinque colonne lasciano due celle vuote in fondo, che leggono come immagini mancanti.
   Chi non dichiara resta su `auto-fit`, cioe' il comportamento di sempre. */
@media (min-width: 46rem) {
  .galleria-foto[style*="--gal-col"] { grid-template-columns: repeat(var(--gal-col), 1fr); }
}

/* La griglia di galleria si SALDA alla banda che la segue: è la stessa regola che il verticale applica
   già alla foto del team. ⚠ Fra due superfici a filo, la striscia di fondo lasciata dal padding legge
   come una RIGA DI TAGLIO, non come respiro — misurati 63px di avorio fra l'ultima fotografia della
   flotta e la banda crema. */
.section--saldata { padding-bottom: 0; }

/* Il blocco di dettaglio reso IN LINEA (una sezione che dichiara `inline`): non è un popup, è prosa di
   pagina. ⚠ Prende TUTTA la larghezza del contenitore e va a capo da solo — decisione owner, ripetuta:
   il testo non si incolonna al centro lasciando aria ai lati. È l'eccezione dichiarata alla misura di
   lettura che il resto del verticale rispetta (la testata di sezione resta a 46rem e centrata). */
.fp-cm-sez--inline { max-width: none; margin-inline: 0; }
.fp-cm-sez--inline .fp-cm-src { border-top: 1px solid var(--line); margin-top: var(--space-5); padding-top: var(--space-5); }
.fp-cm-sez--inline .fp-cm-src__t { font-size: var(--t-xl); }
/* La prosa del blocco in linea legge alla stessa misura delle righe di servizio che introduce: due
   corpi diversi dentro la stessa sezione si notano, e sarebbe la metà del rimedio. */
.fp-cm-sez--inline .fp-cm-src p { color: var(--ink-muted); font-size: var(--t-servizio); }
.fp-cm-sez--inline .fp-cm-src h4 { font-family: var(--font-display); font-size: var(--t-lg); color: var(--bruno); margin: var(--space-4) 0 var(--space-2); }