/* Fermento Distribuzione - sistema grafico
   Caricato da mu-plugins/fermento-motion-loader.php */

:root {
  --fd-ink: #2B2B2B;
  --fd-paper: #F1F1F1;
  --fd-green-acid: #03EC64;   /* kit: accent */
  --fd-green: #009246;        /* kit: fverde */
  --fd-muted: #8A8A8A;
  --fd-ease: cubic-bezier(.22,.61,.36,1);
  --fd-dur: .32s;
}

/* ============================================================
   HEADER
   Stato compatto via .fd-compatta.

   Nota sul logo. Elementor imposta sull immagine width:100%,
   cioe una larghezza relativa al contenitore che a sua volta si
   stringe sul contenuto: una dipendenza circolare. Animando la
   larghezza il browser non la interpola, la ricalcola e la
   assesta a fine transizione, con uno scatto laterale.
   Qui si anima invece l altezza, con larghezza automatica:
   nessuna circolarita e nessun riposizionamento.
   Logo naturale: 86,7 x 101,9 px.
   ============================================================ */


.fd-site-header .header-inner {
  transition:
    min-height var(--fd-dur) var(--fd-ease),
    width var(--fd-dur) var(--fd-ease),
    margin var(--fd-dur) var(--fd-ease),
    padding var(--fd-dur) var(--fd-ease);
}

/* Contenitore in direzione riga: qui justify-content e l orizzontale. */
.fd-site-header .fd-site-logo { --justify-content: flex-start; }

.fd-site-logo-img {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

@media (min-width: 1025px) {
  .fd-site-header .fd-site-logo .fd-site-logo-img img {
    width: auto;
    max-width: none;
    height: 102px;
    transition: height var(--fd-dur) var(--fd-ease);
  }

  .fd-site-header.fd-compatta .fd-site-logo .fd-site-logo-img img {
    height: 66px;
  }
}

.fd-site-header.fd-compatta .header-inner { min-height: 70px; }

/* Dilatazione allo scroll, solo desktop: la barra bianca si allarga ai
   lati e logo e menu la seguono verso l'esterno. La larghezza va
   allungata esplicitamente: il contenitore di Elementor ha width al 100%,
   e il solo margine negativo lo sposterebbe invece di allargarlo. La
   classe e doppia per stare sopra al selettore di Elementor. Sotto i
   1025 px la misura e zero, quindi tablet e mobile restano fermi. */
.fd-site-header { --fd-header-dilata: 0px; }

@media (min-width: 1025px) {
  .fd-site-header { --fd-header-dilata: 20px; }
}

.fd-site-header.fd-compatta .header-inner.header-inner {
  --width: calc(100% + (var(--fd-header-dilata) * 2));
  width: calc(100% + (var(--fd-header-dilata) * 2));
  max-width: none;
  margin-inline: calc(var(--fd-header-dilata) * -1);
}
/* Nessuna ombra sul contenitore padre allo scorrimento: essendo
   trasparente e a tutta larghezza si leggeva come una riga grigia. */

/* Linea verde sotto il logo, larga quanto il marchio. */
.fd-site-logo-img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--fd-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--fd-dur) var(--fd-ease);
  pointer-events: none;
}

.fd-site-logo-img:hover::after,
.fd-site-logo-img:focus-within::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .fd-site-header,
  .fd-site-header .header-inner,
  .fd-site-header .fd-site-logo .fd-site-logo-img img,
  .fd-site-logo-img::after { transition-duration: .01ms; }
}

/* ============================================================
   HOME - HERO

   Specificita: Elementor impone
   .e-con.e-con > .e-con-inner > .elementor-widget { max-width:100% }
   che vale 4 classi. Le regole che devono batterla usano il
   prefisso .elementor.elementor, cioe lo stesso espediente che
   Elementor usa su se stesso.

   Su contenitore ::before e occupato dalla sovrapposizione di
   sfondo: filigrana e linee stanno entrambe su ::after.
   ============================================================ */

.fd-home-hero {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  min-height: 88svh;
}

/* La centratura verticale deve battere la regola di Elementor sul
   contenitore, che vale 3 classi: qui se ne usano 4. */
.elementor.elementor .fd-home-hero.e-con {
  --justify-content: center;
}

/* Filigrana e filetti verticali nell hero: RIMOSSI su richiesta del cliente. */

.fd-home-hero-inner { position: relative; z-index: 1; }

/* --- Tipografia fluida --- */

.elementor.elementor .fd-home-hero .fd-home-title .elementor-heading-title {
  font-size: clamp(46px, 7.4vw, 128px);
  line-height: 1;
  letter-spacing: -.015em;
}

.fd-title-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(241, 241, 241, .92);
  padding-bottom: .06em;
}



.elementor.elementor .fd-home-hero .fd-home-kicker .elementor-heading-title {
  font-size: clamp(15px, 1.25vw, 20px);
}

/* Il paragrafo va a capo sotto i titoli invece di correre fino al
   bordo del contenitore. */
.elementor.elementor .fd-home-hero .fd-home-copy.elementor-widget {
  max-width: 640px;
}

.elementor.elementor .fd-home-hero .fd-home-copy {
  font-size: clamp(16px, 1.1vw, 19px);
}

/* --- Le tre affermazioni, accanto ai pulsanti --- */
/* Stava in posizione assoluta ancorata al fondo dell hero, e ogni
   variazione di altezza la rimetteva in discussione: su schermi bassi
   l ultima riga arrivava a toccare il bordo. Ora e dentro la riga dei
   pulsanti e sta nel flusso, quindi non puo piu essere tagliata da
   nessuna altezza. Non serve alcuna regola di posizionamento: la
   disposizione la governa Elementor sul contenitore fd-home-actions,
   riga con distribuzione agli estremi.

   Qui resta solo la rifinitura tipografica. */

/* Non e piu un indice ma tre affermazioni: il numero e stato tolto,
   quindi il blocco passa da annotazione a dichiarazione. Da qui il
   colore pieno invece del 42% di opacita, il corpo maggiore e il
   filo verde che lo ancora. Il filo sta a destra perche il testo e
   allineato a destra: a sinistra resterebbe staccato dalle parole. */
.elementor.elementor .fd-home-hero-index .elementor-heading-title {
  font-family: "Oswald", sans-serif;
  font-size: clamp(13px, .95vw, 16px);
  font-weight: 600;
  line-height: 2.05;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fd-paper);
  padding-right: 18px;
  border-right: 2px solid var(--fd-green-acid);
}

/* --- Tablet ---
   Su iPad e iPad Pro lo schermo e alto ma non largo: il titolo non
   cresce quanto la pagina si allunga e il pieno schermo produce vuoto
   invece che presenza. Altezza al 60%, cosi si intravede la sezione
   successiva e l invito a scorrere e naturale. */
@media (min-width: 768px) and (max-width: 1024px) {
  
  .fd-home-hero {
    min-height: max(60vh, 520px);
    min-height: max(60svh, 520px);
  }
}

@media (max-width: 767px) {
  
  .fd-home-hero {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* --- Mobile ---
   Con la sola clamp desktop il titolo si fermava al minimo di 46px
   e lasciava lo schermo mezzo vuoto: qui la scala e piu ripida. */
@media (max-width: 767px) {
  .elementor.elementor .fd-home-hero .fd-home-title .elementor-heading-title {
    font-size: clamp(46px, 14vw, 82px);
    line-height: 1.06;
  }
  .elementor.elementor .fd-home-hero .fd-home-subtitle .elementor-heading-title {
    font-size: clamp(21px, 6.2vw, 34px);
  }
  .elementor.elementor .fd-home-hero .fd-home-kicker .elementor-heading-title {
    font-size: 16px;
  }
  .elementor.elementor .fd-home-hero .fd-home-copy { font-size: 17px; }
  .fd-home-hero::after {
    font-size: clamp(96px, 33vw, 160px);
    padding-top: 4vh;
  }
  .fd-title-outline { -webkit-text-stroke-width: 1px; }
}

/* ============================================================
   HOME - TUTTO E NATO DA UNA PERSONA
   Poster fedele al mockup. Tutti i figli sono posizionati in
   assoluto: cosi la spaziatura interna del contenitore, che
   Elementor definisce con specificita alta, non interferisce.
   ============================================================ */

.fd-story-poster {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fd-ink);
  box-shadow: 20px 22px 0 var(--fd-green-acid);
  margin-bottom: 22px;
}

/* Griglia interna: da texture e giustifica lo spazio vuoto. */
.fd-story-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .6;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
}

/* Banda magenta. */
.fd-story-poster::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: 18%;
  width: 90%;
  height: 15px;
  background: var(--fd-paper);
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 1;
}

.elementor.elementor .fd-story-poster > .e-con-inner > .fd-story-poster-index,
.elementor.elementor .fd-story-poster > .fd-story-poster-index {
  position: absolute; top: 25px; left: 28px; z-index: 3; width: auto;
}
.elementor.elementor .fd-story-poster-index .elementor-heading-title {
  font-family: "Oswald", sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: .15em; color: var(--fd-paper);
}

.elementor.elementor .fd-story-poster > .e-con-inner > .fd-story-poster-logo,
.elementor.elementor .fd-story-poster > .fd-story-poster-logo {
  position: absolute; top: 16%; left: 17%; width: 66%; height: 60%; z-index: 2;
}
.elementor.elementor .fd-story-poster-logo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: invert(1); opacity: .92;
}

.elementor.elementor .fd-story-poster > .e-con-inner > .fd-story-poster-name,
.elementor.elementor .fd-story-poster > .fd-story-poster-name {
  position: absolute; right: 25px; bottom: 27px; z-index: 3; width: auto;
}
.elementor.elementor .fd-story-poster-name .elementor-heading-title {
  font-family: "Oswald", sans-serif;
  font-size: clamp(35px, 4.4vw, 67px);
  font-weight: 700; line-height: .9; letter-spacing: -.04em;
  text-transform: uppercase; color: var(--fd-paper);
  writing-mode: vertical-rl; transform: rotate(180deg);
}

.elementor.elementor .fd-story-poster > .e-con-inner > .fd-story-poster-caption,
.elementor.elementor .fd-story-poster > .fd-story-poster-caption {
  position: absolute; left: 28px; bottom: 34px; z-index: 3; width: auto;
}
.elementor.elementor .fd-story-poster-caption .elementor-heading-title {
  font-family: "Permanent Marker", cursive; font-size: 17px;
  color: var(--fd-green-acid); transform: rotate(-5deg); display: inline-block;
}

/* --- Tipografia della sezione, allineata al mockup --- */
/* Titolo di sezione: classe riutilizzabile, nessun vincolo di sezione. */
.elementor.elementor .fd-story-title .elementor-heading-title {
  font-size: clamp(49px, 5.5vw, 82px);
  line-height: .94; letter-spacing: -.035em;
}
.elementor.elementor .fd-story .fd-story-kicker .elementor-heading-title {
  font-size: clamp(14px, 1.2vw, 18px);
}
.elementor.elementor .fd-story .fd-story-copy.elementor-widget {
  max-width: 620px;
}
.elementor.elementor .fd-story .fd-story-copy {
  font-size: 16px; line-height: 1.75;
}

@media (max-width: 767px) {
  .fd-story-poster { box-shadow: 12px 14px 0 var(--fd-green-acid); }
  .elementor.elementor .fd-story-poster-name .elementor-heading-title { font-size: 40px; }
  .elementor.elementor .fd-story-poster > .fd-story-poster-name { right: 17px; }
  .elementor.elementor .fd-story-poster > .fd-story-poster-caption,
  .elementor.elementor .fd-story-poster > .fd-story-poster-index { left: 18px; }
  /* Titolo di sezione: classe riutilizzabile, nessun vincolo di sezione. */
.elementor.elementor .fd-story-title .elementor-heading-title { font-size: clamp(43px, 14vw, 62px); }
}

/* ============================================================
   SISTEMA PULSANTI
   Vale su tutto il sito. Due varianti, chiara e scura, che
   condividono lo stesso comportamento: riempimento verde da
   sinistra e freccia che avanza.

   Specificita: le regole Elementor sul singolo pulsante valgono
   4 classi, 5 con :hover. Qui si usa .fd-btn.fd-btn per stare
   sempre un gradino sopra.
   ============================================================ */

.fd-btn { --fd-btn-bg: var(--fd-ink); --fd-btn-fg: var(--fd-paper); }
.fd-btn-light { --fd-btn-bg: var(--fd-paper); --fd-btn-fg: var(--fd-ink); }
.fd-btn-dark  { --fd-btn-bg: var(--fd-ink);  --fd-btn-fg: var(--fd-paper); }

.elementor.elementor .fd-btn.fd-btn .elementor-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  padding: 13px 18px 13px 21px;
  color: var(--fd-btn-fg);
  background-color: var(--fd-btn-bg);
  border: 1px solid var(--fd-btn-bg);
  border-radius: 0;
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s ease, border-color .3s ease;
}

/* Strato di riempimento, entra da sinistra. */
.elementor.elementor .fd-btn.fd-btn .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fd-green-acid);
  transform: translateX(-102%);
  transition: transform .38s cubic-bezier(.65, 0, .35, 1);
}

.elementor.elementor .fd-btn.fd-btn .elementor-button:hover::before,
.elementor.elementor .fd-btn.fd-btn .elementor-button:focus-visible::before {
  transform: translateX(0);
}

.elementor.elementor .fd-btn.fd-btn .elementor-button:hover,
.elementor.elementor .fd-btn.fd-btn .elementor-button:focus-visible {
  color: var(--fd-ink);
  background-color: var(--fd-btn-bg);
  border-color: var(--fd-green-acid);
}

/* Freccia disegnata come maschera: segue il colore del testo,
   nessun font di icone da caricare. */
.elementor.elementor .fd-btn.fd-btn .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 26px;
}

.elementor.elementor .fd-btn.fd-btn .elementor-button-content-wrapper::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012h15M13%205l7%207-7%207%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012h15M13%205l7%207-7%207%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transition: transform .3s ease;
}

.elementor.elementor .fd-btn.fd-btn .elementor-button:hover .elementor-button-content-wrapper::after,
.elementor.elementor .fd-btn.fd-btn .elementor-button:focus-visible .elementor-button-content-wrapper::after {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .elementor.elementor .fd-btn.fd-btn .elementor-button::before,
  .elementor.elementor .fd-btn.fd-btn .elementor-button-content-wrapper::after {
    transition-duration: .01ms;
  }
}

@media (max-width: 767px) {
  .elementor.elementor .fd-btn.fd-btn .elementor-button { width: 100%; justify-content: space-between; }
}

/* ============================================================
   RIVELAZIONI ALLO SCROLL - solo CSS

   Usa le animazioni guidate dallo scroll native. Nessun
   JavaScript, nessun file da mantenere.

   Sicurezza: tutto sta dentro @supports. Dove le animazioni
   guidate dallo scroll non esistono, la regola non viene letta
   e il contenuto resta semplicemente visibile. Non puo accadere
   che un elemento venga nascosto e non piu mostrato.

   Uso: .fd-animate sulla sezione anima i figli in sequenza,
   .fd-reveal-mask su un elemento lo scopre da sinistra.
   ============================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    @keyframes fd-sale {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }

    @keyframes fd-maschera {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 0 0 0); }
    }

    .fd-animate > .elementor-element {
      animation: fd-sale linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }

    /* Sfasamento: ogni figlio completa un poco piu tardi. */
    .fd-animate > .elementor-element:nth-child(2) { animation-range: entry 8% cover 32%; }
    .fd-animate > .elementor-element:nth-child(3) { animation-range: entry 8% cover 38%; }
    .fd-animate > .elementor-element:nth-child(4) { animation-range: entry 8% cover 44%; }
    .fd-animate > .elementor-element:nth-child(5) { animation-range: entry 8% cover 50%; }

    /* La doppia classe serve a battere .fd-animate > .elementor-element,
       cosi un elemento dentro una sezione animata puo comunque avere
       la maschera al posto della comparsa dal basso. */
    /* Ogni titolo di sezione eredita la maschera: non serve
       aggiungere classi a mano.

       ECCEZIONE fd-split-x. I titoli passati all ingresso lettera per
       lettera devono restare fuori: la maschera e guidata dallo scroll
       e ritaglierebbe il titolo mentre le lettere si accendono, con un
       bordo verticale netto che taglia tutte le righe alla stessa
       ascissa. Attenzione: bastava la sola classe fd-story-title a
       farla scattare, togliere fd-reveal-mask non era sufficiente. */
    .fd-reveal-mask.fd-reveal-mask:not(.fd-split-x),
    .fd-story-title.fd-story-title:not(.fd-split-x) {
      animation: fd-maschera linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 40%;
    }
  }
}

/* ============================================================
   CARD PRODUTTORE (template loop 340)

   REGOLA DI CONVIVENZA: qui non si imposta nessun display,
   nessuna griglia, nessuna larghezza e nessuna spaziatura.
   Struttura, dimensioni e spazi restano di Elementor.
   Il CSS aggiunge solo cio che Elementor non sa fare:
   lo zoom dell immagine dentro una cornice ferma e la freccia
   che reagisce al passaggio sulla card, non su se stessa.
   ============================================================ */

.fd-pcard-media {
  position: relative;
  overflow: hidden;
}

.elementor.elementor .fd-pcard-photo img {
  transition: transform .75s cubic-bezier(.2, .65, .25, 1);
}

.fd-pcard:hover .fd-pcard-photo img,
.fd-pcard:focus-within .fd-pcard-photo img {
  transform: scale(1.06);
}

.fd-pcard-media::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 58px;
  height: 58px;
  background-color: var(--fd-green-acid);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012h15M13%205l7%207-7%207%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 23px 23px;
  transform: translate(100%, 100%);
  transition: transform .4s cubic-bezier(.2, .65, .25, 1);
  pointer-events: none;
}

.fd-pcard:hover .fd-pcard-media::after,
.fd-pcard:focus-within .fd-pcard-media::after {
  transform: translate(0, 0);
}

/* Il nome della cantina resta su una riga. */
.elementor.elementor .fd-pcard-title .elementor-heading-title {
  white-space: nowrap;
  font-size: clamp(21px, 1.75vw, 28px);
  line-height: 1.05;
  letter-spacing: -.02em;
}

@media (prefers-reduced-motion: reduce) {
  .elementor.elementor .fd-pcard-photo img,
  .fd-pcard-media::after { transition-duration: .01ms; }
}

/* ============================================================
   HOME - LAVORIAMO INSIEME
   Solo decorazione, tipografia e comportamento.
   Larghezze, spazi e disposizione restano di Elementor.
   ============================================================ */

.fd-collab { position: relative; }

/* Barra colorata in apertura di sezione: RIMOSSA su richiesta del cliente. */

/* Colore di accento per card: cambia solo la variabile. */
.fd-collab-card { --fd-accent: var(--fd-green); position: relative; }
.fd-collab-card.fd-tone-dark  { --fd-accent: var(--fd-green-acid); }
.fd-collab-card.fd-tone-green { --fd-accent: var(--fd-green); }

/* Filo di accento in cima, si estende al passaggio. */
.fd-collab-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46px;
  height: 3px;
  background: var(--fd-accent);
  transition: width .42s cubic-bezier(.2, .65, .25, 1);
  pointer-events: none;
  z-index: 2;
}

.fd-collab-card:hover::after,
.fd-collab-card:focus-within::after { width: 100%; }

/* Sollevamento contenuto: 5px, non 12 come nel mockup. */
.fd-collab-card {
  transition: transform .38s ease, box-shadow .38s ease;
}

.fd-collab-card:hover,
.fd-collab-card:focus-within {
  z-index: 2;
  transform: translateY(-5px);
  box-shadow: 0 18px 44px var(--fd-ombra, rgba(24, 24, 24, .11));
}

/* Occhiello nel colore di accento della card. */
.elementor.elementor .fd-collab-kicker .elementor-heading-title {
  color: var(--fd-accent);
  font-size: clamp(14px, 1.1vw, 16px);
}

/* Titolo della card. */
.elementor.elementor .fd-collab-h .elementor-heading-title {
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: .96;
  letter-spacing: -.03em;
}

@media (prefers-reduced-motion: reduce) {
  .fd-collab-card, .fd-collab-card::after { transition-duration: .01ms; }
}

/* ============================================================
   HOME - CTA OPERATORI
   Solo decorazione e tipografia. Disposizione invariata.
   ============================================================ */

.fd-cta { position: relative; overflow: hidden; }

/* Filigrana LISTINO nel blocco CTA: RIMOSSA su richiesta del cliente. */

.fd-cta-inner { position: relative; z-index: 1; }

/* Il titolo e passato a Oswald grande, come nell audit.
   Qui sta soltanto la misura fluida: famiglia, peso, interlinea e
   crenatura restano in Elementor, cosi ogni proprieta ha una sola
   sorgente. Il valore di 84px impostato in Elementor e il
   riferimento che vedi nell editor; davanti comanda questa clamp. */
.elementor.elementor .fd-cta-title .elementor-heading-title {
  font-size: clamp(38px, 6.4vw, 104px);
}

.elementor.elementor .fd-cta-copy { font-size: clamp(15px, 1.1vw, 17px); }

@media (max-width: 767px) {
  .fd-cta::after { font-size: clamp(96px, 32vw, 170px); }
}


/* ============================================================
   TEXTURE DI CARTA
   Le due texture sono impostate da Elementor: tassello ripetibile
   a 900 px, ancorato alla finestra perche il contenuto scorra
   sopra un fondo fermo. Qui non si imposta nessuno sfondo: si
   correggono soltanto i casi in cui l ancoraggio va disattivato.

   Sicurezza iOS. Safari su iOS dimensiona lo sfondo fisso sul
   documento invece che sulla finestra: la texture viene ingrandita
   a dismisura e in certi casi sparisce del tutto. Siccome
   background_attachment non e un controllo responsive in Elementor,
   la correzione puo stare solo qui. Il criterio e il puntatore
   grossolano, non la larghezza: coglie telefoni e tavolette
   indipendentemente dai punti di rottura.

   Specificita: Elementor scrive l ancoraggio con tre classi
   (.elementor-14 .elementor-element.elementor-element-xxx).
   Qui si usano quattro classi per non dipendere dall ordine di
   caricamento dei fogli.
   ============================================================ */

@media (hover: none), (pointer: coarse) {
  .elementor.elementor .fd-home-hero.fd-home-hero,
  .elementor.elementor .fd-story.fd-story { background-attachment: scroll; }
}

/* Il fondo fermo e a tutti gli effetti un movimento: chi ha chiesto
   di ridurlo non deve subirlo. */
@media (prefers-reduced-motion: reduce) {
  .elementor.elementor .fd-home-hero.fd-home-hero,
  .elementor.elementor .fd-story.fd-story { background-attachment: scroll; }
}


/* ============================================================
   LAVORIAMO INSIEME - ROTAZIONE A VENTAGLIO
   Le due card esterne si inclinano in verso opposto, la centrale
   resta dritta. Nessun altro cambiamento grafico sulle card.

   Perche rotate e non transform. Il sollevamento in hover usa gia
   transform: translateY(-5px). Se l inclinazione stesse dentro
   transform, al passaggio del mouse la regola sostituirebbe l intera
   proprieta e la card si raddrizzerebbe di scatto. rotate e una
   proprieta indipendente: si compone con transform senza toccarlo,
   quindi l hover resta esattamente com era.

   Ingombro. A 0,8 gradi lo spostamento degli angoli e di circa
   3,5 px in orizzontale e 2,5 in verticale: la distanza di 24 px
   fra le card resta ampiamente sufficiente, nessuna sovrapposizione.

   Sotto i 1025 px le card si impilano e l inclinazione diventa
   disordine invece che intenzione, quindi si annulla.
   ============================================================ */

/* La rotazione vale solo sulla home. Il blocco Lavoriamo insieme e
   stato clonato in fondo agli articoli e su Contatti, dove chiude
   una lettura invece di aprire una pagina di marketing: li le stesse
   card inclinate diventano vezzo. Si limita con la classe del corpo
   pagina invece di aggiungere una variante alle card. */
@media (min-width: 1025px) {
  .home .fd-collab-card:nth-child(1) { rotate: -.8deg; }
  .home .fd-collab-card:nth-child(3) { rotate:  .8deg; }
}

@media (prefers-reduced-motion: reduce) {
  .fd-collab-card:nth-child(1),
  .fd-collab-card:nth-child(3) { rotate: 0deg; }
}


/* ============================================================
   INGRESSO DEI TITOLI - carattere per carattere
   Sostituisce la maschera guidata dallo scroll sui titoli della home.

   Perche serve JavaScript. Le animazioni guidate dallo scroll sono
   agganciate alla posizione per costruzione: scorri piano e il testo
   si scopre piano, torni indietro e si ri-copre. Un ingresso che parte
   una volta e prosegue col proprio tempo non e esprimibile in CSS.
   Lo script sta in fermento-motion.js, non usa librerie.

   Sicurezza. Niente qui nasconde nulla da solo: si nasconde soltanto
   dentro .fd-split-pronto, classe che aggiunge lo script. Senza script
   il titolo resta visibile e fermo. Non e possibile che sparisca.

   Ritmo: sfalsatura 26ms, durata 550ms. Su un titolo di 37 caratteri
   fanno circa 1,5 secondi complessivi.
   ============================================================ */

/* Le manopole del ritmo stanno qui, una volta sola.

   CORSA, non sfalsatura. Con una sfalsatura fissa la lunghezza
   dell onda dipende da quante lettere ha il titolo: su 37 caratteri
   fra la prima e l ultima passano piu di 1000ms e l onda si vede
   viaggiare, su 17 ne passano 448 e le lettere risultano quasi tutte
   accese insieme, cosi si legge "due parole che compaiono" invece di
   una sequenza. Qui si fissa quindi il tempo che l onda impiega ad
   attraversare l intera frase: lo script divide per il numero di
   lettere e scrive la sfalsatura effettiva sul singolo titolo.
   Cosi titoli corti e lunghi hanno lo stesso comportamento.

   La durata e volutamente lunga rispetto alla sfalsatura risultante:
   e la sovrapposizione fra una lettera e la successiva a produrre la
   sfumatura continua invece di lettere che si accendono a scatti. */
.fd-split-x {
  --fd-split-dur: .8s;
  --fd-split-corsa: 1000ms;
  --fd-split-sfals: 28ms; /* solo ripiego: se lo script non calcola */
}

/* Ogni lettera e inline-block, e ogni inline-block e un punto in cui
   il browser puo mandare a capo: senza questo involucro i titoli si
   spezzano a meta parola. La parola non si spezza, gli a capo tornano
   a cadere solo negli spazi fra una parola e l altra. */
.fd-split-x .fd-parola {
  display: inline-block;
  white-space: nowrap;
}

.fd-split-x .fd-car {
  display: inline-block;
  white-space: pre;
}

/* NASCONDIMENTO PRIMA DELLA PRIMA PITTURA.
   Senza questo il browser dipinge il titolo intero, poi lo script lo
   spezza e lo rianima: si vede il titolo per una frazione di secondo
   e poi ripartire da zero.

   Qui il CSS nasconde davvero, quindi serve una guardia. Le regole
   valgono solo sotto .fd-js, classe che aggiunge uno script in testa
   al documento. Tre reti di sicurezza sovrapposte:
   1. senza JavaScript .fd-js non esiste e il titolo si legge;
   2. la guardia rimuove .fd-js dopo due secondi se lo script
      principale non ha preso il controllo (errore, file mancante,
      blocco esterno);
   3. lo script rimuove .fd-js da solo quando rinuncia, cioe se manca
      l osservatore di intersezione o se e chiesto movimento ridotto.
   Il titolo non puo restare invisibile.

   Si nasconde con visibility e non con display o opacity sul testo:
   lo spazio resta occupato, quindi nessuno spostamento di impaginato. */
.fd-js .fd-split-x .elementor-heading-title { visibility: hidden; }
.fd-js .fd-split-x .elementor-heading-title[data-fd-split="fatto"] { visibility: visible; }
.fd-js .fd-split-x .fd-car { opacity: 0; }

/* Nessuno spostamento: le lettere restano in riga al loro posto e si
   accendono in sequenza.

   ATTENZIONE AL SELETTORE, e un errore gia commesso una volta.
   In Elementor fd-split-x sta sul CONTENITORE del widget, mentre lo
   script aggiunge fd-split-pronto all h1/h2 interno. Sono due elementi
   diversi: scritto come .fd-split-x.fd-split-pronto il selettore
   pretende le due classi sullo stesso elemento e non aggancia mai
   nulla, senza dare errore. Va tenuto discendente. */
.fd-split-x .fd-split-pronto .fd-car {
  animation: fd-car-entra var(--fd-split-dur, .8s) cubic-bezier(.33, 0, .2, 1) forwards;
  animation-delay: calc(var(--fd-i, 0) * var(--fd-split-sfals, 28ms));
}

@keyframes fd-car-entra {
  to { opacity: 1; }
}

/* Il contorno dell H1 usa -webkit-text-stroke, che e ereditato: le
   lettere spezzate dentro .fd-title-outline lo mantengono da sole.
   Nessuna regola aggiuntiva, si annota solo perche non venga
   scambiato per una dimenticanza. */

@media (prefers-reduced-motion: reduce) {
  .fd-split-x .fd-split-pronto .fd-car {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* ============================================================
   SISTEMA PULSANTI - VARIANTE IN CONTORNO
   Terza variante, per fondi scuri dove il pieno non funziona:
   fd-btn-light diventerebbe un blocco chiaro pesante e fd-btn-dark
   sparirebbe nel fondo. Fondo trasparente, bordo di 1 px, testo
   chiaro. Comportamento identico alle altre due: riempimento verde
   da sinistra e freccia che avanza, entrambi ereditati dal blocco
   base, qui non riscritti.

   Colore del bordo per pubblico, con la stessa tecnica delle card
   di Lavoriamo insieme: cambia solo la variabile.

   Perche il riempimento resta verde anche sul pulsante magenta:
   testo inchiostro su verde acido da contrasto 7,9, su magenta
   scende a 3,4, sotto la soglia leggibile per un etichetta di 12 px.
   Il magenta resta sul bordo a riposo, dove e decorazione.

   Specificita: il blocco base vale 4 classi, qui se ne aggiunge una
   quinta con fd-btn-ghost, quindi passa sopra senza altri espedienti.
   ============================================================ */

.fd-btn-ghost { --fd-btn-bordo: var(--fd-paper); --fd-btn-fg: var(--fd-paper); }
.fd-btn-ghost.fd-tono-verde   { --fd-btn-bordo: var(--fd-green-acid); }
.fd-btn-ghost.fd-tono-magenta { --fd-btn-bordo: var(--fd-green-acid); }

.elementor.elementor .fd-btn.fd-btn.fd-btn-ghost .elementor-button {
  color: var(--fd-btn-fg);
  background-color: transparent;
  border-color: var(--fd-btn-bordo);
}

.elementor.elementor .fd-btn.fd-btn.fd-btn-ghost .elementor-button:hover,
.elementor.elementor .fd-btn.fd-btn.fd-btn-ghost .elementor-button:focus-visible {
  color: var(--fd-ink);
  background-color: transparent;
  border-color: var(--fd-green-acid);
}


/* ============================================================
   TITOLI SU TELEFONO - INTERLINEA
   Le interlinee strettissime dei titoli, .88 sulla CTA e .94 sui
   titoli di sezione, sono tarate su Oswald condensato a 84 o 104 px:
   li la compressione e quello che da compattezza. Sotto i 768 px lo
   stesso titolo scende a 38 o 43 px ma l interlinea resta
   proporzionale, quindi le righe si avvicinano fino a toccarsi e il
   titolo diventa un blocco pieno invece di righe leggibili.

   Qui si tocca solo l interlinea. Gli spazi fra le sezioni restano
   di Elementor: se serve altro respiro si aumentano i riempimenti
   dei contenitori, non si aggiunge margine da qui.

   Specificita: l interlinea della CTA e impostata in Elementor, la
   cui regola vale 3 classi. Questa ne vale 4 e passa sopra.
   ============================================================ */

@media (max-width: 767px) {
  .elementor.elementor .fd-cta-title .elementor-heading-title,
  .elementor.elementor .fd-story-title .elementor-heading-title {
    line-height: 1;
  }
}


/* ============================================================
   TESTATA DI PAGINA
   Fascia scura in apertura delle pagine interne: occhiello, titolo,
   testo a sinistra, indice numerico a destra. Struttura, larghezze e
   spaziature restano in Elementor: qui ci sono solo decorazione e
   rifinitura tipografica.

   La riga bicolore in fondo sta su ::after. Su ::before non si puo:
   e occupato dalla sovrapposizione di sfondo di Elementor. Serve
   position relative sul contenitore per ancorarla, come gia si fa
   sul blocco CTA.

   Il numero non e testo da leggere ma un elemento grafico: e per
   questo che puo permettersi una misura molto maggiore del titolo
   ed e marcato aria-hidden lato contenuto.
   ============================================================ */

.fd-page-head { position: relative; overflow: hidden; }

/* Riga colorata in fondo alla testata: RIMOSSA su richiesta del cliente
   (01/09/26). La testata resta pulita; la separazione e affidata alla
   texture di sfondo. */


/* Indice numerico. La misura e legata alla larghezza della finestra
   perche deve restare in proporzione al titolo, che e fluido. */


/* Etichetta verticale. Si ruota con writing-mode invece che con una
   trasformazione: cosi occupa davvero lo spazio di una colonna
   stretta e non si sovrappone al numero. */


/* La visibilita per dispositivo dell indice NON sta qui: e un
   controllo nativo di Elementor (Avanzate, Reattivo) impostato sul
   contenitore fd-page-head-index. Metterla in CSS toglierebbe a
   Maurizio il comando su una cosa che l interfaccia gia governa. */


/* --- Testata di pagina: altezza piena e filigrana ---

   ALTEZZA. Si sottraggono 92 px, l ingombro dell intestazione fissa,
   altrimenti la fascia sfora di quell altezza e il primo blocco di
   contenuto resta sempre sotto la piega. Il valore non e esprimibile
   con il campo di Elementor, che non accetta calc: e l unico motivo
   per cui l altezza sta qui invece che nell interfaccia.
   La ripetizione con svh serve ai telefoni, dove la barra del
   browser che compare e scompare falsa il calcolo di vh.

   FILIGRANA. Il testo NON e scritto qui: viene letto dall attributo
   data-filigrana del contenitore, che si imposta in Elementor.
   Cosi la stessa regola vale per tutte le pagine e il testo resta
   contenuto modificabile, invece di richiedere una classe nuova per
   ognuna delle cinque testate.

   Su questa testata ::before e libero, perche non e attiva la
   sovrapposizione di sfondo di Elementor: filigrana e linee di
   griglia stanno li, la riga bicolore resta su ::after.
   --------------------------------------------------------------- */

/* L ALTEZZA MINIMA NON STA QUI, e in Elementor.
   Contenitore fd-page-head, Layout -> Altezza min, con unita
   personalizzata: calc(92svh - 92px) su desktop, 62vh su tablet,
   0 su telefono perche il valore tablet vale fino a 1024 px e
   ereditando lascerebbe una fascia nera vuota sotto il testo.
   Il campo accetta calc con l unita personalizzata: verificato,
   scrive la regola corretta. I 92 px sottratti sono l ingombro
   dell intestazione fissa, senza i quali la fascia sfora di quella
   altezza e il primo blocco di contenuto resta sempre sotto la piega.
   Lo svh serve ai telefoni, dove la barra del browser che compare e
   scompare falsa il calcolo di vh. */

/* Il numero resta sempre orizzontale. La regola sembra superflua ma
   non lo e: writing-mode e una proprieta ereditata, e l etichetta
   accanto e in verticale. Basta che un domani qualcuno la sposti su
   un antenato comune perche anche il numero si giri, senza errori e
   senza spiegazione apparente. */


/* La centratura verticale deve battere la regola di Elementor sul
   contenitore, che vale 3 classi: qui se ne usano 4. */
.elementor.elementor .fd-page-head.e-con { --justify-content: center; }

/* Filetti verticali nella testata: RIMOSSI su richiesta del cliente. */

/* Le linee di griglia hanno senso solo dove c e spazio: su colonna
   stretta diventano rumore addosso al testo. */
@media (max-width: 1024px) {
  .fd-page-head::before {
    background-image: none;
    font-size: clamp(70px, 22vw, 150px);
  }
}


/* --- SCHEDE AFFIANCATE ---
   Larghezze, spaziature e scarto verticale sono in Elementor.
   Gli elenchi erano disegnati qui quando arrivavano dall editor di
   testo; ora sono widget Lista Icone, quindi rombo, colore, distanza
   e fili di separazione sono controlli dell interfaccia e questo
   blocco e stato rimosso. Non reintrodurlo: toglierebbe a Maurizio
   il comando su cose che Elementor gia governa. */

/* ============================================================
   PANNELLO MODULO
   L audit segnalava i moduli come il punto graficamente piu debole
   e mai disegnato. Sono anche l unico posto dove il sito converte,
   quindi qui la grafica ha un compito preciso: rendere evidente
   dove si scrive e cosa e obbligatorio.

   Il pannello ha lo sfondo impostato da Elementor. Qui si aggiunge
   la barra colorata in cima (::before) e il blocco scuro sfalsato
   dietro (::after), che nel mockup da profondita senza usare ombre
   sfumate, coerente con l estetica a stampa.

   I campi sono widget del modulo di Elementor, non hanno controlli
   propri sufficienti: la loro grafica puo stare solo qui.
   ============================================================ */

.fd-form-panel { position: relative; }

.fd-form-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: var(--fd-green-acid);
  z-index: 1;
}

/* Blocco sfalsato dietro. Sta su ::after con z-index negativo:
   resta sotto lo sfondo del pannello e si vede solo la parte che
   sporge. Niente ombra sfumata, e una lastra piena. */
.fd-form-panel::after {
  content: "";
  position: absolute;
  left: 18px; right: -18px; top: 18px; bottom: -18px;
  background: var(--fd-ink);
  z-index: -1;
}

/* --- Campi --- */

.fd-form-panel .elementor-field-group > label {
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fd-ink);
  margin-bottom: 6px;
}

/* L asterisco di obbligatorieta e l unica cosa magenta del modulo:
   deve saltare all occhio prima di compilare, non dopo l errore. */
.fd-form-panel .elementor-mark-required .elementor-field-label:after {
  color: var(--fd-ink);
}

.fd-form-panel .elementor-field-textual {
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fd-ink) 28%, transparent);
  border-radius: 0;
  padding: 10px 2px;
  font-family: "Figtree", sans-serif;
  font-size: 16px;
  color: var(--fd-ink);
  transition: border-color .18s ease;
}

.fd-form-panel .elementor-field-textual:focus {
  outline: 0;
  border-bottom-color: var(--fd-green);
  box-shadow: none;
}

/* L area di testo ha bisogno di un perimetro: senza, sembra un campo
   di una riga e chi scrive non capisce che puo dilungarsi. */
.fd-form-panel textarea.elementor-field-textual {
  border: 1px solid color-mix(in srgb, var(--fd-ink) 22%, transparent);
  padding: 12px;
}

.fd-form-panel .elementor-field-type-acceptance .elementor-field-option {
  font-size: 13px;
  line-height: 1.5;
}


/* ============================================================
   LINEA DEI PASSAGGI
   I quattro passaggi di Come funziona sono collegati da una riga
   orizzontale che passa dietro i numeri. La riga e decorazione, la
   disposizione delle quattro colonne resta di Elementor.

   La riga sta su ::before della fila. Su un contenitore ::before e
   normalmente occupato dalla sovrapposizione di sfondo, ma questa
   fila non ne ha una: lo sfondo texturizzato sta sulla fascia che la
   contiene, non su di lei.

   Il pallino di ogni passaggio sta su ::before della colonna, per lo
   stesso motivo. Non si usa ::after perche va lasciato libero: e il
   punto in cui si potra aggiungere un accento in futuro senza
   riscrivere niente.
   ============================================================ */

@media (min-width: 768px) {
  .fd-passi { position: relative; }

  .fd-passi::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 9px;
    height: 1px;
    background: linear-gradient(90deg,
      var(--fd-green-acid) 0 62%,
      var(--fd-green) 62% 100%);
    opacity: .55;
    pointer-events: none;
  }

  .fd-passo { position: relative; padding-top: 30px; }

  .fd-passo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fd-green-acid);
  }

  /* L ultimo pallino riprende il magenta, cosi la riga e i due estremi
     raccontano lo stesso passaggio di colore. */
  .fd-passo:last-child::before { background: var(--fd-green); }
}

/* Il numero del passaggio e grande e in contorno leggero: deve
   scandire, non competere con il titolo del passaggio. */
.elementor.elementor .fd-passo-num .elementor-heading-title {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
}


/* ============================================================
   SISTEMA PULSANTI - VARIANTE COLLEGAMENTO
   Quarta variante: solo testo con freccia, nessun riquadro. Serve
   dentro le schede, dove un pulsante pieno o in contorno peserebbe
   quanto il titolo e ruberebbe la gerarchia. E quello che il mockup
   usa sulle schede degli approfondimenti.

   Le tre varianti precedenti disegnano un riquadro: qui si azzerano
   fondo, bordo e spaziature, e si toglie anche il riempimento che
   scorre da sinistra, che senza riquadro non avrebbe dove scorrere.
   Resta la freccia, che avanza in hover come nelle altre.
   ============================================================ */

.fd-btn-link { --fd-btn-fg: var(--fd-green); }
.fd-btn-link.fd-tono-chiaro { --fd-btn-fg: var(--fd-paper); }

.elementor.elementor .fd-btn.fd-btn.fd-btn-link .elementor-button {
  min-height: 0;
  padding: 4px 0;
  background-color: transparent;
  border: 0;
  color: var(--fd-btn-fg);
}

/* Niente riempimento: lo pseudo-elemento che lo disegna va spento,
   altrimenti resta una banda verde sospesa senza contorno. */
.elementor.elementor .fd-btn.fd-btn.fd-btn-link .elementor-button::before {
  display: none;
}

.elementor.elementor .fd-btn.fd-btn.fd-btn-link .elementor-button:hover,
.elementor.elementor .fd-btn.fd-btn.fd-btn-link .elementor-button:focus-visible {
  background-color: transparent;
  color: var(--fd-btn-fg);
  text-decoration: underline;
  text-underline-offset: 5px;
}


/* ============================================================
   SCHEDA ARTICOLO - RIBALTAMENTO IN HOVER
   La scheda passa da bianca a nera e i testi si invertono.

   Nero pieno e non texture: un immagine di sfondo non si dissolve,
   comparirebbe di scatto. Su una scheda di quelle dimensioni la
   trama si vedrebbe pochissimo, quindi il tinta unita che sfuma
   rende quasi lo stesso effetto senza lo scatto.

   Il collegamento diventa verde ma resta in Oswald: cambiare
   famiglia in hover cambierebbe la larghezza del testo e la riga
   scivolerebbe sotto il puntatore mentre lo si sta per premere.

   SPECIFICITA. Elementor scrive i colori dei testi con tre classi.
   Queste regole ne valgono cinque grazie al prefisso raddoppiato,
   quindi passano sopra senza toccare i valori impostati a riposo,
   che restano governati dal kit.

   Su schermi tattili l hover non esiste e la scheda resta bianca:
   e per questo che il ribaltamento non porta nessuna informazione
   che non ci sia gia.
   ============================================================ */

.fd-acard {
  transition: background-color .22s ease, translate .22s ease;
}

/* La classe raddoppiata porta il selettore a cinque classi. Serve:
   Elementor scrive lo sfondo del contenitore con un selettore che
   contiene :not(.elementor-motion-effects-element-type-background),
   e quel :not conta come una classe. Il suo selettore vale quattro,
   quanto valeva questa regola prima: a parita vince chi viene dopo,
   e il CSS della pagina si carica dopo questo foglio. Risultato: il
   fondo non cambiava mentre i testi si schiarivano, quindi bianco
   su bianco. */
.elementor.elementor .fd-acard.fd-acard:hover {
  background-color: var(--fd-ink);
  translate: 0 -4px;
}

.fd-acard .elementor-heading-title,
.fd-acard .elementor-widget-text-editor,
.fd-acard .elementor-button {
  transition: color .22s ease;
}

/* Titolo e testo si invertono. L occhiello passa al verde acido: su fondo
   scuro guadagna contrasto invece di perderne. */
.elementor.elementor .fd-acard:hover .elementor-widget-heading:not(:first-child) .elementor-heading-title,
.elementor.elementor .fd-acard:hover .elementor-widget-text-editor {
  color: var(--fd-paper);
}

.elementor.elementor .fd-acard:hover .fd-btn-link .elementor-button {
  color: var(--fd-green-acid);
}

/* Con il ribaltamento su nero l occhiello in verde profondo si
   spegnerebbe: passa all acido come il resto sul fondo scuro. */
.elementor.elementor .fd-acard:hover .elementor-widget-heading:first-child .elementor-heading-title {
  color: var(--fd-green-acid);
}

@media (prefers-reduced-motion: reduce) {
  .fd-acard { transition: none; }
  .elementor.elementor .fd-acard:hover { translate: none; }
}


/* ============================================================
   SINGOLO ARTICOLO
   Struttura, colonne e indice sono tutti widget di Elementor.
   Qui c e solo cio che non puo starci: l interno del contenuto
   dell articolo, che e HTML scritto nell editor e non widget, e
   quindi non ha controlli propri.

   Le misure dei titoletti sono legate al kit tramite le variabili
   globali della tipografia: cambiando ftitolo-sezione nel kit,
   cambiano anche qui. Non si scrivono valori fissi.
   ============================================================ */

/* Titoletti di sezione dell articolo. In Permanent Marker come nel
   disegno: sono pochi e brevi, e segnano il ritmo della lettura. */
.fd-articolo .elementor-widget-theme-post-content h2 {
  font-family: "Permanent Marker", cursive;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  color: var(--fd-ink);
  margin: 2.4em 0 .7em;
}

.fd-articolo .elementor-widget-theme-post-content h3 {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(18px, 1.5vw, 22px);
  margin: 1.8em 0 .5em;
}

.fd-articolo .elementor-widget-theme-post-content p {
  margin: 0 0 1.15em;
}

/* Paragrafo di apertura: corpo maggiore e barra magenta a fianco.
   Si aggancia al primo paragrafo, quindi non serve che chi scrive
   ricordi di marcarlo. */
.fd-articolo .elementor-widget-theme-post-content > div > p:first-of-type {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.62;
  border-left: 3px solid var(--fd-green);
  padding-left: 22px;
  margin-bottom: 2em;
}

/* Elenchi: stesso segno delle schede, ma disegnato, perche qui non
   si puo usare il widget Lista Icone. */
.fd-articolo .elementor-widget-theme-post-content ul {
  list-style: none;
  margin: 1.4em 0;
  padding: 0;
}

.fd-articolo .elementor-widget-theme-post-content ul li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--fd-ink) 16%, transparent);
}

.fd-articolo .elementor-widget-theme-post-content ul li:last-child { border-bottom: 0; }

.fd-articolo .elementor-widget-theme-post-content ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.15em;
  width: 9px;
  height: 2px;
  background: var(--fd-green);
  box-shadow: 3.5px -3.5px 0 var(--fd-green), 3.5px 3.5px 0 var(--fd-green);
}

/* Indice laterale. Il riquadro non arriva dalla pagina ma dal foglio
   di stile del widget, e i suoi controlli di bordo non sono esposti
   dalle abilita che uso: e l unico motivo per cui questa neutra-
   lizzazione sta qui invece che in Elementor. Si azzerano sia le
   variabili sia le proprieta diretta, perche a seconda della
   versione il widget usa l una o l altra. */
.fd-indice {
  --box-border-width: 0;
  --box-padding: 0;
  --box-background-color: transparent;
}

.fd-indice .elementor-toc,
.fd-indice .elementor-toc__body {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.fd-indice .elementor-toc__header { display: none; }

.fd-indice .elementor-toc__list-item {
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fd-ink) 16%, transparent);
}

.fd-indice .elementor-toc__list-item-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--fd-ink);
}

.fd-indice .elementor-toc__list-item-text:hover { color: var(--fd-green); }


/* ============================================================
   SEGNAPOSTO FOTOGRAFICO
   Riquadro che tiene il posto di una fotografia mancante e ne
   descrive il contenuto atteso. Serve a due cose: far vedere
   l ingombro reale nell impaginato, e dire a chi produrra lo
   scatto cosa serve, senza doverlo cercare in un documento a parte.

   Il rapporto d aspetto arriva dall attributo data-rapporto del
   contenitore, impostato in Elementor: cosi ogni segnaposto puo
   avere il suo senza una classe nuova.

   Il tratteggio dice che e provvisorio: quando la foto arriva, si
   sostituisce il contenitore con un widget immagine e questa regola
   smette semplicemente di applicarsi.
   ============================================================ */

.fd-segnaposto {
  aspect-ratio: 4 / 5;
  border: 2px dashed color-mix(in srgb, var(--fd-ink) 26%, transparent);
  background: color-mix(in srgb, var(--fd-ink) 4%, transparent);
}

.fd-segnaposto[data-rapporto="4 / 3"] { aspect-ratio: 4 / 3; }

/* Su colonna stretta il rapporto fisso schiaccerebbe il testo:
   sotto i 768 px lo si lascia decidere al contenuto. */
@media (max-width: 767px) {
  .fd-segnaposto { aspect-ratio: auto; }
}


/* L ombra del sollevamento era nera trasparente: su una card scura,
   o dentro una fascia scura, non si vede. La si rende una variabile e
   si cambia solo dove serve, invece di scrivere una seconda regola di
   hover che duplicherebbe il comportamento. */
.fd-collab-card.fd-tone-dark,
.fd-cta .fd-collab-card,
.fd-page-head .fd-collab-card {
  --fd-ombra: rgba(0, 0, 0, .45);
}


/* Le tre affermazioni restano visibili anche su schermo stretto.
   Quando erano un indice numerato le nascondevamo, perche erano
   annotazione; ora sono una dichiarazione sul lavoro di Fermento e
   su telefono e proprio dove serve leggerla. Sotto i 768 px il filo
   passa a sinistra, perche li il blocco va a capo sotto i pulsanti e
   il testo si allinea a sinistra come il resto. */
@media (max-width: 767px) {
  .elementor.elementor .fd-home-hero-index .elementor-heading-title {
    text-align: left;
    padding-right: 0;
    padding-left: 16px;
    border-right: 0;
    border-left: 2px solid var(--fd-green-acid);
    line-height: 1.9;
  }
}

/* ============================================================
   TESTATA GALLEGGIANTE
   La testata esce dal flusso: il riquadro bianco galleggia sopra la
   texture invece di appoggiarsi sopra di essa. Senza questo il
   contenitore padre resta trasparente ma dietro si vede il fondo
   della pagina, che e bianco: sembra una barra piena a tutta larghezza.
   Lo sticky di Elementor continua a funzionare: passa a fixed da solo.
   ============================================================ */
.elementor-location-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

/* ============================================================
   TESTATA DA MOBILE: SOCIAL E HAMBURGER SULLA STESSA RIGA
   I due widget arrivano da famiglie diverse: il menu porta il proprio
   riempimento sul pulsante di apertura, le icone social hanno una
   altezza di riga ereditata dal testo. Allineati a occhio non tornano
   mai: qui entrambi diventano scatole flessibili centrate e si azzera
   cio che li sposta.
   ============================================================ */
@media (max-width: 1024px) {
  /* ATTENZIONE: non rendere flessibile il widget del menu ne il suo
     involucro. Dentro quell involucro convivono il pulsante e il
     pannello a discesa: in riga diventano due elementi affiancati e il
     pannello viene spinto a destra del pulsante. Qui si tocca solo il
     ramo delle icone social. */
  .fd-site-header .elementor-widget-social-icons {
    display: flex;
    align-items: center;
  }

  .fd-site-header .elementor-widget-social-icons .elementor-widget-container {
    display: flex;
    align-items: center;
  }

  .fd-site-header .elementor-social-icons-wrapper {
    display: flex;
    align-items: center;
    line-height: 1;
    margin: 0;
  }

  .fd-site-header .elementor-social-icons-wrapper .elementor-grid-item {
    display: flex;
    align-items: center;
  }

  /* Il pulsante di apertura porta un riempimento suo che lo abbassa
     rispetto alle icone: si azzera e si centra il segno dentro la
     misura dichiarata nel widget. */
  .fd-site-header .elementor-widget-nav-menu .elementor-menu-toggle {
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  /* Logo: la riduzione viene dal contenitore, qui si toglie solo il
     tetto che Elementor mette all immagine. */
  .fd-site-header .fd-site-logo .fd-site-logo-img img {
    height: auto;
    max-width: 100%;
  }
}




/* Pulsante del menu senza sfondo in nessuno stato: Elementor ne mette
   uno suo di riserva (nero al 5%) che ricompare a pannello aperto. */
.fd-site-header .elementor-widget-nav-menu .elementor-menu-toggle,
.fd-site-header .elementor-widget-nav-menu .elementor-menu-toggle:hover,
.fd-site-header .elementor-widget-nav-menu .elementor-menu-toggle:focus,
.fd-site-header .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

/* ============================================================
   TESTO LUNGO CON "LEGGI TUTTO"
   Serve dove la descrizione supera le poche righe: si mostra un
   estratto e si apre a richiesta. Il taglio e fatto con line-clamp,
   quindi conta le righe rese e non i caratteri: nessun testo viene
   troncato a meta parola e non serve sapere quanto e lungo il campo.
   ============================================================ */
.fd-testo-lungo .fd-testo-troncato {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.fd-testo-lungo.e-aperto .fd-testo-troncato {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.fd-testo-lungo .fd-testo-apri {
  display: inline-block;
  align-self: flex-start;   /* il contenitore e una colonna: senza questo il comando si centra */
  text-align: left;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .9em;
  font-weight: 600;
  color: var(--fd-green);
  cursor: pointer;
}

.fd-testo-lungo .fd-testo-apri:hover { text-decoration: underline; }

/* Foto affiancata a un blocco di testo: riempie l altezza della
   colonna accanto, cosi il bordo inferiore cade sempre sulla stessa
   linea del testo qualunque sia la larghezza dello schermo. */
.fd-foto-affiancata,
.fd-foto-affiancata .elementor-widget-container,
.fd-foto-affiancata figure,
.fd-foto-affiancata .elementor-image { height: 100%; }

.fd-foto-affiancata img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .fd-foto-affiancata img { height: auto; }
}

/* La parola lunga resta piu piccola della prima: a piena misura
   sborderebbe dal riquadro nero. Si dimensiona lo span a contorno,
   non serve toccare il testo del widget. */
@media (max-width: 767px) {
  .elementor.elementor .fd-home-hero .fd-home-title .fd-title-outline {
    font-size: clamp(38px, 11.5vw, 82px);   /* fd-title-outline da mobile */
    -webkit-text-stroke-width: 1px;
  }
}


/* Pulsante Indietro della scheda produttore: la freccia a destra dei
   pulsanti fd-btn contraddirebbe la direzione, resta solo l'icona a sinistra. */
.elementor.elementor .fd-btn.fd-btn.fd-back .elementor-button-content-wrapper::after {
  display: none;
}


/* Pulsanti di contatto flottanti: all'apertura Elementor sposta il focus
   sul pannello chiedendo di mostrarlo, e il reset del tema Hello ci disegna
   attorno un contorno nero e un alone bianco (box-shadow). Si spengono
   entrambi solo sul pannello: i link interni mantengono il loro focus per
   chi naviga da tastiera. */
.e-contact-buttons .e-contact-buttons__content-wrapper:focus,
.e-contact-buttons .e-contact-buttons__content-wrapper:focus-visible {
  outline: none;
  box-shadow: none;
}


/* ============================================================
   HOME - DISTRIBUZIONE CONTEMPORANEA
   Manifesto a nove voci. Struttura, griglia, filo superiore e
   spaziature sono impostazioni di Elementor: qui solo decorazione.
   Numero grande in contorno, come il titolo della hero; al
   passaggio si riempie e il filo di accento corre per tutta la
   larghezza, come nelle card delle collaborazioni.
   ============================================================ */

.fd-pilastro { position: relative; }

.fd-pilastro::after {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 46px;
  height: 3px;
  background: var(--fd-green);
  transition: width .42s cubic-bezier(.2, .65, .25, 1);
  pointer-events: none;
}

.fd-pilastro:hover::after,
.fd-pilastro:focus-within::after { width: 100%; }

.elementor.elementor .fd-pilastro .fd-pilastro-num .elementor-heading-title {
  font-size: clamp(56px, 6vw, 88px);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fd-green);
  transition: color .35s ease;
}

.elementor.elementor .fd-pilastro:hover .fd-pilastro-num .elementor-heading-title {
  color: var(--fd-green);
}

@media (prefers-reduced-motion: reduce) {
  .fd-pilastro::after,
  .elementor.elementor .fd-pilastro .fd-pilastro-num .elementor-heading-title { transition-duration: .01ms; }
}