/* components.css — home_linen_store. Registro categoria «Negozi» (BeOptics primario, BeGadget per la
   banda di famiglia e il muro dei marchi): mezzi campi, forme organiche, bande a tinta che CAMBIANO
   lungo la pagina. Pagina UNICA con sei ancore.
   ⚠ Il turchese e' SUPERFICIE: nessuna regola qui gli mette sopra del testo, in nessuna direzione. */

/* ============================ occhiello, bottoni, testate di sezione ============================ */
.eyebrow {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink);
}
/* Sulle bande navy l'occhiello NON puo' essere --accent-ink (3.52): li' e' turchese chiaro (12.40). */
.eyebrow.on-dark { color: var(--accent-light); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-content: center;
  padding: .82rem 1.5rem; border-radius: var(--radius-pill); border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--primary { background: var(--accent-dark); color: var(--on-dark); }  /* 7.25:1 */
.btn--primary:hover { background: var(--brand); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn--on-dark { background: var(--paper); color: var(--ink); }
.btn--on-dark:hover { background: var(--accent-light); }

.sec-head { max-width: 46rem; margin-bottom: var(--space-7); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head > * + * { margin-top: var(--space-3); }
/* ⚠ Il lead NON prende `text-wrap: balance`: lo distribuirebbe su righe corte lasciando vuota la meta'
   destra. Prende la misura di lettura, che e' una cosa diversa. */
.lead { font-size: var(--text-md); color: var(--ink-muted); max-width: var(--measure); }
.sec-head--center .lead { margin-inline: auto; }

/* ============================ intestazione ============================ */
/* Barra di servizio sopra l'header (device della categoria: BeShoes2/BeGadget). Per una bottega porta
   l'informazione piu' cercata: orari e telefono. */
/* Vive DENTRO <header> (landmark banner): fuori, axe la segnala come contenuto senza regione. */
.utility-bar { background: var(--brand-dark); color: var(--on-dark-muted); font-size: .84rem; }
.utility-bar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: .5rem; }
.utility-bar a { color: var(--on-dark); }
.utility-bar a:hover { color: var(--accent-light); }
.utility-bar__hours { display: inline-flex; align-items: center; gap: .45rem; }
@media (max-width: 719px) { .utility-bar__hours { display: none; } }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; align-items: center; gap: var(--space-4); min-height: var(--header-h); }
/* ⚠⚠ `align-items: center` sulla riga NON basta: WordPress applica il BLOCK-GAP (24px) come
   `margin-top` ai fratelli del flow layout, e il flex centra la scatola col margine dentro — nav e CTA
   finivano 12px piu' in basso del logo. Misurato: centro riga 100.8, centro nav e CTA 112.8.
   Il margine si azzera sui figli DIRETTI e si ridichiara l'allineamento su ognuno. */
.site-header__row > * { margin-block: 0; align-self: center; }
/* ⚠⚠ E IL BLOCK-GAP COLPISCE DUE VOLTE: azzerarlo sui figli della RIGA non basta, perche' WordPress lo
   mette anche fra la barra di servizio e la riga, che sono fratelli dentro <header>. Misurato sui PIXEL
   dello screenshot: 36,5px d'aria sopra l'inchiostro contro 13,8px sotto — cioe' «sotto c'e' meno
   margine che sopra». Il DOM diceva «centrato» perche' misuravo dentro la riga, non nella fascia. */
.site-header > * { margin-block: 0; }
/* La contrazione la commuta reveal.js con .is-scrolled su .fp-shrink: la classe e' QUELLA, non un nome
   inventato — una regola scritta su una classe che nessuno commuta non si applica mai. */
.site-header.fp-shrink.is-scrolled { box-shadow: 0 6px 20px rgba(8, 24, 48, .08); }
.site-header.fp-shrink.is-scrolled .site-header__row { min-height: 64px; }
.site-header__row > .site-nav { margin-left: auto; }

.wordmark { display: inline-flex; align-items: center; gap: .7rem; }
.wordmark__mark img { width: 42px; height: 42px; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.05; }
.wordmark__name { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; letter-spacing: -.01em; color: var(--ink); }
.wordmark__sub { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

/* ⚠ Il numero vive nella BARRA DI SERVIZIO sopra l'intestazione: ripeterlo nella riga dell'header la
   faceva andare a capo a 1440 (l'ultima voce di nav e il numero cadevano su una seconda riga). Qui resta
   solo la versione compatta a icona, per i viewport dove la barra di servizio nasconde gli orari. */
.site-header__tel { display: none; }
.site-header__tel--compact { display: none; }
.site-header__cta { white-space: nowrap; }
@media (max-width: 899px) {
  .site-header__tel--compact { display: inline-flex; padding: .5rem; color: var(--ink); }
  .site-header__cta { display: none; }
}
/* La nav si stringe prima di andare a capo: sei voci lunghe non entrano a 1024 con la misura piena. */
@media (max-width: 1180px) { .site-nav .wp-block-navigation-item__content { font-size: .93rem; } }

/* --- menu mobile ---------------------------------------------------------------------------------
   ⚠⚠ Il difetto piu' ricorrente della flotta: il pannello resta BIANCO SU BIANCO. Misurato sul DOM
   reso, non dedotto: a menu APERTO il fondo calcolato era rgb(255,255,255) e il testo pure.
   Il markup di WP 7.1 e' annidato — nav > .responsive-container > .responsive-close >
   .responsive-dialog > .responsive-container-content > ul.wp-block-navigation__container — e il fondo
   va dichiarato sul CONTENITORE, mentre l'allineamento vive sulla `ul`, che porta `items-justified-right`
   ereditato dalla nav desktop. `!important` qui non e' pigrizia: il blocco core dichiara il proprio
   fondo con la stessa arma, e senza vince lui a prescindere dalla specificita'. */
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--brand) !important;
  color: var(--on-dark);
  padding: calc(var(--header-h) + 1rem) var(--gutter) var(--space-7);
}
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open a { color: var(--on-dark); font-size: 1.3rem; }
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--accent-light); }
/* ⚠⚠ Le voci partivano da x=167 su uno schermo da 390, e gli antenati che le spingevano a destra sono
   TRE, non uno: `.responsive-container-content` (align-items:flex-end) porta a destra l'intera lista,
   la `ul` eredita `items-justified-right` dalla nav desktop, e ogni `li` lo rifa' al suo interno.
   Correggerne uno solo non sposta niente — misurato risalendo la catena nodo per nodo. */
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container li,
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container ul {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: var(--space-4); }
/* La lista prende tutta la larghezza: senza, resta larga quanto la voce piu' lunga e il tocco cade fuori. */
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; }
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { width: 100%; }
/* La X: scura sul bianco dell'intestazione, chiara sul navy del pannello aperto. */
.site-header .wp-block-navigation__responsive-container-open { color: var(--ink); }
.site-header nav.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--on-dark) !important; }
.site-nav a:hover { color: var(--accent-ink); }
.site-nav .wp-block-navigation-item__content { font-family: var(--font-display); font-weight: 500; }

/* ============================ testata (hero) ============================
   Device BeOptics: testo a sinistra su fondo chiaro, fotografia a destra ritagliata da un ARCO.
   E' cio' che rende «grande» una foto senza pretenderla enorme: a 1440 css la mezza campata chiede
   ~940x680 fisici, non 2880. */
.hero { position: relative; background: var(--paper); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; overflow-x: clip; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.02fr 1fr; gap: var(--space-8); } }
.hero__eyebrow {
  font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 400; font-style: italic; color: var(--accent-ink); letter-spacing: -.01em; line-height: 1;
  margin-bottom: var(--space-3);
}
.hero h1 { text-transform: uppercase; }
.hero__lead { font-size: var(--text-md); color: var(--ink-muted); max-width: var(--measure); margin-top: var(--space-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* La fotografia dentro l'arco. L'arco e' un raggio asimmetrico, non una maschera esotica: regge ovunque
   e non dipende da `clip-path`, che azzerando l'elemento osservato lo nasconde anche al rivelatore. */
.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 42%;
}
@media (min-width: 900px) {
  /* ⚠ Il rapporto lo regge il PARCO FOTO, non il layout: la sola fotografia del negozio e' 4:3
     orizzontale, e un arco verticale ne userebbe meta' tagliando la siepe illuminata. Resta 4:3 e
     l'arco lo fa il RAGGIO, non il ritaglio. */
  .hero__media img { aspect-ratio: 4 / 3; border-radius: 46% 46% var(--radius-lg) var(--radius-lg) / 22% 22% var(--radius-lg) var(--radius-lg); }
}
/* La seconda foto piccola, sfalsata sull'angolo, su una piastra d'accento (BeOptics). */
.hero__inset {
  position: absolute; left: -4%; bottom: -8%; width: 46%; max-width: 250px;
  background: var(--accent); padding: .55rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-panel);
}
.hero__inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius-lg) - 6px); }
@media (max-width: 599px) { .hero__inset { display: none; } }

/* La striscia dei quattro valori, subito sotto la testata (BeOptics la tiene in alto, prima del catalogo). */
.valori { background: var(--surface); }
/* ⚠ TRE voci: una griglia a quattro colonne lascerebbe una cella orfana in fondo a destra.
   Su mobile una colonna sola, perche' 3 su 2 colonne lascerebbe di nuovo un buco. */
.valori__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 900px) { .valori__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.valore { padding-top: var(--space-4); border-top: 2px solid var(--accent); }
.valore h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.valore p { color: var(--ink-muted); font-size: .96rem; }

/* ============================ chi siamo: pannello a tinta con foto incastonata ============================
   Device BeOptics («Visit our 33 shops»): un pannello colorato porta il testo e la fotografia gli si
   appoggia sopra sbordando. E' il posto giusto per la sola foto del negozio VERO. */
.chisiamo { background: var(--paper); }
.chisiamo__panel {
  background: var(--accent-tint); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center;
}
@media (min-width: 900px) { .chisiamo__panel { grid-template-columns: .95fr 1.05fr; gap: var(--space-8); } }
/* ⚠ QUADRATA, non 4:3: il soggetto e' la vetrina, che nella sorgente e' alta quanto larga. In 4:3 il
   ritaglio prendeva mezza siepe e il negozio usciva compresso. */
.chisiamo__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-card); }
@media (min-width: 900px) { .chisiamo__media { margin-left: clamp(-3.25rem, -2.4vw, -1rem); } }
.chisiamo__body > * + * { margin-top: var(--space-4); }
.chisiamo__checks { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.chisiamo__checks li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-muted); }
.chisiamo__checks li::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em; margin-top: .12em; border-radius: 50%;
  background: var(--accent-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 76%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 76%;
}

/* ============================ le quattro famiglie merceologiche ============================
   Device BeGadget: banda fotografica a MEZZO CAMPO col titolo in sovrimpressione, e il testo accanto su
   fondo chiaro. Si alternano lato per lato lungo la pagina. Ogni famiglia e' un'ANCORA. */
.famiglia { scroll-margin-top: calc(var(--header-h) + 12px); }
.famiglia__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) {
  .famiglia__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  /* La specchiatura sposta la FOTO, non il testo: il testo resta leggibile da sinistra in entrambi i versi. */
  .famiglia--flip .famiglia__media { order: 2; }
}
.famiglia__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.famiglia__media img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; transition: transform 1.1s ease; }
.famiglia:hover .famiglia__media img { transform: scale(1.03); }
/* ⚠ Il titolo in sovrimpressione richiede una TARGA, non un velo: axe non valuta il testo sopra una
   fotografia, e su uno scatto chiaro il bianco puro scende sotto 2:1. La targa garantisce il contrasto
   qualunque sia il pixel sotto, e permette di tenere il velo leggero. */
.famiglia__plate {
  position: absolute; left: 0; bottom: 0; max-width: 88%;
  background: rgba(8, 24, 48, .86); color: var(--on-dark);
  padding: var(--space-4) var(--space-5); border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
}
.famiglia__plate .eyebrow { color: var(--accent-light); display: block; margin-bottom: .2rem; }
.famiglia__plate h2 { color: var(--on-dark); font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
.famiglia__body > * + * { margin-top: var(--space-4); }
/* ⭐ I REPARTI: ogni sotto-blocco porta la SUA fotografia sopra il suo testo. E' il modo in cui
   «la foto e' coerente col testo a cui e' affiancata» diventa una proprieta' della STRUTTURA e non una
   scelta da rifare a ogni cliente: il pattern cita un handle parlante (biancheria-bagno), non un indice. */
.reparti { display: grid; gap: var(--space-5); margin-top: var(--space-8); }
@media (min-width: 760px) {
  .reparti--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reparti--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ⚠⚠ Un reparto SOLO non si tiene stretto a sinistra: misurato, occupava il 46% del contenitore e
   lasciava il 54% bianco a destra. Diventa ORIZZONTALE — fotografia da un lato, testo dall'altro — e
   il testo copre il buco invece di lasciarlo. Sotto i 760px torna verticale, dove non c'e' buco. */
.reparti--1 { max-width: none; }
@media (min-width: 760px) {
  /* ⚠ La COLLOCAZIONE AUTOMATICA non basta: tre figli (figura, titolo, testo) su due colonne mandano
     la figura in (1,1), il titolo in (1,2) e il TESTO in (2,1) — cioe' sotto la foto, non accanto al
     titolo. Le celle si dichiarano: la figura occupa entrambe le righe, titolo e testo stanno in
     colonna 2 e si incontrano al centro, cosi' il blocco di testo resta centrato sulla fotografia. */
  .reparti--1 .reparto {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-7); align-items: center;
  }
  .reparti--1 .reparto__media { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .reparti--1 .reparto h3 { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .35rem; }
  .reparti--1 .reparto p  { grid-column: 2; grid-row: 2; align-self: start; max-width: var(--measure); }
}
.reparto { display: flex; flex-direction: column; }
.reparto__media { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-4); }
.reparto__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.reparto h3 { font-size: 1.06rem; margin-bottom: .3rem; padding-left: var(--space-3); border-left: 2px solid var(--accent); }
.reparto p { color: var(--ink-muted); font-size: .97rem; }

/* ============================ promozioni ============================ */
.promo { background: var(--brand); color: var(--on-dark); }
.promo h2, .promo h3 { color: var(--on-dark); }
.promo .lead { color: var(--on-dark-muted); }
/* ⚠ Il corpo della fascia e' UN capoverso solo sotto una testata centrata: a tutta larghezza rendeva
   110 caratteri per riga, ben oltre la fascia leggibile. Centrato con una misura generosa fa ~63 — e
   non e' una «meta' vuota», perche' la sezione e' centrata per disegno e i riquadri sotto la riempiono. */
.promo .prose--full > p { max-width: 42rem; margin-inline: auto; text-align: center; }
.promo__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-7); }
@media (min-width: 760px) { .promo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.promo__card { background: var(--brand-mid); border-radius: var(--radius-lg); overflow: hidden; }
.promo__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.promo__card figcaption { padding: var(--space-4); color: var(--on-dark-muted); font-size: .95rem; }

/* La frase del carosello: cinque fotogrammi che compongono UNA frase, quindi l'ordine e' semantico e le
   slide restano in sequenza leggibile anche senza JS. */
.carosello { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
  gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: var(--space-6);
  padding-bottom: var(--space-3); }
.carosello figure { scroll-snap-align: start; }
.carosello img { width: 100%; border-radius: var(--radius); }
/* ⚠ Una regione scrollabile deve essere raggiungibile da tastiera, altrimenti sotto reduced-motion
   diventa contenuto irraggiungibile. */
.carosello:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; }

/* ============================ il muro dei marchi ============================
   Device BeGadget («Compatible with:»), scalato a una PARETE. I loghi sono asset di PROGETTO sul canale
   @design: il verticale rende la griglia, quali marchi sia e' un dato del cliente.
   ⚠ I loghi sono scontornati su fondo chiaro: `contain`, mai `cover`, che ne taglierebbe le lettere.
   ⚠ Altezza uniforme e larghezza LIBERA: imporre anche la larghezza deformerebbe i marchi orizzontali
   (un logo con la scritta accanto al segno e' largo il triplo di uno quadrato). */
.brands { background: var(--surface); }
/* ⚠⚠ NON e' una griglia a colonne fisse: il numero dei marchi e' un dato del CLIENTE e non ha
   nessun motivo di dividere il numero di colonne. Con `repeat(6, 1fr)` trentuno marchi lasciano una
   cella ORFANA in fondo a destra (31 = 6x5 + 1). Righe che si centrano: l'ultima riga incompleta sta
   in mezzo, qualunque sia il numero. */
.brands__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-4); margin-top: var(--space-7);
}
@media (min-width: 860px) { .brands__grid { gap: var(--space-5); } }
.brands__cell {
  display: flex; align-items: center; justify-content: center;
  flex: 0 1 calc((100% - var(--space-4)) / 2);
  min-height: 84px; padding: var(--space-4);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
@media (min-width: 560px) { .brands__cell { flex-basis: calc((100% - var(--space-4) * 2) / 3); } }
@media (min-width: 860px) { .brands__cell { flex-basis: calc((100% - var(--space-5) * 4) / 5); } }
@media (min-width: 1100px) { .brands__cell { flex-basis: calc((100% - var(--space-5) * 5) / 6); } }
.brands__cell img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }

/* ============================ domande ricorrenti ============================ */
.faq { background: var(--paper); }
/* ⭐ La sezione non ha fotografia: il telaio CAMBIA, non resta quello a due colonne con la meta' destra
   bianca. Le domande si dispongono su due colonne quando c'e' spazio, e la testata prende tutta la riga. */
.faq__list { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
@media (min-width: 1000px) { .faq__list { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); } }
.faq .sec-head { max-width: none; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 1.1em; height: 1.1em; background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item[open] summary { background: var(--accent-tint); }
.faq__answer { padding: 0 var(--space-5) var(--space-5); color: var(--ink-muted); }
.faq__answer p { max-width: var(--measure); }

/* ============================ contatti ============================ */
.contatti { background: var(--surface); scroll-margin-top: calc(var(--header-h) + 12px); }
.contatti__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 900px) { .contatti__grid { grid-template-columns: .9fr 1.1fr; gap: var(--space-8); } }
.contatti__data { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.contatti__row { display: flex; gap: .7rem; align-items: flex-start; }
.contatti__row svg { width: 1.2em; height: 1.2em; flex: none; margin-top: .18em; color: var(--accent-ink); }
.contatti__row a:hover { color: var(--accent-ink); }
.contatti__hours { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.contatti__hours dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem var(--space-4); }
.contatti__hours dt { font-weight: 600; }
.contatti__hours dd { color: var(--ink-muted); }

/* Modulo: la casella di consenso NON e' un campo di testo — `width:100%` su di lei spingerebbe
   l'etichetta a cento pixel di distanza. */
.form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 1.4vw, 2rem); }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 620px) { .form__row--two { grid-template-columns: 1fr 1fr; } }
.form label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: .35rem; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; color: var(--ink); background: var(--paper);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form__consent { display: flex; gap: .6rem; align-items: flex-start; margin-top: var(--space-4); }
.form__consent input[type="checkbox"] { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .22em; }
.form__consent label { font-weight: 400; font-size: .92rem; color: var(--ink-muted); margin: 0; }
.form .btn { margin-top: var(--space-5); }

/* ============================ pie' di pagina ============================ */
.site-footer { background: var(--brand-dark); color: var(--on-dark-muted); padding-block: var(--space-8) var(--space-6); }
.site-footer h3 { color: var(--on-dark); font-size: 1rem; margin-bottom: var(--space-3); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--accent-light); }
.site-footer .wordmark__name { color: var(--on-dark); }
.site-footer .wordmark__sub { color: var(--on-dark-muted); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); } }
.site-footer__addr { margin-top: var(--space-4); max-width: var(--measure); }
.site-footer ul { display: grid; gap: .5rem; }
.legal { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center;
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.14); font-size: .88rem; }
.dgitaly { display: inline-flex; align-items: center; gap: .4rem; }
.dgitaly img { width: 20px; height: 20px; }

/* --- social: la pulsazione e' quella condivisa della flotta (fp-social-pulse), non una nuova --- */
.social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social__link { display: inline-flex; }
.social__ico {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
}
.social__ico::before { content: ""; width: 20px; height: 20px; background: var(--on-dark); }
.social__ico::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: fp-social-pulse 2.8s ease-in-out infinite;
}
.social__link:nth-of-type(2) .social__ico::after { animation-delay: .93s; }
.social__link:hover .social__ico { background: var(--accent); border-color: var(--accent); }
/* ⚠ Sul turchese l'icona NON puo' restare bianca (1.88): passa a navy, che sul turchese fa 9.42. */
.social__link:hover .social__ico::before { background: var(--brand); }
.social__link:hover .social__ico::after { animation-play-state: paused; }
.social__ico[data-social="facebook"]::before { -webkit-mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; }
.social__ico[data-social="instagram"]::before { -webkit-mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; }
@keyframes fp-social-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(var(--veil-rgb) / .45); }
  70%  { box-shadow: 0 0 0 11px rgb(var(--veil-rgb) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--veil-rgb) / 0); }
}
@media (prefers-reduced-motion: reduce) { .social__ico::after { animation: none; } }

/* ============================ barra CTA mobile ============================ */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  background: var(--brand); border-top: 1px solid rgba(255,255,255,.14);
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom, 0px)); }
.cta-bar__row { display: flex; gap: var(--space-3); }
.cta-bar .btn { flex: 1; }
@media (max-width: 899px) { .cta-bar { display: block; } body { padding-bottom: 4.5rem; } }

/* ============================ rivelazioni ============================
   ⚠ reveal.js commuta `.is-visible` su `.reveal`. A riposo si trasla di poco e si smorza: NIENTE
   `clip-path` che azzeri l'elemento, perche' un elemento azzerato non viene visto dall'osservatore che
   dovrebbe rivelarlo e resta invisibile per sempre. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.fp-stagger > .reveal:nth-child(2) { transition-delay: .07s; }
.fp-stagger > .reveal:nth-child(3) { transition-delay: .14s; }
.fp-stagger > .reveal:nth-child(4) { transition-delay: .21s; }
.fp-stagger > .reveal:nth-child(5) { transition-delay: .28s; }
.fp-stagger > .reveal:nth-child(6) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .famiglia__media img, .btn { transition: none; }
}

/* ============================ pagina legale ============================ */
.legal-page { padding-block: var(--section-y); }
.legal-page h2 { margin-top: var(--space-7); }
.legal-page h2:first-of-type { margin-top: var(--space-6); }
.legal-page p, .legal-page li { max-width: var(--measure); color: var(--ink-soft); }
.legal-page ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .4rem; margin-top: var(--space-3); }

/* ============================ galleria della famiglia ============================
   Il testo del cliente la promette esplicitamente («sfoglia la gallery»). Sei scatti a griglia REGOLARE:
   ⚠ formato UNIFORME e altezze uguali, perche' senza `aspect-ratio` ogni tessera prende il rapporto
   NATIVO della sua foto e la riga esce sfalsata. */
/* ⚠⚠ Due difetti in tre righe, entrambi misurati: le media query erano in ordine DECRESCENTE, quindi a
   1440 vinceva quella da 760 (tre colonne invece di quattro) — a parita' di match vince l'ultima
   dichiarata, non la piu' specifica. E il numero di scatti di una famiglia e' un dato del CLIENTE: non
   ha motivo di dividere le colonne, cosi' 14 foto lasciavano due celle orfane. Righe che si CENTRANO. */
/* La riga con cui il cliente chiude ogni pagina («sfoglia la gallery…», «per maggiori informazioni…»):
   introduce la galleria che la segue, quindi vive fra i reparti e gli scatti. */
/* ⚠ Anche questa era al 46% del contenitore, allineata a sinistra: una frase corta che lascia meta'
   riga bianca. Centrata, perche' e' la chiusura della sezione e introduce la galleria che segue. */
.famiglia__chiusura { margin-top: var(--space-7); font-size: var(--text-md); color: var(--ink-muted);
  max-width: var(--measure); margin-inline: auto; text-align: center; }
.galleria { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
/* ⚠ Il CSS non sa contare: senza dichiararlo, una famiglia con DUE scatti li rendeva larghi un quarto
   e lasciava mezza riga bianca. Il pattern dichiara se la galleria e' corta o lunga. */
.galleria > li { flex: 0 1 calc((100% - var(--space-4)) / 2); }
@media (min-width: 760px)  { .galleria--molte > li { flex-basis: calc((100% - var(--space-4) * 2) / 3); } }
@media (min-width: 1100px) { .galleria--molte > li { flex-basis: calc((100% - var(--space-4) * 3) / 4); } }
.galleria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

/* ============================ lightbox della galleria ============================
   Il motore la costruisce da se' su ogni `a.zoom` (frecce, tastiera, Esc, click sul fondo) ed e' INERTE
   dove non ce ne sono: qui la marca SOLO la galleria della biancheria, che e' l'unica lunga.
   ⚠⚠ Lo stato a RIPOSO deve essere nascosto. `reveal.js` crea il contenitore al caricamento della pagina
   e lo apre commutando `is-open`: senza `display: none` l'overlay resterebbe sempre sopra la pagina e
   INTERCETTEREBBE OGNI CLICK — la X sembrerebbe rotta perche' non c'e' nulla di aperto, e nemmeno il
   resto sarebbe cliccabile. E' un difetto gia' pagato in flotta, trovato dal cliente e non dai gate. */
.fp-lb { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(5, 15, 31, .95); }
.fp-lb.is-open { display: flex; align-items: center; justify-content: center; }
.fp-lb__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.fp-lb__x, .fp-lb__nav {
  position: absolute; background: none; border: 1px solid var(--accent); color: var(--on-dark);
  width: 2.75rem; height: 2.75rem; line-height: 1; font-size: 1.4rem; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.fp-lb__x { top: var(--space-5); right: var(--space-5); }
.fp-lb__prev { left: var(--space-5); top: 50%; transform: translateY(-50%); }
.fp-lb__next { right: var(--space-5); top: 50%; transform: translateY(-50%); }
.fp-lb__nav svg { width: 1.4rem; height: 1.4rem; }
/* ⚠ Sul turchese il segno NON puo' restare bianco (1,88): passa a navy, che sul turchese fa 9,42. */
.fp-lb__x:hover, .fp-lb__nav:hover { background: var(--accent); color: var(--brand); border-color: var(--accent); }
.fp-lb__x:focus-visible, .fp-lb__nav:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

/* La foto apribile si dichiara al tocco: un cursore che non cambia non dice che si puo' aprire. */
.galleria a.zoom { display: block; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.galleria a.zoom img { transition: transform .5s var(--ease, ease); }
.galleria a.zoom:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .galleria a.zoom img { transition: none; } }