/*
Theme Name: Wifor Child
Theme URI: https://wiforitalia.com/
Description: Tema Child Custom per Wifor Italia - Sviluppato in-house
Author: Wifor Agency
Template: hello-elementor
Version: 1.1.0
Text Domain: wifor-child
*/

/* Da qui in poi scriveremo il nostro CSS custom */

/* ========================================= */
/* FONT LOCALE: Garet                       */
/* ========================================= */

/* Garet - Medium (Mappato come Regolare - Peso 400) */
@font-face {
  font-family: "Garet";
  src: url("./assets/fonts/Garet-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Garet - Extrabold (Mappato come Bold - Peso 700) */
@font-face {
  font-family: "Garet";
  src: url("./assets/fonts/Garet-Heavy.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================================= */
/* APPLICAZIONE GLOBALE DEL FONT             */
/* ========================================= */

:root {
  --font-primario: "Garet", system-ui, -apple-system, sans-serif;

  /* ---- Palette Wifor ----------------------------------------------------
     Prima di questi token nel tema convivevano TRE gialli (#F4C560, #F5C55F,
     #FFD700) e TRE blu (#1A4455, #194454, #0B1E26) usati per gli stessi ruoli,
     scritti a mano in ogni file. Da qui in poi si cambia un valore solo. */
  --wifor-blu: #1a4455;
  --wifor-blu-scuro: #0b1e26;
  --wifor-giallo: #f5c55f;
  --wifor-chiaro: #f8fafc;
  --wifor-bianco: #ffffff;
  --wifor-grigio: #f2f2f2;
}

/* Forza il font sopra le impostazioni tipografiche globali di Elementor.
   NOTA: `div` e `span` erano nell'elenco ma non servivano a niente — ereditano
   gia' da body, e contro una regola Elementor basata su classi un selettore di
   tipo perde comunque per specificita'. In compenso erano pericolosi: un'icona
   resa con <span class="fa-..."> si sarebbe vista come un quadratino, perche'
   `!important` le avrebbe strappato il suo font.
   La soluzione pulita resta impostare Garet nei Font Globali di Elementor
   (Site Settings) e cancellare questo blocco. */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
button,
input,
textarea {
  font-family: var(--font-primario) !important;
}

/* ========================================= */
/* FIX GLOBALE: BLOCCO SCROLL ORIZZONTALE    */
/* ========================================= */
/* `overflow-x: clip` e non `hidden`: hidden creerebbe un contenitore di scroll
   e romperebbe il position:sticky della hero.
   Rimosso `max-width: 100vw`: 100vw include la larghezza della scrollbar, quindi
   su Windows rendeva il body ~15px piu' largo della finestra — un overflow che
   poi veniva nascosto dal clip invece che evitato. */
html,
body {
  overflow-x: clip !important;
}

/* Sostituisce lo `style="width:100%"` inline che i template singoli mettevano
   sul <main>. */
.wifor-single-caso-studio-wrapper,
.wifor-single-corso-wrapper {
  width: 100%;
}

/* Testo per soli screen reader.
   Il tema lo usa in tre punti (h1 della hero, skip link, contesto dei pulsanti
   "Scopri di piu") ma finora lo ereditava da Hello Elementor. Se in Hello si
   disattiva il CSS del tema, quel testo diventerebbe visibile: qui lo rendiamo
   indipendente. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ma resta raggiungibile da tastiera quando riceve il focus (skip link). */
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* ========================================= */
/* HEADER STICKY E MENU NATIVO (PURISTA)     */
/* ========================================= */

/* 1. Blocchiamo l'header in alto */
/* ========================================= */
/* HEADER STICKY (EFFETTO VETRO PREMIUM)     */
/* ========================================= */
.wifor-site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;

  /* Nessuno sfondo / Effetto vetro rimosso come richiesto */
  background-color: transparent;

  /* Transizione morbida nel caso volessimo animarlo poi allo scroll */
  transition: background-color 0.3s ease;
}

/* 2. Trasformiamo la lista in un menu Flexbox orizzontale */
.wifor-pure-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  gap: 30px;
  /* Distanza tra le voci (es: Home - Servizi) */
  align-items: center;
}

.wifor-pure-menu li {
  position: relative;
  /* Necessario per i sottomenu */
}

.wifor-pure-menu ul li a {
  text-decoration: none;
  color: var(--wifor-blu-scuro) !important;
  /* Colore Wifor scuro */
  font-weight: 400;
  font-size: 16px;
  padding: 10px 0;
  display: block;
  transition: color 0.3s ease;
}

.wifor-pure-menu ul li a:hover {
  color: var(--wifor-giallo) !important;
  /* Hover Oro Wifor */
}

/* Sottomenu stile Vetro Satinato Scuro - Premium UI */
.wifor-pure-menu .sub-menu {
  position: absolute;
  /* Angoli più morbidi (stile macOS/iOS) */
  border-radius: 12px;
  top: 100%;
  left: 50%;
  /* Partiamo da più in basso e rimpiccioliti per una transizione "scale-in" */
  transform: translateX(-50%) translateY(25px) scale(0.95);

  /* Sfondo scuro con glassmorphism più marcato e contrastato */
  background-color: rgba(15, 35, 48, 0.65) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* Bordo luminoso superiore per dare profondità 3D */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.15);

  min-width: 240px;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.2);
  /* Padding interno per contenere i link che avranno il loro hover box */
  padding: 8px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;

  /* Transizione fluida stile Apple */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ponte invisibile per non perdere hover uscendo dall'header verso il sottomenu */
.wifor-pure-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
}

/* Stile per i link del sottomenu */
.wifor-pure-menu .sub-menu a {
  color: var(--wifor-chiaro) !important;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  /* Arrotondamento per l'effetto "pillola" al passaggio del mouse */
  border-radius: 8px;
  display: block;

  /* Animazione base per il testo */
  transform: translateX(0);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover premium: il link si sposta a destra, sfondo traslucido e colore testo acceso */
.wifor-pure-menu .sub-menu a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--wifor-giallo) !important;
  /* Testo oro Wifor all'hover */
  /* Micro-interazione bellissima, il link "scivola" a destra */
  transform: translateX(6px);
}

/* Mostra il sottomenu al passaggio del mouse sul genitore */
.wifor-pure-menu .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Sale rallentando e ripristina la scala: bellissimo effetto profondità */
  transform: translateX(-50%) translateY(15px) scale(1);
}

/* ========================================= */
/* FIX BARRA DI AMMINISTRAZIONE WORDPRESS    */
/* ========================================= */

body.admin-bar .wifor-site-header {
  top: 32px !important;
  /* Spinge giù l'header dell'altezza esatta della barra admin */
}

/* La barra admin di WP su mobile è leggermente più spessa */
@media screen and (max-width: 782px) {
  body.admin-bar .wifor-site-header {
    top: 46px !important;
  }
}

/* ========================================= */
/* MENU MOBILE & HAMBURGER (WIFOR)           */
/* ========================================= */

.wifor-hamburger {
  display: none;
  background: transparent !important;
  /* Forza la trasparenza */
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 100;
  position: relative;
  outline: none !important;
}

/* Uccidiamo lo sfondo rosso/rosa di default di WordPress al click */
.wifor-hamburger:hover,
.wifor-hamburger:focus,
.wifor-hamburger:active {
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.wifor-hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--wifor-bianco);
  margin: 5px 0;
  transition: all 0.3s ease;
}

.wifor-hamburger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.wifor-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.wifor-hamburger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----- MEDIA QUERY MOBILE (< 1024px) ----- */
@media screen and (max-width: 1024px) {
  /* FONDAMENTALE: Sgancia il menu dall'hamburger per farlo aprire a tutto schermo */
  .wifor-pure-menu {
    position: static !important;
  }

  /* Mostra l'icona Hamburger */
  .wifor-hamburger {
    display: block;
  }

  /* Il Menu Mobile Principale */
  .wifor-pure-menu ul {
    border-radius: 0px 0px 5px 5px;
    position: absolute;
    top: 100%;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    background-color: rgba(10, 25, 47, 0.98);
    /* Sfondo scuro quasi solido */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    flex-direction: column;
    gap: 0 !important;
    padding: 0 !important;
    /* Rimosso padding per allineare i bordi */

    /* Animazione */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    z-index: -1 !important;
    /* Evita accavallamenti */
  }

  .wifor-pure-menu ul.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .wifor-pure-menu li {
    width: 100%;
    text-align: center;
  }

  .wifor-pure-menu a {
    padding: 15px 20px;
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: block;
  }

  /* --- FIX SOTTOMENU MOBILE --- */
  /* Lo facciamo diventare un blocco a larghezza piena che spinge in giù gli altri link */
  .wifor-pure-menu .sub-menu {
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    /* Leggermente più scuro per l'effetto "rientranza" */
    border: none !important;
    border-radius: 0 !important;
    /* Uccidiamo i bordi arrotondati del desktop */
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Espansione al tap (hover) */
  .wifor-pure-menu .menu-item-has-children:hover .sub-menu {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Stile specifico per i link dentro al sottomenu su mobile */
  .wifor-pure-menu .sub-menu a {
    font-size: 15px !important;
    /* Leggermente più piccoli */
    padding: 12px 20px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    /* Un bianco leggermente smorzato */
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
  }
}

/* ========================================= */
/* SEZIONE RISULTATI A CARD (CASI STUDIO)    */
/* ========================================= */

.wifor-results-wrapper {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: hidden;
}

/* La Griglia dei Risultati */
.wifor-results-grid {
  width: 90%;
  /* Lasciamo un po' di spazio vuoto ai lati, coerente col carosello home */
  margin: 0 auto;
  /* Centriamo la griglia */
  display: grid;
  /* Crea automaticamente colonne per le card, si adattano in base allo spazio */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  /* Spazio tra le card */
  list-style: none !important;
  padding: 0 !important;
}

/* La Singola Card */
.wifor-result-card {
  background-color: rgba(255, 255, 255, 0.05);
  /* Un velo bianco trasparente su sfondo scuro */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  align-items: center;
  /* Centriamo il testo verticalmente */
  justify-content: center;
  /* Centriamo il testo orizzontalmente */
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  cursor: default;
}

/* Effetto Hover leggero e Premium */
.wifor-result-card:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Il Testo all'interno */
.wifor-result-card .result-text {
  color: var(--wifor-chiaro);
  /* Bianco Wifor */
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  transition: color 0.3s ease;
}

/* Il testo diventa giallo all'hover della card */
.wifor-result-card:hover .result-text {
  color: var(--wifor-giallo);
  /* Giallo Wifor */
}

/* ========================================= */
/* MOBILE RESPONSIVE                         */
/* ========================================= */
@media (max-width: 768px) {
  .wifor-results-grid {
    width: 85%;
    /* Lasciamo meno spazio vuoto ai lati su mobile */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }

  .wifor-result-card {
    padding: 25px;
  }

  .wifor-result-card .result-text {
    font-size: 1rem;
  }
}

/* Rimosso il blocco .wifor-mockup-swiper: quella classe non compare in nessun
   file del tema, quindi la regola non si applicava a niente. Se in Elementor
   esiste davvero un carosello con quella classe, la regola va rimessa. */

/* ========================================= */
/* CAROSELLO CORRELATI (SWIPER)              */
/* ========================================= */
.wifor-correlati-wrapper {
  overflow: hidden;
}

/* La Card (Dimensioni ridotte ma animazioni da Home Page) */
.wifor-card-correlato {
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: 12px;
  /* Un po' più morbidi, in stile Wifor */
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--wifor-blu);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.wifor-card-correlato:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.wifor-card-correlato:hover .wifor-correlato-img {
  transform: scale(1.05);
  /* Effetto zoom dell'immagine come in Home */
}

/* Immagine di copertina (campo ACF).
   Era un <div> con background-image inline all'URL a piena risoluzione; ora e'
   un <img> vero, quindi object-fit al posto di background-size — in cambio
   arrivano srcset, sizes, lazy loading e alt dalla Libreria Media. */
.wifor-correlato-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.5s ease;
}

/* Overlay Sfumato (Gradient come in Home) */
.wifor-correlato-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(10, 25, 47, 0.95) 0%,
    rgba(10, 25, 47, 0) 70%
  );
  z-index: 2;
}

/* Contenuto (Solo Titolo) */
.wifor-correlato-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px;
  z-index: 3;
  text-align: left;
  /* Titolo a sinistra, come in Home */
}

.wifor-correlato-titolo {
  font-size: 1.3rem !important;
  color: var(--wifor-giallo) !important;
  /* Il Giallo Wifor usato nei titoli */
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

}

/* ==========================================================================
   FALLBACK WIDGET IMMAGINE ELEMENTOR
   Elementor carica widget-image.min.css solo sulle pagine che usano un widget
   immagine nel proprio contenuto. Header e footer sono documenti separati:
   quando la loro lista di dipendenze CSS si disallinea, quel file non viene
   accodato e il logo dell'header perde il "text-align: center" di default,
   finendo a filo del bordo sinistro (succedeva su Portfolio e sui casi studio).
   Qui la regola di default di Elementor viene ripetuta, con la stessa
   specificita' e prima dei CSS generati per pagina: se widget-image.min.css
   c'e' e' un doppione innocuo, se manca tiene in piedi l'allineamento, e le
   impostazioni fatte in editor sul singolo widget continuano a vincere.
   ========================================================================== */
.elementor-widget-image {
  text-align: center;
}

/* ==========================================================================
   FOOTER
   Il footer e' il documento Elementor 862, renderizzato da footer.php.
   Colori e tipografia stanno nelle impostazioni dei widget, dove chi lavora
   in Elementor se li aspetta. Qui restano solo le rifiniture che in editor
   sarebbero scomode o fragili.
   ========================================================================== */

.wifor-site-footer {
  background-color: var(--wifor-blu-scuro);
}

/* Il logo bianco arriva a 213px dal file caricato: qui lo teniamo a misura */
.wifor-site-footer .elementor-widget-image img {
  max-width: 190px;
  height: auto;
}

/* Titoli di colonna con filetto giallo: richiama il logo e le pillole del portfolio */
.wifor-site-footer .elementor-widget-heading .elementor-heading-title {
  display: inline-block;
  position: relative;
  padding-bottom: 0.9rem;
}

.wifor-site-footer .elementor-widget-heading .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background-color: var(--wifor-giallo);
}

/* Link delle liste: microspostamento all'hover, il colore lo mette Elementor */
.wifor-site-footer .elementor-icon-list-item a,
.wifor-site-footer .elementor-icon-list-item span {
  transition: color 0.25s ease, transform 0.25s ease;
}

.wifor-site-footer .elementor-icon-list-item a:hover {
  transform: translateX(3px);
}

/* Icone social: cerchio vuoto che si accende di giallo */
.wifor-site-footer .elementor-social-icon {
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.25s ease;
}

.wifor-site-footer .elementor-social-icon:hover {
  transform: translateY(-2px);
}

/* Riga legale: ultimo contenitore del documento footer */
.wifor-site-footer .elementor > .e-con:last-child {
  border-top: 1px solid rgba(248, 250, 252, 0.12);
}

.wifor-site-footer .elementor > .e-con:last-child .elementor-widget-text-editor {
  font-family: var(--font-primario);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(248, 250, 252, 0.55);
}

.wifor-site-footer .elementor > .e-con:last-child p {
  margin: 0;
}

.wifor-site-footer .elementor > .e-con:last-child a {
  color: rgba(248, 250, 252, 0.72);
  text-decoration: none;
  transition: color 0.25s ease;
}

.wifor-site-footer .elementor > .e-con:last-child a:hover {
  color: var(--wifor-giallo);
}

@media (max-width: 767px) {
  .wifor-site-footer .elementor > .e-con:last-child {
    --justify-content: center;
    text-align: center;
  }

  .wifor-site-footer .elementor-widget-heading .elementor-heading-title {
    padding-bottom: 0.7rem;
  }
}

/* ==========================================================================
   PAGINE LEGALI
   Informativa privacy e Cookie Policy: pagine WordPress normali, senza
   Elementor. Il contenuto e' avvolto in .wifor-legal.
   ========================================================================== */

.wifor-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 8rem 1.25rem 5rem;
  font-family: var(--font-primario);
  color: var(--wifor-blu);
  line-height: 1.75;
}

.wifor-legal h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wifor-blu-scuro);
}

.wifor-legal h2 {
  margin: 2.75rem 0 1rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wifor-blu-scuro);
}

.wifor-legal h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wifor-blu-scuro);
}

.wifor-legal p,
.wifor-legal li {
  font-size: 1rem;
}

.wifor-legal ul {
  padding-left: 1.25rem;
}

.wifor-legal li {
  margin-bottom: 0.5rem;
}

.wifor-legal a {
  color: var(--wifor-blu);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}

.wifor-legal a:hover {
  color: var(--wifor-blu-scuro);
  text-decoration-color: var(--wifor-giallo);
}

.wifor-legal hr {
  border: 0;
  border-top: 1px solid rgba(26, 68, 85, 0.15);
  margin: 2rem 0;
}

/* Le tabelle scorrono da sole sotto una certa larghezza, senza trascinare la pagina */
.wifor-legal table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.9375rem;
}

.wifor-legal th,
.wifor-legal td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(26, 68, 85, 0.12);
}

.wifor-legal th {
  background-color: var(--wifor-chiaro);
  font-weight: 700;
  color: var(--wifor-blu-scuro);
}

.wifor-legal code {
  font-size: 0.875em;
  background-color: var(--wifor-grigio);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* Le quattro colonne del footer stanno in fila solo sui monitor larghi:
   sotto i 1025px vanno a due, sotto i 600px in colonna singola. */
@media (max-width: 1024px) {
  .wifor-site-footer .elementor > .e-con:first-child {
    --flex-wrap: wrap;
    --row-gap: 3rem;
  }

  .wifor-site-footer .elementor > .e-con:first-child > .e-con-inner > .e-con {
    width: 46%;
  }
}

@media (max-width: 600px) {
  .wifor-site-footer .elementor > .e-con:first-child > .e-con-inner > .e-con {
    width: 100%;
  }

  .wifor-site-footer .elementor > .e-con:first-child {
    --row-gap: 2.5rem;
    --padding-top: 56px;
    --padding-bottom: 40px;
  }
}

/* Sotto i 600px il contenuto del footer non deve appoggiarsi al bordo */
@media (max-width: 600px) {
  .wifor-site-footer .elementor > .e-con {
    --padding-left: 20px;
    --padding-right: 20px;
  }
}

/* ==========================================================================
   HEADER — vetro liquido
   L'header e' fisso e trasparente e il contenuto ci scorre sotto: sulle
   pagine con immagini a tutta larghezza il menu blu finisce sopra le foto e
   diventa illeggibile. Un fondo chiaro semitrasparente con sfocatura lo
   stacca da qualunque cosa passi dietro senza chiudere la pagina con una
   barra piena. La specificita' alzata (.e-con in coda) serve a battere il
   CSS che Elementor genera per il documento 784.
   ========================================================================== */

.wifor-site-header .elementor .wifor-master-header.e-con {
  background-color: rgba(248, 250, 252, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(26, 68, 85, 0.08);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dove la sfocatura non e' supportata si ricade su un fondo quasi pieno:
   meno elegante, ma il menu resta leggibile. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wifor-site-header .elementor .wifor-master-header.e-con {
    background-color: rgba(248, 250, 252, 0.94);
  }
}

/* Due correzioni al footer sotto il desktop. La classe .e-con ripetuta alza
   la specificita' quel tanto che basta a battere il CSS generato da Elementor.
   1. La colonna Servizi aveva order:99999, eredita' del periodo in cui era
      nascosta su mobile: finiva dopo Contatti. Torna nell'ordine del DOM.
   2. Sotto i 600px il contenuto si appoggiava al bordo dello schermo. */
@media (max-width: 1024px) {
  .wifor-site-footer .elementor > .e-con.e-con > .e-con-inner > .e-con {
    order: 0;
  }
}

@media (max-width: 600px) {
  .wifor-site-footer .elementor > .e-con.e-con {
    --padding-left: 20px;
    --padding-right: 20px;
  }
}


/* == WIFOR RESPONSIVE v1 == */
/* ==========================================================================
   WIFOR — RESPONSIVE UNIFICATO — 28/08/2026
   Blocco autonomo: per annullare tutto, cancellare da questo marcatore
   fino alla fine del file. Non tocca nessuna regola preesistente.
   Breakpoint: 767 / 1024 (allineati a Elementor) + 1440.
   ========================================================================== */

:root{
  --wifor-gutter: clamp(20px, 5vw, 64px);
  --wifor-misura: 1180px;
  --wifor-header-h: 76px;
  --wifor-tap: 44px;
}

/* --- 1. MENU MOBILE ------------------------------------------------------ */
@media screen and (max-width: 1024px){
  .wifor-hamburger{
    display: flex !important;
    flex-direction: column; justify-content: center; align-items: center;
    min-width: var(--wifor-tap); min-height: var(--wifor-tap);
    position: relative; z-index: 100001;
  }
  .wifor-hamburger span{ background-color: var(--wifor-blu-scuro) !important; }

  .wifor-pure-menu{ position: static !important; }

  .wifor-pure-menu ul.wifor-pure-menu-ul{
    position: fixed !important;
    top: var(--wifor-header-h) !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    max-height: calc(100vh - var(--wifor-header-h)) !important;
    max-height: calc(100svh - var(--wifor-header-h)) !important;
    overflow-y: auto !important;
    z-index: 99998 !important;
    background-color: rgba(11, 30, 38, .98) !important;
    border-radius: 0 !important;
    padding: 4px 0 32px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  body.admin-bar .wifor-pure-menu ul.wifor-pure-menu-ul{
    top: calc(var(--wifor-header-h) + 46px) !important;
  }

  .wifor-pure-menu ul.wifor-pure-menu-ul > li{ width: 100% !important; text-align: left !important; }

  .wifor-pure-menu ul.wifor-pure-menu-ul a{
    display: flex !important; align-items: center !important;
    min-height: 52px !important;
    padding: 14px var(--wifor-gutter) !important;
    font-size: 18px !important; line-height: 1.25 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    text-align: left !important;
  }
  .wifor-pure-menu ul.wifor-pure-menu-ul a:hover,
  .wifor-pure-menu ul.wifor-pure-menu-ul a:focus{ color: var(--wifor-giallo) !important; }

  /* Sottomenu Servizi sempre aperto: su touch l'hover non e' affidabile */
  .wifor-pure-menu ul.wifor-pure-menu-ul .sub-menu,
  .wifor-pure-menu .menu-item-has-children:hover .sub-menu{
    display: block !important;
    position: static !important;
    width: 100% !important; min-width: 0 !important; max-height: none !important;
    overflow: visible !important;
    transform: none !important; opacity: 1 !important; visibility: visible !important;
    background: rgba(255, 255, 255, .06) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important;
  }
  .wifor-pure-menu .sub-menu::before{ display: none !important; }
  .wifor-pure-menu ul.wifor-pure-menu-ul .sub-menu a{
    min-height: 48px !important;
    padding: 12px var(--wifor-gutter) 12px calc(var(--wifor-gutter) + 20px) !important;
    font-size: 16px !important;
    color: rgba(255, 255, 255, .85) !important;
    transform: none !important;
  }
}

/* --- 2. TIPOGRAFIA FLUIDA (fino a 1024px) -------------------------------- */
@media screen and (max-width: 1024px){
  .elementor-widget-heading .elementor-heading-title,
  .entry-title{
    overflow-wrap: break-word;
  }
  h1.elementor-heading-title:not(.hero-title){ font-size: clamp(32px, 9vw, 56px) !important; line-height: 1.12 !important; }
  h2.elementor-heading-title:not(.hero-title),
  h2.entry-title{ font-size: clamp(28px, 7.6vw, 44px) !important; line-height: 1.18 !important; }
  h3.elementor-heading-title:not(.hero-title){ font-size: clamp(24px, 6.4vw, 32px) !important; line-height: 1.24 !important; }
  h4.elementor-heading-title:not(.hero-title){ font-size: clamp(19px, 4.6vw, 26px) !important; line-height: 1.3 !important; }
  p.elementor-heading-title{ font-size: clamp(22px, 6vw, 36px) !important; line-height: 1.3 !important; }
}

/* --- 5. AREE DI TOCCO ---------------------------------------------------- */
@media screen and (max-width: 1024px){
  .elementor-button,
  .wifor-filter{
    min-height: var(--wifor-tap) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .elementor-widget-social-icons .elementor-social-icon{ min-width: 44px; min-height: 44px; }
  .wifor-site-footer a{ padding-block: 7px; line-height: 1.5; }
}

/* --- 6. HERO: titolo che non sborda e colonne allineate ------------------ */
.hero-col-text h2.hero-title{
  overflow-wrap: break-word !important;
}
@media screen and (min-width: 901px){
  .hero-col-text h2.hero-title{ font-size: clamp(2.1rem, 4.2vw, 3.4rem) !important; }
}

/* --- 7. DETTAGLI --------------------------------------------------------- */
.wifor-project__services{ font-size: 13px !important; }
.forminator-file-upload span{ font-size: 13px !important; max-width: 100%; overflow-wrap: break-word; }

/* --- 8. CORREZIONI v1.1 (dopo il primo collaudo) ------------------------- */
@media screen and (max-width: 1024px){
  /* pulsanti della hero e navigazione interna */
  .wifor-cta-btn{
    min-height: var(--wifor-tap) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  .wifor-hero-master .menu-item,
  .wifor-hero-master button.menu-item{
    font-size: 14px !important;
    min-height: 40px !important;
    padding-inline: 10px !important;
  }
  .wifor-skip-link{ font-size: 14px !important; }
  /* voci del footer: altezza comoda senza rompere l'andata a capo */
  .wifor-site-footer .elementor-icon-list-item{ min-height: 36px; align-items: center; }
}

/* misura di lettura anche nel footer */
@media screen and (min-width: 1025px){
  .wifor-site-footer .elementor-heading-title{ max-width: 70ch; }
}


/* --- 11. INTERVENTI MIRATI — 31/08/2026 ---------------------------------- */
/* Correzioni mirate a singoli blocchi. Ogni sotto-sezione è indipendente e
   si può togliere da sola senza toccare le altre. */

/* 11a — Navigazione della hero.
   I <button> ereditavano lo sfondo rosso di default del browser su hover e
   click. Ora sono pillole gialle come i pulsanti del sito. */
.wifor-hero-nav .menu-item{
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
  transition: background-color .25s ease, color .25s ease;
}
.wifor-hero-nav .menu-item:not(:last-of-type)::after{ display: none !important; }
.wifor-hero-nav .menu-item:hover,
.wifor-hero-nav .menu-item:focus,
.wifor-hero-nav .menu-item:focus-visible,
.wifor-hero-nav .menu-item:active,
.wifor-hero-nav .menu-item.active{
  background-color: var(--wifor-giallo) !important;
  color: var(--wifor-blu-scuro) !important;
  outline: none !important;
}
.wifor-hero-nav .menu-item.active{ font-weight: 700 !important; }

/* 11b — Footer: le quattro colonne non andavano a capo su mobile.
   La regola esistente puntava a ".elementor > .e-con:first-child", che è il
   blocco "Contattaci", non la riga delle colonne (che è il secondo figlio e
   ha un .e-con-inner). Le colonne restavano su una riga sola, larghe anche
   20 px, e i testi si sovrapponevano. */
@media (max-width: 1024px){
  .wifor-site-footer .elementor > .e-con > .e-con-inner{
    flex-wrap: wrap !important;
    row-gap: 2.5rem !important;
  }
  .wifor-site-footer .elementor > .e-con > .e-con-inner > .e-con{
    width: 46% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 767px){
  .wifor-site-footer .elementor > .e-con > .e-con-inner > .e-con{
    width: 100% !important;
  }
}

/* 11c — Hero della home.
   Respiro laterale (il testo partiva da x=0) e, sui monitor bassi tipo
   1280x720, il riquadro col video finiva sotto l'header fisso: aveva altezza
   612 px fissa e partiva a 64 px, mentre l'header ne occupa 85. */
.sezione-fluida{ padding-inline: clamp(20px, 4vw, 72px) !important; }
@media (min-width: 901px) and (max-height: 900px){
  .sezione-fluida{ padding-top: 96px !important; padding-bottom: 32px !important; }
  .sezione-fluida .e-con:has(> .e-con-inner > .elementor-background-video-container),
  .sezione-fluida .e-con-inner:has(> .elementor-background-video-container){
    height: auto !important;
    min-height: min(612px, calc(100svh - 230px)) !important;
  }
}

/* 11d — Pagina singola del corso: il "100%" a 80 px sbordava dalla sua
   colonna da 180 px sotto i 1600 px di larghezza. */
.elementor-element-a0ef208{ flex-wrap: wrap !important; }
.elementor-element-a0ef208 .elementor-heading-title{
  font-size: clamp(2.6rem, 4.2vw, 5rem) !important;
}

/* 11e — Respiro laterale del contenuto sotto i 1024 px.
   Solo i contenitori interni delle pagine: header, footer e sezioni a tutta
   larghezza non vengono toccati. */
@media (max-width: 1024px){
  .page-content .elementor > .e-con > .e-con-inner{
    padding-inline: max(20px, 4.5vw) !important;
  }
}


/* --- 12. HERO MOBILE A TUTTO SCHERMO — 31/08/2026 ------------------------ */
/* Sotto i 768 px la prima sezione della home cambia impaginazione: il video
   diventa lo sfondo a tutto schermo, i cinque servizi si leggono come un
   elenco unico allineato a sinistra e centrato in verticale, i due pulsanti
   spariscono. Un velo scuro in sfumatura garantisce la leggibilita'.
   Sopra i 768 px non cambia assolutamente nulla. */
@media (max-width: 767px){

  .sezione-fluida{
    padding: 0 !important;
    min-height: 100svh !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .sezione-fluida > .e-con-inner{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    padding: 86px 26px 24px !important;
    position: relative !important;
  }

  /* --- il video diventa lo sfondo --- */
  .sezione-fluida .elementor-element-39d9bba{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 0 !important;
  }
  .sezione-fluida .elementor-element-39d9bba > .e-con-inner{
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 0 !important;
  }
  /* 03/09/2026 — il video riempie l'area, senza fasce e senza finire sotto
     l'header. Il riquadro parte sotto l'header fisso (token --wifor-header-h)
     e da li' il video copre tutto: nessuna banda sopra e sotto, e la parte
     alta del fotogramma non sparisce dietro la barra del menu.
     'contain' e' stato provato e scartato: mostrava tutto il fotogramma ma
     lasciava due fasce vuote da 134 px.
     Gli !important servono: Elementor scrive width/height inline sul video
     via JS, ricalcolandoli a ogni resize. */
  .sezione-fluida .elementor-background-video-container{
    border-radius: 0 !important;
    top: var(--wifor-header-h, 76px) !important;
    height: calc(100% - var(--wifor-header-h, 76px)) !important;
  }
  .sezione-fluida .elementor-background-video-container video,
  .sezione-fluida .elementor-background-video-container iframe{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
  /* velo per la leggibilita': piu' denso a sinistra, dove sta il testo.
     Sta sul contenitore, non sul media: cosi' resta sopra al video (z 0) e
     sotto ai testi (z 2). */
  .sezione-fluida > .e-con-inner::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      rgba(11, 30, 38, .82) 0%,
      rgba(11, 30, 38, .60) 45%,
      rgba(11, 30, 38, .22) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* --- i cinque servizi come elenco unico --- */
  .sezione-fluida .elementor-element-9a8a509{
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    order: 1 !important;
  }
  .sezione-fluida .elementor-element-f94ecc8{
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    order: 2 !important;
  }
  .sezione-fluida .elementor-element-cfa89e0,
  .sezione-fluida .elementor-element-25c236f{
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: flex-start !important;
  }
  .sezione-fluida .elementor-widget-heading{
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  .sezione-fluida .elementor-heading-title,
  .sezione-fluida .elementor-heading-title a{
    color: #ffffff !important;
    text-align: left !important;
    font-size: clamp(21px, 5.9vw, 30px) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    letter-spacing: .2px;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
  }

  /* --- via i due pulsanti --- */
  .sezione-fluida .elementor-element-d69bce0{ display: none !important; }

  /* --- social in basso a sinistra, sopra al video --- */
  .sezione-fluida .elementor-element-1e8d9ea{
    position: absolute !important;
    left: 26px !important;
    bottom: 30px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  .sezione-fluida .elementor-element-1e8d9ea .elementor-social-icon{
    background-color: rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* --- 13. CARD FORMAZIONE: IMPILAMENTO CALIBRATO PER MOBILE --------------- */
/* L'effetto e' uno "sticky stack": ogni card si incolla a un'altezza crescente
   e la successiva le scivola sopra. Le distanze sono tarate sul desktop
   (103, 155, 206, 258 px, passo 51,6) e su un telefono non stanno: la card
   piu' alta, incollata a 258, arriva oltre il fondo dello schermo e viene
   tagliata, mentre delle precedenti resta visibile solo il badge.

   Sotto i 768 px il passo scende a 22 px e la partenza a 96, cioe' appena
   sotto l'header: la pila si legge lo stesso e nessuna card esce dallo
   schermo. Sui telefoni bassi (sotto gli 800 px di altezza) non c'e' spazio
   nemmeno cosi': li' l'impilamento si disattiva e le card scorrono in colonna.
   Sopra i 768 px non cambia nulla. */
@media (max-width: 767px) and (min-height: 800px){
  .elementor-element-c90e969{ top: 96px !important; }
  .elementor-element-3bd0f56{ top: 118px !important; }
  .elementor-element-432f94e{ top: 140px !important; }
  .elementor-element-225b670{ top: 162px !important; }
}
@media (max-width: 767px) and (max-height: 799px){
  .elementor-element-c90e969,
  .elementor-element-3bd0f56,
  .elementor-element-432f94e,
  .elementor-element-225b670{
    position: relative !important;
    top: auto !important;
  }
}


/* --- 14. RIFINITURE — 31/08/2026 ----------------------------------------- */

/* 14a — Copertine del carosello casi studio tagliate a meta'.
   casi-studio.css dichiara gia' .case-bg{width:100%;height:100%;object-fit:cover},
   ma la regola ".elementor img{height:auto;max-width:100%}" ha specificita'
   maggiore e arriva dopo: l'altezza tornava automatica e l'immagine riempiva
   solo la fascia alta del riquadro quadrato. */
.wifor-case-card img.case-bg,
.wifor-cases-swiper img.case-bg{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

/* 14b — La "X" di chiusura dell'hamburger era storta.
   Colpa della sezione 1: passando il pulsante a flex column i margini di 5 px
   delle tre barrette hanno smesso di collassare e il passo fra i centri e'
   diventato 12 px invece di 7. Le rotazioni pero' traslano di 7 px, quindi le
   due diagonali non si incontravano piu' al centro. Con gap 5 e margini a zero
   il passo torna a 7 e la X si chiude esatta. */
@media screen and (max-width: 1024px){
  .wifor-hamburger{ gap: 5px !important; }
  .wifor-hamburger span{ margin: 0 !important; }
}

/* 14c — Blocco "Contattaci" del footer allineato al centro.
   Sotto i 600 px Elementor lo centrava gia'; fra 600 e 1024 restava a sinistra.
   Ora e' centrato su tutta la fascia mobile e tablet, e il trattino giallo di
   accento — ancorato a sinistra, che faceva sembrare storto tutto il blocco —
   si centra sotto al testo. */
@media (max-width: 1024px){
  .wifor-site-footer .elementor-element-ab1796e .elementor-heading-title,
  .wifor-site-footer .elementor-element-025e358 .elementor-heading-title{
    display: block !important;
    text-align: center !important;
  }
  .wifor-site-footer .elementor-element-ab1796e .elementor-heading-title::after,
  .wifor-site-footer .elementor-element-025e358 .elementor-heading-title::after{
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* ==========================================================================
   HERO AURORA — fondo animato delle cinque pagine servizio
   Aggiunto il 28/08/2026. Rivisto il 02/09/2026:
   fondo piu' marcato e hero col solo titolo di pagina in dissolvenza.
   Il contenitore della hero riceve da JS le classi .wifor-aurora-host e
   .wifor-aurora-<variante>; il fondo colorato e' comunque scritto qui, cosi'
   la pagina e' gia' giusta al primo paint anche prima che parta il canvas.
   Varianti: carta  -> branding, content creation, advertising
             nebbia -> social media, web design
   ========================================================================== */

.wifor-aurora-carta {
	--wifor-aurora-base:   #fbfcfd;
	--wifor-aurora-velo-a: rgba(251, 252, 253, .78);
	--wifor-aurora-velo-b: rgba(251, 252, 253, .30);
}

.wifor-aurora-nebbia {
	--wifor-aurora-base:   #eef3f5;
	--wifor-aurora-velo-a: rgba(238, 243, 245, .82);
	--wifor-aurora-velo-b: rgba(238, 243, 245, .34);
}

/* Specificita' alzata ripetendo la classe, come gia' fatto per l'header.
   Elementor tinge questo contenitore con
   .elementor-5557 .elementor-element.elementor-element-d291d6c:not(...),
   che vale quattro classi: qui ne mettiamo sei e non si discute piu'. */
.e-con.wifor-aurora-host.wifor-aurora-host.wifor-aurora-host.wifor-aurora-host.wifor-aurora-host {
	position: relative;
	overflow: hidden;
	background-color: var(--wifor-aurora-base);
}

/* Il contenuto della hero resta sopra il fondo animato. */
.wifor-aurora-host > .e-con-inner {
	position: relative;
	z-index: 1;
}

.wifor-aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background-color: var(--wifor-aurora-base);
}

/* Il canvas viene disegnato a 1/8 di risoluzione e sfocato qui: il costo di
   calcolo non dipende dalla dimensione dello schermo. La scala copre i bordi
   che la sfocatura lascerebbe scoperti. */
.wifor-aurora canvas {
	display: block;
	width: 100%;
	height: 100%;
	filter: blur(30px);
	transform: scale(1.2);
}

.wifor-aurora-grana {
	position: absolute;
	inset: 0;
	opacity: .09;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Velo di leggibilita'. Con la hero a solo titolo il testo sta al centro,
   quindi il velo diventa una schiarita centrale invece che laterale. */
.wifor-aurora-velo {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse 78% 62% at 50% 50%,
		var(--wifor-aurora-velo-a) 0%,
		var(--wifor-aurora-velo-b) 46%,
		transparent 78%
	);
}

/* ==========================================================================
   HERO — titolo di pagina in dissolvenza
   Le tre colonne di copy restano nel documento Elementor ma non si vedono:
   per rimetterle basta togliere questa regola.
   ========================================================================== */

.wifor-hero-titolo > .e-con-inner > .e-con {
	display: none !important;
}

.wifor-hero-titolo > .e-con-inner {
	align-items: center;
	justify-content: center;
	text-align: center;
}

h1.wifor-titolo {
	display: block;
	margin: 0;
	padding: 0 min(6vw, 60px);
	max-width: 16ch;
	font-family: var(--font-primario, "Garet", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(42px, 9vw, 132px);
	line-height: 1.02;
	letter-spacing: -.025em;
	color: var(--wifor-blu, #1a4455);
	text-wrap: balance;
}

h1.wifor-titolo .wifor-parola {
	display: inline-block;
	white-space: nowrap;
}

h1.wifor-titolo .wifor-lettera {
	display: inline-block;
	animation: wifor-lettera-entra .62s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes wifor-lettera-entra {
	from {
		opacity: 0;
		transform: translateY(.30em);
		filter: blur(7px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@media (max-width: 1024px) {
	.wifor-aurora canvas {
		filter: blur(24px);
	}
	h1.wifor-titolo {
		max-width: 12ch;
	}
}

/* Chi ha chiesto meno movimento vede un fermo immagine, non l'animazione
   rallentata: il canvas disegna un solo fotogramma e si ferma (gestito in JS),
   e il titolo compare tutto insieme senza dissolvenza. */
@media (prefers-reduced-motion: reduce) {
	.wifor-aurora-grana {
		display: none;
	}
	h1.wifor-titolo .wifor-lettera {
		animation: none;
	}
}


/* ==========================================================================
   HERO CTA - pulsante "Guarda i progetti" nella hero delle pagine servizio
   Aggiunto il 02/09/2026. Animazione "Tracciato": il contorno si disegna,
   poi compare l'etichetta. Rollback: cancellare da questo commento in giu'.
   ========================================================================== */

.wifor-hero-cta-deposito { display: none; }

.wifor-hero-blocco {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.4rem;
}

.wifor-cta-slot {
	position: relative;
	display: inline-flex;
}

.wifor-cta-tratto {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: visible;
	pointer-events: none;
	opacity: 0;
}

.wifor-cta-tratto rect {
	fill: none;
	stroke: var(--wifor-blu, #1a4455);
	stroke-width: 1;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

a.wifor-hero-cta {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-primario, "Garet", system-ui, sans-serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 18px;
	color: var(--wifor-blu, #1a4455);
	background: rgba(245, 197, 95, 0);
	border: 1px solid transparent;
	border-radius: 50px;
	padding: 12px 30px;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: background .3s, color .3s, border-color .3s;
}

a.wifor-hero-cta:hover {
	background: var(--wifor-giallo, #f5c55f);
	border-color: var(--wifor-giallo, #f5c55f);
	color: var(--wifor-blu-scuro, #0b1e26);
}

a.wifor-hero-cta:focus-visible {
	outline: 2px solid var(--wifor-blu, #1a4455);
	outline-offset: 3px;
}

.wifor-hero-cta__freccia { transition: transform .3s; }
a.wifor-hero-cta:hover .wifor-hero-cta__freccia { transform: translateX(4px); }

/* --- entrata --- */

.wifor-cta-slot[data-stato="in"] .wifor-cta-tratto {
	opacity: 1;
	animation: wifor-tratto-via .01s linear 1.02s forwards;
}

.wifor-cta-slot[data-stato="in"] .wifor-cta-tratto rect {
	animation: wifor-traccia .7s cubic-bezier(.34, .72, .24, 1) forwards;
}

.wifor-cta-slot[data-stato="in"] a.wifor-hero-cta {
	animation: wifor-etichetta .4s ease .6s forwards;
	pointer-events: auto;
}

@keyframes wifor-traccia   { to { stroke-dashoffset: 0; } }
@keyframes wifor-tratto-via { to { opacity: 0; } }
@keyframes wifor-etichetta {
	from { opacity: 0; }
	to   { opacity: 1; border-color: var(--wifor-blu, #1a4455); }
}

@media (max-width: 767px) {
	.wifor-hero-blocco { gap: 1.8rem; }
	a.wifor-hero-cta { font-size: 16px; padding: 11px 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.wifor-cta-tratto { display: none; }
	a.wifor-hero-cta {
		opacity: 1;
		pointer-events: auto;
		animation: none;
		border-color: var(--wifor-blu, #1a4455);
	}
}