/*
 * Nastrotex Cufra × VIFLO™ – Landing page
 * CSS 1:1 con "Landing VIFLO v2.dc.html" (Claude Design). Ogni valore
 * (colori, clamp(), spaziature, easing, keyframes) è stato riportato
 * identico dal design sorgente. Gli attributi w-* del prototipo sono
 * diventati classi/data-attribute .vfl-*/data-vfl-* – stessa logica,
 * markup adatto a WordPress.
 */

:root {
  --vfl-bg: #E7E4E0;
  --vfl-ink: #14110F;
  --vfl-cream: #F6F4F1;
  --vfl-accent: #CE776B; /* mattone – potenza */
  --vfl-blue: #6B93CF;   /* fatica */
  --vfl-green: #B7CF6B;  /* recupero */
  --vfl-dark: #14110F;
  --vfl-dark-2: #0F0D0C;

  /* Distanza di scroll per far avanzare una "slide" nelle sezioni
     pinnate (frasi a scroll, applications): su schermi piccoli un intero
     100vh per frase è troppo scroll a ogni swipe, quindi si riduce sotto
     900px. JS legge questo valore dal DOM (non lo ricalcola a mano), CSS
     e JS restano sempre allineati. */
  --vfl-slide-vh: 100vh;
}
@media (max-width: 900px) {
  :root { --vfl-slide-vh: 62vh; }
}

/* --------------------------------------------------------------------
 * Font – Sofia Pro (self-hosted). Un solo peso disponibile (Light):
 * lo dichiariamo su un range ampio di font-weight così il browser usa
 * sempre questa font reale (niente grassetto sintetico, niente fallback
 * su Jost) per qualunque peso richiesto dal design (300/400/500/600).
 * Se in futuro arrivano altri pesi (Regular/Medium/SemiBold), aggiungi
 * altre regole @font-face con lo stesso font-family e il font-weight
 * esatto: il browser sceglierà quella più vicina automaticamente.
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "Sofia Pro";
  src: url("../fonts/SofiaPro-Light.woff2") format("woff2"),
       url("../fonts/SofiaPro-Light.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */
/* Questo foglio di stile è caricato SOLO sulla pagina con template
   "Landing VIFLO™" (vedi functions.php → vfl_enqueue_assets), quindi le
   regole su html/body restano innocue per il resto del sito. */
html { scroll-behavior: smooth; background: var(--vfl-bg, #E7E4E0); scroll-snap-type: y proximity; }
body {
  margin: 0;
  background: var(--vfl-bg, #E7E4E0);
  color: var(--vfl-ink, #14110F);
  font-family: "Sofia Pro", "Sofia Pro Soft", Jost, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.vfl-landing a { color: var(--vfl-ink, #14110F); text-decoration: none; }
.vfl-landing a:hover { color: var(--vfl-accent, #CE776B); }
.vfl-landing ::selection { background: var(--vfl-accent, #CE776B); color: var(--vfl-cream, #F6F4F1); }
.vfl-landing, .vfl-landing * { box-sizing: border-box; }
.vfl-italic { font-family: "Playfair Display", Georgia, serif; font-style: italic; }

/* --------------------------------------------------------------------
 * Reveal-on-scroll: mask / fade / scale / line
 * ------------------------------------------------------------------ */
[data-vfl-mask] { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
[data-vfl-mask] > span { display: block; transform: translateY(115%); transition: transform 1.25s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
[data-vfl-mask][data-vfl-on] > span { transform: none; }

[data-vfl-fade] { opacity: 0; transform: translateY(22px); transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
[data-vfl-fade][data-vfl-on] { opacity: 1; transform: none; }

[data-vfl-scale] { clip-path: inset(0 0 0 0 round 22px); transform: scale(.94); opacity: 0; transition: transform 1.4s cubic-bezier(.16,1,.3,1), opacity 1.1s ease; transition-delay: var(--d, 0s); }
[data-vfl-scale][data-vfl-on] { transform: none; opacity: 1; }

[data-vfl-line] { transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
[data-vfl-line][data-vfl-on] { transform: scaleX(1); }

@keyframes vfl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }
@keyframes vfl-orbit { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .vfl-grid-3, .vfl-grid-2, .vfl-grid-5 { grid-template-columns: minmax(0,1fr) !important; }
  .vfl-pad { padding-left: 18px !important; padding-right: 18px !important; }
}

/* --------------------------------------------------------------------
 * Intro loader
 * ------------------------------------------------------------------ */
.vfl-intro {
  position: fixed; inset: 0; z-index: 90;
  background: var(--vfl-accent, #CE776B); color: var(--vfl-cream, #F6F4F1);
  cursor: pointer;
  transition: transform 1.15s cubic-bezier(.76,0,.24,1), border-radius .9s ease;
  border-radius: 0;
}
.vfl-intro[data-phase="out"], .vfl-intro[data-phase="done"] { border-radius: 26px; transform: translateY(-101%); }
.vfl-intro[data-phase="done"] { display: none; }
.vfl-intro__word-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 6vw; }
.vfl-intro__word {
  font-size: clamp(40px, 9vw, 160px); line-height: .9; letter-spacing: -.055em; font-weight: 400; text-align: center;
  transition: opacity .45s ease, filter .45s ease; opacity: 0; filter: blur(14px);
}
.vfl-intro__word.is-visible { opacity: 1; filter: blur(0); }
.vfl-intro__bar { position: absolute; left: 26px; right: 26px; bottom: 22px; display: flex; align-items: center; gap: 16px; }
.vfl-intro__rule { display: block; height: 1px; background: rgba(246,244,241,.85); transition: width .18s linear; width: 0%; }
.vfl-intro__count { font-size: 11px; letter-spacing: .14em; font-weight: 600; }
.vfl-intro__kicker { position: absolute; left: 26px; top: 22px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; }

/* --------------------------------------------------------------------
 * Pill "Richiedi campione" (basso sx) – sostituisce il pulsante Menu del
 * design originale: il menu overlay a schermo intero è stato rimosso su
 * richiesta cliente (la navigazione rapida resta nella pillola in basso
 * a destra, vedi .vfl-quicknav più sotto).
 * ------------------------------------------------------------------ */
.vfl-menu-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 70;
}
.vfl-menu-toggle__btn {
  display: flex; align-items: center; gap: 9px; padding: 12px 20px;
  border: 1px solid rgba(255,255,255,.7); border-radius: 100px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--vfl-ink, #14110F); background: rgba(246,244,241,.62);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 34px rgba(20,17,15,.14);
  transition: background .4s ease, color .4s ease;
}
.vfl-menu-toggle__btn:hover { color: var(--vfl-cream, #F6F4F1); background: var(--vfl-accent, #CE776B); border-color: var(--vfl-accent, #CE776B); }

.vfl-quicknav {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 100px; background: rgba(246,244,241,.62);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 10px 34px rgba(20,17,15,.14);
}
.vfl-quicknav a { padding: 11px 16px; border-radius: 100px; font-size: 12px; letter-spacing: .02em; font-weight: 500; transition: background .35s ease; }
.vfl-quicknav a:hover { background: rgba(255,255,255,.8); }
.vfl-quicknav a.is-cta { padding: 11px 18px; background: var(--vfl-accent, #CE776B); color: var(--vfl-cream, #F6F4F1); transition: background .35s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.vfl-quicknav a.is-cta:hover { background: var(--vfl-ink, #14110F); transform: translateY(-2px); color: var(--vfl-cream, #F6F4F1); }
/* Rev. 24/09/2026: pillola "Tecnologia/Risultati/Contatti" nascosta su
   mobile (richiesta cliente) – resta solo "Richiedi campione" in basso a
   sinistra. Solo mobile: il desktop resta invariato. */
@media (max-width: 900px) {
  .vfl-quicknav { display: none; }
}

/* Selettore lingua IT/EN (rev. 24/09/2026) – stesso "vetro" delle altre
   pill fisse, in alto a sinistra così resta raggiungibile anche su mobile
   (dove la pillola di navigazione rapida sparisce, vedi sopra). */
.vfl-lang-switch {
  position: fixed; top: 18px; left: 18px; z-index: 70;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 100px; background: rgba(246,244,241,.62);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 10px 34px rgba(20,17,15,.14);
}
.vfl-lang-switch__btn {
  border: 0; background: none; cursor: pointer; appearance: none;
  padding: 8px 13px; border-radius: 100px; font-size: 11px; letter-spacing: .06em; font-weight: 500;
  color: var(--vfl-ink, #14110F); font-family: inherit;
  transition: background .35s ease, color .35s ease;
}
.vfl-lang-switch__btn:hover { background: rgba(255,255,255,.8); }
.vfl-lang-switch__btn.is-active { background: var(--vfl-accent, #CE776B); color: var(--vfl-cream, #F6F4F1); }
.vfl-lang-switch__btn.is-active:hover { background: var(--vfl-accent, #CE776B); }

/* --------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------ */
.vfl-hero-section { position: relative; height: 190vh; }
/* Con video di sfondo: hero fissa più a lungo – testo/velo si dissolvono
   svelando il video "pulito" prima che l'intera card lasci spazio alla
   sezione successiva (richiesto dal cliente il 20/09/2026). Senza video
   (foto statica o gradiente) resta il fade unico di sempre, la scritta
   sparisce insieme allo sfondo – non ha senso "svelare" una foto ferma.
   Fasi lette dal JS in vh: 0–.5 ferma, .5–1 dissolve testo, 1–1.6 video
   pieno, 1.6–2.5 uscita card (stessa distanza di sempre, 90vh = 1.6→2.5). */
.vfl-hero-section--video { height: 350vh; }
.vfl-hero-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
.vfl-hero-card {
  position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden;
  background: var(--vfl-dark-2, #0F0D0C); color: var(--vfl-cream, #F6F4F1); will-change: transform; background-size: cover; background-position: center;
}
.vfl-hero-card__bg-a { position: absolute; inset: -14%; background: radial-gradient(120% 90% at 50% 20%, #3A322C 0%, #17130F 62%, #0C0A09 100%); will-change: transform; }
.vfl-hero-card__bg-b { position: absolute; inset: -14%; background: repeating-linear-gradient(118deg, rgba(246,244,241,.05) 0 2px, rgba(0,0,0,0) 2px 26px); will-change: transform; }
.vfl-hero-card__photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* --------------------------------------------------------------------
 * Video di sfondo (hero, applications): file caricato o embed
 * YouTube/Vimeo. L'iframe non supporta object-fit, quindi lo
 * sovradimensioniamo e centriamo con la classica tecnica "cover" per
 * iframe 16:9 (assume un contenitore vicino a schermo intero, vero sia
 * per la hero pinnata che per applications).
 * ------------------------------------------------------------------ */
.vfl-bg-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vfl-bg-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vfl-bg-video__media[data-embed] {
  inset: auto; top: 50%; left: 50%; right: auto; bottom: auto;
  width: 177.78vh; height: 56.25vw; /* rapporto 16:9 */
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
  /* Un iframe non si può "mettere in pausa sul poster" senza API della
     piattaforma: con "riduci animazioni" lo nascondiamo e basta, resta
     il colore di sfondo della sezione (il video file invece si ferma
     sul primo fotogramma – vedi viflo-landing.js). */
  .vfl-bg-video__media[data-embed] { display: none; }
}
.vfl-hero-card__glow { position: absolute; top: 8%; left: 50%; width: 56vmax; height: 56vmax; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(206,119,107,.42) 0%, rgba(206,119,107,0) 66%); pointer-events: none; }
/* Gruppo che si dissolve nella fase "video pieno" (solo hero con video –
   vedi .vfl-hero-section--video sopra e il frame() in viflo-landing.js). */
.vfl-hero-fadeout-group { will-change: opacity, transform; }
.vfl-hero-card__meta { position: absolute; top: 20px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(246,244,241,.55); }
.vfl-hero-card__title-block { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(18px,3vw,44px) clamp(60px,7vh,92px); will-change: transform; }
.vfl-hero-card__h1 { margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.vfl-hero-card__line1 { display: block; font-size: clamp(20px,4.4vw,84px); line-height: 1; letter-spacing: -.04em; font-weight: 300; }
/* Rev. 22/09/2026: al posto del testo "VIFLO®" (era qui, clamp 58–300px)
   ora il logo ufficiale – stessa scala visiva, dimensionato in altezza con
   la stessa progressione, larghezza libera (il logo è un lockup orizzontale
   icona+wordmark, più largo della sola parola "VIFLO"). Il file di default
   è già in variante bianca (sfondo hero sempre scuro) – niente filtro CSS. */
.vfl-hero-card__logo { display: block; }
.vfl-hero-card__logo img { display: block; height: clamp(50px,13vw,230px); width: auto; max-width: 100%; }
.vfl-hero-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: clamp(22px,3vh,40px); border-top: 1px solid rgba(246,244,241,.2); margin-top: clamp(22px,3vh,38px); }
.vfl-hero-card__sub { margin: 0; max-width: 22ch; font-size: clamp(18px,2vw,30px); line-height: 1.16; font-weight: 300; }
.vfl-hero-card__aside { display: flex; flex-direction: column; gap: 18px; max-width: 40ch; }
.vfl-hero-card__body { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(246,244,241,.66); }
.vfl-btn-light {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 100px;
  background: var(--vfl-cream, #F6F4F1); color: var(--vfl-ink, #14110F); font-size: 12px; font-weight: 500;
  transition: background .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.vfl-btn-light:hover { background: var(--vfl-accent, #CE776B); color: var(--vfl-cream, #F6F4F1); transform: translateY(-3px); }

/* --------------------------------------------------------------------
 * Immagine a tutto schermo (tra "frasi a scroll" e "Nastrotex × VIFLO®",
 * richiesta cliente 22/09/2026): entra con "impatto" (scale-in con lieve
 * rimbalzo, come un blocco che avanza verso lo schermo), resta a schermo
 * intero, poi esce in semplice dissolvenza. Pinnata come hero/apps così
 * l'opacità/scale restano calcolate sullo scroll dell'intera sezione
 * (JS, blocco vfl-fullimage in viflo-landing.js) invece che sul
 * passaggio istantaneo di una sezione da un solo viewport di altezza.
 * ------------------------------------------------------------------ */
.vfl-fullimage-section { position: relative; height: 180vh; }
.vfl-fullimage-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.vfl-fullimage-media { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: opacity, transform; }
.vfl-fullimage-media--placeholder { background: radial-gradient(120% 90% at 50% 20%, #3A322C 0%, #17130F 62%, #0C0A09 100%); }
.vfl-fullimage-media--placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(118deg, rgba(246,244,241,.05) 0 2px, rgba(0,0,0,0) 2px 26px);
}
/* Rev. 24/09/2026: rimossa su mobile (richiesta cliente) – resta solo su
   desktop. display:none è sicuro anche col JS che continua a girare
   (nessun effetto su un elemento non renderizzato). */
@media (max-width: 900px) {
  .vfl-fullimage-section { display: none; }
}

/* --------------------------------------------------------------------
 * Statement a scroll (pin + snap + crossfade/zoom)
 * ------------------------------------------------------------------ */
.vfl-statement-section { position: relative; }
.vfl-statement-spacers { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.vfl-statement-spacers span { display: block; height: var(--vfl-slide-vh, 100vh); scroll-snap-align: start; }
.vfl-statement-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 5vw; overflow: hidden; }
.vfl-statement { position: absolute; max-width: 22ch; text-align: center; font-size: clamp(28px,6.4vw,104px); line-height: .96; letter-spacing: -.055em; font-weight: 400; opacity: 0; will-change: transform, opacity, filter; }
.vfl-statement-dots { position: absolute; left: 0; right: 0; bottom: 78px; display: flex; justify-content: center; gap: 6px; }
.vfl-dot { width: 26px; height: 3px; border-radius: 100px; background: rgba(20,17,15,.16); display: block; transition: background .5s ease; }
.vfl-dot.is-active { background: var(--vfl-accent, #CE776B); }

/* --------------------------------------------------------------------
 * Why VIFLO
 * ------------------------------------------------------------------ */
.vfl-why-section { padding: 0 clamp(18px,3vw,44px) clamp(80px,12vh,150px); }
.vfl-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.vfl-section-head h2 { margin: 0; font-size: clamp(30px,5.6vw,92px); line-height: .94; letter-spacing: -.05em; font-weight: 400; }
.vfl-section-head__eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(20,17,15,.42); }
.vfl-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.vfl-why-card { background: #F1EEEA; border-radius: 22px; padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 24px; min-height: 340px; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity 1.1s ease; }
.vfl-why-card:hover { transform: translateY(-8px); }
.vfl-why-card__top { display: flex; align-items: center; justify-content: space-between; }
.vfl-why-card__num { font-size: 11px; letter-spacing: .18em; font-weight: 500; color: rgba(20,17,15,.5); }
.vfl-why-card__dot { width: 36px; height: 8px; border-radius: 100px; display: block; }
.vfl-why-card h3 { margin: 0; font-size: clamp(24px,2.5vw,40px); line-height: 1; letter-spacing: -.035em; font-weight: 400; max-width: 13ch; }
.vfl-why-card p { margin: auto 0 0; font-size: 15px; line-height: 1.6; color: rgba(20,17,15,.6); }

/* --------------------------------------------------------------------
 * FIR Technology
 * ------------------------------------------------------------------ */
.vfl-tech-section { position: relative; height: 300vh; padding: 0 clamp(18px,3vw,44px); box-sizing: border-box; }
.vfl-tech-sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(20px,3vw,48px); align-items: center; padding-bottom: 60px; box-sizing: border-box; }
.vfl-tech-visual { position: relative; height: 74vh; border-radius: 26px; overflow: hidden; background: var(--vfl-dark-2, #0F0D0C); background-size: cover; background-position: center; }
.vfl-tech-visual__bg { position: absolute; inset: -14%; background: radial-gradient(90% 80% at 30% 30%, #2B2521 0%, #131010 70%); will-change: transform; }
.vfl-tech-visual__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 60%, rgba(206,119,107,.55) 0%, rgba(206,119,107,0) 55%); }
.vfl-tech-visual__orbit { position: absolute; right: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(246,244,241,.25); border-top-color: var(--vfl-accent, #CE776B); display: block; animation: vfl-orbit 5s linear infinite; }
.vfl-tech-copy { display: flex; flex-direction: column; gap: 26px; }
.vfl-tech-copy > .vfl-section-head__eyebrow { display: block; }
.vfl-tech-copy h2 { margin: 0; font-size: clamp(28px,4vw,64px); line-height: .98; letter-spacing: -.045em; font-weight: 400; max-width: 13ch; }
.vfl-tech-copy__intro { margin: 0; font-size: clamp(16px,1.5vw,22px); line-height: 1.4; font-weight: 300; max-width: 34ch; }
.vfl-tech-benefits { display: flex; flex-direction: column; gap: 0; }
.vfl-tech-benefit { padding: 14px 0; border-top: 1px solid rgba(20,17,15,.14); opacity: .3; transition: opacity .6s cubic-bezier(.16,1,.3,1); }
.vfl-tech-benefit.is-active { opacity: 1; }
.vfl-tech-benefit__row { display: flex; align-items: center; gap: 12px; }
.vfl-tech-benefit__dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.vfl-tech-benefit__title { font-size: clamp(17px,1.7vw,24px); letter-spacing: -.02em; }
.vfl-tech-benefit__num { margin-left: auto; font-size: 10px; letter-spacing: .18em; color: rgba(20,17,15,.35); }
/* Espansione a "altezza automatica": grid-template-rows 0fr→1fr si anima
   fino all'altezza reale del testo, qualunque essa sia – niente più
   max-height fisso (che su schermi stretti tagliava i testi più lunghi,
   es. "Ossigenazione"). */
.vfl-tech-benefit__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.16,1,.3,1); }
.vfl-tech-benefit.is-active .vfl-tech-benefit__body { grid-template-rows: 1fr; }
.vfl-tech-benefit__body p { margin: 0; min-height: 0; opacity: 0; overflow: hidden; font-size: 16px; line-height: 1.6; color: rgba(20,17,15,.62); max-width: 44ch; transition: opacity .5s ease, margin-top .5s ease; }
.vfl-tech-benefit.is-active .vfl-tech-benefit__body p { opacity: 1; margin-top: 10px; }
/* Rev. 24/09/2026: su mobile, sezione riorganizzata in verticale (titolo →
   immagine → titoli e testi) invece del layout a due colonne pinnato,
   pensato per schermi larghi. display:contents su .vfl-tech-copy fa sì che
   i suoi figli (eyebrow/h2/intro) diventino elementi flex diretti di
   .vfl-tech-sticky, riordinabili con order insieme a .vfl-tech-visual e
   .vfl-tech-benefits – zero modifiche al markup, zero rischio per il
   desktop (tutto qui dentro vale solo sotto i 900px). L'evidenziazione "un
   beneficio alla volta" era pensata per lo scroll pinnato: su mobile,
   senza pin, i testi restano tutti aperti e leggibili in sequenza. */
@media (max-width: 900px) {
  .vfl-tech-section { height: auto; padding-top: 8px; padding-bottom: 8px; }
  .vfl-tech-sticky {
    position: static; height: auto; display: flex; flex-direction: column;
    gap: 28px; align-items: stretch; padding-bottom: 0;
  }
  .vfl-tech-copy { display: contents; }
  .vfl-tech-copy > .vfl-section-head__eyebrow,
  .vfl-tech-copy > h2,
  .vfl-tech-copy > .vfl-tech-copy__intro { order: 1; }
  .vfl-tech-visual { order: 2; height: auto; aspect-ratio: 4 / 3; }
  .vfl-tech-benefits { order: 3; }
  .vfl-tech-benefit { opacity: 1 !important; }
  .vfl-tech-benefit__body { grid-template-rows: 1fr !important; }
  .vfl-tech-benefit__body p { opacity: 1 !important; margin-top: 10px !important; }
}

/* --------------------------------------------------------------------
 * Marquee
 * ------------------------------------------------------------------ */
.vfl-banner-wrap { padding: 0 12px 12px; }
.vfl-banner { position: relative; overflow: hidden; background: var(--vfl-dark, #14110F); border-radius: 18px; padding: clamp(26px,5vh,48px) 0; }
.vfl-banner__track { display: flex; width: max-content; animation: vfl-marquee-scroll 32s linear infinite; }
.vfl-banner__item {
  display: block; flex-shrink: 0; white-space: nowrap; padding: 0 clamp(24px,3vw,48px);
  color: var(--vfl-cream, #F6F4F1); font-size: clamp(18px,2.4vw,32px); line-height: 1; font-weight: 300; letter-spacing: -.02em;
}
.vfl-banner__item:not(:last-child) { border-right: 1px solid rgba(246,244,241,.25); }
@keyframes vfl-marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vfl-banner__track { animation: none; } }

/* --------------------------------------------------------------------
 * Science
 * ------------------------------------------------------------------ */
.vfl-science-section { background: var(--vfl-dark, #14110F); color: var(--vfl-cream, #F6F4F1); margin: 12px; border-radius: 26px; padding: clamp(60px,10vh,120px) clamp(18px,3vw,44px); }
.vfl-science-section .vfl-section-head { margin-bottom: 56px; }
.vfl-science-section .vfl-section-head h2 { font-size: clamp(28px,5.2vw,86px); max-width: 16ch; }
.vfl-science-section .vfl-section-head__eyebrow { color: rgba(246,244,241,.42); }
.vfl-science-stats { display: flex; flex-wrap: wrap; gap: clamp(28px,6vw,80px); align-items: flex-end; padding-bottom: 58px; }
.vfl-science-stat { display: flex; flex-direction: column; gap: 10px; }
/* line-height 1 (non .82 come nel resto dei titoli): a queste dimensioni
   (fino a 168px) un interlinea troppo stretta rischia di far tagliare la
   parte alta della cifra dal contenitore overflow:hidden dell'animazione
   di reveal, a seconda del font effettivamente renderizzato dal browser. */
.vfl-science-stat__value { font-size: clamp(56px,10vw,168px); line-height: 1; letter-spacing: -.06em; font-weight: 400; display: block; }
.vfl-science-stat__label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(246,244,241,.55); }
.vfl-science-rule { flex: 1; min-width: 60px; height: 1px; background: rgba(246,244,241,.3); margin-bottom: 24px; display: block; }
.vfl-science-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.vfl-metric-card { background: #1C1815; border-radius: 18px; padding: 26px 20px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity 1.1s ease; }
.vfl-metric-card:hover { transform: translateY(-6px); }
.vfl-metric-card__value { font-size: clamp(25px,2.7vw,41px); line-height: 1; letter-spacing: -.045em; font-weight: 400; }
.vfl-metric-card__label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.vfl-metric-card__note { margin-top: auto; font-size: 16px; line-height: 1.5; color: rgba(246,244,241,.45); font-weight: 300; }

/* --------------------------------------------------------------------
 * VIFLO × Nastrotex (collezione nastri)
 * ------------------------------------------------------------------ */
.vfl-nastrotex-section { padding: clamp(80px,12vh,150px) clamp(18px,3vw,44px); }
.vfl-nastrotex-section .vfl-section-head { margin-bottom: 40px; }
.vfl-nastrotex-section .vfl-section-head h2 { font-size: clamp(26px,4.8vw,78px); line-height: .96; }
.vfl-nastrotex-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(20px,3vw,48px); }
.vfl-nastrotex-intro__lead { margin: 0; font-size: clamp(18px,2vw,30px); line-height: 1.16; letter-spacing: -.03em; font-weight: 300; max-width: 22ch; }
.vfl-nastrotex-intro__body { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(20,17,15,.6); max-width: 50ch; }
.vfl-nastrotex-collection-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(20,17,15,.42); display: block; margin-bottom: 18px; }
/* Carosello collezione: 4 colonne visibili su desktop, a scorrimento
   orizzontale (drag/trackpad/touch nativi + frecce). */
.vfl-collezione-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.vfl-collezione-head .vfl-nastrotex-collection-label { margin-bottom: 0; }
.vfl-carousel-nav { display: flex; gap: 8px; flex-shrink: 0; }
.vfl-carousel-nav__btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(20,17,15,.2); background: transparent;
  font-size: 16px; line-height: 1; color: var(--vfl-ink, #14110F); cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.vfl-carousel-nav__btn:hover { background: var(--vfl-accent, #CE776B); border-color: var(--vfl-accent, #CE776B); color: var(--vfl-cream, #F6F4F1); }
.vfl-carousel { overflow: hidden; }
.vfl-carousel__track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.vfl-carousel__track::-webkit-scrollbar { display: none; }
.vfl-carousel__track > .vfl-tape-card-wrap { flex: 0 0 calc((100% - 30px) / 4); scroll-snap-align: start; }
@media (max-width: 900px) {
  .vfl-carousel__track > .vfl-tape-card-wrap { flex-basis: calc((100% - 10px) / 2); }
}
@media (max-width: 560px) {
  .vfl-carousel__track > .vfl-tape-card-wrap { flex-basis: 84%; }
}
.vfl-tape-card { position: relative; height: clamp(240px,30vw,380px); border-radius: 20px; overflow: hidden; background: #DCD8D3; transition: transform .6s cubic-bezier(.16,1,.3,1); background-size: cover; background-position: center; }
.vfl-tape-card:hover { transform: translateY(-8px); }
.vfl-tape-card__pattern { position: absolute; inset: -12%; background: repeating-linear-gradient(118deg,#E3DFDA 0 14px,#D6D1CB 14px 28px); will-change: transform; }
/* Rev. 23/09/2026: velo sfumato dietro l'etichetta, per restare leggibile
   sopra qualunque foto (non solo il pattern placeholder chiaro) – sparisce
   in hover assieme all'etichetta, per vedere la foto pulita. */
.vfl-tape-card__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(15,13,12,.72) 0%, rgba(15,13,12,0) 100%); pointer-events: none; transition: opacity .5s cubic-bezier(.16,1,.3,1); }
.vfl-tape-card:hover .vfl-tape-card__scrim { opacity: 0; }
.vfl-tape-card__label { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,244,241,.95); text-shadow: 0 1px 3px rgba(0,0,0,.35); transition: opacity .4s ease; }
.vfl-tape-card:hover .vfl-tape-card__label { opacity: 0; }
/* Padding superiore ridotto: la sezione ora segue direttamente
   "VIFLO™ × Nastrotex Cufra", che le fa da intro – deve leggersi come
   un blocco unico, non come due sezioni scollegate. */
.vfl-collezione-section { padding: clamp(16px,3vh,32px) clamp(18px,3vw,44px) clamp(80px,12vh,140px); }
.vfl-tape-card-wrap { display: flex; flex-direction: column; gap: 12px; }
.vfl-tape-card-wrap .vfl-tape-card { margin: 0; }
.vfl-tape-card__desc { margin: 0; max-width: 26ch; font-size: 13px; line-height: 1.5; color: rgba(20,17,15,.62); }
.vfl-nastrotex-footer { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(20,17,15,.14); display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.vfl-nastrotex-footer__note { font-size: clamp(18px,1.8vw,26px); font-weight: 300; letter-spacing: -.02em; }
.vfl-btn-dark {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--vfl-ink, #14110F); color: var(--vfl-cream, #F6F4F1);
  border-radius: 100px; font-size: 12px; font-weight: 500; transition: background .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.vfl-btn-dark:hover { background: var(--vfl-accent, #CE776B); color: var(--vfl-cream, #F6F4F1); transform: translateY(-3px); }

/* --------------------------------------------------------------------
 * Applications (pin + crossfade)
 * ------------------------------------------------------------------ */
.vfl-apps-section { position: relative; }
.vfl-apps-spacers { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.vfl-apps-spacers span { display: block; height: var(--vfl-slide-vh, 100vh); scroll-snap-align: start; }
.vfl-apps-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 5vw; }
/* Immagine di sfondo opzionale (rev. 22/09/2026), usata solo senza video. */
.vfl-apps-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* Velo sfocato sopra l'eventuale video di sfondo – colore = sfondo pagina,
   opacità configurabile da ACF. Deve stare nel markup PRIMA del contenuto
   (vedi section-applications.php) così il contenuto resta sopra, nitido. */
/* Velo sopra un video di sfondo – colore, opacità e blur configurabili
   da ACF (per sezione: --vfl-overlay-color-rgb/-alpha/-blur impostate
   inline da PHP). Stessa classe per hero e applications. */
.vfl-bg-overlay {
  position: absolute; inset: 0; pointer-events: none;
  backdrop-filter: blur(var(--vfl-overlay-blur, 0px));
  -webkit-backdrop-filter: blur(var(--vfl-overlay-blur, 0px));
  background: rgba(var(--vfl-overlay-color-rgb, 231, 228, 224), var(--vfl-overlay-alpha, 0));
}
.vfl-apps-head { position: absolute; top: clamp(60px,10vh,110px); left: clamp(18px,3vw,44px); right: clamp(18px,3vw,44px); display: flex; align-items: baseline; justify-content: center; will-change: transform, opacity; }
.vfl-apps-head h2 { margin: 0; font-size: clamp(24px,3.4vw,56px); line-height: 1; letter-spacing: -.045em; font-weight: 400; text-align: center; }
.vfl-app-item { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; will-change: transform, opacity, filter; }
.vfl-app-item__num { font-size: 11px; letter-spacing: .2em; color: rgba(20,17,15,.4); font-weight: 500; }
.vfl-app-item__name { font-size: clamp(38px,9vw,150px); line-height: .92; letter-spacing: -.055em; font-weight: 400; text-align: center; }
.vfl-apps-dots { position: absolute; left: 0; right: 0; bottom: 78px; display: flex; justify-content: center; gap: 6px; }

/* --------------------------------------------------------------------
 * Sustainability
 * ------------------------------------------------------------------ */
.vfl-sust-section { padding: 0 clamp(18px,3vw,44px) clamp(80px,12vh,140px); }
.vfl-sust-card {
  position: relative; overflow: hidden; border-radius: 26px; background: #DDE3CE;
  padding: clamp(40px,7vw,88px) clamp(24px,4vw,64px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(24px,4vw,56px); align-items: end;
}
.vfl-sust-card__blob { position: absolute; top: -30%; left: -8%; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(183,207,107,.55) 0%, rgba(183,207,107,0) 70%); pointer-events: none; }
.vfl-sust-card__left { position: relative; }
.vfl-sust-card__eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(20,17,15,.45); display: block; margin-bottom: 22px; }
.vfl-sust-card h2 { margin: 0; font-size: clamp(28px,4.4vw,72px); line-height: .98; letter-spacing: -.05em; font-weight: 400; max-width: 14ch; }
.vfl-sust-card__right { display: flex; flex-direction: column; gap: 20px; position: relative; }
.vfl-sust-card__p1 { margin: 0; font-size: 17px; line-height: 1.5; max-width: 44ch; font-weight: 300; }
.vfl-sust-card__p2 { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(20,17,15,.62); max-width: 48ch; }

/* --------------------------------------------------------------------
 * Contatti / Footer
 * ------------------------------------------------------------------ */
.vfl-contact-section { background: var(--vfl-dark, #14110F); color: var(--vfl-cream, #F6F4F1); margin: 0 12px 12px; border-radius: 26px; padding: clamp(60px,10vh,120px) clamp(18px,3vw,44px) 34px; }
.vfl-contact-top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 62px; border-bottom: 1px solid rgba(246,244,241,.16); flex-wrap: wrap; }
.vfl-contact-top h2 { margin: 0; font-size: clamp(26px,5vw,84px); line-height: .96; letter-spacing: -.05em; font-weight: 400; }
.vfl-contact-top__email { font-size: clamp(14px,1.4vw,20px); color: var(--vfl-cream, #F6F4F1); border-bottom: 1px solid rgba(246,244,241,.3); padding-bottom: 7px; font-weight: 300; }
.vfl-contact-top__email:hover { color: var(--vfl-accent, #CE776B); border-bottom-color: var(--vfl-accent, #CE776B); }
.vfl-contact-cols { padding-top: 52px; padding-bottom: 46px; display: grid; grid-template-columns: minmax(0,1.2fr) repeat(3, minmax(0,.85fr)); gap: 32px; }
.vfl-contact-brand { display: flex; flex-direction: column; gap: 18px; }
.vfl-contact-brand img { height: 22px; width: auto; max-width: 200px; object-fit: contain; align-self: flex-start; flex-shrink: 0; display: block; filter: invert(1) brightness(1.6); }
.vfl-contact-brand p { margin: 0; font-size: 13px; line-height: 1.8; color: rgba(246,244,241,.55); }
.vfl-contact-col { display: flex; flex-direction: column; gap: 14px; }
.vfl-contact-col__title { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(246,244,241,.4); }
.vfl-contact-col__items { display: flex; flex-direction: column; gap: 8px; }
.vfl-contact-col__items span, .vfl-contact-col__items a { font-size: 14px; line-height: 1.5; color: rgba(246,244,241,.8); font-weight: 300; overflow-wrap: anywhere; }
.vfl-contact-col__items a:hover { color: var(--vfl-accent, #CE776B); }
.vfl-contact-bottom { border-top: 1px solid rgba(246,244,241,.16); padding-top: 22px; padding-bottom: 56px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,244,241,.68); }
.vfl-contact-bottom__policy { display: flex; gap: 22px; flex-wrap: wrap; }
.vfl-contact-bottom a { color: rgba(246,244,241,.68); }
.vfl-contact-bottom a:hover { color: var(--vfl-accent, #CE776B); }
.vfl-contact-bottom__sites { display: flex; gap: 22px; }