/* E-Figo — stile del sito. Generato da Layout E-figoWeb.
   Non modificare a mano: viene riscritto a ogni pubblicazione. */
:root{
  --efigo-sfondo:#FFFFFF;
  --efigo-superficie:#F4F7FB;
  --efigo-testo:#14213D;
  --efigo-testo-tenue:#6b707d;
  --efigo-bordo:#dcdee2;
  --efigo-primario:#1A56DB;
  --efigo-primario-leggibile:#1A56DB;
  --efigo-primario-azione:#1A56DB;
  --efigo-primario-scuro:#1547b4;
  --efigo-primario-tenue:#e4ebfb;
  --efigo-su-primario:#FFFFFF;
  --efigo-secondario:#14213D;
  --efigo-su-secondario:#FFFFFF;
  --efigo-accento:#F0B429;
  --efigo-accento-azione:#F0B429;
  --efigo-su-accento:#111827;
  --efigo-su-superficie:#14213D;
  --efigo-su-sfondo:#14213D;
}

body, .wp-site-blocks { background: var(--efigo-sfondo, #FFFFFF); color: var(--efigo-testo, #1C2B4B); }
.wp-block-group.has-background, .wp-block-column.has-background { background-color: var(--efigo-superficie, #F4F6F9) !important; }
/* Bug segnalato: questa riga, senza l'esclusione, dipingeva del colore
   "testo" anche i titoli DENTRO le cover -- cioe' scuro sopra una fotografia
   scura. Dentro una cover il colore lo decide il blocco piu' sotto. */
h1:not(.wp-block-cover h1), h2:not(.wp-block-cover h2),
h3:not(.wp-block-cover h3), h4:not(.wp-block-cover h4),
.wp-block-heading:not(.wp-block-cover .wp-block-heading) { color: var(--efigo-testo, #1C2B4B); }
a { color: var(--efigo-primario-leggibile, #1A73E8); }
.wp-block-button__link, .wp-element-button {
  background-color: var(--efigo-primario-azione, #1A73E8) !important;
  color: var(--efigo-su-primario, #FFFFFF) !important;
  border-color: var(--efigo-primario-azione, #1A73E8) !important;
  border-radius: 8px;
}
.wp-block-button__link:hover, .wp-element-button:hover { background-color: var(--efigo-primario-scuro, #1557B0) !important; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important; color: var(--efigo-primario-leggibile, #1A73E8) !important;
  border: 2px solid var(--efigo-primario-azione, #1A73E8) !important;
}
.wp-block-separator { border-color: var(--efigo-bordo); }
/* Il footer porta sempre una coppia di riserva. Senza, bastava una variabile
   non valida perche' il fondo tornasse quello chiaro del tema mentre il testo
   restava bianco: invisibile. Il browser scarta un colore di sfondo non
   valido ma applica lo stesso quello del testo, quindi l'errore si manifesta
   SOLO come testo che sparisce -- il difetto segnalato. */
.wp-site-blocks > footer, footer.wp-block-template-part, .wp-block-template-part footer {
  background: var(--efigo-secondario, #1C2B4B);
  color: var(--efigo-su-secondario, #FFFFFF);
}
.wp-site-blocks > footer :where(p,li,h1,h2,h3,h4,span,td,th,figcaption),
footer.wp-block-template-part :where(p,li,h1,h2,h3,h4,span,td,th,figcaption) {
  color: var(--efigo-su-secondario, #FFFFFF);
}
.wp-site-blocks > footer a, footer.wp-block-template-part a, .wp-block-template-part footer a {
  color: var(--efigo-su-secondario, #FFFFFF); opacity:.85;
}


.wp-block-cover { position: relative; }
/* Perche' 0.62 e non "un po' scuro": sulla fotografia piu' chiara possibile
   (bianca) il bianco sopra un velo #0B1220 da' 3.51:1 a 0.50, 4.02 a 0.54,
   4.57 a 0.58 e 5.26 a 0.62. Il minimo di legge e' 4.5, quindi 0.58 passa di
   un'unghia e 0.62 passa con margine. Risolto, non indovinato. */
.wp-block-cover > .wp-block-cover__background,
.wp-block-cover > .has-background-dim { opacity: .62 !important; background-color: #0B1220 !important; }
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container
  *:not(.wp-block-button__link):not(.wp-element-button) {
  color: #FFFFFF !important;
}
.wp-block-cover .wp-block-cover__inner-container { text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.wp-block-cover .wp-block-cover__inner-container
  a:not(.wp-block-button__link):not(.wp-element-button) { text-decoration: underline; }

/* layout: conversione */
.wp-block-cover:first-of-type { min-height: 84vh !important; }
.wp-block-cover:first-of-type .wp-block-cover__inner-container { max-width: 780px; }
.wp-block-buttons { justify-content: center; margin-top: 1.4rem; }
.wp-block-button__link, .wp-element-button { padding: 1rem 2.4rem !important; font-size: 1.05rem; }
.wp-block-columns .wp-block-column { text-align: center; padding: 1.5rem 1rem; }
.wp-block-group.has-background {
  background: var(--efigo-primario-azione, #1A73E8) !important; color: var(--efigo-su-primario, #fff);
  padding: 3rem 1.5rem; border-radius: 14px;
}
.wp-block-group.has-background h2, .wp-block-group.has-background h3,
.wp-block-group.has-background p { color: var(--efigo-su-primario); }
.wp-block-group.has-background .wp-block-button__link {
  background: var(--efigo-su-primario, #fff) !important; color: var(--efigo-primario-leggibile, #1A73E8) !important;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Poppins:wght@400;600;700&family=Lora:wght@400;600;700&family=Roboto:wght@400;700&family=Oswald:wght@400;600;700&display=swap');

/* #task-video-nelle-bande-2026-10-10 — il filmato dietro al testo.
   Copre la banda come farebbe una fotografia e non intercetta i clic: chi
   passa di li' deve poter premere il pulsante dell'hero, non mettere in pausa
   la carta da parati. */
.efigo-blocco.efigo-con-video-sfondo { position: relative; overflow: hidden; }
/* Due classi nel selettore, non una. La regola gia' presente per lo sfondo
   fotografico (.efigo-con-foto-sfondo > *) e' piu' specifica di una classe
   sola, e rimetteva il contenitore del filmato in position:relative: da li'
   il video spariva, perche' un contenitore relativo che dentro ha solo
   elementi assoluti e' alto zero. Era il motivo per cui lo sfondo video non
   si vedeva, ne' con YouTube ne' con un file caricato. */
.efigo-blocco.efigo-con-video-sfondo > .efigo-video-sfondo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.efigo-blocco.efigo-con-video-sfondo > .efigo-video-sfondo video,
.efigo-blocco.efigo-con-video-sfondo > .efigo-video-sfondo iframe,
.efigo-blocco.efigo-con-video-sfondo > .efigo-video-sfondo .efigo-video-poster {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: 177.78vh; min-height: 56.25vw;
  border: 0; object-fit: cover;
}
/* Il fermo immagine sta SOTTO al filmato: quando il lettore parte lo copre,
   quando non parte resta lui. Nessuno dei due e' mai una banda bianca. */
.efigo-blocco.efigo-con-video-sfondo > .efigo-video-sfondo .efigo-video-poster { z-index: 0; }
.efigo-blocco.efigo-con-video-sfondo > .efigo-video-sfondo video,
.efigo-blocco.efigo-con-video-sfondo > .efigo-video-sfondo iframe { z-index: 1; }
/* Il velo scurente sta fra il filmato e le scritte: senza, il testo bianco
   sparisce ogni volta che passa un fotogramma chiaro. */
.efigo-blocco.efigo-con-video-sfondo > .efigo-blocco-velo { position: absolute; z-index: 1; }
.efigo-blocco.efigo-con-video-sfondo > *:not(.efigo-video-sfondo):not(.efigo-blocco-velo) {
  position: relative; z-index: 2;
}

/* Chi ha chiesto al proprio computer di ridurre le animazioni non vuole un
   filmato che parte da solo: resta il fermo immagine del poster. */
@media (prefers-reduced-motion: reduce) {
  .efigo-video-sfondo video { display: none; }
  .efigo-video-sfondo iframe { display: none; }
  /* ...ma il fermo immagine resta, altrimenti la banda e' bianca: era
     esattamente il caso segnalato. */
  .efigo-video-sfondo .efigo-video-poster { display: block; }
}

/* Il video dentro la banda, sotto alle scritte. */
.efigo-banda-video-dentro { position: relative; z-index: 2; width: min(760px, 92%); margin: 18px auto 0; }

/* #task-blocchi-video-testo-2026-10-10 — il video al posto della fotografia
   dentro ai blocchi "video e testo": il guscio proporzionato ce l'ha gia'
   .efigo-blocco-video, qui serve solo che non debordi dalla colonna. */
.efigo-videotesto-video { width: 100%; }
.efigo-videotesto-video .efigo-blocco-video { margin: 0; width: 100%; }

.efigo-blocco { margin: 2.5rem auto; }
.efigo-blocco > .wp-block-columns + .wp-block-columns { margin-top: 1.2rem; }
.efigo-blocco-etichetta { font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; opacity: .75; margin: 0 0 .25rem; }
.efigo-blocco-prezzo { font-size: 1.22rem; font-weight: 800; margin: .5rem 0; }
.efigo-blocco-esaurito { font-size: .8rem; font-weight: 700; opacity: .7; margin: .2rem 0; }
.efigo-blocco-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; }
.efigo-blocco-vuoto { border: 1.5px dashed var(--efigo-bordo, #cbd5e1); border-radius: 12px;
  padding: 1.4rem; text-align: center; opacity: .85; }
.efigo-blocco .wp-block-post-title a { text-decoration: none; }

/* ── Le sezioni nuove ─────────────────────────────────────────────────
   Ogni fondo porta con se' il colore del testo: e' la regola nata dal
   difetto di leggibilita' segnalato sui layout, e vale anche qui. */
.efigo-blocco-icona { font-size: 2.1rem; line-height: 1; margin-bottom: .55rem; }
/* #task-blocchi-testo-2026-10-16: i blocchi di solo testo. */
.efigo-blocco-icona-piccola { font-size: 1.5rem; margin-bottom: .35rem; }
.efigo-testo-centro { max-width: 760px; margin: 0 auto; text-align: center; }
.efigo-blocco-sottotitolo { font-size: 1.12rem; line-height: 1.5; opacity: .8; margin: .4rem 0 0; }
.efigo-testo-paragrafo { max-width: 760px; margin: 0 auto; line-height: 1.7; }
.efigo-testo-paragrafo .wp-block-paragraph { margin: 0 0 1rem; }
.efigo-blocco[data-efigo-blocco="testo2col"] .wp-block-column,
.efigo-blocco[data-efigo-blocco="testo3col"] .wp-block-column { text-align: left; }
.efigo-blocco-cifra { font-size: 2.6rem; font-weight: 900; line-height: 1.05; margin: 0 0 .2rem;
  color: var(--efigo-primario-leggibile, #1A73E8); }
.efigo-blocco-didascalia { font-size: .82rem; opacity: .75; margin: 0; }
.efigo-blocco-loghi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.6rem 2.4rem; padding: .6rem 0; }
.efigo-blocco-logo img { max-height: 42px; width: auto; filter: grayscale(1); opacity: .62;
  transition: filter .18s, opacity .18s; }
.efigo-blocco-logo:hover img { filter: none; opacity: 1; }
.efigo-blocco-ritratto { width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  margin: 0 auto .6rem; display: block; }
.efigo-blocco-ritratto.piccolo { width: 52px; height: 52px; margin: 0; }
.efigo-blocco-iniziali { display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 800; color: #1C2B4B; }
.efigo-blocco-citazione { margin: 0 auto; max-width: 760px; text-align: center; }
.efigo-blocco-citazione blockquote { margin: 0; border: none; padding: 0; }
.efigo-blocco-citazione blockquote p { font-size: 1.28rem; line-height: 1.6; font-style: italic; }
.efigo-blocco-citazione figcaption { display: flex; align-items: center; justify-content: center;
  gap: .7rem; margin-top: 1rem; text-align: left; }

.efigo-blocco-cta, .efigo-blocco-iscrizione {
  background: var(--efigo-primario-azione, #1A73E8); color: var(--efigo-su-primario, #fff);
  padding: 2.6rem 1.5rem; margin: 2.5rem 0; background-size: cover; background-position: center;
  position: relative;
}
.efigo-blocco-iscrizione { background: var(--efigo-secondario, #1C2B4B); color: var(--efigo-su-secondario, #fff); }
/* Con una fotografia sotto, il testo bianco non si legge piu' da solo:
   stesso velo usato per le copertine, stessa ragione. Ora e' l'elemento
   .efigo-blocco-velo e non piu' uno ::before: ::before sul blocco serviva
   anche ai separatori, e due usi dello stesso pseudo-elemento vogliono dire
   che uno dei due sparisce appena si usano insieme. */
.efigo-blocco-cta-dentro { position: relative; z-index: 2; max-width: 820px; margin: 0 auto;
  text-align: center; }
.efigo-blocco-cta h2, .efigo-blocco-cta p,
.efigo-blocco-iscrizione h2, .efigo-blocco-iscrizione p { color: inherit !important; margin-top: 0; }
.efigo-blocco-cta .wp-block-buttons { justify-content: center; margin-top: 1.1rem; }
.efigo-blocco-cta .wp-block-button__link {
  background: var(--efigo-su-primario, #fff) !important; color: var(--efigo-primario-leggibile, #1A73E8) !important;
}
.efigo-blocco-modulo { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.1rem; }
.efigo-blocco-modulo input { flex: 1 1 210px; max-width: 290px; border: none; border-radius: 8px;
  padding: .78rem .95rem; font-size: 1rem; font-family: inherit; color: #1C2B4B; background: #fff; }
.efigo-blocco-modulo button { border: none; cursor: pointer; font-family: inherit; }
.efigo-blocco-nota-piccola { font-size: .76rem; opacity: .78; margin: .7rem 0 0; }
@media (max-width: 600px) { .efigo-blocco-modulo input { max-width: none; flex-basis: 100%; } }

/* ── Allineamento, colore, larghezza ──────────────────────────────────
   Richiesti dall'utente per OGNI blocco. Il colore si applica al testo e
   ai titoli dentro il blocco, non al fondo: un comando che cambia il colore
   del testo e per sbaglio anche quello dello sfondo e' un comando che non
   si usa piu'. */
.efigo-blocco[style*="--efigo-testo-blocco"],
.efigo-blocco[style*="--efigo-testo-blocco"] :where(h1,h2,h3,h4,h5,h6,p,li,td,th,dt,dd,
  figcaption,blockquote,time,span,b,strong,em,small,label,
  a:not(.wp-block-button__link):not(.wp-element-button)) {
  color: var(--efigo-testo-blocco) !important;
}
.efigo-all-sinistra, .efigo-all-sinistra :where(h1,h2,h3,h4,p) { text-align: left; }
.efigo-all-centro,   .efigo-all-centro   :where(h1,h2,h3,h4,p) { text-align: center; }
.efigo-all-destra,   .efigo-all-destra   :where(h1,h2,h3,h4,p) { text-align: right; }
.efigo-all-centro .wp-block-buttons { justify-content: center; }
.efigo-all-destra  .wp-block-buttons { justify-content: flex-end; }
.efigo-all-sinistra .wp-block-buttons { justify-content: flex-start; }

/* L'altezza delle fotografie nelle schede. object-fit:cover ritaglia invece
   di deformare: un prodotto schiacciato e' peggio di un prodotto tagliato.
   L'emoji di riserva (quando il prodotto non ha foto) segue la stessa
   altezza, altrimenti la scheda senza foto resterebbe piu' corta di tutte. */
.efigo-blocco[style*="--efigo-alt-foto"] :where(.wp-block-image, .wp-block-post-featured-image) img {
  /* !important perche' i temi dichiarano height:auto sulle immagini dei
     blocchi, e con la sola specificita' la vincerebbero a volte si' e a
     volte no, a seconda del tema del cliente. */
  height: var(--efigo-alt-foto) !important; width: 100% !important;
  object-fit: cover !important; display: block; border-radius: 10px;
}
/* #task-click-to-call-2026-10-07 — il numero da chiamare: grande, perche'
   e' il contenuto principale del blocco, non una nota a pie' di pagina. */
.efigo-blocco-numero { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800;
  margin: .4rem 0 .9rem; letter-spacing: .01em; }
.efigo-blocco-numero a { color: inherit; text-decoration: none; }
.efigo-blocco-numero a:hover { text-decoration: underline; }
/* Da telefono il pulsante prende tutta la riga: il dito non deve mirare. */
@media (max-width: 600px) {
  .efigo-blocco-chiamaci .wp-block-button { width: 100%; }
  .efigo-blocco-chiamaci .wp-block-button__link { display: block; text-align: center; }
}

/* #task-blocchi-foto-testo-2026-10-06 — la fotografia con il suo testo. */
.efigo-fototesto-foto { margin: 0 0 .85rem; }
.efigo-fototesto-foto img { width: 100%; height: auto; display: block; border-radius: 10px; }
.efigo-fototesto-mancante { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px;
  margin-bottom: .85rem; background: var(--efigo-superficie, #F4F6F9);
  border: 1px dashed rgba(0,0,0,.16); }
.efigo-blocco[style*="--efigo-alt-foto"] .efigo-fototesto-mancante {
  height: var(--efigo-alt-foto); aspect-ratio: auto;
}
/* Foto e parole affiancate si guardano negli occhi: allineate al centro, non
   appese in cima, altrimenti con un testo corto la foto sembra scivolata. */
.efigo-blocco-fototesto .efigo-fototesto-righe { align-items: center; gap: 2rem; }
.efigo-blocco-fototesto .efigo-fototesto-parole > :first-child { margin-top: 0; }
.efigo-blocco-fototesto.efigo-fototesto-sopra .efigo-fototesto-foto { margin-bottom: 1.1rem; }
/* Su telefono le colonne si impilano: la fotografia va sempre per prima,
   anche quando sta a destra. Leggere il testo e poi scoprire la foto e'
   l'ordine sbagliato su uno schermo stretto. */
@media (max-width: 781px) {
  .efigo-blocco-fototesto.efigo-foto-destra .efigo-fototesto-righe {
    display: flex; flex-direction: column-reverse;
  }
}

/* I ritratti sono cerchi: l'altezza ne cambia il diametro, larghezza e
   altezza insieme, altrimenti diventano ellissi. */
.efigo-blocco[style*="--efigo-alt-foto"] .efigo-blocco-ritratto:not(.piccolo) {
  width: var(--efigo-alt-foto) !important; height: var(--efigo-alt-foto) !important;
}
.efigo-blocco[style*="--efigo-alt-foto"] .efigo-blocco-emoji {
  height: var(--efigo-alt-foto); display: flex; align-items: center; justify-content: center;
  background: var(--efigo-superficie, #F4F6F9); border-radius: 10px; margin-bottom: .6rem;
}

/* Le larghezze: "piena" esce dalla colonna del contenuto come fa alignfull
   di WordPress, senza dover toccare il tema.

   #task-larghezza-piena-2026-10-14 — la versione precedente era
     width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); ...
   e non funzionava, per due motivi indipendenti:

   1. WordPress mette i blocchi dentro .is-layout-constrained, che impone ai
      figli "margin-left: auto !important". Senza !important la nostra regola
      perdeva e i margini negativi non venivano mai applicati: il blocco
      restava incollato al bordo interno del contenitore e sbordava a destra.
   2. 100vw comprende la barra di scorrimento. Sul sito di prova la finestra
      utile era 723 px e 100vw ne valeva 738: anche vincendo la cascata, il
      blocco sarebbe stato 15 px troppo largo e avrebbe aggiunto una barra
      orizzontale.

   Ora usiamo lo stesso meccanismo di alignfull, che sulla stessa pagina
   funziona: sbordare esattamente del padding del tema, preso dalla sua
   variabile. Non nomina vw, quindi la barra di scorrimento non c'entra piu'.

   Se un tema non dichiara quella variabile il margine vale 0: il blocco
   riempie il suo contenitore invece di tutta la pagina. E' una resa
   elegante, non un guasto -- meglio di un blocco che sborda. Tutti i siti
   in produzione oggi usano temi a blocchi, che la dichiarano. */
.efigo-larg-piena {
  --efigo-sborda-sx: var(--wp--style--root--padding-left, 0px);
  --efigo-sborda-dx: var(--wp--style--root--padding-right, 0px);
  width: auto !important;
  max-width: none !important;
  margin-left: calc(var(--efigo-sborda-sx) * -1) !important;
  margin-right: calc(var(--efigo-sborda-dx) * -1) !important;
}
.efigo-larg-larga  { max-width: 1280px; margin-left: auto; margin-right: auto; }
.efigo-larg-normale{ max-width: 860px;  margin-left: auto; margin-right: auto; }
.efigo-larg-stretta{ max-width: 620px;  margin-left: auto; margin-right: auto; }

/* ── Immagine intera, apertura, galleria ─────────────────────────────── */
.efigo-blocco-immagine, .efigo-blocco-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  padding: 2.5rem 1.5rem; color: #fff;
}
.efigo-blocco-velo { position: absolute; inset: 0; background: #0B1220; opacity: .62; }

/* ═══ #task-blocchi-nuovi-2026-10-19 (richiesta utente) ═══════════════════
   Carattere del blocco, pulsante (colore/grandezza), overlay (colore +
   trasparenza), saturazione della foto, fedelta' di spazi e a-capo. */
.efigo-con-font,
.efigo-con-font :where(h1,h2,h3,h4,h5,h6,p,li,span,a,blockquote,figcaption,button,input,label,td,th,strong,em) {
  font-family: var(--efigo-font-blocco) !important;
}
.efigo-testo-fedele { white-space: pre-wrap; }

.wp-block-button__link.efigo-btn-piccolo { padding: .42em 1.05em; font-size: .85rem; }
.wp-block-button__link.efigo-btn-medio   { padding: .6em 1.5em;   font-size: 1rem; }
.wp-block-button__link.efigo-btn-grande  { padding: .8em 2em;     font-size: 1.15rem; }
.wp-block-button__link.efigo-btn-enorme  { padding: 1em 2.6em;    font-size: 1.35rem; }
.efigo-blocco-pulsante-dentro { display: flex; flex-direction: column; gap: .9rem; }

/* Overlay sulla foto di SFONDO (immagine/hero/cta e ogni blocco con foto): si
   tinge il velo che e' gia' sopra la foto. */
.efigo-con-overlay.efigo-con-foto-sfondo > .efigo-blocco-velo {
  background: var(--efigo-ov-colore) !important;
  opacity: var(--efigo-ov-op, .4) !important;
  display: block !important;
}
/* Overlay sulle IMMAGINI <img> (1/2/3 immagini con testo, immagine e testo, galleria). */
.efigo-con-overlay figure.wp-block-image { position: relative; }
.efigo-con-overlay figure.wp-block-image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--efigo-ov-colore); opacity: var(--efigo-ov-op, .4);
}
/* Saturazione: sulle <img> e, per la foto di sfondo, dipinta su ::before cosi'
   il filtro NON tocca il testo ne' il velo. */
.efigo-con-sat figure.wp-block-image img, .efigo-con-sat > img,
.efigo-con-sat .efigo-fototesto-foto img { filter: saturate(var(--efigo-img-sat, 1)); }
.efigo-con-sat.efigo-con-foto-sfondo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--efigo-img-sfondo);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: saturate(var(--efigo-img-sat, 1));
}
.efigo-con-sat.efigo-con-foto-sfondo > .efigo-blocco-velo { z-index: 1; }
.efigo-con-sat.efigo-con-foto-sfondo > *:not(.efigo-blocco-velo):not(.efigo-video-sfondo) { position: relative; z-index: 2; }
.efigo-blocco-sopra-foto { position: relative; z-index: 2; max-width: 820px; text-align: center;
  text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.efigo-blocco-sopra-foto :where(h1,h2,p) { color: #fff; }
/* L'apertura SENZA fotografia ha per fondo il colore secondario della
   palette, che e' scuro. Il titolo pero' lo dipingeva la regola dei colori
   del tema -- piu' specifica di questa -- e il risultato era testo scuro su
   fondo scuro: invisibile. Stessa classe di difetto del footer, trovata
   misurando i colori resi e non guardando la pagina.
   Qui serve !important perche' la regola della palette ha specificita' 0,3,0
   contro gli 0,1,0 di quella sopra: senza, vince di nuovo lei. */
.efigo-blocco-hero.efigo-hero-senza-foto,
.efigo-blocco-hero.efigo-hero-senza-foto :where(h1,h2,h3,p,span,li,figcaption,
  a:not(.wp-block-button__link):not(.wp-element-button)) {
  color: var(--efigo-su-secondario, #FFFFFF) !important;
}
.efigo-blocco-hero.efigo-hero-senza-foto {
  background-color: var(--efigo-secondario, #1C2B4B);
}
.efigo-blocco-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.12; margin: 0 0 .6rem; }
.efigo-blocco-hero .wp-block-buttons { margin-top: 1.3rem; }
/* La parallasse solo da tablet in su: su telefono background-attachment
   fixed non funziona (iOS) o fa scorrere a scatti. Meglio niente che male. */
@media (min-width: 782px) { .efigo-parallasse { background-attachment: fixed; } }

/* ═══════════════════════════════════════════════════════════════════════
   I COMANDI CHE VALGONO PER OGNI BLOCCO
   #task-blocchi-stile-universale-2026-10-06 (richiesta utente)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Fondo a colore ───────────────────────────────────────────────── */
.efigo-con-fondo {
  background-color: var(--efigo-sfondo-blocco);
  padding: 2.2rem 1.5rem; border-radius: 14px;
}
.efigo-con-fondo.efigo-larg-piena { border-radius: 0; }

/* ── 2. Fondo a fotografia ───────────────────────────────────────────────
   Questa regola e' anche quella che da' la fotografia a "Immagine intera" e
   all'apertura: da oggi l'indirizzo non e' piu' scritto nello stile inline
   ma arriva da --efigo-img-sfondo, uno solo per tutti i blocchi. */
.efigo-con-foto-sfondo {
  position: relative; overflow: hidden;
  background-image: var(--efigo-img-sfondo);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.efigo-blocco.efigo-con-foto-sfondo:not(.efigo-blocco-immagine):not(.efigo-blocco-hero):not(.efigo-blocco-cta) {
  padding: 2.6rem 1.6rem; border-radius: 14px;
}
.efigo-con-foto-sfondo.efigo-larg-piena { border-radius: 0; }
/* Il velo sta sotto al contenuto, non sopra: senza questo z-index il testo
   finirebbe dietro al velo e si vedrebbe soltanto il velo. */
.efigo-con-foto-sfondo > .efigo-blocco-velo { z-index: 1; }
.efigo-con-foto-sfondo > *:not(.efigo-blocco-velo):not(.efigo-video-sfondo) { position: relative; z-index: 2; }
/* "Immagine intera" senza titolo non porta testo sopra: velarla la
   scurirebbe senza motivo. */
.efigo-senza-velo > .efigo-blocco-velo { display: none; }

/* ── 2b. Altezza minima del blocco ───────────────────────────────────────
   Il contenuto si centra in verticale: un riquadro alto con il testo
   incollato in cima non e' quello che si cerca quando si alza un blocco.
   "Immagine intera" e "Apertura" restano fuori: hanno la loro altezza in
   percentuale di schermo e due comandi per la stessa cosa si contraddicono. */
.efigo-con-altezza:not(.efigo-blocco-immagine):not(.efigo-blocco-hero) {
  min-height: var(--efigo-alt-blocco);
  display: flex; flex-direction: column; justify-content: center;
}

/* ── 3. Grandezza del testo ──────────────────────────────────────────── */
.efigo-txt-piccolo { --efigo-scala: .88; }
.efigo-txt-normale { --efigo-scala: 1; }
.efigo-txt-grande  { --efigo-scala: 1.18; }
.efigo-txt-enorme  { --efigo-scala: 1.38; }
.efigo-blocco[class*="efigo-txt-"] :where(p,li,td,th,figcaption,blockquote,label,input,button) {
  font-size: calc(1rem * var(--efigo-scala, 1));
}
.efigo-blocco[class*="efigo-txt-"] :where(h1) { font-size: calc(2.45rem * var(--efigo-scala, 1)); }
.efigo-blocco[class*="efigo-txt-"] :where(h2) { font-size: calc(1.85rem * var(--efigo-scala, 1)); }
.efigo-blocco[class*="efigo-txt-"] :where(h3) { font-size: calc(1.32rem * var(--efigo-scala, 1)); }
.efigo-blocco[class*="efigo-txt-"] :where(h4) { font-size: calc(1.08rem * var(--efigo-scala, 1)); }
.efigo-blocco[class*="efigo-txt-"] .efigo-blocco-prezzo { font-size: calc(1.22rem * var(--efigo-scala, 1)); }
.efigo-blocco[class*="efigo-txt-"] .efigo-blocco-cifra { font-size: calc(2.6rem * var(--efigo-scala, 1)); }
.efigo-blocco[class*="efigo-txt-"] .efigo-blocco-etichetta { font-size: calc(.72rem * var(--efigo-scala, 1)); }
.efigo-blocco[class*="efigo-txt-"] .efigo-blocco-didascalia { font-size: calc(.82rem * var(--efigo-scala, 1)); }

/* ── 4. I separatori ─────────────────────────────────────────────────────
   Tredici effetti, tutto in CSS: niente immagini da caricare e seguono il
   colore del blocco. Le forme curve si ottengono mascherando una striscia
   colorata con una sagoma SVG scritta nel foglio: nessun file esterno. */
.efigo-sep {
  display: block; width: 100%; border: 0; flex-basis: 100%;
  --efigo-sep-col: var(--efigo-testo-blocco, var(--efigo-bordo, #CBD5E1));
}
.efigo-sep-su  { margin: 0 0 1.7rem; }
.efigo-sep-giu { margin: 1.7rem 0 0; }

.efigo-sep-spazio { height: 2.2rem; }
.efigo-sep-linea  { height: 1px; background: var(--efigo-sep-col); opacity: .28; }
.efigo-sep-doppia { height: 6px; border-top: 1px solid var(--efigo-sep-col);
  border-bottom: 1px solid var(--efigo-sep-col); opacity: .34; }
.efigo-sep-spessa { height: 4px; width: 104px; margin-left: auto; margin-right: auto;
  background: var(--efigo-sep-col); border-radius: 3px; opacity: .75; }
.efigo-sep-tratteggio { height: 0; border-top: 2px dashed var(--efigo-sep-col); opacity: .42; }
.efigo-sep-punti  { height: 0; border-top: 3px dotted var(--efigo-sep-col); opacity: .48; }
.efigo-sep-sfumata { height: 2px; opacity: .55;
  background: linear-gradient(90deg, transparent, var(--efigo-sep-col), transparent); }
.efigo-sep-pallini { height: 9px; width: 62px; margin-left: auto; margin-right: auto; opacity: .5;
  background-image: radial-gradient(circle, var(--efigo-sep-col) 46%, transparent 48%);
  background-size: 21px 9px; background-repeat: repeat-x; }
.efigo-sep-rombo { height: 12px; position: relative; }
.efigo-sep-rombo::before { content: ""; position: absolute; left: 50%; top: 0;
  width: 11px; height: 11px; margin-left: -5.5px; background: var(--efigo-sep-col);
  transform: rotate(45deg); opacity: .55; }
.efigo-sep-rombo::after { content: ""; position: absolute; left: 0; right: 0; top: 5px;
  height: 1px; background: var(--efigo-sep-col); opacity: .22; }

.efigo-sep-su  { --efigo-sep-tinta: var(--efigo-sep-tinta-su, var(--efigo-sep-col)); }
.efigo-sep-giu { --efigo-sep-tinta: var(--efigo-sep-tinta-giu, var(--efigo-sep-col)); }
/* #task-separatore-transizione-2026-10-19: diagonale/curva/onda/zigzag sono
   TRANSIZIONI piene, non righine. Una fascia di colore (quello del blocco
   accanto, scelto dall'utente) con il bordo sagomato: da' continuita' e
   movimento fra una sezione e l'altra. "su" ribalta la forma per toccare il
   blocco precedente. */
.efigo-sep-onda, .efigo-sep-zigzag, .efigo-sep-curva, .efigo-sep-diagonale {
  background: var(--efigo-sep-tinta); opacity: 1;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.efigo-sep-su.efigo-sep-onda, .efigo-sep-su.efigo-sep-curva,
.efigo-sep-su.efigo-sep-diagonale, .efigo-sep-su.efigo-sep-zigzag { transform: scaleY(-1); }
.efigo-sep-su.efigo-sep-onda, .efigo-sep-su.efigo-sep-curva,
.efigo-sep-su.efigo-sep-diagonale, .efigo-sep-su.efigo-sep-zigzag { margin: 0 0 1rem; }
.efigo-sep-giu.efigo-sep-onda, .efigo-sep-giu.efigo-sep-curva,
.efigo-sep-giu.efigo-sep-diagonale, .efigo-sep-giu.efigo-sep-zigzag { margin: 1rem 0 0; }
.efigo-sep-onda { height: 54px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C150,42 300,-18 450,10 C600,38 750,-14 900,10 C1050,36 1140,-4 1200,10 L1200,60 L0,60 Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C150,42 300,-18 450,10 C600,38 750,-14 900,10 C1050,36 1140,-4 1200,10 L1200,60 L0,60 Z' fill='black'/%3E%3C/svg%3E"); }
.efigo-sep-curva { height: 54px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,22 Q600,-26 1200,22 L1200,60 L0,60 Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,22 Q600,-26 1200,22 L1200,60 L0,60 Z' fill='black'/%3E%3C/svg%3E"); }
.efigo-sep-diagonale { height: 48px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,34 L100,40 L0,40 Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,34 L100,40 L0,40 Z' fill='black'/%3E%3C/svg%3E"); }
.efigo-sep-zigzag { height: 34px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34' preserveAspectRatio='none'%3E%3Cpath d='M0,14 L30,0 L60,14 L60,34 L0,34 Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34' preserveAspectRatio='none'%3E%3Cpath d='M0,14 L30,0 L60,14 L60,34 L0,34 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 72px 34px; mask-size: 72px 34px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }

/* Dentro un blocco a fondo pieno o fotografico il separatore deve stare
   dentro ai margini, non incollato al bordo. */
.efigo-con-fondo > .efigo-sep-su, .efigo-con-foto-sfondo > .efigo-sep-su { margin-bottom: 1.2rem; }
.efigo-con-fondo > .efigo-sep-giu, .efigo-con-foto-sfondo > .efigo-sep-giu { margin-top: 1.2rem; }
/* I blocchi che centrano il contenuto con flex: il separatore non deve
   entrare nella fila orizzontale. */
.efigo-blocco-immagine, .efigo-blocco-hero { flex-wrap: wrap; }

/* ── 5. Il video ─────────────────────────────────────────────────────────
   aspect-ratio invece del vecchio trucco del padding percentuale: meno
   righe e nessun riquadro vuoto mentre il video carica. */
.efigo-blocco-video { position: relative; width: 100%; overflow: hidden;
  border-radius: 14px; background: #0B1220; cursor: pointer; }
.efigo-blocco-video > iframe, .efigo-blocco-video > video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  object-fit: cover;
}
.efigo-video-16-9 { aspect-ratio: 16 / 9; }
.efigo-video-4-3  { aspect-ratio: 4 / 3; }
.efigo-video-1-1  { aspect-ratio: 1 / 1; }
.efigo-video-21-9 { aspect-ratio: 21 / 9; }
.efigo-blocco-video.efigo-larg-piena, .efigo-larg-piena > .efigo-blocco-video { border-radius: 0; }

.efigo-blocco-galleria { display: grid; gap: .75rem;
  grid-template-columns: repeat(var(--efigo-gal-colonne, 3), minmax(0, 1fr)); }
.efigo-galleria-pezzo { margin: 0; }
.efigo-galleria-pezzo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
  border-radius: 10px; display: block; }
.efigo-galleria-pezzo figcaption { font-size: .78rem; opacity: .75; margin-top: .35rem; }
@media (max-width: 781px) { .efigo-blocco-galleria { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .efigo-blocco-galleria { grid-template-columns: 1fr; } }
@media (max-width: 781px) {
  .efigo-blocco .wp-block-columns { flex-wrap: wrap; }
  .efigo-blocco .wp-block-column { flex-basis: calc(50% - .5rem) !important; }
}
@media (max-width: 480px) {
  .efigo-blocco .wp-block-column { flex-basis: 100% !important; }
}


/* ══ #task-distanza-bordi-ombre-2026-10-16 — distanza, bordi, ombre ══════
   Tre comandi che valgono per tutti i blocchi. La difficolta' e' che «i
   pezzi dentro al blocco» sono cose diverse in ogni tipo: colonne nelle
   schede, .efigo-flip nei riquadri che si girano, celle nel bento,
   fotografie nella galleria. L'elenco sta scritto qui una volta sola -- con
   :is(), che lo rende leggibile -- invece che ripetuto in trenta
   disegnatori. */

/* ── La distanza fra i pezzi ──────────────────────────────────────────── */
.efigo-blocco[class*="efigo-dist-"] :is(.wp-block-columns, .efigo-flip-griglia,
  .efigo-bento, .efigo-blocco-galleria, .efigo-blocco-loghi, .efigo-oriz-pista,
  .efigo-rotta, .efigo-imp-pila, .efigo-mq-gruppo, .efigo-svela) {
  gap: var(--efigo-mis-distanza) !important;
}
/* Le colonne di WordPress tengono anche un margine proprio fra una e
   l'altra: senza azzerarlo, «attaccati» resta a un centimetro di distanza. */
.efigo-blocco[class*="efigo-dist-"] .wp-block-column { margin-left: 0 !important; margin-right: 0 !important; }
/* I tre passi, e il perche' di ognuno:
   1 compatto  14px — densita' alta: listini, tabelle, cataloghi fitti.
                      Mostra piu' roba e fa scorrere di meno.
   2 standard   22px — l'equilibrio fra testo e immagini: siti aziendali,
                      blog, negozi. E' il passo giusto nove volte su dieci.
   3 largo      40px — da' respiro: portfolio, pagine eleganti, poche cose
                      importanti. */
.efigo-dist-0 { --efigo-mis-distanza: 0px; }
.efigo-dist-1 { --efigo-mis-distanza: 14px; }
.efigo-dist-2 { --efigo-mis-distanza: 22px; }
.efigo-dist-3 { --efigo-mis-distanza: 40px; }
/* A zero le schede si toccano: il bordo arrotondato fra due pezzi attaccati
   lascia due mezzelune vuote, quindi si toglie. */
.efigo-dist-0.efigo-con-raggio { --efigo-mis-raggio: 0px; }

/* ── Gli angoli arrotondati ───────────────────────────────────────────────
   Due famiglie, non una. I riquadri (card, colonne, celle) e le fotografie
   si arrotondano per ragioni diverse e in misure diverse: 6px su una card
   e' «professionale», 6px su una fotografia non si vede nemmeno.
   I passi che hanno senso:
     dettagli      4-6px   pulsanti, campi, badge: ammorbidito ma strutturato.
     medi          8-12px  card, box, widget, immagini in evidenza. Lo
                           standard di Bootstrap e Tailwind.
     contenitori  16-24px  sezioni intere: morbido, aria da applicazione.
     tondo           50%   ritratti e distintivi, su un quadrato.
   Il ritratto (.efigo-blocco-ritratto) resta fuori da qui apposta: e' tondo
   di suo, e squadrarlo perche' si e' scelto «angoli medi» sarebbe un
   effetto collaterale, non una scelta. */
.efigo-con-raggio :is(.wp-block-column, .efigo-flip, .efigo-flip-faccia,
  .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo,
  .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc,
  .efigo-ov-scena, .efigo-lib-scena, .efigo-riv) {
  border-radius: var(--efigo-mis-raggio) !important;
}
/* Le fotografie. Senza una misura propria seguono i riquadri: e' quello che
   facevano prima, e i blocchi gia' in pagina non devono cambiare da soli. */
:is(.efigo-con-raggio, .efigo-con-raggio-foto) :is(figure.wp-block-image img,
  .efigo-rotta-foto img, .efigo-galleria-pezzo img, .efigo-svela-img,
  .efigo-cella-media, .efigo-blocco-logo img) {
  border-radius: var(--efigo-mis-raggio-foto, var(--efigo-mis-raggio, 0px)) !important;
}
/* Tonde: il cerchio vuole un quadrato, altrimenti esce un'ellisse. Si usa
   l'altezza delle fotografie anche come larghezza, e si centra. */
.efigo-foto-tonda :is(figure.wp-block-image img, .efigo-rotta-foto img,
  .efigo-galleria-pezzo img, .efigo-svela-img, .efigo-cella-media) {
  border-radius: 50% !important;
  width: var(--efigo-alt-foto, 180px) !important;
  height: var(--efigo-alt-foto, 180px) !important;
  max-width: 100%;
  object-fit: cover;
  display: block;
  margin-left: auto; margin-right: auto;
}
.efigo-foto-tonda :is(figure.wp-block-image, .efigo-galleria-pezzo) { overflow: visible !important; }
/* Il ritaglio: senza overflow nascosto, una fotografia dentro un riquadro
   arrotondato esce dagli angoli e l'arrotondamento non si vede. */
.efigo-con-raggio :is(.wp-block-column, .efigo-bento-cella, .efigo-oriz-pezzo,
  .efigo-galleria-pezzo, figure.wp-block-image) { overflow: hidden; }

/* ── Le ombre ─────────────────────────────────────────────────────────── */
.efigo-con-ombra :is(.wp-block-column, .efigo-flip, .efigo-bento-cella,
  .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo,
  .efigo-sc, .efigo-blocco-logo, figure.wp-block-image) {
  box-shadow: var(--efigo-mis-ombra) !important;
}
/* «Solo uno»: otto regole scritte a mano, perche' in :nth-child() non si
   puo' mettere una variabile. Otto e' il massimo di pezzi che un blocco
   nostro mette in riga, quindi copre tutti i casi veri. */
.efigo-con-ombra[class*="efigo-ombra-solo-"] :is(.wp-block-column, .efigo-flip,
  .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card,
  .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image) {
  box-shadow: none !important;
}
.efigo-ombra-solo-1 :is(.wp-block-column, .efigo-flip, .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image):nth-child(1),
.efigo-ombra-solo-2 :is(.wp-block-column, .efigo-flip, .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image):nth-child(2),
.efigo-ombra-solo-3 :is(.wp-block-column, .efigo-flip, .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image):nth-child(3),
.efigo-ombra-solo-4 :is(.wp-block-column, .efigo-flip, .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image):nth-child(4),
.efigo-ombra-solo-5 :is(.wp-block-column, .efigo-flip, .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image):nth-child(5),
.efigo-ombra-solo-6 :is(.wp-block-column, .efigo-flip, .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image):nth-child(6),
.efigo-ombra-solo-7 :is(.wp-block-column, .efigo-flip, .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image):nth-child(7),
.efigo-ombra-solo-8 :is(.wp-block-column, .efigo-flip, .efigo-bento-cella, .efigo-rotta-pezzo, .efigo-oriz-pezzo, .efigo-imp-card, .efigo-galleria-pezzo, .efigo-sc, .efigo-blocco-logo, figure.wp-block-image):nth-child(8) {
  box-shadow: var(--efigo-mis-ombra) !important;
}
/* Il pezzo in risalto si stacca anche di un soffio: l'ombra da sola, su uno
   schermo luminoso, si vede poco. */
.efigo-blocco[class*="efigo-ombra-solo-"] :is(.wp-block-column, .efigo-flip,
  .efigo-bento-cella, .efigo-oriz-pezzo):is(:nth-child(1), :nth-child(2), :nth-child(3),
  :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)) {
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 860px) {
  /* Sul telefono i pezzi sono in colonna: una distanza di 40 pixel fra due
     schede larghe tutto lo schermo diventa un salto. */
  .efigo-dist-3 { --efigo-mis-distanza: 24px; }
  .efigo-dist-2 { --efigo-mis-distanza: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   #task-blocchi-sovrapposizioni-2026-10-15 — le dieci sezioni nuove.

   TRE REGOLE CHE TENGONO IN PIEDI TUTTO IL BLOCCO DI CSS CHE SEGUE

   1. Niente JavaScript. Gli effetti sono position:sticky, :has(),
      animation-timeline e qualche transizione. Uno script che non parte
      lascia il contenuto nascosto per sempre; una regola CSS che il browser
      non conosce la ignora e la sezione resta leggibile.
   2. Le regole che NASCONDONO qualcosa stanno sempre dentro @supports. Il
      principio e' quello: si parte dal contenuto visibile e lo si nasconde
      solo quando si e' certi di saperlo rivelare.
   3. prefers-reduced-motion e' una scelta della persona, non un parere.
      Dove toglie l'animazione, la sezione deve continuare a dire le stesse
      cose -- mai una fila che non scorre o un testo rimasto trasparente.
   ══════════════════════════════════════════════════════════════════════════ */

/* Il conto delle larghezze non puo' dipendere dal tema.
   Un riquadro larghezza:40% con 26px di imbottitura, senza box-sizing, e'
   largo 40% PIU' 52 pixel: misurato in Chromium faceva 44,1% invece di 40, e
   sul telefono un riquadro al 100% sfondava lo schermo di 12 pixel. I temi
   WordPress quasi sempre dichiarano border-box su tutto, ma «quasi sempre»
   non e' una misura: lo dichiariamo noi sui blocchi nostri. */
.efigo-blocco-overlay *, .efigo-blocco-sovrapposti *, .efigo-blocco-flipbox *,
.efigo-blocco-grigliarotta *, .efigo-blocco-cardimpilate *, .efigo-blocco-rivelazione *,
.efigo-blocco-bento *, .efigo-blocco-marquee *, .efigo-blocco-scorrorizzontale *,
.efigo-blocco-svelahover * { box-sizing: border-box; }

/* ── Il riquadro di testo, condiviso ─────────────────────────────────────── */
.efigo-blocco .efigo-sc {
  background: var(--efigo-sc-fondo, #ffffffeb);
  color: var(--efigo-sc-testo, #111827);
  border-radius: 14px;
  padding: clamp(14px, 2.2vw, 26px);
  box-shadow: 0 20px 44px -26px rgba(15, 23, 42, .6);
}
.efigo-blocco .efigo-sc > :first-child { margin-top: 0; }
.efigo-blocco .efigo-sc > :last-child { margin-bottom: 0; }
.efigo-blocco .efigo-sc h3 { color: inherit; margin: 0 0 .4em; line-height: 1.2; }
.efigo-blocco .efigo-sc p { color: inherit; margin: 0 0 .7em; }
.efigo-blocco .efigo-sc-cta { display: inline-block; margin-top: .3em; text-decoration: none; }

/* ── 1. Testo sopra l'immagine ───────────────────────────────────────────── */
.efigo-blocco-overlay .efigo-ov-scena {
  position: relative; overflow: hidden; border-radius: 16px;
  background-image: var(--efigo-ov-img); background-size: cover;
  background-position: center; background-color: #CBD5E1;
  --efigo-mis-bordo: clamp(14px, 3vw, 40px);
}
.efigo-ov-velo {
  position: absolute; inset: 0; background: #000;
  opacity: var(--efigo-ov-velo, .25); pointer-events: none;
}
.efigo-blocco-overlay .efigo-sc { position: absolute; z-index: 2; width: var(--efigo-sc-largo, 42%); }
/* Le nove posizioni. Il riquadro al centro si sposta di meta' se stesso:
   e' l'unico modo di centrarlo senza sapere quanto e' alto. */
.efigo-pos-alto-sinistra  { top: var(--efigo-mis-bordo); left: var(--efigo-mis-bordo); }
.efigo-pos-alto-centro    { top: var(--efigo-mis-bordo); left: 50%; transform: translateX(-50%); }
.efigo-pos-alto-destra    { top: var(--efigo-mis-bordo); right: var(--efigo-mis-bordo); }
.efigo-pos-centro-sinistra{ top: 50%; left: var(--efigo-mis-bordo); transform: translateY(-50%); }
.efigo-pos-centro         { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.efigo-pos-centro-destra  { top: 50%; right: var(--efigo-mis-bordo); transform: translateY(-50%); }
.efigo-pos-basso-sinistra { bottom: var(--efigo-mis-bordo); left: var(--efigo-mis-bordo); }
.efigo-pos-basso-centro   { bottom: var(--efigo-mis-bordo); left: 50%; transform: translateX(-50%); }
.efigo-pos-basso-destra   { bottom: var(--efigo-mis-bordo); right: var(--efigo-mis-bordo); }

/* ── 2. Riquadri che si girano ───────────────────────────────────────────── */
.efigo-flip-griglia {
  display: grid; gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(var(--efigo-flip-colonne, 3), minmax(0, 1fr));
}
.efigo-flip { position: relative; height: var(--efigo-flip-alt, 270px); perspective: 1400px; }
.efigo-flip:focus-visible { outline: 3px solid #1A73E8; outline-offset: 3px; border-radius: 16px; }
.efigo-flip-faccia {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .62s cubic-bezier(.2, .72, .2, 1);
  box-shadow: 0 16px 34px -20px rgba(15, 23, 42, .55);
}
.efigo-flip-davanti {
  background-image: var(--efigo-flip-img); background-size: cover;
  background-position: center; background-color: #1C2B4B; color: #fff;
}
/* Senza fotografia il fondo chiaro: il bianco su bianco e' il difetto
   classico di questo blocco, e qui non puo' capitare. */
.efigo-flip-davanti.efigo-flip-senza-foto { background: #F1F5F9; color: #111827; }
.efigo-flip-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18)); }
.efigo-flip-dietro { background: var(--efigo-sc-fondo, #1C2B4B); color: var(--efigo-sc-testo, #fff); transform: rotateY(180deg); }
.efigo-flip-dentro { position: relative; z-index: 2; padding: clamp(12px, 2vw, 22px); width: 100%; }
.efigo-flip-dentro h3 { color: inherit; margin: 0 0 .35em; }
.efigo-flip-dentro p { color: inherit; margin: 0 0 .5em; }
.efigo-flip-dentro .efigo-blocco-icona { font-size: clamp(26px, 3vw, 40px); line-height: 1; margin-bottom: .3em; }
.efigo-flip:hover .efigo-flip-davanti, .efigo-flip:focus-within .efigo-flip-davanti { transform: rotateY(-180deg); }
.efigo-flip:hover .efigo-flip-dietro,  .efigo-flip:focus-within .efigo-flip-dietro  { transform: rotateY(0deg); }
.efigo-flip-verticale .efigo-flip-dietro { transform: rotateX(180deg); }
.efigo-flip-verticale .efigo-flip:hover .efigo-flip-davanti,
.efigo-flip-verticale .efigo-flip:focus-within .efigo-flip-davanti { transform: rotateX(-180deg); }
.efigo-flip-verticale .efigo-flip:hover .efigo-flip-dietro,
.efigo-flip-verticale .efigo-flip:focus-within .efigo-flip-dietro { transform: rotateX(0deg); }

/* ── 3. Riquadri liberi sull'immagine ────────────────────────────────────── */
/* overflow visibile: qui sporgere FUORI dalla fotografia e' la funzione, non
   un incidente. Il respiro sopra e sotto serve a non far tagliare i riquadri
   che sporgono dalla sezione accanto. */
.efigo-blocco-sovrapposti { overflow: visible; }
.efigo-blocco-sovrapposti .efigo-lib-scena {
  position: relative; border-radius: 16px; overflow: visible;
  background-image: var(--efigo-lib-img); background-size: cover;
  background-position: center; background-color: #CBD5E1;
  margin: clamp(8px, 3vw, 40px) 0;
}
.efigo-blocco-sovrapposti .efigo-lib-scena > .efigo-ov-velo { border-radius: 16px; opacity: var(--efigo-lib-velo, .1); }
.efigo-blocco-sovrapposti .efigo-lib-sc {
  position: absolute; z-index: 2;
  left: var(--efigo-lib-x, 8%); top: var(--efigo-lib-y, 55%);
  width: var(--efigo-sc-largo, 34%);
}

/* ── 4. Griglia sfalsata ─────────────────────────────────────────────────── */
.efigo-rotta { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
.efigo-rotta-pezzo { position: relative; }
.efigo-rotta-pezzo:nth-child(1) { grid-column: 1 / 7;  grid-row: 1; z-index: 1; }
.efigo-rotta-pezzo:nth-child(2) { grid-column: 6 / 12; grid-row: 1; z-index: 3; margin-top: clamp(30px, 8vw, 110px); }
.efigo-rotta-pezzo:nth-child(3) { grid-column: 3 / 10; grid-row: 2; z-index: 2; margin-top: clamp(-40px, -4vw, -12px); }
.efigo-rotta-foto { margin: 0; }
.efigo-rotta-foto img { width: 100%; height: var(--efigo-alt-foto, 260px); object-fit: cover; border-radius: 16px; display: block; }
/* Il riquadro di testo sale sulla fotografia di un terzo della sua altezza:
   e' la sovrapposizione che fa leggere le due cose come una sola. */
.efigo-rotta-sc { position: relative; z-index: 2; margin: -36px clamp(10px, 2vw, 26px) 0; }

/* ── 5. Card impilate ───────────────────────────────────────────────────── */
.efigo-imp { position: relative; }
.efigo-imp-sfondo {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background-image: var(--efigo-imp-img); background-size: cover;
  background-position: center; background-color: #1C2B4B;
}
.efigo-imp-sfondo > .efigo-ov-velo { opacity: var(--efigo-imp-velo, .3); }
/* Le card risalgono di un'altezza di schermo: scorrono SOPRA lo sfondo
   incollato invece che sotto. */
.efigo-imp-pila {
  position: relative; margin-top: -100vh; padding: 12vh clamp(10px, 4vw, 48px) 14vh;
  display: flex; flex-direction: column; gap: clamp(18px, 5vh, 54px);
}
.efigo-imp-pila.efigo-imp-senza-sfondo { margin-top: 0; padding-top: 0; }
.efigo-imp-card {
  position: sticky; top: calc(9vh + (var(--i, 0) * 20px));
  min-height: 42vh; display: flex; flex-direction: column; justify-content: center;
  background: var(--efigo-sc-fondo, #fffffff7); color: var(--efigo-sc-testo, #111827);
  border-radius: 20px; padding: clamp(18px, 3vw, 40px);
  box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .65);
}
.efigo-imp-card h3 { color: inherit; margin: 0 0 .4em; }
.efigo-imp-card p { color: inherit; }
.efigo-imp-numero {
  font-size: clamp(30px, 5vw, 64px); font-weight: 800; line-height: 1;
  opacity: .18; margin-bottom: .1em;
}
.efigo-imp-foto { margin: clamp(10px, 2vw, 22px) 0 0; }
.efigo-imp-foto img { width: 100%; height: var(--efigo-alt-foto, 220px); object-fit: cover; border-radius: 14px; display: block; }

/* ── 6. Rivelazione allo scorrimento ────────────────────────────────────── */
.efigo-riv {
  position: relative; overflow: hidden; border-radius: 16px;
  background-image: var(--efigo-riv-img); background-size: cover;
  background-position: center; background-color: #1C2B4B;
  display: flex; align-items: center;
}
.efigo-riv > .efigo-ov-velo { opacity: var(--efigo-riv-velo, .35); }
/* La parallasse vera: lo sfondo sta fermo mentre la pagina scorre. Su
   telefono si disattiva -- li' background-attachment:fixed fa scorrere a
   scatti, ed e' un difetto noto, non un dubbio. */
@media (min-width: 861px) and (hover: hover) {
  .efigo-riv-parallasse { background-attachment: fixed; }
}
.efigo-riv-dentro {
  position: relative; z-index: 2; width: 100%;
  padding: clamp(24px, 6vh, 90px) clamp(14px, 4vw, 54px);
  display: flex; flex-direction: column; gap: clamp(14px, 3vh, 36px);
}
.efigo-riv-dentro > h2 { color: #fff; }
.efigo-riv-pezzo { display: flex; flex-direction: column; gap: 12px; }
.efigo-riv-sc { width: var(--efigo-sc-largo, 100%); max-width: 760px; }
.efigo-riv-foto { margin: 0; }
.efigo-riv-foto img { width: 100%; max-width: 760px; border-radius: 14px; display: block; }
/* Qui sta la regola 2: il contenuto diventa trasparente SOLO dentro
   @supports, e solo per chi non ha chiesto meno movimento. Dove queste due
   condizioni non valgono, la sezione e' una sezione normale. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .efigo-riv-pezzo {
      opacity: 0; transform: translateY(30px) scale(.978);
      animation: efigo-entra linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 36%;
    }
    @keyframes efigo-entra { to { opacity: 1; transform: none; } }
  }
}

/* ── 7. Griglia Bento ───────────────────────────────────────────────────── */
.efigo-bento {
  display: grid; gap: clamp(10px, 1.6vw, 18px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--efigo-bento-riga, 150px);
}
.efigo-bento-cella {
  position: relative; overflow: hidden; border-radius: 18px;
  background: var(--efigo-bento-fondo, #0F172A); color: var(--efigo-sc-testo, #fff);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .34s cubic-bezier(.2,.7,.2,1), box-shadow .34s;
  box-shadow: 0 14px 30px -22px rgba(15, 23, 42, .6);
}
.efigo-bento-larga  { grid-column: span 2; }
.efigo-bento-alta   { grid-row: span 2; }
.efigo-bento-grande { grid-column: span 2; grid-row: span 2; }
.efigo-cella-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.efigo-bento-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.08) 62%); }
.efigo-bento-dentro { position: relative; z-index: 2; padding: clamp(12px, 1.8vw, 22px); }
.efigo-bento-dentro h3 { color: inherit; margin: 0 0 .25em; font-size: clamp(15px, 1.5vw, 21px); }
.efigo-bento-dentro p { color: inherit; margin: 0; font-size: clamp(12px, 1.1vw, 14.5px); opacity: .92; }
/* Il link copre la cella: tutta la cella e' cliccabile, ma il titolo resta
   un titolo e il testo un testo -- non si incolla tutto dentro un <a>. */
.efigo-bento-tutta { position: absolute; inset: 0; z-index: 3; }
.efigo-bento-cella:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(15, 23, 42, .7); }
.efigo-bento-cella:hover .efigo-cella-media { transform: scale(1.06); }
/* Quattro colonne su un telefono sono quattro francobolli: a 390 pixel le
   celle misuravano 90 pixel l'una, col titolo a capo ogni due lettere.
   Due colonne sul tablet, una sul telefono -- e le misure speciali
   (larga, alta, grande) si annullano, o una cella «due per due» su una
   griglia da una colonna chiede due colonne che non ci sono. */
@media (max-width: 900px) {
  .efigo-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .efigo-bento { grid-template-columns: minmax(0, 1fr); }
  .efigo-bento-larga, .efigo-bento-alta, .efigo-bento-grande { grid-column: span 1; grid-row: span 1; }
}

/* ── 8. Scritte scorrevoli ──────────────────────────────────────────────── */
.efigo-mq {
  overflow: hidden; padding: clamp(8px, 1.4vw, 16px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.efigo-mq-pista { display: flex; width: max-content; animation: efigo-scorri var(--efigo-mq-durata, 30s) linear infinite; }
.efigo-mq-rovescio .efigo-mq-pista { animation-direction: reverse; }
.efigo-mq-pausabile:hover .efigo-mq-pista { animation-play-state: paused; }
.efigo-mq-gruppo { display: flex; align-items: center; gap: clamp(16px, 3vw, 46px); padding-right: clamp(16px, 3vw, 46px); }
.efigo-mq-voce { font-weight: 800; font-size: clamp(16px, 2.2vw, 30px); white-space: nowrap; letter-spacing: -.01em; }
.efigo-mq-voce img { height: var(--efigo-mq-alt, 34px); width: auto; display: block; object-fit: contain; }
.efigo-mq-punto { opacity: .35; font-size: clamp(14px, 1.6vw, 22px); }
/* Due gruppi identici, spostamento del 50%: il giro si chiude dove e'
   cominciato e non si vede il salto. */
@keyframes efigo-scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .efigo-mq-pista { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .efigo-mq-gruppo:last-child { display: none; }
  .efigo-mq { -webkit-mask-image: none; mask-image: none; }
}

/* ── 9. Scorrimento orizzontale ─────────────────────────────────────────── */
.efigo-oriz-pista {
  display: flex; gap: clamp(12px, 2vw, 26px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 4px 2px 14px;
  scrollbar-width: thin;
}
.efigo-oriz-pezzo {
  flex: 0 0 min(80%, 430px); scroll-snap-align: center;
  background: var(--efigo-sc-fondo, #fff); color: var(--efigo-sc-testo, #111827);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 38px -24px rgba(15, 23, 42, .55);
}
.efigo-oriz-foto { margin: 0; }
.efigo-oriz-foto img { width: 100%; height: var(--efigo-alt-foto, 230px); object-fit: cover; display: block; }
.efigo-oriz-dentro { padding: clamp(14px, 2vw, 24px); }
.efigo-oriz-dentro h3 { color: inherit; margin: 0 0 .35em; }
.efigo-oriz-dentro p { color: inherit; margin: 0 0 .6em; }
/* Lo scorrimento forzato: la pagina scende, la fila va di lato. Solo dove le
   animazioni legate allo scorrimento esistono davvero, solo su schermo
   grande, solo per chi non ha chiesto meno movimento. Negli altri casi non
   c'e' nessuna di queste regole e resta la fila che si scorre col dito --
   che e' una sezione completa, non un ripiego rotto. */
@supports (animation-timeline: view()) {
  @media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    .efigo-oriz-forzato {
      height: var(--efigo-oriz-viaggio, 260vh);
      view-timeline-name: --efigo-viaggio; view-timeline-axis: block;
    }
    .efigo-oriz-forzato .efigo-oriz-palco {
      position: sticky; top: 0; height: 100vh;
      display: flex; align-items: center; overflow: hidden;
    }
    /* QUI stava un difetto che solo un browser poteva dire. In
       translateX(), «100%» e' la larghezza DELL'ELEMENTO, non del suo
       contenuto: con la pista larga quanto il palco (721px misurati), la
       formula -100% + 88vw dava +405 pixel e la fila andava a DESTRA, cioe'
       dalla parte sbagliata, e dopo un terzo del viaggio si fermava.
       La cura e' far valere «100%» quello che deve valere: la pista si
       dichiara larga come il suo contenuto (max-content), e allora
       -100% + 92vw e' esattamente quanto sporge fuori dallo schermo.
       I riquadri, in questa versione, si misurano in vw e non in %: una
       percentuale di un contenitore di larghezza indefinita e' un cane che
       si morde la coda. */
    .efigo-oriz-forzato .efigo-oriz-pista {
      overflow: visible; scroll-snap-type: none; padding-bottom: 0;
      width: max-content;
      animation: efigo-vai-di-lato linear both;
      animation-timeline: --efigo-viaggio;
      animation-range: contain 0% contain 100%;
    }
    .efigo-oriz-forzato .efigo-oriz-pezzo { flex: 0 0 clamp(280px, 30vw, 460px); }
    @keyframes efigo-vai-di-lato { to { transform: translateX(calc(-100% + 92vw)); } }
  }
}

/* ── 10. Elenco che svela le immagini ──────────────────────────────────── */
.efigo-svela { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 44px); align-items: center; }
/* overflow:hidden perche' le fotografie in attesa stanno a scale(1.035):
   senza, sporgevano di 7 pixel per lato e sul telefono facevano comparire lo
   scorrimento orizzontale di tutta la pagina. */
.efigo-svela-schermo { position: relative; order: 2; height: clamp(230px, 40vh, 440px);
  overflow: hidden; border-radius: 18px; }
.efigo-svela-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 18px; opacity: 0; transform: scale(1.035);
  transition: opacity .34s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.efigo-svela-vuota { background: #E2E8F0; display: block; }
/* La prima immagine si vede in attesa: uno spazio vuoto grande come mezza
   sezione, finche' nessuno passa col mouse, sembra un errore di caricamento. */
.efigo-svela-img:first-child { opacity: 1; transform: none; }
/* :has() e' l'unico modo, senza JavaScript, di far reagire un elemento al
   mouse che sta su un ALTRO elemento. Dove non c'e', resta la prima
   fotografia ferma e l'elenco: una sezione normale. */
.efigo-svela:has(.efigo-svela-voce:hover) .efigo-svela-img { opacity: 0; transform: scale(1.035); }
.efigo-svela:has(.efigo-svela-voce:nth-child(1):hover) .efigo-svela-img:nth-child(1),
.efigo-svela:has(.efigo-svela-voce:nth-child(2):hover) .efigo-svela-img:nth-child(2),
.efigo-svela:has(.efigo-svela-voce:nth-child(3):hover) .efigo-svela-img:nth-child(3),
.efigo-svela:has(.efigo-svela-voce:nth-child(4):hover) .efigo-svela-img:nth-child(4),
.efigo-svela:has(.efigo-svela-voce:nth-child(5):hover) .efigo-svela-img:nth-child(5),
.efigo-svela:has(.efigo-svela-voce:nth-child(6):hover) .efigo-svela-img:nth-child(6),
.efigo-svela:has(.efigo-svela-voce:nth-child(7):hover) .efigo-svela-img:nth-child(7),
.efigo-svela:has(.efigo-svela-voce:nth-child(8):hover) .efigo-svela-img:nth-child(8) { opacity: 1; transform: none; }
.efigo-svela-elenco { list-style: none; margin: 0; padding: 0; }
.efigo-svela-voce {
  padding: clamp(8px, 1.4vh, 16px) 0; border-bottom: 1px solid currentColor;
  border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
  opacity: .5; transition: opacity .25s, transform .25s;
}
.efigo-svela-voce:hover { opacity: 1; transform: translateX(8px); }
.efigo-svela-voce a { color: inherit; text-decoration: none; display: block; }
.efigo-svela-nome { display: block; font-size: clamp(19px, 3vw, 40px); font-weight: 800; line-height: 1.15; }
.efigo-svela-nota { display: block; font-size: clamp(11.5px, 1.2vw, 14px); opacity: .8; margin-top: 2px; }

/* ── Il telefono ────────────────────────────────────────────────────────── */
/* Il posizionamento assoluto su uno schermo da 390 pixel non e' una scelta
   di stile, e' una sovrapposizione di testi illeggibile: sotto gli 860 pixel
   i riquadri tornano in colonna, uno sotto l'altro, nell'ordine in cui sono
   scritti. L'effetto si perde, il contenuto no. */
@media (max-width: 860px) {
  .efigo-blocco-overlay .efigo-ov-scena,
  .efigo-blocco-sovrapposti .efigo-lib-scena {
    display: flex; flex-direction: column; gap: 12px;
    padding: clamp(12px, 4vw, 22px); min-height: 0 !important;
  }
  .efigo-blocco-overlay .efigo-sc,
  .efigo-blocco-sovrapposti .efigo-lib-sc {
    position: static; width: 100% !important; transform: none !important;
    inset: auto !important; margin: 0;
  }
  /* Senza una foto dietro ai riquadri, la scena deve almeno mostrarla sopra. */
  .efigo-blocco-overlay .efigo-ov-scena { background-position: top center; }

  .efigo-flip-griglia { grid-template-columns: 1fr; }
  .efigo-rotta { display: flex; flex-direction: column; gap: clamp(14px, 4vw, 26px); }
  .efigo-rotta-pezzo { margin-top: 0 !important; }
  .efigo-rotta-sc { margin: -28px clamp(8px, 3vw, 18px) 0; }

  .efigo-imp-sfondo { height: 62vh; }
  .efigo-imp-pila { margin-top: -62vh; padding: 8vh clamp(8px, 4vw, 18px) 10vh; }
  .efigo-imp-card { min-height: 34vh; top: calc(7vh + (var(--i, 0) * 14px)); }

  .efigo-svela { grid-template-columns: 1fr; }
  .efigo-svela-schermo { order: 0; height: clamp(170px, 30vh, 280px); }
  /* Col dito non si «passa sopra»: l'elenco si legge tutto, pieno. */
  .efigo-svela-voce { opacity: 1; }
  .efigo-svela-voce:hover { transform: none; }

  .efigo-oriz-pezzo { flex-basis: min(86%, 340px); }
}

/* Chi ha chiesto meno movimento: le transizioni spariscono, le sezioni
   restano. Il voltarsi dei riquadri resta -- e' la funzione del blocco, non
   una decorazione -- ma diventa istantaneo. */
@media (prefers-reduced-motion: reduce) {
  .efigo-flip-faccia, .efigo-bento-cella, .efigo-cella-media,
  .efigo-svela-img, .efigo-svela-voce { transition: none !important; }
  .efigo-bento-cella:hover { transform: none; }
  .efigo-riv-parallasse { background-attachment: scroll; }
}

/* ══ #task-responsive-mobile-2026-10-16 (richiesta utente) ═══════════════════
   Sul telefono: niente movimento laterale, contenuti centrati, leggibili e
   uniformi. Agisce come strato finale (vince sulla cascata) e tocca SOLO i
   blocchi E-figo, mai il tema del cliente.
   Le tre cause reali della barra orizzontale, coperte tutte:
     1. figli di flex/grid senza min-width:0 che si rifiutano di rimpicciolire
        e sfondano la traccia (causa numero uno);
     2. immagini/video/iframe piu' larghi del contenitore;
     3. parole o URL lunghi che non vanno a capo. */
.efigo-blocco, .efigo-blocco * { box-sizing: border-box; }
.efigo-blocco :where(img, video, iframe, svg, canvas) { max-width: 100%; height: auto; }
.efigo-blocco :where(h1, h2, h3, h4, h5, p, li, a, span, blockquote) { overflow-wrap: anywhere; word-break: break-word; }
.efigo-blocco :where(.wp-block-column, .efigo-flip, .efigo-bento > *, .efigo-svela > *,
  .efigo-oriz-pezzo, .efigo-rotta > *, .efigo-imp-card) { min-width: 0; }
.efigo-svela { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 600px) {
  /* colonne e griglie di contenuto: una sotto l'altra, a tutta larghezza e centrate */
  .efigo-blocco .wp-block-columns { flex-direction: column !important; flex-wrap: nowrap !important; }
  .efigo-blocco .wp-block-column { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; }
  .efigo-svela, .efigo-flip-griglia, .efigo-bento { grid-template-columns: 1fr !important; }
  .efigo-testo-centro, .efigo-testo-paragrafo, .efigo-blocco-citazione,
  .efigo-blocco-cta-dentro, .efigo-blocco-sopra-foto { max-width: 100% !important; }
  /* titoli entro una misura leggibile e uniforme (niente testo gigante che sborda) */
  .efigo-blocco :where(h1) { font-size: clamp(1.6rem, 7.5vw, 2rem) !important; line-height: 1.2 !important; }
  .efigo-blocco :where(h2) { font-size: clamp(1.4rem, 6vw, 1.7rem) !important; line-height: 1.25 !important; }
  .efigo-blocco :where(h3) { font-size: clamp(1.15rem, 5vw, 1.35rem) !important; }
  .efigo-blocco :where(p, li) { font-size: clamp(.95rem, 4vw, 1.05rem) !important; line-height: 1.6 !important; }
  /* la larghezza "piena" non deve mai aggiungere scroll sul telefono */
  .efigo-larg-piena { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
}