/* 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); }

/* ---------------------------------------------------------------- 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; }

.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;
  background:
    linear-gradient(180deg, rgba(28,24,19,.50) 0%, rgba(28,24,19,.30) 40%, rgba(28,24,19,.56) 100%),
    radial-gradient(58% 46% at 50% 52%, rgba(24,20,16,.68), rgba(24,20,16,.30) 62%, transparent 82%);
}
/* 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); }
.hero__testo .eyebrow { color: var(--oro-su-scuro); }
.hero__testo .hero__lead { margin-top: var(--space-3); font-size: var(--t-lg); color: #f2ede4; }
/* ⚠⚠ 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; } }
.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 img { width: 100%; height: clamp(340px, 42vw, 620px); 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; } }
.servizio__foto img { width: 100%; height: 100%; min-height: clamp(300px, 34vw, 460px); 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); }
.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-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); }

/* ⚠ 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: 54rem; 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(4, 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; }
.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; }
/* 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: 1fr 1fr; }
.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); }