/* components.css — componenti event_rental. Core + CSS owned, niente dipendenze.
   Noleggio/allestimenti per eventi e feste, matrimonio come occasione di punta. Registro editoriale
   d'atelier: base AVORIO, bande TORTORA, verde acqua del marchio come unico accento.
   ⭐ LE DUE REGOLE CHE REGGONO IL REGISTRO:
   1. Il serif display vive SOLO a corpi grandi (h1, h2, numeri). Ogni testo piccolo — etichette, voci di
      menu, bottoni, didascalie — porta Inter MAIUSCOLO spaziato: è il contrappunto del serif. Un serif ad
      alto contrasto a 13px con peso finto è esattamente il difetto che il registro non perdona.
   2. Le foto di prodotto stanno dentro un PASSE-PARTOUT (--mat) e la loro didascalia sta FUORI dall'immagine.
      Il materiale porta grafica promozionale impressa: il testo bianco sovrapposto la fa leggere come
      volantino, il margine di carta con la didascalia sotto la riporta a scheda di catalogo.
   Contrasti WCAG AA verificati (ink 16.6 su carta, brand 5.73, bianco su brand 6.12, ink su cipria 11.4,
   on-dark-muted 5.01 su verde acqua). Vincoli: --brand-mid e --accent sono SUPERFICI e portano solo ink. */

/* ---------- Micro-label (eyebrow): l'etichetta d'atelier ---------- */
.eyebrow {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--space-4); display: block;
}
.eyebrow--on-dark { color: var(--on-dark-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .95em 1.9em; border-radius: var(--radius-pill); line-height: 1;
  font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* Bottone caldo: la cipria è una SUPERFICIE e porta solo l'inchiostro (11.4). */
.btn--accent, .btn--coral { background: var(--accent); color: var(--ink); }
.btn--accent:hover, .btn--coral:hover { background: var(--accent-dark); }
.btn--light { background: var(--surface); color: var(--ink); }
.btn--light:hover { background: var(--sage-tint); }
.btn--ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost.on-dark:hover { background: #fff; color: var(--brand-dark); border-color: #fff; }

/* Ponte core/button WP -> look ForgePress (round-trip valido; formalizzato in theme.json). */
.wp-block-button__link { border-radius: var(--radius-pill); padding: .95em 1.9em;
  font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; border: 1px solid transparent; }
.wp-block-button.is-primary .wp-block-button__link { background: var(--brand); color: #fff; }
.wp-block-button.is-primary .wp-block-button__link:hover { background: var(--brand-dark); }
.wp-block-button.is-ghost .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
.wp-block-button.is-ghost.on-dark .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; }
.wp-block-button.is-coral .wp-block-button__link { background: var(--accent); color: var(--ink); }
.wp-block-button.is-light .wp-block-button__link { background: var(--surface); color: var(--ink); }

/* ---------- Header (sticky, wordmark, wp:navigation con overlay mobile) ---------- */
/* display:contents dissolve il wrapper del template-part WP, altrimenti lo sticky si stacca subito. */
.wp-block-template-part { display: contents; }
/* ⭐⭐ LA TESTATA È SCURA PERCHÉ IL MARCHIO LO CHIEDE. Il wordmark del cliente è un gradiente che va dal
   grigio chiarissimo al ciano: su una barra chiara la sua metà sinistra sparisce. Il buio non è una scelta
   di gusto, è il fondo che quel marchio esige per esistere — e su di esso il ciano diventa l'accento.
   ⚠ Il buio è CALDO (calore +0.035, la sabbia sta a +0.067): una barra neutra sopra una pagina sabbia si
   legge come un pezzo di un altro sito. */
.site-header { position: sticky; top: 0; z-index: 50; background: transparent;
  border-bottom: 0; padding-block: clamp(.55rem, .35rem + .6vw, .95rem); }
/* ⭐⭐ LA TESTATA È UNA PILLOLA CHE GALLEGGIA, non una fascia che taglia la pagina. È il gesto che porta il
   registro «bolla» dove si guarda per primo, e ha un effetto collaterale utile: una barra che non tocca i
   bordi pesa meno di una a piena larghezza anche a parità di colore. La riga porta già la classe
   `container`, quindi la pillola nasce senza toccare il markup. */
/* ⭐⭐ LA TESTATA È UN MATERIALE, NON UNA TINTA. Una lastra piena è spenta per definizione: qualunque
   colore le si dia, resta la stessa a ogni scorrimento. Un materiale semitrasparente e saturato prende
   invece ciò che ha sotto — sopra la fotografia dell'hero si accende dei suoi colori, sopra la sabbia
   si scalda — e quel cambiamento continuo è ciò che toglie il grigiore.
   Tre ingredienti, tutti necessari: la SATURAZIONE (ravviva ciò che filtra), il gradiente diagonale
   (dà un verso alla luce, come un vetro spesso), e la sottile linea chiara in alto — il riflesso del
   bordo, che è la firma del vetro. Senza quella riga il pannello resta una campitura piatta. */
.site-header__row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: nowrap;
  background:
    linear-gradient(118deg, rgba(24,74,90,.90) 0%, rgba(31,86,104,.86) 46%, rgba(26,66,88,.90) 100%);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  border-radius: var(--radius-pill);
  padding: clamp(.5rem, .35rem + .5vw, .8rem) clamp(1rem, .6rem + 1.4vw, 1.9rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 4px 14px -6px rgba(20,52,66,.32), 0 22px 50px -26px rgba(20,52,66,.50); }
.site-header__row > * { align-self: center; margin-block: 0; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: 0; color: var(--on-dark); }
.wordmark small { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--sage); }
.wordmark b { color: var(--sage); font-weight: 400; }
.wordmark--logo { gap: .6rem; }
.wordmark__mark { height: 40px; width: 40px; flex: 0 0 auto; display: block; align-self: center; }
.wordmark__logo { height: 46px; width: auto; flex: 0 0 auto; display: block; align-self: center; }
.wordmark__city { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark-muted); align-self: center; white-space: nowrap; }
@media (max-width: 560px) { .wordmark__city { display: none; } }
.site-header .site-nav { margin-left: auto; }
.site-nav.wp-block-navigation, .site-nav .wp-block-navigation__container { align-items: center; }
/* ⚠ La spaziatura delle maiuscolette costa larghezza: alla misura d'etichetta (--tracking-label) sette
   voci non stanno più su una riga accanto a marchio, telefono e bottone, e la testata va a capo. Nella
   navigazione la spaziatura è quindi la METÀ, che è il massimo compatibile con la riga unica misurata. */
.site-nav .wp-block-navigation__container { gap: var(--space-4); flex-wrap: nowrap; }
/* ⚠⚠ Il colore delle voci va dichiarato con TRE classi, non due: a pari specificità vince WordPress, che
   qui impone l'inchiostro del tema. Finché la testata era chiara il difetto era invisibile — la nostra
   regola e quella del core chiedevano lo stesso colore — e si è visto solo portando la barra sul buio.
   Una regola che «funziona» perché chiede ciò che chiederebbe comunque il core non sta funzionando. */
.site-header .site-nav .wp-block-navigation-item__content { text-decoration: none; font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark); white-space: nowrap; }
/* Sul buio l'accento è il CIANO del marchio (10.56): l'azzurro profondo, che sul chiaro porta il testo,
   qui misura 2.95 ed è illeggibile. I due gradi dell'azzurro non sono intercambiabili. */
.site-header .site-nav .wp-block-navigation-item__content:hover,
.site-header .site-nav .current-menu-item .wp-block-navigation-item__content { color: var(--sage); }
/* ⚠⚠ IL CONTENITORE DELLA TENDINA *È* IL SUBMENU, non un suo discendente: `.wp-block-navigation-submenu`
   e `.wp-block-navigation__submenu-container` stanno sullo STESSO elemento. Un selettore discendente non
   fa presa e la regola non si applica mai — il difetto si vedeva come due forme sovrapposte, la tonda
   nostra e le voci quadrate del core che sbordavano dagli angoli.
   ⚠ E non basta arrotondare il contenitore: WordPress dipinge un fondo bianco su OGNI voce, con raggio 0.
   Le voci vanno rese trasparenti — il ritaglio da solo lascerebbe comunque due superfici sovrapposte. */
.site-header .site-nav .wp-block-navigation__submenu-container {
  border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md);
  background: rgba(255,255,255,.86); backdrop-filter: blur(20px) saturate(1.5);
  padding: var(--space-3); overflow: hidden; min-width: 15rem; }
.site-header .site-nav .wp-block-navigation__submenu-container li,
.site-header .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { background: transparent; }
/* ⚠ Le voci vanno spaziate in modo DICHIARATO: il ritmo del core dipende da come rende ogni voce e si
   vedeva irregolare. Qui la distanza è una sola per tutte. */
.site-header .site-nav .wp-block-navigation__submenu-container { display: flex; flex-direction: column; gap: 2px; }
.site-header .site-nav .wp-block-navigation__submenu-container li { width: 100%; }
.site-header .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; width: 100%; }
.site-header .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--ink); border-radius: var(--radius-pill); padding: .5em .9em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.site-header .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--brand); background: var(--sage-tint); }
/* Il comando dell'hamburger vive SULLA barra scura: senza dichiararlo resterebbe del colore del core. */
.site-header .wp-block-navigation__responsive-container-open { color: var(--on-dark); }
/* ...ma il comando di chiusura vive DENTRO l'overlay chiaro, e lì deve tornare inchiostro. */
.site-header .wp-block-navigation__responsive-container-close { color: var(--ink); }
/* Overlay mobile (hamburger): full-viewport + design pulito (voci con divisori, sotto-menu inline). */
.wp-block-navigation__responsive-container.is-menu-open { height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 76px var(--space-6) 96px; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
  width: 100%; border-bottom: 1px solid var(--line); }
/* ⚠ WordPress vince a PARI specificità sulle voci dell'overlay: le dichiarazioni vanno tenute forzate,
   sennò il menu mobile torna al colore del core. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100% !important; padding: var(--space-4) 0 !important; font-size: var(--text-md) !important; font-weight: 400 !important;
  letter-spacing: 0 !important; text-transform: none !important; font-family: var(--font-display) !important;
  color: var(--ink) !important; justify-content: flex-start !important; margin-left: 0 !important; text-align: left !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; border: none !important; box-shadow: none !important; background: transparent !important;
  border-radius: 0 !important; padding: var(--space-2) 0 var(--space-3) var(--space-5) !important; min-width: 0 !important;
  width: 100%; opacity: 1; visibility: visible; transform: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: var(--space-2) 0 !important; font-size: var(--text-sm) !important; font-weight: 400 !important;
  font-family: var(--font-body) !important; color: var(--ink-muted) !important; }
.site-header__cta { flex: 0 0 auto; align-self: center; padding: .7em 1.4em; }
@media (max-width: 860px) { .site-header .site-header__cta { display: none; } }
.site-header__wa { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--radius-pill); background: var(--brand); color: #fff; flex: 0 0 auto; align-self: center; text-decoration: none;
  transition: background var(--dur) var(--ease); }
.site-header__wa:hover { background: var(--brand-dark); }
@media (max-width: 860px) { .site-header .site-header__wa { display: none; } }
.site-header__tel { font-family: var(--font-body); font-weight: 400; color: var(--on-dark); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; align-self: center; }
.site-header__tel:hover { color: var(--sage); }
@media (max-width: 980px) { .site-header .site-header__tel { display: none; } }

/* ---------- Hero base (variante design, senza foto): testo su avorio ---------- */
.hero { background: var(--paper); padding-block: clamp(3.2rem, 2rem + 5vw, 6rem) clamp(2.6rem, 1.8rem + 3.5vw, 4.2rem); }
.hero__grid { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 2.6rem); }
/* Variante senza foto idonee: testo e pannello si dividono la riga, così la banda non resta una fascia
   di solo testo larga quanto la pagina. */
@media (min-width: 900px) { .hero--design .hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.hero__text { max-width: 62rem; }
.hero__text h1 { font-size: var(--text-3xl); max-width: 15ch; }
.hero__lead { font-size: var(--text-md); color: var(--ink-muted); margin-top: var(--space-5); max-width: 48ch; }
.hero__lead b { color: var(--ink); font-weight: 400; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; margin-top: var(--space-7); }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-7);
  color: var(--ink-muted); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; }
.badges span { white-space: nowrap; }
/* ⚠ Il tetto di 42rem lo impone `.hero--cover .hero__inner > *`, che ha la STESSA specificita' e viene
   DOPO nel foglio: per vincere serve un selettore piu' specifico, non uno equivalente. Misurato: senza
   questo la terza promessa va a capo da sola a 1280, 1440 e 1650px. */
.hero--cover .hero__inner > .badges { max-width: none; column-gap: var(--space-6); }
.badges b { color: var(--ink); font-weight: 400; }
.badges--on-dark { color: rgba(255,255,255,.82); }
.badges--on-dark b { color: #fff; }
.hero__panel { border-radius: var(--radius-lg); background: var(--brand); color: #fff; padding: clamp(2rem,1.4rem+3vw,3.5rem);
  aspect-ratio: 16 / 7; display: grid; place-content: center; text-align: center; }
.hero__panel .n { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); }

/* ---------- Hero a COPERTURA: slideshow a tutta larghezza, testo su scrim scuro caldo a sinistra.
   Lo scrim è INCHIOSTRO, non di marca: una lastra colorata sopra una foto già satura è la somma di due
   voci: il bianco resta AA sulla slide più chiara e la foto conserva il proprio colore. ---------- */
/* ⭐⭐ ANCHE L'HERO È UNA BOLLA. Una fotografia a piena pagina con gli angoli vivi è il gesto di un sito
   istituzionale; staccandola dai bordi e arrotondandola diventa la più grande delle tessere, e la sabbia
   che le corre attorno tiene insieme testata, hero e cartoncini in un'unica famiglia di oggetti che
   galleggiano. È il modo più economico di sembrare moderni: nessun effetto, solo una regola di forma. */
.hero--cover { position: relative; min-height: clamp(540px, 68vh, 740px); display: grid; align-items: end;
  overflow: hidden; isolation: isolate; background: var(--dark); padding: 0;
  margin-inline: var(--gutter); border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px -8px rgba(31,64,80,.22), 0 34px 70px -34px rgba(31,64,80,.40); }
/* Il contenuto dell'hero rientra: dentro una lastra arrotondata il testo non può più partire dal bordo
   della pagina, sennò tocca la curva. */
.hero--cover > .container { padding-inline: clamp(1.6rem, 1rem + 3vw, 3.4rem); }
.hero--cover .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--cover .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; }
.hero--cover .hero__slide:first-child { opacity: 1; }
/* ⭐⭐ IL VELO HA DUE DIREZIONI, E NON È UN VEZZO. Sul largo il testo occupa una colonna a sinistra: il velo
   va preso da sinistra e può ritirarsi prima della metà, lasciando la fotografia luminosa sulla destra —
   che è ciò che il materiale di riferimento mostra e ciò che il cliente chiede.
   ⚠ Ai piccoli schermi il testo prende TUTTA la larghezza: un velo orizzontale lì lascia le ultime parole
   di ogni riga sulla fotografia nuda. Misurato dal pixel, sommario e occhiello scendono a 1.0-1.5, cioè
   illeggibili. Sotto i 900px il velo si prende quindi dal BASSO, dove il testo effettivamente sta, e la
   parte alta della fotografia resta chiara.
   ⚠ I valori non sono a occhio: sono il punto in cui il contrasto misurato sotto OGNI riga di testo, su
   OGNI slide e su entrambi i viewport, resta sopra 4.5. */
.hero--cover .hero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(34,29,25,.90) 0%, rgba(34,29,25,.87) 48%, rgba(34,29,25,.70) 68%, rgba(34,29,25,0) 92%); }
/* ⚠ Ai piccoli schermi il ritmo dell'hero si STRINGE. Dentro una lastra staccata dai bordi il testo va a
   capo più spesso, l'hero cresce, e le ultime righe finiscono sotto la barra fissa di contatto: presenti nel
   documento ma coperte alla prima schermata. Meno aria fra i blocchi le riporta sopra la barra. */
@media (max-width: 900px) {
  .hero--cover .hero__cta { margin-top: var(--space-5); }
  .hero--cover .badges { margin-top: var(--space-5); gap: var(--space-2) var(--space-4); }
  .hero--cover .hero__lead { margin-top: var(--space-4); }
  .hero--cover .hero__inner { padding-block: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); }
}

@media (max-width: 900px) {
  /* La foto più chiara delle quattro misura 0.56 di luminanza sotto l'occhiello: perché il bianco resti
     sopra 4.5 il velo lì deve stare almeno a .72 — calcolato, non tentato. Sotto, dove il testo si infittisce,
     sale ancora. Su uno schermo stretto la fotografia dell'hero fa da fondo, non da soggetto: il soggetto
     torna a vedersi nelle tessere del catalogo, che a quella larghezza sono a piena colonna. */
  .hero--cover .hero__scrim {
    background: linear-gradient(180deg, rgba(34,29,25,.74) 0%, rgba(34,29,25,.80) 38%, rgba(34,29,25,.88) 72%, rgba(34,29,25,.92) 100%); }
}
.hero--cover .hero__inner { position: relative; z-index: 3; padding-block: clamp(3rem, 2rem + 4.5vw, 5.4rem); color: #fff; }
.hero--cover .eyebrow { color: var(--plaque); }
/* ⭐ IL VELO SI ALZA PERCHE' IL TESTO SCENDE DI TONO, non viceversa. Portando occhiello e sommario
   dall'aqua e dal bianco a un avorio caldo si guadagna margine di contrasto, e con quel margine il velo
   puo' schiarire lasciando respirare la fotografia. Misurato sull'insieme delle testate: il punto peggiore
   passa da 4.79 a 5.69 MENTRE il velo si alleggerisce. Oltre questo punto si scende sotto AA (a meta'
   strada in piu' si misura 4.31): il margine non e' un'opinione. */
.hero--cover .hero__inner h1 { color: #fff; font-size: var(--text-3xl); max-width: 14ch; }
.hero--cover .hero__lead { color: #EFE8DC; font-size: var(--text-md); margin-top: var(--space-5); max-width: 36ch; }
.hero--cover .hero__inner > * { max-width: 42rem; }
.hero--cover .hero__cta { margin-top: var(--space-7); }
/* Dissolvenza lenta fra le slide, senza zoom: il movimento della foto sotto un testo è una seconda voce. */
@media (prefers-reduced-motion: no-preference) {
  .hero--cover .hero__slide { animation: fp-hero-fade 40s linear infinite; }
  .hero--cover .hero__slide:nth-child(1){animation-delay:0s}.hero--cover .hero__slide:nth-child(2){animation-delay:10s}
  .hero--cover .hero__slide:nth-child(3){animation-delay:20s}.hero--cover .hero__slide:nth-child(4){animation-delay:30s}
}
@keyframes fp-hero-fade { 0%{opacity:0} 5%{opacity:1} 23%{opacity:1} 28%{opacity:0} 100%{opacity:0} }

/* ---------- Intestazione di sezione ----------
   ⭐⭐ IL VUOTO A DESTRA NON SI RIEMPIE ALLARGANDO IL CAPOVERSO. Una riga di 100 caratteri non si legge:
   la misura di lettura resta quella giusta, e l'area si occupa mettendoci una SECONDA COLONNA. Il titolo
   sta a sinistra, il sommario gli si affianca alla stessa base, e l'intestazione prende tutta la larghezza
   invece di lasciare mezza pagina bianca. Dove il sommario non c'è la colonna sarebbe vuota: lì
   l'intestazione si CENTRA, che è l'altro modo di non lasciare un titolo corto appeso a sinistra. */
.section-intro { max-width: 44rem; margin-bottom: var(--space-8); }
.section-intro h2 { font-size: var(--text-2xl); }
/* ⚠ La capsula attorno al titolo è stata RITIRATA. Una pillola bianca su fondo chiaro non ha un bordo
   proprio: si regge sull'ombra, e un'ombra sotto un testo si legge come un'etichetta appiccicata sopra la
   pagina invece che come parte di essa. Il titolo torna nudo — la sua presenza la fanno la misura e il
   colore — e l'occhiello sopra prende la forma di pillola, dove una capsula ha senso perché è un'etichetta
   per davvero. */
.section-intro > h2 { color: var(--brand); }
.section-intro > .eyebrow { width: fit-content; background: var(--sage-tint); color: var(--brand-dark);
  padding: .42em .9em; border-radius: var(--radius-pill); margin-bottom: var(--space-4); }
@media (min-width: 900px) {
  .section-intro:has(.lead) {
    display: grid; grid-template-columns: 1.05fr .95fr; column-gap: var(--space-8);
    max-width: none; align-items: baseline; }
  .section-intro:has(.lead) > .eyebrow { grid-column: 1; grid-row: 1; }
  /* ⚠ In griglia un elemento è «blockificato»: senza justify-self la capsula si stirerebbe per tutta la
     colonna e smetterebbe di essere una pillola. */
  .section-intro:has(.lead) > h2 { grid-column: 1; grid-row: 2; margin: 0; justify-self: start; }
  .section-intro:has(.lead) > .lead { grid-column: 2; grid-row: 2; margin-top: 0; max-width: 52ch; }
  .section-intro:not(:has(.lead)) { margin-inline: auto; text-align: center; }
  .section-intro:not(:has(.lead)) > h2 { margin-inline: auto; }
  .section-intro:not(:has(.lead)) > .eyebrow { margin-inline: auto; }
}
.lead { color: var(--ink-muted); font-size: var(--text-md); margin-top: var(--space-4); max-width: 58ch; }
.muted { color: var(--ink-muted); }
/* Sulla sabbia il grado chiaro dell'azzurro sta a 5.91: i collegamenti usano quello profondo. */
.link-arrow { color: var(--brand-dark); font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .2em; }
.link-arrow:hover { color: var(--brand); }
.center-cta { display: flex; justify-content: center; margin-top: var(--space-8); }

/* ⭐⭐ LA LUCE È UNA SOLA GRAMMATICA. Le porte pastello hanno un riflesso che le fa leggere curve; se le
   tessere bianche restassero piatte la pagina avrebbe due linguaggi. Sul bianco il riflesso non può essere
   bianco: è un velo freddissimo di ciano del marchio, appena percettibile, che entra dallo stesso angolo.
   ⚠ Schiarisce, quindi non toglie contrasto al testo sopra; e sta sul FONDO, mai sopra il contenuto. */
/* Il riflesso di luce resta su TUTTE le superfici: è la grammatica della bolla. */
.tile, .prod-card, .news-card, .feat, .steps--cards .step, .faq details, .contact-info, .faq-hint, .cta-band,
.cat-gallery > a.zoom, .cat-gallery > figure {
  background-image: radial-gradient(130% 90% at 12% -18%, rgba(127,220,230,.16) 0%, rgba(127,220,230,.06) 34%, rgba(255,255,255,0) 66%);
  background-repeat: no-repeat; }

/* ⭐ IL VETRO È IN PROVA, SU UN GRUPPO SOLO: le quattro tessere dei punti di forza. La prova sta su un
   gruppo INTERO e non su due tessere sparse — mescolare due materiali dentro la stessa griglia si legge
   come un errore, non come una scelta, e falserebbe il giudizio. Nella stessa pagina restano le tessere
   piene: il confronto è a colpo d'occhio.
   ⚠ Su un fondo uniforme la sfocatura non ha nulla da diffondere: qui il vetro lo fanno la trasparenza,
   il bordo chiaro in alto e il riflesso. Si vede per quello che è dove passa sopra una fotografia. */
.feat {
  background-color: var(--glass);
  backdrop-filter: var(--glass-sfoca);
  -webkit-backdrop-filter: var(--glass-sfoca);
  box-shadow: var(--glass-bordo), var(--shadow-sm); }

/* Le superfici che GALLEGGIANO sopra il resto restano di vetro: lì il materiale ha davvero qualcosa da
   diffondere, ed è il caso in cui serve — la tendina sopra la fotografia e la scheda che si apre. */
.fp-modal__card { background-color: var(--glass-alta); backdrop-filter: var(--glass-sfoca);
  -webkit-backdrop-filter: var(--glass-sfoca); box-shadow: var(--glass-bordo), 0 40px 90px -40px rgba(20,52,66,.6); }

/* ---------- Catalogo BENTO: la foto sta dentro la sua cornice di carta, la didascalia STA SOTTO ---------- */
/* ⚠⚠ Il numero di colonne lo DICHIARA la pagina (--bento-cols), non lo impone: una `grid-template-columns`
   in uno stile inline batte qualunque media query, e la griglia resterebbe a quattro colonne anche a 390px.
   E `minmax(0, 1fr)` non è pignoleria: con la didascalia DENTRO la foto (in posizione assoluta) la tessera
   non aveva larghezza minima; portandola fuori ne ha una, e senza il minimo a zero le tracce si rifiutano
   di stringersi — misurati 250px di traboccamento sull'hub. */
.bento { display: grid; grid-template-columns: repeat(var(--bento-cols, 6), minmax(0, 1fr)); gap: var(--space-5); }
/* ⚠ Il bordo se ne va e resta l'OMBRA. Su un angolo largo una linea di contorno si legge come il bordo di
   un adesivo; la card bianca sulla sabbia si stacca già da sola, e l'ombra bassa le dà il rilievo che nel
   materiale di riferimento fa sembrare le tessere appoggiate sulla pagina. */
.tile { position: relative; grid-column: span 2; display: flex; flex-direction: column;
  background: var(--surface); border: 0; border-radius: var(--radius); padding: var(--mat);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-5px) scale(1.012); }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }
/* La foto dentro la sua cornice di carta prende a sua volta l'angolo morbido: è l'accostamento dei due
   raggi — quello della card e quello dell'immagine — a fare il tono, non il raggio da solo. */
.tile img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--radius-sm); }
.tile--big { grid-column: span 3; }
.tile--big img { aspect-ratio: 4 / 3.4; }
.tile--wide { grid-column: span 3; }
.tile--wide img { aspect-ratio: 16 / 9; }
.tile__body { padding: var(--space-5) var(--space-4) var(--space-4); }
.tile__k { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: .35rem; }
.tile__body h3 { font-size: var(--text-lg); color: var(--ink); }
.tile--big .tile__body h3 { font-size: var(--text-xl); }
.tile__more { display: inline-block; margin-top: var(--space-3); font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand); }
/* ⚠ Ai piccoli schermi le colonne si dichiarano sulla PROPRIETÀ, non sulla variabile: la pagina imposta
   --bento-cols in uno stile inline, che vincerebbe su una variabile riscritta qui. */
@media (max-width: 860px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile--big, .tile--wide { grid-column: span 1; }
  .tile--big img, .tile--wide img { aspect-ratio: 1 / 1; } }
@media (max-width: 460px) { .bento { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Le tre PORTE: privati, aziende, matrimoni. Tre lastre fotografiche affiancate; ognuna porta
   in chiaro le proprie categorie, così indirizzano davvero invece di limitarsi ad annunciare. Nessuna
   nasconde nulla: le tre liste sono visibili insieme e il catalogo intero resta raggiungibile. ---------- */
/* ⭐ La fascia RESPIRA: senza spazio sopra e sotto i cartoncini toccavano la fotografia dell'hero e
   perdevano l'effetto di oggetti appoggiati sulla pagina — che è tutto ciò che li fa leggere come bolle. */
.doors-band { background: var(--paper); padding-block: clamp(2.2rem, 1.4rem + 3vw, 4.2rem); }
/* ⭐⭐ TRE CARTONCINI A TINTA PIENA, NON TRE LASTRE FOTOGRAFICHE. La fotografia sotto il testo obbligava a
   un velo, e il velo è ciò che rendeva questa fascia cupa; togliendola, le tre tinte pastello fanno da sole
   il lavoro di distinguere i tre pubblici, e la fascia diventa la più leggera della pagina invece della più
   pesante. Le tessere ora si STACCANO (il filo di prima serviva a non aprire fessure su una fascia continua;
   qui la fascia continua non c'è più) e l'angolo largo è ciò che le fa leggere come cartoncini. */
/* ⚠ Da fascia continua a cartoncini cambia anche il contenimento: la fascia poteva toccare i bordi dello
   schermo, tre oggetti no — si allineano alla stessa colonna di tutto il resto della pagina. */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); background: transparent;
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 900px) { .doors { grid-template-columns: minmax(0, 1fr); } }
.door { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem) clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
/* Le tre tinte sono i valori del materiale di riferimento e portano solo inchiostro: 9.46, 11.02, 10.42.
   Il testo chiaro che il riferimento disegnava sopra misurava 1.74, cioè sotto ogni soglia. */
.door--1 { background: var(--door-1); }
.door--2 { background: var(--door-2); }
.door--3 { background: var(--door-3); }
/* ⭐⭐ IL RIFLESSO È CIÒ CHE FA LA BOLLA. Una tinta piena con l'angolo largo è ancora una tessera; una
   luce diffusa che entra da un angolo e si spegne verso il basso la fa leggere come una superficie
   CURVA. È un solo gradiente radiale bianchissimo e trasparente — nessuna immagine, nessun filtro.
   ⚠ Schiarisce il fondo, quindi il contrasto dell'inchiostro sopra SALE: il riflesso non toglie
   leggibilità, ne aggiunge. */
.door::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 18% -10%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 38%, rgba(255,255,255,0) 68%),
    radial-gradient(90% 60% at 108% 112%, rgba(31,64,80,.10) 0%, rgba(31,64,80,0) 60%); }
.door > * { position: relative; z-index: 1; }
.door { box-shadow: 0 3px 10px -5px rgba(31,64,80,.16), 0 26px 54px -30px rgba(31,64,80,.34); }
/* Al passaggio la bolla si SOLLEVA e si gonfia appena: due decimi di scala sono la differenza fra una
   tessera che reagisce e una che rimbalza. Oltre, diventa un giocattolo. */
.door:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 6px 16px -6px rgba(31,64,80,.20), 0 40px 80px -34px rgba(31,64,80,.44); }
@media (prefers-reduced-motion: reduce) { .door:hover { transform: none; } }
/* Senza fotografia sotto non serve più né la targa né il velo: il testo poggia direttamente sulla tinta,
   che è il modo in cui il materiale di riferimento disegna questa fascia. */
.door__body { position: relative; z-index: 2; color: var(--ink); background: transparent;
  padding: 0; border-radius: 0; box-shadow: none; }
/* ⚠ Qui era stato provato il maiuscoletto del SERIF, ed e' stato ritirato SU MISURA: a 15px il decimo
   percentile di opacita' dei tratti di Cormorant sta a 61 contro i 118 che servono perche' le grazie non
   sbiadiscano — il maiuscolo non e' abbastanza piu' robusto del minuscolo per cambiare il verdetto. E il
   motivo per cui l'idea era nata (le etichette che suonavano da interfaccia) l'ha gia' chiuso il passaggio
   ad Alegreya Sans, che e' umanista. */
/* ⚠ Sull'occhiello la tinta di marca NON si può usare: l'azzurro profondo su questi tre pastelli scende
   sotto soglia. L'inchiostro tenue ci sta con margine (5.66 / 6.59 / 6.23) e la distinzione la fa il
   maiuscoletto spaziato, che è il contrappunto del display arrotondato. */
.door__k { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); opacity: .78; display: block; }
/* ⚠ Le tre targhe devono cominciare alla stessa altezza. Un titolo che va su due righe mentre gli altri
   ne occupano una fa scivolare in alto la sua targa e la fascia si legge storta: lo spazio di due righe
   si riserva a tutti e tre, cosi' l'allineamento non dipende da quanto e' lungo un nome. */
/* ⭐⭐ IL TITOLO PRENDE LA TINTA DELLA SUA TESSERA. È il modo di avere «l'effetto pastello» sui titoli senza
   perdere la lettura: non un pastello chiaro sul pastello (sarebbe 1.5, come il bianco), ma lo STESSO colore
   della tessera portato giù di luminosità quanto basta. Ogni porta ha così il suo inchiostro di famiglia —
   terracotta, petrolio, prugna — e la fascia si legge come tre accordi di colore invece che tre riquadri
   colorati con sopra lo stesso nero. Misurati: 5.03, 5.00, 5.10 sulla propria tessera. */
.door--1 .door__body h3 { color: #773927; }
.door--2 .door__body h3 { color: #345B5F; }
.door--3 .door__body h3 { color: #813945; }
.door__body h3 { font-size: var(--text-xl); color: var(--ink); margin-top: var(--space-2);
  min-height: calc(2 * var(--lh-snug) * 1em); }
/* Su una tinta piena l'inchiostro TENUE costa più che sul bianco (6.81 contro 10.11): sulle porte il testo
   torna pieno, e la gerarchia la tiene la misura. */
.door__body > p { color: var(--ink); font-size: var(--text-sm); margin-top: var(--space-3); max-width: 32ch;
  min-height: calc(2 * var(--lh-body) * 1em); }
/* ⚠ I divisori sono INCHIOSTRO TRASLUCIDO, non il token --line: quella linea è tarata sul chiaro e su una
   tinta pastello sparisce. Traslucida, la stessa regola funziona su tutte e tre le porte. */
.door__list { margin: var(--space-5) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(36,30,25,.16); }
.door__list li { border-bottom: 1px solid rgba(36,30,25,.16); }
.door__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: .62em 0; color: var(--ink); text-decoration: none; font-size: var(--text-sm);
  transition: padding-left var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.door__list a:hover { opacity: .72; }
/* Il segnale del passaggio è il GESTO (la freccia che compare e la voce che rientra), non il colore:
   nessuna tinta d'accento regge il contrasto su tutte e tre le porte. */
.door__list a::after { content: "\2192"; opacity: 0; transition: opacity var(--dur) var(--ease); }
.door__list a:hover { padding-left: var(--space-3); }
.door__list a:hover::after { opacity: 1; }

/* ---------- Team / chi siamo: foto affiancate + prosa ---------- */
.split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } .split--rev .collage { order: 2; } }
/* Le tessere non sono più ruotate: l'angolatura è il gesto da album di famiglia, e qui il registro è
   quello del catalogo. Restano di misure diverse e sfalsate, che è ciò che dà il ritmo editoriale. */
.collage { position: relative; min-height: 380px; }
.collage > a.zoom, .collage > img { position: absolute; border-radius: var(--radius);
  overflow: hidden; background: var(--surface); padding: var(--mat); box-shadow: var(--shadow-sm);
  display: block; transition: transform 420ms var(--ease); }
.collage > a.zoom img { position: absolute; inset: var(--mat); width: calc(100% - 2 * var(--mat));
  height: calc(100% - 2 * var(--mat)); object-fit: cover; border: 0; border-radius: var(--radius-sm); }
/* ⚠ Le tessere si sovrappongono all'ALTEZZA della prosa accanto: una composizione piu' alta della colonna
   di testo lascia scoperte le righe in fondo — misurato, il riempimento della banda scende dal 79% al 52%. */
.collage > *:nth-child(1) { width: 58%; aspect-ratio: 4/3; left: 0; top: 0; z-index: 2; }
.collage > *:nth-child(2) { width: 44%; aspect-ratio: 3/4; right: 0; top: 12%; z-index: 3; }
.collage > *:nth-child(3) { width: 46%; aspect-ratio: 4/3; left: 12%; bottom: 0; z-index: 1; }
.collage > a.zoom:hover { transform: translateY(-4px); z-index: 6; }
@media (max-width: 899px) { .collage { min-height: 420px; } }
.team__body h2 { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
/* ⚠⚠ La misura di lettura qui NON e' un vezzo: allargando il capoverso a tutta la colonna il testo occupa
   meno righe, la colonna si accorcia e accanto al collage restano scoperte le righe in fondo. Misurato: il
   riempimento della banda passa dal 79% al 57%. Riempire in orizzontale puo' aprire un vuoto in verticale. */
.team__body p { margin-top: var(--space-4); color: var(--ink-muted); max-width: 48ch; }
.team__body p.big { font-size: var(--text-md); color: var(--ink); }
.team__body .link-arrow { display: inline-block; margin-top: var(--space-6); }

/* ---------- Feature cards (perché sceglierci): superficie nuda, filetto e icona di contorno ---------- */
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.feats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .feats--3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .feats { grid-template-columns: 1fr; } }
/* ⭐ Il filetto in alto se ne va e diventa una tessera morbida. La riga sottile è il segnale editoriale più
   forte dopo il carattere: bastano lei e un serif per far leggere «studio professionale» una pagina di
   feste. La stessa informazione dentro un cartoncino arrotondato cambia registro senza toccare il testo. */
.feat { background: var(--surface); border: 0; border-top: 0; border-radius: var(--radius);
  padding: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem); display: flex; gap: var(--space-5); box-shadow: var(--shadow-sm); }
.feat__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; color: var(--brand);
  border: 0; background: var(--sage-tint); display: grid; place-items: center; }
.feat__ic svg { width: 22px; height: 22px; }
.feat h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400;
  letter-spacing: 0; margin-bottom: var(--space-2); }
.feat p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }

/* ---------- Come funziona: numeri-fantasma. Il numero in serif leggerissimo è la sola decorazione;
   badge a gradiente e icone erano il segnale «giocoso» più forte dopo il carattere. ---------- */
.steps--cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); list-style: none; padding: 0; margin: 0; }
@media (max-width: 860px) { .steps--cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps--cards { grid-template-columns: 1fr; } }
.steps--cards .step { position: relative; background: var(--surface); border: 0; border-top: 0;
  border-radius: var(--radius); padding: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem) clamp(1.4rem, 1rem + 1.4vw, 2rem); text-align: center;
  box-shadow: var(--shadow-sm); }
.step__top { display: block; margin-bottom: var(--space-3); }
.step__n { display: block; font-family: var(--font-display); font-weight: 400; font-variant-numeric: lining-nums; font-size: clamp(4.4rem, 3rem + 4vw, 6.4rem);
  line-height: .9; color: var(--sand-deep); }
.steps--cards .step h3 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); margin-bottom: var(--space-3); }
.steps--cards .step p { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }

/* ---------- Banda CTA (contact_band): verde acqua PROFONDO e piatto, testo bianco (9.45) ---------- */
.cta-band { position: relative; overflow: visible; border-radius: var(--radius-lg);
  padding: clamp(3rem, 2rem + 4vw, 4.8rem) clamp(1.6rem, 1rem + 3vw, 3.6rem);
  text-align: center; isolation: isolate; background: var(--surface); border: 0; box-shadow: var(--shadow-md); color: var(--ink); }
/* Una sola foto scavalca la banda, incorniciata e FERMA: il galleggiamento era la terza grammatica di
   movimento della pagina. La seconda tessera si toglie qui, senza toccare le venti pagine che la portano. */
.cta-band__peek { position: absolute; top: -34px; right: clamp(20px, 5vw, 64px); z-index: 2; width: clamp(116px, 15vw, 168px);
  aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); border: var(--mat) solid var(--surface);
  box-shadow: 0 18px 40px -28px rgba(26,24,21,.5); }
.cta-band__peek:nth-of-type(2) { display: none; }
@media (max-width: 760px) { .cta-band__peek { display: none; } }
.cta-band .eyebrow { color: var(--brand); }
.cta-band h2 { color: var(--ink); font-size: var(--text-2xl); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: var(--ink-muted); max-width: 46ch; margin: var(--space-5) auto 0; font-size: var(--text-md); }
/* ⚠ Le venti pagine di progetto portano `is-light` e `is-ghost on-dark` DENTRO questa banda, ed erano
   pensate per un fondo scuro: su carta chiara un bordo bianco sparisce e un bottone bianco non si stacca.
   Si riportano all'inchiostro QUI, cosi' nessuna delle venti pagine va rigenerata. */
.cta-band .wp-block-button.is-coral .wp-block-button__link, .cta-band .btn--accent, .cta-band .btn--coral { background: var(--brand); color: #fff; }
.cta-band .wp-block-button.is-coral .wp-block-button__link:hover { background: var(--brand-dark); }
.cta-band .wp-block-button.is-light .wp-block-button__link, .cta-band .btn--light { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta-band .wp-block-button.is-ghost.on-dark .wp-block-button__link, .cta-band .btn--ghost.on-dark { color: var(--ink); border-color: var(--ink); background: transparent; }
.cta-band .wp-block-button.is-ghost.on-dark .wp-block-button__link:hover, .cta-band .btn--ghost.on-dark:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta-band .badges--on-dark { color: var(--ink-muted); }
.cta-band .badges--on-dark b { color: var(--ink); }
.cta-band__row { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-7); }
/* Riga per i professionisti: sta sotto la banda e non dentro, perché parla a un pubblico diverso da chi
   sta chiedendo un preventivo per la propria festa e non deve contendergli l'attenzione. */
.pro-note { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--ink-muted); }
.pro-note strong { color: var(--ink); font-weight: 400; }
.pro-note a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: .2em; transition: color var(--dur) var(--ease); }
.pro-note a:hover { color: var(--brand); }

/* ---------- Pagina interna (page-head) ---------- */
/* Default (senza foto): banda di marca, testo bianco -> identitaria, mai anonima. */
.page-head { position: relative; background: var(--dark);
  color: #fff; padding-block: var(--space-9) var(--space-8); overflow: hidden;
  margin-inline: var(--gutter); border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px -8px rgba(31,64,80,.20), 0 30px 62px -32px rgba(31,64,80,.36); }
.page-head > .container { padding-inline: clamp(1.6rem, 1rem + 3vw, 3.4rem); }
.page-head .eyebrow { color: var(--plaque); }
.page-head h1 { color: #fff; font-size: var(--text-2xl); }
.page-head p { color: #EFE8DC; font-size: var(--text-md); margin-top: var(--space-5); max-width: 52rem; }
/* Variante con FOTO della categoria: la foto identifica la pagina; velo d'inchiostro -> titolo bianco AA.
   Il velo è neutro e non di marca: sopra foto molto sature una lastra colorata somma due voci. */
.page-head--photo .page-head__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  filter: blur(3px) saturate(.92); transform: scale(1.07); }
/* Scrim come ::after sul page-head (copertura affidabile inset:0: il <span> separato lasciava scoperta una
   striscia in alto — "grigio tagliato"). Il testo (.container z-index 2) resta sopra. */
.page-head--photo .page-head__scrim { display: none; }
/* ⭐ Il velo della testata si ALLEGGERISCE: misurato, con l'82% il contrasto stava a 7.4-8.8, cioè molto
   sopra il necessario, e quel margine lo pagava la fotografia — venti pagine con una banda quasi nera al
   posto dell'immagine della categoria. Portato al 72% il punto peggiore resta sopra 5, e la fotografia
   torna a riconoscersi.
   ⚠ Il valore è misurato sulla testata più CHIARA delle venti (Dolciarie), non sulla prima che capita: al
   68% quella scendeva a 4.69 — sopra soglia, ma senza margine, e un margine sottile non è un margine. */
.page-head--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(43,36,29,.75) 0%, rgba(43,36,29,.71) 55%, rgba(43,36,29,.67) 100%); }
.page-head--photo > .container { position: relative; z-index: 2; }
.page-head--photo { padding-block: clamp(3.6rem, 2.4rem + 4.5vw, 6rem) clamp(2.8rem, 2rem + 3vw, 4.4rem); }
/* La bolla della testata e la sezione che segue non si toccano. */
.page-head + .section, .hero--cover + .section, .hero--cover + .doors-band { padding-top: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); }

/* ---------- Pagina categoria: galleria e schede prodotto, entrambe col passe-partout ---------- */
.cat-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); margin: 0; }
@media (max-width: 860px) { .cat-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .cat-gallery { grid-template-columns: 1fr; } }
.cat-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.cat-gallery > a.zoom, .cat-gallery > figure { margin: 0; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1/1; background: var(--surface); border: 0; padding: var(--mat); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cat-gallery > a.zoom:hover { box-shadow: var(--shadow-md); transform: translateY(-4px) scale(1.012); }
.cat-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }

/* Card prodotto: FOTO in testa + nome + estratto del suo testo. Foto e descrizione stanno insieme perche'
   descrivono la stessa struttura: tenerle in due sezioni diverse le rendeva due elenchi scollegati. */
.prod-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 860px) { .prod-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .prod-cards { grid-template-columns: 1fr; } }
.prod-card { background: var(--surface); border: 0; border-radius: var(--radius);
  padding: var(--mat); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.prod-card[data-news]:hover { box-shadow: var(--shadow-md); transform: translateY(-5px) scale(1.012); }
/* La scheda che NON apre nulla non deve promettere un gesto: niente reazione al passaggio del cursore. */
.prod-card--plain, .prod-card--plain:hover { cursor: default; box-shadow: var(--shadow-sm); transform: none; }
@media (prefers-reduced-motion: reduce) { .prod-card[data-news]:hover { transform: none; } }
.prod-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); border-radius: var(--radius-sm); }
.prod-card__media img { width: 100%; height: 100%; object-fit: cover; }
.prod-card__body { padding: var(--space-6) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; }
.prod-card h3 { font-size: var(--text-lg); color: var(--ink); font-weight: 400; letter-spacing: 0; }
.prod-card p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }
.prod-card__k { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
/* Estratto clampato: il testo COMPLETO (titoletti ed elenchi) e' nel modal, non viene tagliato da nessuna parte. */
.prod-card__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.prod-card[data-news] { cursor: pointer; }
.prod-card[data-news]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.prod-card__more { margin-top: auto; padding-top: var(--space-4); font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand); display: inline-flex; align-items: center; gap: .35rem;
  transition: gap var(--dur) var(--ease); }
.prod-card[data-news]:hover .prod-card__more { gap: .65rem; }
/* Il testo integrale della scheda vive qui, nascosto: il modal ne clona il contenuto. */
.prod-card__full { display: none; }
/* Elenco compatto (categorie con molti nomi e senza descrizioni): voci a 2-3 colonne, ordinate. */
.prod-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-5); }
@media (max-width: 860px) { .prod-chips { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .prod-chips { grid-template-columns: 1fr; } }
/* Si chiamano chip: che lo siano. Una pillola piena costa quanto una riga sottolineata e cambia registro. */
.prod-chips { gap: var(--space-3); }
.prod-chips li { background: var(--surface); border: 0; border-bottom: 0;
  border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); color: var(--ink); font-size: var(--text-sm);
  box-shadow: var(--shadow-sm); }

/* ---------- Prodotti correlati: dentro la scheda completa, le altre strutture della STESSA categoria.
   Chi noleggia un castello bianco per un pastel party cerca altre strutture bianche, non una struttura
   sportiva: l'accostamento utile è quello che il catalogo già dichiara. ---------- */
.rel { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
/* Le tessere dei correlati prendono la stessa curva delle altre: una griglia di quadrati dentro una pagina
   di bolle si legge come un pezzo rimasto indietro. */
.rel__list { gap: var(--space-5); }
.rel__k { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-4); }
.rel__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (max-width: 560px) { .rel__list { grid-template-columns: repeat(2, 1fr); } }
.rel__item { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); font: inherit; }
.rel__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-sm);
  background: var(--sand); border: 0; padding: 3px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease); }
.rel__item:hover img { box-shadow: var(--shadow-md); }
.rel__item span { display: block; margin-top: var(--space-2); font-size: var(--text-xs); line-height: 1.35; color: var(--ink-muted); }
.rel__item:hover span { color: var(--brand); }
.rel__item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Una struttura senza scheda completa non apre nulla: resta figura, senza promettere un gesto. */
span.rel__item { cursor: default; }
span.rel__item:hover img { box-shadow: var(--shadow-sm); }
span.rel__item:hover span { color: var(--ink-muted); }
/* Il taglio si DICHIARA: un elenco troncato in silenzio si legge come «sono tutte». */
.rel__all { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--ink-muted); }

/* ---------- Lightbox (a.zoom → overlay): foto apribili a piena risoluzione, chiudi con Esc / click fondo ---------- */
a.zoom { display: block; position: relative; cursor: zoom-in; }
/* Affordance: lente in alto a destra all'hover/focus (fail-visible: senza JS il click segue l'href = la foto).
   ⚠ Il colore del tratto è cablato dentro il data-URI: un cambio di token NON lo raggiunge. */
a.zoom::after { content: ""; position: absolute; top: var(--space-3); right: var(--space-3); width: 34px; height: 34px; z-index: 3;
  border-radius: var(--radius-pill); background: rgba(253,250,246,.94) center/18px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23215274' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.2-4.2'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
a.zoom:hover::after, a.zoom:focus-visible::after { opacity: 1; }
.fp-lb { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: clamp(1rem, 4vmin, 3rem);
  background: rgba(25,20,16,.94); backdrop-filter: blur(4px); }
.fp-lb.is-open { display: grid; animation: fp-lb-in 200ms var(--ease); }
@keyframes fp-lb-in { from { opacity: 0; } to { opacity: 1; } }
.fp-lb__img { max-width: min(1120px, 94vw); max-height: 88vh; width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius); }
.fp-lb__x { position: fixed; top: clamp(.8rem, 2vw, 1.4rem); right: clamp(.8rem, 2vw, 1.4rem); width: 48px; height: 48px;
  border: none; border-radius: var(--radius-pill); background: rgba(255,255,255,.16); color: #fff; font-size: 1.7rem; line-height: 1;
  display: grid; place-items: center; transition: background var(--dur) var(--ease); }
.fp-lb__x:hover { background: rgba(255,255,255,.3); }
@media (prefers-reduced-motion: reduce) { .fp-lb.is-open { animation: none; } }

/* ---------- News: griglia di card con foto (post in evidenza a piena larghezza) ---------- */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7); }
@media (max-width: 780px) { .news-grid { grid-template-columns: 1fr; } }
.news-card { background: var(--surface); border: 0; border-radius: var(--radius); overflow: hidden;
  padding: var(--mat); display: flex; flex-direction: column; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px) scale(1.012); }
@media (prefers-reduced-motion: reduce) { .news-card:hover { transform: none; } }
.news-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); border-radius: var(--radius-sm); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding: var(--space-6) var(--space-6) var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.news-card__k { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.news-card h2, .news-card h3 { font-size: var(--text-lg); color: var(--ink); font-weight: 400; letter-spacing: 0; }
.news-card p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }
/* Post in evidenza: due colonne (foto | testo) a piena larghezza. */
.news-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 780px) { .news-feature { grid-template-columns: 1fr; } }
.news-feature .news-card__media { aspect-ratio: auto; min-height: 280px; }
.news-feature .news-card__body { justify-content: center; padding: var(--space-7); gap: var(--space-4); }
.news-feature h2 { font-size: var(--text-xl); }
/* Card cliccabile (apre il modal con foto + testo completo): preview clampata + "Leggi tutto". */
.news-card[data-news] { cursor: pointer; }
.news-card[data-news]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.news-card__text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.news-feature .news-card__text { -webkit-line-clamp: 6; }
.news-card__more { margin-top: var(--space-2); font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand); display: inline-flex; align-items: center; gap: .35rem; transition: gap var(--dur) var(--ease); }
.news-card[data-news]:hover .news-card__more { gap: .65rem; }

/* ---------- Modal (scheda prodotto e news): foto + titolo + testo completo, scrollabile ---------- */
.fp-modal { position: fixed; inset: 0; z-index: 210; display: none; place-items: center; padding: clamp(1rem, 4vmin, 3rem);
  background: rgba(25,20,16,.88); backdrop-filter: blur(4px); }
.fp-modal.is-open { display: grid; animation: fp-lb-in 200ms var(--ease); }
.fp-modal__card { position: relative; background: var(--surface); border-radius: var(--radius); overflow: hidden;
  width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; }
/* La foto si adatta alla propria forma (i prodotti sono spesso quadrati): un 16/9 ritagliato ne taglierebbe
   via meta'. Cappata in altezza cosi' il testo sotto resta raggiungibile. */
.fp-modal__media { flex: 0 0 auto; overflow: hidden; background: var(--sand); display: grid; place-items: center; }
.fp-modal__media img { width: 100%; height: auto; max-height: 46vh; object-fit: contain; }
.fp-modal__body { padding: var(--space-7) var(--space-7) var(--space-8); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fp-modal__body .news-card__k { display: block; margin-bottom: var(--space-3); }
.fp-modal__body h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.fp-modal__body p { color: var(--ink-muted); }
.fp-modal__body p + p { margin-top: var(--space-4); }
.fp-modal__x { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 3; width: 42px; height: 42px; border: none;
  border-radius: var(--radius-pill); background: rgba(25,20,16,.55); color: #fff; font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
  transition: background var(--dur) var(--ease); }
.fp-modal__x:hover { background: rgba(25,20,16,.8); }
@media (prefers-reduced-motion: reduce) { .fp-modal.is-open { animation: none; } }

/* ---------- FAQ accordion (native <details>, accessibile) ---------- */
/* ⭐ Le domande erano un elenco separato da filetti: la forma di un documento. Diventano cartoncini che
   si aprono, cioè oggetti — ed è la stessa grammatica delle tessere e delle porte, non una terza. */
.faq { display: grid; gap: var(--space-3); max-width: 54rem; margin-inline: auto; }
.faq details { background: var(--surface); border: 0; border-bottom: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease); }
.faq details[open] { box-shadow: var(--shadow-md); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-5) var(--space-6); font-family: var(--font-display);
  font-weight: 400; font-size: var(--text-lg); color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--sage); background: transparent; color: var(--brand); font-size: 1.2rem; line-height: 1; font-weight: 400;
  font-family: var(--font-body); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--brand); }
.faq details > div, .faq details > p { margin: 0; padding: 0 var(--space-6) var(--space-5); color: var(--ink-muted); font-size: var(--text-sm); max-width: 62ch; }
.faq details > div > p { margin: 0; }
.faq details > div > * + * { margin-top: var(--space-3); }
/* Una risposta puo' contenere un elenco (le superfici ammesse, le verifiche prima del montaggio):
   e' la sola forma che la prosa non regge, e va rientrata perche' si legga come elenco. */
.faq details ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.faq details li { list-style: disc; }

/* ---------- Indice tematico della pagina FAQ: ancore, nessun JavaScript ---------- */
.faq-index { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; max-width: 54rem; margin-inline: auto; }
.faq-index a { display: inline-flex; align-items: center; gap: var(--space-2); padding: .6em 1.2em; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); border: 1px solid var(--line); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-decoration: none; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.faq-index a:hover { border-color: var(--brand); color: var(--brand); }
/* L'indice e i gruppi stanno nella STESSA sezione: due sezioni consecutive sommerebbero i padding
   e lascerebbero un vuoto di oltre 200px fra la mappa e la prima domanda. */
.faq-index + .faq-group { margin-top: var(--space-9); }
.faq-index span { display: grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: var(--radius-pill);
  background: var(--sage-tint); color: var(--brand-dark); font-size: var(--text-xs); font-weight: 400; }

/* La testata e' fissa (71px misurati): senza scroll-margin l'ancora atterra sotto la barra. */
.faq-group { scroll-margin-top: 5.5rem; }
.faq-group + .faq-group { margin-top: var(--space-9); }
.faq-group__title { max-width: 54rem; margin: 0 auto var(--space-5); font-size: var(--text-xl); font-weight: 400;
  display: flex; align-items: center; gap: var(--space-4); }
.faq-group__title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

/* ---------- Form contatti (placeholder statico o shortcode first-party) ---------- */
.contact-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: start; }
@media (max-width: 880px) { .contact-cols { grid-template-columns: 1fr; gap: var(--space-6); } }
.contact-form { display: grid; gap: var(--space-5); max-width: 46rem; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 560px) { .contact-form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); }
.field input, .field textarea { font: inherit; padding: .9em 1.1em; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-muted); }
.consent input { margin-top: .25em; }
.contact-info { background: var(--surface); border-radius: var(--radius); padding: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); box-shadow: var(--shadow-sm); }
.contact-info dl { display: grid; gap: var(--space-5); }
.contact-info dt { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-muted); }
.contact-info dd { color: var(--ink); margin-top: 4px; }
.contact-info a { color: var(--brand-dark); transition: color var(--dur) var(--ease); }
.contact-info a:hover { color: var(--brand); }

/* ---------- Footer (ink, 3 colonne) ---------- */
/* Il piè prende lo stesso verso di luce della testata: un gradiente appena percettibile invece di una
   campitura. Una superficie grande e perfettamente piatta è la cosa che più fa «modulo» in una pagina. */
.site-footer { background:
    radial-gradient(120% 140% at 12% -20%, rgba(127,220,230,.10) 0%, rgba(127,220,230,0) 55%),
    linear-gradient(160deg, #235062 0%, #1D4254 58%, #1A3B4C 100%);
  color: #D3E2E8; margin-top: 0; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-7); padding-block: var(--space-9); }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.site-footer .wordmark { color: #fff; font-size: var(--text-xl); }
.site-footer .wordmark b { color: var(--sage); }
.site-footer__tag { margin-top: var(--space-4); font-size: var(--text-sm); color: #C9DAE1; max-width: 34ch; }
.site-footer__contact { margin-top: var(--space-5); font-size: var(--text-sm); }
.site-footer h4 { font-size: var(--text-xs); font-family: var(--font-body); font-weight: 400; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: #fff; margin-bottom: var(--space-4); }
.site-footer a { color: #D3E2E8; text-decoration: none; transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: #fff; }
.site-footer ul { display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.13); padding-block: var(--space-5);
  font-size: var(--text-xs); color: #C9DAE1; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; }
.site-footer__legal a { text-decoration: underline; }
/* Powered by Dgitaly (footer, solo progetti reali via fence fp:real) */
.site-footer__dgitaly { display: inline-flex; align-items: center; gap: .45em; color: #C9DAE1; font-size: var(--text-xs);
  text-decoration: none; opacity: .85; transition: opacity var(--dur) var(--ease); }
.site-footer__dgitaly:hover { opacity: 1; color: #fff; }
/* ⚠ Il marchio Dgitaly è scuro: su un piè scuro spariva. Gli si mette sotto una pastiglia chiara — la
   stessa forma tonda di tutto il resto — così si legge senza toccare il file. */
.site-footer__dgitaly img { height: 16px; width: 16px; display: block; border-radius: 50%; }
.site-footer__dgitaly span.pastiglia, .site-footer__dgitaly img {
  box-sizing: content-box; padding: 3px; background: rgba(255,255,255,.94); border-radius: 50%; }

/* ---------- Sticky CTA bar (solo mobile) ---------- */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: rgba(250,247,242,.97); backdrop-filter: blur(8px); border-top: var(--border); }
.cta-bar a { flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; }
.cta-bar__call { background: var(--brand); color: #fff; }
.cta-bar__wa { background: var(--brand-dark); color: #fff; }
.cta-bar__quote { background: var(--accent); color: var(--ink); }
@media (min-width: 861px) { .cta-bar { display: none; } }
@media (max-width: 860px) { body { padding-bottom: 76px; } }

/* ---------- Contatto WhatsApp: una RIGA dei recapiti, non una pastiglia fissa ----------
   Un canale di contatto sta dove stanno gli altri contatti. Una pastiglia fissa in basso a destra
   accompagnerebbe il visitatore su tutte e 23 le pagine per un'azione che serve in una sola.
   ⚠ Il markup lo emette il contratto di resa, che senza numero produce un SEGNAPOSTO non cliccabile. */
.wa-riga { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; color: var(--brand-dark);
  transition: color var(--dur) var(--ease); }
.wa-riga:hover { color: var(--brand); }
.wa-riga .fp-wa__ic { width: 22px; height: 22px; flex: 0 0 auto; padding: 3px; box-sizing: content-box;
  border-radius: 50%; background: #25D366; color: #fff; }
/* Il segnaposto non promette nulla: nessun cursore da collegamento, e il testo dice che manca il dato. */
.wa-riga--segnaposto { color: var(--ink-muted); cursor: default; }
.wa-riga--segnaposto .fp-wa__ic { background: #B7C9BE; }
.wa-riga--segnaposto span:last-child { font-style: italic; }

/* ---------- 404 ---------- */
.notfound { text-align: center; max-width: 40rem; margin-inline: auto; }
.notfound h1 { margin-top: var(--space-3); }
.notfound p { color: var(--ink-muted); font-size: var(--text-md); margin-top: var(--space-5); }
.notfound .wp-block-buttons { justify-content: center; margin-top: var(--space-7); }

/* ---------- Micro-animazioni: UNA sola grammatica ----------
   ⚠ I reveal MUOVONO e non sfumano, e non è una scelta di gusto: un testo vicino alla soglia AA non scende
   sotto durante la transizione, e le immagini nei reveal si scaricano sempre (mai opacity:0). Qui il gesto
   è unico e lento — nessun «pop», nessuna scala, nessun rimbalzo: erano tre grammatiche diverse nella
   stessa pagina. Fail-visible: senza .js l'occultamento non si applica. */
.js .reveal { transform: translateY(18px); will-change: transform; }
.js .reveal.is-visible { transform: none; transition: transform var(--dur-reveal) var(--ease); }
.js .reveal.is-image { transform: translateY(18px); }
.js .reveal.is-image.is-visible { transform: none; transition: transform var(--dur-reveal) var(--ease); }
.js .bento > .reveal, .js .feats > .reveal, .js .steps > .reveal, .js .cat-gallery > .reveal, .js .prod-cards > .reveal, .js .news-grid > .reveal,
.js .doors > .reveal { transition-delay: calc(var(--reveal-i, 0) * 90ms); }
/* Entrata hero: il contenuto sopra la piega scivola in posizione al caricamento, con la stessa grammatica. */
@media (prefers-reduced-motion: no-preference) {
  .hero__text > *, .hero__inner > * { animation: fp-hero-rise .8s var(--ease) both; }
  .hero .eyebrow { animation-delay: .05s; } .hero h1 { animation-delay: .14s; }
  .hero__lead { animation-delay: .26s; } .hero__cta { animation-delay: .38s; } .hero .badges { animation-delay: .48s; }
}
@keyframes fp-hero-rise { from { transform: translateY(18px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: none; } .hero__slide { animation: none; } }

/* ---------- Lista preventivo (mu-plugin forgepress-quote-list) ----------
   I comandi li crea il JavaScript: senza JS non resta in pagina nessun bottone morto. */
/* ⚠⚠ ERA UN FILETTO E NON SI VEDEVA. Un bordo da 1px in `--line` sulla banda chiara misura 1.18 di
   contrasto col fondo: in mezzo a una pagina di superfici piene si legge come testo sciolto, non come un
   comando. Ora è una pastiglia con una superficie propria e la stessa ombra delle altre bolle. */
.fp-quote-add { margin-top: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .72em 1.35em; border-radius: var(--radius-pill); border: 0;
  background: var(--surface); box-shadow: var(--glass-bordo), var(--shadow-sm);
  color: var(--brand-dark); font-family: var(--font-body);
  font-weight: 400; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.fp-quote-add:hover { color: var(--brand); box-shadow: var(--glass-bordo), var(--shadow-md); transform: translateY(-2px); }
.fp-quote-add[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); transform: none; }
@media (prefers-reduced-motion: reduce) { .fp-quote-add:hover { transform: none; } }
.fp-quote-add[aria-pressed="true"]::before { content: "\2713"; font-weight: 400; }

/* Pannello fluttuante: due stati con UN solo comando. A riposo e' RIDOTTO a un tondo con icona e contatore
   (presente ma non invadente); aperto diventa l'elenco con le azioni. Lo stato e' una classe, non l'attributo
   hidden: display:none non si anima. Sotto gli 861px la barra fissa di contatto occupa il fondo, quindi il
   pannello si alza per non finirle sopra. */
.fp-quote { position: fixed; right: var(--gutter); bottom: var(--space-5); z-index: 55;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
/* Il display d'autore scavalca il display:none che l'attributo hidden eredita dallo user-agent: a lista
   vuota il pannello resterebbe in pagina col contatore a zero. Va riaffermato. */
.fp-quote[hidden] { display: none; }
.fp-quote.is-open { gap: var(--space-3); }
@media (max-width: 860px) {
  .fp-quote { bottom: 84px; }
  .fp-quote.is-open { left: var(--gutter); align-items: stretch; }
}
.fp-quote__toggle { position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); width: 54px; height: 54px; padding: 0; border: none; border-radius: 50%;
  background: var(--brand); color: #fff; font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease), border-radius var(--dur) var(--ease),
    background var(--dur) var(--ease); }
.fp-quote__toggle:hover { background: var(--brand-dark); }
.fp-quote.is-open .fp-quote__toggle { width: auto; height: auto; padding: .9em 1.5em; border-radius: var(--radius-pill); }
.fp-quote__ic { display: grid; place-items: center; width: 24px; height: 24px; }
.fp-quote__ic svg { width: 24px; height: 24px; }
.fp-quote.is-open .fp-quote__ic { display: none; }
/* L'etichetta resta nel documento anche da ridotto (lo screen reader legge l'aria-label del comando). */
.fp-quote__label { display: none; }
.fp-quote.is-open .fp-quote__label { display: inline; }
.fp-quote__n { position: absolute; top: -3px; right: -3px; display: grid; place-items: center;
  min-width: 1.55em; height: 1.55em; padding: 0 .35em; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--ink); font-size: var(--text-xs); font-weight: 400;
  border: 2px solid var(--paper); letter-spacing: 0; }
.fp-quote.is-open .fp-quote__n { position: static; border: none; }
/* Un articolo aggiunto a pannello ridotto darebbe un riscontro debolissimo: il contatore fa un sussulto. */
@keyframes fp-quote-bump { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.4); } }
.fp-quote.is-bump .fp-quote__n { animation: fp-quote-bump 420ms var(--ease); }
.fp-quote__body { width: min(22rem, calc(100vw - 2 * var(--gutter))); background: var(--surface);
  border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: grid; gap: var(--space-4);
  max-height: 0; opacity: 0; visibility: hidden; transform: translateY(-6px);
  padding: 0 var(--space-5); border-width: 0; overflow: hidden;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease), padding var(--dur) var(--ease); }
.fp-quote.is-open .fp-quote__body { max-height: 60vh; opacity: 1; visibility: visible; transform: none;
  padding: var(--space-5); border-width: 1px; overflow-y: auto; }
.fp-quote__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.fp-quote__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); }
.fp-quote__x { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink-muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.fp-quote__x:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.fp-quote__send { justify-content: center; }
.fp-quote__clear { background: none; border: none; color: var(--ink-muted); font-size: var(--text-xs);
  text-decoration: underline; cursor: pointer; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .fp-quote-add, .fp-quote__toggle, .fp-quote__body { transition: none; }
  .fp-quote.is-bump .fp-quote__n { animation: none; }
}
/* La scheda prodotto e' resa interattiva dal tema (role="button" per aprire il modal): il comando del
   preventivo NON puo' stare dentro, sarebbe un comando dentro un comando (axe: nested-interactive).
   Vive quindi in un contenitore fratello, che prende il posto della scheda nella griglia. */
.prod-item { display: flex; flex-direction: column; gap: var(--space-3); }
.prod-item > .prod-card { flex: 1 1 auto; }
.prod-item > .fp-quote-add { align-self: flex-start; margin-top: 0; }

/* ---------- Richiamo alle domande frequenti (home, fra i punti di forza e la banda contatti) ----------
   Una riga sola: chi arriva in fondo alla home trova la strada per le FAQ senza che la pagina si appesantisca. */
.faq-hint { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); text-decoration: none; border: 0; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.faq-hint:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.faq-hint:hover { color: var(--brand); }
.faq-hint__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--sage); background: transparent; color: var(--brand);
  font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); }
.faq-hint__txt { flex: 1 1 auto; font-size: var(--text-sm); color: var(--ink-muted); }
.faq-hint__txt strong { font-family: var(--font-body); font-weight: 400; color: var(--ink); }
.faq-hint__go { flex: 0 0 auto; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brand);
  display: inline-flex; align-items: center; gap: .35rem; }
.faq-hint__go::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.faq-hint:hover .faq-hint__go::after { transform: translateX(4px); }
@media (max-width: 700px) { .faq-hint { flex-wrap: wrap; } .faq-hint__txt { flex: 1 1 100%; order: 3; } }
@media (prefers-reduced-motion: reduce) { .faq-hint, .faq-hint__go::after { transition: none; } }